From 94bc964e34c2d98ad478ef404bc5a91545348444 Mon Sep 17 00:00:00 2001
From: bronku <bronk.jakub@proton.me>
Date: Tue, 9 Jun 2026 19:02:42 +0200
Subject: [PATCH] mobile layout work

---
 css/base.css                 |  47 ++++++++--
 css/components.css           |  35 +++++--
 css/home.css                 |   4 +-
 css/kawiarnia.css            |  14 ++-
 css/layout.css               | 175 +++++++++++++++++++----------------
 css/normalize.css            | 120 ++++++++++++------------
 css/portfolio.css            |  40 +++++++-
 css/wyroby.css               |   4 +-
 css/wyroby_slodkie_stoly.css |   4 +-
 css/wyroby_torty.css         |  27 ++----
 js/portfolio.js              |  81 ++++++++++++----
 11 files changed, 348 insertions(+), 203 deletions(-)

diff --git a/css/base.css b/css/base.css
index 47aaa09..a8c5104 100644
--- a/css/base.css
+++ b/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, h2, h3, h4 {
+h1,
+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;
 }
-
diff --git a/css/components.css b/css/components.css
index c6218d8..e2aea71 100644
--- a/css/components.css
+++ b/css/components.css
@@ -12,8 +12,10 @@
 
     transition-duration: 0.2s;
 
-    &:hover {
-        transform: scale(1.1);
+    @media (hover: hover) {
+        &:hover {
+            transform: scale(1.1);
+        }
     }
 }
 
@@ -78,15 +80,17 @@
     transform: translateY(0);
     transition: transform 0.2s;
 
-    &:hover {
-        transform: translateY(-10px);
+    @media (hover: hover) {
+        &:hover {
+            transform: translateY(-10px);
 
-        & img {
-            scale: 1.1;
-        }
+            & img {
+                scale: 1.1;
+            }
 
-        & svg {
-            margin-left: 10px;
+            & svg {
+                margin-left: 10px;
+            }
         }
     }
 
@@ -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;
+            }
+        }
     }
 }
 
diff --git a/css/home.css b/css/home.css
index 8977b99..eaa86eb 100644
--- a/css/home.css
+++ b/css/home.css
@@ -107,7 +107,7 @@
     & > h2 {
         align-self: center;
         justify-self: center;
-        grid-column: 1/ span 3;
+        grid-column: 1 / span 3;
     }
 
     @media (max-width: 768px) {
@@ -174,8 +174,6 @@
                 width: 100%;
                 border-radius: var(--border-radius);
                 position: relative;
-
-
             }
 
             & div:first-child > img {
diff --git a/css/kawiarnia.css b/css/kawiarnia.css
index 16e53f5..aa41606 100644
--- a/css/kawiarnia.css
+++ b/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;
 
@@ -119,7 +126,7 @@
     width: 100%;
 
     & > header {
-        grid-column: 1/  -1;
+        grid-column: 1/ -1;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -166,6 +173,5 @@
             text-decoration: none;
             font-size: 1.25rem;
         }
-
     }
 }
diff --git a/css/layout.css b/css/layout.css
index 0c03cec..7760ffe 100644
--- a/css/layout.css
+++ b/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,93 +48,99 @@ 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;
-            }
+                grid-column: 1 / span 2;
+                gap: 0.75rem;
+                flex-wrap: wrap;
 
