From bf3f86372e313fb781cc95ac74db8efe26d752f4 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Sun, 8 Jun 2025 05:50:28 -0700
Subject: [PATCH] revise button grid

---
 src/pages/index.astro    | 26 ++++++------
 src/styles/main-page.css | 85 +++++++++++++++++-----------------------
 2 files changed, 50 insertions(+), 61 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index e03297e..e82f181 100644
--- a/src/pages/index.astro
+++ b/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="main-page_links_set">
+    <section class="about">
+      <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>
-      <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>
+      </div>
     </section>
     <section class="featurelist-section">
       <FeatureList/>
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 564e337..8e89a99 100644
--- a/src/styles/main-page.css
+++ b/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 }
 }