Trying an alternate background.

templates/base.html

@@ -8,14 +8,10 @@
     <link rel="shortcut icon" type="image/svg+xml" href="/images/lemmy.svg" />
     <style>
       :root {
+        --font-family-sans: Inter, Helvetica, Roboto, sans-serif;
         --grid-maxWidth: 108rem;
+        --grid-gutter: 4rem;
         --color-success: #fafafa;
-      }
-      @font-face {
-        font-family: 'CaviarDreams';
-        src: url('/fonts/CaviarDreams.ttf') format('truetype');
-      }
-      body.dark {
         --bg-color: #000;
         --bg-secondary-color: #131316;
         --font-color: #f5f5f5;
@@ -23,6 +19,10 @@
         --color-darkGrey: #777;
         --color-success: #020f09;
       }
+      @font-face {
+        font-family: 'CaviarDreams';
+        src: url('/fonts/CaviarDreams.ttf') format('truetype');
+      }
       .stylized {
         font-family: 'CaviarDreams', Fallback, sans-serif;
         font-size: 4em;
@@ -45,6 +45,37 @@
         height: 100px;
         object-fit: scale-down;
       }
+      .bg-image {
+        position: fixed;
+        left: 0;
+        right: 0;
+        z-index: -1;
+        display: block;
+        width: 100%;
+        height: 100%; 
+        background:
+          linear-gradient(
+            rgba(0, 0, 0, 0.6), 
+            rgba(0, 0, 0, 0.6)
+            ),
+          url('/images/main_img.webp');
+        background-image: 
+        /* Darken */
+        linear-gradient(
+          rgba(0, 0, 0, 0.9), 
+          rgba(0, 0, 0, 0.9)
+          ),
+        -webkit-filter: blur(5px);
+        -moz-filter: blur(5px);
+        -o-filter: blur(5px);
+        -ms-filter: blur(5px);
+        filter: blur(5px);
+
+        /* Center and scale the image nicely */
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
     </style>
   </head>
 
@@ -78,12 +109,6 @@
       </nav>
     </footer>
   </body>
-  <script>
-    if (window.matchMedia &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.body.classList.add('dark');
-        }
-  </script>
   <svg
     aria-hidden="true"
     style="position: absolute; width: 0; height: 0; overflow: hidden;"

templates/index.html

@@ -1,15 +1,15 @@
 {% extends "base.html" %}
 {% block content %} 
 
+<div class="bg-image"></div>
 <div class="container">
   <div class="text-center">
     <h1 class="stylized">Lemmy</h1>
-    <p>A link aggregator for the fediverse.</p>
+    <h4>A link aggregator for the fediverse.</h4>
     <p>
     <a class="button primary" href="/join">Join a Server</a>
     <a class="button primary" href="https://dev.lemmy.ml/docs/administration.html">Run a Server</a>
     </p>
-    <img src="images/main_img.webp">
   </div>
 </div>