8 files changed, 223 insertions, 95 deletions

diff --git a/public/fonts/IBMPlexSans-Bold.woff2 b/public/fonts/IBMPlexSans-Bold.woff2
new file mode 100644
index 0000000..b570504
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Bold.woff2
diff --git a/public/fonts/IBMPlexSans-Italic.woff2 b/public/fonts/IBMPlexSans-Italic.woff2
new file mode 100644
index 0000000..57523c9
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Italic.woff2
diff --git a/public/fonts/IBMPlexSans-Regular.woff2 b/public/fonts/IBMPlexSans-Regular.woff2
new file mode 100644
index 0000000..ca64cc5
--- /dev/null
+++ b/public/fonts/IBMPlexSans-Regular.woff2
diff --git a/public/fonts/SofiaSans-Medium.woff2 b/public/fonts/SofiaSans-Medium.woff2
deleted file mode 100644
index b251a2c..0000000
--- a/public/fonts/SofiaSans-Medium.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-MediumItalic.woff2 b/public/fonts/SofiaSans-MediumItalic.woff2
deleted file mode 100644
index 4ebf61b..0000000
--- a/public/fonts/SofiaSans-MediumItalic.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-Regular.woff2 b/public/fonts/SofiaSans-Regular.woff2
deleted file mode 100644
index 4d16f7a..0000000
--- a/public/fonts/SofiaSans-Regular.woff2
+++ /dev/null
diff --git a/public/fonts/SofiaSans-SemiBold.woff2 b/public/fonts/SofiaSans-SemiBold.woff2
deleted file mode 100644
index c690dcc..0000000
--- a/public/fonts/SofiaSans-SemiBold.woff2
+++ /dev/null
diff --git a/public/style.css b/public/style.css
index 58e63c7..4d8fd13 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2,147 +2,275 @@
     box-sizing: border-box;
 }
 
