Glassmorphism!

Or however it's called, basically all semi-transparent elements are now blurred, see https://daudix.codeberg.page to see why I did this (if this change is still live ofc)

sass/_buttons.scss

@@ -7,8 +7,11 @@
 }
 
 .inline-button {
+  -webkit-backdrop-filter: var(--blur);
+  backdrop-filter: var(--blur);
   background-color: var(--fg-muted-1);
   border-radius: var(--rounded-corner);
+  box-shadow: var(--edge-highlight);
   color: var(--fg-color);
   display: inline-block;
   font-size: 0.9rem;
@@ -26,11 +29,17 @@
   }
 
   &.colored {
-    color: var(--primary-color);
+    -webkit-backdrop-filter: unset;
+    backdrop-filter: unset;
     background-color: transparent;
+    box-shadow: none;
+    color: var(--primary-color);
 
     &:hover {
+      -webkit-backdrop-filter: var(--blur);
+      backdrop-filter: var(--blur);
       background-color: var(--primary-color-alpha);
+      box-shadow: var(--edge-highlight);
     }
   }
 }

sass/_comments.scss

@@ -30,24 +30,26 @@ section#comments {
       width: 4rem;
 
       .avatar {
+        -webkit-backdrop-filter: var(--blur);
         all: unset;
+        backdrop-filter: var(--blur);
         background-color: var(--fg-muted-1);
         background-position: 50%;
         background-size: cover;
         border-radius: var(--rounded-corner);
-        box-shadow: var(--shadow);
+        box-shadow: var(--edge-highlight), var(--shadow);
         height: 100%;
         overflow: hidden;
         transition: var(--transition);
         width: 100%;
 
         &:hover {
-          box-shadow: var(--shadow-raised);
+          box-shadow: var(--edge-highlight), var(--shadow-raised);
           transform: rotate(10deg) scale(1.1);
         }
 
         &:active {
-          box-shadow: var(--shadow);
+          box-shadow: var(--edge-highlight), var(--shadow);
           transform: scale(var(--active));
         }
       }
@@ -61,8 +63,11 @@ section#comments {
       grid-area: name;
 
       .instance {
+        -webkit-backdrop-filter: var(--blur);
+        backdrop-filter: var(--blur);
         background-color: var(--fg-muted-1);
         border-radius: 999px;
+        box-shadow: var(--edge-highlight);
         color: var(--fg-color);
         font-size: 0.8rem;
         padding: 0.25rem 0.75rem;
@@ -79,11 +84,17 @@ section#comments {
         }
 
         &.op {
+          -webkit-backdrop-filter: unset;
+          backdrop-filter: unset;
           background-color: transparent;
+          box-shadow: none;
           color: var(--primary-color);
 
           &:hover {
+            -webkit-backdrop-filter: var(--blur);
+            backdrop-filter: var(--blur);
             background-color: var(--primary-color-alpha);
+            box-shadow: var(--edge-highlight);
           }
 
           &::before {
@@ -131,7 +142,10 @@ section#comments {
         transition: var(--transition);
 
         &:hover {
+          -webkit-backdrop-filter: var(--blur);
+          backdrop-filter: var(--blur);
           background-color: var(--red-bg);
+          box-shadow: var(--edge-highlight);
           text-decoration: none;
         }
 

sass/_main.scss

@@ -182,13 +182,15 @@ abbr {
 }
 
 aside {
+  -webkit-backdrop-filter: var(--blur);
+  backdrop-filter: var(--blur);
   background-color: var(--primary-color-alpha);
   border-radius: var(--rounded-corner);
   box-shadow: var(--shadow);
-  width: 30%;
-  padding: 1rem;
-  margin-inline-start: 1rem;
   float: right;
+  margin-inline-start: 1rem;
+  padding: 1rem;
+  width: 30%;
 
   @media only screen and (max-width: 720px) {
     & {
@@ -207,10 +209,12 @@ kbd {
 }
 
 code:not(pre code) {
-  padding: 0.125rem 0.375rem;
+  -webkit-backdrop-filter: var(--blur);
-  border-radius: var(--rounded-corner-small);
+  backdrop-filter: var(--blur);
   background-color: var(--fg-muted-2);
+  border-radius: var(--rounded-corner-small);
   color: var(--red-fg);
+  padding: 0.125rem 0.375rem;
 }
 
 pre {
@@ -253,6 +257,8 @@ pre {
 }
 
 kbd {
+  -webkit-backdrop-filter: var(--blur);
+  backdrop-filter: var(--blur);
   background-color: var(--fg-muted-2);
   border-radius: var(--rounded-corner-small);
   box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
@@ -262,6 +268,7 @@ kbd {
   line-height: normal;
   padding: 0.125rem 0.375rem;
   transition: var(--transition);
+
   // Small nice thingy, keys can be pressed!
   &:active {
     background-color: var(--fg-muted-3);
@@ -271,10 +278,12 @@ kbd {
 }
 
 mark {
-  padding: 0.125rem 0.375rem;
+  -webkit-backdrop-filter: var(--blur);
-  border-radius: var(--rounded-corner-small);
+  backdrop-filter: var(--blur);
   background-color: var(--primary-color-alpha);
+  border-radius: var(--rounded-corner-small);
   color: var(--primary-color);
+  padding: 0.125rem 0.375rem;
 }
 
 figcaption {
@@ -285,6 +294,8 @@ figcaption {
 }
 
 details {
+  -webkit-backdrop-filter: var(--blur);
+  backdrop-filter: var(--blur);
   background-color: var(--fg-muted-1);
   border-radius: var(--rounded-corner);
   box-shadow: var(--shadow);
@@ -314,10 +325,14 @@ table {
 
   tr {
     &:nth-child(even) {
+      -webkit-backdrop-filter: var(--blur);
+      backdrop-filter: var(--blur);
       background-color: var(--fg-muted-1);
     }
 
     th {
+      -webkit-backdrop-filter: var(--blur);
+      backdrop-filter: var(--blur);
       background-color: var(--fg-muted-2);
     }
   }

sass/_nav.scss

@@ -1,14 +1,13 @@
 #site-nav {
-  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backdrop-filter: var(--blur);
-  backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: var(--blur);
   background-color: var(--nav-bg);
   border-radius: 26px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+  box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
-    0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   margin: 1rem auto;
+  max-width: min(calc(var(--content-width) + 10rem), 90%);
   position: sticky;
   top: 1rem;
-  max-width: min(calc(var(--content-width) + 10rem), 90%);
   z-index: 999;
 
   nav {

sass/_statements.scss

@@ -2,6 +2,9 @@
   margin: 1rem 0 1rem;
   padding: 1rem 1rem 0.5rem 1rem;
   border-radius: var(--rounded-corner);
+  -webkit-backdrop-filter: var(--blur);
+  backdrop-filter: var(--blur);
+  box-shadow: var(--edge-highlight), var(--shadow);
 
   * {
     margin: 0;

sass/_tags.scss

@@ -14,8 +14,11 @@
   }
 
   .tag {
+    -webkit-backdrop-filter: var(--blur);
+    backdrop-filter: var(--blur);
     background-color: var(--fg-muted-1);
     border-radius: 999px;
+    box-shadow: var(--edge-highlight);
     color: var(--fg-color);
     padding: 0.25rem 0.75rem;
     text-decoration: none;

sass/_variables.scss

@@ -26,7 +26,9 @@
       rgba(255, 255, 255, 0.8)
     ),
     var(--primary-color);
+  --blur: saturate(180%) blur(10px);
   --content-width: 720px;
+  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
     Consolas, "DejaVu Sans Mono", monospace;
   --font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",