Re-organize SASS structure (#1425)

.gitignore

@@ -3,3 +3,4 @@
 package-lock.json
 composer.lock
 style.css.map
+.DS_Store

README.md

@@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample layouts in `sass/layout/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/site/_site.scss`.
+* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
 Note: `.no-sidebar` styles are automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
 * Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.

sass/abstracts/_abstracts.scss

@@ -0,0 +1,5 @@
+@import "variables/colors";
+@import "variables/typography";
+@import "variables/structure";
+@import "variables/columns";
+@import "mixins/mixins";

sass/base/_base.scss

@@ -0,0 +1,20 @@
+/* Typography
+--------------------------------------------- */
+@import "typography/typography";
+
+/* Elements
+--------------------------------------------- */
+@import "elements/body";
+@import "elements/hr";
+@import "elements/lists";
+@import "elements/media";
+@import "elements/tables";
+
+/* Links
+--------------------------------------------- */
+@import "elements/links";
+
+/* Forms
+--------------------------------------------- */
+@import "elements/buttons";
+@import "elements/fields";

sass/base/elements/_body.scss

@@ -0,0 +1,3 @@
+body {
+	background: $color__background-body; // Fallback for when there is no custom background color defined.
+}

sass/base/elements/_hr.scss

@@ -0,0 +1,6 @@
+hr {
+	background-color: $color__background-hr;
+	border: 0;
+	height: 1px;
+	margin-bottom: 1.5em;
+}

sass/base/elements/_media.scss

@@ -0,0 +1,15 @@
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+img {
+	height: auto; // Make sure images are scaled correctly.
+	max-width: 100%; // Adhere to container width.
+}
+
+figure {
+	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
+}

sass/components/_components.scss

@@ -0,0 +1,27 @@
+/* Navigation
+--------------------------------------------- */
+@import "navigation/navigation";
+
+/* Posts and pages
+--------------------------------------------- */
+@import "content/posts-and-pages";
+
+/* Comments
+--------------------------------------------- */
+@import "comments/comments";
+
+/* Widgets
+--------------------------------------------- */
+@import "widgets/widgets";
+
+/* Media
+--------------------------------------------- */
+@import "media/media";
+
+/* Captions
+--------------------------------------------- */
+@import "media/captions";
+
+/* Galleries
+--------------------------------------------- */
+@import "media/galleries";

sass/components/media/_media.scss

@@ -0,0 +1,13 @@
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+/* Make sure logo link wraps around logo image. */
+.custom-logo-link {
+	display: inline-block;
+}

sass/elements/_elements.scss

@@ -1,35 +0,0 @@
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
-body {
-	background: $color__background-body; // Fallback for when there is no custom background color defined.
-}
-
-hr {
-	background-color: $color__background-hr;
-	border: 0;
-	height: 1px;
-	margin-bottom: 1.5em;
-}
-
-@import "lists";
-
-img {
-	height: auto; // Make sure images are scaled correctly.
-	max-width: 100%; // Adhere to container width.
-}
-
-figure {
-	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
-}
-
-@import "tables";

sass/forms/_forms.scss

@@ -1,2 +0,0 @@
-@import "buttons";
-@import "fields";

sass/generic/_box-sizing.scss

@@ -0,0 +1,11 @@
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}

sass/media/_media.scss

@@ -1,30 +0,0 @@
-.page-content .wp-smiley,
-.entry-content .wp-smiley,
-.comment-content .wp-smiley {
-	border: none;
-	margin-bottom: 0;
-	margin-top: 0;
-	padding: 0;
-}
-
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
-/* Make sure logo link wraps around logo image. */
-.custom-logo-link {
-	display: inline-block;
-}
-
-/*--------------------------------------------------------------
-## Captions
---------------------------------------------------------------*/
-@import "captions";
-
-/*--------------------------------------------------------------
-## Galleries
---------------------------------------------------------------*/
-@import "galleries";

sass/navigation/_navigation.scss

@@ -1,9 +0,0 @@
-/*--------------------------------------------------------------
-## Links
---------------------------------------------------------------*/
-@import "links";
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
-@import "menus";

