navbar hover, and image fixes

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 {

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>

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 */
+            &[href] {
-        & > a:not([href]) {
+                font-weight: 200;
-            color: var(--primary);
+                transition: color 0.2s;
-            padding-bottom: 4px;
+                &:hover {
-            border-bottom: 2px solid var(--primary);
+                    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 {
+        & > :last-child {
-            rotate: 2deg;
+            align-items: center;
-            border-radius: var(--border-radius);
+            & > img {
-            width: 100%;
+                rotate: 2deg;
-            height: 100%;
+                border-radius: var(--border-radius);
-            transition: rotate 0.7s;
+                max-width: 100%;
+                max-height: 80%;
+                aspect-ratio: 4/5;
+                transition: rotate 0.7s;
 
-            &:hover {
+                &:hover {
-                rotate: 0deg;
+                    rotate: 0deg;
+                }
             }
         }
     }