refactor CSS

2 files changed, 150 insertions, 121 deletions

diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..d81d724
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,147 @@
+:root {
+	--fg: black;
+	--bg: #fff8e7; /* cosmic latte */
+	--accent: #c588b0;
+}
+
+/* UTILITY CLASSES */
+.inline { display: inline; }
+.center { text-align: center; }
+.clearfix::after { clear: both; display: block; content: ""; }
+
+/* MAIN STYLE */
+body {
+	font: 100%/1.4 sans-serif;
+	color: var(--fg);
+	background-color: var(--bg);
+}
+header,
+section,
+article {
+	max-width: 45rem;
+	padding: 1rem;
+	margin: auto;
+}
+
+/* headers */
+h1 {
+	font: bold 200%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+	border-bottom: 0.25em solid var(--accent);
+}
+h2 {
+	font: bold 168%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+h3 {
+	font: bold 141%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+h4 {
+	font: bold 119%/1 sans-serif;
+	margin: 0.5em 0 0 0;
+}
+
+/* images */
+figure {
+	border: 1px solid;
+	margin: auto;
+	padding: 0.5em;
+	text-align: center;
+	width: min-content;
+}
+figure.fullwidth {
+	width: initial;
+}
+figure.fullwidth > img {
+	max-width: 100%;
+}
+
+/* tables */
+table {
+	margin: 0.5em;
+}
+tr:nth-of-type(odd) {
+	background: var(--bg);
+}
+tr:nth-of-type(even) {
+	background: grey;
+}
+tr td:first-child {
+	white-space: nowrap;
+}
+td {
+	padding: 0 0.5em;
+}
+th {
+	border: 1px solid;
+	padding: 0 0.5em;
+}
+
+/* misc */
+a:hover,
+a:focus {
+	text-decoration: none;
+}
+section,
+article {
+	border-bottom: 1px solid;
+}
+pre,
+code {
+	font: 100%/1.25 monospace;
+}
+blockquote,
+pre {
+	margin: 1em;
+	border-left: 0.25em solid;
+	padding-left: 1em;
+}
+details {
+	border: 1px solid;
+	padding: 0.5em;
+}
+
+/* header */
+header > nav {
+	display: inline-block;
+}
+header > nav > ul {
+	list-style-type: none;
+	margin: 0 0 0.5em 0;
+	padding: 0;
+}
+header > nav > ul > li {
+	display: inline;
+}
+header > nav > ul > li > a {
+	padding: 0.5em;
+}
+header > nav a.active {
+	background: var(--accent);
+	color: var(--bg);
+}
+#decor-moons {
+	float: right;
+	user-select: none;
+	overflow: hidden;
+}
+
+/* dark mode */
+@media(prefers-color-scheme: dark) {
+	:root {
+		--fg: #fff8e7;
+		--bg: #1d2021;
+		--accent: #ddadcc;
+	}
+	body {
+		line-height: 1.5;
+		word-spacing: 0.1em;
+	}
+	a {
+		color: #cedeff;
+	}
+	a:visited {
+		color: #d4bff8;
+	}
+}
diff --git a/css/terminal.css b/css/terminal.css
index 509a1a6..98a3e5f 100644
--- a/css/terminal.css
+++ b/css/terminal.css
@@ -3,9 +3,9 @@
 	src: url("../files/fonts/DejaVuSansMono.ttf");
 }
 :root {
-	--fg: #90ff90;
-	--link: #3e3;
-	--visited: #b9ffb0;
+	--fg: #86ff86;
+	--link: #42f042;
+	--visited: #b7ffaf;
 
 	--bg: #1d2021;
 	--bg2: black; --selection: #466639;
@@ -52,41 +52,12 @@ body {
 	background-color: var(--bg);
 	background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%);
 	background-size: 100% 3px;
-	color: var(--fg);
-	font: 100%/1.6 var(--font-body);
-	margin: auto;
-	max-width: 75ch;
-	word-spacing: .05em;
 }
 ::selection {
 	background: var(--selection);
 	color: white;
 	text-shadow: none;
 }
-a {
-	color: var(--link);
-}
-a:visited {
-	color: var(--visited);
-}
-a:hover,
-a:focus {
-	text-decoration: none;
-}
-code {
-	font: 100%/1.25 var(--font-mono);
-}
-pre > code {
-	font: 87.5%/1.1 var(--font-mono);
-}
-footer {
-	font: 75%/1.25 var(--font-accent);
-}
-h1 {
-	font: bold 200%/1 var(--font-accent);
-	margin: 0.5em 0 0 0;
-	border-bottom: 0.25em solid;
-}
 h1::after {
 	content: "█";
 	animation: blink 2.4s steps(2) infinite;
@@ -102,92 +73,3 @@ h1::after {
 		opacity: 50%;
 	}
 }
-h2 {
-	font: bold 141%/1 var(--font-accent);
-	margin: 0.4em 0 0 0;
-}
-h3 {
-	font: bold 117%/1 var(--font-accent);
-}
-/* NAVIGATION */
-header > nav {
-	display: inline-block; /* forces single line nav... not ideal but works for now FIXME */
-}
-header > nav > ul {
-	font: 100%/1.5 var(--font-accent);
-	list-style-type: none;
-	margin: 0 0 0.4em 0;
-	padding: 0;
-}
-header > nav > ul > li {
-	display: inline;
-}
-header > nav > ul > li > a {
-	padding: 0.4em;
-}
-header > nav a.active {
-	background: var(--fg);
-	color: var(--bg);
-}
-/* SECTION */
-main,
-section,
-article {
-	border-bottom: 1px solid;
-}
-/* IMAGES */
-figure {
-	border: 1px solid;
-	margin: auto;
-	padding: 0.4em;
-	text-align: center;
-	width: min-content;
-}
-figure.fullwidth {
-	width: initial;
-}
-figure.fullwidth > img {
-	max-width: 100%;
-}
-/* DETAILS */
-details {
-	border: 1px solid;
-	padding: 0.4em;
-}
-/* BLOCKQUOTE */
-blockquote,
-pre {
-	margin: 1em;
-	border-left: 0.25em solid var(--fg);
-	padding-left: 1em;
-}
-/* TABLES */
-table {
-	margin: 0.4em;
-}
-tr:nth-of-type(odd) {
-	background: var(--bg);
-}
-tr:nth-of-type(even) {
-	background: var(--bg2);
-}
-tr td:first-child {
-	white-space: nowrap;
-}
-td {
-	padding: 0 0.4em;
-}
-th {
-	border: 1px solid;
-	padding: 0 0.4em;
-}
-table.center-cells td,
-table.center-cells th {
-	text-align: center;
-}
-/* DECORATIONS */
-#decor-moons {
-	float: right;
-	user-select: none;
-	overflow: hidden;
-}