lrl layout done

README.md

@@ -6,10 +6,13 @@ Hosted version at [quickshell.outfoxxed.me](https://quickshell.outfoxxed.me)
 Frontend rewritten by [Xanazf](https://github.com/Xanazf)
 
 ## Notes for future updates
-- improve Head
+
+~- improve Head~
+
 - improve light theme
 - QtQML docs search
 - page metadata:
   - lastUpdatedAt
   - prevUpdate?
   - editURL
+- typedocs clearer borders between layout parts

src/components/featurelist/FeatureList.astro

@@ -0,0 +1,55 @@
+---
+import { processMarkdown } from "@config/io/markdown";
+
+let codeString = `\`\`\`qml
+// a standard desktop window
+FloatingWindow {
+  Timer {
+    id: timer // give the timer a name to refer to it by
+    property bool invert: false // our custom property
+
+    // change the value of invert every half second
+    running: true; repeat: true
+    interval: 500 // ms
+    onTriggered: timer.invert = !timer.invert
+  }
+
+  // change the window's color when timer.invert changes
+  color: timer.invert ? "purple" : "green"
+}
+\`\`\`
+`;
+
+const codeHTML = await processMarkdown(codeString);
+---
+<ul class="featurelist">
+  <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>
+    </section>
+    <section class="feature-showcase">
+      <span>
+        hot reloading video
+      </span>
+    </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>
+    </section>
+    <section class="feature-showcase" id="qml-showcase">
+      <Fragment set:html={codeHTML}/>
+    </section>
+  </li>
+  <li class="featurelist-item cloud left">
+    <section class="feature-text">
+      <h3 class="feature-title">Fully featured</h3>
+      <span class="feature-subtitle">Everything you need to build your desktop, right out of the box.</span>
+    </section>
+    <section class="feature-showcase">
+      <span>tag cloud</span>
+    </section>
+  </li>
+</ul>

src/components/hooks/ThemeSwitch.tsx

@@ -9,28 +9,31 @@ import {
 import Sun from "@icons/sun.svg?raw";
 import Moon from "@icons/moon.svg?raw";
 
-interface ThemeProps {
+export interface ThemeProps {
   theme: "light" | "dark";
   system: "light" | "dark";
 }
 
-const getCurrentTheme = (): ThemeProps => {
+export const getCurrentTheme = (): ThemeProps => {
   if (
     typeof localStorage !== "undefined" &&
     (localStorage.theme === "dark" ||
       (!("theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches))
+        window.matchMedia("(prefers-color-scheme: dark)")
+          .matches))
   ) {
     return {
       theme: "dark",
-      system: window.matchMedia("(prefers-color-scheme: dark)").matches
+      system: window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
         ? "dark"
         : "light",
     };
   }
   return {
     theme: "light",
-    system: window.matchMedia("(prefers-color-scheme: dark)").matches
+    system: window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
       ? "dark"
       : "light",
   };
@@ -55,7 +58,8 @@ const updateTheme = () => {
 };
 
 export const ThemeSelect: VoidComponent = () => {
-  const [currentTheme, setCurrentTheme] = createSignal<ThemeProps>({
+  const [currentTheme, setCurrentTheme] =
+    createSignal<ThemeProps>({
       theme: "dark",
       system: "dark",
     });
@@ -67,7 +71,8 @@ export const ThemeSelect: VoidComponent = () => {
     if (currentTheme()!.theme !== currentTheme()!.system) {
       localStorage.removeItem("theme");
     } else {
-      localStorage.theme = currentTheme()!.theme === "dark" ? "light" : "dark";
+      localStorage.theme =
+        currentTheme()!.theme === "dark" ? "light" : "dark";
     }
     updateTheme();
     setCurrentTheme(getCurrentTheme());
@@ -79,7 +84,9 @@ export const ThemeSelect: VoidComponent = () => {
   });
 
   createEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
     mediaQuery.addEventListener("change", updateTheme);
     window.addEventListener("storage", updateTheme);
 
@@ -94,7 +101,12 @@ export const ThemeSelect: VoidComponent = () => {
     <div
       onclick={toggleTheme}
       class="theme-toggle"
-      innerHTML={(mounted() && currentTheme().theme === "light") || currentTheme().system === "light" ? Sun : Moon}
+      innerHTML={
+        (mounted() && currentTheme().theme === "light") ||
+          currentTheme().system === "light"
+          ? Sun
+          : Moon
+      }
     />
   );
 };

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "@layouts/BaseLayout.astro";
 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";
@@ -16,6 +17,11 @@ const subtitle = "A framework for building fully custom";
       <span class="call-button call-install"><a href="/docs/intro">Install</a></span>
       <span class="call-button call-get-started"><a href="/docs/intro">Get Started</a></span>
     </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>

src/styles/components/featurelist.css

@@ -0,0 +1,90 @@
+.featurelist-section {
+  position: relative;
+  margin-block: 1rem;
+}
+
+.featurelist {
+  max-width: 100%;
+  list-style: none;
+  margin: unset;
+  margin-inline: 0.618rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.featurelist-item {
+  position: relative;
+  display: flex;
+  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);
+  padding-inline: 0.618rem;
+  padding-block: 1.217rem;
+  border: 1px solid hsla(0 0 100 / 0.05);
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0.618rem;
+    z-index: -1;
+    background-image: radial-gradient(
+      hsla(0 0 100 / 0.1) 1px,
+      transparent 1px
+    );
+    background-position: 50% 50%;
+    background-size: 1.1rem 1.1rem;
+  }
+  & .shiki {
+    margin-block: unset;
+  }
+}
+
+.feature-text {
+  text-align: center;
+  & .feature-title {
+    margin-bottom: 0.217rem;
+  }
+  & .feature-subtitle {
+    color: #afafaf;
+  }
+}
+
+.feature-showcase {
+  width: max-content;
+  aspect-ratio: 16 / 9;
+}
+
+@media (min-width: 65rem) {
+  .featurelist {
+    width: auto;
+    align-items: center;
+  }
+  .feature-text {
+    margin-left: 2.218rem;
+    width: 30rem;
+  }
+  .featurelist-item {
+    width: 100%;
+    padding: unset;
+    padding: 1.217rem;
+    justify-content: space-between;
+    flex-direction: row;
+  }
+  .featurelist-item.right {
+    flex-direction: row-reverse;
+    & .feature-text {
+      margin-right: 2.118rem;
+      margin-left: unset;
+      text-align: right;
+    }
+  }
+  .feature-text {
+    text-align: left;
+  }
+  .feature-showcase {
+    width: auto;
+  }
+}

src/styles/global.css

@@ -11,6 +11,8 @@
 @import "./docs/docs.css";
 @import "./docs/collapsible.css";
 
+@import "./components/featurelist.css";
+
 .changing-theme * {
   transition: none !important;
 }
@@ -51,6 +53,17 @@ html.dark {
 }
 
 /* layout and positioning */
+.separator-el {
+  width: 75%;
+  height: 1px;
+  margin-block: 0.618rem;
+  background: linear-gradient(
+    to right,
+    transparent,
+    hsl(var(--blue) 100 59),
+    transparent
+  );
+}
 .unset {
   all: unset;
 }

src/styles/main-page.css

@@ -50,9 +50,12 @@ h1.gradient-text {
 
 .marquee-buttons {
   display: flex;
-  gap: 3rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2.217rem;
   font-size: 1.874rem;
   font-weight: 600;
+  margin-inline: 0.618rem;
 }
 
 .marquee-button {
@@ -75,7 +78,7 @@ h1.gradient-text {
 .marquee {
   position: relative;
   width: 100%;
-  margin-block: 1.817rem;
+  margin-block: 1.618rem;
 }
 
 .marquee-content {
@@ -94,7 +97,7 @@ h1.gradient-text {
 }
 
 .marquee-item-spacing {
-  width: 75%;
+  width: 75svw;
   max-width: 80rem;
   aspect-ratio: 16 / 9;
 }
@@ -146,8 +149,11 @@ h1.gradient-text {
 }*/
 
 .call-buttons {
-  margin-bottom: 1.618rem;
+  margin-bottom: 1rem;
+  margin-inline: 0.618rem;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 3rem;
 }