From fc0eb748244cfc71fa53e77af2bda32790fa899a Mon Sep 17 00:00:00 2001 From: outfoxxed Date: Fri, 8 Nov 2024 01:27:27 -0800 Subject: [PATCH] frontpage work --- src/components/featurelist/FeatureList.astro | 23 ++-- src/components/marquee/Marquee.astro | 5 - src/pages/index.astro | 39 ++++--- src/styles/components/featurelist.css | 27 +++-- src/styles/main-page.css | 104 +++++++------------ 5 files changed, 82 insertions(+), 116 deletions(-) diff --git a/src/components/featurelist/FeatureList.astro b/src/components/featurelist/FeatureList.astro index 6e5e00b..4ea6733 100644 --- a/src/components/featurelist/FeatureList.astro +++ b/src/components/featurelist/FeatureList.astro @@ -26,18 +26,23 @@ const codeHTML = await processMarkdown(codeString);

  • See your changes in real time

    - Quickshell loads changes as soon as they're saved; you can iterate as fast as you can type. + + Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type. +
    - - hot reloading video - +

  • Easy to use language

    - Quickshell is configured in QML, a language that reacts to changes as they happen. + + Quickshell is configured in QML, a simple language designed for creating flexible user interfaces. + It also has LSP support. +
    @@ -45,11 +50,13 @@ const codeHTML = await processMarkdown(codeString);
  • -

    Fully featured

    - Everything you need to build your desktop, right out of the box. +

    Extensive integrations

    + + Quickshell comes with a large set of integrations, with new ones arriving all the time. +
    - tag cloud + image
    • diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro index 2832ae1..b778c3e 100644 --- a/src/components/marquee/Marquee.astro +++ b/src/components/marquee/Marquee.astro @@ -14,11 +14,6 @@ function placeholders() { const ph = placeholders(); --- -
    - - - -
    diff --git a/src/pages/index.astro b/src/pages/index.astro index c4fb822..ce92b2d 100644 --- a/src/pages/index.astro +++ b/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"; ---

    Quickshell

    -

    {subtitle}

    +

    building blocks for your desktop

    -
    - Install - Get Started +
    +
    + +

    Get started

    +     + +

    Documentation

    +     +
    +
    + +

    Examples

    +     + +

    Source Code

    +     +
    -
    -
    -
    - -

    Configuration

    -     - -

    Type Definitions

    -     - -

    Examples

    -     - -

    Source

    -     -
    diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css index 235242c..52fd3a2 100644 --- a/src/styles/components/featurelist.css +++ b/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-inline: 0.618rem; + margin: 1rem 1.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; - width: 30rem; + margin: 0 2.218rem; } .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; diff --git a/src/styles/main-page.css b/src/styles/main-page.css index d806cbe..d55c75c 100644 --- a/src/styles/main-page.css +++ b/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 { - left: 3.117rem; -} - -.marquee-scroll-right { - right: 3.117rem; -}*/ - -.call-buttons { - margin-bottom: 1rem; - margin-inline: 0.618rem; +.main-page_links { 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,28 +187,22 @@ h1.gradient-text { z-index: 1; } - &:nth-child(1), - &:nth-child(2) { + &::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 { - 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 { - border-color: hsl(var(--accent-600)); - - &::before { - filter: blur(0.9rem) saturate(200%); - } + filter: blur(0.9rem) saturate(200%); } } - &:nth-child(3), - &:nth-child(4) { + &.main-page_bluecard { &::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) { - .main-page_hero-text { - text-align: end; - - & h2 { - display: block; - } - } - - .main-page_links { - justify-content: center; - } - - .main-page_link-card { - max-width: 21.33rem; +@media (min-width: 40rem) { + .main-page_links_set { + flex-wrap: nowrap; + } +} + +@media (min-width: 86rem) { + .main-page_links { + flex-wrap: nowrap; } }