From f5c26993fdc944a29fe8834e72566e5eadaa7da2 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 9 Jul 2026 09:35:03 -0700 Subject: [PATCH] Add Nunito font, update styles, and remove CTAButtons component --- package-lock.json | 11 +++ package.json | 1 + src/app.css | 132 +++++++++++++++------------ src/lib/components/CTAButtons.svelte | 4 - src/lib/components/IntroText.svelte | 5 + src/routes/+layout.svelte | 1 + src/routes/+page.svelte | 15 ++- 7 files changed, 102 insertions(+), 67 deletions(-) delete mode 100644 src/lib/components/CTAButtons.svelte diff --git a/package-lock.json b/package-lock.json index a1d0632..6f78c42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "squiggleverse", "version": "0.1.0", "devDependencies": { + "@fontsource/nunito": "^5.2.7", "@sveltejs/adapter-static": "^3.0.10", "@sveltejs/kit": "^2.69.2", "@sveltejs/vite-plugin-svelte": "^7.2.0", @@ -51,6 +52,16 @@ "tslib": "^2.4.0" } }, + "node_modules/@fontsource/nunito": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/nunito/-/nunito-5.2.7.tgz", + "integrity": "sha512-pmtBq0H9ex9nk+RtJYEJOD9pag393iHETnl/PVKleF4i06cd0ttngK5ZCTgYb5eOqR3Xdlrjtev8m7bmgYprew==", + "dev": true, + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", diff --git a/package.json b/package.json index 0b5be19..a399480 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "cookie": "0.7.2" }, "devDependencies": { + "@fontsource/nunito": "^5.2.7", "@sveltejs/adapter-static": "^3.0.10", "@sveltejs/kit": "^2.69.2", "@sveltejs/vite-plugin-svelte": "^7.2.0", diff --git a/src/app.css b/src/app.css index af5b129..17b01ce 100644 --- a/src/app.css +++ b/src/app.css @@ -8,6 +8,7 @@ --color-lavender: #f1e7ff; --color-white: #ffffff; --color-cyan-accent: #43d8ff; + --font-copy: Nunito, Lexend, ui-sans-serif, system-ui, sans-serif; --glow-purple: 0 0 32px rgba(159, 95, 255, 0.45); --border-purple: rgba(190, 143, 255, 0.42); font-family: @@ -50,14 +51,25 @@ a { .landing-page { min-height: 100svh; - overflow: hidden; + position: relative; + isolation: isolate; + overflow: clip; background: radial-gradient(circle at 50% 0%, rgba(181, 140, 255, 0.22), transparent 34rem), - linear-gradient(to bottom, rgba(7, 0, 20, 0.18), rgba(54, 0, 95, 0.38)), - url('/assets/squiggleverse-bg.webp'); - background-attachment: fixed; + linear-gradient(to bottom, rgba(7, 0, 20, 0.18), rgba(54, 0, 95, 0.38)); +} + +.landing-page::before { + content: ''; + position: absolute; + z-index: -1; + inset: -8svh 0; + background-image: url('/assets/squiggleverse-bg.webp'); background-position: center top; background-size: cover; + transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0) scale(1.08); + transform-origin: center top; + will-change: transform; } .hero { @@ -70,6 +82,24 @@ a { align-items: center; } +.site-footer { + position: relative; + width: min(1120px, 100%); + margin-inline: auto; + padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem); + text-align: center; +} + +.site-footer p { + margin: 0; + color: rgba(241, 231, 255, 0.74); + font-family: var(--font-copy); + font-size: clamp(0.85rem, 1.3vw, 1rem); + font-weight: 500; + letter-spacing: 0; + text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42); +} + .hero-logo { display: flex; justify-content: center; @@ -112,59 +142,50 @@ a { .intro p { margin: 0; color: var(--color-lavender); + font-family: var(--font-copy); font-size: clamp(1.2rem, 2.2vw, 2rem); + font-weight: 500; line-height: 1.45; letter-spacing: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); } -.cta-row { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.8rem; - margin-top: clamp(1.4rem, 3vw, 2rem); -} - -.button { - display: inline-flex; +.star-divider { + width: min(24rem, 72vw); + margin: clamp(1.45rem, 3vw, 2.1rem) auto 0; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: center; - min-height: 2.8rem; - padding: 0.78rem 1.15rem; - border: 1px solid transparent; - border-radius: 999px; - font-size: 1rem; - font-weight: 750; + gap: 1.1rem; + color: var(--color-purple-light); +} + +.star-divider span { + height: 2px; + background: linear-gradient(90deg, transparent, rgba(181, 140, 255, 0.9), transparent); + filter: drop-shadow(0 0 8px rgba(181, 140, 255, 0.7)); +} + +.star-divider strong { + font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1; - letter-spacing: 0; - text-decoration: none; - transition: - transform 160ms ease, - border-color 160ms ease, - background-color 160ms ease, - box-shadow 160ms ease; + font-weight: 900; + text-shadow: + 0 0 12px rgba(181, 140, 255, 0.9), + 0 0 28px rgba(159, 95, 255, 0.58); } -.button:hover { - transform: translateY(-1px); +.star-divider span:first-child { + background: linear-gradient(90deg, transparent, rgba(181, 140, 255, 0.9)); } -.button-primary { - color: #06121a; - background: var(--color-cyan-accent); - box-shadow: 0 0 24px rgba(67, 216, 255, 0.28); +.star-divider span:last-child { + background: linear-gradient(90deg, rgba(181, 140, 255, 0.9), transparent); } -.button-secondary { - color: var(--color-lavender); - border-color: rgba(241, 231, 255, 0.34); - background: rgba(10, 0, 28, 0.46); -} - -.button-secondary:hover { - border-color: rgba(241, 231, 255, 0.6); - background: rgba(42, 15, 86, 0.62); +:focus-visible { + outline: 3px solid var(--color-cyan-accent); + outline-offset: 4px; } .sr-only { @@ -180,11 +201,6 @@ a { border: 0; } -:focus-visible { - outline: 3px solid var(--color-cyan-accent); - outline-offset: 4px; -} - .error-page { min-height: 100svh; display: grid; @@ -201,8 +217,9 @@ a { } @media (max-width: 768px) { - .landing-page { - background-attachment: scroll; + .landing-page::before { + inset: -4svh 0; + transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0) scale(1.08); } .hero { @@ -231,16 +248,6 @@ a { } } -@media (max-width: 440px) { - .cta-row { - width: min(19rem, 92vw); - } - - .button { - width: 100%; - } -} - @media (prefers-reduced-motion: reduce) { *, *::before, @@ -250,4 +257,9 @@ a { scroll-behavior: auto !important; transition-duration: 0.001ms !important; } + + .landing-page::before { + transform: none; + will-change: auto; + } } diff --git a/src/lib/components/CTAButtons.svelte b/src/lib/components/CTAButtons.svelte deleted file mode 100644 index d2d515b..0000000 --- a/src/lib/components/CTAButtons.svelte +++ /dev/null @@ -1,4 +0,0 @@ -
- Watch Demo - Contact Us -
diff --git a/src/lib/components/IntroText.svelte b/src/lib/components/IntroText.svelte index 3f997e6..f094519 100644 --- a/src/lib/components/IntroText.svelte +++ b/src/lib/components/IntroText.svelte @@ -5,4 +5,9 @@ grammar, usage, and style through innovative gameplay, whimsical characters, and creative narratives co-authored by the player.

+ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5d83456..9c43a94 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,5 @@ `} -
+ + +

Squiggleverse

-
+ +