From 777278294660df73974dc3fccd6e029f6ad6c258 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Thu, 7 Jul 2022 17:20:00 -0400
Subject: [PATCH] CSS Purgatory: base template

No layout section
---
 src/cool-stuff/css-purgatory/base/index.css  | 159 +++++++++++++++++++
 src/cool-stuff/css-purgatory/base/index.html |  99 ++++++++++++
 2 files changed, 258 insertions(+)
 create mode 100644 src/cool-stuff/css-purgatory/base/index.css
 create mode 100644 src/cool-stuff/css-purgatory/base/index.html

diff --git a/src/cool-stuff/css-purgatory/base/index.css b/src/cool-stuff/css-purgatory/base/index.css
new file mode 100644
index 0000000..325c4fc
--- /dev/null
+++ b/src/cool-stuff/css-purgatory/base/index.css
@@ -0,0 +1,159 @@
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+
+/* ----- */
+/* 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: var(--ff-sans);
+  font-size: var(--fs-400);
+  color: hsl( var(--color-dark) );
+  background-color: hsl ( var(--color-white) );
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+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;
+	}
+}
+
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/* Many of the prop-
+ * erties here are
+ * where the substa-
+ * ntive changes
+ * will be made      */
+
+:root {
+
+  /* colors */
+
+  --color-dark:  0 0% 0% ; /* Black */
+  --color-light: 0 0% 50% ; /* Gray */
+  --color-white: 0 0% 100% ;/* White */
+
+  /* font */
+
+  /* Sizes divided by 16 so values given in px */
+  --fs-900: calc(125rem / 16);
+  --fs-800: calc(75rem / 16);
+  --fs-700: calc(56rem / 16);
+  --fs-600: calc(32rem / 16);
+  --fs-500: calc(28rem / 16);
+  --fs-400: calc(24rem / 16);
+  --fs-300: calc(18rem / 16);
+  --fs-200: calc(16rem / 16);
+
+  --ff-serif: serif;
+  --ff-sans-cond: sans-serif;
+  --ff-sans: sans-serif;
+
+}
+
+/* --------------- */
+/* Utility Classes */
+/* --------------- */
+
+.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%;
+}
+
+.container {
+  padding-inline: 2em;
+  margin-inline: auto;
+  max-width: 80rem;
+}
+
+/* Color Classes */
+
+.bg-dark  { background-color: hsl( var(--color-dark) ); }
+.bg-light { background-color: hsl( var(--color-light) ); }
+.bg-white { background-color: hsl( var(--color-white) ); }
+
+.text-dark  { color: hsl( var(--color-dark) ); }
+.text-light { color: hsl( var(--color-light) ); }
+.text-white { color: hsl( var(--color-white) ); }
+
+/* Font Classes */
+
+.fs-900 { font-size: var(--fs-900); }
+.fs-800 { font-size: var(--fs-800); }
+.fs-700 { font-size: var(--fs-700); }
+.fs-600 { font-size: var(--fs-600); }
+.fs-500 { font-size: var(--fs-500); }
+.fs-400 { font-size: var(--fs-400); }
+.fs-300 { font-size: var(--fs-300); }
+.fs-200 { font-size: var(--fs-200); }
+
+.ff-serif { font-family: var(--ff-serif); }
+.ff-sans-cond { font-family: var(--ff-sans-cond); }
+.ff-sans { font-family: var(--ff-sans); }
+
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice          */
+
+.colors--block {
+  padding: 3rem 1rem 1rem;
+  border: 1px solid black;
+}
diff --git a/src/cool-stuff/css-purgatory/base/index.html b/src/cool-stuff/css-purgatory/base/index.html
new file mode 100644
index 0000000..49f3753
--- /dev/null
+++ b/src/cool-stuff/css-purgatory/base/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<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">
+</head>
+<body>
+	<header id="title">
+		<h1>Base</h1>
+	</header>
+
+	<hr>
+
+	<article class="">
+	<section id="description">
+		<h2>Description</h2>
+		<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
+	</section>
+
+	<hr>
+
+	<section id="colors">
+		<h2>Colors</h2>
+		<div class="container flex">
+			<div>
+				<div class="colors--block bg-dark text-white">#Color hex code</div>
+				<p> HSL: Color hsl
+			</div>
+			<div>
+				<div class="colors--block bg-light text-white">#Color hex code</div>
+				<p> HSL: Color hsl
+			</div>
+			<div>
+				<div class="colors--block bg-white text-dark">#Color hex code</div>
+				<p> HSL: Color hsl
+			</div>
+		</div>
+	</section>
+
+	<hr>
+
+	<section id="typography">
+		<h2>Typography</h2>
+		<div class="flex row">
+			<div>
+				<p class="ff-serif fs-900">Heading 1</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-800">Heading 2</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-700">Heading 3</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-600">Heading 4</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-500">Heading 5</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-400">Heading 6</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-300">Text</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+
+			<div>
+				<p class="ff-sans-cond fs-200">Subtext</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+		</div>
+	</section>
+	</article>
+
+	<hr>
+
+	<footer>
+		<a href="../">Return to Purgatory</a>
+	</footer>
+
+</body>
+</html>