jekyll-theme-yat 1.2.1 → 1.4.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -7,40 +7,54 @@
7
7
  max-width: 250px;
8
8
 
9
9
  .post-menu-title {
10
- font-size: $base-font-size * 1.35;
11
- margin-bottom: 6px;
10
+ font-size: $base-font-size * 1.5;
11
+ margin-bottom: 14px;
12
12
  font-weight: 600;
13
- color: #4e4e4e;
14
-
15
- &:before {
16
- content: '\f02e';
17
- margin-right: 5px;
18
- font-size: $base-font-size * 1.15;
19
- }
13
+ color: #222;
20
14
  }
21
15
 
22
16
  .post-menu-content {
23
17
  ul {
18
+ border-left: 1px solid #e9ecef;
19
+ $indent: $base-font-size / 4;
20
+ $active-bgcolor: #ecebec;
21
+
24
22
  @for $i from 2 to 7 {
25
23
  .h-h#{$i} {
26
- padding-left: ($i - 2) * $base-font-size * 0.9;
27
- font-size: (7 - $i) + $base-font-size * 0.9;
24
+ padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
25
+ font-size: $base-font-size * 1.2;
26
+ line-height: 1.4;
28
27
  }
29
28
  }
30
29
 
31
30
  a {
32
31
  display: flex;
33
- padding: 0px 8px;
32
+ padding: 2px 8px;
33
+ color: darken($text-color, 10%);
34
34
 
35
35
  * {
36
36
  pointer-events: none;
37
37
  }
38
+
39
+ &:hover {
40
+ text-decoration: none;
41
+ color: lighten($text-color, 20%)!important;
42
+ }
38
43
  }
39
44
 
40
45
  .active {
41
- color: white;
42
- background: mix(invert($theme-color), darkorange);
46
+ background-color: $active-bgcolor;
43
47
  transition: background 0.5s;
48
+ border-left: 2px solid #202020;
49
+ margin-left: -2px;
50
+
51
+ &:hover {
52
+ background-color: lighten($active-bgcolor, 2%);
53
+ }
54
+
55
+ a {
56
+ color: #121416;
57
+ }
44
58
  }
45
59
  }
46
60
  }
@@ -3,10 +3,6 @@
3
3
  */
