jekyll-theme-fica 0.1.5 → 0.2.0

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