diff --git a/assets/noise.png b/assets/noise.png new file mode 100644 index 0000000..113c016 Binary files /dev/null and b/assets/noise.png differ diff --git a/assets/site.css b/assets/site.css index eec4ad9..d18415f 100644 --- a/assets/site.css +++ b/assets/site.css @@ -38,6 +38,10 @@ body { --s5: calc(var(--s4) * var(--ratio)); --content-width: clamp(75vw, 40rem, 100vw - 3rem); --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"] { @@ -55,7 +59,6 @@ body[data-theme="dark"] { } @media (prefers-color-scheme: dark) { - body[data-theme="auto"] { background-color: var(--c-body-background); } @@ -139,7 +142,11 @@ section { margin: 4rem -1rem -4rem; height: 4.1rem; 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; } @@ -188,14 +195,18 @@ blockquote { padding: 0 1em; border-left: 1px solid var(--c-accent); &::after { - content: ''; + content: ""; position: absolute; z-index: -1; top: -0.5lh; bottom: -0.5lh; left: -0.1em; 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; } } @@ -316,7 +327,7 @@ h4 { } &::after { opacity: 0.5; - content: ''; + content: ""; position: absolute; z-index: -1; bottom: 0; @@ -325,7 +336,11 @@ h4 { width: 30rem; max-width: 100%; /* 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 {