noir-for-jekyll 1.1.0 → 1.2.0

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