css organization

base.css

@@ -0,0 +1,9 @@
+:root {
+    --surface-container-low: #faf3e7;
+    --surface-container-highest: #eae2d2;
+    --surface: #fff8f0;
+    --backdrop-blur: 24px;
+    --primary: #8c4d50;
+    --primary-container: #fcacaf;
+    --on-background: #363227;
+}

components.css

@@ -0,0 +1,10 @@
+@import "base.css";
+
+.btn {
+    background-image: linear-gradient(to right, var(--primary), var(--primary-container));
+    padding: 1rem 2rem;
+    font-size: 1rem;
+    border-radius: 100rem;
+    text-decoration: none;
+    color: black;
+}

index.html

@@ -19,7 +19,7 @@
             <a href="portfolio">Portfolio</a>
             <a href="kawiarnia">Kawiarnia</a>
         </div>
-        <a href="kontakt">Kontakt</a>
+        <a href="kontakt" class="btn">Kontakt</a>
     </nav>
     <main>
         <section>

style.css

@@ -1,16 +1,42 @@
+@import "base.css";
+@import "components.css";
+
 body {
-    background-color: #fff8f0;
+    background-color: var(--surface);
+    font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
 nav {
+    /* positioning and look */
+    position: sticky;
+    top: 0;
+    backdrop-filter: blur(var(--backdrop-blur));
+    background-color: color-mix(in srgb, var(--surface), transparent 20%);
+    padding: 1rem;
+    height: 4rem;
+
+    /* content inside */
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto 1fr;
 	align-items: center;
-}
 
-nav div {
-    grid-column: 2;
-    display: flex;
-    justify-content: center;
-}
+    & :last-child { justify-self: end }
+    & > div {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
 
+        & > a {
+            font-size: 1.25rem;
+            color: var(--on-background);
+            text-decoration: none;
+        }
+
+        /* The main selected link doesn't have a href attribute, so we can use that for styles */
+        & > a:not([href]) {
+            color: var(--primary);
+            padding-bottom: 4px;
+            border-bottom: 2px solid var(--primary);
+        }
+    }
+}