Reorganized folder structure and improved Gutenberg compatibility

README.md

@@ -3,6 +3,8 @@
 This is the custom Genesis starter theme for Brubaker Design Services. It provides a modular file structure and SASS partials for quick Wordpress developement. The Genesis Sample theme provided the foundation for this starter theme.
 
 ## Change Log
+3.0.0 – Reorganized entire folder structure and improved Gutenberg compatibility.
+
 2.2.0 – Simplified and revamped navigation styles to make development process faster.
 
 2.1.1 – Fixed js suffix problem.

assets/scss/base/_alignments.scss

@@ -40,19 +40,21 @@
 	@include media(ms) {max-width: calc(65%);}
 }
 
-.full-width-content, .nolayout {
 
-	.alignwide,
-	.entry-content > *.alignwide {
+
+// ===== Wide & Full Alignments ===== //
+.full-width-content,
+.nolayout {
+
+	.alignwide {
 		margin: $mobile-spacing calc(50% - 50vw);
 		max-width: 100vw;
 		width: auto;
 		@include media(ms) {margin: $desktop-spacing calc(50% - 50vw);}
 		@include media(l) {margin: $desktop-spacing calc(25% - 25vw);}
 	}
 
-	.alignfull,
-	.entry-content > *.alignfull {
+	.alignfull {
 		margin: $mobile-spacing calc(50% - 50vw);
 		max-width: 100vw;
 		width: 100vw;

assets/scss/base/_base.scss

@@ -1,17 +1,11 @@
 // ========== Body ========== //
 
-html {
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-
 body {
 	background-color: $body--background-color;
 	color: $color--text-dark;
 	font-family: $font-stack--primary;
 	font-size: $body--font-size;
 	line-height: $body--line-height;
-	overflow-x: hidden;
 }
 
 a {
@@ -24,6 +18,4 @@ a {
 	}
 }
 
-em, i {font-style: italic;}
-
 img {height: auto;}

assets/scss/admin.scss → assets/scss/base/_editor.scss

@@ -1,13 +1,10 @@
-// ========== Admin Styles SCSS ========== //
-
-@import 'utilities/index';
-@import 'base/color-palette';
-@import 'base/font-sizes';
-
-
+// ========== Gutenburg Editor Styles ========== //
 
 .editor-post-title__block.wp-block {
 	max-width: $content--max-width;
+
+	// Change post title styles.
+	.editor-post-title__input {}
 }
 
 .wp-block {

assets/scss/base/_index.scss

@@ -3,10 +3,7 @@
 @import 'html5-reset/index';
 
 @import 'base';
-@import 'color-palette';
-@import 'font-sizes';
 @import 'alignments';
-@import 'forms';
 
 @import 'blocks/index';
 @import 'accessibility/index';

assets/scss/base/blocks/_headings.scss

@@ -2,24 +2,23 @@
 
 h1, h2, h3, h4, h5, h6 {
 	font-family: $font-stack--secondary;
-	font-weight: 700;
+	font-weight: bold;
 	line-height: 1.5;
+	margin: 0 0 $mobile-spacing - 5px;
 }
 
-.entry-content {h1, h2, h3, h4, h5, h6 {margin: 0;}}
-
-h1 {font-size: 30px;}
-h2 {font-size: 28px;}
-h3 {font-size: 24px;}
+h1 {font-size: 32px;}
+h2 {font-size: 26px;}
+h3 {font-size: 22px;}
 h4 {font-size: 20px;}
-h5 {font-size: 18px;}
-h6 {font-size: 16px;}
+h5 {font-size: 19px;}
+h6 {font-size: 18px;}
 
 @include media(ml) {
-	h1 {font-size: 40px;}
-	h2 {font-size: 38px;}
-	h3 {font-size: 34px;}
+	h1 {font-size: 42px;}
+	h2 {font-size: 36px;}
+	h3 {font-size: 32px;}
 	h4 {font-size: 30px;}
-	h5 {font-size: 28px;}
-	h6 {font-size: 26px;}
+	h5 {font-size: 29px;}
+	h6 {font-size: 28px;}
 }

assets/scss/base/blocks/_paragraphs.scss

@@ -1,6 +1,16 @@
 // ========== Paragraphs ========== //
 
 p {
+	line-height: $body__line-height !important;
 	margin: 0 0 $desktop-spacing;
-	padding: 0;
+
+	&.has-background {
+		padding: $mobile-spacing - 5px $mobile-spacing;
+		@include media(ms) {padding: $desktop-spacing - 10px $desktop-spacing;}
+	}
+
+	&.has-drop-cap:not(:focus):first-letter {
+		font-size: 4.5em;
+		font-weight: normal;
+	}
 }

assets/scss/components/_index.scss

@@ -8,5 +8,6 @@
 @import 'entry/index';
 @import 'sidebars/index';
 @import 'widgets/index';
+@import 'forms/index';
 @import 'comments/index';
 @import 'misc/index';

assets/scss/components/entry/_entry-content.scss

@@ -1,8 +1,8 @@
 // ========== Entry Content ========== //
 
 .entry-content > * {
-	@include space(margin, b);
-	max-width: 100%;
+	// max-width: 100%;
+	// margin-bottom: $desktop-spacing;
 
 	&:last-child {
 		margin-bottom: 0;

assets/scss/components/forms/_index.scss

@@ -0,0 +1,3 @@
+// ========== Forms ========== //
+
+@import 'base';

assets/scss/components/header/_title-area.scss

@@ -10,7 +10,7 @@
 	.site-title {
 		font-size: 30px;
 		font-weight: 700;
-		margin-bottom: 0;
+		margin: 0;
 		a {
 			color: $color--text-dark;
 			&:hover, &:focus {

assets/scss/components/navigation/_primary.scss

@@ -61,18 +61,23 @@
 		// Top Level Menu Item Effects.
 		.genesis-nav-menu > .menu-item > a:hover,
 		.genesis-nav-menu > .menu-item > a:focus {
-			color: $color--link-light-hover;
-			background: transparent;
+			background: $color--secondary;
 		}
 
 		// Sub Level Menu Item Effects.
 		.sub-menu > .menu-item > a:hover,
-		.sub-menu > .menu-item > a:focus {}
+		.sub-menu > .menu-item > a:focus {
+			background: $color--secondary;
+		}
 
 		// Persistent Menu Item Effects. (Desktop only)
 		@include media($navigation__breakpoint) {
-			.genesis-nav-menu > .menu-item.sfHover > a {}
+			.genesis-nav-menu > .menu-item.sfHover > a {
+				background: $color--secondary;
+			}
 
-			.sub-menu > .menu-item.sfHover > a {}
+			.sub-menu > .menu-item.sfHover > a {
+				background: $color--secondary;
+			}
 		}
 }

assets/scss/editor.scss

@@ -0,0 +1,7 @@
+// ========== Editor Styles SCSS ========== //
+
+@import 'utilities/index';
+@import 'base/base';
+@import 'base/alignments';
+@import 'base/blocks/index';
+@import 'base/editor';

assets/scss/utilities/_index.scss

@@ -2,6 +2,3 @@
 
 @import 'variables/index';
 @import 'mixins/index';
-
-// Must load Layout Variables after Layout Mixins
-// @import 'variables/layout';

assets/scss/utilities/mixins/_animations.scss

@@ -20,7 +20,7 @@
 
 
 
-// Add default transitions.
+// Add some default transitions.
 button,
 input,
 select,

assets/scss/base/_color-palette.scss → assets/scss/utilities/mixins/_color-palette.scss

@@ -2,6 +2,7 @@
 
 
 
+// Builds Gutenburg Color Palettes.
 @each $name, $color in $colors {
 
 	.has-#{$name}-color {

assets/scss/base/_font-sizes.scss → assets/scss/utilities/mixins/_font-palette.scss

@@ -1,7 +1,8 @@
-// ========== Font Sizes ========== //
+// ========== Font Palette ========== //
 
 
 
+// Builds Gutenburg Font Sizes.
 @each $name, $font-size in $font-sizes {
 
 	.has-#{$name}-font-size {

assets/scss/utilities/mixins/_index.scss

@@ -3,5 +3,6 @@
 @import 'media-queries';
 @import 'clearfix';
 @import 'padding-margin';
+@import 'color-palette';
+@import 'font-palette';
 @import 'animations';
-@import 'components/index';

assets/scss/utilities/variables/_colors.scss

@@ -3,11 +3,10 @@
 
 // Descriptive Color Variables
 
-    $blue             : rgb(60, 150, 210);
-    $light-red        : rgb(205,139,118);
-    $light-grey       : rgb(240,240,240);
-
+    $blue             : rgb(60,150,210);
+    $orange           : rgb(235,125,60);
     $white            : rgb(255,255,255);
+    $light-grey       : rgb(240,240,240);
     $grey             : rgb(190,190,190);
     $black            : rgb(48,48,48);
     $stock-green      : rgb(100,200,0);
@@ -16,8 +15,8 @@
 // Functional Color Variables
 
     $color--primary             : $blue;
-    $color--secondary           : $grey;
-    $color--tertiary            : $light-red;
+    $color--secondary           : $orange;
+    $color--tertiary            : $white;
     $color--quaternary          : $light-grey;
     $color--quinary             : $black;
 
@@ -37,7 +36,8 @@
 // Gutenberg Color Pallette Array
 
     $colors:    ( primary,     $blue       ),
-                ( secondary,   $grey       ),
-                ( tertiary,    $light-red  ),
+                ( secondary,   $orange     ),
+                ( tertiary,    $white      ),
                 ( quaternary,  $light-grey ),
-                ( quinary,     $black      );
+                ( quinary,     $grey       ),
+                ( senary,      $black      );

includes/components/navigation.php

@@ -11,9 +11,11 @@
 
 namespace BrubakerDesignServices\BDSStarterTheme;
 
-add_action( 'genesis_header', 'genesis_do_nav', 12 );
+/**
+ * Output navigation inside the site header.
+ */
+add_action( 'genesis_header', 'genesis_do_nav', 15 );
 
-add_filter( 'wp_nav_menu_args', __NAMESPACE__ . '\secondary_menu_args' );
 /**
  * Reduces secondary navigation menu to one level depth.
  *
@@ -22,12 +24,14 @@
  * @param  array $args Original menu options.
  * @return array Menu options with depth set to 1.
  */
-function secondary_menu_args( $args ) {
-	if ( 'secondary' !== $args['theme_location'] ) {
+add_filter(
+	'wp_nav_menu_args',
+	function( $args ) {
+		if ( 'secondary' !== $args['theme_location'] ) {
+			return $args;
+		}
+
+		$args['depth'] = 1;
 		return $args;
 	}
-
-	$args['depth'] = 1;
-	return $args;
-
-}
+);