bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more refactors

Browse source
This commit is contained in:
bronku 2026-05-13 09:05:29 +02:00
parent 787e9d96c2
commit 65a36f4d3e
7 changed files with 130 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

7
base.css
View file

@ -15,6 +15,13 @@
--on-surface: #363227;
--outline-variant: #b9b1a3;
--on-surface-variant: #645f52;
--grid-cols: 3;
}
@media (max-width: 768px) {
:root {
--grid-cols: 1;
}
}
body {

32
components.css
View file

@ -9,6 +9,7 @@
color: var(--on-background);
transition-duration: 0.2s;
&:hover {
transform: scale(1.1);
}
@ -93,3 +94,34 @@
width: 2em;
}
}
.subnav {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
/* we don't want any gap between this element and the main contents of the site */
padding-bottom: 0;
& + * {
padding-top: 0;
}
& > p {
margin: 0;
}
& > * {
text-align: center;
max-width: 40rem;
}
& > nav {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
padding: 3rem;
}
}

12
kawiarnia.css
View file

@ -74,12 +74,9 @@
& > div {
justify-content: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
@media (max-width: 786px) {
grid-template-columns: 1fr;
}
width: 100%;
gap: 2rem;
@ -137,16 +134,13 @@
#kawiarnia-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
justify-content: center;
gap: 2rem;
width: 100%;
@media (max-width: 786px) {
grid-template-columns: 1fr;
}
& > header {
grid-column: span 3;
grid-column: 1/ -1;
display: flex;
flex-direction: column;
justify-content: center;

88
kawiarnia.html
View file

@ -35,52 +35,54 @@
<div></div>
</div>
</header>
<section id="kawiarnia-details">
<header>
<h2>Odwiedź nas</h2>
<span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span>
</header>
<div>
<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"
class="lucide lucide-map-pin-icon lucide-map-pin">
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<section>
<div id="kawiarnia-details">
<header>
<h2>Odwiedź nas</h2>
<span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span>
</header>
<div>
<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"
class="lucide lucide-map-pin-icon lucide-map-pin">
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<h3>Adres</h3>
<p>ul. Dworcowa 3a<br>
83-300 Kartuzy</p>
</div>
<div>
<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"
class="lucide lucide-clock-icon lucide-clock">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
<h3>Godziny Otwarcia</h3>
<ul>
<li>
<span>pn-pt</span><span>9:00-19:00</span>
</li>
<li>
<span>sb-nd</span><span>10:00-20:00</span>
</li>
</ul>
<h3>Adres</h3>
<p>ul. Dworcowa 3a<br>
83-300 Kartuzy</p>
</div>
<div>
<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"
class="lucide lucide-clock-icon lucide-clock">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
<h3>Godziny Otwarcia</h3>
<ul>
<li>
<span>pn-pt</span><span>9:00-19:00</span>
</li>
<li>
<span>sb-nd</span><span>10:00-20:00</span>
</li>
</ul>
</div>
<div>
<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"
class="lucide lucide-phone-icon lucide-phone">
<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
</svg>
<h3>Zadzwoń do nas</h3>
<p>Masz pytania? Chcesz zarezerwować stolik?</p>
<a href="tel:+48690214515">690 214 515</a>
</div>
</div>
<div>
<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"
class="lucide lucide-phone-icon lucide-phone">
<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
</svg>
<h3>Zadzwoń do nas</h3>
<p>Masz pytania? Chcesz zarezerwować stolik?</p>
<a href="tel:+48690214515">690 214 515</a>
</div>
</section>
<section id="kawiarnia-content">
<div>

77
wyroby.css
View file

@ -2,66 +2,37 @@
@import "wyroby_torty.css";
#wyroby {
padding-top: 2rem;
display: grid;
justify-content: center;
grid-template-columns: repeat(var(--grid-cols), 1fr);
width: 100%;
gap: 2rem;
& > header {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
& > p {
margin: 0;
}
& > * {
text-align: center;
max-width: 40rem;
}
& > nav {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
padding: 3rem;
}
& > .card {
width: 100%;
}
& > section {
padding-top: 1rem;
& > .card > div:last-child {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, 18rem);
width: 100%;
gap: 2rem;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
& > .card {
& > div:last-child {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
& > h3 {
font-size: 1.25rem;
}
& > h3 {
font-size: 1.25rem;
}
& > span {
color: var(--primary);
font-size: 1.25rem;
font-weight: bold;
justify-self: end;
}
& > span {
color: var(--primary);
font-size: 1.25rem;
font-weight: bold;
justify-self: end;
}
& > p {
grid-row: 2;
grid-column: 1/span 2;
text-color: var(--on-surface);
font-size: 0.875em;
}
}
& > p {
grid-row: 2;
grid-column: 1/span 2;
text-color: var(--on-surface);
font-size: 0.875em;
}
}
}

9
wyroby.html
View file

@ -22,8 +22,8 @@
<a class="btn">Kontakt</a>
</div>
</nav>
<main id="wyroby">
<header>
<main>
<header class="subnav">
<h1>Nasze słodkości</h1>
<p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
to
@ -35,7 +35,9 @@
<a class="btn-green" href="wyroby_lody.html">Lody</a>
</nav>
</header>
<section>
<section >
<div id="wyroby">
<div class="card">
<div>
<img alt="Malinowa chmurka" src="images/wyroby/001.jpg"/>
@ -179,6 +181,7 @@
<p></p>
</div>
</div>
</div>
</section>
</main>
<footer>

20
wyroby_torty.html
View file

@ -22,7 +22,7 @@
<a class="btn">Kontakt</a>
</div>
</nav>
<main id="wyroby">
<main>
<header>
<h1>Nasze słodkości</h1>
<p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
@ -35,7 +35,7 @@
<a class="btn-green" href="wyroby_lody.html">Lody</a>
</nav>
</header>
<section>
<section id="wyroby">
<div>
<h3>Torty z masą cukrową</h3>
<span>od 200 PLN</span>
@ -117,11 +117,17 @@
</section>
<section>
<h2>Torty Musowe</h2>
<div><h4>Karmel-jogurt-migdały</h4><p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
<div><h4>Mango-marakuja-truskawka</h4><p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
<div><h4>Czekolada-malina-jeżyna</h4><p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p></div>
<div><h4>Whisky-mango</h4><p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
<div><h4>Kawa-orzech ziemny</h4><p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
<div><h4>Karmel-jogurt-migdały</h4>
<p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
<div><h4>Mango-marakuja-truskawka</h4>
<p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
<div><h4>Czekolada-malina-jeżyna</h4>
<p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p>
</div>
<div><h4>Whisky-mango</h4>
<p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
<div><h4>Kawa-orzech ziemny</h4>
<p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
</section>
</main>
<footer>