Make background really pretty

content/about/index.rst

@@ -57,5 +57,7 @@ Check out their other fonts, their work is beautiful! Source code is typeset in
 Mozilla's `Fira Mono <https://github.com/mozilla/Fira>`__ font, designed by `Erik Spiekermann
 <https://spiekermann.com/>`__, `Ralph du Carrois <https://carrois.com/>`__, `Anja Meiners
 <https://anjameiners.com/de/hallo/>`__ and Botio Nikoltchev of Carrois Type Design, now succeeded by `bBoxType
-<https://bboxtype.com/typefaces/FiraMono/#!layout=specimen>`__ , and Patryk Adamczyk of Mozilla.
+<https://bboxtype.com/typefaces/FiraMono/#!layout=specimen>`__ , and Patryk Adamczyk of Mozilla. The photo of mountains
+that's used in the background of this site is by `Fabrizio Conti <https://www.conti.photos/>`__ and can be found on
+`Unsplash <https://unsplash.com/photos/TUmjK7ZJgbI>`__.
 

themes/conspiracy/assets/css/style.css

@@ -124,13 +124,29 @@ html, body {
 }
 
 body {
+    position: relative; /* important for sizing of background image ::before pseudo-element */
     display: flex;
     flex-direction: column;
     align-items: stretch;
     font-family: "Roboto Slab";
     font-weight: 350;
     color: var(--c-text);
-    background-color: var(--c-bg-backdrop);
+}
+
+body::before {
+    content: "";
+    position: absolute;
+    top: 0; left: 0;
+    z-index: -1000;
+    width: 100%;
+    height: 100%;
+    /* linear-gradient(hsl(0 0% 100% / 0%), hsl(240 20% 12% / 100%)),  */
+    background:
+        linear-gradient(to bottom, hsl(0 0% 8% / 80%), hsl(0 0% 3% / 95%)),
+        linear-gradient(hsl(220 15% 18%), hsl(220 15% 18%)),
+        center 20% / cover space no-repeat fixed url("{{ (resources.Get "images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg").RelPermalink }}"),
+        var(--c-bg-backdrop);
+    background-blend-mode: luminosity, color, normal;
 }
 
 ::selection {
@@ -158,7 +174,7 @@ nav {
     flex-direction: row;
     flex-wrap: wrap;
     background-color: var(--c-bg-front);
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
+    box-shadow: 0 0 3px 2px hsl(0 0% 10% / var(--shadow-opacity));
     padding: 0 10px 0 10px;
     justify-content: space-between;
 }
@@ -201,15 +217,27 @@ nav a:hover {
     margin: 0 5px 0 5px;
 }
 
+main::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: brightness(100%) blur(10px);
+    z-index: -1;
+}
+
 main {
+    position: relative;
     align-self: center;
     margin-top: -100px;
-    padding: 100px 100px 40px 100px;
+    padding: 100px;
     max-width: min(100%, 60em);
     box-sizing: border-box;
-    background-color: var(--c-bg-front);
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, calc(0.6 * var(--shadow-opacity)));
+    box-shadow: 0 0 3px 2px hsl(0 0% 10% / calc(0.6 * var(--shadow-opacity)));
     text-align: justify;
+    background-color: hsl(260 5% 20% / 40%);
     hyphens: auto;
 }
 
@@ -280,11 +308,6 @@ body > header > h1::first-line {
 }
 */
 
-
-main.cards {
-    background-color: var(--c-bg-behind);
-}
-
 .pagination-links {
     width: 100%;
     display: flex;
@@ -507,6 +530,7 @@ footer {
     align-self: center;
     margin-bottom: 10px;
     text-align: center;
+    padding: 5px 25px 5px 25px;
 }
 
 body .hll {}
@@ -599,6 +623,22 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
         --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%);
     }
 
+    body::before {
+        background:
+            linear-gradient(to bottom, hsl(0 0% 100% / 70%), hsl(0 0% 90% / 80%)),
+            linear-gradient(hsl(260 10% 10%), hsl(260 10% 10%)),
+            center 20% / cover space no-repeat fixed url("{{ (resources.Get "images/fabrizio-conti-TUmjK7ZJgbI-unsplash.jpg").RelPermalink }}"),
+            var(--c-bg-backdrop);
+    }
+
+    main::before {
+        backdrop-filter: brightness(106%) blur(10px);
+    }
+
+    main {
+        background-color: hsl(260 5% 90% / 40%);
+    }
+
     body > header > h1 {
         filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
     }