minimal-jekyll-theme 0.1.3 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +48 -0
  3. data/README.md +28 -16
  4. data/_includes/analytics.html +37 -0
  5. data/_includes/author_bio.html +11 -11
  6. data/_includes/category_tag_list.html +2 -2
  7. data/_includes/figure +1 -1
  8. data/_includes/footer.html +11 -10
  9. data/_includes/head.html +0 -18
  10. data/_includes/header.html +12 -12
  11. data/_includes/navigation.html +11 -15
  12. data/_includes/post_meta.html +12 -12
  13. data/_includes/sidebar.html +9 -7
  14. data/_includes/video +1 -1
  15. data/_layouts/archive.html +34 -0
  16. data/_layouts/default.html +2 -2
  17. data/_layouts/home.html +19 -29
  18. data/_layouts/page.html +6 -6
  19. data/_layouts/post.html +6 -6
  20. data/_sass/_tachyons.scss +3 -3
  21. data/_sass/_theme.scss +527 -0
  22. data/_sass/_variables.scss +48 -16
  23. data/_sass/scss/_aspect-ratios.scss +0 -0
  24. data/_sass/scss/_background-position.scss +0 -0
  25. data/_sass/scss/_background-size.scss +0 -0
  26. data/_sass/scss/_border-colors.scss +0 -0
  27. data/_sass/scss/_border-radius.scss +0 -0
  28. data/_sass/scss/_border-style.scss +0 -0
  29. data/_sass/scss/_border-widths.scss +0 -0
  30. data/_sass/scss/_borders.scss +0 -0
  31. data/_sass/scss/_box-shadow.scss +0 -0
  32. data/_sass/scss/_box-sizing.scss +0 -0
  33. data/_sass/scss/_clears.scss +0 -0
  34. data/_sass/scss/_code.scss +0 -0
  35. data/_sass/scss/_colors.scss +0 -0
  36. data/_sass/scss/_coordinates.scss +0 -0
  37. data/_sass/scss/_debug-children.scss +0 -0
  38. data/_sass/scss/_debug-grid.scss +4 -4
  39. data/_sass/scss/_debug.scss +0 -0
  40. data/_sass/scss/_debug_children.scss +0 -0
  41. data/_sass/scss/_display.scss +0 -0
  42. data/_sass/scss/_flexbox.scss +8 -4
  43. data/_sass/scss/_floats.scss +0 -0
  44. data/_sass/scss/_font-family.scss +0 -0
  45. data/_sass/scss/_font-style.scss +0 -0
  46. data/_sass/scss/_font-weight.scss +0 -0
  47. data/_sass/scss/_forms.scss +0 -0
  48. data/_sass/scss/_gradients.scss +0 -0
  49. data/_sass/scss/_heights.scss +0 -0
  50. data/_sass/scss/_hovers.scss +1 -0
  51. data/_sass/scss/_images.scss +0 -0
  52. data/_sass/scss/_letter-spacing.scss +0 -0
  53. data/_sass/scss/_line-height.scss +0 -0
  54. data/_sass/scss/_links.scss +0 -0
  55. data/_sass/scss/_lists.scss +0 -0
  56. data/_sass/scss/_max-widths.scss +0 -0
  57. data/_sass/scss/_media-queries.scss +0 -0
  58. data/_sass/scss/_module-template.scss +0 -0
  59. data/_sass/scss/_negative-margins.scss +0 -0
  60. data/_sass/scss/_nested.scss +0 -0
  61. data/_sass/scss/_normalize.scss +23 -3
  62. data/_sass/scss/_opacity.scss +0 -0
  63. data/_sass/scss/_outlines.scss +0 -0
  64. data/_sass/scss/_overflow.scss +0 -0
  65. data/_sass/scss/_position.scss +0 -0
  66. data/_sass/scss/_rotations.scss +0 -0
  67. data/_sass/scss/_skins-pseudo.scss +2 -2
  68. data/_sass/scss/_skins.scss +0 -0
  69. data/_sass/scss/_spacing.scss +0 -0
  70. data/_sass/scss/_styles.scss +0 -0
  71. data/_sass/scss/_tables.scss +0 -0
  72. data/_sass/scss/_text-align.scss +5 -0
  73. data/_sass/scss/_text-decoration.scss +0 -0
  74. data/_sass/scss/_text-transform.scss +0 -0
  75. data/_sass/scss/_type-scale.scss +0 -0
  76. data/_sass/scss/_typography.scss +0 -0
  77. data/_sass/scss/_utilities.scss +9 -0
  78. data/_sass/scss/_vertical-align.scss +0 -0
  79. data/_sass/scss/_visibility.scss +0 -0
  80. data/_sass/scss/_white-space.scss +0 -0
  81. data/_sass/scss/_widths.scss +0 -0
  82. data/_sass/scss/_word-break.scss +0 -0
  83. data/_sass/scss/_z-index.scss +0 -0
  84. data/assets/css/minimal.scss +1 -2
  85. metadata +28 -13
  86. data/_sass/_custom.scss +0 -137
  87. data/_sass/_tachyons-background-overlays.scss +0 -44
