jekyll-theme-fica 0.1.8 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  3. data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  4. data/.github/workflows/.ci_BASE_2002.yaml.swp +0 -0
  5. data/.github/workflows/.ci_LOCAL_2002.yaml.swp +0 -0
  6. data/.github/workflows/.ci_REMOTE_2002.yaml.swp +0 -0
  7. data/.github/workflows/ci.yaml +20 -13
  8. data/.github/workflows/ci.yaml.orig +34 -0
  9. data/.github/workflows/ci_BACKUP_2002.yaml +34 -0
  10. data/.github/workflows/ci_BASE_2002.yaml +27 -0
  11. data/.github/workflows/ci_LOCAL_2002.yaml +27 -0
  12. data/.github/workflows/ci_REMOTE_2002.yaml +27 -0
  13. data/404.html +5 -3
  14. data/README.md +59 -89
  15. data/_includes/Footer.html +76 -36
  16. data/_includes/Head.html +11 -11
  17. data/_includes/Header.html +17 -23
  18. data/_includes/assets/BTT.html +8 -0
  19. data/_includes/assets/Google-Analytics.html +12 -0
  20. data/_includes/assets/anchor-headings.html +164 -0
  21. data/_includes/assets/comments.html +16 -0
  22. data/_includes/assets/toc.html +174 -0
  23. data/_layouts/default.html +12 -10
  24. data/_layouts/home.html +20 -46
  25. data/_layouts/page.html +5 -14
  26. data/_layouts/post.html +49 -50
  27. data/_layouts/post_home.html +102 -70
  28. data/_posts/2022-03-31-To-Know-if-the-nav-works.md +8 -8
  29. data/_posts/2022-04-1-Demo.md +113 -113
  30. data/_posts/2022-04-5-Getting-Started.md +74 -27
  31. data/_posts/2022-04-6-Creating-a-new-post.md +136 -124
  32. data/_sass/base.scss +472 -0
  33. data/_sass/{themes/dark theme → colors/dark-theme}/highlight.scss +0 -0
  34. data/_sass/{themes/dark theme/theme-dark.scss → colors/dark-theme/theme-dark.scss} +24 -27
  35. data/_sass/{themes/light theme → colors/light-theme}/highlight.scss +0 -0
  36. data/_sass/{themes/light theme/theme-light.scss → colors/light-theme/theme-light.scss} +18 -24
  37. data/_sass/jekyll-theme-fica.scss +1 -7
  38. data/_sass/layouts/Google-fonts.scss +139 -0
  39. data/_sass/layouts/component.scss +253 -0
  40. data/_sass/layouts/layout.scss +508 -572
  41. data/_sass/layouts/variable.scss +201 -0
  42. data/assets/css/Style.scss +7 -37
  43. data/assets/fica-icons.svg +64 -64
  44. data/assets/img/{fica_ad.png → homepage-pic.png} +0 -0
  45. data/bin/run +195 -0
  46. data/js/Main.js +21 -0
  47. data/js/back-to-top.js +16 -25
  48. data/post/index.html +3 -3
  49. metadata +36 -21
  50. data/_includes/BTT.html +0 -9
  51. data/_includes/Custom-Head.html +0 -9
  52. data/_includes/Google-Analytics.html +0 -11
  53. data/_sass/custom/styles.scss +0 -1
  54. data/_sass/custom/variables.scss +0 -1
  55. data/_sass/layouts/base.scss +0 -573
  56. data/_sass/layouts/variables.scss +0 -89
  57. data/assets/css/fica-icons.svg +0 -68
  58. data/bin/build +0 -7
  59. data/bin/server +0 -7
  60. data/docs/contributing.md +0 -69
