code highlighting works

TODO.md

@@ -1,18 +1,10 @@
 # TODO:
 *note: rough order of priority*
-* [x] Cleanup image rendering within posts (inline/full/etc?)
-* [x] Cleanup display of license
-* [x] Carousel js/html
 * [ ] syntax highlighting stylesheets
 * [ ] move away from Solarized in favor of similar overall feel with better contrast
-* [ ] mobile styling
 * [ ] robots.txt
 * [ ] Post about sandboxing using Django
-* [x] Comet pictures
-* [x] At least 1 more bird post
 * [.] Webmentions!?
   * [x] Receive
   * [ ] Display
 * [ ] notes type with syndication to Mastodon!? https://www.npmjs.com/package/mastodon
-* [x] goatcounter
-  * [X] post about goatcounter setup

_includes/layouts/layout.njk

@@ -18,7 +18,11 @@
     <link rel="alternate" href="https://www.nthall.com{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <meta name="color-scheme" content="dark light">
     <link href="{{ '/css/style.css' | url }}" rel="stylesheet" type="text/css">
+
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/solarized-dark.min.css" rel="stylesheet" type="text/css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
     <link rel="webmention" href="https://webmention.io/www.nthall.com/webmention" />
     <link rel="pingback" href="https://webmention.io/www.nthall.com/xmlrpc" />
   </head>

scss/_solar.scss

@@ -41,7 +41,7 @@ a {
   }
 
   code::selection {
-    background-color: $base00;
+    background-color: $base00 !important;
   }
 }
 
@@ -58,6 +58,6 @@ a {
   }
 
   code::selection {
-    background-color: $base03;
+    background-color: $base03 !important;
   }
 }

scss/style.scss

@@ -9,7 +9,7 @@ body {
   line-height: 28px;
   padding-bottom: 3em;
   position: relative;
-  font-family: sans-serif;
+  font-family: "Liberation Sans", sans-serif;
 }
 
 a, p, span, div {
@@ -18,12 +18,11 @@ a, p, span, div {
 }
 
 code, kbd {
-  border: 1px solid;
   padding: 2px;
   border-radius: 5px;
-  font-family: monospace;
+  font-family: "Inconsolata", monospace;
   @media(prefers-color-scheme: dark) {
-    background-color: $base02;
+    background-color: $base02 !important;
     border-color: $base00;
     color: $base1;
   }
@@ -36,6 +35,7 @@ code, kbd {
 
 pre {
   code {
+    border: 1px solid;
     display: block;
     margin-bottom: .5em;
   }
@@ -326,15 +326,26 @@ div#backdrop {
   }
 
   main {
-    margin: 2em;
+    margin: 0;
+    padding: 0 1em;
     width: 100%;
+    box-sizing: border-box;
+
+    article {
+      width: 100%;
+    }
   }
 
   #sidebar {
     width: 100%;
-    padding: 2em;
+    padding: 1em;
     border-top: 1px dashed;
     border-left: none;
+    box-sizing: border-box;
+
+    li {
+      display: inline-block;
+    }
   }
 
   .header {