lrl layout done

2024-11-08 09:39:43 +02:00 · 2024-11-08 09:39:43 +02:00 · 09302ad58e
parent 16ac71a311
commit 09302ad58e
7 changed files with 202 additions and 17 deletions
--- a/README.md
+++ b/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
--- a/src/components/featurelist/FeatureList.astro
+++ b/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>
--- a/src/components/hooks/ThemeSwitch.tsx
+++ b/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,10 +58,11 @@ const updateTheme = () => {
 };

 export const ThemeSelect: VoidComponent = () => {
-  const [currentTheme, setCurrentTheme] = createSignal<ThemeProps>({
-    theme: "dark",
-    system: "dark",
-  });
+  const [currentTheme, setCurrentTheme] =
+    createSignal<ThemeProps>({
+      theme: "dark",
+      system: "dark",
+    });
  const [mounted, setMounted] = createSignal(false);

  const toggleTheme = () => {
@ -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
+      }
    />
  );
 };
--- a/src/pages/index.astro
+++ b/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>
--- a/src/styles/components/featurelist.css
+++ b/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;
+  }
+}
--- a/src/styles/global.css
+++ b/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;
 }
--- a/src/styles/main-page.css
+++ b/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;
 }