Dark mode, and Indented headings in Markdown

src/blog.rs

@@ -98,7 +98,7 @@ pub fn BlogPost() -> impl IntoView {
                     view! {
                         <div class="blog-open-entry">
                             <div class="blog-illustration">
-                                <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1000&fit=inside&format=auto&quality=90&withoutEnlargement=true", post.illustration.id)/>
+                                <img src=format!("https://directus.gerome.fi/assets/{}?width=2000&fit=inside&format=auto&quality=90&withoutEnlargement=true", post.illustration.id)/>
                                 <h2 class="blog-title"><p class="main-width">{translations.title}</p></h2>
                             </div>
                             <main class="main-width blog-entry-wrapper">

style/main.scss

@@ -1,4 +1,6 @@
 $mainGreen: #2b762f;
+$darkerGreen: darken($mainGreen, 5);
+$lighterGreen: lighten($mainGreen, 10);
 $mainGrey: #0F0F0F;
 
 @mixin main-width {
@@ -171,6 +173,37 @@ body {
     img {
       max-width: 100%;
     }
+
+    padding-left: 64px;
+    h1, h2, h3 {
+      margin-left: -64px;
+    }
+    blockquote {
+      margin: 16px 32px;
+    }
+
+    @media all and (max-width: 800px) {
+      padding-left: 32px;
+      h1, h2, h3 {
+        margin-left: -32px;
+      }
+      img {
+        padding-right: 32px;
+      }
+    }
+    @media all and (max-width: 400px) {
+      padding-left: 0px;
+      padding-right: 0px;
+      h1, h2, h3 {
+        margin-left: -0px;
+      }
+      blockquote {
+        margin: 16px 16px;
+      }
+      img {
+        padding-right: 0px;
+      }
+    }
   }
 
   footer {
@@ -183,7 +216,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 10px 0;
+    padding: 14px 0;
 
     .name-and-links {
       @include top-level-padding;
@@ -385,3 +418,38 @@ body {
     margin-bottom: 64px;
   }
 }
+
+@media all and (prefers-color-scheme: dark) {
+  body {
+    background: $mainGrey;
+    color: white;
+
+    header {
+      .title-links-and-banner {
+        background: $darkerGreen;
+      }
+
+      background: $mainGrey;
+      color: white;
+
+      .language-switcher {
+        a, .link {
+          color: $lighterGreen!important;
+        }
+      }
+    }
+
+    a {
+      color: $lighterGreen!important;
+    }
+
+    footer {
+      background: $darkerGreen;
+      color: white;
+
+      a, .link {
+        color: white!important;
+      }
+    }
+  }
+}