From 2356f0b9bb3681e22ff6ddc5cf6268db8ad1e51f Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Sat, 21 Dec 2024 15:53:47 -0500
Subject: Styling revamp, minor page edits

---
 public/style.css | 357 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 213 insertions(+), 144 deletions(-)

(limited to 'public')

diff --git a/public/style.css b/public/style.css
index 3067b57..4221819 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,200 +3,269 @@
 }
 
 :root {
-    --theme-color: #015B24;
-    --secondary-color: #00953A;
+	--main-color: #228427;
+}
 
-    --max-width: 760px;
+html {
+	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
+	padding: 0;
+	margin: 0;
+    scroll-behavior: smooth;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Regular.woff2") format("woff2");
-  font-style: normal;
-  font-weight: normal;
+body {
+	background-color: #f9f9f9;
+	color: #333;
+	font-size: 100%;
+	margin: 12px;
+	padding: 0;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Bold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: bold;
+nav > ul {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+    flex-wrap: wrap;
+	font-weight: bold;
+	flex-direction: row;
+	position: relative;
 }
 
-@font-face {
-  font-family: "Plex Sans";
-  src: url("/public/fonts/IBMPlexSans-Italic.woff2") format("woff2");
-  font-style: italic;
-  font-weight: normal;
+nav > ul > li {
+	align-items: center;
+	display: inline-flex;
 }
 
-html {
-    background: beige;
+nav > ul > li > a {
+    border: 1px solid var(--main-color);
+	color: var(--main-color);
+    display: inline-block;
+    margin: 0 -1px -1px 0;
+    padding: 7px;
+	text-decoration: none;
+	white-space: nowrap;
 }
 
-body {
-    font-family: "Plex Sans", "Helvetica", sans-serif;
-    line-height: 1.55;
-    font-size: 20px;
-    margin: 0;
-    padding: 0;
+nav > ul > li > a:hover, nav > ul > li > a:active {
+	text-decoration: none;
+	background-color: var(--main-color);
+	color: #fff;
+}
+
+/*--- End Top Nav ---*/
+
+main {
+	display: block;
+	width: 100%;
+	margin: 0;
+	padding: 1px 0 20px 0;
+	border: 1px solid var(--main-color);
+	background-color: #fff;
+}
+
+main > p > em {
+	font-weight: normal;
+	font-style: italic;
+}
+
+main ul, main ol {
+	padding-right: 10px;
+}
+
+/*--- Begin Footer ---*/
+
+footer nav ul {
+	margin: -1px 0 0 0;
+}
+footer small {
+    display: block;
+    margin: 20px 0 0 0;
+    padding: 0 0 0 10px;
 }
 
-a,a:visited {
-    color: var(--theme-color);
+/*--- Links ---*/
+
+a {
+	color: var(--main-color);
 }
-a:hover,a:focus {
-    background: var(--theme-color);
-    color: white;
+
+a:hover {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
+}
+
+a:active {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
+}
+
+a, img {
+	border: none;
 }
 
+a:focus, img:focus {
+	outline: none;
+}
+
+/*--- Header Styles ---*/
+
 h1 {
-    background-color: var(--theme-color);
-    color: white;
-    font-size: 180%;
-    margin: 0;
-    padding: 1.2rem;
-    position: relative;
-    text-align: center;
+	font-size: 190%;
+	margin: 18px 18px 0 18px;
+}
+
+h2 {
+	font-size: 125%;
+	margin: 18px 18px 0 18px;
 }
-h2,h3,h4,h5,h6 {
-    font-size: 140%;
-    margin: 2em 0 0;
+
+h3 {
+	font-size: 113%;
+	margin: 18px 18px 0 18px;
 }
 
-blockquote {
-    border-left: 4px solid;
-    margin: 2em 0 2em 2em;
-    padding: 2px 8px;
+h4 {
+	margin: 18px 18px 0 18px;
 }
-blockquote p {
-  font-style: italic;
-  margin: 0;
-  padding: 0;
+
+p {
+	margin: 12px 18px 18px 18px;
+	padding: 0;
+	line-height: 1.25em;
+}
+
+hr {
+    margin: 2rem 0;
 }
+
 img {
+    height: auto;
     max-width: 100%;
 }
+
 pre {
-    border: 1px solid;
+    background: #eee;
+    padding: 20px;
     overflow: auto;
-    padding: 5px;
+}
+
+code {
+	font-size: 110%;
+}
+
+.table-container {
+	margin: 2rem 0;
+	overflow-y: scroll;
 }
 table {
+    border-collapse: collapse;
+    min-width: 500px;
     text-align: left;
     width: 100%;
 }
-nav {
-  padding: 10px 20px;
-  margin: 0 auto;
-  max-width: var(--max-width);
-}
-nav a:last-of-type {
-  float: right;
+table caption {
+	background: #eee;
+	font-weight: bold;
+	font-size: 120%;
+	padding: 10px;
+	text-align: left;
 }
-#menu,
-.posts {
-    list-style: none;
-    padding: 0;
+table tr {
+    border-bottom: 1px solid;
 }
-.posts li {
-    margin-bottom: 8px;
+table th, table td {
+    padding: 10px;
 }
-.posts li span {
-    display: block;
-    font-size: 90%;
+
+blockquote {
+	background: #f2f2f2;
+	border-left: 2px solid grey;
+	padding: 6px;
 }
-#menu {
-    align-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+blockquote p {
+	margin: 0;
 }
-#menu li {
-    display: inline-block;
-    margin: 0;
-    padding: 0 15px 15px 0;
+
+.footnotes {
+	font-size: 90%;
 }
-main {
-    margin: 0 auto;
-    max-width: var(--max-width);
-    padding: 0 10px 10px;
-}
-main h1 + p {
-    background-color: var(--secondary-color);
-    color: white;
-    font-weight: bold;
-    margin-bottom: 2rem;
-    margin-top: 0;
-    padding: 0.5rem;
-    text-align: center;
-}
-main h1 + p a {
-    color: white !important;
-}
-figure {
-  margin: 3em 0;
-}
-figure img {
-  width: 100%;
-}
-figcaption {
-    font-size: 90%;
-    opacity: 0.7;
-}
-footer {
-  border-top: 1px solid;
-  margin: 2em auto;
-  max-width: var(--max-width);
-  padding: 10px;
-  text-align: center;
+
+/*--- List Styles ---*/
+
+ol {
+	line-height: 1.25em;
 }
-.footnotes {
-    font-size: 90%;
-    margin-top: 2rem;
+
+ul, ol {
+	margin: 12px 0 0 36px;
+	padding: 0 0 0 24px;
+	line-height: 1.5em;
 }
-code {
-    background: white;
-    border: 1px dotted;
-    font-size: 18px;
-    padding: 0.1rem;
+
+ul {
+	list-style-type: square;
 }
-pre:has(code) {
-    border: 1px solid;
-    background: white;
-    padding: 0.5rem;
+
+li ul, li ol {
+	margin-top: 0;
 }
-pre code {
-    border: 0;
+
+ul.posts li {
+	margin-bottom: 10px;
 }
+ul.posts li span {
+	display: block;
+} 
 
 @media(max-width:600px) {
-    body {
-        font-size: 18px;
+    nav ul {
+        display: block;
+        margin: 0 0 -1px 0;
     }
-    code {
-        font-size: 16px;
+    nav > ul > li {
+        width: 50%;
     }
-    footer {
-        text-align: left;
+    nav > ul > li > a {
+        border-right: 0;
+        display: block;
+        margin: 0;
+        width: 100%;
     }
-    #menu {
-        justify-content: flex-start;
+    nav ul li:nth-of-type(even) a {
+        border-right: 1px solid var(--main-color);
+    }
+
+    footer nav ul li {
+        margin: 0 0 -1px 0;
     }
 }
 
 @media(prefers-color-scheme: dark) {
-    html {
-        background: #1C1B22;
-    }
-    a,a:visited {
-        color: lightgreen;
-    }
-    a:hover,a:focus {
-        background: var(--secondary-color);
-        color: white;
-    }
-    code, pre:has(code) {
-        background: black;
-    }
+	:root {
+		--main-color: #eee8a7;
+	}
+	html, body {
+		background: black;
+	}
+	body {
+		color: white;
+	}
+	main {
+		background: #2d2d2d;
+	}
+	table caption {
+		background: black;
+	}
+	nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active {
+		color: black;
+	}
+	pre {
+		background: black;
+	}
+	blockquote {
+		background: black;
+	}
 }
-- 
cgit v1.2.3-70-g09d2