fix: 🐛 Alignments settings and body padding on small screens. Fixes #110

and Fixes #66 (#115)
ucsc · Aug 10, 2022 · 60a317b · 60a317b
1 parent d39760a
commit 60a317b
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 44 deletions.
diff --git a/parts/site-footer.html b/parts/site-footer.html
@@ -1,5 +1,5 @@
 <!-- wp:group {"className":"site-footer__inner","layout":{"inherit":true}} -->
-<div class="wp-block-group site-footer__inner">
+<div class="wp-block-group site-footer__inner ucsc-layout-row">
 	<!-- wp:columns -->
 	<div class="wp-block-columns">
 		<!-- wp:column -->

diff --git a/parts/site-header.html b/parts/site-header.html
@@ -1,8 +1,8 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"2.5rem","bottom":"2rem"}}}} -->
 <div class="wp-block-group" style="padding-top:2.5rem;padding-bottom:2rem">
 
-	<!-- wp:group {"className":"site-header__inner","layout":{"inherit":true}} -->
-	<div class="wp-block-group site-header__inner">
+	<!-- wp:group {"className":"site-header__inner ucsc-layout-row","layout":{"inherit":true}} -->
+	<div class="wp-block-group site-header__inner ucsc-layout-row">
 		<!-- wp:site-title {"fontSize":"x-large","className":"site-header__title"} /-->
 	</div>
 	<!-- /wp:group -->
@@ -12,11 +12,10 @@
 		class="wp-block-separator site-header__separator has-text-color has-ucsc-primary-yellow-color has-alpha-channel-opacity has-ucsc-primary-yellow-background-color has-background is-style-wide" />
 	<!-- /wp:separator -->
 
-	<!-- wp:group {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"className":"site-header__inner","layout":{"inherit":true}} -->
-	<div class="wp-block-group site-header__inner"
-		style="border-style:none;border-width:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
+	<!-- wp:group {"style":{"border":{"width":"0px","style":"none"}},"className":"site-header__inner ucsc-layout-row","layout":{"inherit":true}} -->
+	<div class="wp-block-group site-header__inner ucsc-layout-row" style="border-style:none;border-width:0px;">
 		<!-- wp:navigation {"ref":1833,"textColor":"black","className":"site-header__navigation","style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"base"} /-->
 	</div>
 	<!-- /wp:group -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->
diff --git a/parts/ucsc-footer.html b/parts/ucsc-footer.html
@@ -2,7 +2,7 @@
 <div
 	class="wp-block-group ucsc-footer__inner has-white-color has-ucsc-primary-blue-background-color has-text-color has-background has-small-font-size">
 	<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false,"style":{"spacing":{"padding":{"top":".7rem","bottom":".7rem"}}}} -->
-	<div class="wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile"
+	<div class="wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile ucsc-layout-row"
 		style="padding-top:.7rem;padding-bottom:.7rem">
 		<!-- wp:column {"verticalAlignment":"center","width":"15%","className":"ucsc-footer__inner-left"} -->
 		<div class="wp-block-column is-vertically-aligned-center ucsc-footer__inner-left" style="flex-basis:15%">

diff --git a/parts/ucsc-header.html b/parts/ucsc-header.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"layout":{"inherit":true},"fontSize":"small"} -->
 <div class="wp-block-group has-small-font-size">
 	<!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"padding":{"top":".7rem","bottom":".7rem"}}},"className":"ucsc-header__inner"} -->
-	<div class="wp-block-columns is-not-stacked-on-mobile ucsc-header__inner"
+	<div class="wp-block-columns is-not-stacked-on-mobile ucsc-header__inner ucsc-layout-row"
 		style="padding-top:.7rem;padding-bottom:.7rem">
 		<!-- wp:column {"width":"35%","className":"ucsc-header__inner-left"} -->
 		<div class="wp-block-column ucsc-header__inner-left" style="flex-basis:35%">

diff --git a/src/scss/base/_alignments.scss b/src/scss/base/_alignments.scss
@@ -1,21 +1,15 @@
 /*--------------------------------------------------------------
 # - Alignments
 --------------------------------------------------------------*/
