🔧 Make landing page look okish in light mode

Author: Schneegans

src/components/Hero.astro

@@ -91,7 +91,7 @@ if (image) {
   .image {
     width: 100%;
     aspect-ratio: 1 / 1;
-    margin-top: -30%;
+    margin-top: -25%;
     margin-bottom: -30%;
     background: url(../assets/planet.webp) center center;
     background-size: contain;

src/content/docs/index.mdx

@@ -7,7 +7,7 @@ hero:
   image:
     file: ../../assets/planet.webp
   actions:
-    - text: Get started
+    - text: Read the Documentation
       link: /getting-started/intro/
       icon: right-arrow
     - text: Download from GitHub

src/styles/custom.css

@@ -41,12 +41,17 @@
 }
 
 :root[data-theme='light'] header {
-    background-color: #ffffffc5;
+    background-image: linear-gradient(to left rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
 }
 
 [data-has-hero] body {
     background-image: url('../assets/bg.webp');
     background-size: cover;
     background-position: 50% 50%;
 
+    /* Increase the brightness of the dim text in the footer of the landing page. */
+    --sl-color-gray-1: #aaa;
+    --sl-color-gray-2: #bbb;
+    --sl-color-gray-3: #888;
+    --sl-color-white: #fff;
 }