Use Makefile and SCSS

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

@@ -0,0 +1,14 @@
+clean:
+	rm css/*
+
+css:
+	sass scss:css
+
+css-watch:
+	sass -w scss:css
+
+server:
+	python -m http.server
+
+dev:
+	make -j 2 css-watch server

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

@@ -0,0 +1,227 @@
+/* ----------------- */
+/* 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

@@ -0,0 +1 @@
+{"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/index.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>CSS Purgatory - Base</title>
-	<link rel="stylesheet" href="index.css">
+	<link rel="stylesheet" href="css/base.css">
 	<!-- Base v1.1 -->
 </head>
 <body>

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

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Base - Landing Page</title>
-	<link rel="stylesheet" href="index.css">
+	<link rel="stylesheet" href="css/base.css">
 	<style>
 		body {
 		overflow: hidden;

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

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Base - Sample Page</title>
-	<link rel="stylesheet" href="index.css">
+	<link rel="stylesheet" href="css/base.css">
 	<!-- Base v1.1 -->
 </head>
 <body>

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

@@ -7,31 +7,27 @@
  * ntive changes
  * will be made      */
 
-:root {
-
   /* colors */
 
-  --color-dark:  0 0% 0% ; /* Black */
+$color-dark:  hsl(0 0% 0%); /* Black */
-  --color-light: 0 0% 50% ; /* Gray */
+$color-light: hsl(0 0% 50%); /* Gray */
-  --color-white: 0 0% 100% ;/* White */
+$color-white: hsl(0 0% 100%);/* White */
 
   /* font */
 
   /* Sizes divided by 16 so values given in px */
-  --fs-900: calc(125rem / 16);
+$fs-900: calc(125rem / 16);
-  --fs-800: calc(75rem / 16);
+$fs-800: calc(75rem / 16);
-  --fs-700: calc(56rem / 16);
+$fs-700: calc(56rem / 16);
-  --fs-600: calc(32rem / 16);
+$fs-600: calc(32rem / 16);
-  --fs-500: calc(28rem / 16);
+$fs-500: calc(28rem / 16);
-  --fs-400: calc(24rem / 16);
+$fs-400: calc(24rem / 16);
-  --fs-300: calc(18rem / 16);
+$fs-300: calc(18rem / 16);
-  --fs-200: calc(16rem / 16);
+$fs-200: calc(16rem / 16);
 
-  --ff-serif: serif;
+$ff-serif: serif;
-  --ff-sans-cond: sans-serif;
+$ff-sans-cond: sans-serif;
-  --ff-sans: sans-serif;
+$ff-sans: sans-serif;
-
-}
 
 /* ----- */
 /* Reset */
@@ -56,10 +52,10 @@ h1, h2, h3 {
 }
 
 body {
-  font-family: var(--ff-sans);
+  font-family: $ff-sans;
-  font-size: var(--fs-400);
+  font-size: $fs-400;
-  color: hsl( var(--color-dark) );
+  color: $color-dark;
-  background-color: hsl( var(--color-white) );
+  background-color: $color-white;
   line-height: 1.5;
   min-height: 100vh;
 }
@@ -153,28 +149,28 @@ input, button, textarea, select {
 
 /* Color Classes */
 
-.bg-dark  { background-color: hsl( var(--color-dark) ); }
+.bg-dark  { background-color: $color-dark; }
-.bg-light { background-color: hsl( var(--color-light) ); }
+.bg-light { background-color: $color-light; }
-.bg-white { background-color: hsl( var(--color-white) ); }
+.bg-white { background-color: $color-white; }
 
-.text-dark  { color: hsl( var(--color-dark) ); }
+.text-dark  { color: $color-dark; }
-.text-light { color: hsl( var(--color-light) ); }
+.text-light { color: $color-light; }
-.text-white { color: hsl( var(--color-white) ); }
+.text-white { color: $color-white; }
 
 /* Font Classes */
 
-.fs-900 { font-size: var(--fs-900); }
+.fs-900 { font-size: $fs-900; }
-.fs-800 { font-size: var(--fs-800); }
+.fs-800 { font-size: $fs-800; }
-.fs-700 { font-size: var(--fs-700); }
+.fs-700 { font-size: $fs-700; }
-.fs-600 { font-size: var(--fs-600); }
+.fs-600 { font-size: $fs-600; }
-.fs-500 { font-size: var(--fs-500); }
+.fs-500 { font-size: $fs-500; }
-.fs-400 { font-size: var(--fs-400); }
+.fs-400 { font-size: $fs-400; }
-.fs-300 { font-size: var(--fs-300); }
+.fs-300 { font-size: $fs-300; }
-.fs-200 { font-size: var(--fs-200); }
+.fs-200 { font-size: $fs-200; }
 
-.ff-serif { font-family: var(--ff-serif); }
+.ff-serif { font-family: $ff-serif; }
-.ff-sans-cond { font-family: var(--ff-sans-cond); }
+.ff-sans-cond { font-family: $ff-sans-cond; }
-.ff-sans { font-family: var(--ff-sans); }
+.ff-sans { font-family: $ff-sans; }
 
 .uppercase { text-transform: uppercase; }
 .lowercase { text-transform: lowercase; }