dark mode support

src/components/Footer.astro

@@ -21,7 +21,12 @@
       </a> initiative
     </p>
     <p class="mt-2">
-      Need help with your project? <a class="bg-clip-text text-neuland" href="mailto:[email protected]">Get in contact.</a>
+      Need help with your project? <a
+        class="bg-clip-text text-neuland"
+        href="mailto:[email protected]"
+      >
+        Get in contact.
+      </a>
     </p>
   </div>
   <div class="text-right">
@@ -66,4 +71,8 @@
     margin-bottom: 4rem;
     margin-top: 2rem;
   }
+
+  :global(.dark) .divider {
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
+  }
 </style>

src/components/MFExample.astro

@@ -83,6 +83,10 @@ const {
     overflow: hidden;
     position: relative;
   }
+  :global(.dark) .mfexample {
+    border: 1px solid #4b3648;
+  }
+
   .elements {
     border-radius: 10px;
     display: grid;
@@ -100,6 +104,15 @@ const {
     place-content: center;
   }
 
+  :global(.dark) .element {
+    background-color: #0f182a;
+    border: 1px solid #4b3648;
+  }
+
+  :global(.dark) .element img {
+    filter: invert(1);
+  }
+
   .element.vertical {
     min-height: 100px;
   }
@@ -115,10 +128,13 @@ const {
       drop-shadow(0px 4px 40px rgba(255, 90, 85, 0.3));
     transform: translateZ(0);
   }
-  .c-border {
-    border: 1px solid #eeebe2;
-    border-radius: 0.5rem;
-    background: white;
+
+  :global(.dark) .c_shadow {
+    filter: drop-shadow(-3px -3px 3px rgba(255, 255, 255, 0.1))
+      drop-shadow(2px 3px 2px #322030) drop-shadow(3px 6px 4px #322030)
+      drop-shadow(4px 9px 6px #322030)
+      drop-shadow(0px 4px 40px rgba(255, 90, 85, 0.3));
+    transform: translateZ(0);
   }
 
   .repository {

src/components/content/Contribute.astro

@@ -1,11 +1,11 @@
 ---
 ---
 
-<section class="lg:flex">
-  <div class="basis-3/5">
+<section class="contribute">
+  <div class="image">
     <img src="images/contribute.svg" typeof="foaf:Image" />
   </div>
-  <div class="basis-2/5 md:pt-12">
+  <div class="text pt-12">
     <h3 class="font-bold text-text-heading text-2xl md:text-3xl pb-2">
       How to Contribute
     </h3>
@@ -34,3 +34,38 @@
     </ol>
   </div>
 </section>
+
+<style>
+  .contribute {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .image {
+    @media (max-width: 499px) {
+      grid-column: 1 / -1;
+    }
+    @media (min-width: 500px) and (max-width: 999px) {
+      grid-column: 3 / -3;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 1 / span 7;
+    }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .text {
+    @media (max-width: 499px) {
+      grid-column: 1 / -1;
+    }
+    @media (min-width: 500px) and (max-width: 999px) {
+      grid-column: 2 / -2;
+    }
+    @media (min-width: 1000px) {
+      grid-column: 8 / span 5;
+    }
+  }
+</style>

src/styles/global.css

@@ -245,5 +245,9 @@
     left: calc(-50vw + 50%);
   }
 
+  .dark .c-background {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+
   /* ------ CUSTOM STYLES - END ------ */
 }