-.alignleft,
-.alignright,
-.aligncenter {
-	display: block;
-}
-
 .alignleft {
 	clear: left;
 }
 
 .alignright {
 	clear: right;
 }
+
 .aligncenter {
 	clear: both;
-	margin-right: auto;
-	margin-left: auto;
+	display: table;
 }
diff --git a/src/scss/base/_layout.scss b/src/scss/base/_layout.scss
@@ -1,39 +1,87 @@
 //
 // Layout
 //===============================
+
+// Set so the these elements fill
+// the vertical space in the window
 html, body {
   height: 100%
 }
-.site-content {
-  flex: 1 0 auto;
-}
-footer {
-  flex-shrink: 0;}
 
-// ## Base Wrap
+//
+// This wraps all of the content for a page
+//
 .wp-site-blocks {
 	height: 100%;
 	display: flex;
-	flex-direction: column
+	flex-direction: column;
 }
 
-// ### Wide and Full Widths
-@media screen and (min-width: 782px) {
+//
+// <main> element: the main content region
+//
+// We set flex-grow to true so the footer
+// is always pushed to the bottom of the window
+//
+.content-region {
+  flex: 1 0 auto;
+}
+
+
+//
+// Utility class
+// This sets a padding on layout elements
+// when the window width < 74rem
+//
+.ucsc-layout-row {
+	max-width: 72rem;
+	margin: 0 auto;
+	padding: 0 1rem;
+}
+
+//
+// Fixed width content window
+// These rules set a fixed width of 72rem
+// in the editor and live page window
+// while still allowing full-width elements
+// with the .alignfull class
+//
+.is-root-container {
+	max-width: 72rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.is-root-container,
+.content-region {
+    padding-left: var(--wp--custom--spacing--baseline);
+    padding-right: var(--wp--custom--spacing--baseline);
+}
+
+ .wp-block-post-content > .alignfull,
+ .block-editor-block-list__layout.is-root-container>.alignfull {
+    margin-left: calc(-1 * var(--wp--custom--spacing--baseline)) !important;
+    margin-right: calc(-1 * var(--wp--custom--spacing--baseline)) !important;
+    width: calc( 100% + var(--wp--custom--spacing--baseline) + var(--wp--custom--spacing--baseline) ) !important;
+ }
+
+@media screen and (min-width: 74rem) {
+
+	.ucsc-layout-row {
+		padding: 0;
+	}
 
-	.wp-block-post-content > .alignwide,
-	.block-editor-block-list__layout.is-root-container > .wp-block[data-align=wide] {
-		width: calc(45 * var(--wp--custom--spacing--baseline));
-		max-width: calc(45 * var(--wp--custom--spacing--baseline));
-		margin-right: auto;
-		margin-left: calc(50% - calc(22.5 * var(--wp--custom--spacing--baseline)))
+	.is-root-container,
+	.content-region {
+    padding-left: 0;
+    padding-right: 0;
 	}
 
 	.wp-block-post-content > .alignfull,
-	.block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
-		width: 100vw;
-		max-width: 100vw;
-		max-width: 2020px;
-		margin-left: calc(50% - 50vw);
-		margin-right: auto;
+	.block-editor-block-list__layout.is-root-container > .alignfull {
+			width: 100vw !important;
+			max-width: 100vw !important;
+			margin-left: calc(50% - 50vw) !important;
+			margin-right: auto !important;
 	}
 }
diff --git a/src/scss/theme-regions/_footer.scss b/src/scss/theme-regions/_footer.scss
@@ -11,5 +11,6 @@
 
 	clear: both;
 	margin-top: 3rem;
+	flex-shrink: 0;
 
 }
diff --git a/src/scss/theme-regions/_ucsc-footer.scss b/src/scss/theme-regions/_ucsc-footer.scss
@@ -15,13 +15,8 @@
 	}
 
 	.ucsc-footer__inner {
-    padding: 0.25rem 0;
+    padding: 0.2rem 0;
 	}
-
-	.ucsc-footer__logo {
-
-	}
-
 	.ucsc-footer__links {
 
 		display: flex;