include rice source code

src/components/marquee/Marquee.astro

@@ -4,10 +4,12 @@ import { Icon } from "astro-icon/components";
 const videos = [
   {
     author: '<a href="https://github.com/soramanew">soramane</a>',
+    source: "https://github.com/caelestia-dots/shell",
     path: "/assets/showcase/soramane.mp4",
   },
   {
     author: '<a href="https://outfoxxed.me">outfoxxed</a>',
+    source: "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
     path: "/assets/showcase/outfoxxed.mp4",
   },
   {
@@ -20,6 +22,7 @@ const videos = [
   },
   {
     author: '<a href="https://github.com/flickowoa">flicko</a>',
+    source: "https://github.com/flickowoa/zephyr",
     path: "/assets/showcase/flicko.mp4",
   },
 ];
@@ -34,7 +37,7 @@ const videos = [
     </div>
   </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
-    {videos.map(({ author, path }, index) => <div class="marquee-item">
+    {videos.map(({ author, source, path }, index) => <div class="marquee-item">
       <div>
         <video
           data-media-index={index}
@@ -47,7 +50,10 @@ const videos = [
         >
           <source src={path} type="video/mp4"/>
         </video>
-        <p>Configuration by <Fragment set:html={author}/></p>
+        <p>
+          Configuration by <Fragment set:html={author}/>
+          {source ? <Fragment>(<a href={source}>source code</a>)</Fragment> : null}
+        </p>
       </div>
     </div>)}
   </div>

src/pages/index.astro

@@ -13,23 +13,25 @@ const title = "Quickshell";
       <h2>building blocks for your desktop</h2>
     </section>
     <Marquee/>
-    <section class="main-page_links">
+    <section class="about">
-      <section class="main-page_links_set">
+      <div class="about-txt">
+        <p>
+          Quickshell is a toolkit for building status bars, widgets, lockscreens,
+          and other desktop components using QtQuick. It can be used alongside your
+          wayland compositor or window manager to build a complete desktop environment.
+          <br class="about-break">
+          <br class="about-break">
+          <a href="/docs/about">More information</a>
+        </p>
+      </div>
+      <div class="about-buttons">
         <a href="/docs/guide/install-setup" class="main-page_link-card">
           <h3>Install</h3>
         </a>
-        <a href="/docs/types" class="main-page_link-card">
+        <a href="/docs/types" class="main-page_link-card main-page_bluecard">
           <h3>Documentation</h3>
         </a>
-      </section>
+      </div>
-      <section class="main-page_links_set">
-        <a href="https://git.outfoxxed.me/quickshell/quickshell-examples" class="main-page_link-card main-page_bluecard">
-          <h3>Examples</h3>
-        </a>
-        <a href="https://git.outfoxxed.me/quickshell/quickshell" class="main-page_link-card main-page_bluecard">
-          <h3>Source Code</h3>
-        </a>
-      </section>
     </section>
     <section class="featurelist-section">
       <FeatureList/>

src/styles/main-page.css

@@ -64,6 +64,27 @@ html.dark .main-page_hero-text {
   }
 }
 
+.about {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding-inline: 0.5rem;
+  gap: 0.5rem;
+}
+
+.about-txt {
+  font-size: 1.1rem;
+}
+
+.about-break { display: none }
+
+.about-buttons {
+  display: flex;
+  gap: 0.5rem;
+  min-width: 15rem;
+}
+
 .main-page_links {
   display: flex;
   flex-direction: row;
@@ -123,55 +144,6 @@ html.dark .main-page_hero-text {
   }
 }
 
-/*html.dark .main-page_link-card {
-  background-color: transparent;
-  border-color: transparent;
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    filter: blur(1.5rem) saturate(150%);
-    transition: filter 0.3s;
-    z-index: 1;
-  }
-
-  &::before {
-    background: linear-gradient(
-      115deg,
-      hsla(var(--green) 20 15 / 0.7) 25%,
-      hsla(var(--green) 25 25 / 0.8) 50%,
-      hsla(var(--green) 60 60 / 0.6) 80%
-    );
-  }
-
-  &:hover {
-    &::before {
-      filter: blur(0.9rem) saturate(200%);
-    }
-  }
-
-  &.main-page_bluecard {
-    background-color: transparent;
-    border-color: transparent;
-
-    &::before {
-      background: linear-gradient(
-        115deg,
-        hsla(var(--blue) 10 15 / 0.7) 25%,
-        hsla(var(--blue) 15 25 / 0.8) 50%,
-        hsla(var(--blue) 60 60 / 0.6) 80%
-      );
-    }
-
-    &:hover {
-      &::before {
-        filter: blur(0.9rem) saturate(200%);
-      }
-    }
-  }
-}*/
-
 html.dark .main-page_link-card {
   background-color: hsl(var(--green) 38% 25%);
   color: hsl(194deg 0% 100%);
@@ -201,6 +173,10 @@ html.dark .main-page_link-card {
   .main-page_links_set {
     flex-wrap: nowrap;
   }
+
+  .about-buttons {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 63rem) {
@@ -213,4 +189,15 @@ html.dark .main-page_link-card {
     max-width: 78rem;
     padding-inline: 1.5rem;
   }
+
+  .about {
+    flex-wrap: nowrap;
+    max-width: 78rem;
+    padding-inline: 1.5rem;
+    flex-direction: row;
+  }
+
+  .about-txt { max-width: 70% }
+  .about-break { display: unset }
+  .about-buttons { flex-direction: column }
 }