mobile card

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

View file

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

View file

@ -44,6 +44,21 @@
overflow: hidden;
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 {
background-color: rgb(from var(--secondary-container) r g b / 0.3);
}
@ -51,6 +66,8 @@
& img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
scale: 1;
transition: scale 0.7s;
}

View file

@ -48,6 +48,28 @@ body > nav {
align-items: center;
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) {
gap: 1rem;
@ -66,24 +88,8 @@ body > nav {
flex-wrap: wrap;
& > 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;
white-space: nowrap;
}
font-size: 0.875rem;
white-space: nowrap;
}
}
}