From 2e5b785932f580ce35eb3fdccee2a117ffaf01b1 Mon Sep 17 00:00:00 2001 From: SindreKjelsrud Date: Fri, 23 Aug 2024 10:33:04 +0200 Subject: [PATCH] :lipstick: change colorpalette of darkmode Signed-off-by: SindreKjelsrud --- README.md | 12 ++++----- public/img/worldmap.svg | 34 ++++++++++++------------ public/jollyroger_dark.svg | 2 +- public/socials/github_dark.svg | 4 +-- public/socials/grandlinewebring.dark.svg | 2 +- public/socials/spotify_dark.svg | 2 +- public/socials/xxiivvwebring_dark.svg | 2 +- src/components/ThemeIcon.astro | 2 +- src/styles/global.css | 28 ++++++++++++------- 9 files changed, 48 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index cec8814..6c46e4a 100644 --- a/README.md +++ b/README.md @@ -40,12 +40,12 @@ The webpage offers a variety of features including a blog, bookmarks, ways to re | Color | Hex | |-|-| -| Deep Ocean | ![#0F1A1C](https://via.placeholder.com/10/0F1A1C?text=+) `#0F1A1C` | -| Mint Foam Text | ![#9AD3BB](https://via.placeholder.com/10/9AD3BB?text=+) `#9AD3BB` | -| Coral Reef Accent | ![#3A6F7F](https://via.placeholder.com/10/3A6F7F?text=+) `#3A6F7F` | -| Seaweed Highlight | ![#2B4F60](https://via.placeholder.com/10/2B4F60?text=+) `#2B4F60` | -| Lagoon | ![#1A333F](https://via.placeholder.com/10/1A333F?text=+) `#1A333F` | -| Aquamarine | ![#7FCDCD](https://via.placeholder.com/10/7FCDCD?text=+) `#7FCDCD` | +| Midnight Navy | ![#1e1e2e](https://via.placeholder.com/10/1e1e2e?text=+) `#1e1e2e` | +| Lavender Mist | ![#cdd6f4](https://via.placeholder.com/10/cdd6f4?text=+) `#cdd6f4` | +| Amethyst Glow | ![#8f5cf4](https://via.placeholder.com/10/8f5cf4?text=+) `#8f5cf4` | +| Soft Sand | ![#f4e8cd](https://via.placeholder.com/10/f4e8cd?text=+) `#f4e8cd` | +| Periwinkle Glow | ![#b4c0f4](https://via.placeholder.com/10/b4c0f4?text=+) `#b4c0f4` | +| Sky Blue | ![#89b4fa](https://via.placeholder.com/10/89b4fa?text=+) `#89b4fa` | ## 📜 Versionlog diff --git a/public/img/worldmap.svg b/public/img/worldmap.svg index 25930c2..b0ccfa1 100644 --- a/public/img/worldmap.svg +++ b/public/img/worldmap.svg @@ -24,7 +24,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_UA" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -99,7 +99,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_IR" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -129,7 +129,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_VE" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -263,7 +263,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_YE" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -273,7 +273,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_VG" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -298,7 +298,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_SD" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -542,12 +542,12 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_NA" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -577,12 +577,12 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_FJ" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -675,7 +675,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_UZ" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -705,7 +705,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_ER" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -740,7 +740,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_VN" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -870,7 +870,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_HT" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -910,7 +910,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_GA" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -950,7 +950,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_GQ" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> @@ -1089,7 +1089,7 @@ To locate country search for "sm_state_{COUNTRY_CODE}" class="sm_state sm_state_BB" opacity="1" stroke-opacity="1" stroke-width="3.7837499999999995" stroke-linejoin="round" transform="matrix(0.3474,0,0,0.3474,0,0)" fill-opacity="1" /> diff --git a/public/jollyroger_dark.svg b/public/jollyroger_dark.svg index 60976f3..1f0f356 100644 --- a/public/jollyroger_dark.svg +++ b/public/jollyroger_dark.svg @@ -4,6 +4,6 @@ - + diff --git a/public/socials/github_dark.svg b/public/socials/github_dark.svg index ff77d6f..1a3e9dc 100644 --- a/public/socials/github_dark.svg +++ b/public/socials/github_dark.svg @@ -1,5 +1,5 @@ - - + + \ No newline at end of file diff --git a/public/socials/grandlinewebring.dark.svg b/public/socials/grandlinewebring.dark.svg index 6c791fd..e1ca658 100644 --- a/public/socials/grandlinewebring.dark.svg +++ b/public/socials/grandlinewebring.dark.svg @@ -4,6 +4,6 @@ - + diff --git a/public/socials/spotify_dark.svg b/public/socials/spotify_dark.svg index 53e96b5..c690b08 100644 --- a/public/socials/spotify_dark.svg +++ b/public/socials/spotify_dark.svg @@ -8,7 +8,7 @@ - + diff --git a/public/socials/xxiivvwebring_dark.svg b/public/socials/xxiivvwebring_dark.svg index ff32084..1f7df84 100644 --- a/public/socials/xxiivvwebring_dark.svg +++ b/public/socials/xxiivvwebring_dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro index 0de47ca..94f6799 100644 --- a/src/components/ThemeIcon.astro +++ b/src/components/ThemeIcon.astro @@ -13,7 +13,7 @@ background: none; } .sun { fill: transparent; } - .moon { fill: #9AD3BB; } + .moon { fill: #cdd6f4; } :global(.dark) .sun { fill: #3B2C29; } diff --git a/src/styles/global.css b/src/styles/global.css index b70c1f2..fddbe93 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,12 +5,12 @@ --light-3: #A48B82; /* Cappuccino Accents */ --light-hover: #A48B82; /* Cappuccino Accents (for hover states) */ --light-link: #B08968; /* Caramel Macchiato Links */ - --dark-bg: #0F1A1C; /* Deep Ocean Background */ - --dark-1: #9AD3BB; /* Mint Foam Text */ - --dark-2: #3A6F7F; /* Coral Reef Accent */ - --dark-3: #2B4F60; /* Seaweed Highlight */ - --dark-hover: #1A333F; /* Lagoon Hover */ - --dark-link: #7FCDCD; /* Aquamarine Links */ + --dark-bg: #1e1e2e; /* Midnight Navy */ + --dark-1: #cdd6f4; /* Lavender Mist */ + --dark-2: #8f5cf4; /* Amethyst Glow */ + --dark-3: #6f7aaa; /* Soft Sand */ + --dark-hover: #b4c0f4; /* Periwinkle Glow */ + --dark-link: #89b4fa; /* Sky Blue */ } html { @@ -25,6 +25,7 @@ html.dark { body { font-family: Verdana, sans-serif; + /*"Noto Sans Mono", monospace*/ } p { @@ -236,22 +237,29 @@ pre { } blockquote { + background-color: #11111b; padding: 0 0 0 10px; - border-left: 5px solid var(--dark-1); + border-left: 5px solid var(--dark-link); } .dark blockquote { + background-color: #E6D5C8; padding: 0 0 0 10px; - border-left: 5px solid var(--light-1); + border-left: 5px solid var(--light-link); +} + +blockquote p { + font-size: medium; + line-height: 32px; } ::selection{ - background-color: var(--dark-1); + background-color: var(--dark-1); color: var(--dark-bg); } .dark ::selection{ - background-color: var(--light-1); + background-color: var(--light-1); color: var(--light-bg); }