Trying out a new style, minor content changes. Might revert if I feel like it

1 files changed, 131 insertions, 17 deletions

diff --git a/public/style.css b/public/style.css
index 21c988d..3067b57 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,23 +1,69 @@
 * {
     box-sizing: border-box;
 }
+
+:root {
+    --theme-color: #015B24;
+    --secondary-color: #00953A;
+
+    --max-width: 760px;
+}
+
+@font-face {
+  font-family: "Plex Sans";
+  src: url("/public/fonts/IBMPlexSans-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Plex Sans";
+  src: url("/public/fonts/IBMPlexSans-Bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "Plex Sans";
+  src: url("/public/fonts/IBMPlexSans-Italic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: normal;
+}
+
+html {
+    background: beige;
+}
+
 body {
-    font-family: "Verdana", sans-serif;
-    line-height: 1.4;
-    font-size: 13px;
-    margin: 0 auto;
-    max-width: 470px;
-    padding: 0 10px 10px;
+    font-family: "Plex Sans", "Helvetica", sans-serif;
+    line-height: 1.55;
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
 }
-h1{font-size:18px;margin-top:1em;}
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 15px;
+
+a,a:visited {
+    color: var(--theme-color);
+}
+a:hover,a:focus {
+    background: var(--theme-color);
+    color: white;
+}
+
+h1 {
+    background-color: var(--theme-color);
+    color: white;
+    font-size: 180%;
+    margin: 0;
+    padding: 1.2rem;
+    position: relative;
+    text-align: center;
+}
+h2,h3,h4,h5,h6 {
+    font-size: 140%;
     margin: 2em 0 0;
 }
+
 blockquote {
     border-left: 4px solid;
     margin: 2em 0 2em 2em;
@@ -41,8 +87,9 @@ table {
     width: 100%;
 }
 nav {
-  border-bottom: 1px solid;
-  padding: 10px 0;
+  padding: 10px 20px;
+  margin: 0 auto;
+  max-width: var(--max-width);
 }
 nav a:last-of-type {
   float: right;
@@ -59,9 +106,33 @@ nav a:last-of-type {
     display: block;
     font-size: 90%;
 }
+#menu {
+    align-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
 #menu li {
     display: inline-block;
-    margin-right: 8px;
+    margin: 0;
+    padding: 0 15px 15px 0;
+}
+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;
@@ -71,18 +142,61 @@ figure img {
 }
 figcaption {
     font-size: 90%;
+    opacity: 0.7;
 }
 footer {
   border-top: 1px solid;
-  margin: 2em 0;
+  margin: 2em auto;
+  max-width: var(--max-width);
+  padding: 10px;
+  text-align: center;
 }
 .footnotes {
     font-size: 90%;
+    margin-top: 2rem;
 }
 code {
+    background: white;
+    border: 1px dotted;
+    font-size: 18px;
     padding: 0.1rem;
 }
 pre:has(code) {
     border: 1px solid;
+    background: white;
     padding: 0.5rem;
 }
+pre code {
+    border: 0;
+}
+
+@media(max-width:600px) {
+    body {
+        font-size: 18px;
+    }
+    code {
+        font-size: 16px;
+    }
+    footer {
+        text-align: left;
+    }
+    #menu {
+        justify-content: flex-start;
+    }
+}
+
+@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;
+    }
+}