noir-for-jekyll 1.1.0 → 1.2.0
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/README.md +2 -2
- data/_layouts/page.html +1 -1
- data/_layouts/post.html +17 -2
- data/_sass/_base.scss +102 -91
- data/_sass/_code.scss +217 -58
- data/_sass/_layout.scss +13 -15
- data/_sass/_masthead.scss +4 -3
- data/_sass/_message.scss +88 -65
- data/_sass/_pagination.scss +56 -59
- data/_sass/_posts.scss +110 -14
- data/_sass/_syntax.scss +102 -64
- data/_sass/_type.scss +74 -39
- data/_sass/_variables.scss +29 -35
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 41fab3f00ca2f24edddc4d3896d5e0e92f6e217d1f238132200a3c623d47e895
|
4
|
+
data.tar.gz: 541c21c3ed7eac8cf28ce68900fade417a0f4ab33647df64f93081416169a302
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1fc5e9d40074c6bf32f5ac756a465640b9e445370541f080a935a1399dee0b4ac6e276ae3b0ddf0b0f3a9b357e1d92361f72df62832a38c991714ad1860747db
|
7
|
+
data.tar.gz: 58660b5b4aa1ce8056e550d2ce8751bc1d0585d02589b042ef7d01504f56bf76bf164b0c320b2da427de20547aee92838c4e2b51b26b6bc4eb2904ae29ff5fa9
|
data/README.md
CHANGED
@@ -10,7 +10,7 @@ Detailed instructions for getting Ruby setup can be found [here](https://www.rub
|
|
10
10
|
|
11
11
|
Once that’s done it’s time for the fun part. Don’t even bother with the `jekyll new site` command, I am going to provide a more foolproof way so that you don’t wind up in dependencies hell.
|
12
12
|
|
13
|
-
1. Download the [
|
13
|
+
1. Download the latest [release](https://github.com/essentialenemy/noir/releases/) (**NOT** the ZIP archive of the latest commit made, the latest **release** asset) of this repository and copy the files into a new directory where you want your site’s configuration files to live.
|
14
14
|
2. In your terminal or command prompt `cd` into the new directory you just made for those files.
|
15
15
|
3. Run the command: `bundle install` as this will install all of the dependencies I have named in `Gemfile.lock`.
|
16
16
|
4. Test that the site can be built with no issues, run the command: `bundle exec jekyll serve` and view the site by navigating to `127.0.0.1:4000` in your web browser.
|
@@ -18,4 +18,4 @@ Once that’s done it’s time for the fun part. Don’t even bother with the `j
|
|
18
18
|
|
19
19
|
If you have any problems that arise I am glad to help you as much as I can. You can open a [new issue](https://github.com/essentialenemy/noir/issues), reach out to me on [Twitter](https://twitter.com/essentialenemy) or email me at the address found inside of `_config.yml`. I welcome your feedback and requests as well.
|
20
20
|
|
21
|
-
Thank you for your interest in Noir!
|
21
|
+
Thank you for your interest in Noir!
|
data/_layouts/page.html
CHANGED
data/_layouts/post.html
CHANGED
@@ -3,14 +3,29 @@ layout: default
|
|
3
3
|
---
|
4
4
|
|
5
5
|
<article class="post">
|
6
|
-
|
6
|
+
<h1 class="post-title">{% if page.link %}
|
7
|
+
<h1 class="post-title"><a href="{{ page.link }}">
|
8
|
+
{{ page.title | smartify }} <span class="link-arrow">→</span></a>
|
9
|
+
</h1>
|
10
|
+
{% else %}
|
11
|
+
<h1 class="post-title">{{ page.title | smartify }}</h1>
|
12
|
+
{% endif %}</h1>
|
7
13
|
<time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
|
8
14
|
{{ content | smartify }}
|
9
15
|
</article>
|
10
16
|
|
17
|
+
<div class="PageNavigation">
|
18
|
+
{% if page.previous.url %}
|
19
|
+
<a class="prev" href="{{page.previous.url}}">← Previous</a>
|
20
|
+
{% endif %}
|
21
|
+
{% if page.next.url %}
|
22
|
+
<a class="next" href="{{page.next.url}}">Next →</a>
|
23
|
+
{% endif %}
|
24
|
+
</div>
|
25
|
+
|
11
26
|
{% if site.related_posts != empty %}
|
12
27
|
<aside class="related">
|
13
|
-
<h3>Related
|
28
|
+
<h3>Related Posts</h3>
|
14
29
|
<ul class="related-posts">
|
15
30
|
{% for post in site.related_posts limit:3 %}
|
16
31
|
<li>
|
data/_sass/_base.scss
CHANGED
@@ -1,91 +1,102 @@
|
|
1
|
-
// Body
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
body
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
}
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
width: 100%;
|
65
|
-
|
66
|
-
border:
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
border: 1px solid
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
}
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
1
|
+
// Body
|
2
|
+
|
3
|
+
* {
|
4
|
+
-webkit-box-sizing: border-box;
|
5
|
+
-moz-box-sizing: border-box;
|
6
|
+
box-sizing: border-box;
|
7
|
+
}
|
8
|
+
|
9
|
+
html,
|
10
|
+
body {
|
11
|
+
margin: 0;
|
12
|
+
padding: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
html {
|
16
|
+
font-family: $root-font-family;
|
17
|
+
font-size: $root-font-size;
|
18
|
+
line-height: $root-line-height;
|
19
|
+
|
20
|
+
@media (min-width: $large-breakpoint) {
|
21
|
+
font-size: $large-font-size;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
body {
|
26
|
+
color: $body-color;
|
27
|
+
background-color: $body-bg;
|
28
|
+
-webkit-text-size-adjust: 100%;
|
29
|
+
-ms-text-size-adjust: 100%;
|
30
|
+
|
31
|
+
@media (prefers-color-scheme: dark) {
|
32
|
+
color: $body-color-dark;
|
33
|
+
background-color: $body-bg-dark;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
// No `:visited` state is required by default (browsers will use `a`)
|
38
|
+
a {
|
39
|
+
color: $light;
|
40
|
+
text-decoration: none;
|
41
|
+
|
42
|
+
// `:focus` is linked to `:hover` for basic accessibility
|
43
|
+
&:hover,
|
44
|
+
&:focus {
|
45
|
+
text-decoration: none;
|
46
|
+
color: $light;
|
47
|
+
|
48
|
+
@media (prefers-color-scheme: dark) {
|
49
|
+
color: $dark;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
strong {
|
54
|
+
color: inherit;
|
55
|
+
}
|
56
|
+
|
57
|
+
@media (prefers-color-scheme: dark) {
|
58
|
+
color: $dark;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
img {
|
63
|
+
display: block;
|
64
|
+
max-width: 100%;
|
65
|
+
margin: 0 0 1rem;
|
66
|
+
border-radius: 5px;
|
67
|
+
}
|
68
|
+
|
69
|
+
table {
|
70
|
+
margin-bottom: 1rem;
|
71
|
+
width: 100%;
|
72
|
+
font-size: 85%;
|
73
|
+
border: 1px solid #d4d4d4;
|
74
|
+
border-collapse: collapse;
|
75
|
+
|
76
|
+
@media (prefers-color-scheme: dark) {
|
77
|
+
border: 1px solid #555555;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
td,
|
82
|
+
th {
|
83
|
+
padding: .25rem .5rem;
|
84
|
+
border: 1px solid #d4d4d4;
|
85
|
+
|
86
|
+
@media (prefers-color-scheme: dark) {
|
87
|
+
border: 1px solid #555555;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
th {
|
92
|
+
text-align: left;
|
93
|
+
}
|
94
|
+
|
95
|
+
tbody tr:nth-child(odd) td,
|
96
|
+
tbody tr:nth-child(odd) th {
|
97
|
+
background-color: #eee;
|
98
|
+
|
99
|
+
@media (prefers-color-scheme: dark) {
|
100
|
+
background-color: #2d2d2d;
|
101
|
+
}
|
102
|
+
}
|
data/_sass/_code.scss
CHANGED
@@ -1,75 +1,234 @@
|
|
1
|
-
// Code
|
2
|
-
//
|
3
|
-
// Inline and block-level code snippets. Includes tweaks to syntax highlighted
|
4
|
-
// snippets from Pygments/Rouge and Gist embeds.
|
1
|
+
// Code blocks and syntax highlighting
|
5
2
|
|
6
|
-
code
|
7
|
-
|
8
|
-
|
3
|
+
/* Applies to inline `code blocks` */
|
4
|
+
.highlighter-rouge {
|
5
|
+
font-family: $root-font-family;
|
6
|
+
font-size: 100%;
|
7
|
+
padding: 3px 4px;
|
8
|
+
background-color: #e0e0e0;
|
9
|
+
color: $code-light;
|
10
|
+
white-space: nowrap;
|
11
|
+
|
12
|
+
@media (prefers-color-scheme: dark) {
|
13
|
+
background-color: #212c2d;
|
14
|
+
color: $code-dark;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
/* Applies to all code */
|
19
|
+
pre, code {
|
20
|
+
font-size: 13px;
|
21
|
+
font-family: $code-font-family;
|
22
|
+
font-style: normal;
|
23
|
+
|
24
|
+
font-feature-settings: "kern" off;
|
25
|
+
font-kerning: none;
|
26
|
+
font-variant: none;
|
27
|
+
|
28
|
+
background-color: #eef;
|
29
|
+
|
30
|
+
::selection {
|
31
|
+
color: $code-bg;
|
32
|
+
background: #bdbdb3;
|
33
|
+
}
|
34
|
+
|
35
|
+
::-moz-selection {
|
36
|
+
color: $code-bg;
|
37
|
+
background: #bdbdb3;
|
38
|
+
}
|
39
|
+
|
40
|
+
::-webkit-selection {
|
41
|
+
color: $code-bg;
|
42
|
+
background: #bdbdb3;
|
43
|
+
}
|
9
44
|
}
|
10
45
|
|
46
|
+
/* Inline code, no highlight */
|
11
47
|
code {
|
12
|
-
|
48
|
+
padding: 2px 4px;
|
49
|
+
border-radius: 3px;
|
50
|
+
|
51
|
+
white-space: nowrap;
|
52
|
+
}
|
53
|
+
|
54
|
+
blockquote code {
|
55
|
+
color: #656565;
|
56
|
+
}
|
57
|
+
|
58
|
+
/* Inline code, highlight */
|
59
|
+
code.highlight {
|
60
|
+
border-radius: 3px;
|
61
|
+
|
62
|
+
color: #bdbdb3;
|
63
|
+
background-color: $code-bg;
|
13
64
|
}
|
14
65
|
|
66
|
+
/* Block code, no highlight */
|
15
67
|
pre {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
68
|
+
border-radius: 5px;
|
69
|
+
margin: 30px * 0.75 30px / 2;
|
70
|
+
padding: 8px 12px;
|
71
|
+
overflow-x: auto;
|
72
|
+
background-color: #f1f1ff;
|
73
|
+
|
74
|
+
code {
|
75
|
+
border: 0;
|
76
|
+
padding: 0;
|
77
|
+
|
78
|
+
white-space: pre;
|
79
|
+
}
|
20
80
|
}
|
21
|
-
|
22
|
-
.highlighter-rouge {
|
23
|
-
padding: 3px 4px;
|
24
|
-
border: 1px solid $green;
|
25
|
-
border-radius: 6px;
|
26
|
-
background-color: #eee;
|
27
|
-
color: $green;
|
28
|
-
white-space: nowrap;
|
29
|
-
font-size: 85%;
|
30
|
-
|
31
|
-
@media (prefers-color-scheme: dark) {
|
32
|
-
background-color: #202020;
|
33
|
-
}
|
34
81
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
82
|
+
/* Block code, highlight */
|
83
|
+
figure.highlight, div.highlight {
|
84
|
+
position: relative;
|
85
|
+
|
86
|
+
pre {
|
87
|
+
background-color: $code-bg;
|
88
|
+
border: 1px solid $code-light;
|
89
|
+
|
90
|
+
@media (prefers-color-scheme: dark) {
|
91
|
+
border: 1px solid $code-dark;
|
92
|
+
}
|
93
|
+
|
94
|
+
code {
|
95
|
+
background-color: $code-bg;
|
96
|
+
color: #bdbdb3;
|
97
|
+
|
98
|
+
counter-reset: code;
|
99
|
+
display: block;
|
100
|
+
line-height: 1.5;
|
101
|
+
|
102
|
+
/* Display language name */
|
103
|
+
&[data-lang]::before {
|
104
|
+
content: attr(data-lang);
|
105
|
+
position: absolute;
|
106
|
+
right: 20px; // 15 + 5
|
107
|
+
|
108
|
+
font-size: 13px;
|
109
|
+
top: -11px;
|
110
|
+
padding: 0px 4px;
|
111
|
+
text-transform: uppercase;
|
112
|
+
font-weight: bold;
|
113
|
+
|
114
|
+
border: 1px solid $code-light;
|
115
|
+
border-top-left-radius: 5px;
|
116
|
+
border-top-right-radius: 5px;
|
117
|
+
border-bottom-left-radius: 5px;
|
118
|
+
border-bottom-right-radius: 5px;
|
119
|
+
|
120
|
+
min-width: 30px;
|
121
|
+
text-align: center;
|
122
|
+
|
123
|
+
color: $code-light;
|
124
|
+
background-color: $code-bg;
|
125
|
+
|
126
|
+
@media (prefers-color-scheme: dark) {
|
127
|
+
border: 1px solid $code-dark;
|
128
|
+
color: $code-dark;
|
129
|
+
}
|
130
|
+
|
131
|
+
@mixin media-query($device) {
|
132
|
+
@media screen and (max-width: $device) {
|
133
|
+
@content;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
137
|
+
@include media-query(300px) {
|
138
|
+
visibility: hidden;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
div {
|
143
|
+
counter-increment: code;
|
144
|
+
|
145
|
+
/* Line numbers */
|
146
|
+
&::before {
|
147
|
+
color: #608079;
|
148
|
+
content: counter(code);
|
149
|
+
|
150
|
+
width: 14px;
|
151
|
+
text-align: right;
|
40
152
|
|
41
|
-
|
42
|
-
|
43
|
-
|
153
|
+
/* Add a nice border */
|
154
|
+
display: inline-block;
|
155
|
+
padding-right: 30px / 4;
|
156
|
+
margin-right: 30px * 0.4;
|
157
|
+
border-right: 1px solid #656565;
|
158
|
+
|
159
|
+
/* For older browsers and Safari */
|
160
|
+
-webkit-touch-callout: none;
|
161
|
+
-webkit-user-select: none;
|
162
|
+
-khtml-user-select: none;
|
163
|
+
-moz-user-select: none;
|
164
|
+
-ms-user-select: none;
|
165
|
+
user-select: none;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
}
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
/* Hide language */
|
173
|
+
.hide-lang + figure code::before {
|
174
|
+
visibility: hidden;
|
44
175
|
}
|
45
176
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
177
|
+
/**
|
178
|
+
* Language-specific settings
|
179
|
+
*/
|
180
|
+
|
181
|
+
.language-liquid {
|
182
|
+
.p {
|
183
|
+
color: #6aaf50;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
/**
|
188
|
+
* ID-specific overrides
|
189
|
+
*/
|
190
|
+
|
191
|
+
#c-example + figure {
|
192
|
+
.kt {
|
193
|
+
color: #5180b3;
|
194
|
+
}
|
195
|
+
}
|
196
|
+
|
197
|
+
#liquid-example + figure {
|
198
|
+
.p {
|
199
|
+
color: #bdbdb3;
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
203
|
+
#borders-example + figure {
|
204
|
+
div {
|
205
|
+
&::before {
|
206
|
+
padding-left: 0.625em;
|
207
|
+
border-left: 1px solid #656565;
|
208
|
+
}
|
209
|
+
|
210
|
+
&:first-of-type::before {
|
211
|
+
padding-top: 0.25em;
|
212
|
+
border-top: 1px solid #656565;
|
213
|
+
border-top-left-radius: 4px;
|
214
|
+
border-top-right-radius: 4px;
|
215
|
+
}
|
216
|
+
|
217
|
+
&:last-of-type::before {
|
218
|
+
padding-bottom: 0.25em;
|
219
|
+
border-bottom: 1px solid #656565;
|
220
|
+
border-bottom-left-radius: 4px;
|
221
|
+
border-bottom-right-radius: 4px;
|
222
|
+
}
|
223
|
+
}
|
50
224
|
}
|
51
225
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
&,
|
57
|
-
td,
|
58
|
-
th {
|
59
|
-
border: 0;
|
60
|
-
}
|
61
|
-
|
62
|
-
.gutter {
|
63
|
-
color: rgba(0,0,0,.25);
|
64
|
-
vertical-align: top;
|
65
|
-
// Make sure numbers aren't selectable
|
66
|
-
-webkit-user-select: none;
|
67
|
-
-ms-user-select: none;
|
68
|
-
user-select: none;
|
69
|
-
}
|
226
|
+
#yaml-example + figure {
|
227
|
+
.na, .s {
|
228
|
+
color: #ab75c3;
|
229
|
+
}
|
70
230
|
}
|
71
231
|
|
72
|
-
|
73
|
-
|
74
|
-
padding: 15px !important;
|
232
|
+
.hl-1 + figure .line-1 {
|
233
|
+
background-color: #112b47;
|
75
234
|
}
|
data/_sass/_layout.scss
CHANGED
@@ -1,15 +1,13 @@
|
|
1
|
-
//
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
.
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
margin-bottom: 2rem;
|
15
|
-
}
|
1
|
+
// Site structure
|
2
|
+
|
3
|
+
.container {
|
4
|
+
max-width: 38rem;
|
5
|
+
padding-left: 1.5rem;
|
6
|
+
padding-right: 1.5rem;
|
7
|
+
margin-left: auto;
|
8
|
+
margin-right: auto;
|
9
|
+
}
|
10
|
+
|
11
|
+
footer {
|
12
|
+
margin-bottom: 2rem;
|
13
|
+
}
|
data/_sass/_masthead.scss
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
// Masthead
|
2
2
|
//
|
3
|
-
//
|
3
|
+
// The style of the site's title and optional secondary description.
|
4
4
|
|
5
5
|
.masthead {
|
6
6
|
padding-top: 1rem;
|
@@ -11,10 +11,11 @@
|
|
11
11
|
.masthead-title {
|
12
12
|
margin-top: 0;
|
13
13
|
margin-bottom: 0;
|
14
|
-
color: $
|
14
|
+
color: $body-color;
|
15
|
+
position: relative;
|
15
16
|
|
16
17
|
@media (prefers-color-scheme: dark) {
|
17
|
-
color: $
|
18
|
+
color: $body-color-dark;
|
18
19
|
}
|
19
20
|
|
20
21
|
a {
|