Refactor/base and elements sass (#220)

* Text-selection has been moved, and the heading margins don't seem to be doing much of anything.

* No need to have a file just for z-index.

* No more z-index file to import.

* Removing headings, utility, and all elements styles in favor of a single elements.scss file.

* Moving some of the base layout styles out of site-header and removing some fluff from layout.scss.

* Removing imports for all the elements styles, headings, and utility files.

* Tidying up the elements and normalize files.

Author: shaunandrews

source/wp-content/themes/wporg-news-2021/sass/elements/_forms.scss source/wp-content/themes/wporg-news-2021/sass/base/_elements.scss

@@ -1,3 +1,41 @@
+// Links
+a {
+	cursor: pointer;
+	text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+
+	&:hover,
+	&:focus {
+		text-decoration-line: underline;
+	}
+}
+
+// Links that appear in the main content area
+.block-editor-block-list__layout a, // Needed for the post area
+.wp-block-post-content a {
+	text-decoration-line: underline;
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+}
+
+
+// Captions
+.wp-block-gallery.wp-block-gallery, // Double class for increased specificity.
+[class*="wp-block-"] {
+	figcaption {
+		font-size: var(--wp--custom--gallery--caption--font-size);
+		text-align: right;
+		padding-left: var(--wp--style--block-gap);
+		padding-right: var(--wp--style--block-gap);
+	}
+}
+
+
+// Forms
 input.wp-block-search__input,
 input[type="text"],
 input[type="email"],

source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss

@@ -1,3 +1,19 @@
+// Setup the main container to use a flex box-model
+// allowing us to simplify the layout and "sticky" bar.
+.wp-site-blocks {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	margin-top: -(var(--wp-admin--admin-bar--height, 0));
+
+	// Make sure the footer is always at the bottom of the viewport, even on pages with little content.
+	// Otherwise there'd be empty space below the footer
+	justify-content: space-between;
+}
+
+// The following "placeholder selectors" define many of the layout-related
+// styles for various sections of the site.
+// Read more here: https://sass-lang.com/documentation/style-rules/placeholder-selectors
 %two-column-grid-container {
 
 	@include break-wide() {
@@ -6,10 +22,8 @@
 			calc(var(--wp--custom--layout--content-meta-size) - 32px)
 			auto;
 
-		/*
-		 * This defines the minimum horizontal gap. An additional implicit gap is created because the right column
-		 * contents have a `max-width` and are justified in the center.
-		 */
+		// This defines the minimum horizontal gap. An additional implicit gap is created because the right column
+		// contents have a `max-width` and are justified in the center.
 		grid-gap: 0 var(--wp--style--block-gap);
 	}
 }
@@ -70,38 +84,8 @@
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 
-		/*
-		 * This defines the minimum horizontal gap. An additional implicit gap is created because the right column
-		 * contents have a `max-width` and are justified in the center.
-		 */
+		// This defines the minimum horizontal gap. An additional implicit gap is created because the right column
+		// contents have a `max-width` and are justified in the center.
 		grid-gap: 0 var(--wp--style--block-gap);
 	}
 }
-
-
-:root {
-	--wpadmin-bar--height: 46px;
-}
-
-.wp-site-blocks {
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-
-	/*
-	 * Make sure the footer is always at the bottom of the viewport, even on pages with little content.
-	 * Otherwise there'd be empty space below the footer
-	 */
-	justify-content: space-between;
-}
-
-body.admin-bar {
-
-	@include break-small() {
-		--wpadmin-bar--height: 32px;
-	}
-
-	.wp-site-blocks {
-		min-height: calc(100vh - var(--wpadmin-bar--height));
-	}
-}

source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss

@@ -7,14 +7,36 @@ body {
 	// Smooth out the fonts
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-}
 
-// Needed until https://github.com/WordPress/gutenberg/pull/27518/ is merged.
-img {
-	height: auto;
-	max-width: 100%;
+	// Text selection background color
+	::selection {
+		background-color: var(--wp--preset--color--coral-red);
+	}
+
+	::-moz-selection {
+		background-color: var(--wp--preset--color--coral-red);
+	}
 }
 
+// Use (the much easier to comprehend) border-box sizing, which makes it easier
+// to define the sizes without having to do a bunch of math.
 * {
 	box-sizing: border-box;
 }
+
+// Note: The selector `[class]` is added to increase specificity, to override the inline styles
+// on `body` generated by `theme.json`.
+body[class] {
+  @include break-mobile {
+    // Changing the values of the CSS variables works better than redeclaring the attributes because
+    // of some issues with precedence, especially in the block editor.
+  	--wp--custom--h-1--typography--font-size: var(--wp--custom--h-1--breakpoint--mobile--typography--font-size);
+  	--wp--custom--h-1--typography--line-height: var(--wp--custom--h-1--breakpoint--mobile--typography--line-height);
+  	--wp--custom--h-2--typography--font-size: var(--wp--custom--h-2--breakpoint--mobile--typography--font-size);
+  	--wp--custom--h-3--typography--font-size: var(--wp--custom--h-3--breakpoint--mobile--typography--font-size);
+  	--wp--custom--h-3--typography--line-height: var(--wp--custom--h-3--breakpoint--mobile--typography--line-height);
+  	--wp--custom--h-4--typography--font-size: var(--wp--custom--h-4--breakpoint--mobile--typography--font-size);
+  	--wp--custom--h-5--typography--font-size: var(--wp--custom--h-5--breakpoint--mobile--typography--font-size);
+  	--wp--custom--h-5--typography--line-height: var(--wp--custom--h-5--breakpoint--mobile--typography--line-height);
+  }
+}

source/wp-content/themes/wporg-news-2021/sass/base/_normalize.scss

@@ -1,19 +1,13 @@
-// Setup the main container to use a flex box-model
-// allowing us to simplify the layout and "sticky" bar.
-.wp-site-blocks {
-	display: flex;
-	margin-top: -(var(--wp-admin--admin-bar--height, 0));
+// The container for the site-specific (/news/) menu bar.
+.site-header-container {
 
-	// The container for the site-specific (/news/) menu bar.
-	.site-header-container {
-
-		@include break-small {
-			position: sticky;
-			top: 0;
-		}
+	@include break-small {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
 
-		body.admin-bar & {
-			padding-top: var(--wp-admin--admin-bar--height, 0);
-		}
+	body.admin-bar & {
+		padding-top: var(--wp-admin--admin-bar--height, 0);
 	}
 }

source/wp-content/themes/wporg-news-2021/sass/base/_text.scss

@@ -21,5 +21,15 @@ body.error404 {
 		margin-bottom: min(100px, 15vh);
 	}
 
+	ul.is-inline {
+		display: inline;
+		margin: 0;
+		padding: 0;
+
+		li {
+			display: inline;
+		}
+	}
+
 	@extend %bottom-banner-dark;
 }

source/wp-content/themes/wporg-news-2021/sass/base/_utility.scss

@@ -24,23 +24,11 @@ GNU General Public License for more details.
 // Base
 // Foundational styles like browser normalization, mixins, layout, z-index.
 @import "base/mixins";
-@import "base/normalize";
 @import "base/breakpoints";
+@import "base/normalize";
 @import "base/alignment";
-@import "base/headings";
 @import "base/layout";
-@import "base/text";
-@import "base/utility";
-@import "base/z-index";
-
-
-// Elements
-// Foundational styles that apply to primitive HTML elements.
-@import "elements/forms";
-@import "elements/headings";
-@import "elements/links";
-@import "elements/lists";
-@import "elements/captions";
+@import "base/elements";
 
 
 // Blocks