Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark mode #65

Merged
merged 20 commits into from
May 5, 2022
Merged

Add dark mode #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b672690
Add table of contents.
Mar 25, 2022
1480cb7
Limit the frequency of size recalculations during resizing.
Mar 25, 2022
0750974
Fix scrolling bug on Firefox 98.2.0 on Android.
Mar 25, 2022
94c59bd
Add space between items in the table of contents.
Mar 25, 2022
55e6f53
Dark mode: initial checkin of the skeleton.
Mar 25, 2022
d98f78f
Replace color references with CSS variables.
Mar 25, 2022
f8e59df
Make the dark mode button actually work.
Mar 25, 2022
e82f086
Made the default scheme be the OS default.
Mar 25, 2022
6bda5c6
Persist dark mode setting to local storage.
Mar 25, 2022
9b39ac2
Fix initial color flash. Hopefully.
Mar 25, 2022
9fc89d4
Add strict mode to darkmode.js .
Mar 25, 2022
6c23745
Dial down the opacity of code in dark mode.
Mar 25, 2022
3d3403b
Do not save darkness in local storage by default.
Mar 25, 2022
786847c
Set dark mode before the <BODY> element is created.
Mar 25, 2022
83c1ecb
Cosmetic changes to the code.
Mar 25, 2022
d6166d5
Change cursor on dark mode toggle to indicate clickability.
Mar 25, 2022
a1c5f33
Make table of contents hide code blocks.
Mar 25, 2022
1cddca9
Tweak syntax highlighting in dark mode.
Mar 26, 2022
4cc865d
Handle changes to the OS-level dark mode setting.
Mar 26, 2022
c0f47d1
Merge branch 'master' into dark-mode
EmielH May 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions assets/scss/tale/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

html,
body {
color: $default-color;
background-color: #fff;
color: var(--default-color);
background-color: var(--background-color);
margin: 0;
padding: 0;
}
Expand All @@ -31,19 +31,19 @@ h3,
h4,
h5,
h6 {
color: $default-shade;
color: var(--default-shade);
font-family: $sans-serif;
line-height: normal;
}

a {
color: $blue;
color: var(--blue);
text-decoration: none;
}

