From 8d3d465fa0e9f4582bc1e32fe7c24efb61819419 Mon Sep 17 00:00:00 2001
From: bronku <bronk.jakub@proton.me>
Date: Sun, 8 Nov 2026 15:49:31 +0100
Subject: [PATCH] style fixes

---
 css/swieta.css    | 124 ++++++++++++++++++++++++----------------------
 html/swieta.templ |  26 +++++-----
 2 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/css/swieta.css b/css/swieta.css
index d0bf781..db5d1e7 100644
--- a/css/swieta.css
+++ b/css/swieta.css
@@ -143,69 +143,77 @@
 
 
 #order-form {
-    border-radius: var(--border-radius);
-    background-color: var(--secondary-container);
-    & > p, & > h2{
-        text-align: center;
-    }
+    max-width: var(--max-content-width);
+    margin: 0 auto;
 
-    & > form {
+    & > div {
+        padding: 2rem;
+        border-radius: var(--border-radius);
+        background-color: var(--secondary-container);
+        & > p, & > h2{
+            text-align: center;
+        }
+        & > form {
 
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto auto auto;
-        & > fieldset {
-            grid-column: -1 / 1;
-            & > div {
-                display: grid;
-                grid-template-columns: 1fr auto auto auto;
-
-                & > span > span{
-                    color: var(--swieta-red);
-                }
-                & > input {
-                    background-color: transparent;
-                    border: none;
-                    text-align: center;
-                    width: 2rem;
-                    appearance: textfield;
-                    -moz-appearance: textfield;
-                    &::-webkit-inner-spin-button,
-                    &::-webkit-outer-spin-button {
-                        -webkit-appearance: none;
-                        margin: 0;
-                    }
-                }
-                & > button {
+            display: grid;
+            gap: 1rem;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto auto auto;
+            & > fieldset {
+                grid-column: -1 / 1;
+                & > div {
                     display: grid;
-                    place-items: center;
-                    margin: 0.5rem;
-                    width: 2rem;
-                    height: 2rem;
-                    padding: 0.5rem;
-                    border-radius: var(--border-radius);
-                    border: none;
-                    font-family: monospace;
-                }
+                    grid-template-columns: 1fr auto auto auto;
 
+                    & > span {
+                        align-content: center;
+                        & > span{
+                            color: var(--swieta-red);
+                        }
+                    }
+                    & > input {
+                        background-color: transparent;
+                        border: none;
+                        text-align: center;
+                        width: 2rem;
+                        appearance: textfield;
+                        -moz-appearance: textfield;
+                        &::-webkit-inner-spin-button,
+                        &::-webkit-outer-spin-button {
+                            -webkit-appearance: none;
+                            margin: 0;
+                        }
+                    }
+                    & > button {
+                        display: grid;
+                        place-items: center;
+                        margin: 0.5rem;
+                        width: 2rem;
+                        height: 2rem;
+                        padding: 0.5rem;
+                        border-radius: var(--border-radius);
+                        border: none;
+                        font-family: monospace;
+                    }
+
+                }
+            }
+            & > input, & > fieldset {
+                background-color: var(--surface);
+            }
+            & input:focus{
+                outline: none;
+            }
+            & > * {
+                padding: 1rem;
+                border-radius: var(--small-radius);
+                border: 1px solid var(--border-color);
+            }
+            & > button {
+                grid-column: -1 / 1;
+                background-color: var(--swieta-red);
+                color: var(--surface);
             }
-        }
-        & > input, & > fieldset {
-            background-color: var(--surface);
-        }
-        & input:focus{
-            outline: none;
-        }
-        & > * {
-            padding: 1rem;
-            border-radius: var(--small-radius);
-            border: 1px solid var(--border-color);
-        }
-        & > button {
-            grid-column: -1 / 1;
-            background-color: var(--swieta-red);
-            color: var(--surface);
         }
     }
 }
diff --git a/html/swieta.templ b/html/swieta.templ
index cb577be..e083f04 100644
--- a/html/swieta.templ
+++ b/html/swieta.templ
@@ -44,18 +44,20 @@ templ Swieta(products []types.Product) {
 			</div>
 		</section>
 		<section id="order-form">
-			<h2>Złóż zamówienie</h2>
-			<p>Odbiór wszystkich zamówień: <b>24 grudnia</b>. Zamówienia przyjmujemy do <b>25 grudnia</b>. Potwierdzimy zamówienie telefonicznie.</p>
-			<form>
-				<fieldset>
-					for _, product := range products {
-						@product_form(product)
-					}
-				</fieldset>
-				<input type="text" placeholder="Imie i Nazwisko"/>
-				<input type="tel" placeholder="Numer Telefonu"/>
-				<button type="submit">Wyślij zamówienie</button>
-			</form>
+			<div>
+				<h2>Złóż zamówienie</h2>
+				<p>Odbiór wszystkich zamówień: <b>24 grudnia</b>. Zamówienia przyjmujemy do <b>15 grudnia</b>. Potwierdzimy zamówienie telefonicznie.</p>
+				<form>
+					<fieldset>
+						for _, product := range products {
+							@product_form(product)
+						}
+					</fieldset>
+					<input type="text" required placeholder="Imie i Nazwisko"/>
+					<input type="tel" required placeholder="Numer Telefonu"/>
+					<button type="submit">Wyślij zamówienie</button>
+				</form>
+			</div>
 		</section>
 	</main>
 }