From 4eff105af5bc1e0360b3f29ea0e697829304360e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 26 Sep 2025 23:32:09 +0300 Subject: [PATCH] refactor(website): split CSS --- .../src/components/DownloadButton.css | 19 ++ .../src/components/DownloadButton.tsx | 2 +- apps/website3/src/components/Header.css | 35 ++++ apps/website3/src/components/Header.tsx | 1 + apps/website3/src/pages/Home/index.css | 100 +++++++++++ apps/website3/src/pages/Home/index.tsx | 1 + apps/website3/src/style.css | 167 ------------------ 7 files changed, 157 insertions(+), 168 deletions(-) create mode 100644 apps/website3/src/components/DownloadButton.css create mode 100644 apps/website3/src/components/Header.css create mode 100644 apps/website3/src/pages/Home/index.css diff --git a/apps/website3/src/components/DownloadButton.css b/apps/website3/src/components/DownloadButton.css new file mode 100644 index 000000000..ed3dbe401 --- /dev/null +++ b/apps/website3/src/components/DownloadButton.css @@ -0,0 +1,19 @@ +.download-button { + text-decoration: none; + background: var(--brand-1); + padding: 0.5em 1em; + border-radius: 6px; + color: white; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + display: inline-block; +} + +.download-button .platform { + font-size: 0.75em; + opacity: 0.75; +} + +.download-button.big { + padding: 1em 2em; + margin: 1em 0; +} \ No newline at end of file diff --git a/apps/website3/src/components/DownloadButton.tsx b/apps/website3/src/components/DownloadButton.tsx index 38edec974..0c19c7d55 100644 --- a/apps/website3/src/components/DownloadButton.tsx +++ b/apps/website3/src/components/DownloadButton.tsx @@ -1,5 +1,5 @@ -import { useLayoutEffect } from "preact/hooks"; import { getRecommendedDownload } from "../download-helper"; +import "./DownloadButton.css"; interface DownloadButtonProps { big?: boolean; diff --git a/apps/website3/src/components/Header.css b/apps/website3/src/components/Header.css new file mode 100644 index 000000000..2cb93fd4b --- /dev/null +++ b/apps/website3/src/components/Header.css @@ -0,0 +1,35 @@ +header { + padding: 1em; + position: sticky; + top: 0; + background: rgba(255, 255, 255, 0.75); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + z-index: 1000; +} + +header .content-wrapper { + display: flex; + align-items: center; + justify-items: center; +} + +header > .content-wrapper, +section.hero-section > .content-wrapper { + min-width: 80vw; +} + +header img { + width: 48px; + height: 48px; +} + +header img+span { + font-size: 1.1em; +} + +header nav { + flex-grow: 1; + display: flex; + justify-content: flex-end; +} \ No newline at end of file diff --git a/apps/website3/src/components/Header.tsx b/apps/website3/src/components/Header.tsx index f6eb0598c..86c364732 100644 --- a/apps/website3/src/components/Header.tsx +++ b/apps/website3/src/components/Header.tsx @@ -1,3 +1,4 @@ +import "./Header.css"; import { useLocation } from 'preact-iso'; import DownloadButton from './DownloadButton'; diff --git a/apps/website3/src/pages/Home/index.css b/apps/website3/src/pages/Home/index.css new file mode 100644 index 000000000..221f01fac --- /dev/null +++ b/apps/website3/src/pages/Home/index.css @@ -0,0 +1,100 @@ +section.hero-section { + position: relative; + background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end)); +} + +section.hero-section.dark { + color: var(--text-on-dark); + background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24); +} + +/* Extra colored spots */ +section.hero-section::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: + radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%), + radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%), + radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%), + radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%), + radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%); +} + +section.hero-section.dark::before { + background: + radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%), + radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%), + radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%), + radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%); +} + +/* Soft vignette for focus */ +section.hero-section::after { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%); + pointer-events: none; +} + +/* Optional subtle noise for depth */ +section.hero-section.dark::after { + content: ""; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + opacity: 0.04; + pointer-events: none; +} + +section.hero-section > .content-wrapper { + display: flex; + padding: 3em; + align-items: center; + justify-content: center; + min-height: 60vh; +} + +section.hero-section .title-section { + flex-basis: 40%; +} + +section.hero-section .title-section h1 { + line-height: 1.1; + font-weight: 100; +} + +section.hero-section .image, +section.hero-section .image img { + width: 100%; + height: auto; + position: relative; +} + +section:nth-of-type(2n+1) { + background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08)); +} + +.benefits-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1em; +} + +.benefits-container .card { + padding: 1em; +} + +.note-types-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1em; +} + +.collections-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1em; +} \ No newline at end of file diff --git a/apps/website3/src/pages/Home/index.tsx b/apps/website3/src/pages/Home/index.tsx index 85bee33a6..288771d70 100644 --- a/apps/website3/src/pages/Home/index.tsx +++ b/apps/website3/src/pages/Home/index.tsx @@ -2,6 +2,7 @@ import { ComponentChildren } from 'preact'; import Card from '../../components/Card'; import Section from '../../components/Section'; import DownloadButton from '../../components/DownloadButton'; +import "./index.css"; export function Home() { return ( diff --git a/apps/website3/src/style.css b/apps/website3/src/style.css index 44bba077a..e55c0c3c3 100644 --- a/apps/website3/src/style.css +++ b/apps/website3/src/style.css @@ -24,44 +24,6 @@ a { color: var(--brand-3); } -/* #region Header */ -header { - padding: 1em; - position: sticky; - top: 0; - background: rgba(255, 255, 255, 0.75); - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(20px); - z-index: 1000; -} - -header .content-wrapper { - display: flex; - align-items: center; - justify-items: center; -} - -header > .content-wrapper, -section.hero-section > .content-wrapper { - min-width: 80vw; -} - -header img { - width: 48px; - height: 48px; -} - -header img+span { - font-size: 1.1em; -} - -header nav { - flex-grow: 1; - display: flex; - justify-content: flex-end; -} -/* #endregion */ - .content-wrapper { max-width: 1200px; margin: auto; @@ -78,113 +40,6 @@ section h2 { margin-bottom: 2em; } -section.hero-section { - position: relative; - background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end)); -} - -section.hero-section.dark { - color: var(--text-on-dark); - background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24); -} - -/* Extra colored spots */ -section.hero-section::before { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - background: - radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%), - radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%), - radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%), - radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%), - radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%); -} - -section.hero-section.dark::before { - background: - radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%), - radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%), - radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%), - radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%); -} - -/* Soft vignette for focus */ -section.hero-section::after { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%); - pointer-events: none; -} - -/* Optional subtle noise for depth */ -section.hero-section.dark::after { - content: ""; - position: absolute; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); - opacity: 0.04; - pointer-events: none; -} - -section.hero-section > .content-wrapper { - display: flex; - padding: 3em; - align-items: center; - justify-content: center; - min-height: 60vh; -} - -section.hero-section .title-section { - flex-basis: 40%; -} - -section.hero-section .title-section h1 { - line-height: 1.1; - font-weight: 100; -} - -section.hero-section .image, -section.hero-section .image img { - width: 100%; - height: auto; - position: relative; -} - -section:nth-of-type(2n+1) { - background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08)); -} - -.benefits-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1em; -} - -.benefits-container .card { - padding: 1em; -} - -.note-types-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1em; -} - -.collections-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1em; -} - -.columns-2>div { - flex: 50%; - flex-shrink: 0; - flex-grow: 0; -} - img { width: 100%; height: auto; @@ -212,25 +67,3 @@ footer { span.text-big { font-size: 1.25em; } - -/* #region Download button */ -.download-button { - text-decoration: none; - background: var(--brand-1); - padding: 0.5em 1em; - border-radius: 6px; - color: white; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); - display: inline-block; -} - -.download-button .platform { - font-size: 0.75em; - opacity: 0.75; -} - -.download-button.big { - padding: 1em 2em; - margin: 1em 0; -} -/* #endregion */ \ No newline at end of file