From 2017e49592d38a430a5f0662ce411f064c9db899 Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Wed, 5 Oct 2022 11:33:53 +0200
Subject: [PATCH] Add styles for h3, nicer uls and code in articles

---
 .eleventy.js            |  1 +
 src/_includes/posts.njk |  2 +-
 src/assets/style.scss   | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/.eleventy.js b/.eleventy.js
index 83326e6..af58612 100644
--- a/.eleventy.js
+++ b/.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 = {
diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk
index 7878800..d21d908 100644
--- a/src/_includes/posts.njk
+++ b/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 %}
diff --git a/src/assets/style.scss b/src/assets/style.scss
index 06078a9..aa3f1c3 100644
--- a/src/assets/style.scss
+++ b/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 {