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>

barnsbury/sass/_extra-child-theme.scss

@@ -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;

barnsbury/style-rtl.css

@@ -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;
 }
 

barnsbury/style.css

@@ -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;
 }