From 20e777281bc7fd5b8df1a8b5f18780eb27f2ffa4 Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Thu, 16 Apr 2026 18:02:53 +0200
Subject: [PATCH] navbar hover, and image fixes

---
 components.css |  5 +++++
 index.html     |  4 +++-
 style.css      | 52 +++++++++++++++++++++++++++++++++-----------------
 3 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/components.css b/components.css
index f47a518..b0cba63 100644
--- a/components.css
+++ b/components.css
@@ -7,6 +7,11 @@
     border-radius: 100rem;
     text-decoration: none;
     color: var(--on-background);
+
+    transition-duration: 0.2s;
+    &:hover {
+        transform: scale(1.1);
+    }
 }
 
 h1 {
diff --git a/index.html b/index.html
index f59e628..1e1b9e7 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,9 @@
                     <p>Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile  - od codziennych radości po wielkie uroczystości</p>
                     <a href="wyroby" class="btn">Zobacz naszą ofertę</a>
                 </div>
-                <img alt="tort" src="images/4-Z7293390-scaled_01.jpg"/>
+                <div>
+                    <img alt="tort" src="images/4-Z7293390-scaled_01.jpg"/>
+                </div>
             </div>
 
         </section>
diff --git a/style.css b/style.css
index cca8493..d405848 100644
--- a/style.css
+++ b/style.css
@@ -12,6 +12,7 @@ nav {
     /* positioning and look */
     position: sticky;
     top: 0;
+    z-index: 50;
     backdrop-filter: blur(var(--backdrop-blur));
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
@@ -26,19 +27,27 @@ nav {
     & > div {
         display: flex;
         align-items: center;
-        gap: 1rem;
+        gap: 2rem;
 
         & > 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);
+            &[href] {
+                font-weight: 200;
+                transition: color 0.2s;
+                &:hover {
+                    color: var(--primary);
+                }
+            }
+
+            /* The main selected link doesn't have a href attribute, so we can use that for styles */
+            &:not([href]) {
+                color: var(--primary);
+                padding-bottom: 8px;
+                border-bottom: 2px solid var(--primary);
+            }
         }
     }
 }
@@ -56,25 +65,32 @@ nav {
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
 
-        /* left portion */
         & > div {
             display: flex;
-            flex-direction: column;
-            align-items: flex-start;
             justify-content: center;
+        }
+
+        /* left portion */
+        & > :first-child {
+            align-items: flex-start;
+            flex-direction: column;
             gap: 1rem;
         }
 
         /* right portion */
-        & > img {
-            rotate: 2deg;
-            border-radius: var(--border-radius);
-            width: 100%;
-            height: 100%;
-            transition: rotate 0.7s;
+        & > :last-child {
+            align-items: center;
+            & > img {
+                rotate: 2deg;
+                border-radius: var(--border-radius);
+                max-width: 100%;
+                max-height: 80%;
+                aspect-ratio: 4/5;
+                transition: rotate 0.7s;
 
-            &:hover {
-                rotate: 0deg;
+                &:hover {
+                    rotate: 0deg;
+                }
             }
         }
     }