Dark mode, and Indented headings in Markdown

src/app.rs

@@ -101,14 +101,13 @@ pub fn Header() -> impl IntoView {
                         <A href="/resume">{t!(i18n, resume)}</A>
                     </div>
                 </div>
-                <picture>
+                <div class="image-wrapper">
                     <img
                         class="image"
                         src="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=auto&quality=50&withoutEnlargement=true"
                         alt="Banner"
                     />
-                    <source srcset="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=jpg&quality=50&withoutEnlargement=true"/>
-                </picture>
+                </div>
             </div>
 
             <LanguageSwitcher/>

style/main.scss

@@ -1,4 +1,6 @@
-$mainGreen: #2b762f;
+$mainGreen: #409760;
+$darkerGreen: darken($mainGreen, 10);
+$lighterGreen: lighten($mainGreen, 10);
 $mainGrey: #0F0F0F;
 
 @mixin main-width {
@@ -22,13 +24,13 @@ button {
   &.link {
     all: unset;
     text-decoration: underline;
-    color: $mainGreen!important;
+    color: $darkerGreen!important;
     cursor: pointer;
   }
 }
 
 a {
-  color: $mainGreen!important;
+  color: $darkerGreen!important;
 }
 
 body {
@@ -73,7 +75,7 @@ body {
     justify-content: center;
 
     .title-links-and-banner {
-      background: $mainGrey;
+      background: $mainGreen;
       color: white;
       width: 100%;
 
@@ -127,21 +129,20 @@ body {
         }
       }
 
-      picture {
-        max-width: 800px;
-        width: 100%;
-        max-height: 300px;
+      .image-wrapper {
+        flex-shrink: 1;
         height: 100%;
-      //   display: contents;
+
+        display: flex;
 
         .image {
           max-width: 800px;
           width: 100%;
-          max-height: 300px;
+          max-height: 350px;
           height: 100%;
-          object-fit: cover;
+          aspect-ratio: 1600 / 623;
+          object-fit: contain;
           object-position: top;
-          flex-shrink: 1;
         }
       }
     }
@@ -171,10 +172,41 @@ 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 {
-    background: $mainGrey;
+    background: $mainGreen;
     color: white;
 
     order: 100;
@@ -183,7 +215,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 +417,47 @@ body {
     margin-bottom: 64px;
   }
 }
+
+@media all and (prefers-color-scheme: dark) {
+  body {
+    background: $mainGrey;
+    color: white;
+
+    header {
+      .title-links-and-banner {
+        background: $mainGrey;
+        color: $mainGreen;
+        border-bottom: $darkerGreen 4px solid;
+
+        .text .links a {
+          color: $mainGreen!important;
+        }
+      }
+
+      background: $mainGrey;
+      color: white;
+
+      .language-switcher {
+        a, .link {
+          color: $mainGreen!important;
+        }
+      }
+    }
+
+    a {
+      color: $mainGreen!important;
+    }
+
+    footer {
+      background: $mainGrey;
+      color: $mainGreen;
+      border-top: $darkerGreen 4px solid;
+
+      .name-and-links .links {
+        a, .link {
+          color: $mainGreen!important;
+        }
+      }
+    }
+  }
+}