jekyll-theme-katydecorah 0.1.3

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 (74) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +42 -0
  4. data/_includes/end.html +15 -0
  5. data/_includes/footer.html +15 -0
  6. data/_includes/header.html +5 -0
  7. data/_includes/icons/angle-left.svg +1 -0
  8. data/_includes/icons/angle-right.svg +1 -0
  9. data/_includes/icons/blog.svg +1 -0
  10. data/_includes/icons/bookmark.svg +1 -0
  11. data/_includes/icons/code.svg +1 -0
  12. data/_includes/icons/codepen.svg +1 -0
  13. data/_includes/icons/github.svg +1 -0
  14. data/_includes/icons/instagram.svg +1 -0
  15. data/_includes/icons/link.svg +1 -0
  16. data/_includes/icons/mail.svg +1 -0
  17. data/_includes/icons/map-signs.svg +1 -0
  18. data/_includes/icons/map.svg +1 -0
  19. data/_includes/icons/marker.svg +1 -0
  20. data/_includes/icons/menu.svg +1 -0
  21. data/_includes/icons/music.svg +1 -0
  22. data/_includes/icons/pause.svg +1 -0
  23. data/_includes/icons/play.svg +1 -0
  24. data/_includes/icons/rss.svg +1 -0
  25. data/_includes/icons/selection.json +485 -0
  26. data/_includes/icons/tag.svg +1 -0
  27. data/_includes/icons/twitter.svg +1 -0
  28. data/_includes/img.html +5 -0
  29. data/_includes/locations.html +1 -0
  30. data/_includes/paginator.html +15 -0
  31. data/_includes/post-list.html +7 -0
  32. data/_includes/post-map-header.html +11 -0
  33. data/_includes/prev-next.html +3 -0
  34. data/_includes/single-playlist.html +16 -0
  35. data/_includes/skip.html +4 -0
  36. data/_includes/tags.html +1 -0
  37. data/_includes/top.html +35 -0
  38. data/_includes/twitter.html +1 -0
  39. data/_layouts/category.html +10 -0
  40. data/_layouts/default.html +13 -0
  41. data/_layouts/front-page.html +25 -0
  42. data/_layouts/hello.html +12 -0
  43. data/_layouts/post.html +30 -0
  44. data/_layouts/redirect.html +7 -0
  45. data/_layouts/review.html +175 -0
  46. data/_sass/_accessibility.scss +29 -0
  47. data/_sass/_adventure.scss +69 -0
  48. data/_sass/_archive.scss +71 -0
  49. data/_sass/_brags.scss +23 -0
  50. data/_sass/_buttons.scss +28 -0
  51. data/_sass/_code.scss +308 -0
  52. data/_sass/_footer.scss +61 -0
  53. data/_sass/_front-page.scss +180 -0
  54. data/_sass/_header.scss +21 -0
  55. data/_sass/_icons.scss +62 -0
  56. data/_sass/_layout.scss +59 -0
  57. data/_sass/_map.scss +93 -0
  58. data/_sass/_mixins.scss +28 -0
  59. data/_sass/_nav.scss +54 -0
  60. data/_sass/_playlists.scss +58 -0
  61. data/_sass/_posts.scss +347 -0
  62. data/_sass/_postsMap.scss +69 -0
  63. data/_sass/_print.scss +13 -0
  64. data/_sass/_review.scss +124 -0
  65. data/_sass/_scaffolding.scss +148 -0
  66. data/_sass/_search.scss +29 -0
  67. data/_sass/_shame.scss +0 -0
  68. data/_sass/_type.scss +184 -0
  69. data/_sass/_utilities.scss +82 -0
  70. data/_sass/_variables.scss +137 -0
  71. data/assets/lunr-feed.js +48 -0
  72. data/assets/lunr.min.js +7 -0
  73. data/assets/style.scss +29 -0
  74. metadata +158 -0
