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

mobile padding

Browse source
This commit is contained in:
bronku 2026-11-08 16:25:09 +01:00
parent 3d817ef503
commit 2a4110ee8c
1 changed files with 35 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

43
css/swieta.css
View file

@ -3,6 +3,16 @@
--swieta-gold: oklch(75% .12 80); --swieta-gold: oklch(75% .12 80);
--swieta-red: oklch(45% .15 25); --swieta-red: oklch(45% .15 25);
--border-color: color-mix(in oklab, var(--swieta-green) 25%, transparent); --border-color: color-mix(in oklab, var(--swieta-green) 25%, transparent);
--swieta-pad: 2rem; /* outer: section padding, gaps between cards */
--swieta-card-pad: 2rem; /* inner: padding inside cards and boxes */
}
@media (max-width: 768px) {
:root {
--swieta-pad: 1rem;
--swieta-card-pad: 1.25rem;
}
} }
#swieta { #swieta {
@ -12,7 +22,7 @@
box-sizing: border-box; box-sizing: border-box;
& > * { & > * {
padding: 2rem; padding: var(--swieta-pad);
} }
& .card:hover{ & .card:hover{
transform:none; transform:none;
@ -21,9 +31,12 @@
& p, & h1 { & p, & h1 {
color: white; color: white;
} }
padding: 4rem 2rem ; padding: 4rem var(--swieta-pad);
@media (max-width: 1024px) { @media (max-width: 1024px) {
padding: 2rem 2rem ; padding: 2rem var(--swieta-pad);
}
@media (max-width: 768px) {
padding: 1rem var(--swieta-pad);
} }
max-width: var(--max-content-width); max-width: var(--max-content-width);
margin: 0 auto; margin: 0 auto;
@ -32,7 +45,7 @@
color: var(--swieta-gold); color: var(--swieta-gold);
} }
& > div { & > div {
padding: 2rem; padding: var(--swieta-card-pad);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -48,6 +61,9 @@
& > section:has(#wyroby) { & > section:has(#wyroby) {
& h2 { & h2 {
margin-bottom: 2rem; margin-bottom: 2rem;
@media (max-width: 768px) {
margin-bottom: 1rem;
}
} }
} }
@ -69,7 +85,7 @@
border-radius: 0; border-radius: 0;
& > :last-child { & > :last-child {
padding: 1rem 2rem; padding: .75rem var(--swieta-card-pad);
} }
&:not(:last-child) { &:not(:last-child) {
@ -111,13 +127,13 @@
& #additional-info { & #additional-info {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 2rem; gap: var(--swieta-pad);
@media (max-width: 768px) { @media (max-width: 768px) {
grid-template-columns: 1fr ; grid-template-columns: 1fr ;
} }
& > div { & > div {
box-sizing: border-box; box-sizing: border-box;
padding: 2rem; padding: var(--swieta-card-pad);
display: flex; display: flex;
flex-direction:column; flex-direction:column;
align-items: center; align-items: center;
@ -147,7 +163,7 @@
margin: 0 auto; margin: 0 auto;
& > div { & > div {
padding: 2rem; padding: var(--swieta-card-pad);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--secondary-container); background-color: var(--secondary-container);
& > p, & > h2{ & > p, & > h2{
@ -158,8 +174,11 @@
display: grid; display: grid;
gap: 1rem; gap: 1rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@media (max-width: 768px) {
gap: .75rem;
}
@media (max-width: 720px) { @media (max-width: 720px) {
grid-template-columns: minmax(0, 1fr) grid-template-columns: minmax(0, 1fr);
} }
& > fieldset { & > fieldset {
grid-column: -1 / 1; grid-column: -1 / 1;
@ -191,6 +210,9 @@
display: grid; display: grid;
place-items: center; place-items: center;
margin: 0.5rem; margin: 0.5rem;
@media (max-width: 768px) {
margin: .25rem;
}
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
padding: 0.5rem; padding: 0.5rem;
@ -209,6 +231,9 @@
} }
& > * { & > * {
padding: 1rem; padding: 1rem;
@media (max-width: 768px) {
padding: .75rem;
}
border-radius: var(--small-radius); border-radius: var(--small-radius);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }