feat: Deal with low screen widths in CSS

This commit is contained in:
Jade Ellis 2025-05-21 02:54:03 +01:00
parent 9b8b37f162
commit 5bae8b4f6c
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2

View file

@ -47,7 +47,7 @@ html {
} }
.panel { .panel {
width: min(clamp(24rem, 12rem + 40vw, 48rem), 100vw); width: min(clamp(24rem, 12rem + 40vw, 48rem), calc(100vw - 3rem));
border-radius: 15px; border-radius: 15px;
background-color: var(--panel-bg); background-color: var(--panel-bg);
padding-inline: 1.5rem; padding-inline: 1.5rem;
@ -55,6 +55,23 @@ html {
box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1); box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
} }
@media (max-width: 24rem) {
.panel {
padding-inline: 0.25rem;
width: calc(100vw - 0.5rem);
border-radius: 0;
margin-block-start: 0.2rem;
}
main {
height: 100%;
}
}
footer {
padding-inline: 0.25rem;
height: max(fit-content, 2rem);
}
.project-name { .project-name {
text-decoration: none; text-decoration: none;
background: linear-gradient( background: linear-gradient(