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

mobile card

Browse source
This commit is contained in:
bronku 2026-06-09 19:09:02 +02:00
parent 94bc964e34
commit 8a9217fbba
3 changed files with 42 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
css/base.css
View file

@ -97,6 +97,7 @@ p {
body > nav, body > nav,
body > footer, body > footer,
body > main > * { body > main > * {
box-sizing: border-box;
padding: 8rem 2rem; padding: 8rem 2rem;
& > div:only-child, & > div:only-child,

17
css/components.css
View file

@ -44,6 +44,21 @@
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
@media (max-width: 768px) {
flex-direction: row;
align-items: stretch;
& > div:first-child {
width: 120px;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
& > div:last-child {
padding: 1rem;
}
}
.greener { .greener {
background-color: rgb(from var(--secondary-container) r g b / 0.3); background-color: rgb(from var(--secondary-container) r g b / 0.3);
} }
@ -51,6 +66,8 @@
& img { & img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%;
object-fit: cover;
scale: 1; scale: 1;
transition: scale 0.7s; transition: scale 0.7s;
} }

38
css/layout.css
View file

@ -48,6 +48,28 @@ body > nav {
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
& > a {
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
color: var(--on-background);
&[href] {
font-weight: 200;
transition: color 0.2s;
&:hover {
color: var(--primary);
}
}
&:not([href]) {
padding-bottom: 8px;
color: var(--primary);
border-bottom: 2px solid var(--primary);
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
gap: 1rem; gap: 1rem;
@ -66,28 +88,12 @@ body > nav {
flex-wrap: wrap; flex-wrap: wrap;
& > a { & > a {
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
color: var(--on-background);
&[href] {
font-weight: 200;
transition: color 0.2s;
&:hover {
color: var(--primary);
}
}
@media (max-width: 768px) {
font-size: 0.875rem; font-size: 0.875rem;
white-space: nowrap; white-space: nowrap;
} }
} }
} }
} }
}
footer { footer {
display: grid; display: grid;