From 3a04a2ea8b0293b60a445c1cae71988d67828849 Mon Sep 17 00:00:00 2001 From: Michael Cain Date: Mon, 16 Dec 2019 16:54:17 -0500 Subject: [PATCH] Rockfield --- rockfield/sass/_extra-child-theme.scss | 140 ++++++++++++---------- rockfield/style-editor.css | 30 +++++ rockfield/style.css | 160 +++++++++++++++++++++++-- 3 files changed, 256 insertions(+), 74 deletions(-) diff --git a/rockfield/sass/_extra-child-theme.scss b/rockfield/sass/_extra-child-theme.scss index 4476efbd4..4d5d805c8 100644 --- a/rockfield/sass/_extra-child-theme.scss +++ b/rockfield/sass/_extra-child-theme.scss @@ -108,7 +108,7 @@ a { margin: 0; text-align: right; - > div { + > div { background: #{map-deep-get($config-global, "color", "foreground", "dark")}; border-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} solid #{map-deep-get($config-global, "color", "foreground", "dark")}; box-shadow: inset 0 1px 0 0 #{map-deep-get($config-global, "color", "primary", "default")}; @@ -132,7 +132,7 @@ a { justify-content: flex-end; & > .menu-item-has-children > a::after { - font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")}; + font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")}; } .sub-menu .menu-item a { @@ -272,7 +272,8 @@ a { .entry-header, .page-title, .a8c-posts-list-item__title, -.a8c-posts-list .a8c-posts-list-item__featured { +.a8c-posts-list .a8c-posts-list-item__featured, +.wp-block-newspack-blocks-homepage-articles article .entry-title { text-align: center; } @@ -374,11 +375,13 @@ table, } // Blog Posts Listing -.a8c-posts-list { +.a8c-posts-list, +.wp-block-newspack-blocks-homepage-articles article { text-align: center; } -.a8c-posts-list__item { +.a8c-posts-list__item, +.wp-block-newspack-blocks-homepage-articles article { margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; margin-top: #{map-deep-get($config-global, "spacing", "vertical")}; @@ -392,7 +395,16 @@ table, } } -.a8c-posts-list__listing { +.wp-block-newspack-blocks-homepage-articles article .entry-title a { + text-decoration: none; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-meta { + display: block; +} + +.a8c-posts-list__listing, +.wp-block-newspack-blocks-homepage-articles article p { text-align: left; &:not(:last-child) { @@ -404,6 +416,12 @@ table, } } +//Newspack 'load more' is outside the wrapper. +button[data-load-more-btn] { + display: flex; + margin: 0 auto; +} + /** * Comments */ @@ -419,9 +437,9 @@ table, .comment-body { content: ""; - display: table; - table-layout: fixed; - width: 100%; + display: table; + table-layout: fixed; + width: 100%; } .comment-meta .comment-metadata { @@ -465,7 +483,7 @@ table, .avatar, .fn { - display: block; + display: block; margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; } } @@ -504,43 +522,43 @@ table, @extend %responsive-alignfull; } - .widget-title, - .widgettitle { - font-size: #{map-deep-get($config-global, "font", "size", "base")}; - @include font-family( map-deep-get($config-global, "font", "family", "ui") ); - margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")}; + .widget-title, + .widgettitle { + font-size: #{map-deep-get($config-global, "font", "size", "base")}; + @include font-family( map-deep-get($config-global, "font", "family", "ui") ); + margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")}; - &:empty { - display: none; - } - } + &:empty { + display: none; + } + } - @include media(laptop) { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + @include media(laptop) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; - & > *:nth-child(2) { - margin-top: 0; - } + & > *:nth-child(2) { + margin-top: 0; + } - .widget { - width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")}); - } - } + .widget { + width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")}); + } + } } // Widgets .widget_calendar, .widget_calendar { - caption { - font-weight: bold; - } + caption { + font-weight: bold; + } - td, - th { - text-align: center; - } + td, + th { + text-align: center; + } } .widget_archive, @@ -558,45 +576,45 @@ table, .widget_jp_blogs_i_follow, .widget_top-click, .widget_upcoming_events_widget { - ul { - border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default"); - list-style: none; - padding-left: 0; - } + ul { + border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default"); + list-style: none; + padding-left: 0; + } - li { - border-top: 1px solid map-deep-get($config-global, "color", "border", "default"); - padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0; - } + li { + border-top: 1px solid map-deep-get($config-global, "color", "border", "default"); + padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0; + } } .widget_categories .children, .widget_nav_menu .sub-menu, .widget_pages .children { - border-bottom: 0; - margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")}; - margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; - padding-left: map-deep-get($config-global, "spacing", "horizontal"); + border-bottom: 0; + margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")}; + margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; + padding-left: map-deep-get($config-global, "spacing", "horizontal"); } .widget_recent_entries .post-date { - display: block; + display: block; } .widget_rss { - cite, - .rssSummary, - .rss-date { - display: block; - } + cite, + .rssSummary, + .rss-date { + display: block; + } } .widget_search { - input[type="search"] { - display: block; - margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; - width: 100%; - } + input[type="search"] { + display: block; + margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")}; + width: 100%; + } } /** diff --git a/rockfield/style-editor.css b/rockfield/style-editor.css index 06b9cd53e..6d1c03658 100644 --- a/rockfield/style-editor.css +++ b/rockfield/style-editor.css @@ -294,6 +294,36 @@ object { * - In the future the Block styles may get compiled to individual .css * files and conditionally loaded */ +.wp-block-a8c-blog-posts article { + margin-bottom: 96px; +} + +.wp-block-a8c-blog-posts .post-thumbnail img { + width: auto; +} + +.wp-block-a8c-blog-posts .entry-title { + font-size: 2.48832rem; + letter-spacing: normal; + line-height: 1.125; +} + +.wp-block-a8c-blog-posts .entry-title a { + color: #222222; + text-decoration: underline; +} + +.wp-block-a8c-blog-posts .entry-title a:hover { + color: #444444; +} + +.wp-block-a8c-blog-posts .entry-meta, +.wp-block-a8c-blog-posts .entry-footer, +.wp-block-a8c-blog-posts .cat-links { + color: #757575; + font-size: 0.83333rem; +} + .wp-block-button { /* Default Style */ /* Outline Style */ diff --git a/rockfield/style.css b/rockfield/style.css index e862d38c5..e7844ff7c 100644 --- a/rockfield/style.css +++ b/rockfield/style.css @@ -194,7 +194,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration * let’s use a placeholder to keep them all * in-sync */ -button, +button[data-load-more-btn], button, .button, input[type="submit"], .wp-block-button__link, @@ -212,11 +212,11 @@ input[type="submit"], padding: 16px 20px; } -button:before, +button[data-load-more-btn]:before, button:before, .button:before, input[type="submit"]:before, .wp-block-button__link:before, -.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after, +.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after, .button:after, input[type="submit"]:after, .wp-block-button__link:after, @@ -227,7 +227,7 @@ input[type="submit"]:after, width: 0; } -button:before, +button[data-load-more-btn]:before, button:before, .button:before, input[type="submit"]:before, .wp-block-button__link:before, @@ -235,7 +235,7 @@ input[type="submit"]:before, margin-bottom: -0.12em; } -button:after, +button[data-load-more-btn]:after, button:after, .button:after, input[type="submit"]:after, .wp-block-button__link:after, @@ -1149,6 +1149,119 @@ object { min-width: 300px; } +.wp-block-newspack-blocks-homepage-articles article { + display: block; + /* Vertical margins logic between posts */ + margin-top: calc(3 * 32px); + margin-bottom: calc(3 * 32px); +} + +.wp-block-newspack-blocks-homepage-articles article:first-child { + margin-top: 0; +} + +.wp-block-newspack-blocks-homepage-articles article:last-child { + margin-bottom: calc(3 * 32px); +} + +.wp-block-newspack-blocks-homepage-articles article .post-thumbnail img { + width: auto; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-title { + font-size: 2.48832rem; + letter-spacing: normal; + line-height: 1.125; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-title a { + color: #222222; + text-decoration: underline; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover { + color: #444444; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * { + /* Vertical margins logic between post details */ + margin-top: 16px; + margin-bottom: 16px; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:first-child { + margin-top: 0; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:last-child { + margin-bottom: 0; +} + +.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: #757575; + font-size: 0.83333rem; +} + +.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; + margin-right: 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-right: 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 { + 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; +} + +.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: #444444; +} + +.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); +} + +button[data-load-more-btn] { + display: inline-block; +} + /** * Button */ @@ -3960,7 +4073,8 @@ p:not(.site-title) a:hover { .entry-header, .page-title, .a8c-posts-list-item__title, -.a8c-posts-list .a8c-posts-list-item__featured { +.a8c-posts-list .a8c-posts-list-item__featured, +.wp-block-newspack-blocks-homepage-articles article .entry-title { text-align: center; } @@ -4048,40 +4162,60 @@ table th, border-color: #E0E0E0; } -.a8c-posts-list { +.a8c-posts-list, +.wp-block-newspack-blocks-homepage-articles article { text-align: center; } -.a8c-posts-list__item { +.a8c-posts-list__item, +.wp-block-newspack-blocks-homepage-articles article { margin-bottom: 32px; margin-top: 32px; } @media only screen and (min-width: 560px) { - .a8c-posts-list__item { + .a8c-posts-list__item, + .wp-block-newspack-blocks-homepage-articles article { margin-bottom: 64px; margin-top: 64px; } } -.a8c-posts-list__item .a8c-posts-list-item__meta { +.a8c-posts-list__item .a8c-posts-list-item__meta, +.wp-block-newspack-blocks-homepage-articles article .a8c-posts-list-item__meta { text-align: center; } -.a8c-posts-list__listing { +.wp-block-newspack-blocks-homepage-articles article .entry-title a { + text-decoration: none; +} + +.wp-block-newspack-blocks-homepage-articles article .entry-meta { + display: block; +} + +.a8c-posts-list__listing, +.wp-block-newspack-blocks-homepage-articles article p { text-align: left; } -.a8c-posts-list__listing:not(:last-child) { +.a8c-posts-list__listing:not(:last-child), +.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) { margin-bottom: 32px; } @media only screen and (min-width: 560px) { - .a8c-posts-list__listing:not(:last-child) { + .a8c-posts-list__listing:not(:last-child), + .wp-block-newspack-blocks-homepage-articles article p:not(:last-child) { margin-bottom: 64px; } } +button[data-load-more-btn] { + display: flex; + margin: 0 auto; +} + /** * Comments */