jekyll-theme-fica 0.1.8 → 0.2.2

Sign up to get free protection for your applications and to get access to all the features.
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
- }