From ecff203c0d4761b1be00fc606fb66abdc7e450d9 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Sun, 2 Oct 2022 15:28:02 -0400
Subject: [PATCH] Wrap all of base in a mixin

This means that it can be used
at global scope in other files
---
 .../css-purgatory/base/scss/base.scss         | 117 +++++++++---------
 1 file changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/cool-stuff/css-purgatory/base/scss/base.scss b/src/cool-stuff/css-purgatory/base/scss/base.scss
index 8ee602b..6df6546 100644
--- a/src/cool-stuff/css-purgatory/base/scss/base.scss
+++ b/src/cool-stuff/css-purgatory/base/scss/base.scss
@@ -1,3 +1,4 @@
+@mixin reset {
 /* ----------------- */
 /* Custom Properties */
 /* ----------------- */
@@ -29,63 +30,6 @@ $ff-serif: serif;
 $ff-sans-cond: sans-serif;
 $ff-sans: sans-serif;
 
-/* ----- */
-/* Reset */
-/* ----- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body, h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6, p {
-  font-weight: 400;
-}
-
-h1, h2, h3 {
-  line-height: 1.1;
-}
-
-body {
-  font-family: $ff-sans;
-  font-size: $fs-400;
-  color: $color-dark;
-  background-color: $color-white;
-  line-height: 1.5;
-  min-height: 100vh;
-}
-
-main {
-  margin-left: 1vw;
-  margin-top: 1vh;
-}
-
-img, picture {
-  max-width: 100%;
-  display: block;
-}
-
-input, button, textarea, select {
-  font: inherit;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behaviour: auto !important;
-	}
-}
-
-
 /* --------------- */
 /* Utility Classes */
 /* --------------- */
@@ -189,6 +133,65 @@ footer {
   margin-top: 3vh;
 }
 
+/* ----- */
+/* Reset */
+/* ----- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: 400;
+}
+
+h1, h2, h3 {
+  line-height: 1.1;
+}
+
+body {
+  font-family: $ff-sans;
+  font-size: $fs-400;
+  color: $color-dark;
+  background-color: $color-white;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+main {
+  margin-left: 1vw;
+  margin-top: 1vh;
+}
+
+img, picture {
+  max-width: 100%;
+  display: block;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behaviour: auto !important;
+	}
+}
+}
+
+@include reset;
+
 /* -------------------- */
 /* Non-Reusable Classes */
 /* -------------------- */