hematite 0.0.10 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_config.yml +3 -3
- data/_includes/settings.html +101 -0
- data/_layouts/default.html +5 -1
- data/_sass/_elements.scss +17 -0
- data/_sass/_nav.scss +34 -2
- data/_sass/_sizes.scss +1 -0
- data/assets/html/settings.html +1 -83
- data/assets/img/favicon-alternate.svg +12 -0
- data/assets/js/Settings.mjs +50 -4
- data/assets/js/main.mjs +3 -3
- data/assets/js/sidebar.mjs +2 -2
- data/assets/string_data/en.mjs +1 -0
- data/assets/string_data/es.mjs +1 -0
- metadata +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a71c298f5a705d7357954e7c3a07f84cadf351135ecc275bd594fe340bd87899
|
|
4
|
+
data.tar.gz: 1469e07477ec5f0ae1827902f654137c1d147d55e1e414243d5d8603f6496e97
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '09ee339a6bbfb33e00a96dd84c1dffeca7584853ca45fd74832b0dbd244ca1833dd27c4c955a6282ee85e87f14b8d2e66762787b00323a6c65e40d527daadee2'
|
|
7
|
+
data.tar.gz: 8c9a200eeadec2ca02366086fd7933b0e8fc7601118c9a209cfec70160ceb73b35d76cf6a0835ea04e0f55e56c8731eef2ad1b35d48092c51a540276d886d9f4
|
data/_config.yml
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
# Settings for the demo site.
|
|
3
3
|
# `jekyll serve` does not auto-reload this file.
|
|
4
|
-
#
|
|
5
|
-
# See https://leo3418.github.io/collections/multilingual-jekyll-site/localize-strings
|
|
6
|
-
# for how localization works.
|
|
7
4
|
|
|
8
5
|
title: Hematite Theme
|
|
9
6
|
description: A Jekyll theme intended for course websites
|
|
@@ -12,6 +9,9 @@ permalink: pretty
|
|
|
12
9
|
hematite:
|
|
13
10
|
auto_invert_imgs: true
|
|
14
11
|
|
|
12
|
+
# Set to true to minimize the header by default
|
|
13
|
+
minimize_header: false
|
|
14
|
+
|
|
15
15
|
# Date options are as specified here:
|
|
16
16
|
# https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
|
|
17
17
|
date_format:
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
See assets/html/settings.html. This file can be included
|
|
3
|
+
in your own settings page and add your settings to it!
|
|
4
|
+
-->
|
|
5
|
+
|
|
6
|
+
<!-- So they can be localized, much of this page is filled by JavaScript -->
|
|
7
|
+
<!-- Organization inspired by https://www.w3.org/WAI/tutorials/forms/grouping/ -->
|
|
8
|
+
<fieldset>
|
|
9
|
+
<legend id="font_legend">settings_font_legend</legend>
|
|
10
|
+
<div>
|
|
11
|
+
<label id="font_family_lbl" for="font_family">settings_font_family_label</label>
|
|
12
|
+
<select id="font_family"></select>
|
|
13
|
+
</div>
|
|
14
|
+
<div>
|
|
15
|
+
<label id="font_size_lbl" for="font_size">settings_font_size_label</label>
|
|
16
|
+
<select id="font_size">
|
|
17
|
+
</select>
|
|
18
|
+
</div>
|
|
19
|
+
</fieldset>
|
|
20
|
+
|
|
21
|
+
<fieldset>
|
|
22
|
+
<legend id="theme_legend">page_theme_legend</legend>
|
|
23
|
+
<div>
|
|
24
|
+
<label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
|
|
25
|
+
<select id="page_theme"></select>
|
|
26
|
+
</div>
|
|
27
|
+
<div>
|
|
28
|
+
<label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
|
|
29
|
+
<input type="checkbox" id="minimize_page_hdr"/>
|
|
30
|
+
</div>
|
|
31
|
+
</fieldset>
|
|
32
|
+
|
|
33
|
+
<script type="module">
|
|
34
|
+
import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
|
|
35
|
+
import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
|
|
36
|
+
|
|
37
|
+
let settingsTextElemIDs = [
|
|
38
|
+
`settings_header`, `settings_description`, `font_legend`,
|
|
39
|
+
`font_family_lbl`, `font_size_lbl`, `theme_legend`,
|
|
40
|
+
`page_theme_lbl`, `page_minimize_header_lbl`,
|
|
41
|
+
];
|
|
42
|
+
|
|
43
|
+
// Localize all descriptive settings elements (each should contian the
|
|
44
|
+
// name of its localization key).
|
|
45
|
+
for (const id of settingsTextElemIDs) {
|
|
46
|
+
let elem = document.querySelector(`#${id}`);
|
|
47
|
+
|
|
48
|
+
if (elem) {
|
|
49
|
+
elem.innerText = stringLookup(elem.innerText);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
let fontSizeSelect = document.querySelector("#font_size");
|
|
54
|
+
let fontFamilySelect = document.querySelector("#font_family");
|
|
55
|
+
let pageThemeSelect = document.querySelector("#page_theme");
|
|
56
|
+
let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
|
|
57
|
+
|
|
58
|
+
pageThemeSelect.innerHTML =
|
|
59
|
+
`
|
|
60
|
+
<option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
|
|
61
|
+
<option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
|
|
62
|
+
<option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
|
|
63
|
+
`;
|
|
64
|
+
|
|
65
|
+
fontFamilySelect.innerHTML =
|
|
66
|
+
`
|
|
67
|
+
<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
|
68
|
+
<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
|
|
69
|
+
<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
|
|
70
|
+
`;
|
|
71
|
+
|
|
72
|
+
fontSizeSelect.innerHTML =
|
|
73
|
+
`
|
|
74
|
+
<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
|
75
|
+
<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
|
|
76
|
+
<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
|
|
77
|
+
<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
|
|
78
|
+
`;
|
|
79
|
+
|
|
80
|
+
fontSizeSelect.oninput = () => {
|
|
81
|
+
Settings.setFontSize(fontSizeSelect.value);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
fontFamilySelect.oninput = () => {
|
|
85
|
+
Settings.setFontFamily(fontFamilySelect.value);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
pageThemeSelect.oninput = () => {
|
|
89
|
+
Settings.setTheme(pageThemeSelect.value);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
minimizeHeaderCheckbox.oninput = () => {
|
|
93
|
+
Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
pageThemeSelect.value = Settings.getTheme();
|
|
97
|
+
fontFamilySelect.value = Settings.getFontFamily();
|
|
98
|
+
fontSizeSelect.value = Settings.getFontSize();
|
|
99
|
+
minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
|
|
100
|
+
|
|
101
|
+
</script>
|
data/_layouts/default.html
CHANGED
|
@@ -10,7 +10,11 @@ title: Untitled
|
|
|
10
10
|
{% assign content_start = page.content | slice: 0, 100 %}
|
|
11
11
|
<meta name="description" content={{ page.description | default: content_start | strip_html | jsonify }}/>
|
|
12
12
|
<link rel="stylesheet" href="{{ "assets/style.css" | relative_url }}"/>
|
|
13
|
-
|
|
13
|
+
{% if page.favicon_url_absolute or site.favicon_url_absolute %}
|
|
14
|
+
<link rel="icon" href="{{ page.favicon_url_absolute | default: site.favicon_url_absolute }}"/>
|
|
15
|
+
{% else %}
|
|
16
|
+
<link rel="icon" href="{{ page.favicon_url | default: site.favicon_url | default: "assets/img/favicon.svg" | absolute_url }}"/>
|
|
17
|
+
{% endif %}
|
|
14
18
|
<script type="module" src="{{ "assets/js/main.mjs" | relative_url }}"></script>
|
|
15
19
|
|
|
16
20
|
{% include katex_includes.html %}
|
data/_sass/_elements.scss
CHANGED
|
@@ -117,14 +117,31 @@ input::placeholder {
|
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
table {
|
|
121
|
+
border-collapse: collapse;
|
|
122
|
+
}
|
|
123
|
+
|
|
120
124
|
table td {
|
|
121
125
|
border: 1px solid var(--line-color-light);
|
|
126
|
+
padding: 3px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
table th {
|
|
130
|
+
padding: 4px;
|
|
131
|
+
font-weight: bold;
|
|
122
132
|
}
|
|
123
133
|
|
|
124
134
|
fieldset {
|
|
125
135
|
border-color: var(--line-color-normal);
|
|
126
136
|
margin-bottom: 30px;
|
|
127
137
|
}
|
|
138
|
+
|
|
139
|
+
blockquote {
|
|
140
|
+
border-left: 1px solid var(--line-color-light);
|
|
141
|
+
margin-left: 10px;
|
|
142
|
+
padding-left: 20px;
|
|
143
|
+
color: var(--text-color-faint);
|
|
144
|
+
}
|
|
128
145
|
}
|
|
129
146
|
|
|
130
147
|
// Markdown parsers may put `code` elements inside of `pre`
|
data/_sass/_nav.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
$header-z-index: 100;
|
|
4
4
|
|
|
5
|
-
header {
|
|
5
|
+
body > header {
|
|
6
6
|
position: sticky;
|
|
7
7
|
top: 0;
|
|
8
8
|
z-index: $header-z-index;
|
|
@@ -41,6 +41,38 @@ header {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
:root.minimizedNavHeader body > header {
|
|
45
|
+
> *:not(#toggle_sidebar_btn) {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
display: inline-block;
|
|
48
|
+
transition: opacity 0.5s ease;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
#toggle_sidebar_btn {
|
|
52
|
+
padding-left: 4px;
|
|
53
|
+
width: var(--header-height);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
word-wrap: break-word;
|
|
57
|
+
width: var(--header-height);
|
|
58
|
+
padding: 0;
|
|
59
|
+
transition: width 0.5s ease;
|
|
60
|
+
|
|
61
|
+
position: fixed;
|
|
62
|
+
|
|
63
|
+
// The minimizedNavHeader class is added after page load. Make the
|
|
64
|
+
// transition less jarring.
|
|
65
|
+
animation: grow-in 0.5s ease 1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:root.minimizedNavHeader.hasOpenSidebar body > header {
|
|
69
|
+
> *:not(#toggle_sidebar_btn) {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
width: calc(var(--nav-width) + #{2 * $navbar-padding});
|
|
74
|
+
}
|
|
75
|
+
|
|
44
76
|
nav.sidebar {
|
|
45
77
|
position: fixed;
|
|
46
78
|
top: var(--header-height);
|
|
@@ -58,7 +90,7 @@ nav.sidebar {
|
|
|
58
90
|
color: var(--primary-text-color);
|
|
59
91
|
background-color: var(--primary-background-color);
|
|
60
92
|
box-shadow: 0 0 2px var(--shadow-color-light);
|
|
61
|
-
padding:
|
|
93
|
+
padding: $navbar-padding;
|
|
62
94
|
|
|
63
95
|
z-index: $header-z-index - 1;
|
|
64
96
|
|
data/_sass/_sizes.scss
CHANGED
data/assets/html/settings.html
CHANGED
|
@@ -6,89 +6,7 @@ noindex: true
|
|
|
6
6
|
|
|
7
7
|
<noscript>JavaScript is required to view this page's content!</noscript>
|
|
8
8
|
|
|
9
|
-
<!-- So they can be localized, much of this page is filled by JavaScript -->
|
|
10
9
|
<h1 id="settings_header">page_settings_header</h1>
|
|
11
10
|
<p id="settings_description">page_settings_description</p>
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
<fieldset>
|
|
15
|
-
<legend id="font_legend">settings_font_legend</legend>
|
|
16
|
-
<div>
|
|
17
|
-
<label id="font_family_lbl" for="font_family">settings_font_family_label</label>
|
|
18
|
-
<select id="font_family"></select>
|
|
19
|
-
</div>
|
|
20
|
-
<div>
|
|
21
|
-
<label id="font_size_lbl" for="font_size">settings_font_size_label</label>
|
|
22
|
-
<select id="font_size">
|
|
23
|
-
</select>
|
|
24
|
-
</div>
|
|
25
|
-
</fieldset>
|
|
26
|
-
|
|
27
|
-
<fieldset>
|
|
28
|
-
<legend id="theme_legend">page_theme_legend</legend>
|
|
29
|
-
<div>
|
|
30
|
-
<label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
|
|
31
|
-
<select id="page_theme"></select>
|
|
32
|
-
</div>
|
|
33
|
-
</fieldset>
|
|
34
|
-
|
|
35
|
-
<script type="module">
|
|
36
|
-
import Settings from "{{ 'assets/js/Settings.mjs' | relative_url }}";
|
|
37
|
-
import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
|
|
38
|
-
|
|
39
|
-
let settingsTextElemIDs = [
|
|
40
|
-
`settings_header`, `settings_description`, `font_legend`,
|
|
41
|
-
`font_family_lbl`, `font_size_lbl`, `theme_legend`,
|
|
42
|
-
`page_theme_lbl`,
|
|
43
|
-
];
|
|
44
|
-
|
|
45
|
-
// Localize all descriptive settings elements (each should contian the
|
|
46
|
-
// name of its localization key).
|
|
47
|
-
for (const id of settingsTextElemIDs) {
|
|
48
|
-
let elem = document.querySelector(`#${id}`);
|
|
49
|
-
elem.innerText = stringLookup(elem.innerText);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
let fontSizeSelect = document.querySelector("#font_size");
|
|
53
|
-
let fontFamilySelect = document.querySelector("#font_family");
|
|
54
|
-
let pageThemeSelect = document.querySelector("#page_theme");
|
|
55
|
-
|
|
56
|
-
pageThemeSelect.innerHTML =
|
|
57
|
-
`
|
|
58
|
-
<option value='${Settings.THEME_AUTO}'>${stringLookup('page_theme_auto')}</option>
|
|
59
|
-
<option value='${Settings.THEME_DARK}'>${stringLookup('page_theme_dark')}</option>
|
|
60
|
-
<option value='${Settings.THEME_LIGHT}'>${stringLookup('page_theme_light')}</option>
|
|
61
|
-
`;
|
|
62
|
-
|
|
63
|
-
fontFamilySelect.innerHTML =
|
|
64
|
-
`
|
|
65
|
-
<option value='${Settings.FONT_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
|
66
|
-
<option value='${Settings.FONT_SERIF}'>${stringLookup('page_font_serif')}</option>
|
|
67
|
-
<option value='${Settings.FONT_SANS}'>${stringLookup('page_font_sans')}</option>
|
|
68
|
-
`;
|
|
69
|
-
|
|
70
|
-
fontSizeSelect.innerHTML =
|
|
71
|
-
`
|
|
72
|
-
<option value='${Settings.FONT_SIZE_DEFAULT}'>${stringLookup('page_font_default')}</option>
|
|
73
|
-
<option value='${Settings.FONT_SIZE_SMALL}'>${stringLookup('page_font_small')}</option>
|
|
74
|
-
<option value='${Settings.FONT_SIZE_MEDIUM}'>${stringLookup('page_font_medium')}</option>
|
|
75
|
-
<option value='${Settings.FONT_SIZE_LARGE}'>${stringLookup('page_font_large')}</option>
|
|
76
|
-
`;
|
|
77
|
-
|
|
78
|
-
fontSizeSelect.oninput = () => {
|
|
79
|
-
Settings.setFontSize(fontSizeSelect.value);
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
fontFamilySelect.oninput = () => {
|
|
83
|
-
Settings.setFontFamily(fontFamilySelect.value);
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
pageThemeSelect.oninput = () => {
|
|
87
|
-
Settings.setTheme(pageThemeSelect.value);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
pageThemeSelect.value = Settings.getTheme();
|
|
91
|
-
fontFamilySelect.value = Settings.getFontFamily();
|
|
92
|
-
fontSizeSelect.value = Settings.getFontSize();
|
|
93
|
-
|
|
94
|
-
</script>
|
|
12
|
+
{% include settings.html %}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<defs>
|
|
4
|
+
<filter id="filter7674" x="-.25" y="-.25" width="1.5" height="1.5" color-interpolation-filters="sRGB">
|
|
5
|
+
<feGaussianBlur stdDeviation="12.0308382"/>
|
|
6
|
+
</filter>
|
|
7
|
+
</defs>
|
|
8
|
+
<g>
|
|
9
|
+
<path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#9300cf" filter="url(#filter7674)" transform="scale(1.01) rotate(30deg) translate(2, 10)" transform-origin="center"/>
|
|
10
|
+
<path d="m122.52 34.551-94.311 117.48 4.503 246.11 127.26 70.081 258.18-41.737 71.954-66.215-38.507-266.18s-1.2406-30.237-85.384-44.738-243.69-14.797-243.69-14.797z" fill="#f61616"/>
|
|
11
|
+
</g>
|
|
12
|
+
</svg>
|
data/assets/js/Settings.mjs
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
---
|
|
3
|
+
import AsyncUtil from "./AsyncUtil.mjs";
|
|
4
|
+
import AnimationUtil from "./AnimationUtil.mjs";
|
|
5
|
+
|
|
6
|
+
const THEME_TRANSITION_TIME = 500; // ms
|
|
3
7
|
|
|
4
8
|
class Settings {
|
|
5
9
|
THEME_AUTO = 'auto';
|
|
@@ -18,6 +22,7 @@ class Settings {
|
|
|
18
22
|
FONT_SIZE_KEY_ = 'hematite-setting-font-size';
|
|
19
23
|
FONT_FAMILY_KEY_ = 'hematite-setting-font-family';
|
|
20
24
|
THEME_KEY_ = 'hematite-setting-theme';
|
|
25
|
+
HEADER_MINIMIZED_KEY_ = 'hematite-setting-minimize-header';
|
|
21
26
|
|
|
22
27
|
constructor() {
|
|
23
28
|
}
|
|
@@ -43,6 +48,12 @@ class Settings {
|
|
|
43
48
|
return this.getSetting_(this.FONT_SIZE_KEY_) ?? this.FONT_SIZE_DEFAULT;
|
|
44
49
|
}
|
|
45
50
|
|
|
51
|
+
getHeaderMinimized() {
|
|
52
|
+
let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_)
|
|
53
|
+
?? {{ site.hematite.user_config.minimize_header | default: site.hematite.minimize_header | default: "false" | jsonify }};
|
|
54
|
+
return minimizedStr == "true";
|
|
55
|
+
}
|
|
56
|
+
|
|
46
57
|
setFontSize(sizeOption) {
|
|
47
58
|
this.setSetting_(this.FONT_SIZE_KEY_, sizeOption);
|
|
48
59
|
}
|
|
@@ -55,6 +66,10 @@ class Settings {
|
|
|
55
66
|
this.setSetting_(this.THEME_KEY_, themeOption);
|
|
56
67
|
}
|
|
57
68
|
|
|
69
|
+
setHeaderMinimized(minimize) {
|
|
70
|
+
this.setSetting_(this.HEADER_MINIMIZED_KEY_, `${minimize}`);
|
|
71
|
+
}
|
|
72
|
+
|
|
58
73
|
getFontSizePt_() {
|
|
59
74
|
let fontSizeOption = this.getFontSize();
|
|
60
75
|
|
|
@@ -87,7 +102,9 @@ class Settings {
|
|
|
87
102
|
return this.getTheme() == this.THEME_LIGHT;
|
|
88
103
|
}
|
|
89
104
|
|
|
90
|
-
applySettings() {
|
|
105
|
+
async applySettings() {
|
|
106
|
+
document.documentElement.classList.add("changingTheme");
|
|
107
|
+
|
|
91
108
|
// Clean up previous changes. We might be re-applying styles.
|
|
92
109
|
document.documentElement.classList.remove("lightTheme");
|
|
93
110
|
document.documentElement.classList.remove("darkTheme");
|
|
@@ -99,7 +116,12 @@ class Settings {
|
|
|
99
116
|
}
|
|
100
117
|
|
|
101
118
|
|
|
102
|
-
let styleHTML =
|
|
119
|
+
let styleHTML =
|
|
120
|
+
`
|
|
121
|
+
:root.changingTheme * {
|
|
122
|
+
transition: ${THEME_TRANSITION_TIME}ms ease all;
|
|
123
|
+
}
|
|
124
|
+
`;
|
|
103
125
|
|
|
104
126
|
// Font family
|
|
105
127
|
if (this.usingNonDefaultFontFamily_()) {
|
|
@@ -121,6 +143,9 @@ class Settings {
|
|
|
121
143
|
`;
|
|
122
144
|
}
|
|
123
145
|
|
|
146
|
+
this.style_.innerHTML = styleHTML;
|
|
147
|
+
document.documentElement.appendChild(this.style_);
|
|
148
|
+
|
|
124
149
|
// Theme
|
|
125
150
|
if (this.forcingDarkTheme_()) {
|
|
126
151
|
document.documentElement.classList.add("darkTheme");
|
|
@@ -129,8 +154,29 @@ class Settings {
|
|
|
129
154
|
document.documentElement.classList.add("lightTheme");
|
|
130
155
|
}
|
|
131
156
|
|
|
132
|
-
this.
|
|
133
|
-
|
|
157
|
+
if (this.getHeaderMinimized()) {
|
|
158
|
+
// Run roughly in parallel
|
|
159
|
+
(async () => {
|
|
160
|
+
let header = document.querySelector("body > header");
|
|
161
|
+
if (header) {
|
|
162
|
+
await AnimationUtil.collapseOutVert(header, THEME_TRANSITION_TIME / 2);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
document.documentElement.classList.add("minimizedNavHeader");
|
|
166
|
+
|
|
167
|
+
if (header) {
|
|
168
|
+
// Re-show the header
|
|
169
|
+
// Rely on a CSS animation for animating the header's return.
|
|
170
|
+
await AnimationUtil.expandInVert(header, 0);
|
|
171
|
+
}
|
|
172
|
+
})();
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
document.documentElement.classList.remove("minimizedNavHeader");
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
await AsyncUtil.waitMillis(THEME_TRANSITION_TIME);
|
|
179
|
+
document.documentElement.classList.remove("changingTheme");
|
|
134
180
|
}
|
|
135
181
|
}
|
|
136
182
|
|
data/assets/js/main.mjs
CHANGED
|
@@ -17,7 +17,7 @@ addEventListener("load", () => {
|
|
|
17
17
|
// After loading elements, but before loading elements like images.
|
|
18
18
|
addEventListener("DOMContentLoaded", () => {
|
|
19
19
|
handleSidebar();
|
|
20
|
-
|
|
21
|
-
// Apply user-specified settings
|
|
22
|
-
Settings.applySettings();
|
|
23
20
|
});
|
|
21
|
+
|
|
22
|
+
// Apply user-specified settings
|
|
23
|
+
Settings.applySettings();
|
data/assets/js/sidebar.mjs
CHANGED
|
@@ -17,11 +17,11 @@ function handleSidebar() {
|
|
|
17
17
|
const setSidebarOpen = (open) => {
|
|
18
18
|
if (!open) {
|
|
19
19
|
sidebar.classList.remove(`open`);
|
|
20
|
-
document.
|
|
20
|
+
document.documentElement.classList.remove(`hasOpenSidebar`);
|
|
21
21
|
}
|
|
22
22
|
else {
|
|
23
23
|
sidebar.classList.add(`open`);
|
|
24
|
-
document.
|
|
24
|
+
document.documentElement.classList.add(`hasOpenSidebar`);
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
|
data/assets/string_data/en.mjs
CHANGED
data/assets/string_data/es.mjs
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hematite
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Henry Heino
|
|
@@ -43,6 +43,7 @@ files:
|
|
|
43
43
|
- _includes/nav/pages_list.html
|
|
44
44
|
- _includes/nav/pinned_page.html
|
|
45
45
|
- _includes/nav/sidebar.html
|
|
46
|
+
- _includes/settings.html
|
|
46
47
|
- _layouts/calendar.html
|
|
47
48
|
- _layouts/default.html
|
|
48
49
|
- _layouts/home.html
|
|
@@ -59,6 +60,7 @@ files:
|
|
|
59
60
|
- _sass/hematite.scss
|
|
60
61
|
- assets/html/all_tags.html
|
|
61
62
|
- assets/html/settings.html
|
|
63
|
+
- assets/img/favicon-alternate.svg
|
|
62
64
|
- assets/img/favicon.svg
|
|
63
65
|
- assets/js/AnimationUtil.mjs
|
|
64
66
|
- assets/js/AsyncUtil.mjs
|