Add small changes to docs landing page (#46)

docs/astro.config.mjs

@@ -24,6 +24,10 @@ export default defineConfig({
 					],
 				},
 			],
+			customCss: [
+				'./src/styles/theme.css',
+				'./src/styles/landing.css'
+			]
 		}),
 	],
 });

docs/src/content/docs/index.mdx

@@ -1,11 +1,9 @@
 ---
-title: Supercharge your localization workflow
-head:
-  - tag: title
-    content: Lunaria 🌘 The missing localization management toolchain for open source
+title: Lunaria 🌘 The missing localization management toolchain for open source
 description: Supercharge your localization workflow.
 template: splash
 hero:
+  title: Supercharge your localization workflow
   tagline: Lunaria is the way to manage your OSS project's localization. Great for maintainers. Even better for contributors.
   actions:
     - text: Get started

docs/src/styles/landing.css

@@ -0,0 +1,31 @@
+:root {
+	--purple-hsl: 262, 78%, 55%;
+	--overlay-blurple: hsla(var(--purple-hsl), 0.2);
+}
+
+:root[data-theme='light'] {
+	--purple-hsl: 262, 80%, 56%;
+}
+
+[data-has-hero] .page {
+	background:
+		linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
+		radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
+		radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) /
+			60rem 30rem;
+}
+
+[data-has-hero] header {
+	border-bottom: 1px solid transparent;
+	background-color: transparent;
+	-webkit-backdrop-filter: blur(16px);
+	backdrop-filter: blur(16px);
+}
+
+[data-has-hero] header button[data-open-modal] {
+    display: none;
+}
+
+[data-has-hero] .hero > img {
+	filter: drop-shadow(0 0 3rem var(--overlay-blurple));
+}

docs/src/styles/theme.css

@@ -0,0 +1,29 @@
+/* Dark mode colors. */
+:root {
+	--sl-color-accent-low: #261a47;
+	--sl-color-accent: #7535e6;
+	--sl-color-accent-high: #c9bffa;
+	--sl-color-white: #ffffff;
+	--sl-color-gray-1: #eeeeee;
+	--sl-color-gray-2: #c2c2c2;
+	--sl-color-gray-3: #8b8b8b;
+	--sl-color-gray-4: #585858;
+	--sl-color-gray-5: #383838;
+	--sl-color-gray-6: #272727;
+	--sl-color-black: #181818;
+}
+/* Light mode colors. */
+:root[data-theme='light'] {
+	--sl-color-accent-low: #d7d0fd;
+	--sl-color-accent: #7737e9;
+	--sl-color-accent-high: #36206a;
+	--sl-color-white: #181818;
+	--sl-color-gray-1: #272727;
+	--sl-color-gray-2: #383838;
+	--sl-color-gray-3: #585858;
+	--sl-color-gray-4: #8b8b8b;
+	--sl-color-gray-5: #c2c2c2;
+	--sl-color-gray-6: #eeeeee;
+	--sl-color-gray-7: #f6f6f6;
+	--sl-color-black: #ffffff;
+}