add stylesheet for syntax highlighting and add toc

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>

css/default.css

@@ -9,20 +9,80 @@
   font-style: normal;
 }
 
+@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css");
+
+
+:root {
+  --yellow: #b58900;
+  --orange: #cb4b16;
+  --red: #dc322f;
+ 	--magenta: #d33682;
+  --violet: #6c71c4;
+  --blue: #268bd2;
+  --cyan: #2aa198;
+  --green: #859900;
+  --fg0: #93a1a1;
+  --fg1: #839496;
+  --fg2: #657b83;
+  --fg3: #586e75;
+  --fg4: #073642;
+  --fg5: #002b36;
+  --bg0: #fdf6e3 ;
+  --bg1: #eee8d5;
+  --dark: #002b36;
+  --light: #fdf6e3; 
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg0: #073642;
+    --bg1: #002b36;
+    --fg5: #fdf6e3 ;
+    --fg4: #eee8d5;
+    --fg3: #93a1a1;
+    --fg2: #839496;
+    --fg1: #657b83;
+    --fg0: #586e75;
+  } 
+}
+
 html {
   font-size: 62.5%;
+  background-color: var(--bg0);
+  color: var(--fg2);
 }
 
 body {
   font-size: 1.6rem;
-  color: #000;
+  word-wrap: break-word;
+}
+
+h1, h2, h3 {
+ color: var(--fg3);
 }
 
 header {
-  border-bottom: 0.2rem solid #000;
+  border-bottom: 0.2rem solid var(--magenta);
   margin: 4.2rem 0;
 }
 
+main a, footer a {
+  color: var(--blue);
+}
+
+main a:hover, footer a:hover {
+  color: var(--light);
+  background: var(--blue);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  transition-duration: 0.1s;
+}
+
 nav {
   text-align: center;
   margin: 0 auto 3rem;
@@ -31,22 +91,22 @@ nav {
 nav a {
   font-size: 1.8rem;
   font-weight: bold;
-  color: black;
-  text-decoration: none;
+  color: var(--cyan);
   text-transform: uppercase;
+  padding: 0.5rem;
 }
 
-
 nav a:hover {
-  color: pink;
+  background: var(--cyan);
+  color: var(--dark);
 }
 
 footer {
   margin-top: 3rem;
   padding: 1.2rem 0;
-  border-top: 0.2rem solid #000;
+  border-top: 0.2rem solid var(--magenta);
   font-size: 1.2rem;
-  color: #555;
+  color: var(--fg0);
 }
 
 h1 {
@@ -57,10 +117,15 @@ h2 {
   font-size: 2rem;
 }
 
-article .header {
+.post-title {
+  text-align: center;
+  color: var(--fg5) !important;
+}
+
+article .post-header {
   font-size: 1.4rem;
   font-style: italic;
-  color: #555;
+  color: var(--fg0);
 }
 
 .logo {
@@ -74,23 +139,41 @@ article .header {
 
 .logo a {
   font-weight: bold;
-  font-family: "Monoid Bold";
+  font-family: "Monoid Bold", sans-serif;
   font-size: 3rem;
-  color: #000;
+  color: var(--green);
   text-decoration: none;
 }
 
-.subdomains {
-  list-style-type: none;
+article > section {
+  overflow: auto;
 }
 
-.subdomains li {
-  display: inline-block;
+.toc {
+  padding: 2rem;
+  float: right;
+  border-radius: 1rem;
+  background: var(--bg1);
 }
 
-.subdomains img {
-  width: 30px;
-  height: 30px;
+.post-teaser > .toc {
+  display: none;
+}
+
+code {
+  font-family: 'Cascadia Code', sans-serif;
+}
+
+code {
+  border-radius: 0.2rem;
+  background: var(--bg1);
+}
+
+pre {
+  padding: 2rem;
+  border-radius: 1rem;
+  background: var(--bg1);
+  overflow: scroll;
 }
 
 @media (max-width: 319px) {

css/highlight.css

@@ -0,0 +1,31 @@
+/* Solarized theme for Pandoc Code */
+pre code { color: var(--fg2); }
+code span.kw { color: var(--green); } /* Keyword */
+code span.dt { color: var(--yellow); } /* DataType */
+code span.dv { color: var(--cyan); } /* DecVal */
+code span.bn { color: var(--cyan); } /* BaseN */
+code span.fl { color: var(--cyan); } /* Float */
+code span.ch { color: var(--cyan); } /* Char */
+code span.st { color: var(--cyan); } /* String */
+code span.co { color: var(--fg0); font-style: italic; } /* Comment */
+code span.ot { color: var(--blue); } /* Other */
+code span.al { color: var(--red); } /* Alert */
+code span.fu { color: var(--blue); } /* Function */
+code span.cn { color: var(--cyan); } /* Constant */
+code span.sc { color: var(--red); } /* SpecialChar */
+code span.vs { color: var(--fg2); } /* VerbatimString */
+code span.ss { color: var(--red); } /* SpecialString */
+code span.im { color: var(--fg2); } /* Import */
+code span.va { color: var(--blue); } /* Variable */
+code span.cf { color: var(--green); } /* ControlFlow */
+code span.op { color: var(--green); } /* Operator */
+code span.bu { color: var(--fg2); } /* BuiltIn */
+code span.ex { color: var(--fg2); } /* Extension */
+code span.pp { color: var(--orange); } /* Preprocessor */
+code span.at { color: var(--fg2); } /* Attribute */
+code span.er { color: var(--red); } /* Error */
+code span.wa { color: var(--orange); font-style: italic; } /* Warning */
+code span.do { color: var(--fg0); font-style: italic; } /* Documentation */
+code span.an { color: var(--fg0); font-style: italic; } /* Annotation */
+code span.cv { color: var(--fg0); font-style: italic; } /* CommentVar */
+code span.in { color: var(--fg0); font-weight:normal; font-style: normal; } /* Information */