beautiful-jekyll-theme 2.0.0 → 4.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +2 -11
  3. data/README.md +103 -129
  4. data/_includes/disqus.html +12 -12
  5. data/_includes/ext-css.html +2 -2
  6. data/_includes/fb-comment.html +12 -10
  7. data/_includes/footer-minimal.html +11 -11
  8. data/_includes/footer-scripts.html +2 -2
  9. data/_includes/footer.html +12 -7
  10. data/_includes/google_analytics.html +8 -8
  11. data/_includes/gtag.html +2 -3
  12. data/_includes/gtm_body.html +3 -4
  13. data/_includes/gtm_head.html +9 -7
  14. data/_includes/head.html +54 -44
  15. data/_includes/header.html +12 -12
  16. data/_includes/nav.html +33 -44
  17. data/_includes/readtime.html +10 -10
  18. data/_includes/social-networks-links.html +89 -29
  19. data/_includes/social-share.html +8 -3
  20. data/_includes/staticman-comments.html +9 -9
  21. data/_layouts/base.html +13 -8
  22. data/_layouts/default.html +1 -1
  23. data/_layouts/home.html +25 -12
  24. data/_layouts/minimal.html +11 -5
  25. data/_layouts/page.html +2 -2
  26. data/_layouts/post.html +8 -8
  27. data/assets/css/main-minimal.css +2 -2
  28. data/assets/css/main.css +349 -227
  29. data/assets/css/staticman.css +2 -2
  30. data/assets/img/thumb.png +0 -0
  31. data/assets/js/jquery-3.4.1.min.js +2 -0
  32. data/assets/js/main.js +58 -99
  33. data/assets/js/staticman.js +13 -13
  34. metadata +8 -14
  35. data/assets/css/bootstrap-theme.css +0 -476
  36. data/assets/css/bootstrap-theme.css.map +0 -1
  37. data/assets/css/bootstrap-theme.min.css +0 -5
  38. data/assets/css/bootstrap.css +0 -6566
  39. data/assets/css/bootstrap.css.map +0 -1
  40. data/assets/css/bootstrap.min.css +0 -5
  41. data/assets/css/normalize.css +0 -427
  42. data/assets/js/bootstrap.js +0 -2306
  43. data/assets/js/bootstrap.min.js +0 -7
  44. data/assets/js/jquery-1.11.2.min.js +0 -4
@@ -1,10 +1,16 @@
1
1
  ---
2
2
  common-css:
3
- - "/assets/css/bootstrap.min.css"
4
3
  - "/assets/css/main-minimal.css"
5
- common-js:
6
- - "/assets/js/jquery-1.11.2.min.js"
7
- - "/assets/js/bootstrap.min.js"
4
+ common-ext-css:
5
+ - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
6
+ sri: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
7
+ common-ext-js:
8
+ - href: "https://code.jquery.com/jquery-3.4.1.min.js"
9
+ sri: "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
10
+ - href: "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
11
+ sri: "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
12
+ - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
13
+ sri: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
8
14
  ---
9
15
 
10
16
  <!DOCTYPE html>
@@ -14,7 +20,7 @@ common-js:
14
20
 
15
21
  <body>
16
22
 
17
- <div role="main" class="container main-content">
23
+ <div role="main" class="container-md main-content">
18
24
  {{ content }}
19
25
  </div>
20
26
 
@@ -4,9 +4,9 @@ layout: base
4
4
 
5
5
  {% include header.html type="page" %}
6
6
 
7
- <div class="container" role="main">
7
+ <div class="container-md" role="main">
8
8
  <div class="row">
9
- <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
9
+ <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
10
10
  {{ content }}
11
11
  {% include comments.html %}
12
12
  </div>
@@ -4,9 +4,9 @@ layout: base
4
4
 
5
5
  {% include header.html type="post" %}
6
6
 
7
- <div class="container">
7
+ <div class="container-md">
8
8
  <div class="row">
9
- <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
9
+ <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
10
10
 
11
11
  {% if page.gh-repo %}
12
12
  {% assign gh_split = page.gh-repo | split:'/' %}
@@ -52,19 +52,19 @@ layout: base
52
52
  {% include social-share.html %}
53
53
  {% endif %}
54
54
 
55
- <ul class="pager blog-pager">
55
+ <ul class="pagination blog-pager">
56
56
  {% if page.previous.url %}
57
- <li class="previous">
58
- <a href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
57
+ <li class="page-item previous">
58
+ <a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
59
59
  </li>
60
60
  {% endif %}
61
61
  {% if page.next.url %}
62
- <li class="next">
63
- <a href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
62
+ <li class="page-item next">
63
+ <a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
64
64
  </li>
65
65
  {% endif %}
66
66
  </ul>
67
- {% include comments.html %}
67
+ {% include comments.html %}
68
68
  </div>
69
69
  </div>
70
70
  </div>
@@ -1,12 +1,12 @@
1
1
  .main-content {
2
- padding-bottom: 50px;
2
+ padding-bottom: 3.125rem;
3
3
  }
