jekyll-theme-yat 1.0.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.
Files changed (54) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +52 -0
  4. data/_data/defaults.yml +4 -0
  5. data/_data/translate_langs.yml +30 -0
  6. data/_includes/extensions/comments/disqus.html +18 -0
  7. data/_includes/extensions/comments/gitment.html +15 -0
  8. data/_includes/extensions/geopattern.html +21 -0
  9. data/_includes/extensions/google-analytics.html +12 -0
  10. data/_includes/extensions/google-translate.html +98 -0
  11. data/_includes/extensions/hashlocate.html +39 -0
  12. data/_includes/extensions/mathjax.html +10 -0
  13. data/_includes/extensions/trianglify.html +23 -0
  14. data/_includes/functions/get_categories.html +12 -0
  15. data/_includes/functions/get_datetimes.html +18 -0
  16. data/_includes/functions/get_tags.html +12 -0
  17. data/_includes/functions/get_value.html +19 -0
  18. data/_includes/functions/log.html +17 -0
  19. data/_includes/functions.html +25 -0
  20. data/_includes/head.html +16 -0
  21. data/_includes/sidebar/archive-list.html +10 -0
  22. data/_includes/sidebar/article-menu.html +59 -0
  23. data/_includes/sidebar/category-list.html +9 -0
  24. data/_includes/sidebar/common-list.html +25 -0
  25. data/_includes/sidebar/google-translate.html +3 -0
  26. data/_includes/sidebar/tag-list.html +9 -0
  27. data/_includes/views/article.html +11 -0
  28. data/_includes/views/banner.html +66 -0
  29. data/_includes/views/footer.html +13 -0
  30. data/_includes/views/header.html +44 -0
  31. data/_includes/views/pagination.html +33 -0
  32. data/_includes/views/paginator.html +21 -0
  33. data/_includes/views/post-header.html +11 -0
  34. data/_includes/views/post-item.html +13 -0
  35. data/_includes/views/segments.html +21 -0
  36. data/_includes/views/site-brand.html +7 -0
  37. data/_layouts/404.html +25 -0
  38. data/_layouts/archives.html +18 -0
  39. data/_layouts/articles.html +14 -0
  40. data/_layouts/categories.html +16 -0
  41. data/_layouts/default.html +23 -0
  42. data/_layouts/framework.html +35 -0
  43. data/_layouts/home.html +8 -0
  44. data/_layouts/post.html +53 -0
  45. data/_layouts/tags.html +16 -0
  46. data/_sass/misc/article-menu.scss +47 -0
  47. data/_sass/misc/common-list.scss +49 -0
  48. data/_sass/misc/google-translate.scss +190 -0
  49. data/_sass/yat/_base.scss +258 -0
  50. data/_sass/yat/_layout.scss +388 -0
  51. data/_sass/yat/_syntax-highlighting.scss +105 -0
  52. data/_sass/yat.scss +69 -0
  53. data/assets/main.scss +25 -0
  54. metadata +179 -0
