jekyll-theme-chirpy 3.0.1 → 3.2.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.
- checksums.yaml +4 -4
- data/404.html +5 -4
- data/README.md +52 -43
- data/_config.yml +24 -53
- data/_includes/disqus.html +1 -1
- data/_includes/footer.html +2 -1
- data/_includes/post-nav.html +4 -2
- data/_includes/search-loader.html +21 -3
- data/_includes/search-results.html +1 -1
- data/_includes/topbar.html +30 -9
- data/_layouts/default.html +1 -1
- data/_layouts/post.html +2 -2
- data/_sass/addon/commons.scss +776 -753
- data/_sass/addon/module.scss +1 -5
- data/_sass/addon/syntax.scss +7 -5
- data/_sass/addon/variables.scss +0 -5
- data/_sass/jekyll-theme-chirpy.scss +15 -14
- data/_sass/layout/archives.scss +56 -50
- data/_sass/layout/categories.scss +9 -7
- data/_sass/layout/category-tag.scss +20 -14
- data/_sass/layout/home.scss +58 -54
- data/_sass/layout/post.scss +37 -32
- data/assets/img/favicons/browserconfig.xml +1 -5
- data/assets/img/favicons/manifest.json +0 -4
- data/assets/js/data/cache-list.js +0 -4
- data/assets/js/dist/categories.min.js +3 -3
- data/assets/js/dist/home.min.js +3 -3
- data/assets/js/dist/page.min.js +3 -3
- data/assets/js/dist/post.min.js +3 -3
- data/assets/js/dist/pvreport.min.js +2 -2
- metadata +10 -18
data/_includes/topbar.html
CHANGED
|
@@ -5,21 +5,42 @@
|
|
|
5
5
|
<div id="topbar-wrapper" class="row justify-content-center topbar-down">
|
|
6
6
|
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
|
|
7
7
|
<span id="breadcrumb">
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
|
|
9
|
+
{% assign paths = page.url | split: '/' %}
|
|
10
|
+
|
|
11
|
+
{% if paths.size == 0 %}
|
|
12
|
+
<!-- index page -->
|
|
13
|
+
<span>{{ 'Posts' }}</span>
|
|
14
|
+
{% else %}
|
|
15
|
+
|
|
16
|
+
{% for item in paths %}
|
|
17
|
+
|
|
18
|
+
{% if forloop.first %}
|
|
19
|
+
{% unless page.layout == 'post' %}
|
|
20
|
+
<span>
|
|
21
|
+
<a href="{{ '/' | relative_url }}">{{ 'Home' }}</a>
|
|
22
|
+
</span>
|
|
23
|
+
{% endunless %}
|
|
24
|
+
|
|
25
|
+
{% elsif forloop.last %}
|
|
26
|
+
<span>{{ page.title }}</span>
|
|
27
|
+
|
|
28
|
+
{% else %}
|
|
10
29
|
<span>
|
|
11
|
-
|
|
12
|
-
|
|
30
|
+
{% assign url = item %}
|
|
31
|
+
{% if item == 'posts' and page.layout == 'post' %}
|
|
32
|
+
{% assign url = '/' %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
<a href="{{ url | relative_url }}">
|
|
35
|
+
{{ item | capitalize }}
|
|
13
36
|
</a>
|
|
14
37
|
</span>
|
|
15
|
-
|
|
16
|
-
<span>{{ item.label }}</span>
|
|
38
|
+
|
|
17
39
|
{% endif %}
|
|
40
|
+
|
|
18
41
|
{% endfor %}
|
|
19
42
|
|
|
20
|
-
|
|
21
|
-
<span>{{ page.title }}</span>
|
|
22
|
-
{% endunless %}
|
|
43
|
+
{% endif %}
|
|
23
44
|
|
|
24
45
|
</span><!-- endof #breadcrumb -->
|
|
25
46
|
|
data/_layouts/default.html
CHANGED
data/_layouts/post.html
CHANGED
|
@@ -44,8 +44,8 @@ layout: default
|
|
|
44
44
|
|
|
45
45
|
<div class="post-content">
|
|
46
46
|
|
|
47
|
-
{% if page.image %}
|
|
48
|
-
<img src="{{ page.image }}" class="preview-img" alt="Preview Image">
|
|
47
|
+
{% if page.image.src %}
|
|
48
|
+
<img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
|
|
49
49
|
{% endif %}
|
|
50
50
|
|
|
51
51
|
{{ content }}
|
data/_sass/addon/commons.scss
CHANGED
|
@@ -6,18 +6,23 @@
|
|
|
6
6
|
@mixin mode-toggle($dark-mode: false) {
|
|
7
7
|
@if $dark-mode {
|
|
8
8
|
@include dark-scheme;
|
|
9
|
+
|
|
9
10
|
.mode-toggle {
|
|
10
11
|
transform: rotateY(180deg);
|
|
11
12
|
}
|
|
13
|
+
|
|
12
14
|
} @else {
|
|
13
15
|
@include light-scheme;
|
|
16
|
+
|
|
14
17
|
.mode-toggle {
|
|
15
18
|
transform: none;
|
|
16
19
|
}
|
|
17
20
|
}
|
|
21
|
+
|
|
18
22
|
}
|
|
19
23
|
|
|
20
|
-
html:not([mode]),
|
|
24
|
+
html:not([mode]),
|
|
25
|
+
html[mode=light] {
|
|
21
26
|
@include mode-toggle();
|
|
22
27
|
}
|
|
23
28
|
|
|
@@ -26,7 +31,8 @@ html[mode=dark] {
|
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
@media (prefers-color-scheme: dark) {
|
|
29
|
-
html:not([mode]),
|
|
34
|
+
html:not([mode]),
|
|
35
|
+
html[mode=dark] {
|
|
30
36
|
@include mode-toggle(true);
|
|
31
37
|
}
|
|
32
38
|
|
|
@@ -47,484 +53,124 @@ body {
|
|
|
47
53
|
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
|
48
54
|
}
|
|
49
55
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
$tab-count: 5 !default;
|
|
53
|
-
|
|
54
|
-
$sidebar-display: "sidebar-display";
|
|
55
|
-
|
|
56
|
-
#sidebar {
|
|
57
|
-
@include pl-pr(0);
|
|
58
|
-
position: fixed;
|
|
59
|
-
top: 0;
|
|
60
|
-
left: 0;
|
|
61
|
-
height: 100%;
|
|
62
|
-
overflow-y: auto;
|
|
63
|
-
width: $sidebar-width-medium;
|
|
64
|
-
z-index: 99;
|
|
65
|
-
background: var(--sidebar-bg);
|
|
66
|
-
|
|
67
|
-
a {
|
|
68
|
-
@include sidebar-links;
|
|
69
|
-
&:hover {
|
|
70
|
-
color: #fff;
|
|
71
|
-
@include no-text-decoration;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.site-title {
|
|
76
|
-
a {
|
|
77
|
-
font-weight: 900;
|
|
78
|
-
font-size: 1.5rem;
|
|
79
|
-
letter-spacing: 0.5px;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
56
|
+
/* --- Typography --- */
|
|
82
57
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
color: #828282;
|
|
86
|
-
line-height: 1.2rem;
|
|
87
|
-
word-spacing: 1px;
|
|
88
|
-
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
|
89
|
-
min-height: 3rem; // avoid vertical shifting in multi-line words
|
|
90
|
-
user-select: none;
|
|
91
|
-
}
|
|
58
|
+
h1 {
|
|
59
|
+
@extend %heading;
|
|
92
60
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
font-size: 0.95rem;
|
|
96
|
-
font-weight: 600;
|
|
97
|
-
letter-spacing: 1px;
|
|
98
|
-
display: table-cell;
|
|
99
|
-
vertical-align: middle;
|
|
100
|
-
}
|
|
61
|
+
font-size: 1.8rem;
|
|
62
|
+
}
|
|
101
63
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
&:hover {
|
|
107
|
-
.nav-link {
|
|
108
|
-
color: #f8f9facf;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
&.active {
|
|
112
|
-
.nav-link {
|
|
113
|
-
color: #fcfcfc;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
64
|
+
h2 {
|
|
65
|
+
@extend %heading;
|
|
66
|
+
@extend %section;
|
|
67
|
+
@extend %anchor;
|
|
117
68
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
margin-bottom: 2rem;
|
|
121
|
-
padding-left: 0;
|
|
69
|
+
font-size: 1.4rem;
|
|
70
|
+
}
|
|
122
71
|
|
|
123
|
-
|
|
124
|
-
|
|
72
|
+
h3 {
|
|
73
|
+
@extend %heading;
|
|
74
|
+
@extend %section;
|
|
75
|
+
@extend %anchor;
|
|
125
76
|
|
|
126
|
-
|
|
127
|
-
|
|
77
|
+
font-size: 1.25rem;
|
|
78
|
+
}
|
|
128
79
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
80
|
+
h4 {
|
|
81
|
+
@extend %heading;
|
|
82
|
+
@extend %section;
|
|
83
|
+
@extend %anchor;
|
|
134
84
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
visibility: hidden;
|
|
138
|
-
content: "";
|
|
139
|
-
position: relative;
|
|
140
|
-
right: 1px;
|
|
141
|
-
width: $cursor-width;
|
|
142
|
-
height: $tab-cursor-height;
|
|
143
|
-
border-radius: 1px;
|
|
144
|
-
background-color: var(--nav-cursor-color);
|
|
145
|
-
pointer-events: none;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
} // li
|
|
85
|
+
font-size: 1.15rem;
|
|
86
|
+
}
|
|
149
87
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
88
|
+
h5 {
|
|
89
|
+
@extend %heading;
|
|
90
|
+
@extend %section;
|
|
91
|
+
@extend %anchor;
|
|
154
92
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
$top: -$offset * $tab-height + $tab-cursor-height / 2;
|
|
93
|
+
font-size: 1.1rem;
|
|
94
|
+
}
|
|
158
95
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
} @else {
|
|
167
|
-
> li.active:nth-child(#{$i}):last-child::after,
|
|
168
|
-
> li.nav-item:nth-child(#{$i}):last-child:hover::after {
|
|
169
|
-
@include fix-cursor($top);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
96
|
+
ol,
|
|
97
|
+
ul {
|
|
98
|
+
ol,
|
|
99
|
+
ul {
|
|
100
|
+
margin-bottom: 1rem;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
172
103
|
|
|
173
|
-
|
|
104
|
+
a {
|
|
105
|
+
@extend %link-color;
|
|
106
|
+
}
|
|
174
107
|
|
|
175
|
-
|
|
108
|
+
img {
|
|
109
|
+
max-width: 100%;
|
|
110
|
+
}
|
|
176
111
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
112
|
+
blockquote {
|
|
113
|
+
border-left: 5px solid var(--blockquote-border-color);
|
|
114
|
+
padding-left: 1rem;
|
|
115
|
+
color: var(--blockquote-text-color);
|
|
116
|
+
}
|
|
180
117
|
|
|
181
|
-
|
|
182
|
-
|
|
118
|
+
kbd {
|
|
119
|
+
margin: 0 0.3rem;
|
|
120
|
+
}
|
|
183
121
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
122
|
+
footer {
|
|
123
|
+
position: absolute;
|
|
124
|
+
bottom: 0;
|
|
125
|
+
padding: 0 1rem;
|
|
126
|
+
height: $footer-height;
|
|
127
|
+
font-size: 0.8rem;
|
|
128
|
+
color: #7a7b7d;
|
|
129
|
+
background-color: var(--footer-bg-color);
|
|
188
130
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
131
|
+
> div.d-flex {
|
|
132
|
+
line-height: 1.2rem;
|
|
133
|
+
width: 95%;
|
|
134
|
+
max-width: 1045px;
|
|
135
|
+
border-top: 1px solid var(--main-border-color);
|
|
136
|
+
margin-bottom: 1rem;
|
|
192
137
|
|
|
193
|
-
|
|
194
|
-
|
|
138
|
+
> div {
|
|
139
|
+
width: 350px;
|
|
195
140
|
}
|
|
141
|
+
}
|
|
196
142
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
@include sidebar-links;
|
|
202
|
-
margin: 0;
|
|
203
|
-
font-size: 1.05rem;
|
|
204
|
-
text-align: center;
|
|
205
|
-
position: relative;
|
|
206
|
-
bottom: 1px;
|
|
207
|
-
}
|
|
208
|
-
|
|
143
|
+
a {
|
|
144
|
+
color: var(--footer-link);
|
|
145
|
+
&:link {
|
|
146
|
+
@include no-text-decoration;
|
|
209
147
|
}
|
|
148
|
+
&:hover {
|
|
149
|
+
@extend %link-hover;
|
|
210
150
|
|
|
211
|
-
|
|
212
|
-
background-color: #525354;
|
|
213
|
-
content: "";
|
|
214
|
-
width: 3px;
|
|
215
|
-
height: 3px;
|
|
216
|
-
border-radius: 50%;
|
|
217
|
-
position: relative;
|
|
218
|
-
top: 12px;
|
|
151
|
+
@include no-text-decoration;
|
|
219
152
|
}
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
} // #sidebar
|
|
224
|
-
|
|
225
|
-
@media (hover: hover) {
|
|
226
|
-
#sidebar ul > li:last-child::after {
|
|
227
|
-
-webkit-transition: top 0.5s ease;
|
|
228
|
-
-moz-transition: top 0.5s ease;
|
|
229
|
-
-o-transition: top 0.5s ease;
|
|
230
|
-
transition: top 0.5s ease;
|
|
153
|
+
}
|
|
154
|
+
.footer-right {
|
|
155
|
+
text-align: right;
|
|
231
156
|
}
|
|
232
157
|
}
|
|
233
158
|
|
|
234
|
-
|
|
235
|
-
margin-top: 2rem;
|
|
236
|
-
width: 100%;
|
|
237
|
-
}
|
|
159
|
+
/* --- Panels --- */
|
|
238
160
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
border: 2px solid #b6b6b6;
|
|
246
|
-
overflow: hidden;
|
|
247
|
-
transform: translateZ(0); // fixed the zoom in Safari
|
|
248
|
-
-webkit-transition: border-color 0.35s ease-in-out;
|
|
249
|
-
-moz-transition: border-color 0.35s ease-in-out;
|
|
250
|
-
transition: border-color 0.35s ease-in-out;
|
|
251
|
-
}
|
|
161
|
+
.access {
|
|
162
|
+
top: 2rem;
|
|
163
|
+
transition: top 0.2s ease-in-out;
|
|
164
|
+
margin-right: 1.5rem;
|
|
165
|
+
margin-top: 3rem;
|
|
166
|
+
margin-bottom: 4rem;
|
|
252
167
|
|
|
253
|
-
&:
|
|
254
|
-
|
|
168
|
+
&:only-child {
|
|
169
|
+
position: -webkit-sticky; /* Safari */
|
|
170
|
+
position: sticky;
|
|
255
171
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
width: 100%;
|
|
259
|
-
height: 100%;
|
|
260
|
-
-webkit-transition: transform 0.5s;
|
|
261
|
-
-moz-transition: transform 0.5s;
|
|
262
|
-
transition: transform 0.5s;
|
|
263
|
-
|
|
264
|
-
&:hover {
|
|
265
|
-
-ms-transform: scale(1.2);
|
|
266
|
-
-moz-transform: scale(1.2);
|
|
267
|
-
-webkit-transform: scale(1.2);
|
|
268
|
-
transform: scale(1.2);
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
} // #avatar
|
|
272
|
-
|
|
273
|
-
#search-result-wrapper {
|
|
274
|
-
display: none;
|
|
275
|
-
position: fixed;
|
|
276
|
-
top: 0;
|
|
277
|
-
padding-top: 3rem;
|
|
278
|
-
height: 100%;
|
|
279
|
-
overflow: auto;
|
|
280
|
-
.post-content {
|
|
281
|
-
margin-top: 2rem;
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
/*--- top-bar ---*/
|
|
286
|
-
|
|
287
|
-
#topbar-wrapper {
|
|
288
|
-
height: $topbar-height;
|
|
289
|
-
position: fixed;
|
|
290
|
-
top: 0;
|
|
291
|
-
left: 260px; /* same as sidebar width */
|
|
292
|
-
right: 0;
|
|
293
|
-
transition: top 0.2s ease-in-out;
|
|
294
|
-
z-index: 50;
|
|
295
|
-
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
|
296
|
-
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
|
297
|
-
background-color: var(--topbar-wrapper-bg);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
#topbar i { // icons
|
|
301
|
-
color: #999;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
#breadcrumb {
|
|
305
|
-
font-size: 1rem;
|
|
306
|
-
color: gray;
|
|
307
|
-
padding-left: 0.5rem;
|
|
308
|
-
a:hover {
|
|
309
|
-
@extend %link-hover;
|
|
310
|
-
}
|
|
311
|
-
span {
|
|
312
|
-
&:not(:last-child) {
|
|
313
|
-
&::after {
|
|
314
|
-
content: "›";
|
|
315
|
-
padding: 0 0.3rem;
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
#sidebar-trigger,
|
|
322
|
-
#search-trigger {
|
|
323
|
-
display: none;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
#search-wrapper {
|
|
327
|
-
display: flex;
|
|
328
|
-
width: 95%;
|
|
329
|
-
border-radius: 1rem;
|
|
330
|
-
border: 1px solid var(--search-wrapper-bg);
|
|
331
|
-
background: var(--search-wrapper-bg);
|
|
332
|
-
padding: 0 0.5rem;
|
|
333
|
-
i {
|
|
334
|
-
z-index: 2;
|
|
335
|
-
font-size: 0.9rem;
|
|
336
|
-
color: var(--search-icon-color);
|
|
337
|
-
}
|
|
338
|
-
.fa-times-circle { /* button 'clean up' */
|
|
339
|
-
visibility: hidden;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
#search-cancel { /* 'Cancel' link */
|
|
344
|
-
color: var(--link-color);
|
|
345
|
-
margin-left: 1rem;
|
|
346
|
-
display: none;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
#search-input {
|
|
350
|
-
background: center;
|
|
351
|
-
border: 0;
|
|
352
|
-
border-radius: 0;
|
|
353
|
-
padding: 0.18rem 0.3rem;
|
|
354
|
-
color: var(--text-color);
|
|
355
|
-
font-size: 95%;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
#search-input {
|
|
359
|
-
&:focus {
|
|
360
|
-
box-shadow: none;
|
|
361
|
-
background: center;
|
|
362
|
-
&.form-control {
|
|
363
|
-
&::-webkit-input-placeholder { @include input-placeholder }
|
|
364
|
-
&::-moz-placeholder { @include input-placeholder }
|
|
365
|
-
&:-ms-input-placeholder { @include input-placeholder }
|
|
366
|
-
&::placeholder { @include input-placeholder }
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
#search-hints {
|
|
372
|
-
display: none;
|
|
373
|
-
.post-tag {
|
|
374
|
-
display: inline-block;
|
|
375
|
-
line-height: 1rem;
|
|
376
|
-
font-size: 1rem;
|
|
377
|
-
background: var(--search-tag-bg);
|
|
378
|
-
border: none;
|
|
379
|
-
padding: 0.5rem;
|
|
380
|
-
margin: 0 1rem 1rem 0;
|
|
381
|
-
&::before {
|
|
382
|
-
content: "#";
|
|
383
|
-
color: var(--text-muted-color);
|
|
384
|
-
padding-right: 0.2rem;
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
#search-results {
|
|
390
|
-
padding-bottom: 6rem;
|
|
391
|
-
a {
|
|
392
|
-
@extend %link-color;
|
|
393
|
-
@extend %no-bottom-border;
|
|
394
|
-
@extend %heading;
|
|
395
|
-
font-size: 1.4rem;
|
|
396
|
-
line-height: 2.5rem;
|
|
397
|
-
&:hover {
|
|
398
|
-
@extend %link-hover;
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
> div {
|
|
402
|
-
max-width: 100%;
|
|
403
|
-
&:not(:last-child) {
|
|
404
|
-
margin-bottom: 1rem;
|
|
405
|
-
}
|
|
406
|
-
i { // icons
|
|
407
|
-
color: #818182;
|
|
408
|
-
margin-right: 0.15rem;
|
|
409
|
-
font-size: 80%;
|
|
410
|
-
}
|
|
411
|
-
> p {
|
|
412
|
-
overflow: hidden;
|
|
413
|
-
text-overflow: ellipsis;
|
|
414
|
-
display: -webkit-box;
|
|
415
|
-
-webkit-line-clamp: 3;
|
|
416
|
-
-webkit-box-orient: vertical;
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
#topbar-title {
|
|
422
|
-
display: none;
|
|
423
|
-
font-size: 1.1rem;
|
|
424
|
-
font-weight: 600;
|
|
425
|
-
font-family: sans-serif;
|
|
426
|
-
color: var(--topbar-text-color);
|
|
427
|
-
text-align: center;
|
|
428
|
-
width: 70%;
|
|
429
|
-
overflow: hidden;
|
|
430
|
-
text-overflow: ellipsis;
|
|
431
|
-
word-break: keep-all;
|
|
432
|
-
white-space: nowrap;
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
#mask {
|
|
436
|
-
display: none;
|
|
437
|
-
position: fixed;
|
|
438
|
-
top: 0;
|
|
439
|
-
right: 0;
|
|
440
|
-
bottom: 0;
|
|
441
|
-
left: 0;
|
|
442
|
-
height: 100%;
|
|
443
|
-
width: 100%;
|
|
444
|
-
z-index: 1;
|
|
445
|
-
@at-root [#{$sidebar-display}] & {
|
|
446
|
-
display: block!important;
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
/*--- main wrapper ---*/
|
|
451
|
-
|
|
452
|
-
#main-wrapper {
|
|
453
|
-
background-color: var(--main-wrapper-bg);
|
|
454
|
-
position: relative;
|
|
455
|
-
min-height: 100vh;
|
|
456
|
-
padding-bottom: $footer-height;
|
|
457
|
-
@include pl-pr(0);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
#main > div.row:first-child > div {
|
|
461
|
-
&:nth-child(1), &:nth-child(2) {
|
|
462
|
-
margin-top: $topbar-height; /* same as the height of topbar */
|
|
463
|
-
}
|
|
464
|
-
&:first-child {
|
|
465
|
-
/* 3rem for topbar, 6rem for footer */
|
|
466
|
-
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
#post-wrapper {
|
|
471
|
-
min-height: calc(100vh - #{$topbar-height}
|
|
472
|
-
- #{$footer-height} - #{$post-extend-min-height})!important;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
#topbar-wrapper.row,
|
|
476
|
-
#main>.row,
|
|
477
|
-
#search-result-wrapper>.row {
|
|
478
|
-
@include ml-mr(0);
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
footer {
|
|
482
|
-
position: absolute;
|
|
483
|
-
bottom: 0;
|
|
484
|
-
padding: 0 1rem;
|
|
485
|
-
height: $footer-height;
|
|
486
|
-
font-size: 0.8rem;
|
|
487
|
-
color: #7a7b7d;
|
|
488
|
-
background-color: var(--footer-bg-color);
|
|
489
|
-
> div.d-flex {
|
|
490
|
-
line-height: 1.2rem;
|
|
491
|
-
width: 95%;
|
|
492
|
-
max-width: 1045px;
|
|
493
|
-
border-top: 1px solid var(--main-border-color);
|
|
494
|
-
margin-bottom: 1rem;
|
|
495
|
-
> div {
|
|
496
|
-
width: 350px;
|
|
497
|
-
}
|
|
498
|
-
}
|
|
499
|
-
a {
|
|
500
|
-
color: var(--footer-link);
|
|
501
|
-
&:link {
|
|
502
|
-
@include no-text-decoration;
|
|
503
|
-
}
|
|
504
|
-
&:hover {
|
|
505
|
-
@extend %link-hover;
|
|
506
|
-
@include no-text-decoration;
|
|
507
|
-
}
|
|
508
|
-
}
|
|
509
|
-
.footer-right {
|
|
510
|
-
text-align: right;
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
/*--- Panels ---*/
|
|
515
|
-
|
|
516
|
-
.access {
|
|
517
|
-
top: 2rem;
|
|
518
|
-
transition: top 0.2s ease-in-out;
|
|
519
|
-
margin-right: 1.5rem;
|
|
520
|
-
margin-top: 3rem;
|
|
521
|
-
margin-bottom: 4rem;
|
|
522
|
-
&:only-child {
|
|
523
|
-
position: -webkit-sticky; /* Safari */
|
|
524
|
-
position: sticky;
|
|
525
|
-
}
|
|
526
|
-
&.topbar-down {
|
|
527
|
-
top: 6rem;
|
|
172
|
+
&.topbar-down {
|
|
173
|
+
top: 6rem;
|
|
528
174
|
}
|
|
529
175
|
> div {
|
|
530
176
|
padding-left: 1rem;
|
|
@@ -541,11 +187,11 @@ footer {
|
|
|
541
187
|
}
|
|
542
188
|
}
|
|
543
189
|
|
|
544
|
-
|
|
545
190
|
#access-tags {
|
|
546
191
|
> div.post-content > div {
|
|
547
192
|
max-width: 80%;
|
|
548
193
|
}
|
|
194
|
+
|
|
549
195
|
.post-tag {
|
|
550
196
|
display: inline-block;
|
|
551
197
|
line-height: 1rem;
|
|
@@ -565,106 +211,28 @@ footer {
|
|
|
565
211
|
}
|
|
566
212
|
|
|
567
213
|
#access-lastmod {
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
}
|
|
578
|
-
a {
|
|
579
|
-
color: #6c757d;
|
|
580
|
-
}
|
|
214
|
+
|
|
215
|
+
li {
|
|
216
|
+
height: 1.8rem;
|
|
217
|
+
overflow: hidden;
|
|
218
|
+
text-overflow: ellipsis;
|
|
219
|
+
display: -webkit-box;
|
|
220
|
+
-webkit-line-clamp: 1;
|
|
221
|
+
-webkit-box-orient: vertical;
|
|
222
|
+
list-style: none;
|
|
581
223
|
}
|
|
582
224
|
|
|
583
225
|
a {
|
|
584
|
-
@extend %no-bottom-border;
|
|
585
226
|
&:hover {
|
|
586
227
|
@extend %link-hover;
|
|
587
228
|
}
|
|
229
|
+
|
|
230
|
+
@extend %no-bottom-border;
|
|
231
|
+
|
|
232
|
+
color: #6c757d;
|
|
588
233
|
}
|
|
589
|
-
}
|
|
590
234
|
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
#back-to-top {
|
|
594
|
-
display: none;
|
|
595
|
-
z-index: 1;
|
|
596
|
-
cursor: pointer;
|
|
597
|
-
position: fixed;
|
|
598
|
-
background: var(--button-bg);
|
|
599
|
-
color: var(--btn-backtotop-color);
|
|
600
|
-
height: 2.6em;
|
|
601
|
-
width: 2.7em;
|
|
602
|
-
border-radius: 50%;
|
|
603
|
-
border: 1px solid var(--btn-backtotop-border-color);
|
|
604
|
-
transition: 0.2s ease-out;
|
|
605
|
-
-webkit-transition: 0.2s ease-out;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
#back-to-top:hover {
|
|
609
|
-
transform: translate3d(0, -5px, 0);
|
|
610
|
-
-webkit-transform: translate3d(0, -5px, 0);
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
/*--- Typography ---*/
|
|
614
|
-
|
|
615
|
-
h1 {
|
|
616
|
-
@extend %heading;
|
|
617
|
-
font-size: 1.8rem;
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
h2 {
|
|
621
|
-
@extend %heading;
|
|
622
|
-
@extend %section;
|
|
623
|
-
@extend %anchor;
|
|
624
|
-
font-size: 1.4rem;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
h3 {
|
|
628
|
-
@extend %heading;
|
|
629
|
-
@extend %section;
|
|
630
|
-
@extend %anchor;
|
|
631
|
-
font-size: 1.25rem;
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
h4 {
|
|
635
|
-
@extend %heading;
|
|
636
|
-
@extend %section;
|
|
637
|
-
@extend %anchor;
|
|
638
|
-
font-size: 1.15rem;
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
h5 {
|
|
642
|
-
@extend %heading;
|
|
643
|
-
@extend %section;
|
|
644
|
-
@extend %anchor;
|
|
645
|
-
font-size: 1.1rem;
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
ol, ul {
|
|
649
|
-
ol, ul {
|
|
650
|
-
margin-bottom: 1rem;
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
blockquote {
|
|
655
|
-
border-left: 5px solid var(--blockquote-border-color);
|
|
656
|
-
padding-left: 1rem;
|
|
657
|
-
color: var(--blockquote-text-color);
|
|
658
|
-
.post-content & {
|
|
659
|
-
a {
|
|
660
|
-
color: var(--link-color);
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
kbd {
|
|
666
|
-
margin: 0 0.3rem;
|
|
667
|
-
}
|
|
235
|
+
}
|
|
668
236
|
|
|
669
237
|
.footnotes > ol {
|
|
670
238
|
padding-left: 2rem;
|
|
@@ -678,11 +246,12 @@ kbd {
|
|
|
678
246
|
margin-top: 0;
|
|
679
247
|
margin-bottom: 0;
|
|
680
248
|
}
|
|
681
|
-
|
|
249
|
+
// [scroll-focus] added by `smooth-scroll.js`
|
|
250
|
+
&:target:not([scroll-focus]),
|
|
251
|
+
&[scroll-focus=true] > p {
|
|
682
252
|
background-color: var(--footnote-target-bg);
|
|
683
253
|
width: fit-content;
|
|
684
|
-
-webkit-transition: background-color 1.5s ease-in-out;
|
|
685
|
-
/* Safari prior 6.1 */
|
|
254
|
+
-webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
|
|
686
255
|
transition: background-color 1.5s ease-in-out;
|
|
687
256
|
}
|
|
688
257
|
}
|
|
@@ -692,11 +261,15 @@ kbd {
|
|
|
692
261
|
@at-root a#{&} {
|
|
693
262
|
@include ml-mr(1px);
|
|
694
263
|
@include pl-pr(2px);
|
|
264
|
+
|
|
695
265
|
border-bottom-style: none !important;
|
|
696
|
-
-webkit-transition: background-color 1.5s ease-in-out;
|
|
266
|
+
-webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
|
|
697
267
|
transition: background-color 1.5s ease-in-out;
|
|
698
268
|
}
|
|
699
|
-
|
|
269
|
+
|
|
270
|
+
// [scroll-focus] added by `smooth-scroll.js`
|
|
271
|
+
@at-root sup:target:not([scroll-focus]),
|
|
272
|
+
sup[scroll-focus=true] > a#{&} {
|
|
700
273
|
background-color: var(--footnote-target-bg);
|
|
701
274
|
}
|
|
702
275
|
}
|
|
@@ -712,34 +285,6 @@ kbd {
|
|
|
712
285
|
}
|
|
713
286
|
}
|
|
714
287
|
|
|
715
|
-
a {
|
|
716
|
-
p > & {
|
|
717
|
-
@extend %link-color;
|
|
718
|
-
}
|
|
719
|
-
span > & {
|
|
720
|
-
@extend %link-color;
|
|
721
|
-
}
|
|
722
|
-
.post-preview & {
|
|
723
|
-
@extend %link-color;
|
|
724
|
-
&:hover {
|
|
725
|
-
@extend %link-hover;
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
.categories &,
|
|
729
|
-
#page-category &,
|
|
730
|
-
#tags &,
|
|
731
|
-
#archives & {
|
|
732
|
-
&:not(:hover) {
|
|
733
|
-
@extend %no-bottom-border;
|
|
734
|
-
}
|
|
735
|
-
}
|
|
736
|
-
|
|
737
|
-
} // a
|
|
738
|
-
|
|
739
|
-
img {
|
|
740
|
-
max-width: 100%;
|
|
741
|
-
}
|
|
742
|
-
|
|
743
288
|
.post {
|
|
744
289
|
h1 {
|
|
745
290
|
margin-top: 3rem;
|
|
@@ -755,8 +300,7 @@ img {
|
|
|
755
300
|
}
|
|
756
301
|
}
|
|
757
302
|
|
|
758
|
-
|
|
759
|
-
/*--- Begin of Markdown table style ---*/
|
|
303
|
+
/* --- Begin of Markdown table style --- */
|
|
760
304
|
|
|
761
305
|
.table-wrapper { // it will be created by Liquid
|
|
762
306
|
overflow-x: auto;
|
|
@@ -776,15 +320,13 @@ img {
|
|
|
776
320
|
|
|
777
321
|
tbody {
|
|
778
322
|
tr {
|
|
323
|
+
border-bottom: 1px solid var(--tb-border-color);
|
|
779
324
|
&:nth-child(2n) {
|
|
780
325
|
background-color: var(--tb-even-bg);
|
|
781
326
|
}
|
|
782
327
|
&:nth-child(2n + 1) {
|
|
783
328
|
background-color: var(--tb-odd-bg);
|
|
784
329
|
}
|
|
785
|
-
& {
|
|
786
|
-
border-bottom: 1px solid var(--tb-border-color);
|
|
787
|
-
}
|
|
788
330
|
td {
|
|
789
331
|
@extend %table-cell;
|
|
790
332
|
}
|
|
@@ -793,8 +335,7 @@ img {
|
|
|
793
335
|
}
|
|
794
336
|
}
|
|
795
337
|
|
|
796
|
-
|
|
797
|
-
/*--- post ---*/
|
|
338
|
+
/* --- post --- */
|
|
798
339
|
|
|
799
340
|
.pageviews .fa-spinner {
|
|
800
341
|
font-size: 80%;
|
|
@@ -839,7 +380,6 @@ img {
|
|
|
839
380
|
@mixin img($caption: false) {
|
|
840
381
|
|
|
841
382
|
> img[data-src] {
|
|
842
|
-
|
|
843
383
|
@if $caption {
|
|
844
384
|
@include img-caption;
|
|
845
385
|
}
|
|
@@ -858,6 +398,10 @@ img {
|
|
|
858
398
|
}
|
|
859
399
|
|
|
860
400
|
a {
|
|
401
|
+
blockquote & {
|
|
402
|
+
color: var(--link-color);
|
|
403
|
+
}
|
|
404
|
+
|
|
861
405
|
&:not(.img-hyperlink) {
|
|
862
406
|
@extend %link-color;
|
|
863
407
|
@extend %link-underline;
|
|
@@ -865,6 +409,7 @@ img {
|
|
|
865
409
|
@extend %link-hover;
|
|
866
410
|
}
|
|
867
411
|
}
|
|
412
|
+
|
|
868
413
|
&.img-hyperlink {
|
|
869
414
|
@include img;
|
|
870
415
|
@include img-caption;
|
|
@@ -878,159 +423,642 @@ img {
|
|
|
878
423
|
}
|
|
879
424
|
|
|
880
425
|
p {
|
|
881
|
-
font-size: 1.08rem;
|
|
882
426
|
@include img(true);
|
|
427
|
+
|
|
428
|
+
font-size: 1.08rem;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
ul {
|
|
432
|
+
// attribute 'hide-bullet' was added by liquid
|
|
433
|
+
.task-list-item[hide-bullet] {
|
|
434
|
+
list-style-type: none;
|
|
435
|
+
|
|
436
|
+
> i { // checkbox icon
|
|
437
|
+
margin: 0 0.4rem 0.2rem -1.4rem;
|
|
438
|
+
vertical-align: middle;
|
|
439
|
+
color: var(--checkbox-color);
|
|
440
|
+
&.checked {
|
|
441
|
+
color: var(--checkbox-checked-color);
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
input[type=checkbox] {
|
|
448
|
+
margin: 0 0.5rem 0.2rem -1.3rem;
|
|
449
|
+
vertical-align: middle;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
} // ul
|
|
453
|
+
|
|
454
|
+
> ol,
|
|
455
|
+
> ul {
|
|
456
|
+
padding-left: 2rem;
|
|
457
|
+
|
|
458
|
+
li {
|
|
459
|
+
+ li {
|
|
460
|
+
margin-top: 0.3rem;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
ol,
|
|
464
|
+
ul { // sub list
|
|
465
|
+
padding-left: 2rem;
|
|
466
|
+
margin-top: 0.3rem;
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
> ol {
|
|
473
|
+
li {
|
|
474
|
+
padding-left: 0.25em;
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
dl > dd {
|
|
479
|
+
margin-left: 1rem;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
} // .post-content
|
|
483
|
+
|
|
484
|
+
.tag:hover {
|
|
485
|
+
@extend %tag-hover;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.post-tag {
|
|
489
|
+
display: inline-block;
|
|
490
|
+
min-width: 2rem;
|
|
491
|
+
text-align: center;
|
|
492
|
+
background: var(--tag-bg);
|
|
493
|
+
border-radius: 0.3rem;
|
|
494
|
+
padding: 0 0.4rem;
|
|
495
|
+
color: inherit;
|
|
496
|
+
line-height: 1.3rem;
|
|
497
|
+
|
|
498
|
+
&:not(:last-child) {
|
|
499
|
+
margin-right: 0.2rem;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
&:hover {
|
|
503
|
+
@extend %tag-hover;
|
|
504
|
+
|
|
505
|
+
border-bottom: none;
|
|
506
|
+
text-decoration: none;
|
|
507
|
+
color: #d2603a;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* --- buttons --- */
|
|
512
|
+
.btn-lang {
|
|
513
|
+
border: 1px solid !important;
|
|
514
|
+
padding: 1px 3px;
|
|
515
|
+
border-radius: 3px;
|
|
516
|
+
color: var(--link-color);
|
|
517
|
+
&:focus {
|
|
518
|
+
box-shadow: none;
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
/* --- Effects classes --- */
|
|
523
|
+
|
|
524
|
+
.loaded {
|
|
525
|
+
display: block !important;
|
|
526
|
+
|
|
527
|
+
@at-root .d-flex#{&} {
|
|
528
|
+
display: flex !important;
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.unloaded {
|
|
533
|
+
display: none !important;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.visible {
|
|
537
|
+
visibility: visible !important;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.hidden {
|
|
541
|
+
visibility: hidden !important;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.flex-grow-1 {
|
|
545
|
+
-ms-flex-positive: 1 !important;
|
|
546
|
+
flex-grow: 1 !important;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.btn-box-shadow {
|
|
550
|
+
box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.topbar-up {
|
|
554
|
+
top: -3rem !important; /* same as topbar height. */
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.no-text-decoration {
|
|
558
|
+
@include no-text-decoration;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.tooltip-inner { /* Overrided BS4 Tooltip */
|
|
562
|
+
font-size: 0.7rem;
|
|
563
|
+
max-width: 220px;
|
|
564
|
+
text-align: left;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.disabled {
|
|
568
|
+
color: rgb(206, 196, 196);
|
|
569
|
+
pointer-events: auto;
|
|
570
|
+
cursor: not-allowed;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.hide-border-bottom {
|
|
574
|
+
border-bottom: none !important;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.input-focus {
|
|
578
|
+
box-shadow: none;
|
|
579
|
+
border-color: var(--input-focus-border-color) !important;
|
|
580
|
+
background: center !important;
|
|
581
|
+
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
/* --- sidebar layout --- */
|
|
585
|
+
|
|
586
|
+
$tab-count: 5 !default;
|
|
587
|
+
|
|
588
|
+
$sidebar-display: "sidebar-display";
|
|
589
|
+
|
|
590
|
+
#sidebar {
|
|
591
|
+
@include pl-pr(0);
|
|
592
|
+
|
|
593
|
+
position: fixed;
|
|
594
|
+
top: 0;
|
|
595
|
+
left: 0;
|
|
596
|
+
height: 100%;
|
|
597
|
+
overflow-y: auto;
|
|
598
|
+
width: $sidebar-width-medium;
|
|
599
|
+
z-index: 99;
|
|
600
|
+
background: var(--sidebar-bg);
|
|
601
|
+
|
|
602
|
+
a {
|
|
603
|
+
@include sidebar-links;
|
|
604
|
+
|
|
605
|
+
&:hover {
|
|
606
|
+
@include no-text-decoration;
|
|
607
|
+
|
|
608
|
+
color: #fff;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
#avatar {
|
|
613
|
+
&:hover > a {
|
|
614
|
+
border-color: #fff;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
> a {
|
|
618
|
+
display: block;
|
|
619
|
+
width: 6rem;
|
|
620
|
+
height: 6rem;
|
|
621
|
+
border-radius: 50%;
|
|
622
|
+
border: 2px solid #b6b6b6;
|
|
623
|
+
overflow: hidden;
|
|
624
|
+
transform: translateZ(0); // fixed the zoom in Safari
|
|
625
|
+
-webkit-transition: border-color 0.35s ease-in-out;
|
|
626
|
+
-moz-transition: border-color 0.35s ease-in-out;
|
|
627
|
+
transition: border-color 0.35s ease-in-out;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
img {
|
|
631
|
+
width: 100%;
|
|
632
|
+
height: 100%;
|
|
633
|
+
-webkit-transition: transform 0.5s;
|
|
634
|
+
-moz-transition: transform 0.5s;
|
|
635
|
+
transition: transform 0.5s;
|
|
636
|
+
|
|
637
|
+
&:hover {
|
|
638
|
+
-ms-transform: scale(1.2);
|
|
639
|
+
-moz-transform: scale(1.2);
|
|
640
|
+
-webkit-transform: scale(1.2);
|
|
641
|
+
transform: scale(1.2);
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
} // #avatar
|
|
645
|
+
|
|
646
|
+
.site-title {
|
|
647
|
+
a {
|
|
648
|
+
font-weight: 900;
|
|
649
|
+
font-size: 1.5rem;
|
|
650
|
+
letter-spacing: 0.5px;
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.site-subtitle {
|
|
655
|
+
font-size: 95%;
|
|
656
|
+
color: #828282;
|
|
657
|
+
line-height: 1.2rem;
|
|
658
|
+
word-spacing: 1px;
|
|
659
|
+
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
|
660
|
+
min-height: 3rem; // avoid vertical shifting in multi-line words
|
|
661
|
+
user-select: none;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.nav-link {
|
|
665
|
+
border-radius: 0;
|
|
666
|
+
font-size: 0.95rem;
|
|
667
|
+
font-weight: 600;
|
|
668
|
+
letter-spacing: 1px;
|
|
669
|
+
display: table-cell;
|
|
670
|
+
vertical-align: middle;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
.nav-item {
|
|
674
|
+
text-align: center;
|
|
675
|
+
display: table;
|
|
676
|
+
height: $tab-height;
|
|
677
|
+
&:hover {
|
|
678
|
+
.nav-link {
|
|
679
|
+
color: #f8f9facf;
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
&.active {
|
|
683
|
+
.nav-link {
|
|
684
|
+
color: #fcfcfc;
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
ul {
|
|
690
|
+
height: $tab-height * $tab-count;
|
|
691
|
+
margin-bottom: 2rem;
|
|
692
|
+
padding-left: 0;
|
|
693
|
+
|
|
694
|
+
li {
|
|
695
|
+
width: 100%;
|
|
696
|
+
|
|
697
|
+
&:last-child {
|
|
698
|
+
$cursor-width: 3px;
|
|
699
|
+
|
|
700
|
+
a {
|
|
701
|
+
position: relative;
|
|
702
|
+
left: $cursor-width / 2;
|
|
703
|
+
width: 100%;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
&::after { // the cursor
|
|
707
|
+
display: table;
|
|
708
|
+
visibility: hidden;
|
|
709
|
+
content: "";
|
|
710
|
+
position: relative;
|
|
711
|
+
right: 1px;
|
|
712
|
+
width: $cursor-width;
|
|
713
|
+
height: $tab-cursor-height;
|
|
714
|
+
border-radius: 1px;
|
|
715
|
+
background-color: var(--nav-cursor-color);
|
|
716
|
+
pointer-events: none;
|
|
717
|
+
}
|
|
718
|
+
}
|
|
719
|
+
} // li
|
|
720
|
+
|
|
721
|
+
@mixin fix-cursor($top) {
|
|
722
|
+
top: $top;
|
|
723
|
+
visibility: visible;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
@for $i from 1 through $tab-count {
|
|
727
|
+
$offset: $tab-count - $i;
|
|
728
|
+
$top: -$offset * $tab-height + $tab-cursor-height / 2;
|
|
729
|
+
|
|
730
|
+
@if $i < $tab-count {
|
|
731
|
+
> li.active:nth-child(#{$i}),
|
|
732
|
+
> li.nav-item:nth-child(#{$i}):hover {
|
|
733
|
+
~li:last-child::after {
|
|
734
|
+
@include fix-cursor($top);
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
} @else {
|
|
738
|
+
> li.active:nth-child(#{$i}):last-child::after,
|
|
739
|
+
> li.nav-item:nth-child(#{$i}):last-child:hover::after {
|
|
740
|
+
@include fix-cursor($top);
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
} // @for
|
|
745
|
+
|
|
746
|
+
} // ul
|
|
747
|
+
|
|
748
|
+
.sidebar-bottom {
|
|
749
|
+
font-size: 1.2rem;
|
|
750
|
+
margin-bottom: 2.1rem;
|
|
751
|
+
|
|
752
|
+
@include ml-mr(auto);
|
|
753
|
+
@include pl-pr(1rem);
|
|
754
|
+
|
|
755
|
+
%icon {
|
|
756
|
+
width: 2.4rem;
|
|
757
|
+
text-align: center;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
a {
|
|
761
|
+
@extend %icon;
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
#mode-toggle-wrapper {
|
|
765
|
+
@extend %icon;
|
|
766
|
+
|
|
767
|
+
i {
|
|
768
|
+
@include sidebar-links;
|
|
769
|
+
|
|
770
|
+
margin: 0;
|
|
771
|
+
font-size: 1.05rem;
|
|
772
|
+
text-align: center;
|
|
773
|
+
position: relative;
|
|
774
|
+
bottom: 1px;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.icon-border {
|
|
780
|
+
background-color: #525354;
|
|
781
|
+
content: "";
|
|
782
|
+
width: 3px;
|
|
783
|
+
height: 3px;
|
|
784
|
+
border-radius: 50%;
|
|
785
|
+
position: relative;
|
|
786
|
+
top: 12px;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
a:hover,
|
|
790
|
+
#mode-toggle-wrapper i:hover {
|
|
791
|
+
color: #fff;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
} // .sidebar-bottom
|
|
795
|
+
|
|
796
|
+
} // #sidebar
|
|
797
|
+
|
|
798
|
+
@media (hover: hover) {
|
|
799
|
+
#sidebar ul > li:last-child::after {
|
|
800
|
+
-webkit-transition: top 0.5s ease;
|
|
801
|
+
-moz-transition: top 0.5s ease;
|
|
802
|
+
-o-transition: top 0.5s ease;
|
|
803
|
+
transition: top 0.5s ease;
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.profile-wrapper {
|
|
808
|
+
margin-top: 2rem;
|
|
809
|
+
width: 100%;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
#search-result-wrapper {
|
|
813
|
+
display: none;
|
|
814
|
+
height: 100%;
|
|
815
|
+
overflow: auto;
|
|
816
|
+
.post-content {
|
|
817
|
+
margin-top: 2rem;
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
/* --- top-bar --- */
|
|
822
|
+
|
|
823
|
+
#topbar-wrapper {
|
|
824
|
+
height: $topbar-height;
|
|
825
|
+
position: fixed;
|
|
826
|
+
top: 0;
|
|
827
|
+
left: 260px; /* same as sidebar width */
|
|
828
|
+
right: 0;
|
|
829
|
+
transition: top 0.2s ease-in-out;
|
|
830
|
+
z-index: 50;
|
|
831
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
|
832
|
+
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
|
833
|
+
background-color: var(--topbar-wrapper-bg);
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
#topbar {
|
|
837
|
+
i { // icons
|
|
838
|
+
color: #999;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
#breadcrumb {
|
|
842
|
+
font-size: 1rem;
|
|
843
|
+
color: gray;
|
|
844
|
+
padding-left: 0.5rem;
|
|
845
|
+
|
|
846
|
+
a:hover {
|
|
847
|
+
@extend %link-hover;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
span {
|
|
851
|
+
&:not(:last-child) {
|
|
852
|
+
&::after {
|
|
853
|
+
content: "›";
|
|
854
|
+
padding: 0 0.3rem;
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
} // #topbar
|
|
860
|
+
|
|
861
|
+
#sidebar-trigger,
|
|
862
|
+
#search-trigger {
|
|
863
|
+
display: none;
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
#search-wrapper {
|
|
867
|
+
display: flex;
|
|
868
|
+
width: 95%;
|
|
869
|
+
border-radius: 1rem;
|
|
870
|
+
border: 1px solid var(--search-wrapper-bg);
|
|
871
|
+
background: var(--search-wrapper-bg);
|
|
872
|
+
padding: 0 0.5rem;
|
|
873
|
+
i {
|
|
874
|
+
z-index: 2;
|
|
875
|
+
font-size: 0.9rem;
|
|
876
|
+
color: var(--search-icon-color);
|
|
877
|
+
}
|
|
878
|
+
.fa-times-circle { /* button 'clean up' */
|
|
879
|
+
visibility: hidden;
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
#search-cancel { /* 'Cancel' link */
|
|
884
|
+
color: var(--link-color);
|
|
885
|
+
margin-left: 1rem;
|
|
886
|
+
display: none;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
#search-input {
|
|
890
|
+
background: center;
|
|
891
|
+
border: 0;
|
|
892
|
+
border-radius: 0;
|
|
893
|
+
padding: 0.18rem 0.3rem;
|
|
894
|
+
color: var(--text-color);
|
|
895
|
+
font-size: 95%;
|
|
896
|
+
|
|
897
|
+
&:focus {
|
|
898
|
+
box-shadow: none;
|
|
899
|
+
background: center;
|
|
900
|
+
&.form-control {
|
|
901
|
+
&::-webkit-input-placeholder { @include input-placeholder; }
|
|
902
|
+
&::-moz-placeholder { @include input-placeholder; }
|
|
903
|
+
&:-ms-input-placeholder { @include input-placeholder; }
|
|
904
|
+
&::placeholder { @include input-placeholder; }
|
|
905
|
+
}
|
|
883
906
|
}
|
|
907
|
+
}
|
|
884
908
|
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
.task-list-item[hide-bullet] {
|
|
888
|
-
list-style-type: none;
|
|
889
|
-
|
|
890
|
-
> i { // checkbox icon
|
|
891
|
-
margin: 0 0.4rem 0.2rem -1.4rem;
|
|
892
|
-
vertical-align: middle;
|
|
893
|
-
color: var(--checkbox-color);
|
|
894
|
-
&.checked {
|
|
895
|
-
color: var(--checkbox-checked-color);
|
|
896
|
-
}
|
|
897
|
-
}
|
|
909
|
+
#search-hints {
|
|
910
|
+
display: none;
|
|
898
911
|
|
|
912
|
+
.post-tag {
|
|
913
|
+
display: inline-block;
|
|
914
|
+
line-height: 1rem;
|
|
915
|
+
font-size: 1rem;
|
|
916
|
+
background: var(--search-tag-bg);
|
|
917
|
+
border: none;
|
|
918
|
+
padding: 0.5rem;
|
|
919
|
+
margin: 0 1rem 1rem 0;
|
|
920
|
+
&::before {
|
|
921
|
+
content: "#";
|
|
922
|
+
color: var(--text-muted-color);
|
|
923
|
+
padding-right: 0.2rem;
|
|
899
924
|
}
|
|
925
|
+
}
|
|
926
|
+
}
|
|
900
927
|
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
928
|
+
#search-results {
|
|
929
|
+
padding-bottom: 6rem;
|
|
930
|
+
a {
|
|
931
|
+
&:hover {
|
|
932
|
+
@extend %link-hover;
|
|
904
933
|
}
|
|
905
934
|
|
|
906
|
-
|
|
935
|
+
@extend %link-color;
|
|
936
|
+
@extend %no-bottom-border;
|
|
937
|
+
@extend %heading;
|
|
907
938
|
|
|
908
|
-
|
|
909
|
-
|
|
939
|
+
font-size: 1.4rem;
|
|
940
|
+
line-height: 2.5rem;
|
|
941
|
+
}
|
|
910
942
|
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
margin-top: 0.3rem;
|
|
914
|
-
}
|
|
943
|
+
> div {
|
|
944
|
+
width: 100%;
|
|
915
945
|
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
margin-top: 0.3rem;
|
|
919
|
-
}
|
|
946
|
+
&:not(:last-child) {
|
|
947
|
+
margin-bottom: 1rem;
|
|
920
948
|
}
|
|
921
949
|
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
padding-left: 0.25em;
|
|
950
|
+
i { // icons
|
|
951
|
+
color: #818182;
|
|
952
|
+
margin-right: 0.15rem;
|
|
953
|
+
font-size: 80%;
|
|
927
954
|
}
|
|
928
|
-
}
|
|
929
955
|
|
|
930
|
-
|
|
931
|
-
|
|
956
|
+
> p {
|
|
957
|
+
overflow: hidden;
|
|
958
|
+
text-overflow: ellipsis;
|
|
959
|
+
display: -webkit-box;
|
|
960
|
+
-webkit-line-clamp: 3;
|
|
961
|
+
-webkit-box-orient: vertical;
|
|
962
|
+
}
|
|
932
963
|
}
|
|
964
|
+
} // #search-results
|
|
933
965
|
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
.post-tag {
|
|
941
|
-
display: inline-block;
|
|
942
|
-
min-width: 2rem;
|
|
966
|
+
#topbar-title {
|
|
967
|
+
display: none;
|
|
968
|
+
font-size: 1.1rem;
|
|
969
|
+
font-weight: 600;
|
|
970
|
+
font-family: sans-serif;
|
|
971
|
+
color: var(--topbar-text-color);
|
|
943
972
|
text-align: center;
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
&:not(:last-child) {
|
|
950
|
-
margin-right: 0.2rem;
|
|
951
|
-
}
|
|
952
|
-
|
|
953
|
-
&:hover {
|
|
954
|
-
@extend %tag-hover;
|
|
955
|
-
border-bottom: none;
|
|
956
|
-
text-decoration: none;
|
|
957
|
-
color: #d2603a;
|
|
958
|
-
}
|
|
973
|
+
width: 70%;
|
|
974
|
+
overflow: hidden;
|
|
975
|
+
text-overflow: ellipsis;
|
|
976
|
+
word-break: keep-all;
|
|
977
|
+
white-space: nowrap;
|
|
959
978
|
}
|
|
960
979
|
|
|
961
|
-
|
|
962
|
-
.
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
box-shadow: none;
|
|
980
|
+
#page {
|
|
981
|
+
.categories,
|
|
982
|
+
#tags,
|
|
983
|
+
#archives {
|
|
984
|
+
a:not(:hover) {
|
|
985
|
+
@extend %no-bottom-border;
|
|
986
|
+
}
|
|
969
987
|
}
|
|
970
988
|
}
|
|
971
989
|
|
|
972
|
-
|
|
990
|
+
#mask {
|
|
991
|
+
display: none;
|
|
992
|
+
position: fixed;
|
|
993
|
+
top: 0;
|
|
994
|
+
right: 0;
|
|
995
|
+
bottom: 0;
|
|
996
|
+
left: 0;
|
|
997
|
+
height: 100%;
|
|
998
|
+
width: 100%;
|
|
999
|
+
z-index: 1;
|
|
973
1000
|
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
@at-root .d-flex#{&} {
|
|
977
|
-
display: flex !important;
|
|
1001
|
+
@at-root [#{$sidebar-display}] & {
|
|
1002
|
+
display: block !important;
|
|
978
1003
|
}
|
|
979
1004
|
}
|
|
980
1005
|
|
|
981
|
-
|
|
982
|
-
display: none !important;
|
|
983
|
-
}
|
|
984
|
-
|
|
985
|
-
.visible {
|
|
986
|
-
visibility: visible !important;
|
|
987
|
-
}
|
|
988
|
-
|
|
989
|
-
.hidden {
|
|
990
|
-
visibility: hidden !important;
|
|
991
|
-
}
|
|
1006
|
+
/* --- main wrapper --- */
|
|
992
1007
|
|
|
993
|
-
|
|
994
|
-
-
|
|
995
|
-
|
|
996
|
-
|
|
1008
|
+
#main-wrapper {
|
|
1009
|
+
background-color: var(--main-wrapper-bg);
|
|
1010
|
+
position: relative;
|
|
1011
|
+
min-height: 100vh;
|
|
1012
|
+
padding-bottom: $footer-height;
|
|
997
1013
|
|
|
998
|
-
|
|
999
|
-
box-shadow: 0 0 8px 0 var(--btn-box-shadow)!important;
|
|
1014
|
+
@include pl-pr(0);
|
|
1000
1015
|
}
|
|
1001
1016
|
|
|
1002
|
-
.
|
|
1003
|
-
|
|
1017
|
+
#main > div.row:first-child > div {
|
|
1018
|
+
&:nth-child(1),
|
|
1019
|
+
&:nth-child(2) {
|
|
1020
|
+
margin-top: $topbar-height; /* same as the height of topbar */
|
|
1021
|
+
}
|
|
1022
|
+
&:first-child {
|
|
1023
|
+
/* 3rem for topbar, 6rem for footer */
|
|
1024
|
+
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
|
|
1025
|
+
}
|
|
1004
1026
|
}
|
|
1005
1027
|
|
|
1006
|
-
|
|
1007
|
-
|
|
1028
|
+
#post-wrapper {
|
|
1029
|
+
min-height: calc(
|
|
1030
|
+
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
|
1008
1031
|
}
|
|
1009
1032
|
|
|
1010
|
-
.
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1033
|
+
#topbar-wrapper.row,
|
|
1034
|
+
#main > .row,
|
|
1035
|
+
#search-result-wrapper > .row {
|
|
1036
|
+
@include ml-mr(0);
|
|
1014
1037
|
}
|
|
1015
1038
|
|
|
1016
|
-
|
|
1017
|
-
color: rgb(206, 196, 196);
|
|
1018
|
-
pointer-events: auto;
|
|
1019
|
-
cursor: not-allowed;
|
|
1020
|
-
}
|
|
1039
|
+
/* --- button back-to-top --- */
|
|
1021
1040
|
|
|
1022
|
-
|
|
1023
|
-
|
|
1041
|
+
#back-to-top {
|
|
1042
|
+
display: none;
|
|
1043
|
+
z-index: 1;
|
|
1044
|
+
cursor: pointer;
|
|
1045
|
+
position: fixed;
|
|
1046
|
+
background: var(--button-bg);
|
|
1047
|
+
color: var(--btn-backtotop-color);
|
|
1048
|
+
height: 2.6em;
|
|
1049
|
+
width: 2.7em;
|
|
1050
|
+
border-radius: 50%;
|
|
1051
|
+
border: 1px solid var(--btn-backtotop-border-color);
|
|
1052
|
+
transition: 0.2s ease-out;
|
|
1053
|
+
-webkit-transition: 0.2s ease-out;
|
|
1024
1054
|
}
|
|
1025
1055
|
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
background: center !important;
|
|
1030
|
-
transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out;
|
|
1056
|
+
#back-to-top:hover {
|
|
1057
|
+
transform: translate3d(0, -5px, 0);
|
|
1058
|
+
-webkit-transform: translate3d(0, -5px, 0);
|
|
1031
1059
|
}
|
|
1032
1060
|
|
|
1033
|
-
|
|
1061
|
+
/* --- Responsive Design --- */
|
|
1034
1062
|
|
|
1035
1063
|
@media all and (max-width: 576px) {
|
|
1036
1064
|
|
|
@@ -1041,8 +1069,8 @@ img {
|
|
|
1041
1069
|
}
|
|
1042
1070
|
|
|
1043
1071
|
#post-wrapper {
|
|
1044
|
-
min-height: calc(
|
|
1045
|
-
- #{$footer-height} - #{$post-extend-min-height}) !important;
|
|
1072
|
+
min-height: calc(
|
|
1073
|
+
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
|
1046
1074
|
h1 {
|
|
1047
1075
|
margin-top: 2.2rem;
|
|
1048
1076
|
font-size: 1.55rem;
|
|
@@ -1069,18 +1097,17 @@ img {
|
|
|
1069
1097
|
padding: 1.5rem 0;
|
|
1070
1098
|
margin-bottom: 0.3rem;
|
|
1071
1099
|
flex-wrap: wrap;
|
|
1072
|
-
|
|
1073
|
-
-
|
|
1074
|
-
justify-content: space-around!important;
|
|
1100
|
+
-ms-flex-pack: distribute !important;
|
|
1101
|
+
justify-content: space-around !important;
|
|
1075
1102
|
}
|
|
1076
|
-
.footer-left,
|
|
1103
|
+
.footer-left,
|
|
1104
|
+
.footer-right {
|
|
1077
1105
|
text-align: center;
|
|
1078
1106
|
}
|
|
1079
1107
|
}
|
|
1080
1108
|
|
|
1081
1109
|
}
|
|
1082
1110
|
|
|
1083
|
-
|
|
1084
1111
|
/* Hide Sidebar and TOC */
|
|
1085
1112
|
@media all and (max-width: 830px) {
|
|
1086
1113
|
%slide {
|
|
@@ -1088,10 +1115,19 @@ img {
|
|
|
1088
1115
|
transition: transform 0.4s ease;
|
|
1089
1116
|
}
|
|
1090
1117
|
|
|
1091
|
-
html,
|
|
1118
|
+
html,
|
|
1119
|
+
body {
|
|
1092
1120
|
overflow-x: hidden;
|
|
1093
1121
|
}
|
|
1094
1122
|
|
|
1123
|
+
.footnotes ol > li {
|
|
1124
|
+
padding-top: 3.5rem;
|
|
1125
|
+
margin-top: -3.2rem;
|
|
1126
|
+
&:first-child {
|
|
1127
|
+
margin-top: -3.5rem;
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1095
1131
|
[#{$sidebar-display}] {
|
|
1096
1132
|
|
|
1097
1133
|
#sidebar {
|
|
@@ -1118,12 +1154,9 @@ img {
|
|
|
1118
1154
|
}
|
|
1119
1155
|
}
|
|
1120
1156
|
|
|
1121
|
-
#topbar-wrapper {
|
|
1122
|
-
@extend %slide;
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
1157
|
#main-wrapper {
|
|
1126
1158
|
@extend %slide;
|
|
1159
|
+
|
|
1127
1160
|
padding-top: $topbar-height;
|
|
1128
1161
|
}
|
|
1129
1162
|
|
|
@@ -1131,19 +1164,14 @@ img {
|
|
|
1131
1164
|
width: 100%;
|
|
1132
1165
|
}
|
|
1133
1166
|
|
|
1134
|
-
#page h1.dynamic-title {
|
|
1135
|
-
display: none;
|
|
1136
|
-
~.post-content {
|
|
1137
|
-
margin-top: 3rem;
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
|
|
1141
1167
|
#breadcrumb,
|
|
1142
1168
|
#search-wrapper {
|
|
1143
1169
|
display: none;
|
|
1144
1170
|
}
|
|
1145
1171
|
|
|
1146
1172
|
#topbar-wrapper {
|
|
1173
|
+
@extend %slide;
|
|
1174
|
+
|
|
1147
1175
|
left: 0;
|
|
1148
1176
|
}
|
|
1149
1177
|
|
|
@@ -1186,31 +1214,28 @@ img {
|
|
|
1186
1214
|
}
|
|
1187
1215
|
|
|
1188
1216
|
#tags {
|
|
1189
|
-
-webkit-box-pack: center!important;
|
|
1190
|
-
-ms-flex-pack: center!important;
|
|
1191
|
-
justify-content: center!important;
|
|
1217
|
+
-webkit-box-pack: center !important;
|
|
1218
|
+
-ms-flex-pack: center !important;
|
|
1219
|
+
justify-content: center !important;
|
|
1192
1220
|
}
|
|
1193
1221
|
|
|
1194
|
-
.
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
margin-top: -3.5rem;
|
|
1222
|
+
#page h1.dynamic-title {
|
|
1223
|
+
display: none;
|
|
1224
|
+
~ .post-content {
|
|
1225
|
+
margin-top: 3rem;
|
|
1199
1226
|
}
|
|
1200
1227
|
}
|
|
1201
|
-
}
|
|
1202
1228
|
|
|
1229
|
+
}
|
|
1203
1230
|
|
|
1204
1231
|
@media all and (min-width: 577px) and (max-width: 1199px) {
|
|
1205
|
-
footer
|
|
1232
|
+
footer > .d-flex > div {
|
|
1206
1233
|
width: 312px;
|
|
1207
1234
|
}
|
|
1208
1235
|
}
|
|
1209
1236
|
|
|
1210
|
-
|
|
1211
1237
|
/* Sidebar visible */
|
|
1212
1238
|
@media all and (min-width: 831px) {
|
|
1213
|
-
|
|
1214
1239
|
/* Solved jumping scrollbar */
|
|
1215
1240
|
html {
|
|
1216
1241
|
overflow-y: scroll;
|
|
@@ -1229,6 +1254,10 @@ img {
|
|
|
1229
1254
|
min-width: 150px;
|
|
1230
1255
|
}
|
|
1231
1256
|
|
|
1257
|
+
#search-result-wrapper {
|
|
1258
|
+
margin-top: 3rem;
|
|
1259
|
+
}
|
|
1260
|
+
|
|
1232
1261
|
div.post-content .table-wrapper > table {
|
|
1233
1262
|
min-width: 70%;
|
|
1234
1263
|
}
|
|
@@ -1269,7 +1298,8 @@ img {
|
|
|
1269
1298
|
#sidebar {
|
|
1270
1299
|
width: $sidebar-width-small;
|
|
1271
1300
|
.sidebar-bottom {
|
|
1272
|
-
a,
|
|
1301
|
+
a,
|
|
1302
|
+
span {
|
|
1273
1303
|
width: 2rem;
|
|
1274
1304
|
}
|
|
1275
1305
|
.icon-border {
|
|
@@ -1282,22 +1312,19 @@ img {
|
|
|
1282
1312
|
left: 210px;
|
|
1283
1313
|
}
|
|
1284
1314
|
|
|
1285
|
-
#search-result-wrapper {
|
|
1286
|
-
width: calc(100% - 210px);
|
|
1287
|
-
}
|
|
1288
|
-
|
|
1289
1315
|
#search-results > div {
|
|
1290
1316
|
max-width: 700px;
|
|
1291
1317
|
}
|
|
1292
1318
|
|
|
1293
1319
|
.site-title {
|
|
1294
1320
|
font-size: 1.3rem;
|
|
1295
|
-
margin-left: 0!important;
|
|
1321
|
+
margin-left: 0 !important;
|
|
1296
1322
|
}
|
|
1297
1323
|
|
|
1298
1324
|
.site-subtitle {
|
|
1299
|
-
font-size: 90%;
|
|
1300
1325
|
@include ml-mr(1rem);
|
|
1326
|
+
|
|
1327
|
+
font-size: 90%;
|
|
1301
1328
|
}
|
|
1302
1329
|
|
|
1303
1330
|
#main-wrapper {
|
|
@@ -1325,14 +1352,13 @@ img {
|
|
|
1325
1352
|
}
|
|
1326
1353
|
|
|
1327
1354
|
#main > div.row {
|
|
1328
|
-
-webkit-box-pack: center!important;
|
|
1329
|
-
-ms-flex-pack: center!important;
|
|
1330
|
-
justify-content: center!important;
|
|
1355
|
+
-webkit-box-pack: center !important;
|
|
1356
|
+
-ms-flex-pack: center !important;
|
|
1357
|
+
justify-content: center !important;
|
|
1331
1358
|
}
|
|
1332
1359
|
}
|
|
1333
1360
|
|
|
1334
|
-
|
|
1335
|
-
/*--- desktop mode, both sidebar and panel are visible ---*/
|
|
1361
|
+
/* --- desktop mode, both sidebar and panel are visible --- */
|
|
1336
1362
|
|
|
1337
1363
|
@media all and (min-width: 1200px) {
|
|
1338
1364
|
|
|
@@ -1363,12 +1389,8 @@ img {
|
|
|
1363
1389
|
transition: all 0.3s ease-in-out;
|
|
1364
1390
|
}
|
|
1365
1391
|
|
|
1366
|
-
#search-result-wrapper {
|
|
1367
|
-
width: calc(100% - 260px);
|
|
1368
|
-
}
|
|
1369
|
-
|
|
1370
1392
|
#search-results > div {
|
|
1371
|
-
|
|
1393
|
+
width: 46%;
|
|
1372
1394
|
&:nth-child(odd) {
|
|
1373
1395
|
margin-right: 1.5rem;
|
|
1374
1396
|
}
|
|
@@ -1482,6 +1504,7 @@ img {
|
|
|
1482
1504
|
|
|
1483
1505
|
.site-title {
|
|
1484
1506
|
@extend %profile-ml;
|
|
1507
|
+
|
|
1485
1508
|
a {
|
|
1486
1509
|
font-size: 1.7rem;
|
|
1487
1510
|
letter-spacing: 1px;
|
|
@@ -1490,6 +1513,7 @@ img {
|
|
|
1490
1513
|
|
|
1491
1514
|
.site-subtitle {
|
|
1492
1515
|
@extend %profile-ml;
|
|
1516
|
+
|
|
1493
1517
|
word-spacing: 0;
|
|
1494
1518
|
margin-top: 0.3rem;
|
|
1495
1519
|
}
|
|
@@ -1537,9 +1561,9 @@ img {
|
|
|
1537
1561
|
width: 100%;
|
|
1538
1562
|
|
|
1539
1563
|
&.justify-content-center {
|
|
1540
|
-
-webkit-box-pack: start!important;
|
|
1541
|
-
-ms-flex-pack: start!important;
|
|
1542
|
-
justify-content: flex-start!important;
|
|
1564
|
+
-webkit-box-pack: start !important;
|
|
1565
|
+
-ms-flex-pack: start !important;
|
|
1566
|
+
justify-content: flex-start !important;
|
|
1543
1567
|
}
|
|
1544
1568
|
|
|
1545
1569
|
a {
|
|
@@ -1549,6 +1573,7 @@ img {
|
|
|
1549
1573
|
|
|
1550
1574
|
i {
|
|
1551
1575
|
@include icon-round(2rem);
|
|
1576
|
+
|
|
1552
1577
|
padding-top: 0.44rem;
|
|
1553
1578
|
margin-top: .7rem; // multi line space
|
|
1554
1579
|
bottom: 0;
|
|
@@ -1576,7 +1601,6 @@ img {
|
|
|
1576
1601
|
}
|
|
1577
1602
|
|
|
1578
1603
|
#search-result-wrapper {
|
|
1579
|
-
width: calc(100% - #{$sidebar-width-large});
|
|
1580
1604
|
> div {
|
|
1581
1605
|
max-width: #{$main-content-max-width};
|
|
1582
1606
|
}
|
|
@@ -1584,15 +1608,14 @@ img {
|
|
|
1584
1608
|
|
|
1585
1609
|
} // min-width: 1650px
|
|
1586
1610
|
|
|
1587
|
-
|
|
1588
1611
|
@media all and (min-width: 1700px) {
|
|
1589
1612
|
#topbar-wrapper {
|
|
1590
|
-
|
|
1591
|
-
|
|
1613
|
+
/* 100% - 350px - (1920px - 350px); */
|
|
1614
|
+
padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
|
|
1592
1615
|
}
|
|
1593
1616
|
|
|
1594
1617
|
#topbar {
|
|
1595
|
-
max-width: calc(#{$main-content-max-width} + 20px)
|
|
1618
|
+
max-width: calc(#{$main-content-max-width} + 20px);
|
|
1596
1619
|
}
|
|
1597
1620
|
|
|
1598
1621
|
#main > div.row {
|
|
@@ -1620,7 +1643,7 @@ img {
|
|
|
1620
1643
|
}
|
|
1621
1644
|
|
|
1622
1645
|
#search-result-wrapper {
|
|
1623
|
-
padding-right: calc(100% - #{$sidebar-width-large} -
|
|
1646
|
+
padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
|
|
1624
1647
|
}
|
|
1625
1648
|
|
|
1626
1649
|
#panel-wrapper {
|