4
4
  .common-list {
5
5
  @include relative-font-size(1.0);
6
-
7
- background: #eaeaea;
8
- box-shadow: 0px 0px 3px 0px #a9a9a9;
9
- border-radius: 3px;
10
6
  min-width: 200px;
11
7
 
12
8
  ul {
@@ -15,7 +11,7 @@
15
11
  }
16
12
 
17
13
  li {
18
- border-bottom: solid 1px #fff;
14
+ border-bottom: solid 1px #00000018;
19
15
 
20
16
  &:last-child {
21
17
  border-bottom: none;
@@ -26,8 +22,8 @@
26
22
  justify-content: space-between;
27
23
  padding: 8px 12px;
28
24
  text-decoration: none;
29
- font-weight: 600;
30
- color: mix($theme-color, #666);
25
+ font-weight: normal;
26
+ color: $text-color;
31
27
  transition: background 0.2s;
32
28
 
33
29
  &:hover {
@@ -40,7 +36,7 @@
40
36
  display: inline-block;
41
37
  border-radius: 10px;
42
38
  align-self: center;
43
- background: darken(invert($theme-color), 20%);
39
+ background: #000000bd;
44
40
  padding: 0px 8px;
45
41
  margin-left: 20px;
46
42
  color: $white-color;
@@ -113,7 +113,7 @@ body {
113
113
  // Main look
114
114
 
115
115
  .ct-language-selected {
116
- background: lighten($theme-color, 10%) !important;
116
+ background: darken($theme-color, 5%) !important;
117
117
  }
118
118
 
119
119
  .ct-language-dropdown {
@@ -130,13 +130,23 @@ body {
130
130
  margin-top: 0;
131
131
  z-index: 200;
132
132
  border-radius: 3px;
133
- padding-top: 8px;
134
- padding-bottom: 8px;
135
133
  visibility: hidden;
136
134
 
137
135
  li {
138
136
  padding: 5px;
139
137
 
138
+ &:first-child {
139
+ padding-top: 12px;
140
+ }
141
+
142
+ &:last-child {
143
+ padding-bottom: 12px;
144
+ }
145
+
146
+ &:not(:last-child) {
147
+ border-bottom: 1px solid rgba(0, 0, 0, .04);
148
+ }
149
+
140
150
  a {
141
151
  display: block;
142
152
  color: invert($theme-color);
@@ -174,6 +184,7 @@ body {
174
184
  margin-top: 8px;
175
185
  max-height: 10000px;
176
186
  visibility: visible;
187
+ box-shadow: 0 0 9px 3px rgba(0, 0, 0, .06);
177
188
  }
178
189
  }
179
190
 
@@ -2,18 +2,17 @@
2
2
 
3
3
  // Define defaults for each variable.
4
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;
5
+ $base-font-family: "Noto Sans Light", AppleSDGothicNeo-Regular, "Malgun Gothic", "Apple Color Emoji", Helvetica, Arial, Oswald, sans-serif, !default;
6
+ $base-font-size: 14px !default;
8
7
  $base-font-weight: 400 !default;
9
8
  $small-font-size: $base-font-size * 0.875 !default;
10
- $base-line-height: 1.5 !default;
9
+ $base-line-height: 1.6 !default;
11
10
 
12
11
  $spacing-unit: 30px !default;
13
12
 
14
- $text-color: #333 !default;
15
- $background-color: #fefefe !default;
16
- $brand-color: #2a7ae2 !default;
13
+ $text-color: #313b3f !default;
14
+ $background-color: #fff !default;
15
+ $brand-color: #ff5100 !default;
17
16
 
18
17
  $grey-color: #828282 !default;
19
18
  $grey-color-light: lighten($grey-color, 40%) !default;
@@ -24,16 +23,16 @@ $white-color: #fdfdfd !default;
24
23
  $table-text-align: left !default;
25
24
 
26
25
  $header-height: $base-line-height * $base-font-size * 2.85 !default;
27
- $header-text-color: lighten($white-color, 10%) !default;
26
+ $header-text-color: invert($theme-color) !default;
28
27
  $header-background-color: $theme-color !default;
29
28
 
30
29
  $footer-height: $header-height * 1.05 !default;
31
- $footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
30
+ $footer-text-color: lighten(invert($theme-color), 25%) !default;
32
31
  $footer-background-color: darken($theme-color, 5%) !default;
33
32
 
34
- $banner-height: 420px !default;
33
+ $banner-height: 640px !default;
35
34
  $banner-text-color: lighten($white-color, 0%) !default;
36
- $banner-background: darken(#333, 5%) !default;
35
+ $banner-background: rgba(0,0,0,0.8) !default;
37
36
 
38
37
  // Width of the content area
39
38
  $content-width: 920px !default;
@@ -62,7 +61,7 @@ $on-laptop: 800px !default;
62
61
  @import
63
62
  "yat/base",
64
63
  "yat/layout",
65
- "yat/syntax-highlighting",
64
+ // "yat/syntax-highlighting",
66
65
  "misc/article-menu",
67
66
  "misc/common-list",
68
67
  "misc/google-translate"
@@ -14,7 +14,10 @@ dl, dd, ol, ul, figure {
14
14
  * Basic styling
15
15
  */
16
16
  body {
17
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
17
+ font-family: $base-font-family;
18
+ font-weight: $base-font-weight;
19
+ font-size: #{$base-font-size};
20
+ line-height: #{$base-line-height};
18
21
  color: $text-color;
19
22
  background-color: $background-color;
20
23
  -webkit-text-size-adjust: 100%;
@@ -106,12 +109,7 @@ a {
106
109
  color: $brand-color;
107
110
  text-decoration: none;
108
111
 
109
- &:visited {
110
- color: darken($brand-color, 15%);
111
- }
112
-
113
112
  &:hover {
114
- color: $text-color;
115
113
  text-decoration: underline;
116
114
  }
117
115
 
@@ -149,22 +147,50 @@ blockquote {
149
147
  pre,
150
148
  code {
151
149
  @include relative-font-size(0.9375);
152
- border-radius: 3px;
153
- background-color: #3d3d3d;
150
+ color: $text-color;
154
151
  }
155
152
 
156
- code {
153
+ *:not(pre) > code {
157
154
  padding: 1px 5px;
155
+ border-radius: 3px;
156
+ color: #fff;
157
+ background-color: $brand-color;
158
158
  }
159
159
 
160
160
  pre {
161
- padding: 8px 12px;
162
161
  overflow-x: auto;
162
+ position: relative;
163
+ background-color: #f0f0f0;
164
+
165
+ // code language badge
166
+ &:before {
167
+ content: attr(data-lang);
168
+ color: #fff;
169
+ background-color: #ff4e00;
170
+ padding: 0 .5em;
171
+ border-radius: 0 2px;
172
+ text-transform: uppercase;
173
+ text-align: center;
174
+ min-width: 32px;
175
+ display: inline-block;
176
+ position: absolute;
177
+ right: 0;
178
+ }
163
179
 
164
180
  > code {
181
+ display: inline-block;
182
+ padding: 20px!important;
183
+ background-color: transparent;
165
184
  border: 0;
166
- padding-right: 0;
167
- padding-left: 0;
185
+ }
186
+
187
+ table, pre {
188
+ margin-bottom: 0;
189
+
190
+ .gutter, .code {
191
+ padding: 6px;
192
+ border: none;
193
+ }
168
194
  }
169
195
  }
170
196
 
@@ -179,11 +205,6 @@ pre {
179
205
  padding-right: $spacing-unit;
180
206
  padding-left: $spacing-unit;
181
207
  @extend %clearfix;
182
-
183
- @include media-query($on-laptop) {
184
- padding-right: $spacing-unit / 2;
185
- padding-left: $spacing-unit / 2;
186
- }
187
208
  }
188
209
 
189
210
 
@@ -205,22 +226,25 @@ table {
205
226
  margin-bottom: $spacing-unit;
206
227
  width: 100%;
207
228
  text-align: $table-text-align;
208
- color: lighten($text-color, 18%);
229
+ color: lighten($text-color, 5%);
209
230
  border-collapse: collapse;
210
- border: 1px solid $grey-color-light;
231
+
211
232
  tr {
212
233
  &:nth-child(even) {
213
234
  background-color: lighten($grey-color-light, 6%);
214
235
  }
215
236
  }
237
+
216
238
  th, td {
217
239
  padding: ($spacing-unit / 3) ($spacing-unit / 2);
218
240
  }
241
+
219
242
  th {
220
243
  background-color: lighten($grey-color-light, 3%);
221
244
  border: 1px solid darken($grey-color-light, 4%);
222
245
  border-bottom-color: darken($grey-color-light, 12%);
223
246
  }
247
+
224
248
  td {
225
249
  border: 1px solid $grey-color-light;
226
250
  }
@@ -243,6 +267,10 @@ table {
243
267
  */
244
268
  @mixin flex-sticky($top) {
245
269
  position: sticky;
270
+ position: -moz-sticky; /* <-- fix sticky compatibility issue */
271
+ position: -ms-sticky;
272
+ position: -o-sticky;
273
+ position: -webkit-sticky;
246
274
  align-self: flex-start; /* <-- fix the sticky not work issue */
247
275
  transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
248
276
  top: $top;
@@ -11,14 +11,31 @@ html {
11
11
  &[data-scroll-status='top'] {
12
12
  header.site-header-transparent {
13
13
  height: 0;
14
+ margin-top: 20px;
15
+ background-color: transparent;
16
+ transition: 0.1s height,background-color,box-shadow;
14
17
 
15
18
  &.site-header {
16
- text-shadow: 0 0 2px #505050a0;
19
+ .site-brand-inner, .page-link {
20
+ color: #fff;
21
+ transition: 0.1s color;
22
+ }
23
+
24
+ @include media-query($on-laptop) {
25
+ .page-link {
26
+ color: unset;
27
+ }
28
+
29
+ .menu-icon {
30
+ > svg {
31
+ fill: $white-color;
32
+ }
33
+ }
34
+ }
17
35
  }
18
36
  }
19
37
 
20
38
  footer.site-footer {
21
- color: #888;
22
39
  background-color: transparent;
23
40
 
24
41
  .site-footer-inner {
@@ -46,11 +63,24 @@ html {
46
63
  height: $header-height;
47
64
  width: 100%;
48
65
  transition: height 0.2s, text-shadow 0.2s, top 0.2s;
66
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
49
67
 
50
68
  // Positioning context for the mobile navigation icon
51
69
  @include flex-sticky(0);
52
70
  z-index: 1000;
53
71
 
72
+ & > .wrapper {
73
+ margin: 0 60px;
74
+ padding: 0;
75
+ max-width: 100%;
76
+ transition: 0.2s margin;
77
+
78
+ @include media-query(1024px) {
79
+ margin: 0 20px;
80
+ max-width: unset;
81
+ }
82
+ }
83
+
54
84
  a {
55
85
  text-decoration: none;
56
86
  }
@@ -68,16 +98,12 @@ html {
68
98
  @include relative-font-size(1.125);
69
99
  font-weight: $base-font-weight;
70
100
  letter-spacing: -1px;
71
- transition: filter 0.2s;
101
+ transition: 0.1s filter color;
72
102
 
73
103
  &, &:visited {
74
104
  color: $header-text-color;
75
105
  }
76
106
 
77
- &:hover {
78
- filter: drop-shadow(0 0 2px #08080880);
79
- }
80
-
81
107
  .site-favicon {
82
108
  display: inline-block;
83
109
  height: $header-height / 1.5;
@@ -87,7 +113,7 @@ html {
87
113
  }
88
114
 
89
115
  .site-nav {
90
- @include relative-font-size(1.025);
116
+ @include relative-font-size(1.125);
91
117
  line-height: $header-height;
92
118
  position: absolute;
93
119
  right: 0;
@@ -102,16 +128,20 @@ html {
102
128
  }
103
129
 
104
130
  .page-link {
105
- color: $header-text-color;
106
131
  line-height: $base-line-height;
132
+ color: $header-text-color;
133
+ transition: 0.1s ease-in-out;
107
134
 
108
135
  // Gaps between nav items, but not on the last one
109
136
  &:not(:last-child) {
110
- margin-right: 20px;
137
+ margin-right: 24px;
138
+ &:hover {
139
+ text-decoration: underline;
140
+ }
111
141
  }
112
142
  }
113
143
 
114
- @include media-query($on-palm) {
144
+ @include media-query($on-laptop) {
115
145
  position: absolute;
116
146
  top: 0;
117
147
  text-align: left;
@@ -128,13 +158,16 @@ html {
128
158
  text-align: center;
129
159
 
130
160
  > svg {
131
- fill: $white-color;
161
+ fill: rgba($header-text-color, 80%);
162
+ transition: 0.1s fill;
132
163
  }
133
164
  }
134
165
 
135
166
  input ~ .trigger {
136
167
  clear: both;
137
168
  display: none;
169
+ border-radius: 3px;
170
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
138
171
  }
139
172
 
140
173
  input:checked ~ .trigger {
@@ -155,7 +188,7 @@ html {
155
188
  * Site footer
156
189
  */
157
190
  .site-footer {
158
- @include relative-font-size(0.9);
191
+ @include relative-font-size(1.0);
159
192
  color: $footer-text-color;
160
193
  background-color: $footer-background-color;
161
194
  text-align: left;
@@ -163,11 +196,11 @@ html {
163
196
 
164
197
  .site-footer-inner {
165
198
  transition: border-top 0.2s;
166
- padding: $spacing-unit * 0.8 0;
199
+ padding: $spacing-unit * 1.8 0;
167
200
  }
168
201
 
169
202
  a {
170
- $a-color: invert(mix(invert($theme-color), #0030ae));
203
+ $a-color: $brand-color;
171
204
  color: $a-color;
172
205
 
173
206
  &:hover {
@@ -193,6 +226,15 @@ html {
193
226
  @include relative-font-size(2.25);
194
227
  }
195
228
  }
229
+
230
+ .post-tags {
231
+ display: inline-block;
232
+ padding-right: 150px;
233
+
234
+ .post-tag {
235
+ margin: 0 12px 0 0;
236
+ }
237
+ }
196
238
  }
197
239
 
198
240
  /**
@@ -201,7 +243,7 @@ html {
201
243
  .page-content {
202
244
  @extend %flex-1; /* <-- Keep footer on the bottom */
203
245
  -ms-flex: none; /* <-- Fix IE footer issue */
204
- padding: $spacing-unit * 1.5 0;
246
+ padding: $spacing-unit * 2 0;
205
247
  }
206
248
 
207
249
  .page-heading {
@@ -221,20 +263,104 @@ html {
221
263
  list-style: none;
222
264
 
223
265
  > li {
224
- margin-bottom: $spacing-unit;
266
+ margin-bottom: $spacing-unit * 1.5;
267
+ padding-bottom: 30px;
268
+
269
+ &:not(:last-child) {
270
+ border-bottom: 1px solid #e3e3e3;
271
+ }
272
+ }
273
+ }
274
+
275
+ .post-title {
276
+ margin-bottom: 2px;
277
+ transition: 0.2s all;
278
+
279
+ a {
280
+ text-decoration: none;
281
+
282
+ &:after {
283
+ content: 'NEW';
284
+ position: absolute;
285
+ margin-left: 8px;
286
+ margin-top: 3px;
287
+ padding: 0px 3px;
288
+ background-color: $brand-color;
289
+ color: #fff;
290
+ font-size: 10px;
291
+ font-weight: 600;
292
+ border-radius: 2px;
293
+ }
294
+
295
+ &:visited:after {
296
+ background-color: #fff;
297
+ }
225
298
  }
226
299
  }
227
300
 
228
301
  .post-meta {
229
- font-size: $small-font-size;
302
+ font-size: $base-font-size;
230
303
  color: $grey-color;
304
+ margin-bottom: $spacing-unit * 0.5;
231
305
  }
232
306
 
233
307
  .post-link {
234
308
  @include relative-font-size(1.5);
235
-
236
- display: block;
237
309
  font-weight: $base-font-weight * 1.5;
310
+ color: #15171a;
311
+ }
312
+
313
+ .post-excerpt {
314
+ color: #777;
315
+ }
316
+
317
+ .post-tags .post-tag {
318
+ text-decoration: none;
319
+ border: 1px solid;
320
+ padding: 2px 4px;
321
+ border-radius: 2px;
322
+
323
+ &:not(:first-child) {
324
+ margin-left: 8px;
325
+ }
326
+ }
327
+
328
+ .paginator {
329
+ text-align: center;
330
+
331
+ & > .previous:before {
332
+ content: ' ';
333
+ border: solid #787878;
334
+ border-width: 0 2px 2px 0;
335
+ display: inline-block;
336
+ padding: 4px;
337
+ margin-right: 8px;
338
+ transform: rotate(135deg);
339
+ -webkit-transform: rotate(135deg);
340
+ }
341
+
342
+ & > .next:after {
343
+ content: ' ';
344
+ border: solid #787878;
345
+ border-width: 0 2px 2px 0;
346
+ display: inline-block;
347
+ padding: 4px;
348
+ margin-left: 8px;
349
+ transform: rotate(-45deg);
350
+ -webkit-transform: rotate(-45deg);
351
+ }
352
+
353
+ .previous span, .next span {
354
+ color: #b3b3b3;
355
+ }
356
+
357
+ a:hover {
358
+ color: #000;
359
+ }
360
+
361
+ .indicator {
362
+ padding: 0 15px;
363
+ }
238
364
  }
239
365
  }
240
366
 
@@ -245,6 +371,20 @@ html {
245
371
  .post {
246
372
  @extend %post-header;
247
373
 
374
+ .post-header {
375
+ margin: 50px auto 60px;
376
+ padding: 0 0 20px;
377
+ border-bottom: 1px solid #ebebeb;
378
+
379
+ .post-title {
380
+ margin-bottom: 2px;
381
+ }
382
+
383
+ .post-meta {
384
+ color: #808080;
385
+ }
386
+ }
387
+
248
388
  .post-content {
249
389
  margin-bottom: $spacing-unit;
250
390
 
@@ -271,6 +411,66 @@ html {
271
411
  @include relative-font-size(1.125);
272
412
  }
273
413
  }
414
+
415
+ img, iframe {
416
+ margin-left: auto;
417
+ margin-right: auto;
418
+ display: block;
419
+ }
420
+
421
+ h2, h3, h4, h5, h6 {
422
+ margin: 60px 0 19px;
423
+ }
424
+
425
+ p, hr {
426
+ margin-bottom: 24px;
427
+ }
428
+
429
+ hr {
430
+ height: 1px;
431
+ background-color: #ebebeb;
432
+ border: none;
433
+ }
434
+ }
435
+
436
+ .post-related {
437
+ &>*:first-child {
438
+ @include relative-font-size(1.425);
439
+ color: #333;
440
+ margin-bottom: 14px;
441
+ }
442
+
443
+ ul {
444
+ margin-left: 15px;
445
+ .post-link {
446
+ @include relative-font-size(1.075);
447
+ }
448
+
449
+ a {
450
+ color: #666;
451
+
452
+ &:hover {
453
+ color: #333;
454
+ }
455
+
456
+ &:after {
457
+ content: 'NEW';
458
+ position: absolute;
459
+ margin-left: 8px;
460
+ margin-top: 3px;
461
+ padding: 0px 3px;
462
+ background-color: $brand-color;
463
+ color: #fff;
464
+ font-size: 10px;
465
+ font-weight: 600;
466
+ border-radius: 2px;
467
+ }
468
+
469
+ &:visited:after {
470
+ background-color: #fff;
471
+ }
472
+ }
473
+ }
274
474
  }
275
475
  }
276
476
 
@@ -281,9 +481,35 @@ html {
281
481
  .post-nav {
282
482
  display: flex;
283
483
  justify-content: space-between;
484
+ margin: 72px 0 59px;
485
+ padding: 31px 0 0;
284
486
 
285
487
  a {
286
- display: flex;
488
+ @include relative-font-size(1.125);
489
+ line-height: 15px;
490
+ color: #666;
491
+ }
492
+
493
+ .previous:before {
494
+ content: ' ';
495
+ border: solid #787878;
496
+ border-width: 0 2px 2px 0;
497
+ display: inline-block;
498
+ padding: 4px;
499
+ margin-right: 8px;
500
+ transform: rotate(135deg);
501
+ -webkit-transform: rotate(135deg);
502
+ }
503
+
504
+ .next:after {
505
+ content: ' ';
506
+ border: solid #787878;
507
+ border-width: 0 2px 2px 0;
508
+ display: inline-block;
509
+ padding: 4px;
510
+ margin-left: 8px;
511
+ transform: rotate(-45deg);
512
+ -webkit-transform: rotate(-45deg);
287
513
  }
288
514
  }
289
515
 
@@ -322,6 +548,7 @@ html {
322
548
  height: $banner-height;
323
549
  background-color: $banner-background;
324
550
  transition: height 0.2s;
551
+ margin-bottom: 32px;
325
552
 
326
553
  .page-banner-img {
327
554
  position: absolute;
@@ -343,16 +570,18 @@ html {
343
570
 
344
571
  color: $banner-text-color;
345
572
  padding: 10px 5px;
346
- text-shadow: 1px 1px 2px #333;
573
+ text-shadow: 1px 1px 2px #33333355;
347
574
 
348
575
  & > *:first-child {
349
576
  margin: 0;
350
577
 
351
578
  > :nth-child(1) {
352
- @include relative-font-size(2.825);
579
+ @include relative-font-size(3.9);
353
580
  letter-spacing: -1px;
354
- line-height: 1;
355
- margin-bottom: 10px;
581
+ line-height: 0.95;
582
+ margin-bottom: 18px;
583
+ font-weight: normal;
584
+ transition: 0.2s all;
356
585
 
357
586
  @include media-query($on-palm) {
358
587
  @include relative-font-size(2.425);
@@ -360,13 +589,45 @@ html {
360
589
  }
361
590
 
362
591
  > :nth-child(2) {
363
- font-weight: $base-font-weight * 1.5;
592
+ font-weight: normal;
593
+ margin-bottom: 0;
364
594
  }
365
595
 
366
596
  > :last-child {
367
597
  margin-bottom: 0;
368
598
  }
369
599
  }
600
+
601
+ .post-subtitle {
602
+ @include relative-font-size(1.525);
603
+ color: #ffffffcc;
604
+ padding-right: 280px;
605
+ }
606
+
607
+ .post-meta {
608
+ color: #ffffffcc;
609
+ }
610
+
611
+ .left-vsplit:before {
612
+ background: #e3e3e388;
613
+ }
614
+
615
+ .post-tags {
616
+ color: #999;
617
+ padding-right: 280px;
618
+
619
+ .post-tag {
620
+ @include relative-font-size(1.125);
621
+ display: inline-block;
622
+ text-decoration: none;
623
+ margin: 9px 12px 0 0;
624
+ color: #fff;
625
+
626
+ &:hover {
627
+ text-decoration: underline;
628
+ }
629
+ }
630
+ }
370
631
  }
371
632
 
372
633
  @include media-query($on-palm) {
@@ -391,7 +652,7 @@ html {
391
652
 
392
653
  @include flex-sticky($header-height + 20px);
393
654
 
394
- @include media-query($on-palm) {
655
+ @include media-query($on-laptop) {
395
656
  display: none;
396
657
  }
397
658
 
@@ -419,7 +680,6 @@ html {
419
680
  margin-top: 28px;
420
681
  }
421
682
 
422
-
423
683
  &:hover:before {
424
684
  content: '#';
425
685
  left: -1em;
@@ -432,5 +692,42 @@ html {
432
692
  color: $grey-color;
433
693
  }
434
694
 
695
+ li a {
696
+ &.post-link {
697
+ margin-left: 5px;
698
+ }
699
+
700
+ color: #303030;
701
+
702
+ &:hover {
703
+ color: #000;
704
+ }
705
+
706
+ &:after {
707
+ content: 'NEW';
708
+ position: absolute;
709
+ margin-left: 8px;
710
+ margin-top: 3px;
711
+ padding: 0px 3px;
712
+ background-color: $brand-color;
713
+ color: #fff;
714
+ font-size: 10px;
715
+ font-weight: 600;
716
+ border-radius: 2px;
717
+ }
718
+
719
+ &:visited:after {
720
+ background-color: #fff;
721
+ }
722
+ }
435
723
  }
436
724
 
725
+ .left-vsplit:before {
726
+ content: "";
727
+ display: inline-block;
728
+ width: 1px;
729
+ height: 10px;
730
+ margin: 0 10px;
731
+ background-color: #e3e3e3e3;
732
+ vertical-align: baseline;
733
+ }