From 09302ad58e7383a123ce6fb9e704057a7ed543c8 Mon Sep 17 00:00:00 2001 From: Xanazf Date: Fri, 8 Nov 2024 09:39:43 +0200 Subject: [PATCH] lrl layout done --- README.md | 5 +- src/components/featurelist/FeatureList.astro | 55 ++++++++++++ src/components/hooks/ThemeSwitch.tsx | 36 +++++--- src/pages/index.astro | 6 ++ src/styles/components/featurelist.css | 90 ++++++++++++++++++++ src/styles/global.css | 13 +++ src/styles/main-page.css | 14 ++- 7 files changed, 202 insertions(+), 17 deletions(-) create mode 100644 src/components/featurelist/FeatureList.astro create mode 100644 src/styles/components/featurelist.css diff --git a/README.md b/README.md index 91f09b3..20d9863 100644 --- 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 diff --git a/src/components/featurelist/FeatureList.astro b/src/components/featurelist/FeatureList.astro new file mode 100644 index 0000000..6e5e00b --- /dev/null +++ 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); +--- + diff --git a/src/components/hooks/ThemeSwitch.tsx b/src/components/hooks/ThemeSwitch.tsx index 2bc106a..8db7a61 100644 --- 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({ - theme: "dark", - system: "dark", - }); + const [currentTheme, setCurrentTheme] = + createSignal({ + 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 = () => {
); }; diff --git a/src/pages/index.astro b/src/pages/index.astro index 5891b55..c4fb822 100644 --- 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"; Install Get Started +
+
+ +
+

Configuration

diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css new file mode 100644 index 0000000..235242c --- /dev/null +++ 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; + } +} diff --git a/src/styles/global.css b/src/styles/global.css index add8675..9870f7a 100644 --- 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; } diff --git a/src/styles/main-page.css b/src/styles/main-page.css index e904999..d806cbe 100644 --- 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; }