(scss) refactorize

themes/cozy-hugo/assets/css/main.scss

@@ -7,10 +7,7 @@
     --hill: rgb(50, 235, 150);
     --hillshade: rgb(40, 160, 100);
     --image-decorative-blend: initial;
-  }
-  
     @media (prefers-color-scheme: dark) {
-    :root {
         --background: rgb(0, 45, 60);
         --background-header: rgb(0, 70, 100);
         --background-nav: rgb(0, 62.5, 80);
@@ -20,27 +17,15 @@
         --hillshade: rgb(0, 45, 60);
         --image-decorative-blend: luminosity;
     }
-  }
+}
 
-  * {
+* {
     box-sizing: border-box;
     scrollbar-color: var(--sphere) var(--background-header);
-  }
+}
   
-  html {
+html {
     scroll-behavior: smooth;
-  }
-  
-  a {
-    color: var(--text);
-    text-underline-offset: 3px;
-    transition: text-decoration-color .15s ease;
-  }
-  
-  a:hover {
-    text-decoration-color: var(--sphere);
-  }
-  
     body {
         background-color: var(--background);
         color: var(--text);
@@ -49,8 +34,17 @@
         line-height: 1.8;
         margin: 0;
     }
+    a {
+        color: var(--text);
+        text-underline-offset: 3px;
+        transition: text-decoration-color .15s ease;
+        &:hover {
+            text-decoration-color: var(--sphere);
+        }
+    }
+}
   
-  header {
+header {
     background-blend-mode: var(--image-decorative-blend);
     background-color: var(--background-header);
     background-image: url(home-header-optimized.svg);
@@ -63,21 +57,17 @@
     overflow: hidden;
     position: relative;
     text-align: center;
-  }
+    h1 {
-  
-  header h1 {
         font-size: 3.6em;
         line-height: .9em;
         margin: 0;
         z-index: 10;
     }
-  
+    p {
-  header p {
         margin: 0;
         z-index: 10;
     }
-  
+    #sphere {
-  header #sphere {
         background: var(--sphere);
         border-radius: 100%;
         display: none;
@@ -87,8 +77,7 @@
         top: 3vh;
         width: 10vh;
     }
-  
+    #hill {
-  header #hill {
         background: var(--hill);
         border-radius: 40px;
         bottom: 0;
@@ -99,8 +88,7 @@
         transform: rotate(45deg) translate(50%, 50%);
         width: 40vh;
     }
-  
+    #hillshade {
-  header #hillshade {
         background: var(--hillshade);
         border-radius: 80px;
         bottom: -5vh;
@@ -111,14 +99,14 @@
         transform: rotate(45deg) translate(50%, 50%);
         width: 40vh;
     }
-  
     #header-background {
         height: 100%;
         position: absolute;
         align-self: center;
     }
+}
 
-  body > nav {
+#main-nav {
     align-items: center;
     background: var(--background-nav);
     border-radius: 10px;
@@ -126,23 +114,23 @@
     gap: 20px;
     height: 60px;
     justify-content: center;
-    margin: 0px 20px -30px 20px;
+    margin: 0px auto;
     position: relative;
     top: -30px;
-  }
+}
   
-  .width-1200 {
+.width-1200 {
     margin: 0 auto;
     max-width: 1200px;
-  }
+}
 
-  main section {
+main {
+    section {
         display: grid;
-    grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
         grid-gap: 20px;
     }
-  
+    article {
-  main article {
         background: var(--background-header);
         border-radius: 10px;
         box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 0px 0px;
@@ -150,14 +138,11 @@
         flex-direction: column;
         padding: 40px;
         transition: box-shadow .3s ease, transform .3s ease;
-  }
+        &:hover {
-  
-  main article:hover {
             box-shadow: rgba(0, 0, 0, 0.1) 10px 15px 0px 0px;
             transform: translate(0, -5px);
         }
-  
+        a {
-  main article a {
             background: var(--background);
             border-radius: 5px;
             box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 0px 0px;
@@ -167,67 +152,57 @@
             padding: 10px 14px;
             text-decoration: none;
             transition: box-shadow .15s ease, transform .15s ease;
-  }
+            &:hover {
-  
-  main article a:hover {
                 box-shadow: rgba(0, 0, 0, 0.1) 2.5px 2.5px 0px 0px;
                 transform: translate(2.5px, 2.5px);
             }
-  
+            &:active {
-  main article a:active {
                 box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;
                 transform: translate(5px, 5px);
             }
-  
+        }
-  main article h2 {
+        h2 {
             font-size: 1.8em;
             line-height: normal;
             margin: 0;
         }
-  
+        p {
-  main article p {
             margin: 20px 0;
         }
-  
+        nav {
-  main article nav {
             display: flex;
             flex-wrap: wrap;
             gap: 10px;
             hyphens: none;
             margin-top: auto;
         }
+    }
+}
   
-  footer {
+
+footer {
     margin-top: 20px !important;
     text-align: center;
-  }
+}
   
-  /*footer p, footer a {
+/*footer p, footer a {
     text-align: center;
     color: rgb(80, 150, 190);
-  }*/
+}*/
   
-  @media (max-width: 1000px) {
+@media (max-width: 1000px) {
     header hill {
         transform: rotate(45deg) translate(40%, 70%);
     }
     header hillshade {
        transform: rotate(45deg) translate(20%, 80%);
     }
-    section#dienste {
+}
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
   
-  @media (max-width: 600px) {
-    section#dienste {
-      grid-template-columns: repeat(1, 1fr);
-    }
-  }
  
-  @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
     header #sphere {
         left: unset;
         right: 30vw;
     }
-  }  
+}  

themes/cozy-hugo/layouts/partials/nav.html

@@ -1,3 +1,3 @@
-<nav class="width-1200">
+<nav id="main-nav" class="width-1200">
     <a href="#dienste">Dienste</a>
 </nav>