Update style

1 files changed, 191 insertions, 91 deletions

diff --git a/static/style.css b/static/style.css
index dc87e2b..86f95df 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,79 +1,86 @@
 body {
-    font-size: 16px;
+    font-size: 17px;
     margin: 20px auto;
     padding: 10px 15px;
     max-width: 800px;
 
-    font-family: "Merriweather", serif;
+    font-family:
+        "PT Sans",
+        -apple-system,
+        system-ui,
+        BlinkMacSystemFont,
+        sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
 
-    line-height: 35px;
+    line-height: 1.5;
 
     hyphens: initial;
 }
 
 :root {
-    --dark--header-color: #fff;
-    --dark--p-color: #eee;
-    --dark--link-color: #bbf;
-    --dark--bg-color: #222;
-    --dark--blockquote-color: #ddd;
-    --dark--blockquote-bg-color: #60606020;
-    --dark--code-bg-color: #353535;
-    --dark--h2-bg-color: #fd501bb0;
-    --dark--syntax-0: #eee;
-    --dark--syntax-1: #ffb29a;
-    --dark--syntax-2: #bbf;
-    --dark--syntax-3: #92d392;
+    --dark--bg-color: #1b1f29;
+    --dark--p-color: #eff1f8;
+    --dark--header-color: #ffffff;
+    --dark--link-color: #5da9e9;
+    --dark--blockquote-color: #eff1f8;
+    --dark--blockquote-bg-color: #ffffff10;
+    --dark--code-bg-color: #ffffff0d;
+    --dark--h2-bg-color: #6d326d40;
+
+    --dark--syntax-0: #eff1f8;
+    --dark--syntax-1: #5da9e9;
+    --dark--syntax-2: #f8b67b;
+    --dark--syntax-3: #b884b8;
 
-    --light--header-color: #1a1a1a;
-    --light--p-color: #101010;
-    --light--link-color: #007973;
-    --light--bg-color: #fff;
-    --light--blockquote-color: #606060;
-    --light--blockquote-bg-color: #c8c8c820;
-    --light--code-bg-color: #eee;
-    --light--h2-bg-color: #f73e0030;
-    --light--syntax-0: #101010;
-    --light--syntax-1: #f73e00;
-    --light--syntax-2: #007973;
-    --light--syntax-3: #1038d8;
+    --light--bg-color: #ffffff;
+    --light--p-color: #1a1a1a;
+    --light--header-color: #003f91;
+    --light--link-color: #3980bc;
+    --light--blockquote-color: #1a1a1a;
+    --light--blockquote-bg-color: #eff1f866;
+    --light--code-bg-color: #eff1f8;
+    --light--h2-bg-color: #6d326d1a;
+
+    --light--syntax-0: #1a1a1a;
+    --light--syntax-1: #6d326d;
+    --light--syntax-2: #3980bc;
+    --light--syntax-3: #003f91;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
         --header-color: var(--dark--header-color);
-	--p-color: var(--dark--p-color);
+        --p-color: var(--dark--p-color);
         --link-color: var(--dark--link-color);
         --bg-color: var(--dark--bg-color);
         --blockquote-color: var(--dark--blockquote-color);
         --blockquote-bg-color: var(--dark--blockquote-bg-color);
         --code-bg-color: var(--dark--code-bg-color);
-	--h2-bg-color: var(--dark--h2-bg-color);
+        --h2-bg-color: var(--dark--h2-bg-color);
 
-	--syntax-0: var(--dark--syntax-0);
-	--syntax-1: var(--dark--syntax-1);
-	--syntax-2: var(--dark--syntax-2);
-	--syntax-3: var(--dark--syntax-3);
+        --syntax-0: var(--dark--syntax-0);
+        --syntax-1: var(--dark--syntax-1);
+        --syntax-2: var(--dark--syntax-2);
+        --syntax-3: var(--dark--syntax-3);
     }
 }
 @media (prefers-color-scheme: light) {
     :root {
         --header-color: var(--light--header-color);
-	--p-color: var(--light--p-color);
+        --p-color: var(--light--p-color);
         --link-color: var(--light--link-color);
         --bg-color: var(--light--bg-color);
         --blockquote-color: var(--light--blockquote-color);
         --blockquote-bg-color: var(--light--blockquote-bg-color);
         --code-bg-color: var(--light--code-bg-color);
-	--h2-bg-color: var(--light--h2-bg-color);
+        --h2-bg-color: var(--light--h2-bg-color);
 
-	--syntax-0: var(--light--syntax-0);
-	--syntax-1: var(--light--syntax-1);
-	--syntax-2: var(--light--syntax-2);
-	--syntax-3: var(--light--syntax-3);
+        --syntax-0: var(--light--syntax-0);
+        --syntax-1: var(--light--syntax-1);
+        --syntax-2: var(--light--syntax-2);
+        --syntax-3: var(--light--syntax-3);
     }
 }
 
