From 791ffd16fb74f0b4d295fc471cadb2d5eb094eb2 Mon Sep 17 00:00:00 2001
From: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
Date: Tue, 7 Nov 2023 08:54:47 -0300
Subject: [PATCH] Add small changes to docs landing page (#46)

---
 docs/astro.config.mjs           |  4 ++++
 docs/src/content/docs/index.mdx |  6 ++----
 docs/src/styles/landing.css     | 31 +++++++++++++++++++++++++++++++
 docs/src/styles/theme.css       | 29 +++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/styles/landing.css
 create mode 100644 docs/src/styles/theme.css

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 869e225..c64096e 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -24,6 +24,10 @@ export default defineConfig({
 					],
 				},
 			],
+			customCss: [
+				'./src/styles/theme.css',
+				'./src/styles/landing.css'
+			]
 		}),
 	],
 });
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index a227845..13fa418 100644
--- a/docs/src/content/docs/index.mdx
+++ b/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
diff --git a/docs/src/styles/landing.css b/docs/src/styles/landing.css
new file mode 100644
index 0000000..10e1b82
--- /dev/null
+++ b/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));
+}
diff --git a/docs/src/styles/theme.css b/docs/src/styles/theme.css
new file mode 100644
index 0000000..0705383
--- /dev/null
+++ b/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;
+}
\ No newline at end of file