hematite 0.0.10 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|