From 39195fadfaa0413beccd49ffa1926e06cc664343 Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Tue, 28 Apr 2026 12:46:12 +0200
Subject: [PATCH] css organization

---
 base.css   |   6 +
 home.css   | 258 +++++++++++++++++++++++++++++++++++
 layout.css | 125 +++++++++++++++++
 style.css  | 388 +----------------------------------------------------
 4 files changed, 391 insertions(+), 386 deletions(-)
 create mode 100644 home.css
 create mode 100644 layout.css

diff --git a/base.css b/base.css
index 71e92e9..db02615 100644
--- a/base.css
+++ b/base.css
@@ -12,3 +12,9 @@
     --secondary-container: #e0f5cb;
     --on-secondary-container: #4c5e3e;
 }
+
+body {
+    background-color: var(--surface);
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/home.css b/home.css
new file mode 100644
index 0000000..64017a5
--- /dev/null
+++ b/home.css
@@ -0,0 +1,258 @@
+@import "base.css";
+
+.hero {
+    max-width: var(--max-content-width);
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    padding: 2rem;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+
+        & > :last-child {
+            grid-row: 1;
+        }
+
+        & > :first-child {
+            grid-row: 2;
+        }
+    }
+
+    & > div {
+        display: flex;
+        justify-content: center;
+    }
+
+    & > :first-child {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    & > :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;
+            }
+        }
+    }
+}
+
+.about-us {
+    background-color: var(--surface-container-low);
+
+    & > div {
+        gap: 4rem;
+        display: grid;
+        grid-template-columns: 3fr 2fr;
+        align-items: center;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+
+        & > :first-child {
+            position: relative;
+
+            & > div {
+                overflow: hidden;
+                border-radius: var(--border-radius);
+                border: 10px solid var(--surface-container-low);
+
+                &:first-child {
+                    position: relative;
+                    z-index: 10;
+                    width: 80%;
+                }
+
+                &:last-child {
+                    position: absolute;
+                    bottom: -3rem;
+                    right: 0;
+                    z-index: 20;
+                    width: 50%;
+                }
+
+                & > img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+
+        & :last-child {
+            & > span {
+                color: var(--primary);
+            }
+        }
+    }
+}
+
+.featured-delights {
+    gap: 2rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto auto;
+
+    & > h2 {
+        align-self: center;
+        justify-self: center;
+        grid-column: 1/ span 3;
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+
+        & > h2 {
+            grid-column: 1;
+        }
+    }
+
+    & > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+
+        position: relative;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        background-color: white;
+
+        .greener {
+            background-color: rgb(from var(--secondary-container) r g b / 0.3);
+        }
+
+        & img {
+            display: block;
+            width: 100%;
+            scale: 1;
+            transition: scale 0.7s;
+        }
+
+        & > div:first-child {
+            overflow: hidden;
+        }
+
+        & > div:last-child {
+            display: grid;
+            grid-template-rows: auto auto 1fr;
+            padding: 2rem;
+            flex-grow: 1;
+
+            & > a {
+                display: flex;
+                align-self: end;
+                align-items: center;
+                justify-content: flex-start;
+                gap: 1rem;
+                color: var(--primary);
+                font-weight: bold;
+                text-decoration: none;
+            }
+        }
+
+        top: 0;
+        transition: top 0.2s;
+
+        &:hover {
+            top: -10px;
+
+            & img {
+                scale: 1.1;
+            }
+
+            & svg {
+                margin-left: 10px;
+            }
+        }
+
+        & svg {
+            transition-duration: 0.2s;
+            height: 2em;
+            width: 2em;
+        }
+    }
+}
+
+.kawiarnia {
+    background-color: var(--secondary-container);
+
+    & > div {
+        background-color: rgb(from var(--surface) r g b / 0.6);
+        border-radius: var(--border-radius);
+        padding: 4rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4rem;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+
+        & > :first-child {
+            & > h3 {
+                color: var(--on-secondary-container);
+                font-size: 3rem;
+                margin-bottom: 1.5rem;
+            }
+
+            & > p {
+                color: var(--on-secondary-container);
+                font-size: 1.125rem;
+                opacity: 0.8;
+                margin-bottom: 2rem;
+            }
+
+            & li {
+                font-size: 1.25rem;
+                margin: 1rem 0;
+
+                & span {
+                    margin-left: 1rem;
+                    color: var(--on-secondary-container);
+                }
+            }
+        }
+
+        & > :last-child {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+
+            & > div {
+                display: flex;
+                align-items: center;
+            }
+
+            & img {
+                width: 100%;
+                border-radius: var(--border-radius);
+                position: relative;
+
+
+            }
+
+            & div:first-child > img {
+                top: -1rem;
+            }
+
+            & div:last-child > img {
+                top: 1rem;
+            }
+        }
+    }
+}
diff --git a/layout.css b/layout.css
new file mode 100644
index 0000000..d59af75
--- /dev/null
+++ b/layout.css
@@ -0,0 +1,125 @@
+@import "base.css";
+
+
+nav {
+    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;
+
+    & > div {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        grid-template-rows: 1fr;
+        align-items: center;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 1rem;
+            & > .btn {
+                grid-column: 2;
+                grid-row: 1;
+            }
+        }
+
+        & > :last-child {
+            justify-self: end
+        }
+
+        & > div {
+            display: flex;
+            align-items: center;
+            gap: 2rem;
+
+            @media (max-width: 768px) {
+                grid-row: 2;
+                grid-column: 1/ span 2;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            & > a {
+                font-size: 1.25rem;
+                color: var(--on-background);
+                text-decoration: none;
+
+                &[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);
+                }
+
+            }
+        }
+    }
+}
+
+footer {
+    display: grid;
+    grid-template-columns: 3fr 2fr 2fr;
+    gap: 1rem;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+
+    & > :first-child {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        & p {
+            font-size: 0.875rem;
+        }
+
+        & > :last-child {
+            font-weight: lighter;
+            font-size: 0.75rem;
+        }
+    }
+
+    & > :nth-child(2) a {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    & a {
+        font-size: 0.875rem;
+        color: var(--on-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        text-decoration: none;
+        margin: 1rem 0;
+
+        & > div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    & h4 {
+        color: var(--primary);
+    }
+
+    & svg {
+        margin-right: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index cfb7f70..e1fa3fd 100644
--- a/style.css
+++ b/style.css
@@ -1,388 +1,4 @@
 @import "base.css";
 @import "components.css";
-
-body {
-    background-color: var(--surface);
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    box-sizing: border-box;
-}
-
-nav {
-    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;
-}
-
-nav > div {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    grid-template-rows: 1fr;
-    align-items: center;
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-        gap: 1rem;
-        & > .btn {
-            grid-column: 2;
-            grid-row: 1;
-        }
-    }
-
-    & :last-child {
-        justify-self: end
-    }
-
-    & > div {
-        display: flex;
-        align-items: center;
-        gap: 2rem;
-
-        @media (max-width: 768px) {
-            grid-row: 2;
-            grid-column: 1/ span 2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        & > a {
-            font-size: 1.25rem;
-            color: var(--on-background);
-            text-decoration: none;
-
-            &[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);
-            }
-
-        }
-    }
-}
-
-.hero {
-    max-width: var(--max-content-width);
-
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    padding: 2rem;
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-
-        & > :last-child {
-            grid-row: 1;
-        }
-
-        & > :first-child {
-            grid-row: 2;
-        }
-    }
-
-    & > div {
-        display: flex;
-        justify-content: center;
-    }
-
-    & > :first-child {
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    & > :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;
-            }
-        }
-    }
-}
-
-.about-us {
-    background-color: var(--surface-container-low);
-
-    & > div {
-        gap: 4rem;
-        display: grid;
-        grid-template-columns: 3fr 2fr;
-        align-items: center;
-
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-
-        & > :first-child {
-            position: relative;
-
-            & > div {
-                overflow: hidden;
-                border-radius: var(--border-radius);
-                border: 10px solid var(--surface-container-low);
-
-                &:first-child {
-                    position: relative;
-                    z-index: 10;
-                    width: 80%;
-                }
-
-                &:last-child {
-                    position: absolute;
-                    bottom: -3rem;
-                    right: 0;
-                    z-index: 20;
-                    width: 50%;
-                }
-
-                & > img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-            }
-        }
-
-        & :last-child {
-            & > span {
-                color: var(--primary);
-            }
-        }
-    }
-}
-
-.featured-delights {
-    gap: 2rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto auto;
-
-    & > h2 {
-        align-self: center;
-        justify-self: center;
-        grid-column: 1/ span 3;
-    }
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-
-        & > h2 {
-            grid-column: 1;
-        }
-    }
-
-    & > div {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-
-
-        position: relative;
-        border-radius: var(--border-radius);
-        overflow: hidden;
-        background-color: white;
-
-        .greener {
-            background-color: rgb(from var(--secondary-container) r g b / 0.3);
-        }
-
-        & img {
-            display: block;
-            width: 100%;
-            scale: 1;
-            transition: scale 0.7s;
-        }
-
-        & > div:first-child {
-            overflow: hidden;
-        }
-
-        & > div:last-child {
-            display: grid;
-            grid-template-rows: auto auto 1fr;
-            padding: 2rem;
-            flex-grow: 1;
-
-            & > a {
-                display: flex;
-                align-self: end;
-                align-items: center;
-                justify-content: flex-start;
-                gap: 1rem;
-                color: var(--primary);
-                font-weight: bold;
-                text-decoration: none;
-            }
-        }
-
-        top: 0;
-        transition: top 0.2s;
-
-        &:hover {
-            top: -10px;
-
-            & img {
-                scale: 1.1;
-            }
-
-            & svg {
-                margin-left: 10px;
-            }
-        }
-
-        & svg {
-            transition-duration: 0.2s;
-            height: 2em;
-            width: 2em;
-        }
-    }
-}
-
-.kawiarnia {
-    background-color: var(--secondary-container);
-
-    & > div {
-        background-color: rgb(from var(--surface) r g b / 0.6);
-        border-radius: var(--border-radius);
-        padding: 4rem;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 4rem;
-
-        @media (max-width: 768px) {
-            grid-template-columns: 1fr;
-        }
-
-        & > :first-child {
-            & > h3 {
-                color: var(--on-secondary-container);
-                font-size: 3rem;
-                margin-bottom: 1.5rem;
-            }
-
-            & > p {
-                color: var(--on-secondary-container);
-                font-size: 1.125rem;
-                opacity: 0.8;
-                margin-bottom: 2rem;
-            }
-
-            & li {
-                font-size: 1.25rem;
-                margin: 1rem 0;
-
-                & span {
-                    margin-left: 1rem;
-                    color: var(--on-secondary-container);
-                }
-            }
-        }
-
-        & > :last-child {
-            width: 100%;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
-
-            & > div {
-                display: flex;
-                align-items: center;
-            }
-
-            & img {
-                width: 100%;
-                border-radius: var(--border-radius);
-                position: relative;
-
-
-            }
-
-            & div:first-child > img {
-                top: -1rem;
-            }
-
-            & div:last-child > img {
-                top: 1rem;
-            }
-        }
-    }
-}
-
-footer {
-    display: grid;
-    grid-template-columns: 3fr 2fr 2fr;
-    gap: 1rem;
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-    }
-
-    & > :first-child {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        & p {
-            font-size: 0.875rem;
-        }
-
-        & > :last-child {
-            font-weight: lighter;
-            font-size: 0.75rem;
-        }
-    }
-
-    & > :nth-child(2) a {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    & a {
-        font-size: 0.875rem;
-        color: var(--on-background);
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        text-decoration: none;
-        margin: 1rem 0;
-
-        & > div {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-
-    & h4 {
-        color: var(--primary);
-    }
-
-    & svg {
-        margin-right: 0.5rem;
-    }
-}
\ No newline at end of file
+@import "home.css";
+@import "layout.css";
\ No newline at end of file