From 428e7acf158ac6dcd63c988eda346074e229e312 Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:07:55 +0100 Subject: [PATCH 1/6] Move the syntax highlighting styles into the components folder --- src/_scss/base/code.scss | 8 -------- .../pygments.scss => components/syntax_highlighting.scss} | 8 ++++++++ src/static/style.scss | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) rename src/_scss/{base/pygments.scss => components/syntax_highlighting.scss} (96%) diff --git a/src/_scss/base/code.scss b/src/_scss/base/code.scss index 9a56c1760..12b7e20cf 100644 --- a/src/_scss/base/code.scss +++ b/src/_scss/base/code.scss @@ -13,14 +13,6 @@ code { font-size: calc(1em * var(--code-scaling-factor)); } -// Disable selecting the $ or the following space in ``console`` code blocks. -// See https://alexwlchan.net/2021/10/console-copying/ -.language-console { - .gp, .gp + .w { - @include disable_select(); - } -} - pre { padding: calc(2 * var(--default-padding) / 3) diff --git a/src/_scss/base/pygments.scss b/src/_scss/components/syntax_highlighting.scss similarity index 96% rename from src/_scss/base/pygments.scss rename to src/_scss/components/syntax_highlighting.scss index 6d17d67c4..7bfbc38ba 100644 --- a/src/_scss/base/pygments.scss +++ b/src/_scss/components/syntax_highlighting.scss @@ -186,3 +186,11 @@ pre { } } } + +// Disable selecting the $ or the following space in ``console`` code blocks. +// See https://alexwlchan.net/2021/10/console-copying/ +.language-console { + .gp, .gp + .w { + @include disable_select(); + } +} diff --git a/src/static/style.scss b/src/static/style.scss index 670705b19..7885c8093 100644 --- a/src/static/style.scss +++ b/src/static/style.scss @@ -18,10 +18,10 @@ @import "base/latex.scss"; @import "base/nav.scss"; @import "base/post_cards.scss"; -@import "base/pygments.scss"; @import "base/tweets.scss"; @import "components/pretty_hr.scss"; +@import "components/syntax_highlighting.scss"; $primary-color-light: #d01c11; $primary-color-dark: #ff4242; From a136d4b1361756786a7d35f0ad777a5d1a7909d3 Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:08:31 +0100 Subject: [PATCH 2/6] Remove a now-unused `_settings.scss` file --- src/_plugins/filter_inline_style.rb | 1 - src/_scss/_main.scss | 2 -- src/_scss/_settings.scss | 2 -- 3 files changed, 5 deletions(-) delete mode 100644 src/_scss/_settings.scss diff --git a/src/_plugins/filter_inline_style.rb b/src/_plugins/filter_inline_style.rb index 1ff1c9f24..ca3078ccd 100644 --- a/src/_plugins/filter_inline_style.rb +++ b/src/_plugins/filter_inline_style.rb @@ -39,7 +39,6 @@ def self.get_inline_styles(html, site) converter = site.find_converter_instance(Jekyll::Converters::Scss) css = converter.convert(<<~SCSS @import "mixins.scss"; - @import "_settings.scss"; @import "variables.scss"; #{style.text} diff --git a/src/_scss/_main.scss b/src/_scss/_main.scss index b7631317d..410b962c3 100644 --- a/src/_scss/_main.scss +++ b/src/_scss/_main.scss @@ -1,8 +1,6 @@ @use "sass:math"; @import "variables.scss"; - -@import "_settings.scss"; @import "mixins.scss"; h1, h2, diff --git a/src/_scss/_settings.scss b/src/_scss/_settings.scss deleted file mode 100644 index 105cd9300..000000000 --- a/src/_scss/_settings.scss +++ /dev/null @@ -1,2 +0,0 @@ -$primary-color-light: #d01c11 !default; -$primary-color-dark: #d01c11 !default; From b6ea387f38b1dab2c732aa88bb2b307b03b4337d Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:10:42 +0100 Subject: [PATCH 3/6] Consolidate a couple of styles out of `_main.scss` --- src/_scss/_main.scss | 20 -------------------- src/_scss/base/footer.scss | 2 ++ src/_scss/base/nav.scss | 9 +++++++++ 3 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/_scss/_main.scss b/src/_scss/_main.scss index 410b962c3..7ab5621ce 100644 --- a/src/_scss/_main.scss +++ b/src/_scss/_main.scss @@ -49,23 +49,3 @@ pre, blockquote { border-color: var(--block-border-color); background-color: var(--block-background-color); } - -nav { - background: var(--nav-background-url) var(--primary-color-light); - background-size: auto 100%; -} - -footer { - background: var(--primary-color-light); -} - -@media print { - nav { - background: none; - border-bottom: var(--border-width) solid var(--base-color); - } - - #nav_inner { - color: var(--base-color); - } -} diff --git a/src/_scss/base/footer.scss b/src/_scss/base/footer.scss index e6c72c51b..3d7488d0d 100644 --- a/src/_scss/base/footer.scss +++ b/src/_scss/base/footer.scss @@ -1,6 +1,8 @@ footer { padding-top: 15px; padding-bottom: 15px; + + background: var(--primary-color-light); } #footer_inner { diff --git a/src/_scss/base/nav.scss b/src/_scss/base/nav.scss index 2b610adcc..e6b40a091 100644 --- a/src/_scss/base/nav.scss +++ b/src/_scss/base/nav.scss @@ -1,4 +1,7 @@ nav { + background: var(--nav-background-url) var(--primary-color-light); + background-size: auto 100%; + #nav_inner { h1 { margin-bottom: -5px; @@ -15,4 +18,10 @@ nav { margin-bottom: 10px; } } + + @media print { + background: none; + border-bottom: var(--border-width) solid var(--primary-color-light); + color: var(--primary-color-light); + } } From 9ba823e7c410ce37dcfceb3805c858cb37ae1fe4 Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:16:08 +0100 Subject: [PATCH 4/6] Do away with an unnecessary #nav_inner div --- src/_includes/nav.html | 18 ++++++++---------- src/_scss/base/layout.scss | 12 ++++-------- src/_scss/base/nav.scss | 27 --------------------------- src/_scss/base/text.scss | 2 +- src/_scss/components/nav.scss | 32 ++++++++++++++++++++++++++++++++ src/static/style.scss | 2 +- 6 files changed, 46 insertions(+), 47 deletions(-) delete mode 100644 src/_scss/base/nav.scss create mode 100644 src/_scss/components/nav.scss diff --git a/src/_includes/nav.html b/src/_includes/nav.html index 3360f9a53..1857b7e1c 100644 --- a/src/_includes/nav.html +++ b/src/_includes/nav.html @@ -1,13 +1,11 @@ diff --git a/src/_scss/base/layout.scss b/src/_scss/base/layout.scss index 23262ca88..2e9d45a47 100644 --- a/src/_scss/base/layout.scss +++ b/src/_scss/base/layout.scss @@ -19,23 +19,19 @@ body { } } -main, #footer_inner, #nav_inner, #editing-toolbar_inner { - max-width: var(--max-width); +main, #footer_inner, nav > *, #editing-toolbar_inner { + @include centred(var(--max-width)); + padding-left: calc(var(--default-padding) + env(safe-area-inset-left)); padding-right: calc(var(--default-padding) + env(safe-area-inset-right)); } -#nav_inner { - padding-top: calc(1px + env(safe-area-inset-top)); - padding-bottom: 1px; -} - #footer_inner { padding-top: 1px; padding-bottom: calc(1px + env(safe-area-inset-bottom)); } -img, video, svg, iframe, figure, article, main, #footer_inner, #nav_inner, #editing-toolbar_inner { +img, video, svg, iframe, figure, article { margin-left: auto; margin-right: auto; } diff --git a/src/_scss/base/nav.scss b/src/_scss/base/nav.scss deleted file mode 100644 index e6b40a091..000000000 --- a/src/_scss/base/nav.scss +++ /dev/null @@ -1,27 +0,0 @@ -nav { - background: var(--nav-background-url) var(--primary-color-light); - background-size: auto 100%; - - #nav_inner { - h1 { - margin-bottom: -5px; - font-weight: normal; - font-size: 1.7em; - a { - text-decoration: none; - } - } - - ul { - padding-top: 0px; - padding-bottom: 0px; - margin-bottom: 10px; - } - } - - @media print { - background: none; - border-bottom: var(--border-width) solid var(--primary-color-light); - color: var(--primary-color-light); - } -} diff --git a/src/_scss/base/text.scss b/src/_scss/base/text.scss index df48a801f..c5e968d17 100644 --- a/src/_scss/base/text.scss +++ b/src/_scss/base/text.scss @@ -89,7 +89,7 @@ sup { border: 0 !important; } -#footer_inner, #nav_inner { +#footer_inner { color: white; a, a:visited { diff --git a/src/_scss/components/nav.scss b/src/_scss/components/nav.scss new file mode 100644 index 000000000..2d52c8a45 --- /dev/null +++ b/src/_scss/components/nav.scss @@ -0,0 +1,32 @@ +nav { + background: var(--nav-background-url) var(--primary-color-light); + background-size: auto 100%; + + color: white; + + a, a:visited { + @include link_styles(white, 0.5); + } + + h1 { + padding-top: calc(1px + env(safe-area-inset-top)); + margin-bottom: -5px; + font-size: 1.7em; + + a { + text-decoration: none; + } + } + + ul { + padding: 0; + padding-bottom: 1px; + margin-bottom: 10px; + } + + @media print { + background: none; + border-bottom: var(--border-width) solid var(--primary-color-light); + color: var(--primary-color-light); + } +} diff --git a/src/static/style.scss b/src/static/style.scss index 7885c8093..ffa8f3b62 100644 --- a/src/static/style.scss +++ b/src/static/style.scss @@ -16,10 +16,10 @@ @import "base/footer.scss"; @import "base/images_wide.scss"; @import "base/latex.scss"; -@import "base/nav.scss"; @import "base/post_cards.scss"; @import "base/tweets.scss"; +@import "components/nav.scss"; @import "components/pretty_hr.scss"; @import "components/syntax_highlighting.scss"; From 926083f1aa14827801a59eb513521ffc4154687f Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:19:01 +0100 Subject: [PATCH 5/6] Continue tidying up some of the styles --- src/_scss/_main.scss | 5 ----- src/_scss/base/layout.scss | 15 +++++++-------- src/_scss/variables.scss | 4 ++++ 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/_scss/_main.scss b/src/_scss/_main.scss index 7ab5621ce..46b72bc4f 100644 --- a/src/_scss/_main.scss +++ b/src/_scss/_main.scss @@ -44,8 +44,3 @@ a.download { background: var(--link-hover-background) !important; } } - -pre, blockquote { - border-color: var(--block-border-color); - background-color: var(--block-background-color); -} diff --git a/src/_scss/base/layout.scss b/src/_scss/base/layout.scss index 2e9d45a47..f6c0c4338 100644 --- a/src/_scss/base/layout.scss +++ b/src/_scss/base/layout.scss @@ -44,7 +44,12 @@ figcaption { margin-top: 8px; } -pre, blockquote, img.screenshot, a.download { +pre, blockquote { + border: var(--border-width) var(--border-style) var(--block-border-color); + background-color: var(--block-background-color); +} + +img.screenshot, a.download { border-radius: var(--border-radius); border-style: var(--border-style); border-width: var(--border-width); @@ -80,10 +85,8 @@ article, main { } } - - img.screenshot { - border-color: #f0f0f0; + border-color: var(--border-width) var(--border-style) var(--screenshot-border-color); } .post_cards .card { @@ -100,10 +103,6 @@ img.screenshot { background-image: url('/theme/black-waves-transparent.png'); } - img.screenshot { - border-color: #3f3f3f; - } - .post_cards .card { background: #0d0d0d; } diff --git a/src/_scss/variables.scss b/src/_scss/variables.scss index 939eb806f..29f6a9a14 100644 --- a/src/_scss/variables.scss +++ b/src/_scss/variables.scss @@ -41,6 +41,8 @@ $accent-grey-dark: #999; --accent-grey: #{$accent-grey-light}; --accent-grey-link-hover: #{rgba($accent-grey-light, 0.2)}; + + --screenshot-border-color: #f0f0f0; } @media (prefers-color-scheme: dark) { @@ -49,6 +51,8 @@ $accent-grey-dark: #999; --accent-grey: #{$accent-grey-dark}; --accent-grey-link-hover: #{rgba($accent-grey-dark, 0.2)}; + + --screenshot-border-color: #3f3f3f; } } From 4c3f85414f697b14d50565ddf42744aa4b052a7d Mon Sep 17 00:00:00 2001 From: Alex Chan Date: Fri, 5 Apr 2024 19:20:41 +0100 Subject: [PATCH 6/6] Get the styles for embedded tweets out of the global stylesheet Maybe 5% of my posts have embedded tweets, and this is ~25% of the main stylesheet. Let's load it on-demand instead! --- src/_includes/tweet.html | 4 ++++ src/_scss/{base => components}/tweets.scss | 0 src/static/style.scss | 1 - 3 files changed, 4 insertions(+), 1 deletion(-) rename src/_scss/{base => components}/tweets.scss (100%) diff --git a/src/_includes/tweet.html b/src/_includes/tweet.html index e0f2b4882..d06d59f12 100644 --- a/src/_includes/tweet.html +++ b/src/_includes/tweet.html @@ -1,3 +1,7 @@ + + {% assign tweet_id = tweet_data["id"] %} {% assign name = tweet_data["user"]["name"] %} {% assign screen_name = tweet_data["user"]["screen_name"] %} diff --git a/src/_scss/base/tweets.scss b/src/_scss/components/tweets.scss similarity index 100% rename from src/_scss/base/tweets.scss rename to src/_scss/components/tweets.scss diff --git a/src/static/style.scss b/src/static/style.scss index ffa8f3b62..3052a3a7b 100644 --- a/src/static/style.scss +++ b/src/static/style.scss @@ -17,7 +17,6 @@ @import "base/images_wide.scss"; @import "base/latex.scss"; @import "base/post_cards.scss"; -@import "base/tweets.scss"; @import "components/nav.scss"; @import "components/pretty_hr.scss";