0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Revising a8c-posts-list block styles

Browse source 
- Optimize selector nesting
- Add style for `featured` span to match archives
- Add vertical spacing to match index/archives
- Add link color to meta data and clean up spacing
- Use small font-size in meta data
This commit is contained in:
Allan Cole 2019-07-22 11:06:33 -04:00
parent c4a139a78d
commit 57fe9bfa1b
4 changed files with 156 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
varia/sass/blocks/image/_style.scss
View file

@ -11,7 +11,7 @@
}
img {
width: auto;
height: auto;
vertical-align: middle;
max-width: 100%;
}

77
varia/sass/blocks/posts-list/_style.scss
View file

@ -1,31 +1,38 @@
.a8c-posts-list {
margin-left: 0;
.a8c-posts-list__listing {
list-style: none;
margin: 0;
padding: 0;
.a8c-posts-list__listing {
list-style: none;
margin: 0;
padding: 0;
}
.a8c-posts-list-item__featured span {
color: #{map-deep-get($config-global, "color", "background")};
background-color: #{map-deep-get($config-global, "color", "primary", "default")};
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-weight: bold;
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
line-height: 1;
padding: calc(0.5 * #{map-deep-get($config-global, "spacing", "unit")}) calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} );
}
.a8c-posts-list__item {
display: block;
/* Vertical margins logic between posts */
margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
&:first-child {
margin-top: 0;
}
.a8c-posts-list__item {
display: block;
.a8c-posts-list-item__meta {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "xs")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
}
.a8c-posts-list-item__excerpt {
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
margin: 0;
}
&:last-child {
margin-bottom: 0;
}
& > li {
/* Vertical margins logic */
margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
.entry > * {
/* Vertical margins logic between post details */
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
&:first-child {
margin-top: 0;
@ -36,11 +43,21 @@
}
}
& > li > a {
font-family: #{map-deep-get($config-heading, "font", "family")};
font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
font-weight: #{map-deep-get($config-heading, "font", "weight")};
line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};
.a8c-posts-list-item__meta {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
a {
color: currentColor;
&:hover,
&:active {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
}
}
}
.a8c-posts-list-item__edit-link {
margin-left: #{map-deep-get($config-global, "spacing", "unit")};
}
}

64
varia/style-rtl.css
View file

@ -1371,7 +1371,7 @@ h6, .h6 {
}
img {
width: auto;
height: auto;
vertical-align: middle;
max-width: 100%;
}
@ -1562,6 +1562,68 @@ p.has-background {
padding: 16px 16px;
}
.a8c-posts-list__listing {
list-style: none;
margin: 0;
padding: 0;
}
.a8c-posts-list-item__featured span {
color: white;
background-color: blue;
font-family: sans-serif;
font-weight: bold;
font-size: 0.83333rem;
line-height: 1;
padding: calc(0.5 * 16px) calc(0.66 * 16px);
}
.a8c-posts-list__item {
display: block;
/* Vertical margins logic between posts */
margin-top: calc(3 * 32px);
margin-bottom: calc(3 * 32px);
}
.a8c-posts-list__item:first-child {
margin-top: 0;
}
.a8c-posts-list__item:last-child {
margin-bottom: 0;
}
.a8c-posts-list__item .entry > * {
/* Vertical margins logic between post details */
margin-top: 16px;
margin-bottom: 16px;
}
.a8c-posts-list__item .entry > *:first-child {
margin-top: 0;
}
.a8c-posts-list__item .entry > *:last-child {
margin-bottom: 0;
}
.a8c-posts-list__item .a8c-posts-list-item__meta {
color: #767676;
font-size: 0.83333rem;
}
.a8c-posts-list__item .a8c-posts-list-item__meta a {
color: currentColor;
}
.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
color: indigo;
}
.a8c-posts-list__item .a8c-posts-list-item__edit-link {
margin-right: 16px;
}
.wp-block-pullquote {
padding: calc( 3 * 16px) 0;
margin-right: 0;

75
varia/style.css
View file

@ -1371,7 +1371,7 @@ h6, .h6 {
}
img {
width: auto;
height: auto;
vertical-align: middle;
max-width: 100%;
}
@ -1562,51 +1562,66 @@ p.has-background {
padding: 16px 16px;
}
.a8c-posts-list {
margin-left: 0;
}
.a8c-posts-list .a8c-posts-list__listing {
.a8c-posts-list__listing {
list-style: none;
margin: 0;
padding: 0;
}
.a8c-posts-list .a8c-posts-list__item {
display: block;
}
.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__meta {
color: #767676;
font-size: 0.69444rem;
line-height: 1.78;
}
.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__excerpt {
.a8c-posts-list-item__featured span {
color: white;
background-color: blue;
font-family: sans-serif;
font-weight: bold;
font-size: 0.83333rem;
line-height: 1.78;
margin: 0;
line-height: 1;
padding: calc(0.5 * 16px) calc(0.66 * 16px);
}
.a8c-posts-list > li {
/* Vertical margins logic */
margin-top: 32px;
margin-bottom: 32px;
.a8c-posts-list__item {
display: block;
/* Vertical margins logic between posts */
margin-top: calc(3 * 32px);
margin-bottom: calc(3 * 32px);
}
.a8c-posts-list > li:first-child {
.a8c-posts-list__item:first-child {
margin-top: 0;
}
.a8c-posts-list > li:last-child {
.a8c-posts-list__item:last-child {
margin-bottom: 0;
}
.a8c-posts-list > li > a {
font-family: sans-serif;
font-size: 1.728rem;
font-weight: bold;
line-height: 1.125;
.a8c-posts-list__item .entry > * {
/* Vertical margins logic between post details */
margin-top: 16px;
margin-bottom: 16px;
}
.a8c-posts-list__item .entry > *:first-child {
margin-top: 0;
}
.a8c-posts-list__item .entry > *:last-child {
margin-bottom: 0;
}
.a8c-posts-list__item .a8c-posts-list-item__meta {
color: #767676;
font-size: 0.83333rem;
}
.a8c-posts-list__item .a8c-posts-list-item__meta a {
color: currentColor;
}
.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
color: indigo;
}
.a8c-posts-list__item .a8c-posts-list-item__edit-link {
margin-left: 16px;
}
.wp-block-pullquote {