data/_includes/video CHANGED
@@ -1,3 +1,3 @@
1
- <div class="aspect-ratio aspect-ratio--16x9 w-100 mb4">
1
+ <div class="{{ include.class }} aspect-ratio aspect-ratio--16x9 w-100 mb4">
2
2
  <iframe class="aspect-ratio--object" src="{{ include.src }}" frameborder="0" allowfullscreen></iframe>
3
3
  </div>
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang }}">
3
+ {% include head.html %}
4
+ <body class="black-90 {% if page.class or layout.class %}{{ page.class | default: layout.class | join: ' ' | prepend: ' ' }}{% endif %}">
5
+
6
+ <div class="flex flex-column items-center">
7
+ <div class="mw7 w-100 ph3 ph4-ns">
8
+ <h1 class="f5 fw4 lh-title mb0 pb2 bb b--light-gray">{% if page.type == 'year' %}Posts from {{ page.date | date: "%Y" }}{% elsif page.type == 'month' %}Posts from {{ page.date | date: "%B %Y" }}{% elsif page.type == 'day' %}Posts from {{ page.date | date: site.date_format }}{% else %}Posts with {{ page.type }} '{{ page.title }}'{% endif %}</h1>
9
+
10
+ {% for post in page.posts %}
11
+ <a class="link black hover-silver" href="{{ post.url | relative_url }}">
12
+ <article class="f5 lh-copy fw3 pb4 bb b--light-gray">
13
+ <div class="f6 fw6 lh-title ttu tracked mv4">{{ post.date | date: "%b %Y" }}</div>
14
+ <h3 class="f3 fw6 lh-title mb0">{{ post.title | escape }}</h3>
15
+ <p class="f5 fw3 lh-copy mv2">{{ post.excerpt | remove: '<p>' | remove: '</p>' }}</p>
16
+
17
+ <div class="f6 fw3 silver mt0">
18
+ {% if post.last_modified_at %}
19
+ <span>{{ site.data.theme.text.updated }} <time>{{ post.last_modified_at | date: site.date_format }}</time></span>
20
+ {% else %}
21
+ <time>{{ post.date | date: site.date_format }}</time>
22
+ {% endif %}
23
+ <span class="ttl">&middot; {% include read_time.html %}</span>
24
+ </div>
25
+ </article>
26
+ </a>
27
+ {% endfor %}
28
+
29
+ </div>
30
+ </div>
31
+
32
+ {% include footer.html %}
33
+ </body>
34
+ </html>
@@ -1,7 +1,7 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html lang="{{ page.lang | default: site.lang }}">
3
3
  {% include head.html %}
4
- <body class="black-80 {% if page.class or layout.class %}{{ page.class | default: layout.class | join: ' ' | prepend: ' ' }}{% endif %}">
4
+ <body class="black-90 {% if page.class or layout.class %}{{ page.class | default: layout.class | join: ' ' | prepend: ' ' }}{% endif %}">
5
5
 
