kawiarnia tweaks

This commit is contained in:
bronku 2026-05-13 08:12:23 +02:00
parent 521fac8cb6
commit 789f0e645a
2 changed files with 261 additions and 248 deletions

View file

@ -62,6 +62,9 @@
} }
#kawiarnia-content { #kawiarnia-content {
background-color: var(--surface-container-low);
& > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -105,7 +108,7 @@
grid-column: 1/span 2; grid-column: 1/span 2;
& > h3 { & > h3 {
padding-top: 2rem ; padding-top: 2rem;
} }
& > li { & > li {
@ -129,13 +132,10 @@
} }
} }
} }
}
} }
#kawiarnia-details { #kawiarnia-details {
background-color: var(--surface-container-low);
& > div {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
justify-content: center; justify-content: center;
@ -144,15 +144,18 @@
@media (max-width: 786px) { @media (max-width: 786px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
& > div:first-child {
grid-column: 1/ -1; & > header {
grid-column: span 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem;
padding-bottom: 1rem;
} }
& > div:not(:first-child) { & > div {
padding: 2rem; padding: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -192,5 +195,4 @@
} }
} }
}
} }

View file

@ -36,11 +36,10 @@
</div> </div>
</header> </header>
<section id="kawiarnia-details"> <section id="kawiarnia-details">
<div> <header>
<div>
<h2>Odwiedź nas</h2> <h2>Odwiedź nas</h2>
<span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span> <span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span>
</div> </header>
<div> <div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@ -81,10 +80,10 @@
<p>Masz pytania? Chcesz zarezerwować stolik?</p> <p>Masz pytania? Chcesz zarezerwować stolik?</p>
<a href="tel:+48690214515">690 214 515</a> <a href="tel:+48690214515">690 214 515</a>
</div> </div>
</div>
</section> </section>
<section id="kawiarnia-content"> <section id="kawiarnia-content">
<div>
<h2>Nasza karta</h2> <h2>Nasza karta</h2>
<div> <div>
<div> <div>
@ -115,7 +114,14 @@
</ul> </ul>
</div> </div>
<div> <div>
<svg style="--icon-color: #B56576" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cake-slice-icon lucide-cake-slice"><path d="M16 13H3"/><path d="M16 17H3"/><path d="m7.2 7.9-3.388 2.5A2 2 0 0 0 3 12.01V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8.654c0-2-2.44-6.026-6.44-8.026a1 1 0 0 0-1.082.057L10.4 5.6"/><circle cx="9" cy="7" r="2"/></svg> <svg style="--icon-color: #B56576" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-cake-slice-icon lucide-cake-slice">
<path d="M16 13H3"/>
<path d="M16 17H3"/>
<path d="m7.2 7.9-3.388 2.5A2 2 0 0 0 3 12.01V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8.654c0-2-2.44-6.026-6.44-8.026a1 1 0 0 0-1.082.057L10.4 5.6"/>
<circle cx="9" cy="7" r="2"/>
</svg>
<h3>Słodkości</h3> <h3>Słodkości</h3>
<ul><p>Codziennie pieczemy coś innego! Zapytaj obsługę o dzisiejsze smaki.</p> <ul><p>Codziennie pieczemy coś innego! Zapytaj obsługę o dzisiejsze smaki.</p>
@ -125,7 +131,8 @@
</ul> </ul>
</div> </div>
<div> <div>
<svg style="--icon-color: #7D8C61" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg style="--icon-color: #7D8C61" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-leaf-icon lucide-leaf"> class="lucide lucide-leaf-icon lucide-leaf">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/> <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/>
@ -143,7 +150,8 @@
</ul> </ul>
</div> </div>
<div> <div>
<svg style="--icon-color: #D48C45" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg style="--icon-color: #D48C45" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-cup-soda-icon lucide-cup-soda"> class="lucide lucide-cup-soda-icon lucide-cup-soda">
<path d="m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8"/> <path d="m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8"/>
@ -163,7 +171,8 @@
</ul> </ul>
</div> </div>
<div> <div>
<svg style="--icon-color: #B56576" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg style="--icon-color: #B56576" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-ice-cream-cone-icon lucide-ice-cream-cone"> class="lucide lucide-ice-cream-cone-icon lucide-ice-cream-cone">
<path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11"/> <path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11"/>
@ -180,7 +189,8 @@
</ul> </ul>
</div> </div>
<div> <div>
<svg style="--icon-color: #C29B40" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg style="--icon-color: #C29B40" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-grid3x3-icon lucide-grid-3x3"> class="lucide lucide-grid3x3-icon lucide-grid-3x3">
<rect width="18" height="18" x="3" y="3" rx="2"/> <rect width="18" height="18" x="3" y="3" rx="2"/>
@ -203,6 +213,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</section> </section>
</main> </main>
<footer> <footer>