From 8b3bd33766481245c589b72eea5375eda704fdc8 Mon Sep 17 00:00:00 2001 From: Zsolt Ero Date: Thu, 20 Jun 2024 10:42:51 +0200 Subject: [PATCH] nested css --- website/astro.config.mjs | 11 +++- website/package.json | 3 +- website/pnpm-lock.yaml | 118 ++++++++++++++++++++++++++++++++-- website/src/styles/donate.css | 55 ++++++++-------- website/src/styles/global.css | 60 ++++++++++------- website/src/styles/map.css | 28 ++++---- 6 files changed, 205 insertions(+), 70 deletions(-) diff --git a/website/astro.config.mjs b/website/astro.config.mjs index 4890b6f..af049a4 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -1,4 +1,13 @@ import { defineConfig } from 'astro/config' // https://astro.build/config -export default defineConfig({}) + +export default defineConfig({ + vite: { + css: { + transformer: "lightningcss", + }, + }, +}) + + diff --git a/website/package.json b/website/package.json index 5eac209..8b7b946 100644 --- a/website/package.json +++ b/website/package.json @@ -10,6 +10,7 @@ "astro": "astro" }, "dependencies": { - "astro": "^4.10.2" + "astro": "^4.10.2", + "lightningcss": "^1.25.1" } } diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 2f35b9b..bb8fced 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -7,7 +7,10 @@ settings: dependencies: astro: specifier: ^4.10.2 - version: 4.10.2 + version: 4.10.2(lightningcss@1.25.1) + lightningcss: + specifier: ^1.25.1 + version: 1.25.1 packages: @@ -1036,7 +1039,7 @@ packages: resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} dev: false - /astro@4.10.2: + /astro@4.10.2(lightningcss@1.25.1): resolution: {integrity: sha512-SBdkoOanPsxKlKVU4uu/XG0G7NYAFoqmfBtq9SPMJ34B7Hr1MxVdEugERs8IwYN6UaxdDVcqA++9PvH6Onq2cg==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} hasBin: true @@ -1098,7 +1101,7 @@ packages: tsconfck: 3.1.0 unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.3.0 + vite: 5.3.0(lightningcss@1.25.1) vitefu: 0.2.5(vite@5.3.0) which-pm: 2.2.0 yargs-parser: 21.1.1 @@ -1349,6 +1352,12 @@ packages: engines: {node: '>=6'} dev: false + /detect-libc@1.0.3: + resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} + engines: {node: '>=0.10'} + hasBin: true + dev: false + /detect-libc@2.0.3: resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} engines: {node: '>=8'} @@ -1901,6 +1910,104 @@ packages: engines: {node: '>=6'} dev: false + /lightningcss-darwin-arm64@1.25.1: + resolution: {integrity: sha512-G4Dcvv85bs5NLENcu/s1f7ehzE3D5ThnlWSDwE190tWXRQCQaqwcuHe+MGSVI/slm0XrxnaayXY+cNl3cSricw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /lightningcss-darwin-x64@1.25.1: + resolution: {integrity: sha512-dYWuCzzfqRueDSmto6YU5SoGHvZTMU1Em9xvhcdROpmtOQLorurUZz8+xFxZ51lCO2LnYbfdjZ/gCqWEkwixNg==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /lightningcss-freebsd-x64@1.25.1: + resolution: {integrity: sha512-hXoy2s9A3KVNAIoKz+Fp6bNeY+h9c3tkcx1J3+pS48CqAt+5bI/R/YY4hxGL57fWAIquRjGKW50arltD6iRt/w==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: false + optional: true + + /lightningcss-linux-arm-gnueabihf@1.25.1: + resolution: {integrity: sha512-tWyMgHFlHlp1e5iW3EpqvH5MvsgoN7ZkylBbG2R2LWxnvH3FuWCJOhtGcYx9Ks0Kv0eZOBud789odkYLhyf1ng==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /lightningcss-linux-arm64-gnu@1.25.1: + resolution: {integrity: sha512-Xjxsx286OT9/XSnVLIsFEDyDipqe4BcLeB4pXQ/FEA5+2uWCCuAEarUNQumRucnj7k6ftkAHUEph5r821KBccQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /lightningcss-linux-arm64-musl@1.25.1: + resolution: {integrity: sha512-IhxVFJoTW8wq6yLvxdPvyHv4NjzcpN1B7gjxrY3uaykQNXPHNIpChLB52+wfH+yS58zm1PL4LemUp8u9Cfp6Bw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /lightningcss-linux-x64-gnu@1.25.1: + resolution: {integrity: sha512-RXIaru79KrREPEd6WLXfKfIp4QzoppZvD3x7vuTKkDA64PwTzKJ2jaC43RZHRt8BmyIkRRlmywNhTRMbmkPYpA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /lightningcss-linux-x64-musl@1.25.1: + resolution: {integrity: sha512-TdcNqFsAENEEFr8fJWg0Y4fZ/nwuqTRsIr7W7t2wmDUlA8eSXVepeeONYcb+gtTj1RaXn/WgNLB45SFkz+XBZA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /lightningcss-win32-x64-msvc@1.25.1: + resolution: {integrity: sha512-9KZZkmmy9oGDSrnyHuxP6iMhbsgChUiu/NSgOx+U1I/wTngBStDf2i2aGRCHvFqj19HqqBEI4WuGVQBa2V6e0A==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + + /lightningcss@1.25.1: + resolution: {integrity: sha512-V0RMVZzK1+rCHpymRv4URK2lNhIRyO8g7U7zOFwVAhJuat74HtkjIQpQRKNCwFEYkRGpafOpmXXLoaoBcyVtBg==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.25.1 + lightningcss-darwin-x64: 1.25.1 + lightningcss-freebsd-x64: 1.25.1 + lightningcss-linux-arm-gnueabihf: 1.25.1 + lightningcss-linux-arm64-gnu: 1.25.1 + lightningcss-linux-arm64-musl: 1.25.1 + lightningcss-linux-x64-gnu: 1.25.1 + lightningcss-linux-x64-musl: 1.25.1 + lightningcss-win32-x64-msvc: 1.25.1 + dev: false + /load-yaml-file@0.2.0: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} @@ -3157,7 +3264,7 @@ packages: vfile-message: 4.0.2 dev: false - /vite@5.3.0: + /vite@5.3.0(lightningcss@1.25.1): resolution: {integrity: sha512-hA6vAVK977NyW1Qw+fLvqSo7xDPej7von7C3DwwqPRmnnnK36XEBC/J3j1V5lP8fbt7y0TgTKJbpNGSwM+Bdeg==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -3186,6 +3293,7 @@ packages: optional: true dependencies: esbuild: 0.21.5 + lightningcss: 1.25.1 postcss: 8.4.38 rollup: 4.18.0 optionalDependencies: @@ -3200,7 +3308,7 @@ packages: vite: optional: true dependencies: - vite: 5.3.0 + vite: 5.3.0(lightningcss@1.25.1) dev: false /web-namespaces@2.0.1: diff --git a/website/src/styles/donate.css b/website/src/styles/donate.css index 66be777..4459a7f 100644 --- a/website/src/styles/donate.css +++ b/website/src/styles/donate.css @@ -1,9 +1,7 @@ #support-plans-slider { margin: 200px auto 150px; -} -@media (max-width: 550px) { - #support-plans-slider { + @media (max-width: 550px) { max-width: 98%; margin: 170px auto 120px; } @@ -26,12 +24,14 @@ margin-top: 15px; background: linear-gradient(32deg, #03a9f4, transparent) #f441a5; transition: background-color 1s; + + &:hover, + &:focus { + background-color: #fdb900; + } } -.plan-link:hover, -.plan-link:focus { - background-color: #fdb900; -} + /* noUI slider customizations */ @@ -45,35 +45,36 @@ font-size: 30px; transition: font-size 0.3s ease; cursor: pointer; + + &.active { + font-size: 45px; + } } -.noUi-value.active { - font-size: 45px; -} +.noUi-marker-horizontal { + &.noUi-marker-large { + height: 5px; + } -.noUi-marker-horizontal.noUi-marker-large { - height: 5px; -} - -.noUi-marker-horizontal.noUi-marker { - margin-left: 0; - width: 1px; + &.noUi-marker { + margin-left: 0; + width: 1px; + } } .noUi-tooltip { border-color: #ccc; border-radius: 10px; padding: 10px; -} -.noUi-tooltip.first { - left: 0; - transform: unset; -} + &.first { + left: 0; + transform: unset; + } -.noUi-tooltip.last { - right: 0; - left: unset; - transform: unset; + &.last { + right: 0; + left: unset; + transform: unset; + } } - diff --git a/website/src/styles/global.css b/website/src/styles/global.css index c93a557..86e253e 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -1,5 +1,4 @@ body { - padding-bottom: 100px; line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; @@ -8,12 +7,6 @@ body { color: #000; } -@media (max-width: 550px) { - body { - padding-bottom: 40px; - } -} - .container { max-width: 700px; margin-left: auto; @@ -46,16 +39,18 @@ h1 { margin-top: 1em; } -p a { - color: #333; - font-weight: bold; - text-decoration: none; - box-shadow: 0 1px 0 #adc2ee; - transition: box-shadow 200ms ease 0s; -} +p { + a { + color: #333; + font-weight: bold; + text-decoration: none; + box-shadow: 0 1px 0 #adc2ee; + transition: box-shadow 200ms ease 0s; -p a:hover { - box-shadow: 0 2px 0 #adc2ee; + &:hover { + box-shadow: 0 2px 0 #adc2ee; + } + } } strong { @@ -79,14 +74,15 @@ hr { } .footer { - margin-top: 3em; + margin-top: 6em; + margin-bottom: 4em; display: flex; justify-content: space-evenly; -} -.footer a { - color: #777; - text-decoration: none; + a { + color: #777; + text-decoration: none; + } } .logo { @@ -105,4 +101,24 @@ hr { padding: 14px; font-weight: bold; overflow-x: auto; -} \ No newline at end of file +} + +.quick-start-button { + /*display: block;*/ + text-decoration: none; + color: white; + font-weight: bold; + letter-spacing: 0.05rem; + font-size: 15px; + border-radius: 20px; + padding: 6px 16px; + margin-top: 15px; + background: linear-gradient(32deg, #03a9f4, transparent) #f441a5; + transition: background-color 1s; + + &:hover, + &:focus { + background-color: #fdb900; + } +} + diff --git a/website/src/styles/map.css b/website/src/styles/map.css index c4d1588..b674e55 100644 --- a/website/src/styles/map.css +++ b/website/src/styles/map.css @@ -31,15 +31,15 @@ bottom: 0; right: 0; position: absolute; -} -.mapbg-attrib a { - color: rgba(0, 0, 0, 0.75); - text-decoration: none; -} + a { + color: rgba(0, 0, 0, 0.75); + text-decoration: none; -.mapbg-attrib a:hover { - text-decoration: underline; + &:hover { + text-decoration: underline; + } + } } .button-container { @@ -61,12 +61,12 @@ cursor: pointer; display: inline-flex; align-items: center; -} -.btn.selected { - background: #4892d9; -} + &.selected { + background: #4892d9; + } -.btn:hover { - background: #4892d9; -} \ No newline at end of file + &:hover { + background: #4892d9; + } +}