6
6
  {% if page.header != false %}
7
7
  {% include header.html %}
data/_layouts/home.html CHANGED
@@ -2,39 +2,29 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <article class="flex justify-center mt3">
6
-
7
- <div class="mw7 w-100 pa3 pa4-m">
8
- <h3 class="f5 f4-ns fw3 mb0 pb2 bb b--light-gray">{{ site.data.theme.text.latest_articles | capitalize | default: "Latest writings" }}</h3>
5
+ <section class="flex justify-center mt3">
6
+ <div class="mw7 w-100 pa3 pa4-ns">
7
+ <h3 class="f5 f4-ns fw3 mb0 pb2 bb b--light-gray">{{ site.data.theme.text.latest_articles | default: "Recent Posts" }}</h3>
9
8
 
10
9
  {% for post in site.posts limit: site.data.theme.text.post_limit %}
11
- <div class="post pv4 bb b--light-gray">
12
- <div class="f5 fw3 light-silver lh-copy">
13
- {% if post.last_modified_at %}
14
- <span>{{ site.data.theme.text.updated }} {{ post.last_modified_at | date: site.date_format }}</span>
15
- {% else %}
16
- <span>{{ post.date | date: site.date_format }}</span>
17
- {% endif %}
18
- <span class="ttl">&middot;
19
- {% include read_time.html %}
20
- </span>
21
- </div>
22
-
23
- <a class="link black" href="{{ post.url | relative_url }}">
24
- <h3 class="f3 f2-ns fw6 lh-title mt0 mb0">{{ post.title | escape }}</h3>
25
- <div class="f5 f4-ns fw3 lh-copy">
26
- {% if post.summary %}
27
- {{ post.summary }}
10
+ <a class="link black hover-silver" href="{{ post.url | relative_url }}">
11
+ <article class="post pv4 bb b--light-gray">
12
+ <div class="f5 fw3 silver lh-copy">
13
+ {% if post.last_modified_at %}
14
+ <span>{{ site.data.theme.text.updated }} <time>{{ post.last_modified_at | date: site.date_format }}</time></span>
28
15
  {% else %}
29
- {{ post.excerpt }}
16
+ <time>{{ post.date | date: site.date_format }}</time>
30
17
  {% endif %}
18
+ <span class="ttl">&middot; {% include read_time.html %}</span>
31
19
  </div>
32
- </a>
33
- <a class="f6 fw3 link light-silver lh-copy mb0" href="{{ post.url | relative_url }}">{{ site.data.theme.text.read_more | capitalize }}</a>
34
- </div>
20
+ <h3 class="f3 f2-ns fw6 lh-title mt0 mb0">{{ post.title | escape }}</h3>
21
+ <p class="f5 f4-ns fw3 lh-copy mv2">{{ post.excerpt | remove: '<p>' | remove: '</p>' }}</p>
22
+ <div class="f6 fw3 silver lh-copy mb0">{{ site.data.theme.text.read_more | capitalize }}</div>
23
+ </article>
24
+ </a>
35
25
  {% endfor %}
36
-
37
- <p class="f5 f4-ns fw3 mb0 mt4"><a class="link black" href="{{ site.data.theme.text.full_archive_url | relative_url }}">{{ site.data.theme.text.full_archive | capitalize }}</a></p>
26
+ <div class="inline-flex">
27
+ <a class="f5 f4-ns fw3 link black hover-silver ba br2 bw1 mv4 pv2 ph3" href="{{ site.data.theme.text.full_archive_url | relative_url }}">{{ site.data.theme.text.full_archive | default: "All Posts" }}</a>
28
+ </div>
38
29
  </div>
39
-
40
- </article>
30
+ </section>
data/_layouts/page.html CHANGED
@@ -3,23 +3,23 @@ layout: default
3
3
  ---
4
4
 
5
5
  <main class="mw8 center flex flex-column flex-row-l justify-center">
