Merge branch 'master' into waltuh

Update base

src/cool-stuff/css-purgatory/base/.gitignore

@@ -0,0 +1 @@
+css/

src/cool-stuff/css-purgatory/base/css/base.css

@@ -1,227 +0,0 @@
-/* ----------------- */
-/* Custom Properties */
-/* ----------------- */
-/* Many of the prop-
- * erties here are
- * where the substa-
- * ntive changes
- * will be made      */
-/* colors */
-/* Black */
-/* Gray */
-/* White */
-/* font */
-/* Sizes divided by 16 so values given in px */
-/* ----- */
-/* 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: sans-serif;
-  font-size: 1.5rem;
-  color: hsl(0deg, 0%, 0%);
-  background-color: hsl(0deg, 0%, 100%);
-  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 */
-/* --------------- */
-/* Layouts */
-.container {
-  padding-inline: 4rem;
-  margin-inline: auto;
-  max-width: 80rem;
-}
-
-.flex {
-  display: flex;
-  gap: 2rem;
-}
-
-.column {
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  align-content: center;
-}
-
-.row {
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-content: baseline;
-  max-width: 100%;
-}
-
-.two-columns {
-  display: grid;
-  /* Will shrink to one column, never exceed two!
-   * The `max` in `minmax` asks that the columns
-   * be no smaller */
-  grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
-  column-gap: 1rem;
-  justify-content: space-evenly;
-}
-
-.lock-bottom {
-  position: absolute;
-  bottom: 0%;
-}
-
-/* Other */
-.hr::after { /* Add fake hr after header */
-  content: "";
-  position: absolute;
-  display: block;
-  clear: both;
-  width: 100%;
-  height: 0.15rem;
-  background-color: black;
-}
-
-/* Color Classes */
-.bg-dark {
-  background-color: hsl(0deg, 0%, 0%);
-}
-
-.bg-light {
-  background-color: hsl(0deg, 0%, 50%);
-}
-
-.bg-white {
-  background-color: hsl(0deg, 0%, 100%);
-}
-
-.text-dark {
-  color: hsl(0deg, 0%, 0%);
-}
-
-.text-light {
-  color: hsl(0deg, 0%, 50%);
-}
-
-.text-white {
-  color: hsl(0deg, 0%, 100%);
-}
-
-/* Font Classes */
-.fs-900 {
-  font-size: 7.8125rem;
-}
-
-.fs-800 {
-  font-size: 4.6875rem;
-}
-
-.fs-700 {
-  font-size: 3.5rem;
-}
-
-.fs-600 {
-  font-size: 2rem;
-}
-
-.fs-500 {
-  font-size: 1.75rem;
-}
-
-.fs-400 {
-  font-size: 1.5rem;
-}
-
-.fs-300 {
-  font-size: 1.125rem;
-}
-
-.fs-200 {
-  font-size: 1rem;
-}
-
-.ff-serif {
-  font-family: serif;
-}
-
-.ff-sans-cond {
-  font-family: sans-serif;
-}
-
-.ff-sans {
-  font-family: sans-serif;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.lowercase {
-  text-transform: lowercase;
-}
-
-/* Semantic Tags and Their Classes */
-header {
-  margin-bottom: 3vh;
-}
-
-section:not(:last-of-type) {
-  margin-bottom: 3vh;
-}
-
-footer {
-  margin-top: 3vh;
-}
-
-/* -------------------- */
-/* Non-Reusable Classes */
-/* -------------------- */
-/* meant for these pages
- * only, not to be used
- * in practice          */
-.colors--block {
-  padding: 3rem 1rem 1rem;
-  border: 1px solid black;
-}
-
-/*# sourceMappingURL=base.css.map */

src/cool-stuff/css-purgatory/base/css/base.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE0B;AACC;AACA;AAE3B;AAEA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA7CY;EA8CZ,kBA5CY;EA6CZ;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AAAA;AAAA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAEA;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA8Id;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAkJd;AAEA;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAiJT;EAAY,aA/ID;;;AAgJX;EAAgB,aA/ID;;;AAgJf;EAAW,aA/ID;;;AAiJV;EAAa;;;AACb;EAAa;;;AAEb;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AAAA;AAAA;AAIA;EACE;EACA","file":"base.css"}

src/cool-stuff/css-purgatory/base/scss/base.scss

@@ -1,11 +1,13 @@
+@use "sass:math";
+@mixin reset {
 /* ----------------- */
 /* Custom Properties */
 /* ----------------- */
-/* Many of the prop-
+/*
- * erties here are
+  This values are to be overridden
- * where the substa-
+  after being injected into
- * ntive changes
+  the global scope.
- * will be made      */
+*/
 
   /* colors */
 
@@ -16,76 +18,19 @@ $color-white: hsl(0 0% 100%);/* White */
   /* font */
 
   /* Sizes divided by 16 so values given in px */
-$fs-900: calc(125rem / 16);
+$fs-900: math.div(125rem, 16);
-$fs-800: calc(75rem / 16);
+$fs-800: math.div(75rem, 16);
-$fs-700: calc(56rem / 16);
+$fs-700: math.div(56rem, 16);
-$fs-600: calc(32rem / 16);
+$fs-600: math.div(32rem, 16);
-$fs-500: calc(28rem / 16);
+$fs-500: math.div(28rem, 16);
-$fs-400: calc(24rem / 16);
+$fs-400: math.div(24rem, 16);
-$fs-300: calc(18rem / 16);
+$fs-300: math.div(18rem, 16);
-$fs-200: calc(16rem / 16);
+$fs-200: math.div(16rem, 16);
 
 $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 +134,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 */
 /* -------------------- */