joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

some subtle color helps a lot

Browse source
This commit is contained in:
Joshua Seigler 2025-06-03 14:26:19 -04:00
parent 31ad3ee1ea
commit 33b4dae9ff
2 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/noise.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

27
assets/site.css
View file

@ -38,6 +38,10 @@ body {
--s5: calc(var(--s4) * var(--ratio)); --s5: calc(var(--s4) * var(--ratio));
--content-width: clamp(75vw, 40rem, 100vw - 3rem); --content-width: clamp(75vw, 40rem, 100vw - 3rem);
--inset: calc(50vw - var(--content-width) / 2); --inset: calc(50vw - var(--content-width) / 2);
background-image:
radial-gradient(circle at -20% -20vmin, #00f2, transparent 60%),
radial-gradient(circle at 120% calc(100% - 20vmin), #0873, transparent 60%),
url(/noise.png);
} }
body[data-theme="dark"] { body[data-theme="dark"] {
@ -55,7 +59,6 @@ body[data-theme="dark"] {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body[data-theme="auto"] { body[data-theme="auto"] {
background-color: var(--c-body-background); background-color: var(--c-body-background);
} }
@ -139,7 +142,11 @@ section {
margin: 4rem -1rem -4rem; margin: 4rem -1rem -4rem;
height: 4.1rem; height: 4.1rem;
border: none; border: none;
background-image: radial-gradient(ellipse farthest-side at 50% 0%, var(--c-highlight), transparent); background-image: radial-gradient(
ellipse farthest-side at 50% 0%,
var(--c-highlight),
transparent
);
opacity: 0.5; opacity: 0.5;
} }
@ -188,14 +195,18 @@ blockquote {
padding: 0 1em; padding: 0 1em;
border-left: 1px solid var(--c-accent); border-left: 1px solid var(--c-accent);
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: -0.5lh; top: -0.5lh;
bottom: -0.5lh; bottom: -0.5lh;
left: -0.1em; left: -0.1em;
width: 10rem; width: 10rem;
background: radial-gradient(ellipse farthest-side at 0% 50%, var(--c-highlight), transparent); background: radial-gradient(
ellipse farthest-side at 0% 50%,
var(--c-highlight),
transparent
);
opacity: 0.5; opacity: 0.5;
} }
} }
@ -316,7 +327,7 @@ h4 {
} }
&::after { &::after {
opacity: 0.5; opacity: 0.5;
content: ''; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
bottom: 0; bottom: 0;
@ -325,7 +336,11 @@ h4 {
width: 30rem; width: 30rem;
max-width: 100%; max-width: 100%;
/* outline: 1px solid red; */ /* outline: 1px solid red; */
background: radial-gradient(ellipse farthest-side at 50% 100%, var(--c-highlight), transparent); background: radial-gradient(
ellipse farthest-side at 50% 100%,
var(--c-highlight),
transparent
);
} }
} }
main { main {