sass/site/_site.scss

@@ -1,12 +0,0 @@
-// @import "../layout/content-sidebar";
-// @import "../layout/sidebar-content";
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
-@import "primary/posts-and-pages";
-
-/*--------------------------------------------------------------
-## Comments
---------------------------------------------------------------*/
-@import "primary/comments";

sass/style.scss

@@ -23,78 +23,78 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
+# Generic
-# Typography
+	- Normalize
-# Elements
+	- Box sizing
-# Forms
+# Base
-# Navigation
+	- Typography
-	## Links
+	- Elements
-	## Menus
+	- Links
-# Accessibility
+	- Forms
-# Alignments
+## Layouts
-# Widgets
+# Components
-# Content
+	- Navigation
-	## Posts and pages
+	- Posts and pages
-	## Comments
+	- Comments
-# Infinite scroll
+	- Widgets
-# Media
+	- Media
-	## Captions
+	- Captions
-	## Galleries
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
-@import "variables-site/variables-site";
+
-@import "mixins/mixins-master";
+// Import variables and mixins.
+@import "abstracts/abstracts";
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
-@import "normalize";
+
+/* Normalize
+--------------------------------------------- */
+@import "generic/normalize";
+
+/* Box sizing
+--------------------------------------------- */
+@import "generic/box-sizing";
 
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
-@import "typography/typography";
+@import "base/base";
 
 /*--------------------------------------------------------------
-# Elements
+# Layouts
 --------------------------------------------------------------*/
-@import "elements/elements";
+// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
+// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
 
 /*--------------------------------------------------------------
-# Forms
+# Components
 --------------------------------------------------------------*/
-@import "forms/forms";
+@import "components/components";
 
 /*--------------------------------------------------------------
-# Navigation
+# Plugins
 --------------------------------------------------------------*/
-@import "navigation/navigation";
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+@import "plugins/jetpack/infinite-scroll";
 
 /*--------------------------------------------------------------
-# Accessibility
+# Utilities
 --------------------------------------------------------------*/
-@import "modules/accessibility";
 
-/*--------------------------------------------------------------
+/* Accessibility
-# Alignments
+--------------------------------------------- */
---------------------------------------------------------------*/
+@import "utilities/accessibility";
-@import "modules/alignments";
 
-/*--------------------------------------------------------------
+/* Alignments
-# Widgets
+--------------------------------------------- */
---------------------------------------------------------------*/
+@import "utilities/alignments";
-@import "site/secondary/widgets";
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-@import "site/site";
-
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-@import "modules/infinite-scroll";
-
-/*--------------------------------------------------------------
-# Media
---------------------------------------------------------------*/
-@import "media/media";

sass/variables-site/_variables-site.scss

@@ -1,4 +0,0 @@
-@import "colors";
-@import "typography";
-@import "structure";
-@import "columns";

sass/woocommerce.scss

@@ -9,36 +9,35 @@ $woocommerce__color-error: #e2401c;
 $woocommerce__color-success: #0f834d;
 $woocommerce__color-info: #3d9cd2;
 
-// Imports
+// Import variables and mixins
-@import "variables-site/variables-site";
+@import "abstracts/abstracts";
-@import "mixins/mixins-master";
 
 /**
  * Shop tables
  */
-@import "shop/tables";
+@import "plugins/woocommerce/tables";
 
 /**
  * Products
  */
-@import "shop/products";
+@import "plugins/woocommerce/products";
 
 /**
  * Single product
  */
-@import "shop/single-product";
+@import "plugins/woocommerce/single-product";
 
 /**
  * Checkout
  */
-@import "shop/checkout";
+@import "plugins/woocommerce/checkout";
 
 /**
  * General WooCommerce components
  */
-@import "shop/components";
+@import "plugins/woocommerce/components";
 
 /**
  * WooCommerce widgets
  */
-@import "shop/widgets";
+@import "plugins/woocommerce/widgets";

style-rtl.css