4
4
 
5
5
  footer.footer-min {
6
6
  position: fixed;
7
7
  bottom: 0;
8
8
  width: 100%;
9
- padding: 3px;
9
+ padding: 0.1875rem;
10
10
  background-color: #f5f5f5;
11
11
  border-top: 1px solid #eeeeee;
12
12
  text-align: center;
@@ -6,9 +6,13 @@ layout: null
6
6
 
7
7
  /* --- General --- */
8
8
 
9
+ html {
10
+ font-size: 100%
11
+ }
12
+
9
13
  body {
10
14
  font-family: 'Lora', 'Times New Roman', serif;
11
- font-size: 18px;
15
+ font-size: 1.125rem;
12
16
  color: #404040;
13
17
  position: relative;
14
18
  background-color: {{ site.page-col | default: "#FFFFFF" }};
@@ -19,11 +23,24 @@ body {
19
23
  }
20
24
  p {
21
25
  line-height: 1.5;
22
- margin: 30px 0;
26
+ margin: 1.875rem 0;
23
27
  }
24
28
  h1,h2,h3,h4,h5,h6 {
25
29
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
26
30
  font-weight: 800;
31
+ line-height: 1.1;
32
+ }
33
+ h1 {
34
+ font-size: 2.25rem;
35
+ }
36
+ h2 {
37
+ font-size: 1.875rem;
38
+ }
39
+ h3 {
40
+ font-size: 1.5rem;
41
+ }
42
+ h4 {
43
+ font-size: 1.125rem;
27
44
  }
28
45
  a {
29
46
  color: {{ site.link-col | default: "#008AFF" }};
@@ -40,27 +57,30 @@ blockquote p:first-child {
40
57
  margin-top: 0;
41
58
  }
42
59
  hr.small {
43
- max-width: 100px;
44
- margin: 15px auto;
45
- border-width: 4px;
60
+ max-width: 6.25rem;
61
+ margin: 1rem auto;
62
+ border-width: 0.25rem;
46
63
  border-color: inherit;
47
- border-radius: 3px;
64
+ border-radius: 0.1875rem;
65
+ }
66
+
67
+ /* fix in-page anchors to not be behind fixed header */
68
+ :target:before {
69
+ content: "";
70
+ display: block;
71
+ height: 3.125rem; /* navbar height */
72
+ margin: -3.125rem 0 0;
48
73
  }
49
74
 
50
75
  .main-content {
51
- padding-top: 80px;
76
+ padding-top: 5rem;
52
77
  }
53
- @media only screen and (min-width: 768px) {
78
+ @media (min-width: 768px) {
54
79
  .main-content {
55
- padding-top: 130px;
80
+ padding-top: 8.125rem;
56
81
  }
57
82
  }
58
83
 
59
- .main-explain-area {
60
- font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
61
- padding: 15px inherit;
62
- }
63
-
64
84
  .hideme {
65
85
  display: none;
66
86
  }
@@ -89,104 +109,240 @@ img {
89
109
  }
90
110
 
91
111
  .disqus-comments {
92
- margin-top: 30px;
112
+ margin-top: 1.875rem;
93
113
  }
94
114
 
95
- @media only screen and (min-width: 768px) {
115
+ @media (min-width: 768px) {
96
116
  .disqus-comments {
97
- margin-top: 40px;
117
+ margin-top: 2.5rem;
98
118
  }
99
119
  }
100
120
 
101
121
  .linked-section {
102
- padding-top: 60px;
103
- margin-top: -25px;
122
+ padding-top: 3.75rem;
123
+ margin-top: -1.5625rem;
104
124
  }
105
125
 
106
126
  /* --- Navbar --- */
107
127
 
108
128
  .navbar-custom {
109
129
  background-color: {{ site.navbar-col | default: "#F5F5F5" }};
110
- border-bottom: 1px solid #EAEAEA;
130
+ border-bottom: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
111
131
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
112
132
  {% if site.navbar-img %}
113
- background-image: url({{ site.navbar-img | relative_url }});
114
- background-attachment: fixed;
133
+ background-image: url({{ site.navbar-img | relative_url }});
134
+ background-attachment: fixed;
115
135
  {% endif %}
136
+ -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
137
+ -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
138
+ transition: background .5s ease-in-out,padding .5s ease-in-out;
116
139
  }
117
140
 
118
- .navbar-custom .nav li a {
119
- text-transform: uppercase;
120
- font-size: 12px;
121
- letter-spacing: 1px;
122
- }
123
-
124
- .navbar-custom .navbar-brand,
125
- .navbar-custom .nav li a {
126
- font-weight: 800;
127
- color: {{ site.navbar-text-col | default: "#404040" }};
141
+ .navbar-custom,
142
+ .navbar-custom.top-nav-short,
143
+ .navbar-custom.top-nav-short-permanent {
144
+ padding-top: 0;
145
+ padding-bottom: 0;
128
146
  }
129
147
 
130
- .navbar-custom .navbar-brand:hover,
131
- .navbar-custom .navbar-brand:focus ,
132
- .navbar-custom .nav li a:hover,
133
- .navbar-custom .nav li a:focus {
134
- color: {{ site.hover-col | default: "#0085A1" }};
148
+ .navbar-custom .navbar-brand {
149
+ line-height: 1.5;
150
+ padding-top: 0.625rem;
151
+ padding-bottom: 0.625rem;
152
+ font-size: 1.125rem;
135
153
  }
136
154
 
137
155
  .navbar-custom .navbar-brand-logo {
138
- padding-top: 0;
139
156
  -webkit-transition: padding .5s ease-in-out;
140
157
  -moz-transition: padding .5s ease-in-out;
141
158
  transition: padding .5s ease-in-out;
142
159
  }
160
+
161
+ .navbar-custom .navbar-brand-logo,
162
+ .navbar-custom.top-nav-short .navbar-brand-logo,
163
+ .navbar-custom.top-nav-short-permanent .navbar-brand-logo {
164
+ padding-top: 0.3125rem;
165
+ padding-bottom: 0.3125rem;
166
+ }
167
+
143
168
  .navbar-custom .navbar-brand-logo img {
144
- height: 50px;
145
169
  -webkit-transition: height .5s ease-in-out;
146
170
  -moz-transition: height .5s ease-in-out;
147
171
  transition: height .5s ease-in-out;
148
172
  }
149
- .navbar-custom.top-nav-short .navbar-brand-logo {
150
- padding-top: 5px;
173
+
174
+ .navbar-custom .navbar-brand-logo img,
175
+ .navbar-custom.top-nav-short .navbar-brand-logo img,
176
+ .navbar-custom.top-nav-short-permanent .navbar-brand-logo img {
177
+ height: 2.5rem;
178
+ }
179
+
180
+ .navbar-custom .navbar-brand:hover,
181
+ .navbar-custom .navbar-brand:focus ,
182
+ .navbar-custom .navbar-nav .nav-link:hover,
183
+ .navbar-custom .navbar-nav .nav-link:focus,
184
+ .navbar-custom .navbar-nav .dropdown-item:hover,
185
+ .navbar-custom .navbar-nav .dropdown-item:focus {
186
+ color: {{ site.hover-col | default: "#0085A1" }};
187
+ }
188
+
189
+ .navbar-custom .navbar-nav .nav-item {
190
+ text-transform: uppercase;
191
+ font-size: 0.75rem;
192
+ letter-spacing: 0.0625rem;
193
+ }
194
+
195
+ .navbar-custom .navbar-nav .nav-link {
196
+ padding-top: 0;
197
+ padding-bottom: 0;
198
+ line-height: 1.5;
199
+ padding-top: 1rem;
200
+ padding-bottom: 1rem;
201
+ }
202
+
203
+ .navbar-custom .navbar-brand,
204
+ .navbar-custom .navbar-nav .nav-link {
205
+ font-weight: 800;
206
+ color: {{ site.navbar-text-col | default: "#404040" }};
151
207
  }
152
- .navbar-custom.top-nav-short .navbar-brand-logo img {
153
- height: 40px;
208
+
209
+ .navbar-toggler {
210
+ font-size: 1rem;
211
+ margin: 0.5rem 0;
212
+ }
213
+ .navbar-custom .navbar-toggler:focus,
214
+ .navbar-custom .navbar-toggler:hover {
215
+ background-color: initial;
154
216
  }
155
217
 
156
- @media only screen and (min-width: 768px) {
218
+ .navbar-custom .navbar-toggler[aria-expanded="true"] {
219
+ background-color: rgba(0, 0, 0, 0.2);
220
+ }
221
+
222
+ .dropdown-toggle::after {
223
+ border-width: 0.4em;
224
+ }
225
+
226
+ @media (min-width: 768px) {
157
227
  .navbar-custom {
158
- padding: 20px 0;
159
- -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
160
- -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
161
- transition: background .5s ease-in-out,padding .5s ease-in-out;
228
+ padding-top: 1.25rem;
229
+ padding-bottom: 1.25rem;
230
+ }
231
+
232
+ .navbar-custom .navbar-brand-logo {
233
+ padding-top: 0;
234
+ padding-bottom: 0;
235
+ }
236
+
237
+ .navbar-custom .navbar-brand-logo img {
238
+ height: 3.125rem;
239
+ }
240
+
241
+ .navbar-expand-md .navbar-nav .nav-link {
242
+ padding-left: 0.9375rem;
243
+ padding-right: 0.9375rem;
244
+ }
245
+
246
+ .navbar-expand-md .navbar-nav .nav-item:not(.dropdown):last-child .nav-link {
247
+ padding-right: 0;
248
+ }
249
+ }
250
+
251
+ @media (min-width: 768px) {
252
+ .navbar-custom .nav-item.dropdown:hover {
253
+ background: rgba(0, 0, 0, 0.1);
254
+ }
255
+ }
256
+
257
+ .navbar-custom .nav-item.dropdown.show {
258
+ background: rgba(0, 0, 0, 0.2);
259
+ }
260
+
261
+ .navbar-custom .nav-item.dropdown .dropdown-menu {
262
+ min-width: 0;
263
+ margin-top: 0;
264
+ font-size: 1em;
265
+ border: 0;
266
+ padding: 0;
267
+ width: 100%;
268
+ word-break: break-word;
269
+ }
270
+ .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
271
+ white-space: normal;
272
+ padding: 0.625rem;
273
+ background-color: {{ site.navbar-col | default: "#F5F5F5" }};
274
+ text-decoration: none !important;
275
+ border-width: 0 1px 1px 1px;
276
+ font-weight: normal;
277
+ }
278
+
279
+ @media (min-width: 768px) {
280
+ .navbar-custom .nav-item.dropdown .dropdown-menu {
281
+ text-align: center;
162
282
  }
163
283
 
164
- .navbar-custom.top-nav-short {
165
- padding: 0;
284
+ .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
285
+ padding-left: 0.625rem;
286
+ border: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
287
+ border-width: 0 1px 1px;
288
+ }
289
+ }
290
+
291
+ @media (max-width: 767px) {
292
+ .navbar-custom .navbar-collapse {
293
+ border-top: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
294
+ margin: 0 -1rem;
295
+ }
296
+
297
+ .navbar-custom .navbar-nav {
298
+ padding: 0.5rem 0;
299
+ }
300
+
301
+ .navbar-custom .navbar-nav .nav-link {
302
+ padding: 0.675rem 0 0.675rem 1rem;
303
+ }
304
+
305
+ .navbar-custom .nav-item.dropdown.show {
306
+ background: rgba(0, 0, 0, 0.2);
307
+ }
308
+
309
+ .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
310
+ padding-left: 2rem;
166
311
  }
167
312
  }
168
313
 
169
314
  .navbar-custom .avatar-container {
170
315
  position: absolute;
171
316
  left: 50%;
172
- width: 50px;
173
- margin-top: -25px;
317
+ width: 3.125rem;
318
+ margin-top: 1.75rem;
319
+ transition: opacity 0.5s ease-in-out;
320
+ -webkit-transition: opacity 0.5s ease-in-out;
321
+ -moz-transition: opacity 0.5s ease-in-out;
322
+ }
323
+ .navbar-custom.top-nav-short .avatar-container {
324
+ opacity: 0;
325
+ visibility: hidden;
326
+ transition: visibility linear 0.5s, opacity 0.5s ease-in-out;
327
+ -webkit-transition: visibility linear 0.5s, opacity 0.5s ease-in-out;
328
+ -moz-transition: visibility linear 0.5s, opacity 0.5s ease-in-out;
174
329
  }
330
+
175
331
  .navbar-custom .avatar-container .avatar-img-border {
176
332
  width: 100%;
177
333
  display: inline-block;
178
334
  margin-left: -50%;
179
335
  {% unless site.round-avatar == false %}
180
- border-radius: 50%;
181
- box-shadow: 0 0 8px rgba(0, 0, 0, .8);
182
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
183
- -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
336
+ border-radius: 50%;
337
+ box-shadow: 0 0 0.5rem rgba(0, 0, 0, .8);
338
+ -webkit-box-shadow: 0 0 0.3125rem rgba(0, 0, 0, .8);
339
+ -moz-box-shadow: 0 0 0.5rem rgba(0, 0, 0, .8);
184
340
  {% endunless %}
185
341
  }
186
342
  .navbar-custom .avatar-container .avatar-img {
187
343
  width: 100%;
188
344
  {% unless site.round-avatar == false %}
189
- border-radius: 50%;
345
+ border-radius: 50%;
190
346
  {% endunless %}
191
347
  display: block;
192
348
  }
@@ -195,10 +351,9 @@ img {
195
351
  display: none;
196
352
  }
197
353
 
198
- @media only screen and (min-width: 768px) {
354
+ @media (min-width: 768px) {
199
355
  .navbar-custom .avatar-container {
200
- width: 100px;
201
- margin-top: -50px;
356
+ width: 6.25rem;
202
357
  }
203
358
 
204
359
  .navbar-custom .avatar-container .avatar-img-border {
@@ -215,71 +370,22 @@ img {
215
370
  }
216
371
  }
217
372
 
218
- /* Multi-level navigation links */
219
- .navbar-custom .nav .navlinks-container {
220
- position: relative;
221
- }
222
- .navbar-custom .nav .navlinks-parent:after {
223
- content: " \25BC";
224
- }
225
- .navbar-custom .nav .navlinks-children {
226
- width: 100%;
227
- display: none;
228
- word-break: break-word;
229
- }
230
- .navbar-custom .nav .navlinks-container .navlinks-children a {
231
- display: block;
232
- padding: 10px;
233
- padding-left: 30px;
234
- background-color: {{ site.navbar-children-col | default: "#F5F5F5" }};
235
- text-decoration: none !important;
236
- border-width: 0 1px 1px 1px;
237
- font-weight: normal;
238
- }
239
- @media only screen and (max-width: 767px) {
240
- .navbar-custom .nav .navlinks-container.show-children {
241
- background: rgba(0, 0, 0, 0.2);
242
- }
243
- .navbar-custom .nav .navlinks-container.show-children .navlinks-children {
244
- display: block;
245
- }
246
- }
247
- @media only screen and (min-width: 768px) {
248
- .navbar-custom .nav .navlinks-container {
249
- text-align: center;
250
- }
251
- .navbar-custom .nav .navlinks-container:hover {
252
- background: rgba(0, 0, 0, 0.1);
253
- }
254
- .navbar-custom .nav .navlinks-container:hover .navlinks-children {
255
- display: block;
256
- }
257
- .navbar-custom .nav .navlinks-children {
258
- position: absolute;
259
- }
260
- .navbar-custom .nav .navlinks-container .navlinks-children a {
261
- padding-left: 10px;
262
- border: 1px solid #eaeaea;
263
- border-width: 0 1px 1px;
264
- }
265
- }
266
-
267
373
  /* --- Footer --- */
268
374
 
269
375
  footer {
270
- padding: 30px 0;
376
+ padding: 1.875rem 0;
271
377
  border-top: 1px #EAEAEA solid;
272
- margin-top: 50px;
273
- font-size: 14px;
378
+ margin-top: 3.125rem;
379
+ font-size: 0.875rem;
274
380
  background-color: {{ site.footer-col | default: "#F5F5F5" }};
275
381
  {% if site.footer-img %}
276
- background-image: url({{ site.footer-img | relative_url }});
277
- background-attachment: fixed;
382
+ background-image: url({{ site.footer-img | relative_url }});
383
+ background-attachment: fixed;
278
384
  {% endif %}
279
385
  }
280
386
 
281
387
  footer p.text-muted {
282
- color: {{ site.footer-text-col | default: "#777777" }};
388
+ color: {{ site.footer-text-col | default: "#777777" }} !important;
283
389
  }
284
390
 
285
391
  footer a {
@@ -289,39 +395,49 @@ footer a {
289
395
  footer .list-inline {
290
396
  margin: 0;
291
397
  padding: 0;
398
+ margin-bottom: 1.875rem;
292
399
  }
293
400
  footer .copyright {
294
401
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
295
402
  text-align: center;
296
403
  margin-bottom: 0;
404
+ margin-top: 0;
297
405
  }
298
406
  footer .theme-by {
299
407
  text-align: center;
300
- margin: 10px 0 0;
408
+ margin: 0.625rem 0 0;
409
+ }
410
+ footer .footer-custom-content {
411
+ text-align: center;
412
+ margin-bottom: 0.9375rem;
413
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
301
414
  }
302
415
 
303
- @media only screen and (min-width: 768px) {
416
+ @media (min-width: 768px) {
304
417
  footer {
305
- padding: 50px 0;
418
+ padding: 3.125rem 0;
306
419
  }
307
420
  footer .footer-links {
308
- font-size: 18px;
421
+ font-size: 1.125rem;
309
422
  }
310
423
  footer .copyright {
311
- font-size: 16px;
424
+ font-size: 1rem;
425
+ }
426
+ footer .footer-custom-content {
427
+ font-size: 1rem;
312
428
  }
313
429
  }
314
430
 
315
431
  /* --- Post preview --- */
316
432
 
317
433
  .post-preview {
318
- padding: 20px 0;
434
+ padding: 1.25rem 0;
319
435
  border-bottom: 1px solid #eee;
320
436
  }
321
437
 
322
- @media only screen and (min-width: 768px) {
438
+ @media (min-width: 768px) {
323
439
  .post-preview {
324
- padding: 35px 0;
440
+ padding: 2.1875rem 0;
325
441
  }
326
442
  }
327
443
 
@@ -341,20 +457,20 @@ footer .theme-by {
341
457
  }
342
458
 
343
459
  .post-preview .post-title {
344
- font-size: 30px;
460
+ font-size: 1.875rem;
345
461
  margin-top: 0;
346
462
  }
347
463
  .post-preview .post-subtitle {
348
464
  margin: 0;
349
465
  font-weight: 300;
350
- margin-bottom: 10px;
466
+ margin-bottom: 0.625rem;
351
467
  }
352
468
  .post-preview .post-meta,
353
469
  .post-heading .post-meta {
354
470
  color: #808080;
355
- font-size: 18px;
471
+ font-size: 1.125rem;
356
472
  font-style: italic;
357
- margin: 0 0 10px;
473
+ margin: 0 0 0.625rem;
358
474
  }
359
475
  .post-preview .post-entry {
360
476
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -368,26 +484,27 @@ footer .theme-by {
368
484
  }
369
485
  .post-image {
370
486
  float: right;
371
- height: 192px;
372
- width: 192px;
373
- margin-top: -35px;
487
+ margin-left: 0.625rem;
488
+ height: 12rem;
489
+ width: 12rem;
490
+ margin-top: -2.1875rem;
374
491
  filter: grayscale(90%);
375
492
  }
376
493
  .post-image:hover {
377
494
  filter: grayscale(0%);
378
495
  }
379
496
  .post-image img {
380
- border-radius: 100px;
381
- height: 192px;
382
- width: 192px;
497
+ border-radius: 6.25rem;
498
+ height: 12rem;
499
+ width: 12rem;
383
500
  }
384
501
  .post-preview .post-read-more {
385
502
  font-weight: 800;
386
503
  }
387
504
 
388
- @media only screen and (min-width: 768px) {
505
+ @media (min-width: 768px) {
389
506
  .post-preview .post-title {
390
- font-size: 36px;
507
+ font-size: 2.25rem;
391
508
  }
392
509
  }
393
510
 
@@ -396,14 +513,14 @@ footer .theme-by {
396
513
  .blog-tags {
397
514
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
398
515
  color: #999;
399
- font-size: 15px;
400
- margin-bottom: 30px;
516
+ font-size: 0.9375rem;
517
+ margin-bottom: 1.875rem;
401
518
  }
402
519
 
403
520
  .blog-tags a {
404
521
  color: {{ site.link-col | default: "#008AFF" }};
405
522
  text-decoration: none;
406
- padding: 0px 5px;
523
+ padding: 0 0.3125rem;
407
524
  }
408
525
 
409
526
  .blog-tags a:hover {
@@ -413,33 +530,42 @@ footer .theme-by {
413
530
  }
414
531
 
415
532
  .post-preview .blog-tags {
416
- margin-top: 5px;
533
+ margin-top: 0.3125rem;
417
534
  margin-bottom: 0;
418
535
  }
419
536
 
420
- @media only screen and (min-width: 768px) {
537
+ @media (min-width: 768px) {
421
538
  .post-preview .blog-tags {
422
- margin-top: 10px;
539
+ margin-top: 0.625rem;
423
540
  }
424
541
  }
425
542
 
426
- @media only screen and (max-width: 500px) {
543
+ @media (max-width: 767px) {
427
544
  .post-image, .post-image img {
428
- height: 100px;
429
- width: 100px;
545
+ margin-top: 0;
546
+ height: 9rem;
547
+ width: 9rem;
548
+ }
549
+ }
550
+
551
+ @media (max-width: 500px) {
552
+ .post-image, .post-image img {
553
+ height: 6.25rem;
554
+ width: 6.25rem;
430
555
  }
431
556
 
432
557
  .post-image {
433
558
  width: 100%;
434
559
  text-align: center;
435
560
  margin-top: 0;
436
- float: left;
561
+ margin-left: 0;
562
+ float: none;
437
563
  }
438
564
  }
439
565
  /* --- Post and page headers --- */
440
566
 
441
567
  .intro-header {
442
- margin: 80px 0 20px;
568
+ margin: 5rem 0 1.25rem;
443
569
  position: relative;
444
570
  }
445
571
  .intro-header.big-img {
@@ -448,8 +574,8 @@ footer .theme-by {
448
574
  -moz-background-size: cover;
449
575
  background-size: cover;
450
576
  -o-background-size: cover;
451
- margin-top: 51px; /* The small navbar is 50px tall + 1px border */
452
- margin-bottom: 35px;
577
+ margin-top: 3.1875rem; /* The small navbar is 50px tall + 1px border */
578
+ margin-bottom: 2.1875rem;
453
579
  }
454
580
  .intro-header.big-img .big-img-transition {
455
581
  position: absolute;
@@ -470,29 +596,29 @@ footer .theme-by {
470
596
  }
471
597
  .intro-header.big-img .page-heading,
472
598
  .intro-header.big-img .post-heading {
473
- padding: 100px 0;
599
+ padding: 6.25rem 0;
474
600
  color: #FFF;
475
601
  text-shadow: 1px 1px 3px #000;
476
602
  }
477
603
  .intro-header .page-heading h1 {
478
604
  margin-top: 0;
479
- font-size: 50px;
605
+ font-size: 3.125rem;
480
606
  }
481
607
  .intro-header .post-heading h1 {
482
608
  margin-top: 0;
483
- font-size: 35px;
609
+ font-size: 2.1875rem;
484
610
  }
485
611
  .intro-header .page-heading .page-subheading,
486
612
  .intro-header .post-heading .post-subheading {
487
- font-size: 27px;
613
+ font-size: 1.6875rem;
488
614
  line-height: 1.1;
489
615
  display: block;
490
616
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
491
617
  font-weight: 300;
492
- margin: 10px 0 0;
618
+ margin: 0.625rem 0 0;
493
619
  }
494
620
  .intro-header .post-heading .post-subheading {
495
- margin-bottom: 20px;
621
+ margin-bottom: 1.25rem;
496
622
  }
497
623
  .intro-header.big-img .page-heading .page-subheading,
498
624
  .intro-header.big-img .post-heading .post-subheading {
@@ -509,54 +635,54 @@ footer .theme-by {
509
635
  .intro-header.big-img .img-desc {
510
636
  background: rgba(30, 30, 30, 0.6);
511
637
  position: absolute;
512
- padding: 5px 10px;
513
- font-size: 11px;
638
+ padding: 0.3125rem 0.625rem;
639
+ font-size: 0.6875rem;
514
640
  color: #EEE;
515
641
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
516
642
  right: 0;
517
643
  bottom: 0;
518
644
  display: none;
519
645
  }
520
- @media only screen and (min-width: 768px) {
646
+ @media (min-width: 768px) {
521
647
  .intro-header {
522
- margin-top: 130px;
648
+ margin-top: 8.125rem;
523
649
  }
524
650
  .intro-header.big-img {
525
- margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
651
+ margin-top: 5.6875rem; /* Full navbar is small navbar + 20px padding on each side when expanded */
526
652
  }
527
653
  .intro-header.big-img .page-heading,
528
654
  .intro-header.big-img .post-heading {
529
- padding: 150px 0;
655
+ padding: 9.375rem 0;
530
656
  }
531
657
  .intro-header .page-heading h1 {
532
- font-size: 80px;
658
+ font-size: 5rem;
533
659
  }
534
660
  .intro-header .post-heading h1 {
535
- font-size: 50px;
661
+ font-size: 3.125rem;
536
662
  }
537
663
  .intro-header.big-img .img-desc {
538
- font-size: 14px;
664
+ font-size: 0.875rem;
539
665
  }
540
666
  }
541
667
 
542
668
  .header-section.has-img .no-img {
543
669
  margin-top: 0;
544
670
  background-color: #FCFCFC;
545
- margin: 0 0 40px;
546
- padding: 20px 0;
547
- box-shadow: 0 0 5px #AAA;
671
+ margin: 0 0 2.5rem;
672
+ padding: 1.25rem 0;
673
+ box-shadow: 0 0 0.3125rem #AAA;
548
674
  }
549
675
  /* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
550
676
  .header-section.has-img .intro-header.no-img {
551
677
  display: none;
552
678
  }
553
- @media only screen and (max-width: 365px) {
679
+ @media (max-width: 365px) {
554
680
  .header-section.has-img .intro-header.no-img {
555
681
  display: block;
556
682
  }
557
683
  .intro-header.big-img {
558
684
  width: 100%;
559
- height: 220px;
685
+ height: 13.75rem;
560
686
  }
561
687
  .intro-header.big-img .page-heading,
562
688
  .intro-header.big-img .post-heading {
@@ -566,30 +692,30 @@ footer .theme-by {
566
692
  margin-bottom: 0;
567
693
  }
568
694
  }
569
- @media only screen and (max-width: 325px) {
695
+ @media (max-width: 325px) {
570
696
  .intro-header.big-img {
571
- height: 200px;
697
+ height: 12.5rem;
572
698
  }
573
699
  }
574
700
 
575
701
  .caption {
576
702
  text-align: center;
577
- font-size: 14px;
578
- padding: 10px;
703
+ font-size: 0.875rem;
704
+ padding: 0.625rem;
579
705
  font-style: italic;
580
706
  margin: 0;
581
707
  display: block;
582
- border-bottom-right-radius: 5px;
583
- border-bottom-left-radius: 5px;
708
+ border-bottom-right-radius: 0.3125rem;
709
+ border-bottom-left-radius: 0.3125rem;
584
710
  }
585
711
 
586
712
  #header-gh-btns {
587
- margin-bottom: 15px;
713
+ margin-bottom: 0.9375rem;
588
714
  }
589
- @media only screen and (max-width: 500px) {
715
+ @media (max-width: 500px) {
590
716
  #header-gh-btns > iframe {
591
717
  display: block;
592
- margin-bottom: 5px;
718
+ margin-bottom: 0.3125rem;
593
719
  }
594
720
  }
595
721
 
@@ -602,48 +728,53 @@ footer .theme-by {
602
728
  }
603
729
  }
604
730
  .reader-time .middot {
605
- margin: 0 10px;
731
+ margin: 0 0.625rem;
732
+ }
733
+
734
+ /* --- Pagination --- */
735
+
736
+ .pagination {
737
+ margin: 0.625rem 0 0;
738
+ justify-content: space-between;
739
+ }
740
+
741
+ .pagination.blog-pager {
742
+ margin-top: 0;
743
+ }
744
+
745
+ .pagination .page-item.next {
746
+ margin-left: auto;
606
747
  }
607
748
 
608
- /* --- Pager --- */
749
+ @media (min-width: 768px) {
750
+ .pagination.blog-pager {
751
+ margin-top: 0.625rem;
752
+ }
753
+ }
609
754
 
610
- .pager li a {
755
+ .pagination .page-item .page-link {
611
756
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
612
757
  text-transform: uppercase;
613
- font-size: 14px;
758
+ font-size: 0.875rem;
614
759
  font-weight: 800;
615
760
  letter-spacing: 1px;
616
- padding: 10px 5px;
761
+ padding: 0.625rem 0.3125rem;
617
762
  background-color: #FFF;
618
763
  border-radius: 0;
619
764
  color: #404040;
620
765
  }
621
- @media only screen and (min-width: 768px) {
622
- .pager li a {
623
- padding: 15px 25px;
766
+ @media (min-width: 768px) {
767
+ .pagination .page-item .page-link {
768
+ padding: 0.9375rem 1.5625rem;
624
769
  }
625
770
  }
626
- .pager li a:hover,
627
- .pager li a:focus {
771
+ .pagination .page-item .page-link:hover,
772
+ .pagination .page-item .page-link:focus {
628
773
  color: #FFF;
629
774
  border: 1px solid {{ site.hover-col | default: "#0085A1" }};
630
775
  background-color: {{ site.hover-col | default: "#0085A1" }};
631
776
  }
632
777
 
633
- .pager {
634
- margin: 10px 0 0;
635
- }
636
-
637
- .pager.blog-pager {
638
- margin-top: 0;
639
- }
640
-
641
- @media only screen and (min-width: 768px) {
642
- .pager.blog-pager {
643
- margin-top: 10px;
644
- }
645
- }
646
-
647
778
  /* --- Tables --- */
648
779
 
649
780
  table {
@@ -663,13 +794,13 @@ table tr th {
663
794
  border: 1px solid #cccccc;
664
795
  text-align: left;
665
796
  margin: 0;
666
- padding: 6px 13px;
797
+ padding: 0.375rem 0.8125rem;
667
798
  }
668
799
  table tr td {
669
800
  border: 1px solid #cccccc;
670
801
  text-align: left;
671
802
  margin: 0;
672
- padding: 6px 13px;
803
+ padding: 0.375rem 0.8125rem;
673
804
  }
674
805
  table tr th :first-child,
675
806
  table tr td :first-child {
@@ -683,8 +814,10 @@ table tr td :last-child {
683
814
  /* --- Code blocks --- */
684
815
 
685
816
  pre {
686
- font-size: 16px;
687
- line-height: 1.5em;
817
+ font-size: 1rem;
818
+ line-height: 1.5;
819
+ border-radius: 0.25rem;
820
+ padding: 0.59375rem;
688
821
  }
689
822
  .highlight pre {
690
823
  border: none;
@@ -695,9 +828,9 @@ pre {
695
828
  background-image: linear-gradient(
696
829
  rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1.5em, rgba(0,0,0,0.03) 1.5em, rgba(0,0,0,0.03) 3em);
697
830
  background-size: auto 3em;
698
- background-position-y: 10px;
831
+ background-position-y: 0.625rem;
699
832
  border: 1px solid rgba(0,0,0,0.1);
700
- border-left: 7px solid #444;
833
+ border-left: 0.4375rem solid #444;
701
834
  }
702
835
  .highlight > pre:not([class~="highlight"]) { /* code block with line number */
703
836
  padding: 0;
@@ -728,16 +861,16 @@ pre {
728
861
  /* --- Social media sharing section --- */
729
862
 
730
863
  #social-share-section {
731
- margin-bottom: 30px;
864
+ margin-bottom: 1.875rem;
732
865
  }
733
866
 
734
867
  /* --- Notification boxes --- */
735
868
  .box-note, .box-warning, .box-error, .box-success {
736
- padding: 15px 15px 15px 10px;
737
- margin: 20px 20px 20px 5px;
869
+ padding: 0.9375rem 0.9375rem 0.9375rem 0.625rem;
870
+ margin: 1.25rem 1.25rem 1.25rem 0.3125rem;
738
871
  border: 1px solid #eee;
739
- border-left-width: 5px;
740
- border-radius: 5px 3px 3px 5px;
872
+ border-left-width: 0.3125rem;
873
+ border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
741
874
  }
742
875
 
743
876
  .box-note {
@@ -770,21 +903,10 @@ pre {
770
903
  border: unset;
771
904
  }
772
905
 
773
- /* Fix .navbar-toggle */
774
-
775
- .navbar-default button.navbar-toggle:focus,
776
- .navbar-default button.navbar-toggle:hover {
777
- background-color: initial;
778
- }
779
-
780
- .navbar-default button.navbar-toggle[aria-expanded="true"] {
781
- background-color: rgba(0, 0, 0, 0.2);
782
- }
783
-
784
906
  /* Tags page */
785
907
 
786
908
  .tag-btn {
787
- margin: 5px;
909
+ margin: 0.3125rem;
788
910
  }
789
911
 
790
912
  #full-tags-list {
@@ -792,15 +914,15 @@ pre {
792
914
  }
793
915
 
794
916
  #full-tags-list .tag-entry {
795
- margin: 0 0 15px 25px;
917
+ margin: 0 0 0.9375rem 1.5625rem;
796
918
  }
797
919
 
798
920
  #full-tags-list .tag-entry a {
799
- font-size: 20px;
921
+ font-size: 1.25rem;
800
922
  }
801
923
 
802
924
  #full-tags-list .tag-entry .entry-date {
803
925
  color: #808080;
804
926
  font-style: italic;
805
- font-size: 16px;
927
+ font-size: 1rem;
806
928
  }