From b14a13f208b32cc7776a3b0a3973f630af4cdb0c Mon Sep 17 00:00:00 2001 From: Riccardo Graziosi Date: Sat, 26 Sep 2020 13:25:51 +0200 Subject: [PATCH] Fix Firefox dark mode bug --- _layouts/default.html | 6 +++--- _sass/no-style-please.scss | 29 ++++++++++++++++++++--------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 9dd978c01..2db05a1c9 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,9 +1,9 @@ - + {%- include head.html -%} - +
-
+
{{ content }}
diff --git a/_sass/no-style-please.scss b/_sass/no-style-please.scss index 5a74a9b33..129f6cb89 100644 --- a/_sass/no-style-please.scss +++ b/_sass/no-style-please.scss @@ -1,3 +1,4 @@ +// -------------- THEME SWITCHER -------------- // @mixin dark-appearance { filter: invert(1); img { @@ -7,21 +8,31 @@ } } -html[a="dark"] { @include dark-appearance; } +body[a="dark"] { @include dark-appearance; } + @media (prefers-color-scheme: dark) { - html[a="auto"] { @include dark-appearance; } + body[a="auto"] { @include dark-appearance; } } +// -------------------------------------------- // + +// bg color is also needed in html in order to +// block body's background propagation +// see: https://stackoverflow.com/a/61265706 +html, body { background-color: white; } -html { +html { height: 100%; } + +body { color: black; - background-color: white; font-family: monospace; font-size: 1.3rem; line-height: 1.3; + margin: 0; + min-height: 100%; } -h2, h3, h4, h5, h6 { margin-top: 3rem; } +h2, h3, h4, h5 { margin-top: 3rem; } hr { margin: 2rem 0; } @@ -31,10 +42,10 @@ li { margin: 0.4rem 0; } *:target { background-color: yellow; } -.wrapper { - max-width: 60ch; - margin: 4rem auto; - padding: 0 1rem; +.w { + max-width: 640px; + margin: 0 auto; + padding: 4rem 2rem; } hr {