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

Refactor margin values for video-card, intro, and star-divider for improved layout consistency and responsiveness

Browse Source
This commit is contained in:
ben
2026-07-09 15:40:49 -07:00
parent 543a92eb9e
commit 5c038ef8d8
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+16 -11
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.2), transparent 23rem), radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.14), transparent 23rem),
radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.42), transparent 35rem), radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.22), transparent 35rem),
radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.38), transparent 34rem), radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.2), transparent 34rem),
radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.58), transparent 42rem), radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.32), transparent 42rem),
linear-gradient(180deg, #03000b 0%, #0d001b 26%, #260047 62%, #57008f 100%); linear-gradient(180deg, #020008 0%, #05000f 30%, #0c001c 64%, #17002b 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.22), transparent 28rem), radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.12), transparent 28rem),
radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem), radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.1), transparent 24rem),
radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem); radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.2), 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;
@@ -202,7 +202,7 @@ a {
.video-card { .video-card {
width: min(940px, 92vw); width: min(940px, 92vw);
margin: clamp(0.9rem, 2.4vw, 1.65rem) auto clamp(2.45rem, 4.2vw, 3.35rem); margin: clamp(0.9rem, 2.4vw, 1.65rem) auto 0;
padding: clamp(0.45rem, 1vw, 0.75rem); padding: clamp(0.45rem, 1vw, 0.75rem);
border: 1px solid var(--border-purple); border: 1px solid var(--border-purple);
border-radius: 24px; border-radius: 24px;
@@ -223,7 +223,7 @@ a {
.intro { .intro {
width: min(820px, 88vw); width: min(820px, 88vw);
margin: 0 auto; margin: clamp(3rem, 5vw, 4.5rem) 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(2.25rem, 4.2vw, 3.15rem) auto 0; margin: clamp(3rem, 5vw, 4.5rem) 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,11 +358,16 @@ a {
.intro { .intro {
width: min(34rem, 88vw); width: min(34rem, 88vw);
margin-top: clamp(2.4rem, 9vw, 3.2rem);
} }
.intro p { .intro p {
font-size: clamp(1.12rem, 5vw, 1.5rem); font-size: clamp(1.12rem, 5vw, 1.5rem);
} }
.star-divider {
margin-top: clamp(2.35rem, 9vw, 3.2rem);
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {