Much styling

components/Blog/Layout.tsx

@@ -20,6 +20,9 @@ const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
             <main>
                 { children }
             </main>
+            <footer>
+                Copyright und so nen Stuff
+            </footer>
         </div>
     </>;
 };

styles/Blog/Blog.module.scss

@@ -1,11 +1,37 @@
 #blogBody {
+    background: var(--blog_back-background);
+    color: var(--blog_color);
+    padding-bottom: 20px;
+
     header {
         position: sticky;
         top: 10px;
+        z-index: 99;
     }
   
     main {
-        max-width: 900px;
+        max-width: 950px;
-        margin: 40px auto;
+        margin: 40px auto 0;
+        border: 1px solid var(--blog_border);
+        background: var(--blog_content-background);
+        padding: 50px;
+        backdrop-filter: blur(var(--blog_content-blur));
+        border-top-left-radius: 1em;
+        border-top-right-radius: 1em;
+
+        h1 {
+            margin-top: 0;
+        }
     }
-  }
+
+    footer {
+        max-width: 950px;
+        margin: 5px auto 0;
+        border: 1px solid var(--blog_border);
+        background: var(--blog_content-background);
+        padding: 20px;
+        backdrop-filter: blur(10px);
+        border-bottom-left-radius: 1em;
+        border-bottom-right-radius: 1em;
+    }
+}

styles/Blog/Card.module.scss

@@ -9,7 +9,7 @@
     margin: 5px;
 
     &:hover {
-        box-shadow: 0px 0px 10px blue;
+        box-shadow: 0px 0px 10px var(--blog_color);
     }
 }
 

styles/Blog/Front.module.scss

@@ -1,5 +1,6 @@
 .contentList {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     justify-content: space-evenly;
     padding: 0;

styles/Blog/Navigation.module.scss

@@ -2,34 +2,40 @@
     display: block;
     max-width: 1000px;
     min-width: 300px;
-    box-shadow: 0px 2px 5px gray;
+    position: relative;
+    height: calc(1em + 40px);
+
     margin: 0 auto;
     padding: 20px;
+
     font-size: 120%;
-    height: calc(1em + 40px);
+    /* height / 2 */
     border-radius: calc((1em + 40px) / 2);
-    position: relative;
+    border: 1px solid var(--blog_nav-border);
-}
+    background: var(--blog_nav-background);
+    backdrop-filter: blur(var(--blog_content-blur));
+    box-shadow: 0px 2px 5px gray;
 
-.logo {
+    .logo {
-    display: inline-block;
+        display: inline-block;
-    margin-top: -10px;
+        margin-top: -10px;
-    height: calc(1em + 40px - 20px);
+        height: calc(1em + 40px - 20px);
-    position: absolute;
+        position: absolute;
-    cursor: pointer;
+        cursor: pointer;
-}
-
-.navLink {
-    display: inline-block;
-    transition: text-decoration 0.2s ease-in-out;
-    margin: auto 5px;
-    cursor: pointer;
-
-    &:nth-of-type(1) {
-        margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px);
     }
 
-    &:hover {
+    .navLink {
-        text-decoration: underline;
+        display: inline-block;
+        transition: text-decoration 0.2s ease-in-out;
+        margin: auto 5px;
+        cursor: pointer;
+
+        &:nth-of-type(1) {
+            margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px);
+        }
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 }

styles/globals.scss

@@ -11,6 +11,28 @@
   --repl-color: rgb(24, 138, 24);
   --repl-color-link: rgb(31, 179, 31);
   --repl-color-hint: rgba(24, 138, 24, 0.3);
+
+
+  --blog_nav-background: rgba(128, 128, 128, 0.3);
+  --blog_nav-border: #ccc;
+
+  --blog_back-background-main: rgba(61, 0, 0,1);
+  --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(32, 19, 19,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+  --blog_content-background: rgba(64, 64, 64, 0.15);
+  --blog_content-blur: 10px;
+  --blog_color: #ddd;
+
+  &[data-theme="light"]{
+    --blog_nav-background: rgba(192, 192, 192, 0.3);
+    --blog_nav-border: #ccc;
+
+    --blog_back-background-main: rgba(61, 0, 0,1);
+    --blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(245, 179, 179,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+    --blog_content-background: rgba(160, 160, 160, 0.15);
+    --blog_content-blur: 5px;
+    --blog_color: #222;
+
+  }
 }
 
 body {