frontpage work

src/components/featurelist/FeatureList.astro

@@ -26,18 +26,23 @@ const codeHTML = await processMarkdown(codeString);
   <li class="featurelist-item hot-reloading left">
     <section class="feature-text">
       <h3 class="feature-title">See your changes in real time</h3>
-      <span class="feature-subtitle">Quickshell loads changes as soon as they're saved; you can iterate as fast as you can type.</span>
+      <span class="feature-subtitle">
+        Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type.
+      </span>
     </section>
     <section class="feature-showcase">
-      <span>
+      <video class="feature-video" style="height: 21rem" preload="metadata" controls>
-        hot reloading video
+        <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
-      </span>
+      </video>
     </section>
   </li>
   <li class="featurelist-item qml right">
     <section class="feature-text">
       <h3 class="feature-title">Easy to use language</h3>
-      <span class="feature-subtitle">Quickshell is configured in QML, a language that reacts to changes as they happen.</span>
+      <span class="feature-subtitle">
+        Quickshell is configured in QML, a simple language designed for creating flexible user interfaces.
+        It also has LSP support.
+      </span>
     </section>
     <section class="feature-showcase" id="qml-showcase">
       <Fragment set:html={codeHTML}/>
@@ -45,11 +50,13 @@ const codeHTML = await processMarkdown(codeString);
   </li>
   <li class="featurelist-item cloud left">
     <section class="feature-text">
-      <h3 class="feature-title">Fully featured</h3>
+      <h3 class="feature-title">Extensive integrations</h3>
-      <span class="feature-subtitle">Everything you need to build your desktop, right out of the box.</span>
+      <span class="feature-subtitle">
+        Quickshell comes with a large set of integrations, with new ones arriving all the time.
+      </span>
     </section>
     <section class="feature-showcase">
-      <span>tag cloud</span>
+      <span>image</span>
     </section>
   </li>
 </ul>

src/components/marquee/Marquee.astro

