theme changes

1 files changed, 84 insertions, 49 deletions

diff --git a/assets/style.css b/assets/style.css
index b1b8d23..fe1e0bb 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,87 +1,122 @@
-.skip {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+* {
+  box-sizing: border-box;
 }
 
-.skip:focus {
-    position: static;
-    width: auto;
-    height: auto;
+:root {
+  --fg: #cdd6f4;
+  --bg: #11111b;
+  --link: #bd93f9;
+  --overlay: #313244;
 }
 
-body {
-    max-width: 45rem;
-    padding: 0 2rem;
-    margin: 2rem auto 0;
-    line-height: 1.6;
-    background: #11111b;
-    color: white;
+.skip {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }
 
-h1, h2, h3 {
-    margin-bottom: 0.25em;
-    line-height: 1.3;
+.skip:focus {
+  position: static;
+  width: auto;
+  height: auto;
 }
 
-p {
-    margin-top: 0;
-}
+body {
+  max-width: 50rem;
+  padding: 2rem;
+  margin: 0 auto;
+  line-height: 1.8;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: serif;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-block-end: 0.25em;
+  line-height: 1.3;
+  font-family: sans-serif;
+
+  a,
+  a:visited {
+    color: var(--fg);
+    text-decoration: none;
+  }
 
-p + p {
-    text-indent: 2em;
+  a:hover {
+    color: var(--link);
+    text-decoration: underline;
+  }
 }
 
 ul {
-    margin-top: 0;
+  margin-block-start: 0;
+}
+
+p {
+  margin-block-start: 0;
+  text-align: justify;
+  hyphens: auto;
 }
 
 #main-nav {
-    font-size: 125%;
+  line-height: 1.3;
 }
 
 #main-nav ul {
-    padding: 0;
-    margin: 0 0 1em;
+  padding: 0;
+  margin: 0 0 1em;
 }
 
 #main-nav li {
-    display: inline-block;
+  display: inline-block;
+  margin-inline-end: 0.5em;
 }
 
-#main-nav li::before {
-    content: '/ ';
+#site-title {
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 150%;
+  margin-bottom: 0.25rem;
 }
 
-#main-nav li:first-child::before {
-    content: '';
+footer {
+  margin: 2em 0 0;
 }
 
-#site-title {
-    font-weight: bold;
-    color: inherit;
-    text-decoration: none;
+header h1 {
+  margin: 0;
 }
 
-#site-title:hover {
-    text-decoration: underline;
+header {
+  margin-bottom: 1em;
 }
 
-footer {
-    margin: 2em 0 0;
+a,
+a:visited {
+  color: var(--link);
 }
 
-header h1 {
-    margin: 0;
+hr {
+  border: none;
+  height: 1px;
+  background: var(--overlay);
 }
 
-header {
-    margin-bottom: 1em;
+pre code {
+  background: black;
+  border: 1px solid var(--overlay);
+  border-radius: 8px;
+  padding: 1em;
+  display: block;
+  overflow-x: auto;
 }
 
-a, a:visited {
-    color: #8ef;
+code {
+  font-size: 125%;
 }