mobile layout work

css/base.css

@@ -19,6 +19,12 @@
     --grid-cols: 3;
 }
 
+@media (max-width: 1024px) {
+    :root {
+        --grid-cols: 2;
+    }
+}
+
 @media (max-width: 768px) {
     :root {
         --grid-cols: 1;
@@ -27,12 +33,14 @@
 
 body {
     background-color: var(--surface);
-    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     box-sizing: border-box;
 }
 
-
+h1,
-h1, h2, h3, h4 {
+h2,
+h3,
+h4 {
     margin: 0;
     font-family: serif;
     color: var(--on-background);
@@ -53,6 +61,22 @@ h2 {
     font-size: 3.5rem;
 }
 
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+        line-height: 2rem;
+    }
+
+    h3 {
+        font-size: 1.25rem;
+    }
+}
+
 h3 {
     font-size: 1.5rem;
 }
@@ -63,7 +87,6 @@ h4 {
 
 h5 {
     font-size: 0.8rem;
-
 }
 
 p {
@@ -71,15 +94,26 @@ p {
     line-height: 1.5rem;
 }
 
-body > nav, body > footer, body > main > * {
+body > nav,
+body > footer,
+body > main > * {
     padding: 8rem 2rem;
 
-    & > div:only-child, &:not(:has(>div:only-child)) {
+    & > div:only-child,
+    &:not(:has(> div:only-child)) {
         max-width: var(--max-content-width);
         margin: 0 auto;
     }
 }
 
+@media (max-width: 768px) {
+    body > nav,
+    body > footer,
+    body > main > * {
+        padding: 4rem 1rem;
+    }
+}
+
 body > nav {
     padding: 1rem;
 }
@@ -98,4 +132,3 @@ ul {
 img {
     color: transparent;
 }
-

css/components.css

@@ -12,10 +12,12 @@
 
     transition-duration: 0.2s;
 
+    @media (hover: hover) {
         &:hover {
             transform: scale(1.1);
         }
     }
+}
 
 .btn-green {
     padding: 0.5rem 1.5rem;
@@ -78,6 +80,7 @@
     transform: translateY(0);
     transition: transform 0.2s;
 
+    @media (hover: hover) {
         &:hover {
             transform: translateY(-10px);
 
@@ -89,6 +92,7 @@
                 margin-left: 10px;
             }
         }
+    }
 
     & svg {
         transition-duration: 0.2s;
@@ -125,6 +129,19 @@
         gap: 1rem;
         justify-content: center;
         padding: 3rem;
+        flex-wrap: wrap;
+
+        @media (max-width: 768px) {
+            padding: 1.5rem 0;
+            gap: 0.75rem;
+            justify-content: center;
+
+            & > a {
+                font-size: 0.9rem;
+                white-space: nowrap;
+                padding: 0.4rem 1rem;
+            }
+        }
     }
 }
 

css/home.css

@@ -174,8 +174,6 @@
                 width: 100%;
                 border-radius: var(--border-radius);
                 position: relative;
-
-
             }
 
             & div:first-child > img {

css/kawiarnia.css

@@ -21,7 +21,11 @@
         & > div {
             position: absolute;
             bottom: 0;
-            background-image: linear-gradient(to right, var(--surface), transparent);
+            background-image: linear-gradient(
+                to right,
+                var(--surface),
+                transparent
+            );
             width: 100%;
             height: 100%;
             z-index: 100;
@@ -37,6 +41,10 @@
         gap: 1.5rem;
         align-items: flex-start;
 
+        @media (max-width: 768px) {
+            padding: 4rem 1rem;
+        }
+
         & > h1 {
             line-height: unset;
         }
@@ -74,7 +82,6 @@
             display: grid;
             grid-template-columns: repeat(var(--grid-cols), 1fr);
 
-
             width: 100%;
             gap: 2rem;
 
@@ -166,6 +173,5 @@
             text-decoration: none;
             font-size: 1.25rem;
         }
-
     }
 }

css/layout.css

@@ -16,18 +16,31 @@ body > nav {
             width: 20rem;
         }
 
+        @media (max-width: 1024px) {
+            & img {
+                width: 14rem;
+            }
+        }
+
         @media (max-width: 768px) {
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 1fr 1fr;
-            gap: 1rem;
+            gap: 0.5rem;
+
+            & img {
+                width: 12rem;
+            }
+
             & > .btn {
                 grid-column: 2;
                 grid-row: 1;
+                padding: 0.5rem 1rem;
+                font-size: 0.875rem;
             }
         }
 
         & > :last-child {
-            justify-self: end
+            justify-self: end;
         }
 
         & > div {
@@ -35,13 +48,22 @@ body > nav {
             align-items: center;
             gap: 2rem;
 
+            @media (max-width: 1024px) {
+                gap: 1rem;
+
+                & > a {
+                    font-size: 1rem;
+                }
+            }
+
             @media (max-width: 768px) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 grid-row: 2;
                 grid-column: 1 / span 2;
-            }
+                gap: 0.75rem;
+                flex-wrap: wrap;
 
                 & > a {
                     font-size: 1.25rem;
@@ -58,14 +80,10 @@ body > nav {
                         }
                     }
 
-                /* The main selected link doesn't have a href attribute, so we can use that for styles */
+                    @media (max-width: 768px) {
-
+                        font-size: 0.875rem;
-                &:not([href]) {
+                        white-space: nowrap;
-                    padding-bottom: 8px;
-                    color: var(--primary);
-                    border-bottom: 2px solid var(--primary);
                     }
-
                 }
             }
         }
@@ -125,3 +143,4 @@ footer {
             margin-right: 0.5rem;
         }
     }
+}

