mirror of
https://forgejo.ellis.link/continuwuation/continuwuity.git
synced 2025-06-27 00:56:36 +02:00
feat: Deal with low screen widths in CSS
This commit is contained in:
parent
9b8b37f162
commit
5bae8b4f6c
1 changed files with 64 additions and 47 deletions
|
@ -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(
|
||||||
|
|
Loading…
Add table
Reference in a new issue