refactor(website): use nested CSS

2025-11-03 20:06:08 +01:00 · 2025-09-27 21:02:23 +03:00
parent fb7453f7b0
commit 2df0763141
9 changed files with 430 additions and 431 deletions
--- a/apps/website/src/components/Button.css
+++ b/apps/website/src/components/Button.css
@@ -7,14 +7,14 @@ a.button {
    text-decoration: none;
    text-align: center;    
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
-}

-a.button.outline {
+    &.outline {
        border: 1px solid var(--brand-1);
        color: var(--brand-1);
        background-color: transparent;
-}
+    }

-a.button .text {
+    .text {
        vertical-align: middle;
+    }
 }
--- a/apps/website/src/components/DownloadButton.css
+++ b/apps/website/src/components/DownloadButton.css
@@ -1,11 +1,13 @@
-.download-button .platform {
-    font-size: 0.75em;
-    opacity: 0.75;
-}
-
-.download-button.big {
+.download-button {
+    &.big {
        padding: 1em 2em;
        margin: 1em 0;
+    }
+    
+    .platform {
+        font-size: 0.75em;
+        opacity: 0.75;
+    }
 }

@media (min-width: 720px) {
--- a/apps/website/src/components/Footer.css
+++ b/apps/website/src/components/Footer.css
@@ -4,26 +4,26 @@ footer {
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    color: var(--muted-color);
    font-size: 0.8em;
-}

-footer .content-wrapper {
+    .content-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
+    }
 }

 .social-buttons {
    display: flex;
    gap: 1em;
-}

-.social-buttons a.social-button {
+    a.social-button {
        color: var(--muted-color);
        transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
        opacity: 0.7;
-}

-.social-buttons a.social-button:hover {
+        &:hover {
            color: var(--brand-1);
            opacity: 1;
+        }
+    }
 }
--- a/apps/website/src/components/Header.css
+++ b/apps/website/src/components/Header.css
@@ -8,51 +8,54 @@ header {
    z-index: 1000;
    --gap: 1.25em;
    font-size: 0.8em;
-}

-header .content-wrapper {
+    .content-wrapper {
        display: flex;
        align-items: center;
        justify-items: center;
        gap: var(--gap);
-}
+    }

-header a.banner {
+    a.banner {
        display: flex;
        align-items: center;
        justify-items: center;
        text-decoration: none;
        color: inherit;
-}
        
-header > .content-wrapper,
-section.hero-section > .content-wrapper {
-    min-width: 80vw;
-}
+        &:hover { text-decoration: none;}
+    }

-header img {
+    img {
        width: 32px;
        height: 32px;
-}
+    }

-header img+span {
+    img+span {
        font-size: 1.3em;
-}
+    }

-header nav {
+    nav {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        gap: var(--gap);
-}

-header nav a {
+        a {
            text-decoration: none;
            color: inherit;
+
+            &.active {
+                color: var(--brand-1);
+            }
+        }
+    }
 }

-header nav a.active {
-    color: var(--brand-1);
+
+header > .content-wrapper,
+section.hero-section > .content-wrapper {
+    min-width: 80vw;
 }

@media (max-width: 719px) {
@@ -67,17 +70,12 @@ header nav a.active {
        right: 0;
        min-height: var(--header-height);
        display: flex;
-    }

-    header + main {
-        margin-top: var(--header-height);
-    }
-
-    header .content-wrapper {
+        .content-wrapper {
            display: block;
        }

-    header .first-row {
+        .first-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
@@ -85,22 +83,27 @@ header nav a.active {
            align-self: stretch;
        }

-    header .menu-toggle {
+        .menu-toggle {
            color: inherit;
        }

-    header nav {
+        nav {
            flex-direction: column;
            max-height: 0;
            overflow: hidden;
            transition: max-height 200ms ease-in;        
-    }

-    header nav.mobile-shown {
+            &.mobile-shown {
                display: flex;
                max-height: 100vh;
                padding: 2em 0;
            }
+        }
+    }
+
+    header + main {
+        margin-top: var(--header-height);
+    }
    
    header nav a {
        font-size: 1.25em;
@@ -111,25 +114,25 @@ header nav a.active {
    header .social-buttons {
        justify-content: space-between;
        padding-top: 1em;
-    }

-    header .social-buttons a {
+        a {
            border-bottom: unset;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1em;
        }
+    }

 }

@media (min-width: 720px) {
    header {
        font-size: inherit;
-    }

-    header img {
+        img {
            width: 48px;
            height: 48px;
        }
+    }
 }
--- a/apps/website/src/pages/GetStarted/get-started.css
+++ b/apps/website/src/pages/GetStarted/get-started.css
@@ -6,30 +6,42 @@
    grid-column: 1 / 4;
 }

-.download-card h3 {
+.download-card {
+    h3 {
        color: var(--accent-color);
        font-size: 1.5em;
        position: relative;
-}

-.download-card h3 a.more-info {
+        a.more-info {
            margin-left: 0.5em;
            right: 0;
-}

-.download-card h3 a.more-info .bx {
+            .bx {
                vertical-align: sub;
-}
+            }
+        }
+    }

-.download-card .card-content-inner {
+    .card-content-inner {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
-}
+    }

-.download-card a:not(.button) {
+    a:not(.button) {
        color: var(--accent-color);
-    text-decoration: none;
+    }
+
+    .quick-start {
+        border: 1px solid var(--muted-color);
+        padding: 0.5em;
+        border-radius: 6px;
+
+        code {
+            text-wrap: wrap;
+            color: var(--muted-color);
+        }
+    }
 }

 .download-options {
@@ -39,59 +51,49 @@
    align-items: center;
    display: flex;
    flex-direction: column;
-}

-.download-options .recommended-options {
+    .recommended-options {
        align-self: stretch;
        display: flex;
        gap: 1em;
-}

-.download-options a.recommended {
+        a.recommended {
            display: block;
            background: var(--accent-color);
            color: var(--brand-foreground-color);
            border-radius: calc(infinity * 1px);
            margin: 1em 0;
            flex-grow: 1;
-}
+        }
+    }

-.download-options .other-options {
+    .other-options {
        display: flex;
        gap: 0.5em 1em;
        justify-content: center;
        flex-wrap: wrap;
+    }
 }

-.download-desktop .download-card:first-of-type { --accent-color: var(--brand-1); }
-.download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
-.download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); }
+.download-desktop {
+    .download-card:first-of-type { --accent-color: var(--brand-1); }
+    .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
+    .download-card:last-of-type { --accent-color: var(--brand-3); }
+}

 .download-server .download-card {
    --accent-color: var(--foreground-color);
    --brand-foreground-color: var(--background-color);
 }

-.download-card .quick-start {
-    border: 1px solid var(--muted-color);
-    padding: 0.5em;
-    border-radius: 6px;
-}
-
-.download-card .quick-start code {
-    text-wrap: wrap;
-    color: var(--muted-color);
-}
-
 .architecture-switch {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    margin: 1em 0;
-}

-.architecture-switch a {
+    a {
        display: inline-block;
        background: var(--card-background-color);
        padding: 0.25em 0.5em;
@@ -99,14 +101,19 @@
        text-align: center;
        min-width: 3em;
        color: inherit;
-}

-.architecture-switch .toggle-wrapper {
-    border-radius: calc(infinity * 1px);
-    overflow: hidden;
-}
-
-.architecture-switch a.active {
+        &.active {
            background-color: var(--brand-1);
            color: var(--brand-foreground-color);
+        }
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    .toggle-wrapper {
+        border-radius: calc(infinity * 1px);
+        overflow: hidden;
+    }
 }
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -1,15 +1,7 @@
 section.hero-section {
    position: relative;
-    background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));    
-}

-section.hero-section.dark {
-    color: var(--text-on-dark);
-    background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24);
-}
-
-/* Extra colored spots */
-section.hero-section::before {
+    &::before {
        content: "";
        position: absolute;
        inset: 0;
@@ -20,30 +12,23 @@ section.hero-section::before {
            radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%),
            radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%),
            radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
-}

-@media (prefers-color-scheme: light) {
-    /* Soft vignette for focus */
-    section.hero-section::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
-        pointer-events: none;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    section.hero-section::before {
+        @media (prefers-color-scheme: dark) {
            background:
            radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%),
            radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%),
            radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%),
            radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
        }
+    }
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
+        pointer-events: none;

-    /* Subtle noise for depth */
-    section.hero-section::after {
+        @media (prefers-color-scheme: dark) {
            content: "";
            position: absolute;
            inset: 0;
@@ -51,78 +36,79 @@ section.hero-section::before {
            opacity: 0.04;
            pointer-events: none;
        }
-}
+    }
    
-section.hero-section > .content-wrapper {
+    &>.content-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
-}
+    }