6
- <article class="mw7 {% if page.sidebar %}center-l{% else %}center{% endif %} w-100 w-75-l">
6
+ <article class="mw7 {% if page.sidebar %}center-l{% else %}center{% endif %} w-100 w-75-l ph3 ph4-ns">
7
+
7
8
  {% unless page.header.layout == 'hero' %}
8
- <header class="ph3 ph4-m">
9
+ <header class="mt5">
9
10
  <h1 class="f2 fw6 lh-title mb1">{{ page.title }}</h1>
10
11
  {% if page.subtitle %}
11
- <h2 class="f3 fw3 lh-title light-silver mv2">{{ page.subtitle }}</h2>
12
+ <h2 class="f3 fw3 lh-title silver mv2">{{ page.subtitle }}</h2>
12
13
  {% endif %}
13
14
  </header>
14
15
  {% endunless %}
15
16
 
16
- <div class="ph3 ph4-m f5 f4-ns fw3 lh-copy mb0">
17
+ <div class="f5 f4-ns fw3 lh-copy mb0">
17
18
  {{ content }}
18
19
  </div>
19
20
  </article>
20
21
 
21
22
  {% if page.sidebar %}
22
- {% include sidebar.html %}
23
+ {% include sidebar.html %}
23
24
  {% endif %}
24
-
25
25
  </main>
data/_layouts/post.html CHANGED
@@ -2,10 +2,10 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <main>
6
- <article class="flex flex-column items-center">
5
+ <main class="flex flex-column items-center">
6
+ <article class="mw7 w-100 ph3 ph4-ns">
7
7
 
8
- <header class="mw7 w-100 ph3 ph4-m">
8
+ <header class="{% if page.post_meta == false %}mt5{% endif %}">
9
9
  {% if site.data.theme.post_meta %}
10
10
  {% include post_meta.html %}
11
11
  {% endif %}
@@ -13,17 +13,17 @@ layout: default
13
13
  {% unless page.header.layout == 'hero' %}
14
14
  <h1 class="f2 fw6 lh-title mb1">{{ page.title }}</h1>
15
15
  {% if page.subtitle %}
16
- <h2 class="f3 fw4 lh-title light-silver mv2">{{ page.subtitle }}</h2>
16
+ <h2 class="f3 fw4 lh-title silver mv2">{{ page.subtitle }}</h2>
17
17
  {% endif %}
18
18
  {% endunless %}
19
19
  </header>
20
20
 
21
21
 
22
- <div class="mw7 w-100 ph3 ph4-m f5 f4-ns fw3 lh-copy mb0">
22
+ <div class="mw7 w-100 f5 f4-ns fw3 lh-copy mb0">
23
23
  {{ content }}
24
24
  </div>
25
25
 
26
- <div class="mw7 w-100 ph3 ph4-m lh-copy">
26
+ <div class="mw7 w-100 lh-copy">
27
27
  {% if site.data.theme.category_tag_list %}
28
28
  {% include category_tag_list.html %}
29
29
  {% endif %}
data/_sass/_tachyons.scss CHANGED
@@ -1,4 +1,4 @@
1
- // ! TACHYONS v4.6.1 | http://tachyons.io
1
+ // ! TACHYONS v4.8.1 | http://tachyons.io
2
2
 
3
3
  //
4
4
  //
@@ -59,7 +59,7 @@
59
59
  @import 'scss/display';
60
60
  @import 'scss/flexbox';
61
61
  @import 'scss/floats';
62
- @import 'scss/font-family';
62
+ //@import 'scss/font-family';
63
63
  @import 'scss/font-style';
64
64
  @import 'scss/font-weight';
65
65
  @import 'scss/forms';
@@ -90,5 +90,5 @@
90
90
  @import 'scss/vertical-align';
91
91
  @import 'scss/hovers';
92
92
  @import 'scss/z-index';
93
- @import 'scss/nested';
93
+ //@import 'scss/nested';
94
94
  @import 'scss/styles';
