ben/Squiggleverse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor background gradients and update margin values for intro and star-divider for improved layout and visual consistency

Browse Source
This commit is contained in:
ben
2026-07-09 15:49:33 -07:00
parent 5c038ef8d8
commit f2fb8fa98d
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+12 -12
View File
@@ -70,11 +70,11 @@ a {
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
background: background:
radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.14), transparent 23rem), radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.1), transparent 23rem),
radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.22), transparent 35rem), radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.13), transparent 35rem),
radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.2), transparent 34rem), radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.12), transparent 34rem),
radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.32), transparent 42rem), radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.18), transparent 42rem),
linear-gradient(180deg, #020008 0%, #05000f 30%, #0c001c 64%, #17002b 100%); linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 58%, #0d001d 82%, #020007 100%);
} }
.space-backdrop::before { .space-backdrop::before {
@@ -82,9 +82,9 @@ a {
position: absolute; position: absolute;
inset: -16svh -8vw; inset: -16svh -8vw;
background: background:
radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.12), transparent 28rem), radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.08), transparent 28rem),
radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.1), transparent 24rem), radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.07), transparent 24rem),
radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.2), transparent 35rem); radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.12), transparent 35rem);
filter: blur(18px); filter: blur(18px);
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
will-change: transform; will-change: transform;
@@ -223,7 +223,7 @@ a {
.intro { .intro {
width: min(820px, 88vw); width: min(820px, 88vw);
margin: clamp(3rem, 5vw, 4.5rem) auto 0; margin: clamp(4rem, 6vw, 5.75rem) auto 0;
text-align: center; text-align: center;
} }
@@ -240,7 +240,7 @@ a {
.star-divider { .star-divider {
width: min(24rem, 72vw); width: min(24rem, 72vw);
margin: clamp(3rem, 5vw, 4.5rem) auto 0; margin: clamp(3.75rem, 6vw, 5.25rem) auto 0;
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
@@ -358,7 +358,7 @@ a {
.intro { .intro {
width: min(34rem, 88vw); width: min(34rem, 88vw);
margin-top: clamp(2.4rem, 9vw, 3.2rem); margin-top: clamp(3.25rem, 11vw, 4.25rem);
} }
.intro p { .intro p {
@@ -366,7 +366,7 @@ a {
} }
.star-divider { .star-divider {
margin-top: clamp(2.35rem, 9vw, 3.2rem); margin-top: clamp(3rem, 10vw, 4rem);
} }
} }