refactor(website): split CSS

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;
+}

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;

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;
+}

apps/website3/src/components/Header.tsx

@@ -1,3 +1,4 @@
+import "./Header.css";
 import { useLocation } from 'preact-iso';
 import DownloadButton from './DownloadButton';
 

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;
+}

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 (

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 */