-            & > a {
-                font-size: 1.25rem;
-                font-weight: bold;
-                text-decoration: none;
-                color: var(--on-background);
+                & > a {
+                    font-size: 1.25rem;
+                    font-weight: bold;
+                    text-decoration: none;
+                    color: var(--on-background);
 
-                &[href] {
-                    font-weight: 200;
-                    transition: color 0.2s;
+                    &[href] {
+                        font-weight: 200;
+                        transition: color 0.2s;
 
-                    &:hover {
-                        color: var(--primary);
+                        &:hover {
+                            color: var(--primary);
+                        }
+                    }
+
+                    @media (max-width: 768px) {
+                        font-size: 0.875rem;
+                        white-space: nowrap;
                     }
                 }
-
-                /* The main selected link doesn't have a href attribute, so we can use that for styles */
-
-                &:not([href]) {
-                    padding-bottom: 8px;
-                    color: var(--primary);
-                    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-size: 0.75rem;
+                font-weight: lighter;
+            }
+        }
+
+        & > :nth-child(2) a {
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
+        & a {
+            font-size: 0.875rem;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin: 1rem 0;
+            text-decoration: none;
+            color: var(--on-background);
+
+            & > div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        & h4 {
+            color: var(--primary);
+        }
+
+        & svg {
+            margin-right: 0.5rem;
+        }
+    }
 }
-
-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-size: 0.75rem;
-            font-weight: lighter;
-        }
-    }
-
-    & > :nth-child(2) a {
-        align-items: flex-start;
-        flex-direction: column;
-    }
-
-    & a {
-        font-size: 0.875rem;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        justify-content: flex-start;
-        margin: 1rem 0;
-        text-decoration: none;
-        color: var(--on-background);
-
-        & > 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/css/normalize.css b/css/normalize.css
index 192eb9c..5d8c1e3 100644
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -9,8 +9,8 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -21,7 +21,7 @@ html {
  */
 
 body {
-  margin: 0;
+    margin: 0;
 }
 
 /**
@@ -29,7 +29,7 @@ body {
  */
 
 main {
-  display: block;
+    display: block;
 }
 
 /**
@@ -38,8 +38,8 @@ main {
  */
 
 h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+    font-size: 2em;
+    margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -51,9 +51,9 @@ h1 {
  */
 
 hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
 }
 
 /**
@@ -62,8 +62,8 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -74,7 +74,7 @@ pre {
  */
 
 a {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 /**
@@ -83,9 +83,9 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -94,7 +94,7 @@ abbr[title] {
 
 b,
 strong {
-  font-weight: bolder;
+    font-weight: bolder;
 }
 
 /**
@@ -105,8 +105,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
 }
 
 /**
@@ -114,7 +114,7 @@ samp {
  */
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 /**
@@ -124,18 +124,18 @@ small {
 
 sub,
 sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
 
 sub {
-  bottom: -0.25em;
+    bottom: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+    top: -0.5em;
 }
 
 /* Embedded content
@@ -146,7 +146,7 @@ sup {
  */
 
 img {
-  border-style: none;
+    border-style: none;
 }
 
 /* Forms
@@ -162,10 +162,10 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
 }
 
 /**
@@ -174,8 +174,9 @@ textarea {
  */
 
 button,
-input { /* 1 */
-  overflow: visible;
+input {
+    /* 1 */
+    overflow: visible;
 }
 
 /**
@@ -184,8 +185,9 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
-  text-transform: none;
+select {
+    /* 1 */
+    text-transform: none;
 }
 
 /**
@@ -196,7 +198,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+    -webkit-appearance: button;
 }
 
 /**
@@ -207,8 +209,8 @@ button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+    border-style: none;
+    padding: 0;
 }
 
 /**
@@ -219,7 +221,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+    outline: 1px dotted ButtonText;
 }
 
 /**
@@ -227,7 +229,7 @@ button:-moz-focusring,
  */
 
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+    padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -238,12 +240,12 @@ fieldset {
  */
 
 legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
 }
 
 /**
@@ -251,7 +253,7 @@ legend {
  */
 
 progress {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
 /**
@@ -259,7 +261,7 @@ progress {
  */
 
 textarea {
-  overflow: auto;
+    overflow: auto;
 }
 
 /**
@@ -269,8 +271,8 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
 }
 
 /**
@@ -279,7 +281,7 @@ textarea {
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
 /**
@@ -288,8 +290,8 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
 }
 
 /**
@@ -297,7 +299,7 @@ textarea {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 /**
@@ -306,8 +308,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -318,7 +320,7 @@ textarea {
  */
 
 details {
-  display: block;
+    display: block;
 }
 
 /*
@@ -326,7 +328,7 @@ details {
  */
 
 summary {
-  display: list-item;
+    display: list-item;
 }
 
 /* Misc
@@ -337,7 +339,7 @@ summary {
  */
 
 template {
-  display: none;
+    display: none;
 }
 
 /**
@@ -345,5 +347,5 @@ template {
  */
 
 [hidden] {
-  display: none;
+    display: none;
 }
diff --git a/css/portfolio.css b/css/portfolio.css
index add8abd..43a250a 100644
--- a/css/portfolio.css
+++ b/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,8 +87,10 @@
         border-radius: 50%;
         transition: background 0.2s;
 
-        &:hover {
-            background: rgba(0, 0, 0, 0.8);
+        @media (hover: hover) {
+            &:hover {
+                background: rgba(0, 0, 0, 0.8);
+            }
         }
 
         & svg {
@@ -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;
+        }
+    }
 }
diff --git a/css/wyroby.css b/css/wyroby.css
index 0581bdc..6ad069e 100644
--- a/css/wyroby.css
+++ b/css/wyroby.css
@@ -32,9 +32,9 @@
 
         & > p {
             grid-row: 2;
-            grid-column: 1/span 2;
+            grid-column: 1 / span 2;
             color: var(--on-surface);
             font-size: 0.875em;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/css/wyroby_slodkie_stoly.css b/css/wyroby_slodkie_stoly.css
index ab71ace..72afe7c 100644
--- a/css/wyroby_slodkie_stoly.css
+++ b/css/wyroby_slodkie_stoly.css
@@ -41,7 +41,7 @@
 
                 gap: 1rem;
 
-                @media (max-width: 786px) {
+                @media (max-width: 768px) {
                     grid-template-columns: 1fr;
                 }
 
@@ -84,4 +84,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/css/wyroby_torty.css b/css/wyroby_torty.css
index 7482bd4..1952e6d 100644
--- a/css/wyroby_torty.css
+++ b/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;
         }
     }
-
 }
diff --git a/js/portfolio.js b/js/portfolio.js
index 4671fe9..c73161a 100644
--- a/js/portfolio.js
+++ b/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');
-  lb.id = 'lightbox';
+  var lb = document.createElement("div");
+  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');
-    lbImg.removeAttribute('src');
-    lbImg.alt = '';
-    lb.classList.add('open');
+    var img = items[current].querySelector("img");
+    lbImg.removeAttribute("src");
+    lbImg.alt = "";
+    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-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
-  lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
-
-  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.querySelector("#lb-close").addEventListener("click", close);
+  lb.querySelector("#lb-prev").addEventListener("click", function (e) {
+    e.stopPropagation();
+    prev();
+  });
+  lb.querySelector("#lb-next").addEventListener("click", function (e) {
+    e.stopPropagation();
+    next();
   });
 
-  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 },
+  );
 })();