ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: dotted bg for whole page

Browse source
This commit is contained in:
ayo 2026-06-08 11:15:21 +02:00
parent fb93eb7574
commit bd65162c70
2 changed files with 8 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/layouts/Layout.astro
View file

@ -51,9 +51,7 @@ const ogFileType = 'image/png'
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--text-color-dark); color: var(--text-color-dark);
background-color: var(--text-color-light); background-color: var(--text-color-light);
}
body {
background-image: radial-gradient( background-image: radial-gradient(
circle, circle,
hsl(var(--dot-grid-light)) 1px, hsl(var(--dot-grid-light)) 1px,
@ -61,22 +59,20 @@ const ogFileType = 'image/png'
); );
background-size: 24px 24px; background-size: 24px 24px;
background-position: -24px -24px; background-position: -24px -24px;
@media (prefers-color-scheme: dark) {
background-image: radial-gradient(
circle,
hsl(var(--dot-grid-dark)) 1px,
transparent 1px
);
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, html,
body, body,
* { * {
background: var(--bg-darker); background-color: var(--bg-darker);
color: var(--text-color-light); color: var(--text-color-light);
background-image: radial-gradient(
circle,
hsl(var(--dot-grid-dark)) 1px,
transparent 1px
);
} }
} }

2
src/layouts/variables.css
View file

@ -28,5 +28,5 @@
--bg-darkest: #000; --bg-darkest: #000;
--dot-grid-light: 214 32% 82%; --dot-grid-light: 214 32% 82%;
--dot-grid-dark: 215 25% 20%; --dot-grid-dark: 215 25% 25%;
} }