css/normalize.css

@@ -174,7 +174,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+    /* 1 */
     overflow: visible;
 }
 
@@ -184,7 +185,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+    /* 1 */
     text-transform: none;
 }
 

css/portfolio.css

@@ -4,6 +4,15 @@
     grid-auto-flow: dense;
     gap: 1.5rem;
 
+    @media (max-width: 1024px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 480px) {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
     & > * {
         aspect-ratio: 1/1;
         overflow: hidden;
@@ -78,9 +87,11 @@
         border-radius: 50%;
         transition: background 0.2s;
 
+        @media (hover: hover) {
             &:hover {
                 background: rgba(0, 0, 0, 0.8);
             }
+        }
 
         & svg {
             width: 1.5rem;
@@ -100,4 +111,29 @@
     & #lb-next {
         right: 1.5rem;
     }
+
+    @media (max-width: 480px) {
+        & > button {
+            width: 2.5rem;
+            height: 2.5rem;
+
+            & svg {
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+
+        & #lb-close {
+            top: 0.75rem;
+            right: 0.75rem;
+        }
+
+        & #lb-prev {
+            left: 0.75rem;
+        }
+
+        & #lb-next {
+            right: 0.75rem;
+        }
+    }
 }

css/wyroby_slodkie_stoly.css

@@ -41,7 +41,7 @@
 
                 gap: 1rem;
 
-                @media (max-width: 786px) {
+                @media (max-width: 768px) {
                     grid-template-columns: 1fr;
                 }
 

css/wyroby_torty.css

@@ -5,20 +5,16 @@
 #rodzaje-tortow {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    @media (max-width: 786px) {
+    @media (max-width: 768px) {
         grid-template-columns: 1fr;
     }
     gap: 2rem;
-
-    & > div {
-
-    }
 }
 
 #cennik-tortow {
     display: grid;
     grid-template-columns: 2fr 1fr;
-    @media (max-width: 786px) {
+    @media (max-width: 768px) {
         grid-template-columns: 1fr;
     }
     gap: 2rem;
@@ -31,7 +27,6 @@
         & > span:last-child {
             font-weight: bold;
             color: var(--primary);
-
         }
 
         &:not(:last-child) {
@@ -44,7 +39,8 @@
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
 
-        & > h3, & > svg {
+        & > h3,
+        & > svg {
             padding: 1rem;
         }
 
@@ -54,7 +50,6 @@
             place-self: center;
         }
 
-
         & > ul {
             overflow: hidden;
             border: 1px solid var(--surface-container-highest);
@@ -67,13 +62,14 @@
 
                 &:first-child {
                     font-weight: bold;
-                    background-color: rgb(from var(--secondary-container) r g b / 30%);
+                    background-color: rgb(
+                        from var(--secondary-container) r g b / 30%
+                    );
 
                     & > span:last-child {
                         color: black;
                     }
                 }
-
             }
         }
     }
@@ -81,7 +77,6 @@
     & > div:last-child > ul > li {
         padding: 0.75rem 0;
     }
