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

45
css/swieta.css
View file

@ -3,6 +3,16 @@
--swieta-gold: oklch(75% .12 80);
--swieta-red: oklch(45% .15 25);
--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 {
@ -12,7 +22,7 @@
box-sizing: border-box;
& > * {
padding: 2rem;
padding: var(--swieta-pad);
}
& .card:hover{
transform:none;
@ -21,9 +31,12 @@
& p, & h1 {
color: white;
}
padding: 4rem 2rem ;
padding: 4rem var(--swieta-pad);
@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);
margin: 0 auto;
@ -32,7 +45,7 @@
color: var(--swieta-gold);
}
& > div {
padding: 2rem;
padding: var(--swieta-card-pad);
display: flex;
flex-direction: column;
align-items: center;
@ -48,6 +61,9 @@
& > section:has(#wyroby) {
& h2 {
margin-bottom: 2rem;
@media (max-width: 768px) {
margin-bottom: 1rem;
}
}
}
@ -69,7 +85,7 @@
border-radius: 0;
& > :last-child {
padding: 1rem 2rem;
padding: .75rem var(--swieta-card-pad);
}
&:not(:last-child) {
@ -111,13 +127,13 @@
& #additional-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
gap: var(--swieta-pad);
@media (max-width: 768px) {
grid-template-columns: 1fr ;
}
& > div {
box-sizing: border-box;
padding: 2rem;
padding: var(--swieta-card-pad);
display: flex;
flex-direction:column;
align-items: center;
@ -147,7 +163,7 @@
margin: 0 auto;
& > div {
padding: 2rem;
padding: var(--swieta-card-pad);
border-radius: var(--border-radius);
background-color: var(--secondary-container);
& > p, & > h2{
@ -157,9 +173,12 @@
min-width: 0;
display: grid;
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) {
grid-template-columns: minmax(0, 1fr)
grid-template-columns: minmax(0, 1fr);
}
& > fieldset {
grid-column: -1 / 1;
@ -191,6 +210,9 @@
display: grid;
place-items: center;
margin: 0.5rem;
@media (max-width: 768px) {
margin: .25rem;
}
width: 2rem;
height: 2rem;
padding: 0.5rem;
@ -209,6 +231,9 @@
}
& > * {
padding: 1rem;
@media (max-width: 768px) {
padding: .75rem;
}
border-radius: var(--small-radius);
border: 1px solid var(--border-color);
}