From 8fe33e498e99bf20ec92a4d18805f3f77b3fdcdd Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Sun, 20 Oct 2024 14:13:21 +0200 Subject: [PATCH 01/23] Consolidate the ` - diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 25b3f88191..e7166af029 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -15,6 +15,8 @@ + + {{ if eq (.Scratch.Get "section") "search" }}{{ end }} {{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }} From 4eaaaef9b54ed6586d1fbfc8b1429d5649b533bb Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Sun, 20 Oct 2024 15:42:26 +0200 Subject: [PATCH 02/23] css: avoid redundant CSS rules The 'layout.scss' file is meant to be included only from the top-level `application.scss` file; It does not contain fancy reusable things like variables or mixins. Signed-off-by: Johannes Schindelin --- assets/sass/book.scss | 1 - assets/sass/downloads.scss | 1 - assets/sass/forms.scss | 1 - assets/sass/front-page.scss | 1 - assets/sass/lists.scss | 1 - assets/sass/man-pages.scss | 1 - assets/sass/reference.scss | 1 - assets/sass/search.scss | 1 - assets/sass/sidebar.scss | 1 - 9 files changed, 9 deletions(-) diff --git a/assets/sass/book.scss b/assets/sass/book.scss index 2fad1c671f..64090ba94d 100644 --- a/assets/sass/book.scss +++ b/assets/sass/book.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; .ebooks img { padding: 5px; diff --git a/assets/sass/downloads.scss b/assets/sass/downloads.scss index 11dd4e2236..074d653d96 100644 --- a/assets/sass/downloads.scss +++ b/assets/sass/downloads.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; #logo-license { @extend .callout; diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss index 847ac5766c..6a70d749d5 100644 --- a/assets/sass/forms.scss +++ b/assets/sass/forms.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; \::-webkit-input-placeholder { color: #9a9994 !important; diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss index f35f397d5d..9168a66ae3 100644 --- a/assets/sass/front-page.scss +++ b/assets/sass/front-page.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; #front-content { @include clearfix; diff --git a/assets/sass/lists.scss b/assets/sass/lists.scss index 0276070a88..29aee546cf 100644 --- a/assets/sass/lists.scss +++ b/assets/sass/lists.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; .content-list { @extend .unstyled !optional; diff --git a/assets/sass/man-pages.scss b/assets/sass/man-pages.scss index 6c7431333f..88f46c50a9 100644 --- a/assets/sass/man-pages.scss +++ b/assets/sass/man-pages.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; #documentation #main { p { diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss index b5ce0ad60b..9aad21121a 100644 --- a/assets/sass/reference.scss +++ b/assets/sass/reference.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; .topics h3, .topics ul li { padding-left: 23px; diff --git a/assets/sass/search.scss b/assets/sass/search.scss index a30023991e..c7d19a664c 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; #search-results { position: absolute; diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss index caeb49fde2..f026691cbd 100644 --- a/assets/sass/sidebar.scss +++ b/assets/sass/sidebar.scss @@ -1,6 +1,5 @@ @import "variables"; @import "mixins"; -@import "layout"; hr.sidebar { width: 218px; From d695dc24d5eaff339cd6bccbfadb8c4c9671e56a Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Fri, 27 Sep 2024 16:35:49 +0200 Subject: [PATCH 03/23] css: remove the `link-*-color` variables They have not been used since 92a2ad8f3 (Kill compass, 2015-03-24). Besides, their names are slightly misleading, suggesting that they refer to a color, when they actually have Boolean values. Removing them will make the next step easier, where we want to bulk convert the actual `*-color` variables from SCSS to CSS custom properties. Signed-off-by: Johannes Schindelin --- assets/sass/variables.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss index b8d27afd10..3c256206e7 100644 --- a/assets/sass/variables.scss +++ b/assets/sass/variables.scss @@ -15,9 +15,6 @@ $light-font-color: #9a9994; $link-color: #0388a6; $link-hover-color: lighten($link-color, 10%); -$link-focus-color: false; -$link-active-color: false; -$link-visited-color: false; $base-font-family-fallback: Roboto Slab, DejaVu Serif, Georgia, Times New Roman, sans-serif; $base-font-family: Adelle, $base-font-family-fallback; From 59a2cba69abf45ff56e7573a12973dddba181ad4 Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Fri, 27 Sep 2024 16:35:14 +0200 Subject: [PATCH 04/23] css: switch to using CSS custom properties CSS custom properties are wildly popular, and have been supported by every major browser (except Internet Explorer, but you're not supposed to use it anymore, even Microsoft says so in https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/ because Internet Explorer has been unsupported since June 15, 2022). There is a slight complication here, though: We use the `darken()` and `lighten()` functions extensively, and they are SASS preprocessor functions, i.e. they are evaluated at compile time, while the actual CSS custom properties are evaluated in the browser. Therefore, we need to move every `darken()`/`lighten()` call into an individual CSS custom property that is evaluated at compile time. This is the first step in preparation for supporting dark mode on https://git-scm.com/. Signed-off-by: Johannes Schindelin --- assets/sass/application.scss | 29 +++++++++++++++++++++++++- assets/sass/book.scss | 10 ++++----- assets/sass/downloads.scss | 10 ++++----- assets/sass/errors.scss | 6 +++--- assets/sass/forms.scss | 6 +++--- assets/sass/front-page.scss | 14 ++++++------- assets/sass/layout.scss | 40 ++++++++++++++++++------------------ assets/sass/lists.scss | 10 ++++----- assets/sass/man-pages.scss | 14 ++++++------- assets/sass/reference.scss | 12 +++++------ assets/sass/search.scss | 24 +++++++++++----------- assets/sass/sidebar.scss | 4 ++-- assets/sass/typography.scss | 36 ++++++++++++++++---------------- assets/sass/variables.scss | 30 +++++++++++++-------------- 14 files changed, 135 insertions(+), 110 deletions(-) diff --git a/assets/sass/application.scss b/assets/sass/application.scss index 9509993b44..c9248ac072 100644 --- a/assets/sass/application.scss +++ b/assets/sass/application.scss @@ -37,7 +37,7 @@ pre { background-color: #fff; border: solid 1px #efeee6; border-radius: 3px; - color: $orange; + color: var(--orange); display: block; font-family: $fixed-width-font-family; font-variant-ligatures: none; @@ -50,3 +50,30 @@ pre { .d-flex{ display: flex; } + +html { + --orange: #{$orange}; + --orange-darker-5: #{darken($orange, 5%)}; + --blue: #{$blue}; + --font-color: #{$font-color}; + --aside-font-color: #{lighten($font-color, 20%)}; + --light-font-color: #{$light-font-color}; + --light-font-color-darker-10: #{darken($light-font-color, 10%)}; + --light-font-color-darker-25: #{darken($light-font-color, 25%)}; + --light-font-color-darker-35: #{darken($light-font-color, 35%)}; + --light-font-color-darker-55: #{darken($light-font-color, 55%)}; + --light-font-color-lighter-20: #{lighten($light-font-color, 20%)}; + --link-color: #{$link-color}; + --link-hover-color: #{lighten($link-color, 10%)}; + --fixed-width-font-color: #{$fixed-width-font-color}; + --base-border-color: #{$base-border-color}; + --base-border-color-darker-8: #{darken($base-border-color, 8%)}; + --base-border-color-lighter-10: #{lighten($base-border-color, 10%)}; + --callout-color: #{$callout-color}; + --highlight-bg-color: #{$highlight-bg-color}; + + --black-3: #{$black-3}; + --main-bg: #{$main-bg}; + --button-bg-color: #{$button-bg-color}; + --button-bg-hover-color: #{$button-bg-hover-color}; +} diff --git a/assets/sass/book.scss b/assets/sass/book.scss index 64090ba94d..8f9f926c6a 100644 --- a/assets/sass/book.scss +++ b/assets/sass/book.scss @@ -12,7 +12,7 @@ padding-bottom: 20px !important; background-color: transparent !important; overflow: hidden; - border: solid 1px lighten($base-border-color, 10%); + border: solid 1px var(--base-border-color-lighter-10); } #book-intro { @@ -35,7 +35,7 @@ .license { font-size: 11px; line-height: 1.3; - color: $light-font-color; + color: var(--light-font-color); } a#open-book { @@ -51,7 +51,7 @@ display: none; padding-left: 22px; font-size: 12px; - color: $light-font-color; + color: var(--light-font-color); text-align: center; text-indent: 40px; @@ -73,7 +73,7 @@ ol.book-toc { } h2 { - color: $font-color; + color: var(--font-color); } a { @@ -139,7 +139,7 @@ ol.book-toc { &.active { font-weight: bold; - color: $orange; + color: var(--orange); } } } diff --git a/assets/sass/downloads.scss b/assets/sass/downloads.scss index 074d653d96..14ddc6784e 100644 --- a/assets/sass/downloads.scss +++ b/assets/sass/downloads.scss @@ -9,7 +9,7 @@ p { font-size: 12px; line-height: 1.4; - color: $light-font-color; + color: var(--light-font-color); } p + p { @@ -55,7 +55,7 @@ a { display: block; - color: $font-color; + color: var(--font-color); text-align: center; background-repeat: no-repeat; background-position: 0 0; @@ -74,7 +74,7 @@ h3 { font-size: 18px; font-weight: bold; - color: $orange; + color: var(--orange); } p { @@ -89,7 +89,7 @@ } h3 { - color: darken($orange, 5%); + color: var(--orange-darker-5); } } } @@ -99,7 +99,7 @@ top: 8px; left: 12px; display: none; - color: $orange; + color: var(--orange); } .downloading .hide { diff --git a/assets/sass/errors.scss b/assets/sass/errors.scss index eb3d6226c0..4ae889214b 100644 --- a/assets/sass/errors.scss +++ b/assets/sass/errors.scss @@ -5,7 +5,7 @@ body { font-size: $base-font-size; line-height: $base-line-height; font-family: $base-font-family; - color: $font-color; + color: var(--font-color); background: #f0efe7 url($baseurl + "images/bg/body.jpg"); } @@ -43,9 +43,9 @@ nav ul { li { a { display: block; - color: $orange; + color: var(--orange); &:hover { - color: darken($orange, 5%); + color: var(--orange-darker-5); } } } diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss index 6a70d749d5..91a3a143c2 100644 --- a/assets/sass/forms.scss +++ b/assets/sass/forms.scss @@ -14,7 +14,7 @@ input.inactive { } input.active { - color: $font-color !important; + color: var(--font-color) !important; } input, textarea { @@ -38,7 +38,7 @@ form#search { width: 262px; padding-left: 32px; @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%); - background-color: $main-bg !important; + background-color: var(--main-bg) !important; border: solid 1px #ceccc5; @include border-radius(20px); @include box-shadow(inset 0 1px 4px #ddd); @@ -50,7 +50,7 @@ form#search { margin-top: 4px; margin-bottom: 2px; line-height: 1em; - color: $font-color; + color: var(--font-color); background-color: transparent; border: 0; } diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss index 9168a66ae3..3df3a055f3 100644 --- a/assets/sass/front-page.scss +++ b/assets/sass/front-page.scss @@ -9,7 +9,7 @@ float: left; width: 618px; margin-bottom: 24px; - border-right: solid 1px $base-border-color; + border-right: solid 1px var(--base-border-color); } } @@ -42,7 +42,7 @@ display: block; height: 86px; padding-left: 90px; - color: $font-color; + color: var(--font-color); background-repeat: no-repeat; background-position: 0 0; transition-duration: 0.3s; @@ -60,7 +60,7 @@ h3 { font-size: 18px; font-weight: bold; - color: $orange; + color: var(--orange); } p { @@ -75,7 +75,7 @@ } h3 { - color: darken($orange, 5%); + color: var(--orange-darker-5); } } } @@ -84,7 +84,7 @@ float: left; width: 590px; padding-top: 20px; - border-top: solid 1px $base-border-color; + border-top: solid 1px var(--base-border-color); img { float: left; @@ -202,7 +202,7 @@ $monitor-height: 271px; #companies-projects { padding-top: 20px; clear: both; - border-top: solid 1px $base-border-color; + border-top: solid 1px var(--base-border-color); ul { @extend .unstyled !optional; @@ -394,7 +394,7 @@ a.icon { } } #front-downloads { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid var(--base-border-color); margin-bottom: 2rem; padding-bottom: 1rem; .monitor, table { diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index b32c661e16..598b66931b 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -7,7 +7,7 @@ body { font-family: $base-font-family; font-size: $base-font-size; line-height: $base-line-height; - color: $font-color; + color: var(--font-color); background: #f0efe7 url($baseurl + "images/bg/body.jpg"); } @@ -40,7 +40,7 @@ aside { #main { padding: 22px; margin-bottom: 35px; - background-color: $main-bg; + background-color: var(--main-bg); border: solid 1px #e2e0d8; @include border-radius(5px); @@ -59,7 +59,7 @@ aside { } .callout { - background-color: $callout-color; + background-color: var(--callout-color); @include border-radius(3px); padding: 8px 14px 4px; margin-bottom: 1.4em; @@ -122,7 +122,7 @@ header { margin-top: 1px; font-size: 24px; line-height: 24px; - color: $light-font-color; + color: var(--light-font-color); em { letter-spacing: 1px; @@ -145,7 +145,7 @@ aside nav ul { color: #413932; &.active, &:hover { - color: $orange; + color: var(--orange); } } @@ -208,7 +208,7 @@ p.center { p { font-size: 12px; line-height: 1.4; - color: $light-font-color; + color: var(--light-font-color); } p + p { @@ -222,12 +222,12 @@ p.center { } .callout.downloading { - background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat; + background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat; padding: 20px 30px 20px 100px !important; h3 { font-size: 18px; - color: $orange; + color: var(--orange); } p { @@ -240,7 +240,7 @@ p.center { margin-bottom: 0 !important; font-size: 12px; line-height: 1.4; - color: $light-font-color; + color: var(--light-font-color); } } @@ -301,7 +301,7 @@ a.dropdown-trigger { background-color: #fff !important; @include border-top-left-radius(3px); @include border-top-right-radius(3px); - border: solid 1px darken($base-border-color, 8%); + border: solid 1px var(--base-border-color-darker-8); border-bottom: 0; } } @@ -311,7 +311,7 @@ a.dropdown-trigger { z-index: 199; display: none; background-color: #fff; - border: solid 1px darken($base-border-color, 8%); + border: solid 1px var(--base-border-color-darker-8); @include border-radius(3px); @include box-shadow(0 1px 2px #ccc); @@ -332,14 +332,14 @@ footer { @include clearfix; font-size: 12px; line-height: $base-line-height * 0.7; - color: $light-font-color; - border-top: solid 1px $base-border-color; + color: var(--light-font-color); + border-top: solid 1px var(--base-border-color); a { - color: darken($light-font-color, 35%); + color: var(--light-font-color-darker-35); &:hover { - color: darken($light-font-color, 55%); + color: var(--light-font-color-darker-55); } } @@ -385,7 +385,7 @@ table.benchmarks { @include border-radius(50px); display: none; position: fixed; - background-color: rgba(223, 221, 213, 0.33); + background-color: var(--button-bg-color); right: 20px; bottom: 6.25rem; padding: 0.8rem; @@ -393,7 +393,7 @@ table.benchmarks { transition: background-color 0.2s; width: 20px; &:hover{ - background-color: rgba(250, 250, 250, 0.9); + background-color: var(--button-bg-hover-color); @include box-shadow(2px); &::before { @include center-transformX; @@ -402,7 +402,7 @@ table.benchmarks { color: var(--color-neutral-emphasis-plus); content: ""; border: 6px solid transparent; - border-color:$black-3 transparent transparent; + border-color:var(--black-3) transparent transparent; top: -0.55rem; position: absolute; } @@ -415,8 +415,8 @@ table.benchmarks { word-wrap: break-word; white-space: pre; padding: .5em .75em; - color:$callout-color; - background-color:$black-3; + color:var(--callout-color); + background-color:var(--black-3); font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; } } diff --git a/assets/sass/lists.scss b/assets/sass/lists.scss index 29aee546cf..fbdf707266 100644 --- a/assets/sass/lists.scss +++ b/assets/sass/lists.scss @@ -27,7 +27,7 @@ ul.gui-thumbnails { display: block; padding: 3px; margin-bottom: 5px; - border: solid 1px $base-border-color; + border: solid 1px var(--base-border-color); } } } @@ -96,7 +96,7 @@ ol#about-nav { font-size: 13px; line-height: 20px; text-align: center; - color: $font-color; + color: var(--font-color); opacity: 0.9; @include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px); @@ -144,14 +144,14 @@ ul.stackoverflow { span { display: block; - color: $light-font-color; + color: var(--light-font-color); strong { - color: darken($light-font-color, 10%); + color: var(--light-font-color-darker-10); } em { - color: lighten($light-font-color, 20%); + color: var(--light-font-color-lighter-20); } } } diff --git a/assets/sass/man-pages.scss b/assets/sass/man-pages.scss index 88f46c50a9..b3999b92a8 100644 --- a/assets/sass/man-pages.scss +++ b/assets/sass/man-pages.scss @@ -8,7 +8,7 @@ font-variant-ligatures: none; font-style: normal; font-weight: bold; - color: $fixed-width-font-color; + color: var(--fixed-width-font-color); } tt { @@ -47,7 +47,7 @@ font-family: $fixed-width-font-family !important; line-height: $fixed-width-line-height; font-variant-ligatures: none; - color: $fixed-width-font-color; + color: var(--fixed-width-font-color); word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: pre; white-space: pre-wrap; /* css-3 */ @@ -71,11 +71,11 @@ .quoteblock { padding-left: 1em; margin-left: 1em; - border-left: 5px solid $base-border-color; + border-left: 5px solid var(--base-border-color); .content { .paragraph p { - color: $light-font-color; + color: var(--light-font-color); } } } @@ -89,17 +89,17 @@ .title { font-weight: bold; - color: $orange; + color: var(--orange); } &:first-child { - border-right: solid 2px $base-border-color; + border-right: solid 2px var(--base-border-color); } } } } #footer { - color: $light-font-color; + color: var(--light-font-color); } } diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss index 9aad21121a..65a00ac822 100644 --- a/assets/sass/reference.scss +++ b/assets/sass/reference.scss @@ -130,7 +130,7 @@ h3.plumbing { margin-top: 0; font-size: 11px; font-weight: normal; - color: $font-color; + color: var(--font-color); background-color: #eae9e0; @include border-bottom-left-radius(3px); @include border-bottom-right-radius(3px); @@ -140,7 +140,7 @@ h3.plumbing { // for

at the beginning of "typography.scss". all: unset; display: block; - color: $light-font-color; + color: var(--light-font-color); } } } @@ -256,7 +256,7 @@ ol.reference-previous-versions { font-size: 11px; font-style: normal; font-weight: normal; - color: $light-font-color; + color: var(--light-font-color); } &.more { @@ -275,7 +275,7 @@ ol.reference-previous-versions { font-size: 11px; font-weight: normal; line-height: 1.2; - color: $light-font-color; + color: var(--light-font-color); text-align: center; span { @@ -312,7 +312,7 @@ ol.reference-previous-versions { .callout.ref-manual { @include background-image-2x($baseurl + "images/icons/book", 54px, 72px, 24px 20px); padding: 20px 30px 20px 100px !important; - background-color: $callout-color; + background-color: var(--callout-color); iframe { max-width: 100%; } @@ -351,7 +351,7 @@ p.quickref { #video-container { padding: 10px 10px 2px; margin-bottom: 20px; - background-color: $callout-color; + background-color: var(--callout-color); } code.command { diff --git a/assets/sass/search.scss b/assets/sass/search.scss index c7d19a664c..b339ef7249 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -11,7 +11,7 @@ background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x; @include border-radius(3px); @include box-shadow(0 0 7px rgba(0, 0, 0, 0.25)); - border-bottom: solid 1px $base-border-color; + border-bottom: solid 1px var(--base-border-color); header { height: 44px; @@ -38,7 +38,7 @@ width: 67px; padding: 10px 12px 0 0; font-size: 11px; - color: $blue; + color: var(--blue); text-align: right; vertical-align: top; background-color: #f5fbfb; @@ -55,7 +55,7 @@ padding: 5px 12px; margin-bottom: 0; font-weight: bold; - color: $font-color; + color: var(--font-color); transition-duration: 0s; &:hover, @@ -115,10 +115,10 @@ ol.full-search-results { display: block; margin-bottom: 0.4em; font-size: 12px; - color: $light-font-color; + color: var(--light-font-color); &:hover { - color: darken($light-font-color, 25%); + color: var(--light-font-color-darker-25); } } } @@ -145,13 +145,13 @@ ol.full-search-results { // Search results page #search-div { - border: solid 1px $base-border-color; - background: $main-bg; + border: solid 1px var(--base-border-color); + background: var(--main-bg); padding: 22px; @include border-radius(5px); ol { - background-color: $callout-color; + background-color: var(--callout-color); @include border-radius(3px); padding: 8px 14px 4px; margin: 0 0 1.4em; @@ -167,16 +167,16 @@ ol.full-search-results { .pagefind-ui__result-tags { list-style: none; - color: $light-font-color; + color: var(--light-font-color); margin-bottom: 1.4em; margin-left: 0; } } button { - border-color: $link-color; - color: $link-color; - background: $callout-color; + border-color: var(--link-color); + color: var(--link-color); + background: var(--callout-color); font-weight: bold; @include border-radius(3px); outline: none; diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss index f026691cbd..5e11230c53 100644 --- a/assets/sass/sidebar.scss +++ b/assets/sass/sidebar.scss @@ -19,7 +19,7 @@ aside.sidebar { .callout { padding: 20px; - color: lighten($font-color, 20%); + color: var(--aside-font-color); background-color: #ebe9e1; background-color: rgba(223, 221, 213, 0.33); @include border-radius(3px); @@ -43,7 +43,7 @@ aside.sidebar.active { @include background-image-2x($baseurl + "images/icons/sidebar", 24px, 24px, left center); @include border-top-right-radius(5px); @include border-bottom-right-radius(5px); - background-color: $black-3 !important; + background-color: var(--black-3) !important; display: block; position: fixed; padding: 2rem 0rem; diff --git a/assets/sass/typography.scss b/assets/sass/typography.scss index 5e8a840906..ac6248b2e0 100644 --- a/assets/sass/typography.scss +++ b/assets/sass/typography.scss @@ -11,12 +11,12 @@ p { small { font-size: $base-font-size - 2; - color: $light-font-color; + color: var(--light-font-color); } } a { - color: $link-color; + color: var(--link-color); text-decoration: none; transition-duration: 0.3s; transition-property: color; @@ -33,12 +33,12 @@ h5, h6 { margin: 0; font-weight: normal; - color: $font-color; + color: var(--font-color); text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; - color: $light-font-color; + color: var(--light-font-color); } } @@ -57,7 +57,7 @@ h2 { font-size: 18px; font-weight: bold; line-height: $base-line-height * 2; - color: $orange; + color: var(--orange); small { font-size: 18px; @@ -95,7 +95,7 @@ h4 { aside h4 { margin-bottom: 1em; - color: $light-font-color; + color: var(--light-font-color); line-height: 1.4; } @@ -105,7 +105,7 @@ h5 { h6 { font-size: 11px; - color: $light-font-color; + color: var(--light-font-color); text-transform: uppercase; } @@ -188,7 +188,7 @@ dd { hr { margin: $base-line-height 0; border: 0; - border-top: 1px solid $base-border-color; + border-top: 1px solid var(--base-border-color); } // Emphasis @@ -201,7 +201,7 @@ em { } .muted { - color: $light-font-color; + color: var(--light-font-color); } // Abbreviations and acronyms @@ -219,7 +219,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; margin: 0 0 $base-line-height; - border-left: 5px solid $base-border-color; + border-left: 5px solid var(--base-border-color); p { margin-bottom: 0; @@ -228,7 +228,7 @@ blockquote { small { display: block; line-height: $base-line-height; - color: $light-font-color; + color: var(--light-font-color); &:before { content: '\2014 \00A0'; @@ -240,7 +240,7 @@ blockquote { float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid $base-border-color; + border-right: 5px solid var(--base-border-color); border-left: 0; p, @@ -259,7 +259,7 @@ code { font-family: $fixed-width-font-family; line-height: $fixed-width-line-height; font-variant-ligatures: none; - color: $orange; + color: var(--orange); background-color: #fff; border: solid 1px #efeee6; } @@ -292,7 +292,7 @@ table { th, td { padding: 2px 0; - border-bottom: solid 1px lighten($base-border-color, 10%); + border-bottom: solid 1px var(--base-border-color-lighter-10); } } @@ -303,13 +303,13 @@ table { td.compare { font-weight: bold; - color: $orange; + color: var(--orange); } } // Misc .light { - color: $light-font-color; + color: var(--light-font-color); } small { @@ -336,7 +336,7 @@ a.subtle-button { transition-property: background-image; &:hover { - color: $link-color; + color: var(--link-color); background-image: linear-gradient(#edede3, #e6e5db); } } @@ -359,7 +359,7 @@ div.more { } .highlight { - background-color: #eee0b5; + background-color: var(--highlight-bg-color); padding: 2px; } diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss index 3c256206e7..df4eb3d00a 100644 --- a/assets/sass/variables.scss +++ b/assets/sass/variables.scss @@ -1,6 +1,17 @@ // Palette -$orange: #f14e32; -$blue: #009099; +$orange: #f14e32; +$blue: #009099; +$font-color: #4e443c; +$light-font-color: #9a9994; +$link-color: #0388a6; +$fixed-width-font-color: #4e443c; +$base-border-color: #d8d7cf; +$callout-color: #e9e8e0; +$highlight-bg-color: #eee0b5; +$black-3: #333333; +$main-bg: #fcfcfa; +$button-bg-color: rgba(223, 221, 213, 0.33); +$button-bg-hover-color: rgba(250, 250, 250, 0.9); // breakpoints $mobile-xs: 480px; @@ -10,23 +21,10 @@ $tablet: 768px; $default: 940px; $page-width: $default; -$font-color: #4e443c; -$light-font-color: #9a9994; - -$link-color: #0388a6; -$link-hover-color: lighten($link-color, 10%); - $base-font-family-fallback: Roboto Slab, DejaVu Serif, Georgia, Times New Roman, sans-serif; $base-font-family: Adelle, $base-font-family-fallback; $base-font-size: 14px; $base-line-height: 22px; $fixed-width-font-family: Courier, monospace; -$fixed-width-font-color: #4e443c; -$fixed-width-line-height: 18px; - -$base-border-color: #d8d7cf; -$callout-color: #e9e8e0; - -$black-3 : #333333; -$main-bg: #fcfcfa; +$fixed-width-line-height: 18px; \ No newline at end of file From 9a02604e11d4008d17126f93f06f2c0e41a4368b Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Fri, 27 Sep 2024 19:51:36 +0200 Subject: [PATCH 05/23] Offer a dark mode if indicated by the operating system Many operating systems let users choose between light and dark themes directly in the system settings. Web browsers can react to that via a @media query, which we do here. This commit draws heavily on the excellent guidance provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ as well as on SASS' `@mixin` feature (for more details, see https://sass-lang.com/documentation/at-rules/mixin/). Signed-off-by: Johannes Schindelin --- assets/sass/application.scss | 28 +---------------- assets/sass/dark-mode.css | 61 ++++++++++++++++++++++++++++++++++++ assets/sass/variables.scss | 15 --------- 3 files changed, 62 insertions(+), 42 deletions(-) create mode 100644 assets/sass/dark-mode.css diff --git a/assets/sass/application.scss b/assets/sass/application.scss index c9248ac072..6923371585 100644 --- a/assets/sass/application.scss +++ b/assets/sass/application.scss @@ -27,6 +27,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR @import 'book2'; @import 'lists'; @import 'about'; +@import 'dark-mode'; code { display: inline; @@ -50,30 +51,3 @@ pre { .d-flex{ display: flex; } - -html { - --orange: #{$orange}; - --orange-darker-5: #{darken($orange, 5%)}; - --blue: #{$blue}; - --font-color: #{$font-color}; - --aside-font-color: #{lighten($font-color, 20%)}; - --light-font-color: #{$light-font-color}; - --light-font-color-darker-10: #{darken($light-font-color, 10%)}; - --light-font-color-darker-25: #{darken($light-font-color, 25%)}; - --light-font-color-darker-35: #{darken($light-font-color, 35%)}; - --light-font-color-darker-55: #{darken($light-font-color, 55%)}; - --light-font-color-lighter-20: #{lighten($light-font-color, 20%)}; - --link-color: #{$link-color}; - --link-hover-color: #{lighten($link-color, 10%)}; - --fixed-width-font-color: #{$fixed-width-font-color}; - --base-border-color: #{$base-border-color}; - --base-border-color-darker-8: #{darken($base-border-color, 8%)}; - --base-border-color-lighter-10: #{lighten($base-border-color, 10%)}; - --callout-color: #{$callout-color}; - --highlight-bg-color: #{$highlight-bg-color}; - - --black-3: #{$black-3}; - --main-bg: #{$main-bg}; - --button-bg-color: #{$button-bg-color}; - --button-bg-hover-color: #{$button-bg-hover-color}; -} diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css new file mode 100644 index 0000000000..0202271b0a --- /dev/null +++ b/assets/sass/dark-mode.css @@ -0,0 +1,61 @@ +@mixin mode($mode: light) { + // Palette + $orange: #f14e32; + $blue: #009099; + $font-color: #4e443c; + $aside-font-color: lighten($font-color, 20%); + $light-font-color: #9a9994; + $link-color: #0388a6; + $fixed-width-font-color: #4e443c; + $base-border-color: #d8d7cf; + $callout-color: #e9e8e0; + $highlight-bg-color: #eee0b5; + $black-3: #333333; + $main-bg: #fcfcfa; + + @if $mode == dark { + $orange: #d7834f; + $blue: #007a7e; + $font-color: #b3b1b1; + $aside-font-color: darken($font-color, 10%); + $light-font-color: #bdbbb0; + $link-color: #5facaf; + $fixed-width-font-color: #afa7a0; + $base-border-color: #b3b2a7; + $callout-color: #555555; + $highlight-bg-color: #7d724f; + $black-3: #cccccc; + $main-bg: #333333; + } + + :root { + --orange: #{$orange}; + --orange-darker-5: #{darken($orange, 5%)}; + --blue: #{$blue}; + --font-color: #{$font-color}; + --aside-font-color: #{$aside-font-color}; + --light-font-color: #{$light-font-color}; + --light-font-color-darker-10: #{darken($light-font-color, 10%)}; + --light-font-color-darker-25: #{darken($light-font-color, 25%)}; + --light-font-color-darker-35: #{darken($light-font-color, 35%)}; + --light-font-color-darker-55: #{darken($light-font-color, 55%)}; + --light-font-color-lighter-20: #{lighten($light-font-color, 20%)}; + --link-color: #{$link-color}; + --link-hover-color: #{lighten($link-color, 10%)}; + --fixed-width-font-color: #{$fixed-width-font-color}; + --base-border-color: #{$base-border-color}; + --base-border-color-darker-8: #{darken($base-border-color, 8%)}; + --base-border-color-lighter-10: #{lighten($base-border-color, 10%)}; + --callout-color: #{$callout-color}; + --highlight-bg-color: #{$highlight-bg-color}; + + --black-3: #{$black-3}; + --main-bg: #{$main-bg}; + } +} + +@include mode + +@media screen and (prefers-color-scheme: dark) { + @include mode($mode: dark) +} diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss index df4eb3d00a..abe1d147f6 100644 --- a/assets/sass/variables.scss +++ b/assets/sass/variables.scss @@ -1,18 +1,3 @@ -// Palette -$orange: #f14e32; -$blue: #009099; -$font-color: #4e443c; -$light-font-color: #9a9994; -$link-color: #0388a6; -$fixed-width-font-color: #4e443c; -$base-border-color: #d8d7cf; -$callout-color: #e9e8e0; -$highlight-bg-color: #eee0b5; -$black-3: #333333; -$main-bg: #fcfcfa; -$button-bg-color: rgba(223, 221, 213, 0.33); -$button-bg-hover-color: rgba(250, 250, 250, 0.9); - // breakpoints $mobile-xs: 480px; $mobile-s: 576px; From edd6c2c48bfbb51de97a82a06f4df84c4bd6991b Mon Sep 17 00:00:00 2001 From: Johannes Schindelin Date: Fri, 27 Sep 2024 21:37:23 +0200 Subject: [PATCH 06/23] Add a dark/light mode toggle In the preceding commit, I added support for a dark mode, heeding the operating system's indicated preference. However, many users will want to be able to switch from/to dark/light mode without switching the rest of their operating system. Guided by the excellent advice provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ and in https://dev.to/ayc0/light-dark-mode-avoid-flickering-on-reload-1567, this commit introduces a button to toggle dark/light mode. To avoid flickering, the idea is to: - store the user preference in the local storage, - using Javascript, in the `` section of the HTML page (so that it is executed _before_ anything is displayed), heed that stored user preference (if any) by setting the `theme` attribute in the `document`'s `dataset`, and finally - use that `theme` via CSS: :root[data-theme="dark"] { ... } Signed-off-by: Johannes Schindelin --- assets/js/application.js | 33 +++++++++++++++++++++++++++++++++ assets/sass/dark-mode.css | 27 +++++++++++++++++++++++++-- layouts/_default/baseof.html | 14 +++++++++++++- layouts/partials/header.html | 1 + 4 files changed, 72 insertions(+), 3 deletions(-) diff --git a/assets/js/application.js b/assets/js/application.js index 0610b18cb5..87577a18aa 100644 --- a/assets/js/application.js +++ b/assets/js/application.js @@ -29,6 +29,7 @@ const baseURLPrefix = (() => { $(document).ready(function() { BrowserFallbacks.init(); + DarkMode.init(); Search.init(); Dropdowns.init(); Forms.init(); @@ -541,6 +542,38 @@ var Downloads = { }, } +var DarkMode = { + init: function() { + const button = $('#dark-mode-button'); + if (!button.length) return; + button.show(3000); + + // Check for dark mode preference at the OS level + const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + + // Get the user's theme preference from local storage, if it's available + const currentTheme = localStorage.getItem("theme"); + + if ((prefersDarkScheme && currentTheme !== "light") + || (!prefersDarkScheme && currentTheme === "dark")) { + button.text("🌞"); + } + + button.click(function(e) { + e.preventDefault(); + let theme + if (prefersDarkScheme) { + theme = document.documentElement.dataset.theme === "light" ? "dark" : "light" + } else { + theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark" + } + document.documentElement.dataset.theme = theme + localStorage.setItem("theme", theme); + button.text(theme === "dark" ? "🌞" : "πŸŒ™"); + }); + }, +} + // Scroll to Top $('#scrollToTop').removeClass('no-js'); $(window).scroll(function() { diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css index 0202271b0a..5312e34118 100644 --- a/assets/sass/dark-mode.css +++ b/assets/sass/dark-mode.css @@ -1,4 +1,4 @@ -@mixin mode($mode: light) { +@mixin mode($mode: light, $theme: "") { // Palette $orange: #f14e32; $blue: #009099; @@ -7,6 +7,8 @@ $light-font-color: #9a9994; $link-color: #0388a6; $fixed-width-font-color: #4e443c; + $button-bg-color: rgba(223, 221, 213, 0.33); + $button-bg-hover-color: rgba(250, 250, 250, 0.9); $base-border-color: #d8d7cf; $callout-color: #e9e8e0; $highlight-bg-color: #eee0b5; @@ -21,6 +23,7 @@ $light-font-color: #bdbbb0; $link-color: #5facaf; $fixed-width-font-color: #afa7a0; + $button-bg-hover-color: rgba(223, 221, 213, 0.6); $base-border-color: #b3b2a7; $callout-color: #555555; $highlight-bg-color: #7d724f; @@ -28,7 +31,7 @@ $main-bg: #333333; } - :root { + :root#{$theme} { --orange: #{$orange}; --orange-darker-5: #{darken($orange, 5%)}; --blue: #{$blue}; @@ -43,6 +46,8 @@ --link-color: #{$link-color}; --link-hover-color: #{lighten($link-color, 10%)}; --fixed-width-font-color: #{$fixed-width-font-color}; + --button-bg-color: #{$button-bg-color}; + --button-bg-hover-color: #{$button-bg-hover-color}; --base-border-color: #{$base-border-color}; --base-border-color-darker-8: #{darken($base-border-color, 8%)}; --base-border-color-lighter-10: #{lighten($base-border-color, 10%)}; @@ -55,7 +60,25 @@ } @include mode +@include mode($mode: dark, $theme: '[data-theme="dark"]') @media screen and (prefers-color-scheme: dark) { @include mode($mode: dark) + @include mode($mode: light, $theme: '[data-theme="light"]') +} + +#dark-mode-button { + display: none; + z-index: 10; + position: fixed; + right: 20px; + bottom: 2rem; + border-radius: 50px; + border: 2px solid transparent; + font-size: x-large; + padding: 10px 5px 10px 5px; + background-color: var(--button-bg-color); + &:hover { + background-color: var(--button-bg-hover-color); + } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 48ca197d06..8e10ba5b59 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -42,8 +42,20 @@

Redirecting…

{{ warnf "No section found in %s" (.Page.Path | jsonify) }} {{ end }} {{ .Scratch.Set "section" $section }} - + + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index eae2f28016..8fb7a498cb 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -14,6 +14,7 @@ document.getElementById('tagline').innerHTML = '--' + tagline; + πŸŒ™ {{ if ne (.Scratch.Get "section") "search" }}