@@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
+# Generic
-# Typography
+	- Normalize
-# Elements
+	- Box sizing
-# Forms
+# Base
-# Navigation
+	- Typography
-	## Links
+	- Elements
-	## Menus
+	- Links
-# Accessibility
+	- Forms
-# Alignments
+## Layouts
-# Widgets
+# Components
-# Content
+	- Navigation
-	## Posts and pages
+	- Posts and pages
-	## Comments
+	- Comments
-# Infinite scroll
+	- Widgets
-# Media
+	- Media
-	## Captions
+	- Captions
-	## Galleries
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
 
+/* Normalize
+--------------------------------------------- */
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -364,9 +373,27 @@ template {
 	display: none;
 }
 
+/* Box sizing
+--------------------------------------------- */
+
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
+
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
+
+/* Typography
+--------------------------------------------- */
 body,
 button,
 input,
@@ -442,22 +469,8 @@ big {
 	font-size: 125%;
 }
 
-/*--------------------------------------------------------------
+/* Elements
-# Elements
+--------------------------------------------- */
---------------------------------------------------------------*/
-
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
 body {
 	background: #fff;
 }
@@ -496,6 +509,13 @@ dd {
 	margin: 0 1.5em 1.5em;
 }
 
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -510,9 +530,33 @@ table {
 	width: 100%;
 }
 
