Add styles for h3, nicer uls and code in articles

.eleventy.js

@@ -20,6 +20,7 @@ module.exports = function (config) {
 
   config.addPassthroughCopy('src/assets/key.txt')
   config.addPassthroughCopy('src/assets/ibm-plex/IBM-Plex-Mono/fonts/**/*')
+  config.addPassthroughCopy('src/posts/**/*.{jpeg,jpg,png,webp}')
 
   // configure markdown
   const mdOptions = {

src/_includes/posts.njk

@@ -12,7 +12,7 @@
 {% block sidebar %}
 <div class="sticky">
 <h2>Content</h2>
-{{ content | toc | safe }}
+{{ content | toc(tags=['h2']) | safe }}
 <a href="{{ "/" | url }}">Go Back Home</a>
 </div>
 {% endblock %}

src/assets/style.scss

@@ -187,6 +187,13 @@ article {
     padding: 24px 0
   }
 
+  h3 {
+    font-size: 14px;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 12px 0;
+  }
+
   ul, ol {
     padding: 0 0 0 32px;
     margin: 0 0 28px;
@@ -196,6 +203,17 @@ article {
     }
   }
 
+  ul {
+    list-style: none;
+
+    li:before {
+      content: '·';
+      position: absolute;
+      padding-right: .6em;
+      transform: translateX(-100%);
+    }
+  }
+
   .footnote-ref a {
     border-bottom: 0
   }
@@ -298,6 +316,24 @@ footer {
       }
     }
   }
+
+  pre {
+    padding: 12px;
+    margin: 12px 0 32px;
+    background: $reduced-1;
+  }
+
+  li > code,
+  p > code {
+    background: $reduced-1;
+    padding: .3em;
+    border-bottom: 2px $reduced-1;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 footer {