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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1ee9d8410bc7f8540b6f5b0a987469a0cfde038d24d6bec2cb16ae768134332c
4
- data.tar.gz: 0ee8278d05833f1ff7adc814b8188941ff1ed5046347a25eb7ef99c7f1322dc8
3
+ metadata.gz: 41fab3f00ca2f24edddc4d3896d5e0e92f6e217d1f238132200a3c623d47e895
4
+ data.tar.gz: 541c21c3ed7eac8cf28ce68900fade417a0f4ab33647df64f93081416169a302
5
5
  SHA512:
6
- metadata.gz: e086663d8981b9100b5f597aa2bb07bb52286d08db84a6266ec4d05778dfb9bdce076ae6296a86e497afa39867e5f1d70bb8ae3f615886eedbfb40e27c28e8eb
7
- data.tar.gz: e5e6d1eaeb5dad719bd4ce4ae0a51e9581d7a71d71ad72ea550d2c3d4381374cc90049461708dfd3866ec5474752f805347d4b10e470370388037ac3ad4bb849
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 [zip archive](https://github.com/essentialenemy/noir/archive/master.zip) of this repository and copy the files into a new directory where you want your site’s configuration files to live.
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
@@ -3,6 +3,6 @@ layout: default
3
3
  ---
4
4
 
5
5
  <article class="page">
6
- <h1 class="page-title">{{ page.title }}</h1>
6
+ <h1 class="page-title">{{ page.title | smartify }}</h1>
7
7
  {{ content | smartify }}
8
8
  </article>
data/_layouts/post.html CHANGED
@@ -3,14 +3,29 @@ layout: default
3
3
  ---
4
4
 
5
5
  <article class="post">
6
- <h1 class="post-title">{{ page.title | smartify }}</h1>
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">&rarr;</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 posts</h3>
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 resets
2
- //
3
- // Update the foundational and global aspects of the page.
4
-
5
- * {
6
- -webkit-box-sizing: border-box;
7
- -moz-box-sizing: border-box;
8
- box-sizing: border-box;
9
- }
10
-
11
- html,
12
- body {
13
- margin: 0;
14
- padding: 0;
15
- }
16
-
17
- html {
18
- font-family: $root-font-family;
19
- font-size: $root-font-size;
20
- line-height: $root-line-height;
21
-
22
- @media (min-width: $large-breakpoint) {
23
- font-size: $large-font-size;
24
- }
25
- }
26
-
27
- body {
28
- color: $body-color;
29
- background-color: $body-bg;
30
- -webkit-text-size-adjust: 100%;
31
- -ms-text-size-adjust: 100%;
32
-
33
- @media (prefers-color-scheme: dark) {
34
- color: $body-color-dark;
35
- background-color: $body-bg-dark;
36
- }
37
- }
38
-
39
- // No `:visited` state is required by default (browsers will use `a`)
40
- a {
41
- color: $link-color;
42
- text-decoration: none;
43
-
44
- // `:focus` is linked to `:hover` for basic accessibility
45
- &:hover,
46
- &:focus {
47
- text-decoration: underline;
48
- }
49
-
50
- strong {
51
- color: inherit;
52
- }
53
- }
54
-
55
- img {
56
- display: block;
57
- max-width: 100%;
58
- margin: 0 0 1rem;
59
- border-radius: 5px;
60
- }
61
-
62
- table {
63
- margin-bottom: 1rem;
64
- width: 100%;
65
- font-size: 85%;
66
- border: 1px solid $border-color;
67
- border-collapse: collapse;
68
- }
69
-
70
- td,
71
- th {
72
- padding: .25rem .5rem;
73
- border: 1px solid $border-color;
74
-
75
- @media (prefers-color-scheme: dark) {
76
- border: 1px solid $gray-9;
77
- }
78
- }
79
-
80
- th {
81
- text-align: left;
82
- }
83
-
84
- tbody tr:nth-child(odd) td,
85
- tbody tr:nth-child(odd) th {
86
- background-color: $gray-1;
87
-
88
- @media (prefers-color-scheme: dark) {
89
- background-color: #2d2d2d;
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
- pre {
8
- font-family: $code-font-family;
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
- font-size: 70%;
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
- display: block;
17
- margin-top: 0;
18
- margin-bottom: 1rem;
19
- overflow: auto;
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
- .highlight {
36
- padding: 1rem;
37
- margin-bottom: 1rem;
38
- background-color: $gray-1;
39
- border-radius: .25rem;
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
- pre {
42
- margin-bottom: 0;
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
- // Triple backticks (code fencing) doubles the .highlight elements
47
- .highlight {
48
- padding: 0;
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
- .rouge-table {
53
- margin-bottom: 0;
54
- font-size: 100%;
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
- // Gist via GitHub Pages
73
- .gist .markdown-body {
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
- // Layout
2
- //
3
- // Styles for managing the structural hierarchy of the site.
4
-
5
- .container {
6
- max-width: 38rem;
7
- padding-left: 1.5rem;
8
- padding-right: 1.5rem;
9
- margin-left: auto;
10
- margin-right: auto;
11
- }
12
-
13
- footer {
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
- // Super small header above the content for site name and short description.
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: $gray-4;
14
+ color: $body-color;
15
+ position: relative;
15
16
 
16
17
  @media (prefers-color-scheme: dark) {
17
- color: $gray-6;
18
+ color: $body-color-dark;
18
19
  }
19
20
 
20
21
  a {