data/_sass/_map.scss ADDED
@@ -0,0 +1,93 @@
1
+ .page-adventure-map .map {
2
+ margin-bottom: -3.5em;
3
+ margin-top: -3.75em;
4
+ }
5
+
6
+ .page-adventure-map .map,
7
+ .page-review .map {
8
+ min-height: 429px;
9
+ width: 100%;
10
+
11
+ .leaflet-popup-content,
12
+ .leaflet-popup-content-wrapper {
13
+ padding: 0;
14
+ }
15
+
16
+ h2 {
17
+ @extend %fancy-type;
18
+
19
+ margin: 0;
20
+ padding: 0.5em;
21
+ }
22
+
23
+ img {
24
+ border-radius: 3px 3px 0 0;
25
+ margin: 0;
26
+ max-width: 100%;
27
+ }
28
+ }
29
+
30
+ .external-true h2::after {
31
+ content: "\f14c";
32
+ display: inline-block;
33
+ font: normal normal normal 14px/1 FontAwesome;
34
+ font-size: $font-xs;
35
+ margin-left: 3px;
36
+ text-rendering: auto;
37
+ transform: translate(0, 0);
38
+ }
39
+
40
+ .map-select {
41
+ background: rgba($white, 0.5);
42
+ bottom: 0;
43
+ font-size: $font-xs;
44
+ height: 450px;
45
+ overflow: scroll;
46
+ position: absolute;
47
+ right: 0;
48
+ top: 4.9em;
49
+ width: 200px;
50
+ z-index: 100;
51
+
52
+ .filter,
53
+ .year-group {
54
+ display: none;
55
+ }
56
+
57
+ .filter:checked + .filter-label {
58
+ font-weight: bold;
59
+
60
+ + .year-group {
61
+ display: block;
62
+ }
63
+ }
64
+
65
+ .filter-label {
66
+ background: $white;
67
+ cursor: pointer;
68
+ display: block;
69
+ padding: 0.25em 1em;
70
+
71
+ &:hover {
72
+ background: darken($accent, 10%);
73
+ }
74
+ }
75
+
76
+ .year-child {
77
+ cursor: pointer;
78
+ padding: 0.2em 1em;
79
+
80
+ &:hover {
81
+ background: darken($accent, 10%);
82
+ }
83
+ }
84
+ }
85
+
86
+ .map-attribution {
87
+ bottom: 1em;
88
+ color: rgba($text-color, 0.7);
89
+ display: block;
90
+ font-size: 13px;
91
+ position: absolute;
92
+ right: 1em;
93
+ }
@@ -0,0 +1,28 @@
1
+ // From http://css-tricks.com/media-queries-sass-3-2-and-codekit/
2
+ @mixin breakpoint($point) {
3
+ @if $point == medium {
4
+ @media (min-width: 50em) {
5
+ @content;
6
+ }
7
+ } @else if $point == small {
8
+ @media (max-width: 50em) {
9
+ @content;
10
+ }
11
+ } @else if $point == big {
12
+ @media (min-width: 70em) {
13
+ @content;
14
+ }
15
+ }
16
+ }
17
+
18
+ @mixin clearfix() {
19
+ &::before,
20
+ &::after {
21
+ content: " ";
22
+ display: table;
23
+ }
24
+
25
+ &::after {
26
+ clear: both;
27
+ }
28
+ }
data/_sass/_nav.scss ADDED
@@ -0,0 +1,54 @@
1
+ .nav {
2
+ list-style: none;
3
+ margin: 0;
4
+ padding: 0;
5
+ position: relative;
6
+ transition: 0.25s;
7
+
8
+ li {
9
+ display: inline-block;
10
+ margin: 0;
11
+ }
12
+ }
13
+
14
+ .navbar {
15
+ .footer & {
16
+ @include breakpoint(medium) {
17
+ display: none;
18
+ }
19
+
20
+ .nav-link {
21
+ display: block;
22
+ margin-bottom: 0.25em;
23
+ }
24
+ }
25
+
26
+ li {
27
+ @include breakpoint(small) {
28
+ display: block;
29
+ }
30
+ }
31
+ }
32
+
33
+ .header {
34
+ .nav-link {
35
+ border-bottom: 2px solid transparent;
36
+ color: $link-color;
37
+ display: block;
38
+ font-size: $font-xs;
39
+ line-height: 1;
40
+ margin-left: 1.5em;
41
+ margin-top: 1em;
42
+ min-height: 1em;
43
+ padding: 0.5em 0;
44
+ position: relative;
45
+ }
46
+
47
+ .active .nav-link,
48
+ .nav-link:hover {
49
+ border-bottom-color: $link-hover;
50
+ color: $link-hover;
51
+ text-decoration: none;
52
+ transition: $link-transition;
53
+ }
54
+ }
@@ -0,0 +1,58 @@
1
+ .playlist-meta {
2
+ margin-bottom: 1em;
3
+ margin-top: -1em;
4
+ text-align: center;
5
+ }
6
+
7
+ .playlist-nostalgia {
8
+ display: block;
9
+ font-style: italic;
10
+ }
11
+
12
+ // scss-lint:disable VendorPrefixes
13
+ .playlist {
14
+ -moz-column-gap: 3em;
15
+ -webkit-column-gap: 3em;
16
+ column-gap: 3em;
17
+ -moz-columns: 2 290px;
18
+ -webkit-columns: 2 290px;
19
+ columns: 2 290px;
20
+ }
21
+
22
+ .playlist-track {
23
+ -webkit-column-break-inside: avoid;
24
+ margin-bottom: 1em;
25
+ }
26
+
27
+ .track-name {
28
+ @extend %fancy-type;
29
+ }
30
+
31
+ .track-artist {
32
+ font-weight: bold;
33
+ }
34
+
35
+ .track-meta {
36
+ color: $text-color-light;
37
+ font-size: $font-xs;
38
+ }
39
+
40
+ .rdio-playlist-link {
41
+ margin-bottom: 2em;
42
+ }
43
+
44
+ .playlist-container {
45
+ margin-bottom: 1em;
46
+ padding-bottom: 1em;
47
+
48
+ &:nth-child(even) {
49
+ background: rgba(complement($accent), 0.4);
50
+ border-bottom: 1px dashed $body-bg;
51
+ border-top: 1px dashed $body-bg;
52
+ }
53
+
54
+ &:target {
55
+ padding-top: $body-padding-top / 2;
56
+ transition: 0.5s;
57
+ }
58
+ }
data/_sass/_posts.scss ADDED
@@ -0,0 +1,347 @@
1
+ .post {
2
+ @media (max-width: $container-width) {
3
+ padding-left: 1em;
4
+ padding-right: 1em;
5
+ }
6
+
7
+ h1,
8
+ h2,
9
+ h3,
10
+ h3,
11
+ h4,
12
+ p,
13
+ ul,
14
+ ol,
15
+ figcaption,
16
+ pre,
17
+ blockquote,
18
+ .playlist,
19
+ table,
20
+ .footnotes {
21
+ margin-left: auto;
22
+ margin-right: auto;
23
+ }
24
+
25
+ ol,
26
+ ul {
27
+ max-width: $container-width - ($body-font-size * 2);
28
+ }
29
+
30
+ li {
31
+ margin-bottom: 0.7em;
32
+
33
+ ul {
34
+ margin-top: 0.7em;
35
+ }
36
+ }
37
+
38
+ blockquote {
39
+ max-width: $container-width - ($body-font-size * 10);
40
+ }
41
+
42
+ p,
43
+ pre,
44
+ .playlist,
45
+ figcaption,
46
+ .caption,
47
+ h1,
48
+ h2,
49
+ h3,
50
+ h4,
51
+ .footnotes {
52
+ max-width: $container-width - ($body-font-size * 2);
53
+ }
54
+
55
+ // scss-lint:disable SelectorFormat
56
+ .photos,
57
+ .cp_embed_iframe,
58
+ embed,
59
+ .gist,
60
+ iframe,
61
+ .media,
62
+ table {
63
+ @extend %clearfix;
64
+
65
+ border: 0;
66
+ display: block;
67
+ margin-bottom: 1em;
68
+ margin-left: auto;
69
+ margin-right: auto;
70
+ max-width: $media-max;
71
+ position: relative;
72
+
73
+ @media (max-width: $media-max) and (min-width: $container-width) {
74
+ padding-left: 1em;
75
+ padding-right: 1em;
76
+ }
77
+
78
+ picture,
79
+ img,
80
+ video {
81
+ margin-bottom: 0.5em;
82
+ margin-top: 0;
83
+ }
84
+
85
+ picture ~ .caption,
86
+ img ~ .caption {
87
+ margin: 0;
88
+ }
89
+
90
+ .caption ~ picture,
91
+ .caption ~ img {
92
+ margin-top: 1em;
93
+ }
94
+
95
+ [data-src] {
96
+ opacity: 0;
97
+ transition: opacity 0.3s ease-in;
98
+ }
99
+ }
100
+
101
+ // scss-lint:disable PropertySortOrder, DeclarationOrder
102
+ .photos {
103
+ @include breakpoint(medium) {
104
+ -webkit-box-align: center;
105
+ -webkit-align-items: center;
106
+ -ms-flex-align: center;
107
+ align-items: center;
108
+ display: -webkit-box;
109
+ display: -webkit-flex;
110
+ display: -ms-flexbox;
111
+ display: flex;
112
+ -webkit-flex-wrap: wrap;
113
+ -ms-flex-wrap: wrap;
114
+ flex-wrap: wrap;
115
+ -webkit-box-pack: left;
116
+ -webkit-justify-content: left;
117
+ -ms-flex-pack: left;
118
+ justify-content: left;
119
+ }
120
+ }
121
+
122
+ table {
123
+ border: 1px solid darken($light-accent, 10%);
124
+ border-collapse: collapse;
125
+ border-spacing: 0;
126
+ empty-cells: show;
127
+
128
+ caption {
129
+ color: $text-color;
130
+ font: italic 85%/1 arial, sans-serif;
131
+ padding: 1em 0;
132
+ text-align: center;
133
+ }
134
+
135
+ td {
136
+ background-color: $white;
137
+ }
138
+
139
+ td,
140
+ th {
141
+ border-left: 1px solid darken($light-accent, 10%);
142
+ border-width: 0 0 0 1px;
143
+ font-size: inherit;
144
+ margin: 0;
145
+ overflow: visible;
146
+ padding: 0.5em 1em;
147
+ }
148
+
149
+ td:first-child,
150
+ th:first-child {
151
+ border-left-width: 0;
152
+ }
153
+
154
+ thead {
155
+ background-color: $light-accent;
156
+ color: $text-color;
157
+ text-align: left;
158
+ vertical-align: bottom;
159
+ }
160
+ }
161
+
162
+ .note {
163
+ background: $light-accent;
164
+ border-left: 0.25em solid darken($light-accent, 10%);
165
+ padding: 1em;
166
+ }
167
+
168
+ .instagram-media {
169
+ margin: 1em auto;
170
+ width: 100%;
171
+
172
+ @include breakpoint(medium) {
173
+ width: 65%;
174
+ }
175
+ }
176
+ }
177
+
178
+ .post-header {
179
+ position: relative;
180
+
181
+ .container {
182
+ z-index: 1;
183
+ }
184
+ }
185
+
186
+ .post-header-no-map {
187
+ h1 {
188
+ margin-bottom: 0.5em;
189
+ }
190
+ }
191
+
192
+ .post-footer {
193
+ margin-top: 2em;
194
+ }
195
+
196
+ .post-locations,
197
+ .post-twitter {
198
+ margin-bottom: 1em;
199
+
200
+ .icon {
201
+ margin-right: 0.5em;
202
+ }
203
+ }
204
+
205
+ .post-footer-meta {
206
+ margin-bottom: 2em;
207
+ }
208
+
209
+ .tag {
210
+ display: inline-block;
211
+ margin-bottom: 0.25em;
212
+
213
+ &:hover {
214
+ text-decoration: none;
215
+ }
216
+ }
217
+
218
+ .post-date-updated {
219
+ display: block;
220
+ font-size: $font-xs;
221
+ text-align: inherit;
222
+ }
223
+
224
+ .post-page {
225
+ .post-meta {
226
+ color: $text-color-light;
227
+ margin-bottom: 2em;
228
+ }
229
+
230
+ .post-meta-emoji {
231
+ margin-right: 0.2em;
232
+ vertical-align: middle;
233
+ }
234
+ }
235
+
236
+ .post-location {
237
+ min-height: 1px;
238
+ }
239
+
240
+ .post-prev-next {
241
+ @extend %flex-container;
242
+ @extend %flex-space-between;
243
+
244
+ margin-top: 1em;
245
+
246
+ @include breakpoint(small) {
247
+ // scss-lint:disable ImportantRule
248
+ display: block !important;
249
+ }
250
+ }
251
+
252
+ .post-prev,
253
+ .post-next {
254
+ @extend %flex-center;
255
+
256
+ position: relative;
257
+ transition: $link-transition;
258
+
259
+ @include breakpoint(medium) {
260
+ min-height: 2em;
261
+ }
262
+
263
+ &:hover {
264
+ text-decoration: none;
265
+ transition: $link-transition;
266
+ }
267
+ }
268
+
269
+ .post-next {
270
+ @include breakpoint(small) {
271
+ margin-top: 1em;
272
+ }
273
+ @include breakpoint(medium) {
274
+ text-align: right;
275
+ }
276
+ }
277
+
278
+ .post-prev-title,
279
+ .post-next-title {
280
+ display: block;
281
+
282
+ @include breakpoint(medium) {
283
+ width: 100%;
284
+ }
285
+ }
286
+
287
+ .post-prev-title {
288
+ padding-left: 0.5em;
289
+ }
290
+
291
+ .post-next-title {
292
+ padding-right: 0.5em;
293
+ }
294
+
295
+ figure {
296
+ margin: 0 auto;
297
+ }
298
+
299
+ figcaption {
300
+ color: lighten($text-color, 20%);
301
+ font-size: $font-xs;
302
+ margin-bottom: 2em;
303
+ margin-top: -1em;
304
+ }
305
+
306
+ .caption {
307
+ color: lighten($text-color, 20%);
308
+ font-size: $font-xs;
309
+ margin: -2.5em auto 0;
310
+ }
311
+
312
+ .footnotes {
313
+ margin-top: 4em;
314
+
315
+ ol {
316
+ padding-left: 1em;
317
+ }
318
+
319
+ li {
320
+ font-size: $font-xs;
321
+
322
+ &:target {
323
+ color: $fancy-accent;
324
+ }
325
+ }
326
+ }
327
+
328
+ .reversefootnote {
329
+ background: $white;
330
+ border-radius: 0.1em;
331
+ color: $text-color;
332
+ display: inline-block;
333
+ margin-left: 0.5em;
334
+ padding: 0.2em;
335
+
336
+ &:hover {
337
+ text-decoration: none;
338
+ }
339
+ }
340
+
341
+ .badge {
342
+ @extend %xs;
343
+
344
+ background: $white;
345
+ border-radius: 1em;
346
+ padding: 0 0.5em;
347
+ }
@@ -0,0 +1,69 @@
1
+ // scss-lint:disable VendorPrefixes, PropertySortOrder
2
+ .post-header-has-map {
3
+ margin-bottom: 1em;
4
+
5
+ @include breakpoint(medium) {
6
+ -webkit-box-align: center;
7
+ -webkit-align-items: center;
8
+ -ms-flex-align: center;
9
+ align-items: center;
10
+ display: -webkit-box;
11
+ display: -webkit-flex;
12
+ display: -ms-flexbox;
13
+ display: flex;
14
+ -webkit-box-pack: left;
15
+ -webkit-justify-content: left;
16
+ -ms-flex-pack: left;
17
+ justify-content: left;
18
+
19
+ margin-top: -2em;
20
+ min-height: 300px;
21
+ overflow: hidden;
22
+ position: relative;
23
+ }
24
+
25
+ .container {
26
+ width: 100%;
27
+ }
28
+
29
+ h1 {
30
+ margin: 0;
31
+
32
+ @include breakpoint(medium) {
33
+ color: rgba($text-color, 0.75);
34
+ font-size: $h1-size-map;
35
+ }
36
+
37
+ .no-flexbox & {
38
+ margin-top: 0.5em;
39
+ }
40
+ }
41
+ }
42
+
43
+ .post-map-header {
44
+ left: 0;
45
+ overflow: hidden;
46
+ position: absolute;
47
+ top: 0;
48
+ width: 100%;
49
+
50
+ @include breakpoint(small) {
51
+ display: none;
52
+ }
53
+ }
54
+
55
+ .post-location-image {
56
+ display: none;
57
+ max-width: none;
58
+
59
+ @include breakpoint(medium) {
60
+ background-attachment: fixed;
61
+ background-repeat: no-repeat;
62
+ background-size: 100%;
63
+ display: block;
64
+ height: 300px;
65
+ margin-left: auto;
66
+ margin-right: auto;
67
+ width: 1280px;
68
+ }
69
+ }
data/_sass/_print.scss ADDED
@@ -0,0 +1,13 @@
1
+ @media print {
2
+ .navbar,
3
+ .footer,
4
+ .no-print,
5
+ .print-hide {
6
+ display: none;
7
+ }
8
+
9
+ .page-break {
10
+ display: block;
11
+ page-break-before: always;
12
+ }
13
+ }