-@font-face {
-    font-family: 'Sofia Sans';
-    font-style: normal;
-    font-weight: normal;
-    src: url('/public/fonts/SofiaSans-Regular.woff2') format('woff2');
+:root {
+	--main-color: #228427;
 }
-@font-face {
-    font-family: 'Sofia Sans';
-    font-style: italic;
-    font-weight: normal;
-    src: url('/public/fonts/SofiaSans-MediumItalic.woff2') format('woff2');
-}
-@font-face {
-    font-family: 'Sofia Sans';
-    font-weight: bold;
-    src: url('/public/fonts/SofiaSans-SemiBold.woff2') format('woff2');
+
+html {
+	font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif;
+	padding: 0;
+	margin: 0;
+    scroll-behavior: smooth;
 }
 
 body {
-	color: #2d2d2d;
-	font-family: "Sofia Sans", serif;
-  	line-height: 1.48;
-    font-size: 16px;
-    padding: 0 10px;
-    margin: 4rem auto;
-    max-width: 680px;
+	background-color: #f9f9f9;
+	color: #333;
+	font-size: 100%;
+	max-width: 85%;
+  	margin: 1rem auto;
+	padding: 0;
 }
 
-nav#top a {
-	display: inline-block;
-	margin: 0 0 1rem 0;
+nav > ul {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+    flex-wrap: wrap;
+	font-weight: bold;
+	flex-direction: row;
+	position: relative;
 }
 
+nav > ul > li {
+	align-items: center;
+	display: inline-flex;
+}
+
+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;
+}
+
+nav > ul > li > a:hover, nav > ul > li > a:active {
+	text-decoration: none;
+	background-color: var(--main-color);
+	color: #fff;
+}
+
+/*--- End Top Nav ---*/
+
 main {
-	max-width: 42em;
-	margin:15 auto;
+	display: block;
+	width: 100%;
+	margin: 0;
+	padding: 1px 0 20px 0;
+	border: 1px solid var(--main-color);
+	background-color: #fff;
 }
 
-pre {
-	background: lightgoldenrodyellow;
-	border-radius: 2px;
-	overflow: auto;
-	padding: 8px;
+main > p > em {
+	font-weight: normal;
+	font-style: italic;
 }
 
-code {
-	background: lightgoldenrodyellow;
-	border-radius: 2px;
-	color: saddlebrown;
-	font-size: 14px;
-	padding: 1px 2px;
+main ul, main ol {
+	padding-right: 10px;
 }
 
-img {
-	height: auto;
-	max-width: 100%;
+/*--- Begin Footer ---*/
+
+footer nav ul {
+	margin: -1px 0 0 0;
+}
+footer small {
+    display: block;
+    margin: 20px 0 0 0;
+    padding: 0 0 0 10px;
 }
 
-figure {
-	margin: 3rem 0;
+/*--- Links ---*/
+
+a {
+	color: var(--main-color);
 }
-figcaption {
-	font-family: sans-serif;
-	font-size: 90%;
+
+a:hover {
+	text-decoration: none;
+	color: #fff;
+	background-color: var(--main-color);
 }
 
-blockquote {
-	background: rgba(0,0,0,0.05);
-	border-left: 2px solid;
-	margin-bottom: 2rem;
-	margin-top: 2rem;
-	padding-left: 10px;
+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 {
-	font-size: 28px;
-	line-height: 1.2;
-	margin: 0 0 10px;
+	font-size: 190%;
+	margin: 18px 18px 0 18px;
 }
-h1 + p {
-	margin-bottom: 2rem;
-	margin-top: 0;
+
+h2 {
+	font-size: 125%;
+	margin: 18px 18px 0 18px;
+}
+
+h3 {
+	font-size: 113%;
+	margin: 18px 18px 0 18px;
 }
 
-h2,h3,h4,h5,h6 {
-	color: grey;
-	line-height: 1.2;
-	margin-top: 3rem;
+h4 {
+	margin: 18px 18px 0 18px;
 }
 
-.posts {
-	list-style: none;
+p {
+	margin: 12px 18px 18px 18px;
 	padding: 0;
+	line-height: 1.25em;
 }
-.posts li {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 8px;
+
+hr {
+    margin: 2rem 0;
 }
-.posts li span {
-	font-size: 90%;
-	font-style: italic;
-	margin-left: 10px;
-	min-width: 100px;
-	opacity: 0.7;
-	text-align: right;
+
+img {
+    height: auto;
+    max-width: 100%;
 }
 
-footer {
-	margin-top: 4rem;
+pre {
+    background: #eee;
+    padding: 20px;
+    overflow: auto;
 }
 
-footer nav {
-	margin-bottom: 2rem;
+code {
+	font-size: 110%;
 }
 
-footer nav ul {
-	list-style: none;
+.table-container {
+	margin: 2rem 0;
+	overflow-y: scroll;
+}
+table {
+    border-collapse: collapse;
+    min-width: 500px;
+    text-align: left;
+    width: 100%;
+}
+table caption {
+	background: #eee;
+	font-weight: bold;
+	font-size: 120%;
+	padding: 10px;
+	text-align: left;
+}
+table tr {
+    border-bottom: 1px solid;
+}
+table th, table td {
+    padding: 10px;
+}
+
+blockquote {
+	background: #f2f2f2;
+	border-left: 2px solid grey;
+	padding: 6px;
+}
+blockquote p {
 	margin: 0;
-	padding: 0;
 }
-footer nav ul li {
-	display: inline-block;
-	margin-right: 10px;
+
+.footnotes {
+	font-size: 90%;
+}
+
+/*--- List Styles ---*/
+
+ol {
+	line-height: 1.25em;
+}
+
+ul, ol {
+	margin: 12px 0 0 36px;
+	padding: 0 0 0 24px;
+	line-height: 1.5em;
+}
+
+ul {
+	list-style-type: square;
+}
+
+li ul, li ol {
+	margin-top: 0;
+}
+
+ul.posts li {
+	margin-bottom: 10px;
+}
+ul.posts li span {
+	display: block;
+} 
+
+@media(max-width:600px) {
+	body {
+		max-width: 100%;
+		margin: 12px;
+	}
+    nav ul {
+        display: block;
+        margin: 0 0 -1px 0;
+    }
+    nav > ul > li {
+        width: 50%;
+    }
+    nav > ul > li > a {
+        border-right: 0;
+        display: block;
+        margin: 0;
+        width: 100%;
+    }
+    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) {
+	:root {
+		--main-color: #eee8a7;
+	}
+	html, body {
+		background: black;
+	}
 	body {
+		color: white;
+	}
+	main {
 		background: #2d2d2d;
-		color: #f1f1f1;
 	}
-	h2,h3,h4,h5,h6 {
-		color: lightgrey;
+	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: rgba(0,0,0,0.5);
+		background: black;
 	}
 }
-
-@media(max-width:680px) {
-	body {
-		margin: 1rem auto;
-	}
-}
\ No newline at end of file