@@ -14,11 +14,6 @@ function placeholders() {
 
 const ph = placeholders();
 ---
-<div class="marquee-buttons">
-  <button id="button-widget" class="marquee-button marquee-button-widget">widgets</button>
-  <button id="button-panel" class="marquee-button marquee-button-panel">panels</button>
-  <button id="button-overlay" class="marquee-button marquee-button-overlay">overlays</button>
-</div>
 <div class="marquee">
   <div class="marquee-scroll">
     <div id="marquee-scroll-left" class="marquee-scroll-arrow">

src/pages/index.astro

@@ -4,37 +4,34 @@ import Marquee from "@components/marquee/Marquee.astro";
 import FeatureList from "@src/components/featurelist/FeatureList.astro";
 
 const title = "Quickshell";
-const subtitle = "A framework for building fully custom";
 ---
 <BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
   <div class="main-page_hero" data-pagefind-ignore>
     <h1 class="gradient-text">Quickshell</h1>
     <section class="main-page_hero-text">
-      <h2>{subtitle}</h2>
+      <h2>building blocks for your desktop</h2>
     </section>
     <Marquee/>
-    <section class="call-buttons">
+    <section class="main-page_links">
-      <span class="call-button call-install"><a href="/docs/intro">Install</a></span>
+      <section class="main-page_links_set">
-      <span class="call-button call-get-started"><a href="/docs/intro">Get Started</a></span>
+        <a href="/docs/configuration/getting-started" class="main-page_link-card">
+          <h3>Get started</h3>
+        </a>
+        <a href="/docs/types" class="main-page_link-card">
+          <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>
     </section>
-    <div class="separator-el"/>
     <section class="featurelist-section">
       <FeatureList/>
     </section>
-    <div class="separator-el"/>
-    <section class="main-page_links">
-      <a href="/docs/configuration" class="main-page_link-card">
-        <h3>Configuration</h3>
-      </a>
-      <a href="/docs/types" class="main-page_link-card">
-        <h3>Type Definitions</h3>
-      </a>
-      <a href="https://git.outfoxxed.me/outfoxxed/quickshell-examples" class="main-page_link-card">
-        <h3>Examples</h3>
-      </a>
-      <a href="https://git.outfoxxed.me/outfoxxed/quickshell" class="main-page_link-card">
-        <h3>Source</h3>
-      </a>
-    </section>
   </div>
 </BaseLayout>

src/styles/components/featurelist.css

@@ -1,13 +1,11 @@
 .featurelist-section {
   position: relative;
-  margin-block: 1rem;
 }
 
 .featurelist {
-  max-width: 100%;
+  max-width: 40rem;
   list-style: none;
-  margin: unset;
+  margin: 1rem 1.618rem;
-  margin-inline: 0.618rem;
   display: flex;
   flex-direction: column;
 }
@@ -18,7 +16,6 @@
   gap: 0.618rem;
   flex-direction: column;
   align-items: center;
-  min-height: 330px;
   margin-block: 0.618rem;
   border-radius: 9px;
   background-color: hsla(var(--blue) 100 81 / 0.05);
@@ -44,8 +41,9 @@
 
 .feature-text {
   text-align: center;
+  font-size: 1.2rem;
   & .feature-title {
-    margin-bottom: 0.217rem;
+    margin-bottom: 0.517rem;
   }
   & .feature-subtitle {
     color: #afafaf;
@@ -53,18 +51,22 @@
 }
 
 .feature-showcase {
-  width: max-content;
+  height: 21rem;
   aspect-ratio: 16 / 9;
 }
 
-@media (min-width: 65rem) {
+.feature-video {
+  border-radius: 0.681rem;
+}
+
+@media (min-width: 68rem) {
   .featurelist {
+    max-width: 75rem;
     width: auto;
     align-items: center;
   }
   .feature-text {
-    margin-left: 2.218rem;
+    margin: 0 2.218rem;
-    width: 30rem;
   }
   .featurelist-item {
     width: 100%;
@@ -75,11 +77,6 @@
   }
   .featurelist-item.right {
     flex-direction: row-reverse;
-    & .feature-text {
-      margin-right: 2.118rem;
-      margin-left: unset;
-      text-align: right;
-    }
   }
   .feature-text {
     text-align: left;

src/styles/main-page.css

@@ -1,6 +1,5 @@
 .main-page_hero {
   position: relative;
-  margin-block: 1.618rem;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -10,6 +9,7 @@
   & h1 {
     position: relative;
     font-size: 4.618rem;
+    margin-top: 1rem;
   }
 
   & .navy {
@@ -98,7 +98,7 @@ h1.gradient-text {
 
 .marquee-item-spacing {
   width: 75svw;
-  max-width: 80rem;
+  max-width: 75rem;
   aspect-ratio: 16 / 9;
 }
 
@@ -140,39 +140,22 @@ h1.gradient-text {
   }
 }
 
-/*.marquee-scroll-left {
+.main-page_links {
-  left: 3.117rem;
-}
-
-.marquee-scroll-right {
-  right: 3.117rem;
-}*/
-
-.call-buttons {
-  margin-bottom: 1rem;
-  margin-inline: 0.618rem;
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 3rem;
-}
-
-.call-button {
-  width: 15rem;
-  font-size: 1.874rem;
-  font-weight: 600;
-  border: 1px solid hsl(var(--accent-400));
-  border-radius: 4px;
-  text-align: center;
-}
-
-.main-page_links {
-  position: relative;
-  display: flex;
-  width: 75%;
-  flex-wrap: wrap;
-  gap: 2rem;
   z-index: 0;
+  max-width: 75%;
+  gap: 1rem;
+  margin: 0 1rem;
+}
+
+.main-page_links_set {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 1rem;
 }
 
 .main-page_link-card {
@@ -183,7 +166,8 @@ h1.gradient-text {
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 9.67rem;
+  min-width: 15rem;
+  height: 3.67rem;
   border-radius: 9px;
   overflow: hidden;
   border: 1px solid transparent;
@@ -203,8 +187,6 @@ h1.gradient-text {
     z-index: 1;
   }
 
-  &:nth-child(1),
-  &:nth-child(2) {
   &::before {
     background: linear-gradient(
       115deg,
@@ -215,16 +197,12 @@ h1.gradient-text {
   }
 
   &:hover {
-      border-color: hsl(var(--accent-600));
-
     &::before {
       filter: blur(0.9rem) saturate(200%);
     }
   }
-  }
 
-  &:nth-child(3),
+  &.main-page_bluecard {
-  &:nth-child(4) {
     &::before {
       background: linear-gradient(
         115deg,
@@ -235,8 +213,6 @@ h1.gradient-text {
     }
 
     &:hover {
-      border-color: hsl(var(--blue) 90 40);
-
       &::before {
         filter: blur(0.9rem) saturate(200%);
       }
@@ -252,20 +228,14 @@ h1.gradient-text {
   bottom: 0;
 }
 
-@media (min-width: 65rem) {
+@media (min-width: 40rem) {
-  .main-page_hero-text {
+  .main-page_links_set {
-    text-align: end;
+    flex-wrap: nowrap;
-
-    & h2 {
-      display: block;
   }
 }
 
+@media (min-width: 86rem) {
   .main-page_links {
-    justify-content: center;
+    flex-wrap: nowrap;
-  }
-
-  .main-page_link-card {
-    max-width: 21.33rem;
   }
 }