From 2558476247d53b3c34ec30db2d5bcf10bf299a51 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 11:55:30 -0800 Subject: [PATCH 01/20] Make white value true white --- sass/_vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index dcabe72d60..403c170116 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -19,7 +19,7 @@ $bp-desktop-up: '(min-width: #{$bp-desktop})'; // Colors $color-black: #000; -$color-white: #ececec; +$color-white: #ffffff; $color-grey-800: #232326; $color-grey-900: #1e1e22; $color-pink: #bb799c; From 8dc47cb7b985420d4a935cf47caa6ddb9867a780 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 11:55:48 -0800 Subject: [PATCH 02/20] Make get started button higher contrast --- sass/components/_button.scss | 68 +++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 33 deletions(-) diff --git a/sass/components/_button.scss b/sass/components/_button.scss index f704468e49..9ef38b3682 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -1,42 +1,44 @@ .button { - $color-blue: #799bbb; + $color-blue: #4573a1; - display: inline-flex; - align-items: center; - background-color: $color-blue; - border: 3px solid #576f86; - padding: 6px 8px; - border-radius: $border-radius; - font-size: 1.2rem; - font-weight: 500; - transition: transform $duration-fast; + display: inline-flex; + align-items: center; + background-color: $color-blue; + border: 3px solid #6b9ac7; + padding: 6px 8px; + border-radius: $border-radius; + font-size: 1.2rem; + font-weight: 500; + transition: transform $duration-fast; - &:hover { - background-color: darken($color-blue, 3%); - } + &:hover { + background-color: darken($color-blue, 3%); + } - &:active { - transform: translateY(2px); - } + &:active { + transform: translateY(2px); + } - &, &:hover, &:visited { - color: $color-white; - text-decoration: none; - } + &, + &:hover, + &:visited { + color: $color-white; + text-decoration: none; + } - &__icon { - height: 1.1em; - vertical-align: middle; - margin-left: 0.2em; - font-size: 0.9em; - } + &__icon { + height: 1.1em; + vertical-align: middle; + margin-left: 0.2em; + font-size: 0.9em; + } - &--pink { - background-color: $color-pink; - border-color: #865767; + &--pink { + background-color: $color-pink; + border-color: #865767; - &:hover { - background-color: darken($color-pink, 3%); - } + &:hover { + background-color: darken($color-pink, 3%); } -} + } +} \ No newline at end of file From 25580238b19ae3889da1f1872aff5e3a8f5ff9f6 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:06:42 -0800 Subject: [PATCH 03/20] Make donate button higher contrast --- sass/_vars.scss | 2 +- sass/components/_button.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index 403c170116..0c97b0dc5a 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -22,7 +22,7 @@ $color-black: #000; $color-white: #ffffff; $color-grey-800: #232326; $color-grey-900: #1e1e22; -$color-pink: #bb799c; +$color-pink: #b55387; $color-gold: #d2be4a; $headerbar-color: #1e1e22; diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 9ef38b3682..d5cb644da5 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -35,7 +35,7 @@ &--pink { background-color: $color-pink; - border-color: #865767; + border-color: #c9829a; &:hover { background-color: darken($color-pink, 3%); From 0f7ff1786fb8e5394814cecc3b84ad8d0f2bbc66 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:19:33 -0800 Subject: [PATCH 04/20] Make the header message higher contrast --- sass/components/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 8cab584bbb..91c7c7634f 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -38,7 +38,7 @@ display: none; font-size: 1.28rem; font-weight: 500; - color: #797979; + color: #868686; margin-left: 12px; white-space: nowrap; From cd0c715124bdef5d0873c28366f4bfc3770cb192 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:32:51 -0800 Subject: [PATCH 05/20] Make docs footer higher contrast --- sass/components/_docs-footer.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sass/components/_docs-footer.scss b/sass/components/_docs-footer.scss index fe79caf22e..b71a2106b0 100644 --- a/sass/components/_docs-footer.scss +++ b/sass/components/_docs-footer.scss @@ -1,6 +1,6 @@ .docs-footer { $border-color: #2f3033; - + $secondary-text-color: #8c8c8c; --docs-footer-gap: 12px; margin: 32px 0; @@ -73,7 +73,7 @@ &__dir { margin-bottom: 4px; - color: #666; + color: $secondary-text-color; text-transform: uppercase; font-size: 0.8rem; line-height: 1; @@ -97,11 +97,11 @@ font-size: 0.9rem; @include override-anchor { - color: #555; + color: $secondary-text-color; } &:hover { - color: #aaa; + color: lighten($secondary-text-color, 20%); } .icon { From 431ca81a59305af1d1e62b3aca79fa2c0010f717 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:38:29 -0800 Subject: [PATCH 06/20] Make anchor links higher contrast --- sass/_utils.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/_utils.scss b/sass/_utils.scss index eafe3b301c..1ca713b69d 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -46,7 +46,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .anchor-link:link, .anchor-link:visited { margin-left: 0.3rem; - color: #505050; + color: #737373; text-shadow: none; font-weight: 500; } @@ -70,4 +70,4 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { color: #505050; text-shadow: none; font-weight: 500; -} +} \ No newline at end of file From cf1a43da0d3c98adf87fb25b112e75c648bbb1ca Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:40:13 -0800 Subject: [PATCH 07/20] Remove duplicates in scss --- sass/_utils.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/sass/_utils.scss b/sass/_utils.scss index 1ca713b69d..413d35ba9c 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -42,7 +42,6 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .anchor-link:focus, .anchor-link:hover, .anchor-link:active, -.anchor-link:hover, .anchor-link:link, .anchor-link:visited { margin-left: 0.3rem; @@ -57,17 +56,4 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .draft-header { margin-bottom: 0.5rem; -} - -.anchor-link, -.anchor-link:focus, -.anchor-link:hover, -.anchor-link:active, -.anchor-link:hover, -.anchor-link:link, -.anchor-link:visited { - margin-left: 0.3rem; - color: #505050; - text-shadow: none; - font-weight: 500; } \ No newline at end of file From 2e215165e7b49f8e6d33d8ce54796294f9ebcdcf Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:51:58 -0800 Subject: [PATCH 08/20] Make code blocks higher contrast --- sass/components/_syntax-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss index ea89074585..5b335ebac5 100644 --- a/sass/components/_syntax-theme.scss +++ b/sass/components/_syntax-theme.scss @@ -45,7 +45,7 @@ div.incorrect-image { .z-comment, .z-punctuation.z-definition.z-comment { - color: #65737e; + color: #8e9aa4; } .z-punctuation.z-definition.z-string, @@ -116,7 +116,7 @@ div.incorrect-image { } .z-entity.z-name.z-tag { - color: #e05a67; + color: #e0858d; } .z-entity.z-other.z-attribute-name { From bcb98a1bf34668d9c5bc3a97bf1477dd36ab3520 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:56:49 -0800 Subject: [PATCH 09/20] Make incorrect code blocks higher contrast --- sass/components/_syntax-theme.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss index 5b335ebac5..c3a64250c7 100644 --- a/sass/components/_syntax-theme.scss +++ b/sass/components/_syntax-theme.scss @@ -4,15 +4,16 @@ } div.incorrect { + $incorrect_block_background_color: #481e21; position: relative; - background-color: #542326; + background-color: $incorrect_block_background_color; border-left: 10px solid darkred; border-radius: 10px; padding-right: 55px; .z-code, .z-code code { - background-color: #542326; + background-color: $incorrect_block_background_color; } } From c206d76423f89d75f17751b93f57376049ce20f2 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 12:59:03 -0800 Subject: [PATCH 10/20] Make subtitles higher contrast --- sass/_vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index 0c97b0dc5a..4e609dcf65 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -31,7 +31,7 @@ $hover-shadow-color: #d6d6d6; $link-color: #7c90ff; $link-hover-shadow-color: #6c82ff; $default-color: #ececec; -$subtitle-color: #8f8f8f; +$subtitle-color: #999; $syntax-theme-background: #2b2c2f; $syntax-theme-background-hover: #414247; $default-image-background-color: #1b1b1b; From 374ea409273627d315e367adc67f3a4eb7b65f0c Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 13:10:16 -0800 Subject: [PATCH 11/20] Revert "Remove duplicates in scss" This reverts commit aff7c3df0b228bf15e9d34ba5812f61ab6152d2e. It was out of scope for this PR. Will be dealt with in #971 . --- sass/_utils.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/sass/_utils.scss b/sass/_utils.scss index 413d35ba9c..1ca713b69d 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -42,6 +42,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .anchor-link:focus, .anchor-link:hover, .anchor-link:active, +.anchor-link:hover, .anchor-link:link, .anchor-link:visited { margin-left: 0.3rem; @@ -56,4 +57,17 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .draft-header { margin-bottom: 0.5rem; +} + +.anchor-link, +.anchor-link:focus, +.anchor-link:hover, +.anchor-link:active, +.anchor-link:hover, +.anchor-link:link, +.anchor-link:visited { + margin-left: 0.3rem; + color: #505050; + text-shadow: none; + font-weight: 500; } \ No newline at end of file From ec59445c663386d544ed87ac75d52ec3fd8a8d52 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 14:27:40 -0800 Subject: [PATCH 12/20] Make image compare higher contrast The color used (forest green) is arbitrary and just works; I'm not sure what would be the best universal color. --- sass/components/_image_compare.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss index 482161d7ee..66d8b9c40c 100644 --- a/sass/components/_image_compare.scss +++ b/sass/components/_image_compare.scss @@ -27,9 +27,13 @@ div.image-compare { width: calc(100% - var(--text-padding)); text-shadow: 0 0 2px $color-black; } + + $before-after-color: forestgreen; + &::before { @include image-title; + color: $before-after-color; content: attr(data-title-a); padding-left: var(--text-padding); clip-path: var(--clip-L-geo); @@ -39,6 +43,7 @@ div.image-compare { &::after { @include image-title; + color: $before-after-color; content: attr(data-title-b); padding-right: var(--text-padding); clip-path: var(--clip-R-geo); From abcf6d90a2d89b5107aef605f10c22af376c3592 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 21:42:51 -0800 Subject: [PATCH 13/20] Make button borders stand out less --- sass/components/_button.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/components/_button.scss b/sass/components/_button.scss index d5cb644da5..5bbdac5478 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -4,7 +4,7 @@ display: inline-flex; align-items: center; background-color: $color-blue; - border: 3px solid #6b9ac7; + border: 3px solid lighten($color-blue, 7%); padding: 6px 8px; border-radius: $border-radius; font-size: 1.2rem; @@ -35,10 +35,10 @@ &--pink { background-color: $color-pink; - border-color: #c9829a; + border-color: lighten($color-pink, 7%); &:hover { background-color: darken($color-pink, 3%); } } -} \ No newline at end of file +} From 970b59d4a092999c0576b96216fb2077ea364398 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Fri, 16 Feb 2024 21:43:14 -0800 Subject: [PATCH 14/20] Desaturate buttons --- sass/_vars.scss | 4 ++-- sass/components/_button.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index 4e609dcf65..44ef5f6d32 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -22,7 +22,7 @@ $color-black: #000; $color-white: #ffffff; $color-grey-800: #232326; $color-grey-900: #1e1e22; -$color-pink: #b55387; +$color-pink: #ac5c86; $color-gold: #d2be4a; $headerbar-color: #1e1e22; @@ -63,4 +63,4 @@ $border-radius: 10px; } // Accessibility -$focus-outline: solid #b1d9ff 3px; \ No newline at end of file +$focus-outline: solid #b1d9ff 3px; diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 5bbdac5478..2b5d9476aa 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -1,5 +1,5 @@ .button { - $color-blue: #4573a1; + $color-blue: #4e7398; display: inline-flex; align-items: center; From 550942e290896ead94321a4ca3badf5f5d6ab7b6 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Sat, 17 Feb 2024 10:40:10 -0800 Subject: [PATCH 15/20] Revert "Make white value true white" This reverts commit 2558476247d53b3c34ec30db2d5bcf10bf299a51. --- sass/_vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index 44ef5f6d32..a458d0480d 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -19,7 +19,7 @@ $bp-desktop-up: '(min-width: #{$bp-desktop})'; // Colors $color-black: #000; -$color-white: #ffffff; +$color-white: #ececec; $color-grey-800: #232326; $color-grey-900: #1e1e22; $color-pink: #ac5c86; From 31f921df5874ae9720c36f4d0c5cb078b0f1a5be Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Sat, 17 Feb 2024 10:42:43 -0800 Subject: [PATCH 16/20] Use button colors similar to original Uses the color suggestions provided by `color-id.timjen.net` to minimize the difference whilst ensuring the colors are contrasting. --- sass/_vars.scss | 2 +- sass/components/_button.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/_vars.scss b/sass/_vars.scss index a458d0480d..96e37adf84 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -22,7 +22,7 @@ $color-black: #000; $color-white: #ececec; $color-grey-800: #232326; $color-grey-900: #1e1e22; -$color-pink: #ac5c86; +$color-pink: #9f517a; $color-gold: #d2be4a; $headerbar-color: #1e1e22; diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 2b5d9476aa..552ccbf683 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -1,5 +1,5 @@ .button { - $color-blue: #4e7398; + $color-blue: #4a6e91; display: inline-flex; align-items: center; @@ -41,4 +41,4 @@ background-color: darken($color-pink, 3%); } } -} +} \ No newline at end of file From d04ca1fb233f9976281e252cc9e44081614573a8 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Sat, 17 Feb 2024 10:44:49 -0800 Subject: [PATCH 17/20] Make button borders similar to original In the original the button borders are darker than the primary color. I'd changed it to be lighter thinking it'd fit more; but since stuff is wanted similar to original I'm making the border darker again. --- sass/components/_button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 552ccbf683..6a9bb27847 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -4,7 +4,7 @@ display: inline-flex; align-items: center; background-color: $color-blue; - border: 3px solid lighten($color-blue, 7%); + border: 3px solid darken($color-blue, 10%); padding: 6px 8px; border-radius: $border-radius; font-size: 1.2rem; @@ -35,7 +35,7 @@ &--pink { background-color: $color-pink; - border-color: lighten($color-pink, 7%); + border-color: darken($color-pink, 10%); &:hover { background-color: darken($color-pink, 3%); From 96b8d346dcaeef99d2ad9bbcfd0ef539e1d9ec52 Mon Sep 17 00:00:00 2001 From: TrialDragon Date: Mon, 19 Feb 2024 21:27:50 -0800 Subject: [PATCH 18/20] Add final newline --- sass/_utils.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_utils.scss b/sass/_utils.scss index 413d35ba9c..b7e9acdfab 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -56,4 +56,4 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .draft-header { margin-bottom: 0.5rem; -} \ No newline at end of file +} From b69b0c14429392696e962166da29b8cc03b76803 Mon Sep 17 00:00:00 2001 From: Carter Anderson Date: Wed, 21 Feb 2024 13:17:15 -0800 Subject: [PATCH 19/20] Lighten border instead of darken --- sass/components/_button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/components/_button.scss b/sass/components/_button.scss index ab97892d51..b491cfb952 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -4,7 +4,7 @@ display: inline-flex; align-items: center; background-color: $color-blue; - border: 3px solid darken($color-blue, 10%); + border: 3px solid lighten($color-blue, 13%); padding: 6px 8px; border-radius: $border-radius; font-size: 1.2rem; @@ -35,7 +35,7 @@ &--pink { background-color: $color-pink; - border-color: darken($color-pink, 10%); + border-color: lighten($color-pink, 13%); &:hover { background-color: darken($color-pink, 3%); From 20bdfd91ce1e46426f42191b060f375d22000728 Mon Sep 17 00:00:00 2001 From: Carter Anderson Date: Wed, 21 Feb 2024 13:36:59 -0800 Subject: [PATCH 20/20] Revert forestgreen image-comparison --- sass/components/_image_compare.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss index 84eab6d4e4..c1b007f2d9 100644 --- a/sass/components/_image_compare.scss +++ b/sass/components/_image_compare.scss @@ -28,12 +28,9 @@ div.image-compare { text-shadow: 0 0 2px $color-black; } - $before-after-color: forestgreen; - &::before { @include image-title; - color: $before-after-color; content: attr(data-title-a); padding-left: var(--text-padding); clip-path: var(--clip-L-geo); @@ -44,7 +41,6 @@ div.image-compare { &::after { @include image-title; - color: $before-after-color; content: attr(data-title-b); padding-right: var(--text-padding); clip-path: var(--clip-R-geo);