-/*--------------------------------------------------------------
+/* Links
-# Forms
+--------------------------------------------- */
---------------------------------------------------------------*/
+a {
+	color: #4169e1;
+}
+
+a:visited {
+	color: #800080;
+}
+
+a:hover,
+a:focus,
+a:active {
+	color: #191970;
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+/* Forms
+--------------------------------------------- */
 button,
 input[type="button"],
 input[type="reset"],
@@ -595,38 +639,15 @@ textarea {
 }
 
 /*--------------------------------------------------------------
-# Navigation
+# Layouts
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-## Links
+# Components
 --------------------------------------------------------------*/
-a {
-	color: #4169e1;
-}
 
-a:visited {
+/* Navigation
-	color: #800080;
+--------------------------------------------- */
-}
-
-a:hover,
-a:focus,
-a:active {
-	color: #191970;
-}
-
-a:focus {
-	outline: thin dotted;
-}
-
-a:hover,
-a:active {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
 .main-navigation {
 	display: block;
 	width: 100%;
@@ -721,90 +742,8 @@ a:active {
 	flex: 1 0 50%;
 }
 
-/*--------------------------------------------------------------
+/* Posts and pages
-# Accessibility
+--------------------------------------------- */
---------------------------------------------------------------*/
-
-/* Text meant only for screen readers. */
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute !important;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-.screen-reader-text:focus {
-	background-color: #f1f1f1;
-	border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
-	clip-path: none;
-	color: #21759b;
-	display: block;
-	font-size: 0.875rem;
-	font-weight: 700;
-	height: auto;
-	right: 5px;
-	line-height: normal;
-	padding: 15px 23px 14px;
-	text-decoration: none;
-	top: 5px;
-	width: auto;
-	z-index: 100000;
-}
-
-/* Do not show the outline on the skip link target. */
-#primary[tabindex="-1"]:focus {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-.alignleft {
-	float: right;
-	margin-left: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.alignright {
-	float: left;
-	margin-right: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.aligncenter {
-	clear: both;
-	display: block;
-	margin-right: auto;
-	margin-left: auto;
-	margin-bottom: 1.5em;
-}
-
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-.widget {
-	margin: 0 0 1.5em;
-}
-
-.widget select {
-	max-width: 100%;
-}
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
 .sticky {
 	display: block;
 }
@@ -829,9 +768,8 @@ a:active {
 	margin: 0 0 1.5em;
 }
 
-/*--------------------------------------------------------------
+/* Comments
-## Comments
+--------------------------------------------- */
---------------------------------------------------------------*/
 .comment-content a {
 	word-wrap: break-word;
 }
@@ -840,24 +778,18 @@ a:active {
 	display: block;
 }
 
-/*--------------------------------------------------------------
+/* Widgets
-# Infinite scroll
+--------------------------------------------- */
---------------------------------------------------------------*/
+.widget {
-
+	margin: 0 0 1.5em;
-/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
-.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer {
-	display: none;
 }
 
-/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.widget select {
-.infinity-end.neverending .site-footer {
+	max-width: 100%;
-	display: block;
 }
 
-/*--------------------------------------------------------------
+/* Media
-# Media
+--------------------------------------------- */
---------------------------------------------------------------*/
 .page-content .wp-smiley,
 .entry-content .wp-smiley,
 .comment-content .wp-smiley {
@@ -867,21 +799,13 @@ a:active {
 	padding: 0;
 }
 
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
 /* Make sure logo link wraps around logo image. */
 .custom-logo-link {
 	display: inline-block;
 }
 
-/*--------------------------------------------------------------
+/* Captions
-## Captions
+--------------------------------------------- */
---------------------------------------------------------------*/
 .wp-caption {
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -901,9 +825,8 @@ object {
 	text-align: center;
 }
 
-/*--------------------------------------------------------------
+/* Galleries
-## Galleries
+--------------------------------------------- */
---------------------------------------------------------------*/
 .gallery {
 	margin-bottom: 1.5em;
 	display: grid;
@@ -951,3 +874,89 @@ object {
 .gallery-caption {
 	display: block;
 }
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
+.infinite-scroll .posts-navigation,
+.infinite-scroll.neverending .site-footer {
+	display: none;
+}
+
+/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.infinity-end.neverending .site-footer {
+	display: block;
+}
+
+/*--------------------------------------------------------------
+# Utilities
+--------------------------------------------------------------*/
+
+/* Accessibility
+--------------------------------------------- */
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: #21759b;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	right: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+/* Do not show the outline on the skip link target. */
+#primary[tabindex="-1"]:focus {
+	outline: 0;
+}
+
+/* Alignments
+--------------------------------------------- */
+.alignleft {
+	float: right;
+	margin-left: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.alignright {
+	float: left;
+	margin-right: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.aligncenter {
+	clear: both;
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+	margin-bottom: 1.5em;
+}

style.css

@@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
+# Generic
-# Typography
+	- Normalize
-# Elements
+	- Box sizing
-# Forms
+# Base
-# Navigation
+	- Typography
-	## Links
+	- Elements
-	## Menus
+	- Links
-# Accessibility
+	- Forms
-# Alignments
+## Layouts
-# Widgets
+# Components
-# Content
+	- Navigation
-	## Posts and pages
+	- Posts and pages
-	## Comments
+	- Comments
-# Infinite scroll
+	- Widgets
-# Media
+	- Media
-	## Captions
+	- Captions
-	## Galleries
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
 
+/* Normalize
+--------------------------------------------- */
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -364,9 +373,27 @@ template {
 	display: none;
 }
 
+/* Box sizing
+--------------------------------------------- */
+
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
+
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
+
+/* Typography
+--------------------------------------------- */
 body,
 button,
 input,
@@ -442,22 +469,8 @@ big {
 	font-size: 125%;
 }
 
-/*--------------------------------------------------------------
+/* Elements
-# Elements
+--------------------------------------------- */
---------------------------------------------------------------*/
-
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
 body {
 	background: #fff;
 }
@@ -496,6 +509,13 @@ dd {
 	margin: 0 1.5em 1.5em;
 }
 
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -510,9 +530,33 @@ table {
 	width: 100%;
 }
 
-/*--------------------------------------------------------------
+/* Links
-# Forms
+--------------------------------------------- */
---------------------------------------------------------------*/
+a {
+	color: #4169e1;
+}
+
+a:visited {
+	color: #800080;
+}
+
+a:hover,
+a:focus,
+a:active {
+	color: #191970;
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+/* Forms
+--------------------------------------------- */
 button,
 input[type="button"],
 input[type="reset"],
@@ -595,38 +639,15 @@ textarea {
 }
 
 /*--------------------------------------------------------------
-# Navigation
+# Layouts
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-## Links
+# Components
 --------------------------------------------------------------*/
-a {
-	color: #4169e1;
-}
 
-a:visited {
+/* Navigation
-	color: #800080;
+--------------------------------------------- */
-}
-
-a:hover,
-a:focus,
-a:active {
-	color: #191970;
-}
-
-a:focus {
-	outline: thin dotted;
-}
-
-a:hover,
-a:active {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
 .main-navigation {
 	display: block;
 	width: 100%;
@@ -721,90 +742,8 @@ a:active {
 	flex: 1 0 50%;
 }
 
-/*--------------------------------------------------------------
+/* Posts and pages
-# Accessibility
+--------------------------------------------- */
---------------------------------------------------------------*/
-
-/* Text meant only for screen readers. */
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute !important;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-.screen-reader-text:focus {
-	background-color: #f1f1f1;
-	border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
-	clip-path: none;
-	color: #21759b;
-	display: block;
-	font-size: 0.875rem;
-	font-weight: 700;
-	height: auto;
-	left: 5px;
-	line-height: normal;
-	padding: 15px 23px 14px;
-	text-decoration: none;
-	top: 5px;
-	width: auto;
-	z-index: 100000;
-}
-
-/* Do not show the outline on the skip link target. */
-#primary[tabindex="-1"]:focus {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-.alignleft {
-	float: left;
-	margin-right: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.alignright {
-	float: right;
-	margin-left: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.aligncenter {
-	clear: both;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 1.5em;
-}
-
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-.widget {
-	margin: 0 0 1.5em;
-}
-
-.widget select {
-	max-width: 100%;
-}
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
 .sticky {
 	display: block;
 }
@@ -829,9 +768,8 @@ a:active {
 	margin: 0 0 1.5em;
 }
 
-/*--------------------------------------------------------------
+/* Comments
-## Comments
+--------------------------------------------- */
---------------------------------------------------------------*/
 .comment-content a {
 	word-wrap: break-word;
 }
@@ -840,24 +778,18 @@ a:active {
 	display: block;
 }
 
-/*--------------------------------------------------------------
+/* Widgets
-# Infinite scroll
+--------------------------------------------- */
---------------------------------------------------------------*/
+.widget {
-
+	margin: 0 0 1.5em;
-/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
-.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer {
-	display: none;
 }
 
-/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.widget select {
-.infinity-end.neverending .site-footer {
+	max-width: 100%;
-	display: block;
 }
 
-/*--------------------------------------------------------------
+/* Media
-# Media
+--------------------------------------------- */
---------------------------------------------------------------*/
 .page-content .wp-smiley,
 .entry-content .wp-smiley,
 .comment-content .wp-smiley {
@@ -867,21 +799,13 @@ a:active {
 	padding: 0;
 }
 
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
 /* Make sure logo link wraps around logo image. */
 .custom-logo-link {
 	display: inline-block;
 }
 
-/*--------------------------------------------------------------
+/* Captions
-## Captions
+--------------------------------------------- */
---------------------------------------------------------------*/
 .wp-caption {
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -901,9 +825,8 @@ object {
 	text-align: center;
 }
 
-/*--------------------------------------------------------------
+/* Galleries
-## Galleries
+--------------------------------------------- */
---------------------------------------------------------------*/
 .gallery {
 	margin-bottom: 1.5em;
 	display: grid;
@@ -951,3 +874,89 @@ object {
 .gallery-caption {
 	display: block;
 }
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
+.infinite-scroll .posts-navigation,
+.infinite-scroll.neverending .site-footer {
+	display: none;
+}
+
+/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.infinity-end.neverending .site-footer {
+	display: block;
+}
+
+/*--------------------------------------------------------------
+# Utilities
+--------------------------------------------------------------*/
+
+/* Accessibility
+--------------------------------------------- */
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: #21759b;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+/* Do not show the outline on the skip link target. */
+#primary[tabindex="-1"]:focus {
+	outline: 0;
+}
+
+/* Alignments
+--------------------------------------------- */
+.alignleft {
+	float: left;
+	margin-right: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.alignright {
+	float: right;
+	margin-left: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.aligncenter {
+	clear: both;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 1.5em;
+}