-
 }
 
 #menu-smakow {
@@ -124,8 +119,6 @@
             padding-top: 0.25rem;
             color: var(--on-surface-variant);
         }
-
-
     }
 }
 
@@ -163,7 +156,7 @@
             gap: 2rem;
         }
 
-        @media (max-width: 786px) {
+        @media (max-width: 768px) {
             grid-template-columns: 1fr;
             & > div {
                 grid-template-columns: 1fr;
@@ -171,7 +164,8 @@
         }
 
         & h4 {
-            font-family: 'Plus Jakarta Sans', sans-serif; /* Modern font for titles */
+            font-family:
+                "Plus Jakarta Sans", sans-serif; /* Modern font for titles */
             font-weight: 700;
             margin-bottom: 0.5rem;
             letter-spacing: 1px;
@@ -184,5 +178,4 @@
             opacity: 0.8;
         }
     }
-
 }

js/portfolio.js

@@ -1,12 +1,12 @@
 (function () {
-  var grid = document.getElementById('portfolio-grid');
+  var grid = document.getElementById("portfolio-grid");
   if (!grid) return;
 
   var items = Array.from(grid.children);
   if (!items.length) return;
 
-  var lb = document.createElement('div');
+  var lb = document.createElement("div");
-  lb.id = 'lightbox';
+  lb.id = "lightbox";
   lb.innerHTML =
     '<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
     '<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
@@ -14,21 +14,21 @@
     '<button id="lb-next" aria-label="Następne"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>';
   document.body.appendChild(lb);
 
-  var lbImg = lb.querySelector('img');
+  var lbImg = lb.querySelector("img");
   var current = -1;
 
   function open(idx) {
     current = idx;
-    var img = items[current].querySelector('img');
+    var img = items[current].querySelector("img");
-    lbImg.removeAttribute('src');
+    lbImg.removeAttribute("src");
-    lbImg.alt = '';
+    lbImg.alt = "";
-    lb.classList.add('open');
+    lb.classList.add("open");
     lbImg.src = img.src;
     lbImg.alt = img.alt;
   }
 
   function close() {
-    lb.classList.remove('open');
+    lb.classList.remove("open");
     current = -1;
   }
 
@@ -43,21 +43,62 @@
   }
 
   items.forEach(function (item, i) {
-    item.addEventListener('click', function () { open(i); });
+    item.addEventListener("click", function () {
+      open(i);
+    });
   });
 
-  lb.querySelector('#lb-close').addEventListener('click', close);
+  lb.querySelector("#lb-close").addEventListener("click", close);
-  lb.querySelector('#lb-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
+  lb.querySelector("#lb-prev").addEventListener("click", function (e) {
-  lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
+    e.stopPropagation();
-
+    prev();
-  document.addEventListener('keydown', function (e) {
+  });
-    if (!lb.classList.contains('open')) return;
+  lb.querySelector("#lb-next").addEventListener("click", function (e) {
-    if (e.key === 'Escape') { close(); e.preventDefault(); }
+    e.stopPropagation();
-    if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
+    next();
-    if (e.key === 'ArrowRight') { next(); e.preventDefault(); }
   });
 
-  lb.addEventListener('click', function (e) {
+  document.addEventListener("keydown", function (e) {
+    if (!lb.classList.contains("open")) return;
+    if (e.key === "Escape") {
+      close();
+      e.preventDefault();
+    }
+    if (e.key === "ArrowLeft") {
+      prev();
+      e.preventDefault();
+    }
+    if (e.key === "ArrowRight") {
+      next();
+      e.preventDefault();
+    }
+  });
+
+  lb.addEventListener("click", function (e) {
     if (e.target === lb) close();
   });
+
+  var touchStartX = 0;
+  var touchStartY = 0;
+  lb.addEventListener(
+    "touchstart",
+    function (e) {
+      touchStartX = e.changedTouches[0].screenX;
+      touchStartY = e.changedTouches[0].screenY;
+    },
+    { passive: true },
+  );
+
+  lb.addEventListener(
+    "touchend",
+    function (e) {
+      var dx = e.changedTouches[0].screenX - touchStartX;
+      var dy = e.changedTouches[0].screenY - touchStartY;
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
+        if (dx < 0) next();
+        else prev();
+      }
+    },
+    { passive: true },
+  );
 })();