Set Barnsbury to show footer widgets in 2 columns on smaller screens (#5967)
* Ignoring package lock * Set Barnsbury footer widgets to show in 2 columns including clearing floats and adding padding * Switch fix to use CSS grid It's so much nicer * un-ignore -package-lock.json * Compile SASS correctly Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
This commit is contained in:
jordesign
GitHub
parent
9929cbcbda
commit
b79b7bf8ca
4 changed files with 4199 additions and 55 deletions
4154
barnsbury/package-lock.json
generated
4154
barnsbury/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,6 +11,7 @@ $spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
|
|||
*/
|
||||
|
||||
a {
|
||||
|
||||
.site-header &,
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
@ -35,6 +36,7 @@ a {
|
|||
}
|
||||
|
||||
.social-navigation {
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -51,6 +53,7 @@ a {
|
|||
* CSS-grid Desktop Menu
|
||||
*/
|
||||
@include media(mobile) {
|
||||
|
||||
.site-header {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
|
|
@ -58,12 +61,12 @@ a {
|
|||
grid-template-rows: auto;
|
||||
grid-column-gap: $spacing_unit;
|
||||
grid-template-areas:
|
||||
"site-logo site-logo"
|
||||
"site-title social-navigation"
|
||||
"site-description main-navigation";
|
||||
"site-logo site-logo"
|
||||
"site-title social-navigation"
|
||||
"site-description main-navigation";
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -135,7 +138,7 @@ a {
|
|||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
border-bottom: (0.5 * $spacing_unit) solid #{map-deep-get($config-global, "color", "primary", "default")};
|
||||
border-left: (0.5 * $spacing_unit) solid transparent;
|
||||
border-right: (0.5 * $spacing_unit) solid transparent;
|
||||
|
|
@ -168,6 +171,7 @@ a {
|
|||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main
|
||||
*/
|
||||
|
|
@ -179,12 +183,14 @@ a {
|
|||
.site-main > .page-header,
|
||||
.site-main > .not-found > .page-header {
|
||||
margin-top: #{0.666 * $spacing_vertical};
|
||||
|
||||
@include media(mobile) {
|
||||
margin-top: #{2 * $spacing_vertical};
|
||||
}
|
||||
}
|
||||
|
||||
.site-main > {
|
||||
|
||||
article > .entry-header,
|
||||
.page-header,
|
||||
.not-found > .page-header {
|
||||
|
|
@ -197,7 +203,7 @@ a {
|
|||
}
|
||||
|
||||
#main .entry-content .entry-attachment {
|
||||
max-width: calc( 100% - #{2 * $spacing_vertical} );
|
||||
max-width: calc(100% - #{2 * $spacing_vertical});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -208,6 +214,7 @@ a {
|
|||
.page-title,
|
||||
.a8c-posts-list .a8c-posts-list-item__title,
|
||||
.wp-block-newspack-blocks-homepage-articles article .entry-title {
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -242,7 +249,7 @@ a {
|
|||
font-size: map-deep-get($config-global, "font", "size", "sm");
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent input[type=checkbox] + label {
|
||||
.comment-form-cookies-consent input[type="checkbox"] + label {
|
||||
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
|
||||
}
|
||||
|
||||
|
|
@ -259,16 +266,21 @@ a {
|
|||
*/
|
||||
|
||||
@include media(laptop) {
|
||||
|
||||
.site-footer .widget-area {
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 32px;
|
||||
|
||||
& > .widget {
|
||||
width: 50%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget {
|
||||
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -312,18 +324,20 @@ a {
|
|||
ul > li > a::before {
|
||||
font-weight: normal;
|
||||
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
||||
counter-increment: submenu
|
||||
counter-increment: submenu;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget_tag_cloud {
|
||||
|
||||
.tagcloud {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_search {
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -355,7 +369,7 @@ a {
|
|||
.widget_jp_blogs_i_follow li,
|
||||
.widget_rss_links li {
|
||||
font-family: inherit;
|
||||
font-family: var( --font-base, inherit );
|
||||
font-family: var(--font-base, inherit);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -364,13 +378,16 @@ a {
|
|||
.wp-block-cover,
|
||||
.wp-block-cover-image,
|
||||
.has-background {
|
||||
|
||||
.wp-block-separator {
|
||||
border-color: currentColor;
|
||||
border-color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-latest-posts {
|
||||
|
||||
> li {
|
||||
|
||||
> a {
|
||||
color: map-deep-get($config-global, "color", "foreground", "default");
|
||||
display: inline-block;
|
||||
|
|
@ -382,12 +399,13 @@ a {
|
|||
color: map-deep-get($config-global, "color", "primary", "default");
|
||||
|
||||
.has-background:not(.has-background-background-color) & {
|
||||
color: currentColor;
|
||||
color: currentcolor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-latest-posts__post-excerpt,
|
||||
.wp-block-latest-posts__post-full-content {
|
||||
margin-top: $spacing_unit;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ Author: Automattic
|
|||
Author URI: https://automattic.com/
|
||||
Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
|
||||
Requires at least: WordPress 4.9.6
|
||||
Version: 1.3.15
|
||||
Version: 1.3.16
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
Template: varia
|
||||
|
|
@ -4072,7 +4072,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
grid-column-gap: 16px;
|
||||
grid-template-areas: "site-logo site-logo" "site-title social-navigation" "site-description main-navigation";
|
||||
}
|
||||
.site-header:before, .site-header:after {
|
||||
.site-header::before, .site-header::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4139,9 +4139,9 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-navigation > div > ul > li:hover > ul:before,
|
||||
.main-navigation > div > ul > li[focus-within] > ul:before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul:before {
|
||||
.main-navigation > div > ul > li:hover > ul::before,
|
||||
.main-navigation > div > ul > li[focus-within] > ul::before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul::before {
|
||||
border-bottom: 8px solid #20603C;
|
||||
border-right: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
|
|
@ -4150,9 +4150,9 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
margin-right: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.main-navigation > div > ul > li:hover > ul:before,
|
||||
.main-navigation > div > ul > li:focus-within > ul:before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul:before {
|
||||
.main-navigation > div > ul > li:hover > ul::before,
|
||||
.main-navigation > div > ul > li:focus-within > ul::before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul::before {
|
||||
border-bottom: 8px solid #20603C;
|
||||
border-right: 8px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
|
|
@ -4238,7 +4238,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
}
|
||||
|
||||
#main .entry-content .entry-attachment {
|
||||
max-width: calc( 100% - 64px);
|
||||
max-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -4285,7 +4285,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
font-size: 0.84746rem;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent input[type=checkbox] + label {
|
||||
.comment-form-cookies-consent input[type="checkbox"] + label {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -4303,9 +4303,12 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
@media only screen and (min-width: 782px) {
|
||||
.site-footer .widget-area {
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 32px;
|
||||
}
|
||||
.site-footer .widget-area > .widget {
|
||||
width: 50%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4440,7 +4443,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
.wp-block-cover .wp-block-separator,
|
||||
.wp-block-cover-image .wp-block-separator,
|
||||
.has-background .wp-block-separator {
|
||||
border-color: currentColor;
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts > li > a {
|
||||
|
|
@ -4454,7 +4457,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
}
|
||||
|
||||
.has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:hover, .has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:focus, .has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:active {
|
||||
color: currentColor;
|
||||
color: currentcolor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4101,7 +4101,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
grid-column-gap: 16px;
|
||||
grid-template-areas: "site-logo site-logo" "site-title social-navigation" "site-description main-navigation";
|
||||
}
|
||||
.site-header:before, .site-header:after {
|
||||
.site-header::before, .site-header::after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4168,9 +4168,9 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-navigation > div > ul > li:hover > ul:before,
|
||||
.main-navigation > div > ul > li[focus-within] > ul:before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul:before {
|
||||
.main-navigation > div > ul > li:hover > ul::before,
|
||||
.main-navigation > div > ul > li[focus-within] > ul::before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul::before {
|
||||
border-bottom: 8px solid #20603C;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
|
|
@ -4179,9 +4179,9 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
margin-left: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.main-navigation > div > ul > li:hover > ul:before,
|
||||
.main-navigation > div > ul > li:focus-within > ul:before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul:before {
|
||||
.main-navigation > div > ul > li:hover > ul::before,
|
||||
.main-navigation > div > ul > li:focus-within > ul::before,
|
||||
.main-navigation > div > ul > li.current-menu-item > ul::before {
|
||||
border-bottom: 8px solid #20603C;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
|
|
@ -4267,7 +4267,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
}
|
||||
|
||||
#main .entry-content .entry-attachment {
|
||||
max-width: calc( 100% - 64px);
|
||||
max-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -4314,7 +4314,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
font-size: 0.84746rem;
|
||||
}
|
||||
|
||||
.comment-form-cookies-consent input[type=checkbox] + label {
|
||||
.comment-form-cookies-consent input[type="checkbox"] + label {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -4332,9 +4332,12 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
@media only screen and (min-width: 782px) {
|
||||
.site-footer .widget-area {
|
||||
max-width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 32px;
|
||||
}
|
||||
.site-footer .widget-area > .widget {
|
||||
width: 50%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4469,7 +4472,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
.wp-block-cover .wp-block-separator,
|
||||
.wp-block-cover-image .wp-block-separator,
|
||||
.has-background .wp-block-separator {
|
||||
border-color: currentColor;
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts > li > a {
|
||||
|
|
@ -4483,7 +4486,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
|
|||
}
|
||||
|
||||
.has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:hover, .has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:focus, .has-background:not(.has-background-background-color) .wp-block-latest-posts > li > a:active {
|
||||
color: currentColor;
|
||||
color: currentcolor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue