Skip to content
This repository has been archived by the owner on Dec 2, 2020. It is now read-only.

Style the Latest Posts block to match the comps #153

Merged
merged 8 commits into from
Sep 28, 2020
Merged

Style the Latest Posts block to match the comps #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c3b3531
Adjust type sizes and spacing.
kjellr Sep 25, 2020
09088b9
Bring changes to frond-end too. Delete unused tablet styles.
kjellr Sep 25, 2020
a2b6d55
Add borders style.
kjellr Sep 25, 2020
16383c6
Front end styles, fix bottom padding on last item.
kjellr Sep 25, 2020
c769199
Add borders style.
kjellr Sep 25, 2020
2511ba0
Merge branch 'trunk' into update/latest-posts-block
kjellr Sep 25, 2020
5fbcf22
Add comments, recompile CSS.
kjellr Sep 25, 2020
e2d0e9a
Fix bottom margin of last item.
kjellr Sep 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 91 additions & 36 deletions assets/css/ie-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,7 @@ h6 {
/* Block Styles */
.wp-block-image.is-style-twentytwentyone-image-frame img {
padding: 20px;
border: 3px solid #000;
border: 3px solid #28303d;
}

.wp-block-latest-comments {
Expand All @@ -965,8 +965,8 @@ h6 {
}

.wp-block-latest-posts:not(.is-grid) > li {
margin-top: 30px;
margin-bottom: 30px;
margin-top: 50px;
margin-bottom: 50px;
}

.wp-block-latest-posts:not(.is-grid) > li:first-child {
Expand All @@ -986,8 +986,8 @@ h6 {
}

.wp-block-latest-posts > li > * {
margin-top: 15px;
margin-bottom: 15px;
margin-top: 10px;
margin-bottom: 10px;
}

.wp-block-latest-posts > li > *:first-child {
Expand All @@ -999,10 +999,12 @@ h6 {
}

.wp-block-latest-posts > li > a {
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1.875rem;
font-weight: normal;
line-height: 1.3;
margin-bottom: 10px;
}

@media only screen and (min-width: 652px) {
Expand All @@ -1011,6 +1013,12 @@ h6 {
}
}

.wp-block-latest-posts .wp-block-latest-posts__post-author {
color: #28303d;
font-size: 1.25rem;
line-height: 1.7;
}

.wp-block-latest-posts .wp-block-latest-posts__post-date {
color: #28303d;
font-size: 1rem;
Expand All @@ -1026,42 +1034,89 @@ h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1.125rem;
line-height: 1.7;
margin-top: 20px;
}

.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1.125rem;
line-height: 1.7;
margin-top: 20px;
}

@media only screen and (min-width: 592px) {
.wp-block-latest-posts.is-style-tto-alternating-grid {
overflow: hidden;
}
.wp-block-latest-posts.is-style-tto-alternating-grid > li {
width: calc(50% - 13px);
max-width: calc(50% - 13px);
text-align: right;
}
.wp-block-latest-posts.is-style-tto-alternating-grid > li:nth-child(2n + 1) {
float: right;
text-align: left;
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
border-top: 3px solid #28303d;
border-bottom: 3px solid #28303d;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
padding-bottom: 30px;
border-bottom: 1px solid #28303d;
margin-top: 30px;
margin-bottom: 30px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
padding-bottom: 30px;
border-bottom: 1px solid #28303d;
margin-top: 30px;
margin-bottom: 30px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child,
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child {
padding-bottom: 0;
border-bottom: none;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
box-shadow: inset 0 -1px 0 0 #28303d;
border-bottom: 2px solid #28303d;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
margin: 0;
padding-top: 30px;
padding-right: 25px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
padding-bottom: 30px;
}

@media screen and (min-width: 600px) {
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
width: 50%;
}
.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid {
display: inherit;
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
width: 33%;
}
.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li {
margin-top: 30px;
margin-right: 0;
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
width: 25%;
}
.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:first-child {
margin-top: 0;
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
width: 20%;
}
.wp-block-latest-posts.is-style-tto-alternating-grid.is-grid > li:last-child {
margin-bottom: 0;
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
width: 17%;
}
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
border: 3px solid #28303d;
padding: 30px 25px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
padding-bottom: 30px;
margin-bottom: 30px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
margin-top: 25px;
margin-bottom: 25px;
}

.gallery-item {
display: inline-block;
text-align: center;
Expand Down Expand Up @@ -1368,7 +1423,7 @@ p.has-background {
}

.wp-block-search .wp-block-search__input {
border: 3px solid #000;
border: 3px solid #28303d;
border-radius: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1.25rem;
Expand All @@ -1379,33 +1434,33 @@ p.has-background {
}

.wp-block-search .wp-block-search__input:focus {
border-color: #000;
border-color: #28303d;
}

.wp-block-separator {
border-bottom: 1px solid #000;
border-bottom: 1px solid #28303d;
clear: both;
}

hr {
border-bottom: 1px solid #000;
border-bottom: 1px solid #28303d;
clear: both;
}

.wp-block-separator[style*="text-align:right"] {
border-right-color: #000;
border-right-color: #28303d;
}

.wp-block-separator[style*="text-align: right"] {
border-right-color: #000;
border-right-color: #28303d;
}

hr[style*="text-align:right"] {
border-right-color: #000;
border-right-color: #28303d;
}

hr[style*="text-align: right"] {
border-right-color: #000;
border-right-color: #28303d;
}

.wp-block-separator.is-style-wide {
Expand Down Expand Up @@ -1434,11 +1489,11 @@ hr.is-style-dots.has-text-color:before {
}

.wp-block-separator.is-style-dots:before {
color: #000;
color: #28303d;
}

hr.is-style-dots:before {
color: #000;
color: #28303d;
}

.has-background:not(.has-background-background-color) .wp-block-separator,
Expand Down
Loading