blockquote {
border-left: .25rem solid $grey-2;
color: $grey-1;
border-left: .25rem solid var(--grey-2);
color: var(--grey-1);
margin: .8rem 0;
padding: .5rem 1rem;

Expand Down
12 changes: 6 additions & 6 deletions assets/scss/tale/_catalogue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.catalogue {
&-item {
border-bottom: 1px solid $grey-2;
color: $default-color;
border-bottom: 1px solid var(--grey-2);
color: var(--default-color);
display: block;
padding: 2rem 0;

Expand All @@ -16,13 +16,13 @@
}

&-time {
color: $default-tint;
color: var(--default-tint);
font-family: $serif-secondary;
letter-spacing: .5px;
}

&-title {
color: $default-shade;
color: var(--default-shade);
display: block;
font-family: $sans-serif;
font-size: 2rem;
Expand All @@ -31,8 +31,8 @@
}

&-line {
@include transition(all .3s ease-out);
border-top: .2rem solid $default-shade;
@include transition($color-transition, width .3s ease-out);
border-top: .2rem solid var(--default-shade);
display: block;
width: 2rem;
}
Expand Down
14 changes: 10 additions & 4 deletions assets/scss/tale/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ code {
}

code {
background-color: $grey-4;
background-color: var(--grey-4);
border-radius: 3px;
color: $code-color;
color: var(--code-color);
font-size: 85%;
padding: .25em .5em;
white-space: pre-wrap;
Expand All @@ -23,8 +23,14 @@ pre code {
padding: 0;
}

pre code > span {
// This isn't very pretty, but the precise RGB values are generated
// server-side, the usual trick of putting the colors in CSS variables does
// not quite work and this is the best I could come up with.
filter: var(--code-filter);
}
.highlight {
background-color: $grey-4;
background-color: var(--grey-4);
border-radius: 3px;
line-height: 1.4;
margin: 0 0 1rem;
Expand All @@ -36,7 +42,7 @@ pre code {
}

.lineno {
color: $default-tint;
color: var(--default-tint);
display: inline-block; // Ensures the null space also isn't selectable
padding: 0 .75rem 0 .25rem;
// Make sure numbers aren't selectable
Expand Down
29 changes: 22 additions & 7 deletions assets/scss/tale/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
* {
@include transition($color-transition);
}

.container {
margin: 0 auto;
max-width: 800px;
Expand All @@ -17,8 +21,19 @@ footer,
width: 80%;
}

#darkModeToggle {
float: right;
position: sticky;
top: 2rem;
margin-right: 2rem;
margin-top: 2rem;
font-size: 2rem;

cursor: pointer;
}

.nav {
box-shadow: 0 2px 2px -2px $shadow-color;
box-shadow: 0 2px 2px -2px var(--shadow-color);
overflow: auto;

&-container {
Expand All @@ -28,8 +43,8 @@ footer,
}

&-title {
@include transition(all .2s ease-out);
color: $default-color;
@include transition($color-transition, opacity .2s ease-out);
color: var(--default-color);
display: inline-block;
margin: 0;
padding-right: .2rem;
Expand All @@ -48,8 +63,8 @@ footer,
}

li {
@include transition(all .2s ease-out);
color: $default-color;
@include transition($color-transition, opacity .2s ease-out);
color: var(--default-color);
display: inline-block;
opacity: .6;
padding: 0 2rem 0 0;
Expand All @@ -65,7 +80,7 @@ footer,
}

a {
color: $default-color;
color: var(--default-color);
font-family: $sans-serif;
}
}
Expand All @@ -90,7 +105,7 @@ footer {
text-align: center;

span {
color: $default-color;
color: var(--default-color);
font-size: .8rem;
}
}
12 changes: 6 additions & 6 deletions assets/scss/tale/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.pagination {
border-top: .5px solid $grey-2;
border-top: .5px solid var(--grey-2);
font-family: $serif-secondary;
padding-top: 2rem;
position: relative;
text-align: center;

span {
color: $default-shade;
color: var(--default-shade);
font-size: 1.1rem;
}

.top {
@include transition(all .3s ease-out);
color: $default-color;
@include transition($color-transition, opacity .3s ease-out);
color: var(--default-color);
font-family: $sans-serif;
font-size: 1.1rem;
opacity: .6;
Expand All @@ -23,8 +23,8 @@
}

.arrow {
@include transition(all .3s ease-out);
color: $default-color;
@include transition($color-transition, opacity .3s ease-out);
color: var(--default-color);
position: absolute;

&:hover,
Expand Down
8 changes: 4 additions & 4 deletions assets/scss/tale/_post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
padding: 3rem 0;

&-info {
color: $default-tint;
color: var(--default-tint);
font-family: $serif-secondary;
letter-spacing: 0.5px;
text-align: center;
Expand All @@ -13,15 +13,15 @@
}

&-title {
color: $default-shade;
color: var(--default-shade);
font-family: $sans-serif;
font-size: 4rem;
margin: 1rem 0;
text-align: center;
}

&-line {
border-top: 0.4rem solid $default-shade;
border-top: 0.4rem solid var(--default-shade);
display: block;
margin: 0 auto 3rem;
width: 4rem;
Expand All @@ -41,7 +41,7 @@
}

img + em {
color: $default-tint;
color: var(--default-tint);
display: block;
font-family: $sans-serif;
font-size: 0.9rem;
Expand Down
15 changes: 11 additions & 4 deletions assets/scss/tale/_toc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ aside.toc {
float: left;
height: 0;
overflow: display;

// This is apparenty necessary so that the table of contents covers elements
// with the "filter:" property set.
z-index: 1;
}

#tocTitle {
Expand All @@ -34,7 +38,7 @@ aside.toc {
}

#tocContainer {
background: $grey-3;
background-color: var(--grey-3);
border-radius: 1rem;
margin: 2rem;
padding: 1rem;
Expand All @@ -54,11 +58,14 @@ aside.toc {
width: calc(2rem + var(--measured-title-width));
--measured-title-width: 2.4rem;

@include transition(all .1s ease-out);
@include transition(
$color-transition,
width .1s ease-out,
height .1s ease-out);
}

#tocContainer > div {
border-left: 0.4rem solid black;
border-left: 0.4rem solid var(--default-shade);
padding-left: 1rem;
}

Expand All @@ -72,7 +79,7 @@ aside.toc {

// No transition on width so that there is no re-wrapping during the
// opening/closing transition
@include transition(height .1s ease-out);
@include transition($color-transition, height .1s ease-out);
}

nav#TableOfContents ul {
Expand Down
54 changes: 43 additions & 11 deletions assets/scss/tale/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
// Colors
$default-color: #555;
$default-shade: #353535;
$default-tint: #aaa;
$grey-1: #979797;
$grey-2: #e5e5e5;
$grey-3: #f0f0f0;
$grey-4: #f9f9f9;
$white: #fff;
$blue: #4a9ae1;
$shadow-color: rgba(0, 0, 0, .2);
$code-color: #bf616a;
// This is necessary because some elements want to set transitions themselves,
// which would result in deleting the color transitions specified in less
// specific selectors.
$color-transition:
background-color .4s ease-out,
color .4s ease-out,
border-color .4s ease-out,
box-shadow .4s ease-out;


// Make the default be dark mode. That way, the more complicated case is the
// default and thus bugs are discovered earlier.
:root.light {
--default-color: #555;
--background-color: #fff;
--default-shade: #353535;
--default-tint: #aaa;
--grey-1: #979797;
--grey-2: #e5e5e5;
--grey-3: #f0f0f0;
--grey-4: #f9f9f9;
--white: #fff;
--blue: #4a9ae1;
--shadow-color: rgba(0, 0, 0, .2);
--code-color: #bf616a;
--code-filter: ;
}

:root:not(.light) {
--default-color: #888;
--background-color: #000;
--default-shade: #989898;
--default-tint: #555;
--grey-1: #606060;
--grey-2: #404040;
--grey-3: #202020;
--grey-4: #181818;
--white: #fff;
--blue: #1d6baf;
--shadow-color: rgba(0, 0, 0, .2);
--code-color: #a3434c;
--code-filter: contrast(0.4) brightness(0.9);
}

// Fonts
$serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif;
Expand Down
1 change: 1 addition & 0 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
{{ partial "head.html" . }}
<body>
{{ partial "header.html" . }}
{{ partial "darkmode.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
Expand Down
3 changes: 3 additions & 0 deletions layouts/partials/darkmode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div id="darkModeToggle" onclick="toggleDarkMode()">
&#9680; <!-- Circle with left half black -->
</div>
2 changes: 2 additions & 0 deletions layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,6 @@

<!-- RSS -->
<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />

<script src="{{ "js/darkmode.js" | relURL }}"></script>
</head>
Loading