From e8b1c28664070ad0af4b5b3277f5fdf0f0c9149b Mon Sep 17 00:00:00 2001 From: Vri Date: Fri, 7 Jan 2022 21:26:29 +0100 Subject: [PATCH] changed colors to match my new color scheme --- assets/style.scss | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/assets/style.scss b/assets/style.scss index 8cdf8ad..7ee3403 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,9 +1,15 @@ :root { - --background: rgb(30, 40, 50); - --border: rgb(50, 60, 70); - --text: rgb(235, 245, 255); - --text-2: rgb(165, 175, 185); - --vrifox-red: rgb(255, 130, 130); + --background: hsl(210, 21%, 15%); + --border: hsl(210, 21%, 20%); + --text: hsl(210, 21%, 95%); + --text-2: hsl(210, 21%, 80%); + --vriish-red: hsl(0, 100%, 75%); + --rose: hsl(0, 100%, 75%); + --orange: hsl(25, 100%, 75%); + --gold: hsl(50, 100%, 75%); + --emerald: hsl(130, 100%, 75%); + --sky: hsl(215, 100%, 75%); + --purpur: hsl(275, 100%, 75%); } @media (prefers-color-scheme: light) { :root { @@ -16,13 +22,13 @@ * { box-sizing: border-box; - scrollbar-color: var(--vrifox-red) var(--background); + scrollbar-color: var(--vriish-red) var(--background); scrollbar-width: thin; &::-webkit-scrollbar { background: var(--background); width: 6px; } - &::-webkit-scrollbar-thumb { background: var(--vrifox-red); } + &::-webkit-scrollbar-thumb { background: var(--vriish-red); } } html { @@ -47,7 +53,7 @@ h1, h2, h3, h4, h5, h6 { a { color: var(--text); text-decoration: underline; - text-decoration-color: var(--vrifox-red); + text-decoration-color: var(--vriish-red); text-underline-offset: 3px; transition: text-decoration-color .2s; &:hover { text-decoration-color: var(--text); } @@ -59,7 +65,7 @@ center { } pre { - border: 1px solid var(--vrifox-red); + border: 1px solid var(--vriish-red); border-radius: 4px; overflow: auto; padding: 10px 15px; @@ -99,7 +105,7 @@ header, footer { text-decoration-thickness: 2px !important; text-underline-offset: 6px; margin: 0 15px; - &:hover { text-decoration-color: var(--vrifox-red); } + &:hover { text-decoration-color: var(--vriish-red); } } } header { @@ -109,7 +115,7 @@ header { font-size: 1em; margin: 0; a { - color: var(--vrifox-red); + color: var(--vriish-red); } } nav { @@ -145,7 +151,7 @@ main { animation: rainbow-swoosh; animation-duration: 30000s; animation-iteration-count: infinite; - background-image: linear-gradient(135deg, #c940f9 14.29%, #ff1e00 14.29%, #ff1e00 28.57%, #ffa500 28.57%, #ffa500 42.86%, #ffe047 42.86%, #ffe047 57.14%, #67dc91 57.14%, #67dc91 71.43%, #67a1ed 71.43%, #67a1ed 85.71%, #c940f9 85.71%); + background-image: linear-gradient(135deg, var(--purpur) 14.29%, var(--rose) 14.29%, var(--rose) 28.57%, var(--orange) 28.57%, var(--orange) 42.86%, var(--gold) 42.86%, var(--gold) 57.14%, var(--emerald) 57.14%, var(--emerald) 71.43%, var(--sky) 71.43%, var(--sky) 85.71%, var(--purpur) 85.71%); background-clip: text; -webkit-background-clip: text; color: transparent;