@@ -114,25 +121,27 @@ html {
     background-color: var(--bg-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: var(--header-color);
+    line-height: 1.2;
 }
 
-h2, h4, h6 {
-    padding: 0 8px;
-    display: inline-block;
-    background-color: var(--h2-bg-color);
-}
-
-a, a:visited {
+a,
+a:visited {
     color: var(--link-color);
     text-decoration: none;
-    font-weight: bold;
+    font-weight: normal;
     cursor: pointer;
     text-underline-position: under;
 }
 
-a:hover, a:focus {
+a:hover,
+a:focus {
     text-decoration: underline;
 }
 
@@ -166,30 +175,39 @@ a:hover, a:focus {
 }
 
 code {
-    padding: 6px;
-    background-color: var(--code-bg-color);
+    padding: 3px 5px;
     white-space: nowrap;
+    border: 1px solid var(--blockquote-color);
 }
 
-pre, div.sourceCode {
+pre,
+div.sourceCode {
     padding: 8px 10px;
-    overflow-x:	scroll;
+    overflow-x: scroll;
     color: inherit;
-    background-color: var(--code-bg-color);
 }
 
 .sourceCode {
-    line-height: 22px;
+    line-height: 1.3;
+    border: 1px solid var(--blockquote-color);
+}
+
+.sourceCode code,
+.sourceCode pre {
+    border: none;
 }
 
 blockquote {
     display: block;
     color: var(--blockquote-color);
-    background-color: var(--blockquote-bg-color);
     border-left: 10px solid var(--link-color);
     margin: 20px 0;
-    padding: 2px 20px;
-    quotes: "\201C""\201D""\2018""\2019";
+    padding: 2px 15px;
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+blockquote p {
+    margin: 10px 0;
 }
 
 img {
@@ -232,7 +250,14 @@ small {
     color: var(--blockquote-color);
 }
 
-ul, ol {
+h1 small {
+    opacity: 0.65;
+    font-weight: 400;
+    font-size: 20px;
+}
+
+ul,
+ol {
     margin-left: 10px;
 }
 
@@ -255,7 +280,7 @@ li::marker {
 }
 
 .archive-entry a {
-    line-height: 25px;
+    line-height: 1.5;
     display: block;
     margin-bottom: 6px;
 }
@@ -294,37 +319,112 @@ table {
 
 p {
     margin: 20px 0;
-    line-height: 32px;
+    line-height: 1.5;
 }
 
 /* Syntax highlighting, overrides Pandoc generated styles */
-code.sourceCode span { color: var(--syntax-0); }
-code span.al { color: var(--syntax-1); font-weight: bold; } /* Alert */
-code span.an { color: var(--syntax-0); font-weight: bold; font-style: italic; } /* Annotation */
-code span.at { color: var(--syntax-3); } /* Attribute */
-code span.bn { color: var(--syntax-3); } /* BaseN */
-code span.bu { color: var(--syntax-3); } /* BuiltIn */
-code span.cf { color: var(--syntax-3); font-weight: bold; } /* ControlFlow */
-code span.ch { color: var(--syntax-2); } /* Char */
-code span.cn { color: var(--syntax-3); } /* Constant */
-code span.co { color: var(--syntax-0); font-style: italic; opacity: 0.7; } /* Comment */
-code span.cv { color: var(--syntax-2); font-weight: bold; font-style: italic; } /* CommentVar */
-code span.do { color: var(--syntax-0); font-style: italic; } /* Documentation */
-code span.dt { color: var(--syntax-1); } /* DataType */
-code span.dv { color: var(--syntax-3); } /* DecVal */
-code span.er { color: var(--syntax-1); font-weight: bold; } /* Error */
-code span.ex { } /* Extension */
-code span.fl { color: var(--syntax-3); } /* Float */
-code span.fu { color: var(--syntax-1); } /* Function */
-code span.im { color: var(--syntax-3); font-weight: bold; } /* Import */
-code span.in { color: var(--syntax-3); font-weight: bold; font-style: italic; } /* Information */
-code span.kw { color: var(--syntax-3); font-weight: bold; } /* Keyword */
-code span.op { color: var(--syntax-2); } /* Operator */
-code span.ot { color: var(--syntax-0); } /* Other */
-code span.pp { color: var(--syntax-1); } /* Preprocessor */
-code span.sc { color: var(--syntax-2); } /* SpecialChar */
-code span.ss { color: var(--syntax-2); } /* SpecialString */
-code span.st { color: var(--syntax-2); } /* String */
-code span.va { color: var(--syntax-1); } /* Variable */
-code span.vs { color: var(--syntax-2); } /* VerbatimString */
-code span.wa { color: var(--syntax-3); font-weight: bold; font-style: italic; }
+code.sourceCode span {
+    color: var(--syntax-0);
+}
+code span.al {
+    color: var(--syntax-1);
+    font-weight: bold;
+} /* Alert */
+code span.an {
+    color: var(--syntax-0);
+    font-weight: bold;
+    font-style: italic;
+} /* Annotation */
+code span.at {
+    color: var(--syntax-3);
+} /* Attribute */
+code span.bn {
+    color: var(--syntax-3);
+} /* BaseN */
+code span.bu {
+    color: var(--syntax-3);
+} /* BuiltIn */
+code span.cf {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* ControlFlow */
+code span.ch {
+    color: var(--syntax-2);
+} /* Char */
+code span.cn {
+    color: var(--syntax-3);
+} /* Constant */
+code span.co {
+    color: var(--syntax-0);
+    font-style: italic;
+    opacity: 0.7;
+} /* Comment */
+code span.cv {
+    color: var(--syntax-2);
+    font-weight: bold;
+    font-style: italic;
+} /* CommentVar */
+code span.do {
+    color: var(--syntax-0);
+    font-style: italic;
+} /* Documentation */
+code span.dt {
+    color: var(--syntax-1);
+} /* DataType */
+code span.dv {
+    color: var(--syntax-3);
+} /* DecVal */
+code span.er {
+    color: var(--syntax-1);
+    font-weight: bold;
+} /* Error */
+code span.ex {
+} /* Extension */
+code span.fl {
+    color: var(--syntax-3);
+} /* Float */
+code span.fu {
+    color: var(--syntax-1);
+} /* Function */
+code span.im {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* Import */
+code span.in {
+    color: var(--syntax-3);
+    font-weight: bold;
+    font-style: italic;
+} /* Information */
+code span.kw {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* Keyword */
+code span.op {
+    color: var(--syntax-2);
+} /* Operator */
+code span.ot {
+    color: var(--syntax-0);
+} /* Other */
+code span.pp {
+    color: var(--syntax-1);
+} /* Preprocessor */
+code span.sc {
+    color: var(--syntax-2);
+} /* SpecialChar */
+code span.ss {
+    color: var(--syntax-2);
+} /* SpecialString */
+code span.st {
+    color: var(--syntax-2);
+} /* String */
+code span.va {
+    color: var(--syntax-1);
+} /* Variable */
+code span.vs {
+    color: var(--syntax-2);
+} /* VerbatimString */
+code span.wa {
+    color: var(--syntax-3);
+    font-weight: bold;
+    font-style: italic;
+}