Clean up CSS

src/scss/components/_add-another.css

@@ -0,0 +1,5 @@
+.formosa-field--add-another {
+	font-size: 16px;
+	margin-left: 8px;
+	margin-top: 0;
+}

src/scss/components/_contain.scss

@@ -0,0 +1,5 @@
+.contain {
+	margin: 0 auto;
+	max-width: $max-width;
+	width: 100%;
+}

src/scss/components/_icon.scss

@@ -0,0 +1,3 @@
+svg {
+	pointer-events: none;
+}

src/scss/components/_password.scss

@@ -0,0 +1,3 @@
+.formosa-password-wrapper {
+	display: flex;
+}

src/scss/layout/_content.scss

@@ -0,0 +1,3 @@
+#article {
+	padding: 1px $article-padding $article-padding;
+}

src/scss/layout/_footer.scss

@@ -2,35 +2,3 @@
 	bottom: 0;
 	order: 2;
 }
-
-#nav {
-	display: flex;
-	justify-content: space-between;
-	margin: 0 auto;
-}
-
-.nav__button,
-.nav__link {
-	color: $white;
-	height: $nav-height;
-}
-
-.nav__link {
-	align-items: center;
-	border-color: transparent;
-	border-style: solid;
-	border-width: 3px 0;
-	display: flex;
-	flex: 1 1 auto;
-	justify-content: center;
-	text-decoration: none;
-
-	& + .nav__link {
-		margin-left: 2px;
-	}
-}
-
-.nav__link--active {
-	border-bottom-color: $yellow;
-	color: $yellow;
-}

src/scss/layout/_layout.scss → src/scss/layout/_main.scss

@@ -20,13 +20,3 @@ body {
 	right: 0;
 	z-index: 9997;
 }
-
-.contain {
-	margin: 0 auto;
-	max-width: $max-width;
-	width: 100%;
-}
-
-#article {
-	padding: 1px $article-padding $article-padding;
-}

src/scss/layout/_nav.scss

@@ -0,0 +1,31 @@
+#nav {
+	display: flex;
+	justify-content: space-between;
+	margin: 0 auto;
+}
+
+.nav__button,
+.nav__link {
+	color: $white;
+	height: $nav-height;
+}
+
+.nav__link {
+	align-items: center;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 3px 0;
+	display: flex;
+	flex: 1 1 auto;
+	justify-content: center;
+	text-decoration: none;
+
+	& + .nav__link {
+		margin-left: 2px;
+	}
+}
+
+.nav__link--active {
+	border-bottom-color: $yellow;
+	color: $yellow;
+}

src/scss/layout/_typography.scss

@@ -0,0 +1,4 @@
+p {
+	line-height: 1.5;
+	margin: $margin 0 0;
+}

src/scss/style.scss

@@ -1,45 +1,33 @@
 @use 'sass:math';
-@import 'normalize.css/normalize';
 @import 'utilities/variables';
+@import 'normalize.css/normalize';
 @import '@jlbelanger/formosa/src/style';
-@import 'layout/layout';
+@import 'layout/typography';
+@import 'layout/main';
 @import 'layout/header';
+@import 'layout/content';
+@import 'layout/nav';
 @import 'layout/footer';
-@import 'components/buttons';
+@import 'components/add-another';
+@import 'components/button';
 @import 'components/calendar';
 @import 'components/chart';
+@import 'components/contain';
 @import 'components/diary';
 @import 'components/favourite';
 @import 'components/food';
 @import 'components/formosa';
-@import 'components/headings';
-@import 'components/hrs';
-@import 'components/links';
+@import 'components/heading';
+@import 'components/hr';
+@import 'components/icon';
+@import 'components/link';
 @import 'components/meal';
-@import 'components/modals';
+@import 'components/modal';
 @import 'components/nutrition-facts';
 @import 'components/pagination';
+@import 'components/password';
+@import 'components/radio';
 @import 'components/search';
 @import 'components/skip';
-@import 'components/radio-lists';
-@import 'components/tables';
+@import 'components/table';
 @import 'components/verified';
-
-p {
-	line-height: 1.5;
-	margin: $margin 0 0;
-}
-
-svg {
-	pointer-events: none;
-}
-
-.formosa-field--add-another {
-	font-size: 16px;
-	margin-left: 8px;
-	margin-top: 0;
-}
-
-.formosa-password-wrapper {
-	display: flex;
-}

src/scss/utilities/_variables.scss

@@ -1,3 +1,5 @@
+// Colors
+
 $white: #fff;
 $off-white: #f9f9f9;
 $lightest-gray: #ddd;
@@ -20,8 +22,9 @@ $dark-yellow: scale-color($yellow, $lightness: -10%, $saturation: -20%);
 $red: #c33;
 $dark-red: scale-color($red, $lightness: -20%, $saturation: -25%);
 
+// Sizes
+
 $body-background-color: $off-white;
-$breakpoint: 800px;
 $button-border-bottom-width: 4px;
 $button-size: 44px;
 $article-padding: 16px;
@@ -43,6 +46,8 @@ $modal-padding: 32px !default;
 $modal-text-color: $black !default;
 $modal-zindex: 9999 !default;
 
+// Overrides
+
 $formosa-autocomplete-options-background-color-highlighted: $yellow;
 
 $formosa-button-background-color: $pink;
@@ -73,3 +78,7 @@ $formosa-spinner-color-alternate: $pink;
 
 $formosa-toast-bottom: $nav-height;
 $formosa-toast-padding: 12px;
+
+// Breakpoints
+
+$breakpoint: 800px;

yarn.lock

@@ -3021,9 +3021,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001538"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz"
-  integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==
+  version "1.0.30001546"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz"
+  integrity sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"