Varia: Add Blog Posts support and code style cleanup

This commit is contained in:
Takashi Irie 2019-12-19 15:03:22 +00:00
parent 9f12791efe
commit 0b6c6f7768
5 changed files with 590 additions and 240 deletions

View file

@ -1,19 +1,81 @@
.wp-block-a8c-blog-posts {
article {
margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
&.image-aligntop {
.post-thumbnail {
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
}
}
.post-thumbnail img {
width: auto;
&.image-alignleft {
.post-thumbnail {
margin-right: #{map-deep-get($config-global, "spacing", "vertical")};
}
}
&.image-alignright {
.post-thumbnail {
margin-left: #{map-deep-get($config-global, "spacing", "vertical")};
}
}
&.image-alignbehind .post-has-image {
.entry-wrapper {
padding: #{map-deep-get($config-global, "spacing", "vertical")};;
}
a:hover {
color: currentColor;
}
}
.article-section-title {
font-size: (strip-unit(map-deep-get($config-global, "font", "size", "base")) + 0em);
margin-top: 0;
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
}
article {
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
@include media(mobile) {
margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
}
}
.post-thumbnail {
img {
vertical-align: middle;
width: auto;
}
}
.entry-wrapper > * {
/* 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;
}
&:last-child {
margin-bottom: 0;
}
}
.entry-title {
a {
color: #{map-deep-get($config-global, "color", "primary", "default")};
text-decoration: underline;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
&:hover {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
text-decoration: underline;
}
.has-background:not(.has-background-background-color) &,
@ -24,11 +86,34 @@
}
}
.more-link {
display: block;
color: inherit;
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
&:after {
content: "\02192";
display: inline-block;
margin-left: 0.5em;
}
&:hover,
&:active {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
text-decoration: none;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
}
}
.entry-meta,
.entry-footer,
.cat-links {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
font-size: (strip-unit(map-deep-get($config-global, "font", "size", "sm")) + 0em);
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
@ -36,18 +121,48 @@
color: currentColor;
}
> * {
display: inline-block;
.byline:not(:last-child) {
margin-right: #{map-deep-get($config-global, "spacing", "unit")};
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
.published + .updated {
display: none;
}
a {
color: currentColor;
text-decoration: underline;
&:hover,
&:active {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
text-decoration: none;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
}
}
}
}
& + .button {
// Extend button style
@extend %button-style;
display: inline-block;
font-size: (strip-unit(map-deep-get($config-global, "font", "size", "md")) + 0em);
&:hover {
cursor: default;
}
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
background-color: transparent;
border: 2px solid currentColor;
color: currentColor;
}
}
}

View file

@ -1,107 +1,154 @@
.wp-block-newspack-blocks-homepage-articles article {
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;
}
&:last-child {
margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
}
.post-thumbnail img {
width: auto;
}
.entry-title {
a {
color: #{map-deep-get($config-global, "color", "primary", "default")};
text-decoration: underline;
&:hover {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
}
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles {
&.image-aligntop {
.post-thumbnail {
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
}
}
.entry-wrapper > * {
/* Vertical margins logic between post details */
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
&.image-alignleft {
.post-thumbnail {
margin-right: #{map-deep-get($config-global, "spacing", "vertical")};
}
}
&.image-alignright {
.post-thumbnail {
margin-left: #{map-deep-get($config-global, "spacing", "vertical")};
}
}
&.image-alignbehind .post-has-image .entry-wrapper {
padding: #{map-deep-get($config-global, "spacing", "vertical")};;
}
&.is-grid article {
margin-top: 0;
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
@include media(mobile) {
margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
}
}
.article-section-title {
font-size: #{map-deep-get($config-global, "font", "size", "base")};
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
& + article {
margin-top: 0;
}
}
article {
display: block;
/* Vertical margins logic between posts */
margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
@include media(mobile) {
margin-top: #{3 * map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.more-link {
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
}
.entry-meta,
.entry-footer,
.cat-links {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
margin-bottom: #{3 * map-deep-get($config-global, "spacing", "vertical")};
}
> * {
display: inline-block;
margin-right: #{map-deep-get($config-global, "spacing", "unit")};
vertical-align: middle;
.post-thumbnail img {
width: auto;
}
.entry-wrapper > * {
/* 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;
}
&:last-child {
margin-right: 0;
margin-bottom: 0;
}
}
.published + .updated {
display: none;
}
.entry-title {
a {
color: #{map-deep-get($config-global, "color", "primary", "default")};
a {
color: currentColor;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
&:hover,
&:active {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
&:hover {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
text-decoration: underline;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
}
}
}
.svg-icon {
fill: currentColor;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: calc(0.25 * #{map-deep-get($config-global, "spacing", "unit")});
.more-link {
@include media(mobile) {
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
}
}
.entry-meta,
.cat-links {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
> span > * {
vertical-align: top;
}
.byline:not(:last-child) {
margin-right: #{map-deep-get($config-global, "spacing", "unit")};
}
.published + .updated {
display: none;
}
a {
color: currentColor;
text-decoration: underline;
&:hover,
&:active {
color: #{map-deep-get($config-global, "color", "primary", "hover")};
text-decoration: none;
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] & {
color: currentColor;
}
}
}
}
}
}
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-top: 0;
margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
}
button[data-load-more-btn] {
// Extend button style
@extend %button-style;
@ -114,4 +161,4 @@ button[data-load-more-btn] {
border: 2px solid currentColor;
color: currentColor;
}
}
}

View file

@ -125,7 +125,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* lets use a placeholder to keep them all
* in-sync
*/
.fse-template-part .main-navigation .button {
.wp-block-a8c-blog-posts + .button, .fse-template-part .main-navigation .button {
line-height: 1;
color: white;
cursor: pointer;
@ -139,22 +139,22 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
padding: 16px 16px;
}
.fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .button:after {
.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before, .wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
content: '';
display: block;
height: 0;
width: 0;
}
.fse-template-part .main-navigation .button:before {
.wp-block-a8c-blog-posts + .button:before, .fse-template-part .main-navigation .button:before {
margin-bottom: -0.12em;
}
.fse-template-part .main-navigation .button:after {
.wp-block-a8c-blog-posts + .button:after, .fse-template-part .main-navigation .button:after {
margin-top: -0.11em;
}
.fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .has-focus.button {
.wp-block-a8c-blog-posts + .button:hover, .fse-template-part .main-navigation .button:hover, .wp-block-a8c-blog-posts + .button:focus, .fse-template-part .main-navigation .button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .fse-template-part .main-navigation .has-focus.button {
color: white;
background-color: indigo;
}
@ -300,21 +300,63 @@ object {
* - In the future the Block styles may get compiled to individual .css
* files and conditionally loaded
*/
.wp-block-a8c-blog-posts.image-aligntop .post-thumbnail {
margin-bottom: 16px;
}
.wp-block-a8c-blog-posts.image-alignleft .post-thumbnail {
margin-right: 32px;
}
.wp-block-a8c-blog-posts.image-alignright .post-thumbnail {
margin-left: 32px;
}
.wp-block-a8c-blog-posts.image-alignbehind .post-has-image .entry-wrapper {
padding: 32px;
}
.wp-block-a8c-blog-posts.image-alignbehind .post-has-image a:hover {
color: currentColor;
}
.wp-block-a8c-blog-posts .article-section-title {
font-size: 1em;
margin-top: 0;
margin-bottom: 16px;
}
.wp-block-a8c-blog-posts article {
margin-bottom: calc(3 * 32px);
margin-bottom: 64px;
}
@media only screen and (min-width: 560px) {
.wp-block-a8c-blog-posts article {
margin-bottom: 96px;
}
}
.wp-block-a8c-blog-posts .post-thumbnail img {
vertical-align: middle;
width: auto;
}
.wp-block-a8c-blog-posts .entry-wrapper > * {
/* Vertical margins logic between post details */
margin-top: 16px;
margin-bottom: 16px;
}
.wp-block-a8c-blog-posts .entry-wrapper > *:first-child {
margin-top: 0;
}
.wp-block-a8c-blog-posts .entry-wrapper > *:last-child {
margin-bottom: 0;
}
.wp-block-a8c-blog-posts .entry-title a {
color: blue;
text-decoration: underline;
}
.wp-block-a8c-blog-posts .entry-title a:hover {
color: indigo;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
@ -323,21 +365,51 @@ object {
color: currentColor;
}
.wp-block-a8c-blog-posts .entry-title a:hover {
color: indigo;
text-decoration: underline;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
color: currentColor;
}
.wp-block-a8c-blog-posts .more-link {
display: block;
color: inherit;
margin-top: 16px;
}
.wp-block-a8c-blog-posts .more-link:after {
content: "\02192";
display: inline-block;
margin-left: 0.5em;
}
.wp-block-a8c-blog-posts .more-link:hover, .wp-block-a8c-blog-posts .more-link:active {
color: indigo;
text-decoration: none;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
[style*="background-color"] .wp-block-a8c-blog-posts .more-link:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
[style*="background-color"] .wp-block-a8c-blog-posts .more-link:active {
color: currentColor;
}
.wp-block-a8c-blog-posts .entry-meta,
.wp-block-a8c-blog-posts .entry-footer,
.wp-block-a8c-blog-posts .cat-links {
color: #767676;
font-size: 0.83333rem;
font-size: 0.83333em;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
.wp-block-a8c-blog-posts .entry-footer,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-a8c-blog-posts .entry-footer,
[style*="background-color"]
.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links,
@ -346,26 +418,64 @@ object {
color: currentColor;
}
.wp-block-a8c-blog-posts .entry-meta > *,
.wp-block-a8c-blog-posts .entry-footer > *,
.wp-block-a8c-blog-posts .cat-links > * {
display: inline-block;
.wp-block-a8c-blog-posts .entry-meta .byline:not(:last-child),
.wp-block-a8c-blog-posts .cat-links .byline:not(:last-child) {
margin-right: 16px;
vertical-align: middle;
}
.wp-block-a8c-blog-posts .entry-meta > *:last-child,
.wp-block-a8c-blog-posts .entry-footer > *:last-child,
.wp-block-a8c-blog-posts .cat-links > *:last-child {
margin-right: 0;
}
.wp-block-a8c-blog-posts .entry-meta .published + .updated,
.wp-block-a8c-blog-posts .entry-footer .published + .updated,
.wp-block-a8c-blog-posts .cat-links .published + .updated {
display: none;
}
.wp-block-a8c-blog-posts .entry-meta a,
.wp-block-a8c-blog-posts .cat-links a {
color: currentColor;
text-decoration: underline;
}
.wp-block-a8c-blog-posts .entry-meta a:hover, .wp-block-a8c-blog-posts .entry-meta a:active,
.wp-block-a8c-blog-posts .cat-links a:hover,
.wp-block-a8c-blog-posts .cat-links a:active {
color: indigo;
text-decoration: none;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:active, .has-background:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links a:hover,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links a:hover,
[style*="background-color"]
.wp-block-a8c-blog-posts .cat-links a:hover, .has-background:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links a:active,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-a8c-blog-posts .cat-links a:active,
[style*="background-color"]
.wp-block-a8c-blog-posts .cat-links a:active {
color: currentColor;
}
.wp-block-a8c-blog-posts + .button {
display: inline-block;
font-size: 1.2em;
}
.wp-block-a8c-blog-posts + .button:hover {
cursor: default;
}
.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
[style*="background-color"] .wp-block-a8c-blog-posts + .button {
background-color: transparent;
border: 2px solid currentColor;
color: currentColor;
}
.wp-block-button {
/* Default Style */
/* Outline Style */

View file

@ -1189,11 +1189,54 @@ object {
min-width: 300px;
}
.wp-block-newspack-blocks-homepage-articles.image-aligntop .post-thumbnail {
margin-bottom: 16px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignleft .post-thumbnail {
margin-left: 32px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignright .post-thumbnail {
margin-right: 32px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignbehind .post-has-image .entry-wrapper {
padding: 32px;
}
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-top: 0;
margin-bottom: 64px;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-bottom: 96px;
}
}
.wp-block-newspack-blocks-homepage-articles .article-section-title {
font-size: 1rem;
margin-bottom: 16px;
}
.wp-block-newspack-blocks-homepage-articles .article-section-title + article {
margin-top: 0;
}
.wp-block-newspack-blocks-homepage-articles article {
display: block;
/* Vertical margins logic between posts */
margin-top: calc(3 * 32px);
margin-bottom: calc(3 * 32px);
margin-top: 64px;
margin-bottom: 64px;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles article {
margin-top: 96px;
margin-bottom: 96px;
}
}
.wp-block-newspack-blocks-homepage-articles article:first-child {
@ -1201,28 +1244,13 @@ object {
}
.wp-block-newspack-blocks-homepage-articles article:last-child {
margin-bottom: calc(3 * 32px);
margin-bottom: 96px;
}
.wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
width: auto;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: blue;
text-decoration: underline;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: indigo;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
/* Vertical margins logic between post details */
margin-top: 16px;
@ -1237,12 +1265,34 @@ object {
margin-bottom: 0;
}
.wp-block-newspack-blocks-homepage-articles article .more-link {
margin-top: 16px;
.wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: blue;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: indigo;
text-decoration: underline;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: currentColor;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles article .more-link {
margin-top: 16px;
}
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta,
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
.wp-block-newspack-blocks-homepage-articles article .cat-links {
color: #767676;
font-size: 0.83333rem;
@ -1251,11 +1301,6 @@ object {
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links,
@ -1264,59 +1309,50 @@ object {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > span,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span {
display: inline-block;
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
vertical-align: top;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta .byline:not(:last-child),
.wp-block-newspack-blocks-homepage-articles article .cat-links .byline:not(:last-child) {
margin-left: 16px;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > span > *,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
display: inline-block;
vertical-align: middle;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span:last-child,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > span:last-child,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span:last-child {
margin-left: 0;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span .published + .updated,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > span .published + .updated,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span .published + .updated {
.wp-block-newspack-blocks-homepage-articles article .entry-meta .published + .updated,
.wp-block-newspack-blocks-homepage-articles article .cat-links .published + .updated {
display: none;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta a,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
.wp-block-newspack-blocks-homepage-articles article .cat-links a {
color: currentColor;
text-decoration: underline;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
color: indigo;
text-decoration: none;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
fill: currentColor;
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: calc(0.25 * 16px);
}
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-top: 0;
margin-bottom: calc(3 * 32px);
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
color: currentColor;
}
button[data-load-more-btn] {

View file

@ -1189,11 +1189,54 @@ object {
min-width: 300px;
}
.wp-block-newspack-blocks-homepage-articles.image-aligntop .post-thumbnail {
margin-bottom: 16px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignleft .post-thumbnail {
margin-right: 32px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignright .post-thumbnail {
margin-left: 32px;
}
.wp-block-newspack-blocks-homepage-articles.image-alignbehind .post-has-image .entry-wrapper {
padding: 32px;
}
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-top: 0;
margin-bottom: 64px;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-bottom: 96px;
}
}
.wp-block-newspack-blocks-homepage-articles .article-section-title {
font-size: 1rem;
margin-bottom: 16px;
}
.wp-block-newspack-blocks-homepage-articles .article-section-title + article {
margin-top: 0;
}
.wp-block-newspack-blocks-homepage-articles article {
display: block;
/* Vertical margins logic between posts */
margin-top: calc(3 * 32px);
margin-bottom: calc(3 * 32px);
margin-top: 64px;
margin-bottom: 64px;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles article {
margin-top: 96px;
margin-bottom: 96px;
}
}
.wp-block-newspack-blocks-homepage-articles article:first-child {
@ -1201,28 +1244,13 @@ object {
}
.wp-block-newspack-blocks-homepage-articles article:last-child {
margin-bottom: calc(3 * 32px);
margin-bottom: 96px;
}
.wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
width: auto;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: blue;
text-decoration: underline;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: indigo;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
/* Vertical margins logic between post details */
margin-top: 16px;
@ -1237,12 +1265,34 @@ object {
margin-bottom: 0;
}
.wp-block-newspack-blocks-homepage-articles article .more-link {
margin-top: 16px;
.wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: blue;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: indigo;
text-decoration: underline;
}
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
color: currentColor;
}
@media only screen and (min-width: 560px) {
.wp-block-newspack-blocks-homepage-articles article .more-link {
margin-top: 16px;
}
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta,
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
.wp-block-newspack-blocks-homepage-articles article .cat-links {
color: #767676;
font-size: 0.83333rem;
@ -1251,11 +1301,6 @@ object {
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .entry-footer,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links,
@ -1264,53 +1309,50 @@ object {
color: currentColor;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > *,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > *,
.wp-block-newspack-blocks-homepage-articles article .cat-links > * {
display: inline-block;
margin-right: 16px;
vertical-align: middle;
.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
vertical-align: top;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta > *:last-child,
.wp-block-newspack-blocks-homepage-articles article .entry-footer > *:last-child,
.wp-block-newspack-blocks-homepage-articles article .cat-links > *:last-child {
margin-right: 0;
.wp-block-newspack-blocks-homepage-articles article .entry-meta .byline:not(:last-child),
.wp-block-newspack-blocks-homepage-articles article .cat-links .byline:not(:last-child) {
margin-right: 16px;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta .published + .updated,
.wp-block-newspack-blocks-homepage-articles article .entry-footer .published + .updated,
.wp-block-newspack-blocks-homepage-articles article .cat-links .published + .updated {
display: none;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta a,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
.wp-block-newspack-blocks-homepage-articles article .cat-links a {
color: currentColor;
text-decoration: underline;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
color: indigo;
text-decoration: none;
}
.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
fill: currentColor;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: calc(0.25 * 16px);
}
.wp-block-newspack-blocks-homepage-articles.is-grid article {
margin-top: 0;
margin-bottom: calc(3 * 32px);
.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover, .has-background:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
[class*="background-color"]:not(.has-background-background-color)
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
[style*="background-color"]
.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
color: currentColor;
}
button[data-load-more-btn] {