data/_sass/_theme.scss ADDED
@@ -0,0 +1,527 @@
1
+ /*
2
+
3
+ CUSTOM CSS
4
+
5
+ */
6
+
7
+ // Set default font
8
+ html {
9
+ font-family: $font-family;
10
+ }
11
+
12
+ // Links
13
+ a {
14
+ color: $link;
15
+ &:hover {
16
+ color: $hover;
17
+ }
18
+ }
19
+
20
+ a.nested-author-cta {
21
+ color: $author-cta-link;
22
+
23
+ &:hover {
24
+ color: $author-cta-hover;
25
+ }
26
+ }
27
+
28
+ // Buttons
29
+ .btn {
30
+ display: inline-block;
31
+ cursor: pointer;
32
+ font-family: $font-family;
33
+ font-weight: 400;
34
+ color: $white;
35
+ text-align: center;
36
+ text-decoration: none;
37
+ padding: .375rem .875rem;
38
+ margin-top: .5rem;
39
+ border-radius: .25rem;
40
+
41
+ &:hover {
42
+ color: $white;
43
+ }
44
+
45
+ &--block {
46
+ display: block;
47
+ width: 100%;
48
+ }
49
+
50
+ &--primary {
51
+ background-color: $btn-primary;
52
+ border: .125rem solid $btn-primary;
53
+ }
54
+
55
+ &--secondary {
56
+ background-color: $btn-secondary;
57
+ border: .125rem solid $btn-secondary;
58
+ }
59
+
60
+ &--success {
61
+ background-color: $btn-success;
62
+ border: .125rem solid $btn-success;
63
+ }
64
+
65
+ &--warning {
66
+ background-color: $btn-warning;
67
+ border: .125rem solid $btn-warning;
68
+ }
69
+
70
+ &--danger {
71
+ background-color: $btn-danger;
72
+ border: .125rem solid $btn-danger;
73
+ }
74
+
75
+ &--info {
76
+ background-color: $btn-info;
77
+ border: .125rem solid $btn-info;
78
+ }
79
+
80
+ &--light {
81
+ color: $black-90;
82
+ background-color: $btn-light;
83
+ border: .125rem solid $btn-light;
84
+
85
+ &:hover {
86
+ color: $black-90;
87
+ }
88
+ }
89
+
90
+ &--dark {
91
+ background-color: $btn-dark;
92
+ border: .125rem solid $btn-dark;
93
+ }
94
+
95
+ // Buttons sizes
96
+ &--small {
97
+ padding: .25rem 1rem;
98
+ font-size: .875rem;
99
+ }
100
+
101
+ &--large {
102
+ padding: .5rem 2rem;
103
+ font-size: 2.25rem;
104
+ }
105
+
106
+ &--x-large {
107
+ padding: 1rem 2rem;
108
+ font-size: 3rem;
109
+ }
110
+ }
111
+
112
+ // Outline buttons
113
+ .btn-outline {
114
+
115
+ &--primary {
116
+ color: $btn-primary;
117
+ border: .125rem solid $btn-primary;
118
+
119
+ &:hover {
120
+ color: $white;
121
+ background-color: $btn-primary;
122
+ }
123
+ }
124
+
125
+ &--secondary {
126
+ color: $btn-secondary;
127
+ border: .125rem solid $btn-secondary;
128
+
129
+ &:hover {
130
+ color: $white;
131
+ background-color: $btn-secondary;
132
+ }
133
+ }
134
+
135
+ &--success {
136
+ color: $btn-success;
137
+ border: .125rem solid $btn-success;
138
+
139
+ &:hover {
140
+ color: $white;
141
+ background-color: $btn-success;
142
+ }
143
+ }
144
+
145
+ &--warning {
146
+ color: $btn-warning;
147
+ border: .125rem solid $btn-warning;
148
+
149
+ &:hover {
150
+ color: $white;
151
+ background-color: $btn-warning;
152
+ }
153
+ }
154
+
155
+ &--danger {
156
+ color: $btn-danger;
157
+ border: .125rem solid $btn-danger;
158
+
159
+ &:hover {
160
+ color: $white;
161
+ background-color: $btn-danger;
162
+ }
163
+ }
164
+
165
+ &--info {
166
+ color: $btn-info;
167
+ border: .125rem solid $btn-info;
168
+
169
+ &:hover {
170
+ color: $white;
171
+ background-color: $btn-info;
172
+ }
173
+ }
174
+
175
+ &--light {
176
+ color: $btn-light;
177
+ border: .125rem solid $btn-light;
178
+
179
+ &:hover {
180
+ color: $white;
181
+ background-color: $btn-light;
182
+ }
183
+ }
184
+
185
+ &--dark {
186
+ color: $btn-dark;
187
+ border: .125rem solid $btn-dark;
188
+
189
+ &:hover {
190
+ color: $white;
191
+ background-color: $btn-dark;
192
+ }
193
+ }
194
+ }
195
+
196
+ // Alerts
197
+ .alert {
198
+ display: block;
199
+ width: 100%;
200
+ font-family: $font-family;
201
+ font-size: 1rem;
202
+ padding: .5rem 1rem;
203
+ margin-top: .5rem;
204
+
205
+ &--primary {
206
+ color: $black-90;
207
+ background-color: $alert-primary;
208
+ }
209
+
210
+ &--secondary {
211
+ color: $black-90;
212
+ background-color: $alert-secondary;
213
+ }
214
+
215
+ &--success {
216
+ color: $black-90;
217
+ background-color: $alert-success;
218
+ }
219
+
220
+ &--warning {
221
+ color: $black-90;
222
+ background-color: $alert-warning;
223
+ }
224
+
225
+ &--danger {
226
+ color: $black-90;
227
+ background-color: $alert-danger;
228
+ }
229
+
230
+ &--info {
231
+ color: $black-90;
232
+ background-color: $alert-info;
233
+ }
234
+
235
+ &--light {
236
+ color: $black-90;
237
+ background-color: $alert-light;
238
+ }
239
+
240
+ &--dark {
241
+ color: $white;
242
+ background-color: $alert-dark;
243
+ }
244
+ }
245
+
246
+ // Removes nav margin on last menu link
247
+ nav a:last-child {
248
+ margin-right: 0;
249
+ }
250
+
251
+ // Full screen width
252
+ .full {
253
+ width: 100vw;
254
+ position: relative;
255
+ left: 50%;
256
+ right: 50%;
257
+ margin-left: -50vw;
258
+ margin-right: -50vw;
259
+ }
260
+
261
+ // Header captions
262
+ body span a {
263
+ font-weight: 300;
264
+ color: $figcaption-color;
265
+ &:hover {
266
+ color: $figcaption-color;
267
+ }
268
+ }
269
+
270
+ // Horizontal rules
271
+ hr {
272
+ max-width: 100%;
273
+ height: 1px;
274
+ padding: 0;
275
+ border: 0;
276
+ border-top: 1px solid $hr-color;
277
+ }
278
+
279
+ // Definition list
280
+ dt {
281
+ font-weight: bold;
282
+ margin-top: 1rem;
283
+ }
284
+
285
+ dd {
286
+ margin-left: 1rem;
287
+ }
288
+
289
+ // Abbreviation
290
+ abbr[title] {
291
+ cursor: help;
292
+ text-decoration: none;
293
+ border-bottom: 1px dotted $abbr-color;
294
+ }
295
+
296
+ // Bold text
297
+ b, strong {
298
+ font-weight: 600;
299
+ }
300
+
301
+ // Mark tag
302
+ mark {
303
+ background-color: $mark-color;
304
+ }
305
+
306
+ // Image captions
307
+ figcaption {
308
+ font-size: .875rem;
309
+ font-weight: 300;
310
+ color: $figcaption-color;
311
+ }
312
+
313
+ // Tables
314
+ table {
315
+ border-collapse: collapse;
316
+ border-spacing: 0;
317
+ }
318
+
319
+ table thead {
320
+ background-color: $table-header-color;
321
+ }
322
+
323
+ table, th, td {
324
+ padding: .5rem;
325
+ border: 1px solid $table-border-color;
326
+ }
327
+
328
+ // Blockquotes
329
+ blockquote {
330
+ font-size: 1.25rem;
331
+ font-style: italic;
332
+ line-height: 1.5;
333
+ padding-left: 1rem;
334
+ margin: 4rem 0 4rem 0;
335
+ color: $blockquote-color;
336
+ border-left: .25rem solid $blockquote-border-color;
337
+
338
+ @media (min-width: 30em) {
339
+ font-size: 1.5rem;
340
+ padding-left: 1.5rem;
341
+ }
342
+
343
+ }
344
+
345
+ blockquote cite {
346
+ font-size: .875rem;
347
+ font-style: normal;
348
+ letter-spacing: .1em;
349
+ text-transform: uppercase;
350
+
351
+ }
352
+
353
+ // Override Tachyons
354
+ figure {
355
+ margin: .25rem 0; // Removes Tachyons default 40px left/right margins on codeblocks
356
+ }
357
+
358
+ body {
359
+ margin: 0; // Removes Tachyons default body margin for header
360
+
361
+ }
362
+
363
+ .link:focus { // Removes Tachyons default link outline
364
+ outline: 0;
365
+ }
366
+
367
+ // Codeblocks
368
+ code, pre {
369
+ font-family: $code-font-family;
370
+ font-size: $code-font-size;
371
+ font-weight: $code-font-weight;
372
+ }
373
+
374
+ pre {
375
+ @extend .pre;
376
+ margin: 0;
377
+ padding: 1rem;
378
+ }
379
+
380
+ p > code {
381
+ border-right: .25rem;
382
+ padding: .25rem;
383
+ background-color: $code-background-color;
384
+ }
385
+
386
+ .highlight {
387
+ background-color: $code-background-color;
388
+
389
+ table {
390
+ margin: 0;
391
+ border: 0;
392
+
393
+ tr {
394
+ border: 0;
395
+ }
396
+
397
+ td {
398
+ border: 0;
399
+ padding: 0;
400
+ }
401
+
402
+ }
403
+
404
+ // Codeblock line numbers styling
405
+ @mixin unselectable() {
406
+ -webkit-touch-callout: none;
407
+ -webkit-user-select: none;
408
+ -khtml-user-select: none;
409
+ -moz-user-select: none;
410
+ -ms-user-select: none;
411
+ user-select: none;
412
+ }
413
+
414
+ .lineno, .gp {
415
+ @include unselectable();
416
+ color: $linenos-color;
417
+ }
418
+
419
+ .lineno {
420
+ padding: 0;
421
+ }
422
+
423
+ .gp {
424
+ padding-right: .25rem;
425
+ }
426
+
427
+ // Syntax highlighting
428
+ .c { color: $silver; font-style: italic } // Comment
429
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
430
+ .k { font-weight: bold } // Keyword
431
+ .o { font-weight: bold } // Operator
432
+ .cm { color: $silver; font-style: italic } // Comment.Multiline
433
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
434
+ .c1 { color: $silver; font-style: italic } // Comment.Single
435
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
436
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
437
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
438
+ .ge { font-style: italic } // Generic.Emph
439
+ .gr { color: #a00 } // Generic.Error
440
+ .gh { color: #999 } // Generic.Heading
441
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
442
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
443
+ .go { color: #888 } // Generic.Output
444
+ .gp { color: $linenos-color } // Generic.Prompt
445
+ .gs { font-weight: bold } // Generic.Strong
446
+ .gu { color: #aaa } // Generic.Subheading
447
+ .gt { color: #a00 } // Generic.Traceback
448
+ .kc { font-weight: bold } // Keyword.Constant
449
+ .kd { font-weight: bold } // Keyword.Declaration
450
+ .kp { font-weight: bold } // Keyword.Pseudo
451
+ .kr { font-weight: bold } // Keyword.Reserved
452
+ .kt { color: #458; font-weight: bold } // Keyword.Type
453
+ .m { color: #099 } // Literal.Number
454
+ .s { color: #d14 } // Literal.String
455
+ .na { color: #008080 } // Name.Attribute
456
+ .nb { color: #0086B3 } // Name.Builtin
457
+ .nc { color: #458; font-weight: bold } // Name.Class
458
+ .no { color: #008080 } // Name.Constant
459
+ .ni { color: #800080 } // Name.Entity
460
+ .ne { color: #900; font-weight: bold } // Name.Exception
461
+ .nf { color: #900; font-weight: bold } // Name.Function
462
+ .nn { color: #555 } // Name.Namespace
463
+ .nt { color: #000080 } // Name.Tag
464
+ .nv { color: #008080 } // Name.Variable
465
+ .ow { font-weight: bold } // Operator.Word
466
+ .w { color: #bbb } // Text.Whitespace
467
+ .mf { color: #099 } // Literal.Number.Float
468
+ .mh { color: #099 } // Literal.Number.Hex
469
+ .mi { color: #099 } // Literal.Number.Integer
470
+ .mo { color: #099 } // Literal.Number.Oct
471
+ .sb { color: #d14 } // Literal.String.Backtick
472
+ .sc { color: #d14 } // Literal.String.Char
473
+ .sd { color: #d14 } // Literal.String.Doc
474
+ .s2 { color: #d14 } // Literal.String.Double
475
+ .se { color: #d14 } // Literal.String.Escape
476
+ .sh { color: #d14 } // Literal.String.Heredoc
477
+ .si { color: #d14 } // Literal.String.Interpol
478
+ .sx { color: #d14 } // Literal.String.Other
479
+ .sr { color: #009926 } // Literal.String.Regex
480
+ .s1 { color: #d14 } // Literal.String.Single
481
+ .ss { color: #990073 } // Literal.String.Symbol
482
+ .bp { color: #999 } // Name.Builtin.Pseudo
483
+ .vc { color: #008080 } // Name.Variable.Class
484
+ .vg { color: #008080 } // Name.Variable.Global
485
+ .vi { color: #008080 } // Name.Variable.Instance
486
+ .il { color: #099 } // Literal.Number.Integer.Long
487
+ }
488
+
489
+ // Tachyons Background Overlays v1.1.0 https://github.com/lowmess/tachyons-background-overlays
490
+ .bg-darken-0 { box-shadow: none; }
491
+ .bg-darken-25 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
492
+ .bg-darken-50 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
493
+ .bg-darken-75 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
494
+ .bg-lighten-0 { box-shadow: none; }
495
+ .bg-lighten-25 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
496
+ .bg-lighten-50 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
497
+ .bg-lighten-75 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
498
+ @media screen and (min-width: 30em) {
499
+ .bg-darken-0-ns { box-shadow: none; }
500
+ .bg-darken-25-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
501
+ .bg-darken-50-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
502
+ .bg-darken-75-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
503
+ .bg-lighten-0-ns { box-shadow: none; }
504
+ .bg-lighten-25-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
505
+ .bg-lighten-50-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
506
+ .bg-lighten-75-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
507
+ }
508
+ @media screen and (min-width: 30em) and (max-width: 60em) {
509
+ .bg-darken-0-m { box-shadow: none; }
510
+ .bg-darken-25-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
511
+ .bg-darken-50-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
512
+ .bg-darken-75-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
513
+ .bg-lighten-0-m { box-shadow: none; }
514
+ .bg-lighten-25-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
515
+ .bg-lighten-50-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
516
+ .bg-lighten-75-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
517
+ }
518
+ @media screen and (min-width: 60em) {
519
+ .bg-darken-0-l { box-shadow: none; }
520
+ .bg-darken-25-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
521
+ .bg-darken-50-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
522
+ .bg-darken-75-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
523
+ .bg-lighten-0-l { box-shadow: none; }
524
+ .bg-lighten-25-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
525
+ .bg-lighten-50-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
526
+ .bg-lighten-75-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
527
+ }