-section.hero-section .title-section {
+    .title-section {
        flex-basis: 40%;
        color: var(--muted-color);
-}

-section.hero-section .title-section h1 {
+        h1 {
            line-height: 1.1;
            font-weight: 100;
            color: var(--foreground-color);
-}
+        }
+    }

-section.hero-section .screenshot {
+    .screenshot {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 0;
-}
+    }

-section.hero-section .download-wrapper {    
+    .download-wrapper {    
        display: flex;
        flex-direction: column;
        align-content: center;
-}
+    }

-section.hero-section .download-button {
+    .download-button {
        margin-bottom: 0.25em;
-}
+    }

-section.hero-section .more-download-options {
+    .more-download-options {
        display: inline-block;
        color: var(--brand-1);
        font-size: 0.8em;
        text-align: center;
-}
+    }

-section.hero-section .additional-options {
+    .additional-options {
        margin-top: 1em;
        display: flex;
        gap: 1em;
        font-size: 0.85em;
        align-items: center;
-}

-section.hero-section .additional-options a {
+        a {
            flex-grow: 1;
+        }
+    }
 }

@media (max-width: 719px) {
    section.hero-section {
        padding-bottom: 0; 
-    }
        
-    section.hero-section .content-wrapper {
+        .content-wrapper {
            width: 100%;
        }

-    section.hero-section .title-section {
+        .title-section {
            max-width: 90%;
        }    

-    section.hero-section .screenshot {
+        .screenshot {
            margin-top: 2em;
        }
+    }
 }

@media (min-width: 720px) {
@@ -152,93 +138,96 @@ section:not(.accented) + section:not(.accented) {
 section.final-cta {
    text-align: center;
    padding: 6em 0;
-}

-section.final-cta h2 {
+    h2 {
        margin-bottom: 0;
-}
+    }

-section.final-cta p {
+    p {
        color: var(--muted-color);
-}
+    }

-section.final-cta .buttons {
+    .buttons {
        display: flex;
        align-items: center;
        gap: 1em;
        justify-content: center;
        margin-top: 2em;
+
+        .button {
+            padding: 0.75em 2em;
+        }
+    }
 }

-section.final-cta .buttons .button {
-    padding: 0.75em 2em;
+section.final-cta .buttons {
+    display: flex;
+    gap: 2em;
 }

 .list-with-screenshot {
    display: flex;
    gap: 2em;
-}

-.list-with-screenshot ul {
+    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
-}

-.list-with-screenshot ul li {
+        li {
            margin-bottom: 1em;
-}

-.list-with-screenshot ul li .card {
-    border: 1px solid transparent;
-}
-
-.list-with-screenshot ul li.selected .card {
-    border: 1px solid var(--brand-1);
-}
-
-.list-with-screenshot ul li:last-of-type {
+            &:last-of-type {
                margin-bottom: 0;
-}
+            }            

-.list-with-screenshot .details {
+            .card {
+                border: 1px solid transparent;
+            }
+
+            &.selected .card {
+                border: 1px solid var(--brand-1);
+            }            
+        }
+    }
+
+    .details {
        flex-basis: 50%;
        flex-shrink: 0;
-}
+    }

-.list-with-screenshot.horizontal {
+    &.horizontal {
        flex-direction: column-reverse;
-}

-.list-with-screenshot.horizontal ul {
+        ul {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1em;
-}
+        }

-.list-with-screenshot.horizontal li {
+        li {
            margin: 0;
-}
+        }

-.list-with-screenshot.horizontal .card {    
+        .card {
            height: 100%;
-}
+        }

-
-.list-with-screenshot.horizontal h3 {
+        h3 {
            color: var(--brand-1);
-}
+        }

-
-.list-with-screenshot.horizontal .details {
+        .details {
            max-height: 35vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
-}

-.list-with-screenshot.horizontal .details img {
+            img {
                height: 100%;
                width: auto;
                object-fit: contain;
+            }
+        }
+    }
 }
--- a/apps/website/src/pages/SupportUs/SupportUs.css
+++ b/apps/website/src/pages/SupportUs/SupportUs.css
@@ -1,23 +1,21 @@
 section.donate {
    background: var(--background-color);
-}

-section.donate ul.donate-buttons {
+    ul.donate-buttons {
        list-style-type: none;
        display: flex;
        gap: 1em;
        padding: 0;
        flex-direction: column;
-}

-section.donate h3 {
-    font-size: 1.5em;
-    color: var(--brand-1);
-}
-
-@media (min-width: 720px) {
-    section.donate ul {
+        @media (min-width: 720px) {
            gap: 0 1em;
            flex-direction: row;
        }
+    }
+
+    h3 {
+        font-size: 1.5em;
+        color: var(--brand-1);
+    }
 }
--- a/apps/website/src/pages/_404.css
+++ b/apps/website/src/pages/_404.css
@@ -1,9 +1,9 @@
 section.section-404 {
    text-align: center;
    background: var(--background-color);
-}

-section.section-404 h2 {
+    h2 {
        color: var(--brand-3);
        margin: 1em;
+    }
 }
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -45,10 +45,10 @@ body {
 a {
    color: var(--brand-3);
    text-decoration: none;
-}

-a:not(.button):hover {
+    &:not(.button):hover {
    text-decoration: underline;
+    }
 }

 .content-wrapper {
@@ -61,18 +61,18 @@ section {
    padding: 1em 0;
    justify-content: center;
    align-items: stretch;
-}

-section.fill {
+    &.fill {
        flex-grow: 1;
        display: flex;
-}
+    }

-section h2 {
+    h2 {
        text-align: center;
        font-weight: 100;
        margin-top: 0;
        margin-bottom: 1em;
+    }
 }

 img {
@@ -88,44 +88,44 @@ img {
    overflow: hidden;
    display: flex;
    flex-direction: column;
-}

-.card-content {
+    h3 {
+        font-size: 1.1rem;
+        font-weight: 300;
+        margin: 0;
+        color: var(--brand-1);
+        margin-bottom: 0.5em;
+
+        &> span {
+            vertical-align: middle;
+        }
+    }
+
+    &> .image {
+        height: 200px;
+        object-fit: cover;
+    }
+
+    .card-content {
        margin: 0;
        padding: 1em;
        color: var(--muted-color);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
-}
    
-.card-content .more-info-container {
+        .more-info-container {
            margin-top: 0.5em;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
-}
    
-.card-content .more-info {
+            .more-info {
                font-size: 0.9em;
-}
-
-.card h3 {
-    font-size: 1.1rem;
-    font-weight: 300;
-    margin: 0;
-    color: var(--brand-1);
-    margin-bottom: 0.5em;
-}
-
-.card-content h3 > span {
-    vertical-align: middle;
-}
-
-.card > .image {
-    height: 200px;
-    object-fit: cover;
+            }
+        }
+    }
 }

 .bx {
@@ -133,10 +133,10 @@ img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
-}

-.bx svg {
+    svg {
        fill: currentColor;
+    }
 }

@media (max-width: 719px) {
@@ -153,11 +153,11 @@ img {
@media (min-width: 720px) {
    section {
        padding: 3em 0;
-    }

-    section h2 {
+        h2 {
            margin-bottom: 2em;
        }
+    }    

    .grid-4-cols {
        display: grid;