From 5ccfe937193c3b8533873d1813c420337709d0c0 Mon Sep 17 00:00:00 2001 From: Nick Kosarev Date: Wed, 3 Jul 2024 11:42:47 +0000 Subject: [PATCH] chore: some color changes --- .vscode/settings.json | 2 - src/lib/components/Footer.svelte | 4 +- src/lib/components/Hamburger.svelte | 1 - src/lib/components/MenuDesktop.svelte | 6 +- src/lib/styles/styles.css | 40 ++-- .../(game)/play/GamePollProgress.svelte | 2 +- .../[lang]/(game)/play/GameRouteInfo.svelte | 2 +- .../[lang]/(website)/coupon/+page.svelte | 221 ++++++++++-------- .../(website)/p/[userName]/+page.svelte | 2 +- .../[lang]/(website)/trophy/[id]/+page.svelte | 182 ++++++++------- 10 files changed, 245 insertions(+), 217 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3a1d500e..cea90f0a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,4 @@ { - "eslint.experimental.useFlatConfig": true, - "prettier.enable": false, "editor.formatOnSave": false, diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index b890c7cf..6f771141 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -37,11 +37,11 @@ a { font-weight: 600; - color: var(--color-text); + color: inherit; } a:hover { - color: var(--color-accent-1); + color: var(--green-9); } @media (min-width: 480px) { diff --git a/src/lib/components/Hamburger.svelte b/src/lib/components/Hamburger.svelte index 8b82ddfd..7c72c2da 100644 --- a/src/lib/components/Hamburger.svelte +++ b/src/lib/components/Hamburger.svelte @@ -32,7 +32,6 @@ svg { min-height: 24px; transition: transform 0.2s ease-in-out; - color: var(--color-text); } svg line { diff --git a/src/lib/components/MenuDesktop.svelte b/src/lib/components/MenuDesktop.svelte index f1901c4b..34663a81 100644 --- a/src/lib/components/MenuDesktop.svelte +++ b/src/lib/components/MenuDesktop.svelte @@ -45,7 +45,7 @@ display: flex; height: 100%; align-items: center; - color: var(--color-text); + color: inherit; font-weight: 700; font-size: 1rem; text-transform: uppercase; @@ -55,7 +55,7 @@ } nav a:hover { - color: var(--color-accent-1); + color: var(--green-9); } ul { @@ -77,6 +77,6 @@ } li[aria-current='page'] a { - color: var(--color-accent-1); + color: var(--green-9); } diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css index 6527c9c1..ebd13d2f 100644 --- a/src/lib/styles/styles.css +++ b/src/lib/styles/styles.css @@ -1,8 +1,11 @@ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap'); +@import '@radix-ui/colors/bronze.css'; +@import '@radix-ui/colors/brown.css'; +@import '@radix-ui/colors/green.css'; +@import '@radix-ui/colors/orange.css'; + :root { - --color-accent-1: #30A46C; - --color-text: #331E0B; --color-twitch: #8E4EC6; --color-background: #FFF7ED; --color-background-2: #F6EEE7; @@ -22,14 +25,15 @@ html { font-size: 16px; } -html, body { +html, +body { font-family: "Noto Serif", "Times New Roman", "Georgia", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-variation-settings: "wdth" 100; - background-color: var(--color-background); - color: var(--color-text); + background-color: var(--orange-2); + color: var(--bronze-12); } body { @@ -60,7 +64,7 @@ p { } a { - color: var(--color-accent-1); + color: var(--green-9); text-decoration: none; } @@ -84,7 +88,6 @@ pre { box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); padding: 0.5em; overflow-x: auto; - color: var(--color-text); } input, @@ -93,7 +96,9 @@ button { font-family: inherit; } -button, input[type="submit"], input[type="reset"] { +button, +input[type="submit"], +input[type="reset"] { background: none; color: inherit; border: none; @@ -139,19 +144,20 @@ button:focus:not(:focus-visible) { bottom: -0.25em; transform: translateY(100%); padding: 0.5em; - background-color: var(--color-background-2); + background-color: var(--brown-3); z-index: 5; - } +} - .dropdown-menu a { +.dropdown-menu a { color: inherit; text-decoration: none; - } +} - .dropdown-menu button { +.dropdown-menu button { text-align: left; - } +} - .dropdown-menu button:hover, .dropdown-menu a:hover { - color: var(--color-accent-1); - } +.dropdown-menu button:hover, +.dropdown-menu a:hover { + color: var(--green-9); +} \ No newline at end of file diff --git a/src/routes/[lang]/(game)/play/GamePollProgress.svelte b/src/routes/[lang]/(game)/play/GamePollProgress.svelte index b3d69785..f7b17952 100644 --- a/src/routes/[lang]/(game)/play/GamePollProgress.svelte +++ b/src/routes/[lang]/(game)/play/GamePollProgress.svelte @@ -65,7 +65,7 @@ width: 100%; height: 100%; display: none; - background-color: var(--color-accent-1); + background-color: var(--green-9); } .votes { diff --git a/src/routes/[lang]/(game)/play/GameRouteInfo.svelte b/src/routes/[lang]/(game)/play/GameRouteInfo.svelte index 97cb90bd..7e7f6368 100644 --- a/src/routes/[lang]/(game)/play/GameRouteInfo.svelte +++ b/src/routes/[lang]/(game)/play/GameRouteInfo.svelte @@ -61,7 +61,7 @@ .progress-bar { z-index: 10; height: 1.5em; - background-color: var(--color-accent-1); + background-color: var(--green-9); border-radius: 1em; } diff --git a/src/routes/[lang]/(website)/coupon/+page.svelte b/src/routes/[lang]/(website)/coupon/+page.svelte index 6ccb8932..a80adc81 100644 --- a/src/routes/[lang]/(website)/coupon/+page.svelte +++ b/src/routes/[lang]/(website)/coupon/+page.svelte @@ -9,7 +9,7 @@ export let data - const latestCoupons = data.latestCoupons.slice(0, 6) + const latestCoupons = data.latestCoupons.slice(0, 12) TimeAgo.addLocale(ru) @@ -23,14 +23,19 @@

Купон

-

Уже встречался на стриме?

+

+ Уже встречался на стриме? +

banana coupon

Последние активации

-

На стриме периодически появляются сообщения с инструкцией, как получить купон.

+

+ На стриме периодически появляются сообщения с инструкцией, как получить + купон. +

{#each latestCoupons as coupon} @@ -42,7 +47,9 @@
- {coupon.profile.userName} + {coupon.profile.userName}
@@ -52,7 +59,9 @@

Куда его можно потратить

-

Важно: действия имеют статус "в разработке". Развлечемся!

+

+ Важно: действия имеют статус "в разработке". Развлечемся! +

@@ -60,7 +69,10 @@

Сеть персонажей

-

Персонажи "прокачиваются" за счет заметок игроков: истории, детали характера, визуальные свойства. Для их публикации нужны купоны.

+

+ Персонажи "прокачиваются" за счет заметок игроков: истории, детали + характера, визуальные свойства. Для их публикации нужны купоны. +

@@ -68,7 +80,11 @@

Квесты

-

Игроки выполняют разнообразные задания в игре, используя доступные команды. Квесты будем создавать вместе. Для их публикации нужны купоны.

+

+ Игроки выполняют разнообразные задания в игре, используя доступные + команды. Квесты будем создавать вместе. Для их публикации нужны + купоны. +

@@ -76,127 +92,132 @@

Игра за персонажа

-

Можно "арендовать" игрового персонажа на время: откроется доступ к странице, постам и активностям. Стоимость аренды динамичная и измеряется в купонах.

+

+ Можно "арендовать" игрового персонажа на время: откроется доступ к + странице, постам и активностям. Стоимость аренды динамичная и + измеряется в купонах. +

+ .mt-4 { + margin-top: 1.5em; + } + diff --git a/src/routes/[lang]/(website)/p/[userName]/+page.svelte b/src/routes/[lang]/(website)/p/[userName]/+page.svelte index 7342a0d8..986f92aa 100644 --- a/src/routes/[lang]/(website)/p/[userName]/+page.svelte +++ b/src/routes/[lang]/(website)/p/[userName]/+page.svelte @@ -119,7 +119,7 @@ color: #fff; font-weight: 700; font-size: 0.8rem; - background: var(--color-text); + background: var(--bronze-12); padding: 0 0.4em; border-radius: 50%; } diff --git a/src/routes/[lang]/(website)/trophy/[id]/+page.svelte b/src/routes/[lang]/(website)/trophy/[id]/+page.svelte index a80227fc..0ea87cdd 100644 --- a/src/routes/[lang]/(website)/trophy/[id]/+page.svelte +++ b/src/routes/[lang]/(website)/trophy/[id]/+page.svelte @@ -11,12 +11,16 @@ const timeAgo = new TimeAgo('ru-RU') - const latestProfiles = data.trophy.progress.filter((t) => t.status === 'COMPLETED').slice(0, 12) + const latestProfiles = data.trophy.progress + .filter((t) => t.status === 'COMPLETED') + .slice(0, 12)

{data.trophy.name}

-

Трофей, созданный hmbanan666

+

+ Трофей, созданный hmbanan666 +

@@ -56,101 +60,101 @@