hima 1.0.5 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -2
- data/_config.yml +3 -1
- data/_includes/header.html +33 -6
- data/_layouts/home.html +1 -1
- data/_layouts/post.html +7 -3
- data/_sass/hima/colourschemes/_base.scss +3 -1
- data/_sass/hima/colourschemes/_gruvbox-dark-theme.scss +5 -3
- data/_sass/hima/colourschemes/_gruvbox-light-theme.scss +6 -4
- data/_sass/hima/custom-styles.scss +2 -0
- data/_sass/hima/custom-variables.scss +1 -0
- data/_sass/hima/initialize.scss +18 -0
- data/_sass/hima/main.scss +59 -20
- data/assets/css/style.scss +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 35e9395b775f9bfcd58b161fc528d29d20cd171b20247d7940a2a2204c12883b
|
|
4
|
+
data.tar.gz: c03ae78b40d8224a1d8f35bbaae2ad9f02093a5f3910c1ab59ada34b6cd23a20
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bec47d9b8590025ed0bfb7457a1cd75a4d4ac8309d705c545974183ed66049be5d6811e6de99fb66a85e0ebf132e88c0c1ef872d761942664ab7f8236b01ffe4
|
|
7
|
+
data.tar.gz: fad923ad3070c1a8581a76a89ac9ded10cfdb4fd83941003575116871558aa1f1e059be66b20fbc4a591f5348f4dcea2ae9cbffbe4cd5dc4ef4a0059d0869b83
|
data/README.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
# hima
|
|
2
|
-
[](https://badge.fury.io/rb/hima)
|
|
3
2
|
|
|
4
3
|
hima is a simple Jekyll theme with the goal of being accessible to everyone, and follows [The A11y Project's accessibility guidelines](https://www.a11yproject.com/checklist/).
|
|
5
4
|
|
|
@@ -82,7 +81,7 @@ Refers to files within the `_layouts` directory, that define the markup for your
|
|
|
82
81
|
Refers to `.scss` files within the `_sass` directory that define the theme's styles.
|
|
83
82
|
|
|
84
83
|
- `hima/colourschemes/auto.scss` — An adaptive colourscheme that switches between light and dark mode depending on your site visitors' preference. *Used by default.*
|
|
85
|
-
- `
|
|
84
|
+
- `hima/initialize.scss` — A component that defines the theme's *skin-agnostic* variable defaults and sass partials.
|
|
86
85
|
It imports the following components (in the following order):
|
|
87
86
|
- `hima/custom-variables.scss` — A hook that allows overriding variable defaults and mixins. (*Note: Cannot override styles*)
|
|
88
87
|
- `hima/main.scss` — Style rules for the theme.
|
data/_config.yml
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
title:
|
|
1
|
+
title: Hima Jekyll Theme
|
|
2
|
+
description: A simple Jekyll theme with a focus on accessibility.
|
|
2
3
|
author:
|
|
3
4
|
name: Your name
|
|
4
5
|
email: youremail@domain.com
|
|
@@ -9,6 +10,7 @@ header_pages:
|
|
|
9
10
|
|
|
10
11
|
hima:
|
|
11
12
|
colourscheme: auto # auto, light, dark
|
|
13
|
+
date_format: "%b. %-d, %Y"
|
|
12
14
|
social:
|
|
13
15
|
- { platform: github, url: 'https://www.github.com' }
|
|
14
16
|
- { platform: linkedin, url: 'https://www.linkedin.com' }
|
data/_includes/header.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{%- assign default_paths = site.pages | map: "path" -%}
|
|
2
2
|
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
|
3
|
-
{%- assign titles_size = site.pages |
|
|
3
|
+
{%- assign titles_size = site.pages | where_exp: 'page', 'page.title.size > 0' | size -%}
|
|
4
4
|
|
|
5
5
|
<header class="header">
|
|
6
6
|
<div class="header__container">
|
|
@@ -14,17 +14,34 @@
|
|
|
14
14
|
|
|
15
15
|
{%- if titles_size > 0 -%}
|
|
16
16
|
<nav class="header__nav">
|
|
17
|
-
<input
|
|
17
|
+
<input
|
|
18
|
+
class="header__nav-toggle"
|
|
19
|
+
id="nav-toggle"
|
|
20
|
+
type="checkbox"
|
|
21
|
+
aria-checked="false"
|
|
22
|
+
tabindex="0"
|
|
23
|
+
onclick="updateCheckedAria(event)"
|
|
24
|
+
onkeydown="updateCheckedAria(event)"
|
|
25
|
+
/>
|
|
18
26
|
<label for="nav-toggle" aria-label="show/hide the navigation menu">
|
|
19
|
-
|
|
27
|
+
<!-- unicode trigram -->
|
|
28
|
+
☰
|
|
20
29
|
</label>
|
|
21
30
|
|
|
22
31
|
<ul class="header__links">
|
|
23
32
|
{%- for path in page_paths -%}
|
|
24
|
-
{%- assign
|
|
25
|
-
{%- if
|
|
33
|
+
{%- assign header-link = site.pages | where: "path", path | first -%}
|
|
34
|
+
{%- if header-link.title -%}
|
|
26
35
|
<li class="header__link">
|
|
27
|
-
<a
|
|
36
|
+
<a
|
|
37
|
+
href="{{ header-link.url | relative_url }}"
|
|
38
|
+
aria-label="{{ header-link.title }}"
|
|
39
|
+
{% if header-link.url == page.url %}
|
|
40
|
+
class="active"
|
|
41
|
+
{% endif %}
|
|
42
|
+
>
|
|
43
|
+
{{ header-link.title | escape }}
|
|
44
|
+
</a>
|
|
28
45
|
</li>
|
|
29
46
|
{%- endif -%}
|
|
30
47
|
{%- endfor -%}
|
|
@@ -46,4 +63,14 @@
|
|
|
46
63
|
header.classList.remove('header--pinned')
|
|
47
64
|
}
|
|
48
65
|
})
|
|
66
|
+
|
|
67
|
+
function updateCheckedAria(event) {
|
|
68
|
+
const spacebarKeyCode = 32
|
|
69
|
+
const checkbox = event.target
|
|
70
|
+
|
|
71
|
+
if (event.keyCode && event.keyCode !== spacebarKeyCode) {
|
|
72
|
+
return
|
|
73
|
+
}
|
|
74
|
+
checkbox.setAttribute('aria-checked', checkbox.checked)
|
|
75
|
+
}
|
|
49
76
|
</script>
|
data/_layouts/home.html
CHANGED
|
@@ -11,7 +11,7 @@ layout: default
|
|
|
11
11
|
<ol class="post-list">
|
|
12
12
|
{%- for post in site.posts -%}
|
|
13
13
|
<li class="post-list__post">
|
|
14
|
-
{%- assign date_format = site.hima.date_format | default: "%b %-d, %Y" -%}
|
|
14
|
+
{%- assign date_format = site.hima.date_format | default: "%b. %-d, %Y" -%}
|
|
15
15
|
<span class="post-list__date">{{ post.date | date: date_format }}</span>
|
|
16
16
|
<h3 class="post-list__title">
|
|
17
17
|
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
data/_layouts/post.html
CHANGED
|
@@ -5,12 +5,16 @@ layout: default
|
|
|
5
5
|
<div class="post">
|
|
6
6
|
<div class="post__header">
|
|
7
7
|
<h1 class="post__title">{{ page.title | escape }}</h1>
|
|
8
|
-
{%- assign date_format = site.hima.date_format | default: "%b %-d, %Y" -%}
|
|
8
|
+
{%- assign date_format = site.hima.date_format | default: "%b. %-d, %Y" -%}
|
|
9
9
|
{%- if page.author -%}
|
|
10
|
-
<span class="post__author">
|
|
10
|
+
<span class="post__author">
|
|
11
|
+
by {{ page.author | array_to_sentence_string }}
|
|
12
|
+
</span>
|
|
11
13
|
{%- endif -%}
|
|
12
14
|
{%- if page.date -%}
|
|
13
|
-
<span class="post__date">
|
|
15
|
+
<span class="post__date">
|
|
16
|
+
on {{ page.date | date: date_format }}
|
|
17
|
+
</span>
|
|
14
18
|
{%- endif -%}
|
|
15
19
|
</div>
|
|
16
20
|
|
|
@@ -14,10 +14,12 @@ $post-meta-colour: var(--hima-post-meta-colour);
|
|
|
14
14
|
|
|
15
15
|
$quote-background: var(--hima-quote-background);
|
|
16
16
|
$quote-border: var(--hima-quote-border);
|
|
17
|
+
$quote-border-accent: var(--hima-quote-border-accent);
|
|
17
18
|
|
|
18
19
|
$codeblock-border: var(--hima-codeblock-border);
|
|
19
20
|
$codeblock-border-accent: var(--hima-codeblock-border-accent);
|
|
20
|
-
$
|
|
21
|
+
$codeblock-background: var(--hima-codeblock-background);
|
|
22
|
+
$inline-code-border: var(--hima-inline-code-border);
|
|
21
23
|
$inline-code-background: var(--hima-inline-code-background);
|
|
22
24
|
|
|
23
25
|
$table-background: var(--hima-table-background);
|
|
@@ -19,11 +19,13 @@ $white: #faf6e8;
|
|
|
19
19
|
--hima-post-meta-colour: #{$white0s};
|
|
20
20
|
|
|
21
21
|
--hima-quote-background: #{$black0h};
|
|
22
|
-
--hima-quote-border: #{$
|
|
22
|
+
--hima-quote-border: #{$black0};
|
|
23
|
+
--hima-quote-border-accent: #{$yellow};
|
|
23
24
|
|
|
24
|
-
--hima-codeblock-
|
|
25
|
+
--hima-codeblock-background: #{$black0h};
|
|
26
|
+
--hima-codeblock-border: #{$black0};
|
|
25
27
|
--hima-codeblock-border-accent: #{$aqua};
|
|
26
|
-
--hima-code-border: #{$aqua};
|
|
28
|
+
--hima-inline-code-border: #{$aqua};
|
|
27
29
|
--hima-inline-code-background: #{$black0h};
|
|
28
30
|
|
|
29
31
|
--hima-table-background: #{$black1};
|
|
@@ -19,12 +19,14 @@ $white: #faf6e8;
|
|
|
19
19
|
--hima-post-meta-colour: #{$black2};
|
|
20
20
|
|
|
21
21
|
--hima-quote-background: #{$white};
|
|
22
|
-
--hima-quote-border: #{$
|
|
22
|
+
--hima-quote-border: #{$white0h};
|
|
23
|
+
--hima-quote-border-accent: #{$yellow-light};
|
|
23
24
|
|
|
24
|
-
--hima-codeblock-border: #{$
|
|
25
|
+
--hima-codeblock-border: #{$white0h};
|
|
25
26
|
--hima-codeblock-border-accent: #{$aqua-light};
|
|
26
|
-
--hima-
|
|
27
|
-
--hima-inline-code-
|
|
27
|
+
--hima-codeblock-background: #{$white};
|
|
28
|
+
--hima-inline-code-border: #{$aqua-light};
|
|
29
|
+
--hima-inline-code-background: #{$white};
|
|
28
30
|
|
|
29
31
|
--hima-table-background: #{$white};
|
|
30
32
|
--hima-table-header-background: #{$white0};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
// override hima's scss variables here
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@charset "utf-8";
|
|
2
|
+
|
|
3
|
+
$content-padding: 2rem;
|
|
4
|
+
$content-padding-mobile: 1rem;
|
|
5
|
+
$content-width: 60rem;
|
|
6
|
+
|
|
7
|
+
$header-margin-top: 4rem;
|
|
8
|
+
$header-height: 8rem;
|
|
9
|
+
$header-pinned-height: 4rem;
|
|
10
|
+
|
|
11
|
+
$on-mobile: 425px;
|
|
12
|
+
$on-tablet: 800px;
|
|
13
|
+
|
|
14
|
+
$block-border-radius: .25rem;
|
|
15
|
+
|
|
16
|
+
@import "hima/custom-variables";
|
|
17
|
+
@import "hima/main";
|
|
18
|
+
@import "hima/custom-styles";
|
data/_sass/hima/main.scss
CHANGED
|
@@ -1,17 +1,6 @@
|
|
|
1
1
|
@charset "utf-8";
|
|
2
2
|
@import './fonts';
|
|
3
3
|
|
|
4
|
-
$content-padding: 2rem;
|
|
5
|
-
$content-padding-mobile: 1rem;
|
|
6
|
-
$content-width: 60rem;
|
|
7
|
-
|
|
8
|
-
$header-margin-top: 4rem;
|
|
9
|
-
$header-height: 8rem;
|
|
10
|
-
$header-pinned-height: 4rem;
|
|
11
|
-
|
|
12
|
-
$on-mobile: 425px;
|
|
13
|
-
$on-tablet: 800px;
|
|
14
|
-
|
|
15
4
|
html {
|
|
16
5
|
overflow-y: scroll;
|
|
17
6
|
}
|
|
@@ -85,9 +74,14 @@ a {
|
|
|
85
74
|
align-items: end;
|
|
86
75
|
margin-bottom: 2rem;
|
|
87
76
|
position: sticky;
|
|
77
|
+
-webkit-font-smoothing: antialiased;
|
|
88
78
|
top: -($header-height + $header-margin-top - $header-pinned-height);
|
|
89
79
|
height: $header-height + $header-margin-top;
|
|
90
|
-
|
|
80
|
+
|
|
81
|
+
@media (max-width: $on-mobile) {
|
|
82
|
+
top: -($header-height + ($header-margin-top/2) - $header-pinned-height);
|
|
83
|
+
height: $header-height + ($header-margin-top/2);
|
|
84
|
+
}
|
|
91
85
|
|
|
92
86
|
&__title {
|
|
93
87
|
display: flex;
|
|
@@ -100,6 +94,10 @@ a {
|
|
|
100
94
|
text-align: center;
|
|
101
95
|
line-height: 1.2;
|
|
102
96
|
|
|
97
|
+
@media (max-width: $on-mobile) {
|
|
98
|
+
font-size: 2rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
103
101
|
a {
|
|
104
102
|
text-decoration: none;
|
|
105
103
|
color: $foreground;
|
|
@@ -122,7 +120,11 @@ a {
|
|
|
122
120
|
display: none;
|
|
123
121
|
margin-top: 0;
|
|
124
122
|
height: 24px;
|
|
125
|
-
|
|
123
|
+
width: 24px;
|
|
124
|
+
color: $nav-menu-icon-fill;
|
|
125
|
+
font-size: 1.33rem;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
user-select: none;
|
|
126
128
|
}
|
|
127
129
|
|
|
128
130
|
&__links {
|
|
@@ -138,6 +140,10 @@ a {
|
|
|
138
140
|
margin: 0 2rem;
|
|
139
141
|
}
|
|
140
142
|
|
|
143
|
+
a.active {
|
|
144
|
+
border-bottom: .15rem solid $foreground;
|
|
145
|
+
}
|
|
146
|
+
|
|
141
147
|
&--pinned {
|
|
142
148
|
background: $header-pinned-background;
|
|
143
149
|
box-shadow: 0 -1rem 2rem 0 $header-pinned-boxshadow;
|
|
@@ -154,6 +160,12 @@ a {
|
|
|
154
160
|
|
|
155
161
|
&__title {
|
|
156
162
|
font-size: 1.67rem;
|
|
163
|
+
|
|
164
|
+
&:only-child {
|
|
165
|
+
margin-left: auto;
|
|
166
|
+
margin-right: auto;
|
|
167
|
+
}
|
|
168
|
+
|
|
157
169
|
@media (max-width: $on-mobile) {
|
|
158
170
|
font-size: 1.33rem;
|
|
159
171
|
}
|
|
@@ -170,7 +182,7 @@ a {
|
|
|
170
182
|
align-items:end;
|
|
171
183
|
position: absolute;
|
|
172
184
|
border: .2rem solid $nav-pinned-border;
|
|
173
|
-
border-radius:
|
|
185
|
+
border-radius: $block-border-radius;
|
|
174
186
|
right: $content-padding;
|
|
175
187
|
top: .67rem;
|
|
176
188
|
padding: .5rem;
|
|
@@ -181,6 +193,19 @@ a {
|
|
|
181
193
|
}
|
|
182
194
|
}
|
|
183
195
|
|
|
196
|
+
&__nav-toggle {
|
|
197
|
+
display: block;
|
|
198
|
+
opacity: 0;
|
|
199
|
+
height: 0;
|
|
200
|
+
margin: 0;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&__nav-toggle:focus-visible + label {
|
|
204
|
+
border: .15rem solid $foreground;
|
|
205
|
+
border-radius: $block-border-radius;
|
|
206
|
+
box-sizing: border-box;
|
|
207
|
+
}
|
|
208
|
+
|
|
184
209
|
&__link {
|
|
185
210
|
margin: 0;
|
|
186
211
|
margin-left: 3rem;
|
|
@@ -194,7 +219,9 @@ a {
|
|
|
194
219
|
|
|
195
220
|
&__nav label[for="nav-toggle"] {
|
|
196
221
|
@media (max-width: $on-tablet) {
|
|
197
|
-
display:
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
198
225
|
}
|
|
199
226
|
}
|
|
200
227
|
|
|
@@ -251,6 +278,11 @@ a {
|
|
|
251
278
|
margin-top: 4rem;
|
|
252
279
|
margin-bottom: 8rem;
|
|
253
280
|
|
|
281
|
+
@media (max-width: $on-mobile) {
|
|
282
|
+
margin-bottom: 4rem;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
|
|
254
286
|
&__author {
|
|
255
287
|
display: flex;
|
|
256
288
|
align-items: center;
|
|
@@ -311,8 +343,9 @@ blockquote {
|
|
|
311
343
|
background: $quote-background;
|
|
312
344
|
margin: 0;
|
|
313
345
|
padding: 1rem 2rem 1rem;
|
|
314
|
-
border
|
|
315
|
-
border-
|
|
346
|
+
border: .1rem solid $quote-border;
|
|
347
|
+
border-left: .3rem solid $quote-border-accent;
|
|
348
|
+
border-radius: $block-border-radius;
|
|
316
349
|
font-style: italic;
|
|
317
350
|
|
|
318
351
|
p {
|
|
@@ -331,14 +364,19 @@ pre {
|
|
|
331
364
|
&.highlight {
|
|
332
365
|
border: none;
|
|
333
366
|
}
|
|
367
|
+
|
|
368
|
+
.highlight > & {
|
|
369
|
+
margin: 0;
|
|
370
|
+
}
|
|
334
371
|
}
|
|
335
372
|
|
|
336
373
|
.highlight {
|
|
337
374
|
margin: 0;
|
|
338
375
|
border: .1rem solid $codeblock-border;
|
|
339
376
|
border-left: .3rem solid $codeblock-border-accent;
|
|
340
|
-
border-radius:
|
|
377
|
+
border-radius: $block-border-radius;
|
|
341
378
|
overflow-x: auto;
|
|
379
|
+
background: $codeblock-background;
|
|
342
380
|
|
|
343
381
|
code {
|
|
344
382
|
padding: 0;
|
|
@@ -353,8 +391,8 @@ code {
|
|
|
353
391
|
:not(pre) > code {
|
|
354
392
|
background: $inline-code-background;
|
|
355
393
|
padding: .2rem .25rem;
|
|
356
|
-
border-radius:
|
|
357
|
-
border: .15rem solid $code-border;
|
|
394
|
+
border-radius: $block-border-radius;
|
|
395
|
+
border: .15rem solid $inline-code-border;
|
|
358
396
|
overflow-x: auto;
|
|
359
397
|
}
|
|
360
398
|
|
|
@@ -362,6 +400,7 @@ table {
|
|
|
362
400
|
width: 100%;
|
|
363
401
|
border-collapse: collapse;
|
|
364
402
|
background: $table-background;
|
|
403
|
+
border-radius: $block-border-radius;
|
|
365
404
|
|
|
366
405
|
@media (max-width: $on-tablet) {
|
|
367
406
|
display: block;
|
data/assets/css/style.scss
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hima
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0
|
|
4
|
+
version: 1.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Brandon Cardoso
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2022-12-
|
|
11
|
+
date: 2022-12-26 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -84,7 +84,10 @@ files:
|
|
|
84
84
|
- _sass/hima/colourschemes/auto.scss
|
|
85
85
|
- _sass/hima/colourschemes/dark.scss
|
|
86
86
|
- _sass/hima/colourschemes/light.scss
|
|
87
|
+
- _sass/hima/custom-styles.scss
|
|
88
|
+
- _sass/hima/custom-variables.scss
|
|
87
89
|
- _sass/hima/fonts.scss
|
|
90
|
+
- _sass/hima/initialize.scss
|
|
88
91
|
- _sass/hima/main.scss
|
|
89
92
|
- assets/css/style.scss
|
|
90
93
|
- assets/fonts/FiraCode.woff2
|