hima 1.0.4 → 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/fonts.scss +6 -3
- data/_sass/hima/initialize.scss +18 -0
- data/_sass/hima/main.scss +66 -24
- data/assets/css/style.scss +1 -1
- data/assets/fonts/FiraCode.woff2 +0 -0
- data/assets/fonts/OpenSans.woff2 +0 -0
- data/assets/fonts/Oswald.woff2 +0 -0
- metadata +8 -5
- data/assets/fonts/FiraCode.ttf +0 -0
- data/assets/fonts/OpenSans.ttf +0 -0
- data/assets/fonts/Oswald.ttf +0 -0
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
|
-
[![Gem Version](https://badge.fury.io/rb/hima.svg)](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
|
data/_sass/hima/fonts.scss
CHANGED
@@ -1,20 +1,23 @@
|
|
1
1
|
@font-face {
|
2
2
|
font-family: 'Oswald';
|
3
|
+
font-display: swap;
|
3
4
|
src:
|
4
5
|
local('Oswald'),
|
5
|
-
url('../fonts/Oswald.
|
6
|
+
url('../fonts/Oswald.woff2') format('woff2');
|
6
7
|
}
|
7
8
|
|
8
9
|
@font-face {
|
9
10
|
font-family: 'OpenSans';
|
11
|
+
font-display: swap;
|
10
12
|
src:
|
11
13
|
local('Open Sans'),
|
12
|
-
url('../fonts/OpenSans.
|
14
|
+
url('../fonts/OpenSans.woff2') format('woff2');
|
13
15
|
}
|
14
16
|
|
15
17
|
@font-face {
|
16
18
|
font-family: 'FiraCode';
|
19
|
+
font-display: swap;
|
17
20
|
src:
|
18
21
|
local('Fira Code'),
|
19
|
-
url('../fonts/FiraCode.
|
22
|
+
url('../fonts/FiraCode.woff2') format('woff2');
|
20
23
|
}
|
@@ -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
|
}
|
@@ -28,7 +17,7 @@ body {
|
|
28
17
|
}
|
29
18
|
|
30
19
|
h1, h2, h3, h4, h5, h6 {
|
31
|
-
font-family: Oswald;
|
20
|
+
font-family: Oswald, Arial, sans-serif;
|
32
21
|
margin-top: 2rem;
|
33
22
|
font-weight: normal;
|
34
23
|
}
|
@@ -85,21 +74,30 @@ 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;
|
94
88
|
justify-content: center;
|
95
89
|
align-items: center;
|
96
90
|
font-size: 2.5rem;
|
97
|
-
font-family: Oswald;
|
98
|
-
font-variation-settings: "wght"
|
91
|
+
font-family: Oswald, Arial, sans-serif;
|
92
|
+
font-variation-settings: "wght" 700;
|
99
93
|
text-transform: uppercase;
|
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;
|
@@ -346,12 +384,15 @@ pre {
|
|
346
384
|
}
|
347
385
|
}
|
348
386
|
|
387
|
+
code {
|
388
|
+
font-family: FiraCode, monospace;
|
389
|
+
}
|
390
|
+
|
349
391
|
:not(pre) > code {
|
350
392
|
background: $inline-code-background;
|
351
393
|
padding: .2rem .25rem;
|
352
|
-
border-radius:
|
353
|
-
border: .15rem solid $code-border;
|
354
|
-
font-family: FiraCode;
|
394
|
+
border-radius: $block-border-radius;
|
395
|
+
border: .15rem solid $inline-code-border;
|
355
396
|
overflow-x: auto;
|
356
397
|
}
|
357
398
|
|
@@ -359,6 +400,7 @@ table {
|
|
359
400
|
width: 100%;
|
360
401
|
border-collapse: collapse;
|
361
402
|
background: $table-background;
|
403
|
+
border-radius: $block-border-radius;
|
362
404
|
|
363
405
|
@media (max-width: $on-tablet) {
|
364
406
|
display: block;
|
data/assets/css/style.scss
CHANGED
Binary file
|
Binary file
|
Binary file
|
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,12 +84,15 @@ 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
|
-
- assets/fonts/FiraCode.
|
91
|
-
- assets/fonts/OpenSans.
|
92
|
-
- assets/fonts/Oswald.
|
93
|
+
- assets/fonts/FiraCode.woff2
|
94
|
+
- assets/fonts/OpenSans.woff2
|
95
|
+
- assets/fonts/Oswald.woff2
|
93
96
|
- assets/hima-social-icons.html
|
94
97
|
homepage: https://www.github.com/brandoncardoso/hima
|
95
98
|
licenses:
|
data/assets/fonts/FiraCode.ttf
DELETED
Binary file
|
data/assets/fonts/OpenSans.ttf
DELETED
Binary file
|
data/assets/fonts/Oswald.ttf
DELETED
Binary file
|