melody/continuwuity
1
0
Fork 0
mirror of https://forgejo.ellis.link/continuwuation/continuwuity.git synced 2025-06-26 17:46:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Deal with low screen widths in CSS

Browse source
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
1 changed files with 64 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
src/web/css/index.css
View file

@ -1,68 +1,85 @@
:root { :root {
color-scheme: light; color-scheme: light;
--font-stack: sans-serif; --font-stack: sans-serif;
--background-color: #fff; --background-color: #fff;
--text-color: #000; --text-color: #000;
--bg: oklch(0.76 0.0854 317.27); --bg: oklch(0.76 0.0854 317.27);
--panel-bg: oklch(0.91 0.042 317.27); --panel-bg: oklch(0.91 0.042 317.27);
--name-lightness: 0.45; --name-lightness: 0.45;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color-scheme: dark; color-scheme: dark;
--text-color: #fff; --text-color: #fff;
--bg: oklch(0.15 0.042 317.27); --bg: oklch(0.15 0.042 317.27);
--panel-bg: oklch(0.24 0.03 317.27); --panel-bg: oklch(0.24 0.03 317.27);
--name-lightness: 0.8; --name-lightness: 0.8;
} }
--c1: oklch(0.44 0.177 353.06); --c1: oklch(0.44 0.177 353.06);
--c2: oklch(0.59 0.158 150.88); --c2: oklch(0.59 0.158 150.88);
--normal-font-size: 1rem; --normal-font-size: 1rem;
--small-font-size: 0.8rem; --small-font-size: 0.8rem;
} }
body { body {
color: var(--text-color); color: var(--text-color);
font-family: var(--font-stack); font-family: var(--font-stack);
margin: 0; margin: 0;
padding: 0; padding: 0;
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 100vh; min-height: 100vh;
} }
html { html {
background-color: var(--bg); background-color: var(--bg);
background-image: linear-gradient( background-image: linear-gradient(
70deg, 70deg,
oklch(from var(--bg) l + 0.2 c h), oklch(from var(--bg) l + 0.2 c h),
oklch(from var(--bg) l - 0.2 c h) oklch(from var(--bg) l - 0.2 c h)
); );
font-size: 16px; font-size: 16px;
} }
.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;
padding-block: 1rem; padding-block: 1rem;
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(
130deg, 130deg,
oklch(from var(--c1) var(--name-lightness) c h), oklch(from var(--c1) var(--name-lightness) c h),
oklch(from var(--c2) var(--name-lightness) c h) oklch(from var(--c2) var(--name-lightness) c h)
); );
background-clip: text; background-clip: text;
color: transparent; color: transparent;
filter: brightness(1.2); filter: brightness(1.2);
} }