@@ -0,0 +1,388 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ background: $header-background-color;
6
+ height: $header-height;
7
+ width: 100%;
8
+
9
+ // Positioning context for the mobile navigation icon
10
+ @include flex-sticky(0);
11
+ z-index: 1000;
12
+
13
+ a {
14
+ text-decoration: none;
15
+ }
16
+ }
17
+
18
+ .site-brand {
19
+ @extend %vertical-center;
20
+
21
+ float: left;
22
+ height: 100%;
23
+ max-height: 100%;
24
+ margin-right: 50px;
25
+
26
+ .site-favicon {
27
+ margin-right: 10px;
28
+ height: 65%;
29
+ max-height: 65%;
30
+ border-radius: 65%;
31
+ box-shadow: 0 0 2px #080808d1;
32
+ transition: 0.2s;
33
+
34
+ &:hover {
35
+ box-shadow: 0 0 5px #080808d1;
36
+ }
37
+ }
38
+
39
+ .site-title {
40
+ @include relative-font-size(1.125);
41
+ font-weight: $base-font-weight;
42
+ line-height: $header-height;
43
+ text-shadow: 0 0 3px #080808d1;
44
+ letter-spacing: -1px;
45
+
46
+ &, &:visited {
47
+ color: $header-text-color;
48
+ }
49
+ }
50
+ }
51
+
52
+ .site-nav {
53
+ @include relative-font-size(1.025);
54
+ float: right;
55
+ line-height: $header-height;
56
+
57
+ .nav-trigger {
58
+ display: none;
59
+ }
60
+
61
+ .menu-icon {
62
+ display: none;
63
+ }
64
+
65
+ .page-link {
66
+ color: $header-text-color;
67
+ line-height: $base-line-height;
68
+
69
+ // Gaps between nav items, but not on the last one
70
+ &:not(:last-child) {
71
+ margin-right: 20px;
72
+ }
73
+ }
74
+
75
+ @include media-query($on-palm) {
76
+ position: absolute;
77
+ right: $spacing-unit / 2;
78
+ text-align: left;
79
+
80
+ label[for="nav-trigger"] {
81
+ display: block;
82
+ float: right;
83
+ z-index: 2;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .menu-icon {
88
+ display: block;
89
+ float: right;
90
+ text-align: center;
91
+
92
+ > svg {
93
+ fill: $white-color;
94
+ }
95
+ }
96
+
97
+ input ~ .trigger {
98
+ clear: both;
99
+ display: none;
100
+ }
101
+
102
+ input:checked ~ .trigger {
103
+ display: block;
104
+ background: $header-background-color;
105
+ }
106
+
107
+ .page-link {
108
+ display: block;
109
+ padding: 5px 10px;
110
+ color: rgba($header-text-color, 80%);
111
+ margin: 0 25px;
112
+ }
113
+ }
114
+ }
115
+
116
+ /**
117
+ * Site footer
118
+ */
119
+ .site-footer {
120
+ @include relative-font-size(0.9);
121
+ color: $footer-text-color;
122
+ background: $footer-background-color;
123
+ padding: $spacing-unit * 0.8 0;
124
+ text-align: left;
125
+
126
+ a {
127
+ $a-color: invert(mix(invert($theme-color), #0030ae));
128
+ color: $a-color;
129
+
130
+ &:hover {
131
+ color: lighten($a-color, 10%);
132
+ }
133
+ }
134
+ }
135
+
136
+ /**
137
+ * Post header
138
+ */
139
+ %post-header {
140
+ .post-header {
141
+ margin-bottom: $spacing-unit;
142
+ }
143
+
144
+ .post-title {
145
+ @include relative-font-size(2.625);
146
+ letter-spacing: -1px;
147
+ line-height: 1;
148
+
149
+ @include media-query($on-laptop) {
150
+ @include relative-font-size(2.25);
151
+ }
152
+ }
153
+ }
154
+
155
+ /**
156
+ * Page content
157
+ */
158
+ .page-content {
159
+ @extend %flex-1; /* <-- Keep footer on the bottom */
160
+ padding: $spacing-unit 0;
161
+ }
162
+
163
+ .page-heading {
164
+ @include relative-font-size(2);
165
+ }
166
+
167
+ .post-list-heading {
168
+ @include relative-font-size(1.75);
169
+ }
170
+
171
+ /**
172
+ * Pagination page
173
+ */
174
+ .pagination {
175
+ .post-list {
176
+ margin-left: 0;
177
+ list-style: none;
178
+
179
+ > li {
180
+ margin-bottom: $spacing-unit;
181
+ }
182
+ }
183
+
184
+ .post-meta {
185
+ font-size: $small-font-size;
186
+ color: $grey-color;
187
+ }
188
+
189
+ .post-link {
190
+ @include relative-font-size(1.5);
191
+
192
+ display: block;
193
+ font-weight: 600;
194
+ }
195
+ }
196
+
197
+
198
+ /**
199
+ * Posts
200
+ */
201
+ .post {
202
+ @extend %post-header;
203
+
204
+ .post-content {
205
+ margin-bottom: $spacing-unit;
206
+
207
+ h2 {
208
+ @include relative-font-size(2);
209
+
210
+ @include media-query($on-laptop) {
211
+ @include relative-font-size(1.75);
212
+ }
213
+ }
214
+
215
+ h3 {
216
+ @include relative-font-size(1.625);
217
+
218
+ @include media-query($on-laptop) {
219
+ @include relative-font-size(1.375);
220
+ }
221
+ }
222
+
223
+ h4 {
224
+ @include relative-font-size(1.25);
225
+
226
+ @include media-query($on-laptop) {
227
+ @include relative-font-size(1.125);
228
+ }
229
+ }
230
+ }
231
+ }
232
+
233
+
234
+ /**
235
+ * Posts misc
236
+ */
237
+ .post-nav {
238
+ display: flex;
239
+ justify-content: space-between;
240
+
241
+ a {
242
+ display: flex;
243
+ }
244
+ }
245
+
246
+
247
+ /**
248
+ * Archives page
249
+ */
250
+ .page-archives {
251
+ .page-archives-list {
252
+ margin-left: 0;
253
+ list-style: none;
254
+ }
255
+
256
+ .archives-time {
257
+ @include relative-font-size(1.5);
258
+
259
+ &:not(:first-child) {
260
+ margin-top: 18px;
261
+ }
262
+ margin-bottom: 8px;
263
+ }
264
+
265
+ .post-meta {
266
+ font-size: $small-font-size;
267
+ color: $grey-color;
268
+ }
269
+ }
270
+
271
+
272
+ /**
273
+ * Page banner
274
+ */
275
+ .page-banner {
276
+ display: block;
277
+ position: relative;
278
+ height: $banner-height;
279
+ background-color: $banner-background;
280
+
281
+ .page-banner-img {
282
+ position: absolute;
283
+ height: 100%;
284
+ overflow: hidden;
285
+
286
+ & > *:first-child {
287
+ position: relative;
288
+ top: 50%;
289
+ left: 50%;
290
+ transform: translate(-50%, -50%);
291
+ height: 100%;
292
+ max-width: 1000%;
293
+ background-size: cover;
294
+ background-position: center center;
295
+ overflow: hidden;
296
+ }
297
+ }
298
+
299
+ .wrapper {
300
+ height: 100%;
301
+ }
302
+
303
+ .page-banner-inner {
304
+ @extend %vertical-center;
305
+
306
+ position: relative;
307
+ color: $banner-text-color;
308
+ padding: 10px 5px;
309
+ text-shadow: 1px 1px 2px #333;
310
+
311
+ .page-banner-heading {
312
+ @include relative-font-size(2.825);
313
+ letter-spacing: -1px;
314
+ line-height: 1;
315
+ margin-bottom: 10px;
316
+
317
+ @include media-query($on-palm) {
318
+ @include relative-font-size(2.425);
319
+ }
320
+ }
321
+
322
+ @extend %post-header;
323
+
324
+ .post-title {
325
+ @include relative-font-size(2.925);
326
+ }
327
+ }
328
+ }
329
+
330
+
331
+ /**
332
+ * Layout and sidebar
333
+ */
334
+ .framework {
335
+ @extend %flex-layout;
336
+
337
+ .main {
338
+ @extend %flex-1;
339
+ }
340
+
341
+ .sidebar {
342
+ padding-left: 8px;
343
+
344
+ @include flex-sticky($header-height + 20px);
345
+
346
+ @include media-query($on-palm) {
347
+ display: none;
348
+ }
349
+
350
+ }
351
+ }
352
+
353
+
354
+ /**
355
+ * Segments page
356
+ */
357
+ .page-segments {
358
+ .page-segments-list {
359
+ margin-left: 0;
360
+ list-style: none;
361
+ }
362
+
363
+ .segment-name {
364
+ font-weight: 600;
365
+ margin-bottom: 8px;
366
+ position: relative;
367
+
368
+ @include relative-font-size(1.6);
369
+
370
+ &:not(:first-child) {
371
+ margin-top: 28px;
372
+ }
373
+
374
+
375
+ &:hover:before {
376
+ content: '#';
377
+ left: -1em;
378
+ position: absolute;
379
+ }
380
+ }
381
+
382
+ .post-meta {
383
+ font-size: $small-font-size;
384
+ color: $grey-color;
385
+ }
386
+
387
+ }
388
+
@@ -0,0 +1,105 @@
1
+ /**
2
+ * Syntax highlighting styles
3
+ */
4
+
5
+ .highlight {
6
+ color: #c7c7c7;
7
+ @extend %vertical-rhythm;
8
+
9
+ .c { color: #998; font-style: italic } // Comment
10
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
11
+ .k { font-weight: bold } // Keyword
12
+ .o { font-weight: bold } // Operator
13
+ .cm { color: #998; font-style: italic } // Comment.Multiline
14
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
15
+ .c1 { color: #998; font-style: italic } // Comment.Single
16
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
17
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
18
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
19
+ .ge { font-style: italic } // Generic.Emph
20
+ .gr { color: #a00 } // Generic.Error
21
+ .gh { color: #999 } // Generic.Heading
22
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
23
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
24
+ .go { color: #888 } // Generic.Output
25
+ .gp { color: #555 } // Generic.Prompt
26
+ .gs { font-weight: bold } // Generic.Strong
27
+ .gu { color: #aaa } // Generic.Subheading
28
+ .gt { color: #a00 } // Generic.Traceback
29
+ .kc { font-weight: bold } // Keyword.Constant
30
+ .kd { color: #0fdcdc; font-weight: bold } // Keyword.Declaration
31
+ .kp { font-weight: bold } // Keyword.Pseudo
32
+ .kr { font-weight: bold } // Keyword.Reserved
33
+ .kt { color: #a7a7a7; font-weight: bold } // Keyword.Type
34
+ .m { color: #099 } // Literal.Number
35
+ .s { color: #d0c55c } // Literal.String
36
+ .na { color: #a6e22e } // Name.Attribute
37
+ .nb { color: #6cc117 } // Name.Builtin
38
+ .nc { color: #4682b4; font-weight: bold } // Name.Class
39
+ .no { color: #a6e22e } // Name.Constant
40
+ .ni { color: #800080 } // Name.Entity
41
+ .ne { color: #e04b9b; font-weight: bold } // Name.Exception
42
+ .nf { color: #e04b9b; font-weight: bold } // Name.Function
43
+ .nn { color: #a6e22e } // Name.Namespace
44
+ .nt { color: #4ec2e4 } // Name.Tag
45
+ .nv { color: #a6e22e } // Name.Variable
46
+ .ow { font-weight: bold } // Operator.Word
47
+ .w { color: #bbb } // Text.Whitespace
48
+ .mf { color: #099 } // Literal.Number.Float
49
+ .mh { color: #099 } // Literal.Number.Hex
50
+ .mi { color: #099 } // Literal.Number.Integer
51
+ .mo { color: #099 } // Literal.Number.Oct
52
+ .sb { color: #d0c55c } // Literal.String.Backtick
53
+ .sc { color: #d0c55c } // Literal.String.Char
54
+ .sd { color: #d0c55c } // Literal.String.Doc
55
+ .s2 { color: #d0c55c } // Literal.String.Double
56
+ .se { color: #d0c55c } // Literal.String.Escape
57
+ .sh { color: #d0c55c } // Literal.String.Heredoc
58
+ .si { color: #d0c55c } // Literal.String.Interpol
59
+ .sx { color: #d0c55c } // Literal.String.Other
60
+ .sr { color: #009926 } // Literal.String.Regex
61
+ .s1 { color: #d0c55c } // Literal.String.Single
62
+ .ss { color: #990073 } // Literal.String.Symbol
63
+ .bp { color: #999 } // Name.Builtin.Pseudo
64
+ .vc { color: #a6e22e } // Name.Variable.Class
65
+ .vg { color: #a6e22e } // Name.Variable.Global
66
+ .vi { color: #a6e22e } // Name.Variable.Instance
67
+ .il { color: #099 } // Literal.Number.Integer.Long
68
+ }
69
+
70
+ code .rouge-table {
71
+ @extend .highlight;
72
+ }
73
+
74
+ code.highlighter-rouge {
75
+ color: white;
76
+ background: #676767;
77
+ border: none;
78
+ padding: 2px 4px;
79
+ }
80
+
81
+ figure.highlight pre {
82
+ border-radius: 3px;
83
+
84
+ code table.rouge-table {
85
+ margin: 0;
86
+
87
+ td {
88
+ border: 1px solid #efefef86;
89
+ }
90
+
91
+ pre {
92
+ margin: 0;
93
+ padding: 0;
94
+ }
95
+
96
+ .gutter.gl {
97
+ padding: 0;
98
+
99
+ .lineno {
100
+ padding: 2px;
101
+ text-align: center;
102
+ }
103
+ }
104
+ }
105
+ }
data/_sass/yat.scss ADDED
@@ -0,0 +1,69 @@
1
+ @charset "utf-8";
2
+
3
+ // Define defaults for each variable.
4
+
5
+ $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Oswald,
6
+ "Apple Color Emoji", "Open Sans", "FontAwesome", !default;
7
+ $base-font-size: 14px !default;
8
+ $base-font-weight: 400 !default;
9
+ $small-font-size: $base-font-size * 0.875 !default;
10
+ $base-line-height: 1.5 !default;
11
+
12
+ $spacing-unit: 30px !default;
13
+
14
+ $text-color: #333 !default;
15
+ $background-color: #fefefe !default;
16
+ $brand-color: #2a7ae2 !default;
17
+
18
+ $grey-color: #828282 !default;
19
+ $grey-color-light: lighten($grey-color, 40%) !default;
20
+ $grey-color-dark: darken($grey-color, 25%) !default;
21
+
22
+ $white-color: #fdfdfd !default;
23
+
24
+ $table-text-align: left !default;
25
+
26
+ $header-height: $base-line-height * $base-font-size * 2.85 !default;
27
+ $header-text-color: lighten($white-color, 10%) !default;
28
+ $header-background-color: $theme-color !default;
29
+
30
+ $footer-height: $header-height * 1.05 !default;
31
+ $footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
32
+ $footer-background-color: darken($theme-color, 5%) !default;
33
+
34
+ $banner-height: 350px !default;
35
+ $banner-text-color: lighten($white-color, 0%) !default;
36
+ $banner-background: darken(#333, 5%) !default;
37
+
38
+ // Width of the content area
39
+ $content-width: 920px !default;
40
+
41
+ $on-palm: 600px !default;
42
+ $on-laptop: 800px !default;
43
+
44
+ // Use media queries like this:
45
+ // @include media-query($on-palm) {
46
+ // .wrapper {
47
+ // padding-right: $spacing-unit / 2;
48
+ // padding-left: $spacing-unit / 2;
49
+ // }
50
+ // }
51
+ @mixin media-query($device) {
52
+ @media screen and (max-width: $device) {
53
+ @content;
54
+ }
55
+ }
56
+
57
+ @mixin relative-font-size($ratio) {
58
+ font-size: $base-font-size * $ratio;
59
+ }
60
+
61
+ // Import partials.
62
+ @import
63
+ "yat/base",
64
+ "yat/layout",
65
+ "yat/syntax-highlighting",
66
+ "misc/article-menu",
67
+ "misc/common-list",
68
+ "misc/google-translate"
69
+ ;
data/assets/main.scss ADDED
@@ -0,0 +1,25 @@
1
+ ---
2
+ # Only the main Sass file needs front matter (the dashes are enough)
3
+ ---
4
+
5
+ // Default theme colors
6
+ $theme-colors: (
7
+ spacegrey: #222222,
8
+ inkpurple: #543581,
9
+ aquablue: #00aaa0,
10
+ azureblue: #2863b1,
11
+ gracered: #a12a50,
12
+ aloegreen: #3d9e56,
13
+ rustbrown: #795548,
14
+ );
15
+
16
+ $theme-name: "{{ site.theme_color }}";
17
+ $theme-color: map-get($theme-colors, "spacegrey");
18
+
19
+ @if map-has-key($theme-colors, $theme-name) {
20
+ $theme-color: map-get($theme-colors, $theme-name);
21
+ } @else if str-index($theme-name, "#") == 1 {
22
+ $theme-color: {{ site.theme_color | default: '#222' }};
23
+ }
24
+
25
+ @import "yat";