@@ -1,676 +1,612 @@
1
- //
2
- // Site header
3
- //
4
- .site-header {
5
- background-color: $site-header-bg;
6
- border-top: 5px solid $site-header-bg;
7
- border-bottom: 5px solid $site-header-bg;
8
- min-height: $spacing-unit * 1.865;
9
- line-height: $line-height * $font-size * 2.25;
10
-
11
- // Positioning context for the mobile navigation icon
12
- position: relative;
13
- }
14
-
15
- //
16
- // Site title
17
- //
18
- .site-title {
19
- @include relative-font-size(1.625);
20
- font-weight: 690;
21
- letter-spacing: -1px;
22
- margin-bottom: 0;
23
- float: left;
24
- font-family: $text-font-family;
25
-
26
- @include media-query($mobile-width) {
27
- padding-right: 45px;
28
- }
29
-
30
- &,
31
- &:visited {
32
- color: $text-color;
33
- }
1
+ //
2
+ // Site Header
3
+ //
4
+ .site-nav {
5
+ background: $site-header-bg;
6
+ height: 80px;
7
+ width: 100%;
8
+ z-index: 100;
9
+ .nav-links {
10
+ float: right;
11
+ margin-right: 25px;
12
+ margin-left: 0;
13
+ }
14
+ a {
15
+ line-height: 80px;
16
+ margin: 0 5px;
17
+ color: $text-color;
18
+ font-size: 17px;
19
+ padding: 7px 13px;
20
+ border-radius: 3px;
21
+ text-transform: uppercase;
22
+ transition: $transition-links;
34
23
 
35
24
  &:hover {
36
- color: $header-link-color;
25
+ color: $text-mute-color;
37
26
  }
38
27
 
39
- animation-name: des_app;
40
- animation-duration: $animation-main;
41
- -webkit-animation-timing-function: linear;
42
- animation-timing-function: linear;
43
- }
44
-
45
-
46
- .site-header-home {
47
- background-color: $home-header-title-color;
48
- border-top: 5px solid $home-header-title-color;
49
- border-bottom: 5px solid $home-header-title-color;
50
- min-height: $spacing-unit * 1.865;
51
- line-height: $line-height * $font-size * 2.25;
52
-
53
- // Positioning context for the mobile navigation icon
54
- position: relative;
55
- }
56
-
57
- //
58
- // Header Banner
59
- //
60
- .header-pic {
61
- border-top: 25px solid $home-header-title-color;
62
- position: relative;
63
- animation-name: pic_app;
64
- animation-duration: $animation-site-pic;
65
- -webkit-animation-timing-function: linear;
66
- animation-timing-function: linear;
67
- width: $site-banner-picture-sze_wdth;
68
- height: $site-banner-picture-sze_hght;
69
-
70
- @keyframes pic_app {
71
- 0% {
72
- opacity: 0%;
73
- }
74
-
75
- 20% {
76
- opacity: 20%;
77
- }
78
-
79
- 50% {
80
- opacity: 50%;
81
- }
82
-
83
- 70% {
84
- opacity: 70%;
85
- }
86
-
87
- 90% {
88
- opacity: 90%;
89
- }
28
+ // Download btn
29
+ &:first-child {
30
+ color: rgba(0, 0, 0, 0.54);
31
+ background-color: $link-color;
32
+ transition: $transition-links;
33
+ padding: 11px 19px 13px;
34
+ border-radius: 40px;
90
35
 
91
- 100% {
92
- opacity: 100%;
93
- }
36
+ &:hover {
37
+ background-color: $btn-color-hover;
38
+ }
94
39
  }
95
- }
40
+ }
96
41
 
97
- .page-header {
98
- border-top: 10px solid $home-header-title-color;
42
+ .logo {
43
+ text-transform: none;
99
44
  color: $text-color;
100
- background-color: $home-header-title-color;
101
- border-bottom: 40px solid $home-header-title-color;
102
- text-align: center;
103
-
104
- @media screen and (min-width: $mobile-width) {
105
- border-bottom: 80px solid $home-header-title-color;
106
- }
107
- }
108
-
109
- .page-header-title {
110
- border-top: 8px;
111
- margin-bottom: 0%;
112
- font-size: $site-banner-title-fnt-sze;
113
- color: $header-bg-color;
114
- text-align: center;
45
+ font-size: 35px;
46
+ line-height: 80px;
47
+ padding: 0 13px;
115
48
  font-weight: bold;
116
- font-family: $text-font-family;
117
- padding-bottom: 7px;
118
- }
119
-
120
- .page-header-description {
121
- margin-bottom: 0%;
122
- padding-bottom: 10px;
123
- font-size: $site-banner-description-fnt-sze;
124
- color: $header-bg-color;
125
- text-align: center;
126
- font-weight: lighter;
127
- font-family: $text-font-family;
128
- animation-name: des_app;
129
- animation-duration: $animation-main;
130
- -webkit-animation-timing-function: linear;
131
- animation-timing-function: linear;
132
- }
133
-
134
- @keyframes des_app {
135
- 0% {
136
- opacity: 0%;
137
- }
138
-
139
- 20% {
140
- opacity: 20%;
141
- }
142
-
143
- 50% {
144
- opacity: 50%;
145
- }
146
-
147
- 70% {
148
- opacity: 70%;
149
- }
150
-
151
- 90% {
152
- opacity: 90%;
153
- }
154
49
 
155
- 100% {
156
- opacity: 100%;
157
- }
158
- }
159
-
160
- //
161
- // Site Nav
162
- //
163
- .site-nav {
164
- position: absolute;
165
- top: 9px;
166
- right: $spacing-unit / 2;
167
- background-color: $menu-bdr-color;
168
- border-radius: 10px;
169
- text-align: right;
170
-
171
- .nav-trigger {
172
- display: none;
173
- float: right;
174
- padding-right: 100px;
175
- padding-left: 1px;
176
- }
177
-
178
- .menu-icon {
179
- float: right;
180
- width: 36px;
181
- height: 26px;
182
- line-height: 0;
183
- padding-top: 10px;
184
- text-align: center;
185
-
186
- >svg path {
187
- fill: $menu-color;
188
- }
189
- }
190
-
191
- label[for="nav-trigger"] {
192
- display: block;
193
- float: right;
194
- width: 36px;
195
- height: 36px;
196
- z-index: 2;
197
- cursor: pointer;
50
+ &:hover {
51
+ color: $text-mute-color;
52
+ background-color: transparent;
198
53
  }
199
54
 
200
- input~.trigger {
201
- clear: both;
202
- display: none;
55
+ @media screen and (min-width: $pc-width) {
56
+ padding: 0 30px;
203
57
  }
58
+ }
59
+ .checkbtn {
60
+ font-size: 40px;
61
+ color: $text-color;
62
+ float: right;
63
+ top: 20px;
64
+ // line-height: 80px;
65
+ cursor: pointer;
66
+ display: none;
67
+ margin: 1% 20px 1% 0;
68
+ padding: 10px;
69
+ border-radius: 43px;
70
+ transition: $transition-btn;
204
71
 
205
- input:checked~.trigger {
206
- display: block;
207
- padding-bottom: 5px;
72
+ &:hover {
73
+ background: rgba(232, 234, 237, 0.04);
208
74
  }
209
-
210
- .page-link {
211
- font-weight: 600;
212
- color: $text-color;
213
- line-height: $line-height;
214
- letter-spacing: 0rem;
75
+ }
76
+ #check {
77
+ display: none;
78
+ }
79
+ @media (max-width: 885px) {
80
+ .checkbtn {
81
+ display: block;
82
+ }
83
+ .nav-links {
84
+ position: fixed;
85
+ width: 100%;
86
+ height: 100vh;
87
+ background: $primary_color;
88
+ top: 80px;
89
+ left: 100%;
90
+ text-align: center;
91
+ transition: all 0.5s;
92
+ a {
215
93
  display: block;
216
- padding: 5px 10px;
217
- transition: all 0.4s ease;
218
-
219
- font-family: $text-font-family;
94
+ margin: 0;
95
+ font-size: 20px;
220
96
 
221
- // Gaps between nav items, but not on the last one
222
- &:not(:last-child) {
223
- margin-right: 0;
97
+ &:first-child {
98
+ background-color: transparent;
99
+ border-radius: 3px;
100
+ color: $link-color;
224
101
  }
225
102
 
226
- margin-left: 20px;
227
-
228
103
  &:hover {
229
- color: $header-link-color;
104
+ background: $btn-bg-color;
105
+ color: rgba(0, 0, 0, 0.54);
230
106
  }
231
- }
232
-
233
- @media screen and (min-width: $mobile-width) {
234
- position: static;
235
- float: right;
236
- border: none;
237
- background-color: inherit;
238
-
239
- label[for="nav-trigger"] {
240
- display: none;
107
+ &.active {
108
+ background: $btn-bg-color;
241
109
  }
242
-
243
- .menu-icon {
244
- display: none;
245
- }
246
-
247
- input~.trigger {
248
- display: block;
249
- }
250
-
251
- .page-link {
252
- display: inline;
253
- padding: 0;
254
-
255
- &:not(:last-child) {
256
- margin-right: 20px;
257
- }
258
-
259
- margin-left: auto;
110
+ }
111
+ }
112
+ #check {
113
+ &:checked {
114
+ ~ {
115
+ .nav-links {
116
+ left: 0;
117
+ }
260
118
  }
119
+ }
261
120
  }
121
+ }
262
122
  }
263
123
 
264
124
  //
265
- // Site footer
266
- //
267
- .site-footer {
268
- background-color: $footer-bg-color;
269
- padding: $spacing-unit 0;
270
- }
271
-
272
- .Links_footer {
273
- list-style: none;
274
- color: $footer-links-color;
275
- width: calc(100% - (#{$spacing-unit} / 2));
276
- transition: $transition-links;
277
-
278
- &:first-child {
279
- font-weight: bolder;
280
- padding-right: $spacing-unit / 2;
281
- padding-left: 0;
282
- padding-bottom: 4px;
283
- font-size: larger;
284
- color: $footer-head-link-color;
285
- }
286
-
287
- &:first-child:hover {
288
- color: $footer-head-link-color;
289
- }
290
-
291
- &:hover {
292
- color: $footer-links-hover-color;
125
+ // Header Banner
126
+ //
127
+ .header-home-mod {
128
+ position: static;
129
+ background-color: $home-header-title-color;
130
+ }
131
+ .site-banner {
132
+ padding: 40px 15px 40px 15px;
133
+ color: $text-color;
134
+ background-color: $home-header-title-color;
135
+ text-align: center;
136
+ justify-content: space-around;
137
+ line-height: 1.5;
138
+
139
+ .img {
140
+ padding-top: 61px;
141
+ width: 100%;
142
+
143
+ > img {
144
+ @include animation-fade-in(2.1);
145
+ box-shadow: 0px 0px 20px 0px #00000052;
146
+ transition: all 300ms ease 0ms;
147
+
148
+ &:hover {
149
+ box-shadow: 0px 0px 0px 0px #00000052;
150
+ }
151
+ }
152
+ }
153
+
154
+ .banner-content {
155
+ display: flex;
156
+ justify-content: center;
157
+ align-items: center;
158
+ flex-direction: column;
159
+
160
+ > a {
161
+ display: block;
162
+ margin-top: 30px;
163
+ padding: 15px 81px;
164
+ border: none;
165
+ border-radius: 5px;
166
+ cursor: pointer;
167
+ color: $BTT-svg-color;
168
+ background-color: $link-color;
169
+ transition: $transition-btn;
170
+
171
+ @include animation-fade-in(1.65);
172
+
173
+ &,
174
+ &:visited {
175
+ color: $BTT-svg-color;
176
+ }
177
+
178
+ &:hover {
179
+ color: $btn-text-hover-color;
293
180
  text-decoration: none;
181
+ background-color: $btn-color-hover;
182
+ border-color: $btn-color-hover;
183
+ }
184
+ }
185
+
186
+ .page-header-title {
187
+ border-top: 8px;
188
+ margin-bottom: 0%;
189
+ font-size: $site-banner-title-fnt-sze;
190
+ color: $header-bg-color;
191
+ text-align: center;
192
+ font-weight: bold;
193
+ font-family: $font-family;
194
+ padding-bottom: 7px;
195
+ line-height: 1.5;
196
+ @include animation-fade-in(0.1);
197
+ }
198
+
199
+ .site-banner-description {
200
+ border-top: 8px;
201
+ margin-bottom: 0%;
202
+ font-size: $site-banner-description-fnt-sze;
203
+ color: $text-color;
204
+ text-align: center;
205
+ font-weight: bold;
206
+ font-family: $font-family;
207
+ padding-bottom: 7px;
208
+ @include animation-fade-in(1);
209
+ }
210
+ }
211
+
212
+ // For Large Screens
213
+ @media screen and (min-width: $mobile-width) {
214
+ border-bottom: 100px solid $home-header-title-color;
215
+
216
+ .banner-content {
217
+ > a {
218
+ display: none;
219
+ }
294
220
  }
221
+ }
295
222
 
296
- >a {
223
+ @media screen and (min-width: 993px) {
224
+ display: flex;
225
+ padding: 40px 10px 40px 10px;
297
226
 
298
- &:visited {
299
- color: $footer-links-color;
300
- }
227
+ .img {
228
+ width: $site-banner-picture-sze_wdth;
301
229
 
302
- &:hover {
303
- color: $footer-links-hover-color;
304
- }
230
+ > img {
231
+ @include animation-fade-in(2.65);
232
+ }
305
233
  }
306
- }
307
234
 
308
- .Product_footer {
309
- list-style: none;
310
- color: $text-color;
311
- width: calc(100% - (#{$spacing-unit} / 2));
312
- padding: 0 ($spacing-unit / 2);
235
+ .banner-content {
236
+ transform: translateX(30vw);
237
+ animation: slide 1250ms cubic-bezier(0.75, 0, 0.33, 1) forwards;
238
+ animation-delay: 2s;
313
239
 
314
- &:first-child {
315
- padding-right: $spacing-unit / 2;
316
- padding-left: 0;
317
- padding-bottom: 1px;
318
- font-size: 0.6cm;
319
- color: $text-color;
320
- font-weight: 900;
240
+ > a {
241
+ display: block;
242
+ }
321
243
  }
244
+ }
245
+ }
322
246
 
323
- &:last-child:hover {
324
- color: $text-color;
325
- }
326
247
 
327
- &:last-child {
328
- padding-right: 0;
329
- }
330
248
 
331
- &:hover {
332
- color: $text-color;
333
- text-decoration: none;
334
- }
249
+ .text-muted {
250
+ @include text-muted;
335
251
  }
336
252
 
337
- @media screen and (min-width: $mobile-width) {
338
- .footer-col-wrapper {
339
- display: flex;
340
- }
341
-
342
- .footer-col {
343
- margin-bottom: $spacing-unit / 2;
344
- width: calc(28% - (#{$spacing-unit} / 2));
345
- padding: 0 ($spacing-unit / 2);
253
+ .text-unmuted {
254
+ @include text-unmuted;
255
+ }
346
256
 
347
- &:first-child {
348
- padding-right: $spacing-unit / 2;
349
- padding-left: 0;
350
- }
257
+ //
258
+ // Posts
259
+ //
260
+ .post-header {
261
+ margin-bottom: $font-spacing;
262
+ }
351
263
 
352
- &:last-child {
353
- padding-right: 0;
354
- padding-left: $spacing-unit / 2;
355
- }
356
- }
264
+ .post-title {
265
+ @include relative-font-size(2.925);
266
+ line-height: 1.15;
267
+ margin-bottom: 5px;
357
268
 
358
- .footer-middle {
359
- margin-bottom: $spacing-unit / 2;
360
- width: calc(35% - (#{$spacing-unit} / 2));
361
- padding: 0 ($spacing-unit / 2);
269
+ @media screen and (min-width: $pc-width) {
270
+ @include relative-font-size(3.7);
271
+ }
272
+ }
273
+ .post-list {
274
+ padding: 9px;
275
+ margin-left: 0;
276
+ list-style: none;
362
277
 
363
- &:first-child {
364
- padding-right: $spacing-unit / 2;
365
- padding-left: 0;
278
+ .post {
279
+ border-bottom: 2px solid $border-color;
280
+ padding-bottom: 10px;
281
+ padding-top: 10px;
282
+
283
+ .post-meta {
284
+ font-size: $small-font-size;
285
+ color: $text-color;
286
+ word-spacing: 1px;
287
+ }
288
+
289
+ .post-link {
290
+ @include relative-font-size(3);
291
+ line-height: 1.5;
292
+ }
293
+
294
+ .post-info {
295
+ display: flex;
296
+ justify-content: space-between;
297
+ padding-bottom: 15px;
298
+ cursor: default;
299
+ user-select: none;
300
+ -moz-user-select: none;
301
+ -khtml-user-select: none;
302
+ -webkit-user-select: none;
303
+ -o-user-select: none;
304
+ align-items: baseline;
305
+ line-height: 1.5;
306
+
307
+ .post-info-date {
308
+ color: $text-mute-color;
309
+ font-size: $small-font-size;
310
+ word-spacing: 1px;
311
+
312
+ &::before {
313
+ content: "calendar_today";
314
+ font-family: "Material Icons Round";
315
+ font-size: 12px;
316
+ line-height: 1;
317
+ padding-right: 5px;
366
318
  }
367
-
368
- &:last-child {
369
- padding-right: 0;
370
- padding-left: $spacing-unit / 2;
319
+ }
320
+
321
+ .post-info-pin {
322
+ background-color: $table-header-bg-color;
323
+ color: $text-mute-color;
324
+ border-radius: 5px;
325
+ padding: 2px 5px 2px 5px;
326
+ cursor: default;
327
+ user-select: none;
328
+ -moz-user-select: none;
329
+ -khtml-user-select: none;
330
+ -webkit-user-select: none;
331
+ -o-user-select: none;
332
+ display: flex;
333
+ align-items: center;
334
+ gap: 4px;
335
+
336
+ > span {
337
+ transform: rotate(45deg);
338
+ font-size: 15px;
339
+ line-height: 1.4rem;
340
+ height: 1.3rem;
371
341
  }
372
- }
373
-
374
- .footer-last {
375
- margin-bottom: $spacing-unit / 2;
376
- width: calc(35% - (#{$spacing-unit} / 2));
377
- padding: 0 ($spacing-unit / 2);
378
342
 
379
- &:first-child {
380
- padding-right: $spacing-unit / 2;
381
- padding-left: 0;
343
+ > p {
344
+ margin-bottom: 0;
345
+ display: none;
346
+ text-transform: capitalize;
382
347
  }
383
348
 
384
- &:last-child {
385
- padding-right: 0;
386
- padding-left: $spacing-unit / 2;
349
+ @media screen and (min-width: $mobile-width) {
350
+ > p {
351
+ display: inline-block;
352
+ }
387
353
  }
354
+ }
388
355
  }
389
- }
390
-
391
356
 
357
+ > p {
358
+ // Make the description shorter
359
+ margin: 0;
360
+ overflow: hidden;
361
+ text-overflow: ellipsis;
362
+ display: -webkit-box;
363
+ -webkit-line-clamp: 3; // line height
364
+ -webkit-box-orient: vertical;
365
+ }
392
366
 
393
- //
394
- // page content
395
- //
396
- .page-content {
397
- padding: $spacing-unit 0;
398
- flex: 1 0 auto;
399
- }
400
-
401
- .page-heading {
402
- @include relative-font-size(2);
367
+ > h1,
368
+ h2,
369
+ h3,
370
+ h4,
371
+ h5,
372
+ h6 {
373
+ font-size: $font-size;
374
+ }
375
+ }
403
376
  }
404
377
 
405
- .post-list-heading {
406
- @include relative-font-size(1.75);
407
- }
378
+ .post-info {
379
+ display: flex;
380
+ justify-content: space-between;
381
+ padding-bottom: 15px;
382
+ cursor: default;
383
+ user-select: none;
384
+ -moz-user-select: none;
385
+ -khtml-user-select: none;
386
+ -webkit-user-select: none;
387
+ -o-user-select: none;
388
+ align-items: baseline;
408
389
 
409
- //
410
- // Posts
411
- //
390
+ .post-info-date {
391
+ color: $text-mute-color;
392
+ font-size: $small-font-size;
393
+ word-spacing: 1px;
412
394
 
413
- .post-list {
414
- padding: 9px;
415
- margin-left: 0;
416
- list-style: none;
395
+ &::before {
396
+ content: "calendar_today";
397
+ font-family: "Material Icons Round";
398
+ font-size: 12px;
399
+ line-height: 1;
400
+ padding-right: 5px;
401
+ }
402
+ }
417
403
 
418
- >li {
419
- border-bottom: 3px solid $border-color;
420
- padding-bottom: 5px;
421
- >p {
422
- // Make the description shorter
423
- margin: 0;
424
- overflow: hidden;
425
- text-overflow: ellipsis;
426
- display: -webkit-box;
427
- -webkit-line-clamp: 3; // line height
428
- -webkit-box-orient: vertical;
429
- }
404
+ .post-info-pin {
405
+ background-color: $table-header-bg-color;
406
+ color: $text-mute-color;
407
+ border-radius: 5px;
408
+ padding: 2px 5px 2px 5px;
409
+ cursor: default;
410
+ user-select: none;
411
+ -moz-user-select: none;
412
+ -khtml-user-select: none;
413
+ -webkit-user-select: none;
414
+ -o-user-select: none;
415
+ display: flex;
416
+ align-items: center;
417
+ gap: 4px;
430
418
 
431
- >h1,
432
- h2,
433
- h3,
434
- h4,
435
- h5,
436
- h6 {
437
- font-size: $font-size;
438
- }
419
+ > span {
420
+ transform: rotate(45deg);
421
+ font-size: 15px;
422
+ line-height: 1.4rem;
423
+ height: 1.3rem;
439
424
  }
440
425
 
441
- }
442
-
443
- .post-meta {
444
- font-size: $small-font-size;
445
- color: $text-color;
446
- word-spacing: 1px;
447
- }
426
+ > p {
427
+ margin-bottom: 0;
428
+ display: none;
429
+ text-transform: capitalize;
430
+ }
448
431
 
449
- .text-muted {
450
- color: $footer-head-link-color;
432
+ @media screen and (min-width: $mobile-width) {
433
+ > p {
434
+ display: inline-block;
435
+ }
436
+ }
437
+ }
451
438
  }
452
439
 
453
- .text-unmuted {
454
- color: $text-color;
455
- }
440
+ //
441
+ // Site footer
442
+ //
443
+ .site-footer {
444
+ background-color: $footer-bg-color;
445
+ padding-top: $font-spacing;
446
+ padding-bottom: 10px;
456
447
 
457
- .post-link {
458
- padding-top: 5px;
459
- display: block;
460
- @include relative-font-size(2);
461
- }
448
+ .site-footer-wrapper {
449
+ display: flex;
450
+ flex-direction: column-reverse;
451
+ }
462
452
 
463
- .post-header {
464
- margin-bottom: $spacing-unit;
465
- }
453
+ .footer-col {
454
+ list-style: none;
455
+ font-size: 20px;
456
+ margin-bottom: 10px;
466
457
 
467
- .post-title {
468
- @include relative-font-size(2.925);
469
- line-height: 1.15;
470
- margin-bottom: 5px;
458
+ .links-footer {
459
+ width: calc(100% - (#{$font-spacing} / 2));
460
+ transition: $transition-links;
461
+ word-break: break-all;
471
462
 
472
- @media screen and (min-width: $pc-width) {
473
- @include relative-font-size(3);
474
- }
475
- }
463
+ &:first-child {
464
+ font-weight: 700;
465
+ letter-spacing: 1px;
466
+ text-transform: uppercase;
467
+ margin-bottom: 10px;
468
+ }
476
469
 
477
- .post-content {
478
- margin-bottom: $spacing-unit;
470
+ &:not(:first-child) {
471
+ padding: 2px 0;
472
+ }
479
473
 
480
- h4,
481
- h5,
482
- h6 {
483
- margin-top: $spacing-unit;
484
- }
474
+ > a {
475
+ color: rgba(128, 134, 139, 0.57);
476
+ font-weight: 500;
485
477
 
486
- h2 {
487
- @include relative-font-size(1.75);
478
+ &:visited {
479
+ color: rgba(128, 134, 139, 0.57);
480
+ }
488
481
 
489
- @media screen and (min-width: $pc-width) {
490
- @include relative-font-size(2);
482
+ &:hover {
483
+ color: $footer-links-hover-color;
491
484
  }
485
+ }
492
486
  }
493
487
 
494
- h3 {
495
- @include relative-font-size(1.375);
488
+ .footer-product {
489
+ list-style: none;
490
+ color: $text-color;
491
+ width: calc(100% - (#{$font-spacing} / 2));
492
+ padding: 0 ($font-spacing / 2);
496
493
 
497
- @media screen and (min-width: $pc-width) {
498
- @include relative-font-size(1.625);
499
- }
500
- }
494
+ &:first-child {
495
+ padding: 1px 0px 0px;
496
+ font-size: 2rem;
497
+ font-weight: 900;
498
+ }
501
499
 
502
- h4 {
503
- @include relative-font-size(1.25);
500
+ &:hover {
501
+ color: $text-color;
502
+ text-decoration: none;
503
+ }
504
504
  }
505
+ }
505
506
 
506
- h5 {
507
- @include relative-font-size(1.125);
507
+ @media screen and (min-width: 1000px) {
508
+ .site-footer-wrapper {
509
+ flex-direction: row;
508
510
  }
509
511
 
510
- h6 {
511
- @include relative-font-size(1.0625);
512
+ .footer-col {
513
+ &:not(:first-child) {
514
+ @include footer-wrapper;
515
+ }
516
+
517
+ &:first-child {
518
+ @include footer-wrapper;
519
+ width: calc(42% - (#{$font-spacing} / 2));
520
+ }
521
+ }
522
+ }
523
+ }
524
+ .footer-info {
525
+ padding-top: 10px;
526
+ border-top: 1px solid $border-color;
527
+ font-size: 0.8rem;
528
+ justify-content: space-between;
529
+ display: flex;
530
+ flex-direction: column;
531
+ padding: 10px 10px 0;
532
+ margin-left: 0px;
533
+ margin-right: 0px;
534
+
535
+ > span {
536
+ margin-bottom: 3px;
537
+
538
+ > a {
539
+ color: #9e9e9e;
540
+
541
+ &:visited {
542
+ color: #9e9e9e;
543
+ }
544
+
545
+ &:hover {
546
+ color: $text-color;
547
+ }
512
548
  }
549
+ }
550
+
551
+ @media screen and (min-width: 692px) {
552
+ flex-direction: row;
553
+ margin-left: 100px;
554
+ margin-right: 100px;
555
+ }
513
556
  }
514
557
 
515
- //
558
+ //
516
559
  // Post Nav
517
- //
560
+ //
518
561
 
519
562
  .post-nav {
520
- padding-top: 5px;
521
- display: inline;
522
- list-style: none;
523
- display: flex;
524
- justify-content: space-evenly;
563
+ padding-top: 5px;
564
+ display: inline;
565
+ list-style: none;
566
+ display: flex;
567
+ justify-content: space-evenly;
568
+ gap: 80px;
569
+ -ms-flex-align: center;
570
+ align-items: center;
571
+ margin: 0px;
572
+
573
+ @media screen and (min-width: $mobile-width) {
525
574
  gap: 100px;
526
- -ms-flex-align: center;
527
- align-items: center;
528
- margin: 0px;
575
+ }
529
576
  }
530
577
 
531
578
  .post-nav-svg {
532
- fill: $footer-links-color;
533
- width: 33px;
534
- height: 33px;
535
- text-align: center;
536
- border-radius: 100%;
537
- padding: 5px 3px 2px 5px;
538
- transition: $tansitions-page-bar;
579
+ color: $footer-links-color;
580
+ transition: $tansitions-page-bar;
581
+ padding: 8px;
582
+ border-radius: 50px;
539
583
 
540
- &:hover {
541
- background-color: rgba(255, 255, 255, .10);
542
- }
584
+ &:hover {
585
+ background-color: rgba(255, 255, 255, 0.1);
586
+ }
543
587
  }
544
588
 
545
589
  .disable-svg {
546
- cursor: not-allowed;
547
- fill: $footer-links-hover-color;
590
+ cursor: not-allowed;
591
+ color: $text-mute-color;
548
592
  }
549
593
 
550
594
  .post-nav-num {
551
- user-select: none;
552
- -moz-user-select: none;
553
- -khtml-user-select: none;
554
- -webkit-user-select: none;
555
- -o-user-select: none;
556
- cursor: default;
557
- display: inline;
558
- color: $footer-head-link-color;
595
+ user-select: none;
596
+ -moz-user-select: none;
597
+ -khtml-user-select: none;
598
+ -webkit-user-select: none;
599
+ -o-user-select: none;
600
+ cursor: default;
601
+ display: inline;
602
+ @include text-muted;
559
603
  }
560
604
 
561
- //
605
+ //
562
606
  // Post footer
563
- //
564
- .post-footer {
565
- padding-top: 9px;
566
- border-top: 3px solid $border-color;
567
- margin: 0px;
568
-
569
- >a {
570
- >svg {
571
- fill: $footer-links-color;
572
- width: 33px;
573
- height: 33px;
574
- text-align: center;
575
- border-radius: 100%;
576
- padding: 5px 3px 2px 5px;
577
- transition: $tansitions-page-bar;
578
-
579
- &:hover {
580
- background-color: rgba(255, 255, 255, .10);
581
- }
582
- }
583
- }
584
- }
585
-
586
-
587
-
588
- //
589
- // Grid Helpers
590
- //
591
- @media screen and (min-width: $pc-width) {
592
- .one-half {
593
- width: calc(50% - (#{$spacing-unit} / 2));
594
- }
595
- }
596
-
597
- .btn {
598
- padding: 8px 25px;
599
- border: none;
600
- border-radius: 5px;
601
- cursor: pointer;
602
- color: $text-color;
603
- background-color: $btn-bg-color;
604
- border-color: $btn-bg-color;
605
- transition: $transition-btn;
606
-
607
- &,
608
- &:visited {
609
- color: $text-color;
610
- }
611
-
612
- &:hover {
613
- color: $btn-text-hover-color;
614
- text-decoration: none;
615
- background-color: $btn-color-hover;
616
- border-color: $btn-color-hover;
617
- }
618
- }
619
-
620
- //
621
- // Back to top(BTT)
622
607
  //
623
- #back-to-top {
624
- display: none;
625
- position: fixed;
626
- bottom: 20px;
627
- right: 20px;
628
- width: 50px;
629
- height: 50px;
630
- background-color: $BTT-bg-color;
631
- fill: $BTT-svg-color;
632
- border: 2px solid $BTT-bg-color;
633
- cursor: pointer;
634
- text-align: center;
635
- border-radius: 50%;
636
-
637
- svg {
638
- padding-top: 3px;
639
- }
640
-
641
- }
642
-
643
- .BTT-Entrance {
644
- animation-duration: 0.5s;
645
- animation-fill-mode: both;
646
- animation-name: BTT-Entrance;
647
- }
648
-
649
- @keyframes BTT-Entrance {
650
- from {
651
- opacity: 0;
652
- transform: translate3d(0, 100%, 0);
653
- }
654
-
655
- to {
656
- opacity: 1;
657
- transform: translate3d(0, 0, 0);
658
- }
659
- }
660
-
661
- .BTT-Exit {
662
- animation-duration: 0.25s;
663
- animation-fill-mode: both;
664
- animation-name: BTT-Exit;
608
+ .post-footer {
609
+ padding-top: 13px;
610
+ border-top: 3px solid $border-color;
611
+ margin: 0px;
665
612
  }
666
-
667
- @keyframes BTT-Exit {
668
- from {
669
- opacity: 1;
670
- }
671
-
672
- to {
673
- opacity: 0;
674
- transform: translate3d(0, 100%, 0);
675
- }
676
- }