Hever: Improve widget area and footer menu

hever/sass/_extra-child-theme.scss

@@ -23,10 +23,10 @@ a {
  * Wide Header & Footer
  */
 #masthead,
-#colophon,
-.widget-area {
+#colophon {
 	margin-left: auto;
 	margin-right: auto;
+	position: relative;
 
 	@extend %responsive-width-wide;
 }
@@ -164,6 +164,14 @@ a {
 	}
 }
 
+/**
+ * Footer Menu
+ */
+.footer-navigation .footer-menu {
+	margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+	margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+}
+
 /**
  * Blocks
  */
@@ -260,11 +268,11 @@ article .entry-header .entry-title,
  * Widgets
  */
 .widget-area {
-	border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
-	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
+	max-width: 100%;
+	width: 100%;
 
-  .widget-title,
-  .widgettitle {
+	.widget-title,
+	.widgettitle {
   	font-size: #{map-deep-get($config-global, "font", "size", "md")};
     margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 
@@ -273,6 +281,10 @@ article .entry-header .entry-title,
     }
   }
 
+	@include media(mobile) {
+		padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	}
+
   @include media(laptop) {
 		display: grid;
 		grid-template-columns: repeat(2, 1fr);

hever/style-rtl.css

@@ -2924,8 +2924,7 @@ table th,
 .wp-block-group.alignwide .alignwide,
 .wp-block-group.alignwide .alignfull,
 .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-#colophon,
-.widget-area {
+#colophon {
 	margin-right: calc( -0.25 * ( 100vw - 100% ));
 	margin-left: calc( -0.25 * ( 100vw - 100% ));
 	width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
@@ -2936,8 +2935,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
 		margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -2949,8 +2947,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
 		margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -2962,8 +2959,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -2975,8 +2971,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-right: -128px;
 		margin-left: -128px;
 		width: calc(calc( 782px - 32px) + 256px);
@@ -2988,8 +2983,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-right: -128px;
 		margin-left: -128px;
 		width: calc(calc( 782px - 32px) + 256px);
@@ -3224,10 +3218,10 @@ p:not(.site-title) a:hover {
  * Wide Header & Footer
  */
 #masthead,
-#colophon,
-.widget-area {
+#colophon {
 	margin-right: auto;
 	margin-left: auto;
+	position: relative;
 }
 
 /**
@@ -3348,6 +3342,11 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.footer-navigation .footer-menu {
+	margin-right: -8px;
+	margin-left: -8px;
+}
+
 /**
  * Blocks
  */
@@ -3447,8 +3446,8 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
  * Widgets
  */
 .widget-area {
-	border-top: 1px solid #F8F8F8;
-	padding-top: 32px;
+	max-width: 100%;
+	width: 100%;
 }
 
 .widget-area .widget-title,
@@ -3462,6 +3461,12 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	display: none;
 }
 
+@media only screen and (min-width: 560px) {
+	.widget-area {
+		padding-bottom: 32px;
+	}
+}
+
 @media only screen and (min-width: 782px) {
 	.widget-area {
 		display: grid;

hever/style.css

@@ -2929,8 +2929,7 @@ table th,
 .wp-block-group.alignwide .alignwide,
 .wp-block-group.alignwide .alignfull,
 .wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-#colophon,
-.widget-area {
+#colophon {
 	margin-left: calc( -0.25 * ( 100vw - 100% ));
 	margin-right: calc( -0.25 * ( 100vw - 100% ));
 	width: calc( 100% + (0.25 * 2) * ( 100vw - 100% ));
@@ -2941,8 +2940,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-left: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
 		margin-right: calc( -0.25 * ( 100vw - calc( 560px - 32px) ));
 		width: calc( calc( 560px - 32px) + (0.25 * 2) * ( 100vw - calc( 560px - 32px) ));
@@ -2954,8 +2952,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-left: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
 		margin-right: calc( -0.25 * ( 100vw - calc( 640px - 32px) ));
 		width: calc( calc( 640px - 32px) + (0.25 * 2) * ( 100vw - calc( 640px - 32px) ));
@@ -2967,8 +2964,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-left: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.25 * ( 100vw - calc( 782px - 32px) ));
 		width: calc( calc( 782px - 32px) + (0.25 * 2) * ( 100vw - calc( 782px - 32px) ));
@@ -2980,8 +2976,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-left: -128px;
 		margin-right: -128px;
 		width: calc(calc( 782px - 32px) + 256px);
@@ -2993,8 +2988,7 @@ table th,
 	.wp-block-group.alignwide .alignwide,
 	.wp-block-group.alignwide .alignfull,
 	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
-	#colophon,
-	.widget-area {
+	#colophon {
 		margin-left: -128px;
 		margin-right: -128px;
 		width: calc(calc( 782px - 32px) + 256px);
@@ -3229,10 +3223,10 @@ p:not(.site-title) a:hover {
  * Wide Header & Footer
  */
 #masthead,
-#colophon,
-.widget-area {
+#colophon {
 	margin-left: auto;
 	margin-right: auto;
+	position: relative;
 }
 
 /**
@@ -3353,6 +3347,14 @@ p:not(.site-title) a:hover {
 	}
 }
 
+/**
+ * Footer Menu
+ */
+.footer-navigation .footer-menu {
+	margin-left: -8px;
+	margin-right: -8px;
+}
+
 /**
  * Blocks
  */
@@ -3452,8 +3454,8 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
  * Widgets
  */
 .widget-area {
-	border-top: 1px solid #F8F8F8;
-	padding-top: 32px;
+	max-width: 100%;
+	width: 100%;
 }
 
 .widget-area .widget-title,
@@ -3467,6 +3469,12 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	display: none;
 }
 
+@media only screen and (min-width: 560px) {
+	.widget-area {
+		padding-bottom: 32px;
+	}
+}
+
 @media only screen and (min-width: 782px) {
 	.widget-area {
 		display: grid;