monitoring-jekyll-theme 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,23 +1,6 @@
1
- @font-face {
2
- font-family: Optiker;
3
- font-weight: 300;
4
-
5
- src: url('../../assets/fonts/Optiker-K.woff2');
6
- }
7
-
8
- @font-face {
9
- font-family: IBMPlexMono;
10
- font-weight: 300;
11
-
12
- src: url('../../assets/fonts/IBMPlexMono-Bold.ttf');
13
- }
14
-
15
- @font-face {
16
- font-family: PublicSans;
17
- font-weight: 300;
18
-
19
- src: url('../../assets/fonts/PublicSans-Regular.woff2');
20
- }
1
+ /*------------------
2
+ LAYOUT
3
+ ------------------*/
21
4
 
22
5
  body {
23
6
  overflow: scroll;
@@ -31,14 +14,25 @@ body {
31
14
  header {
32
15
  margin-bottom: -1.5em !important;
33
16
  color: #fefefe;
34
- border-bottom: 17px solid rgb(37, 2, 0);
17
+ /* border-bottom: 17px solid rgb(37, 2, 0); */
35
18
  background: #333;
36
- background: linear-gradient(to right, rgb(68, 31, 29), rgb(37, 2, 0));
19
+ background: linear-gradient(90deg,#89216b,#480602);
20
+ box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
21
+ }
22
+
23
+ header a {
24
+ display: block;
25
+ padding: 1em 0 1em 0.5em;
26
+ text-decoration: none;
27
+ font-weight: 200;
28
+ &, small {
29
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
30
+ }
37
31
  }
38
32
 
39
33
  .wrapper {
40
34
  margin: auto;
41
- padding: 0 5vw 0.5em;
35
+ padding: 0 1.5em 0.5em;
42
36
  }
43
37
 
44
38
  .wrapper:not(header) {
@@ -46,7 +40,8 @@ header {
46
40
  max-width: 75em;
47
41
  }
48
42
 
49
- body, .article {
43
+ body,
44
+ .article {
50
45
  margin: auto;
51
46
  line-height: 1.8125rem;
52
47
  font-size: 1rem;
@@ -56,18 +51,19 @@ body, .article {
56
51
  TYPOGRAPHY
57
52
  ------------------*/
58
53
 
59
- h1, .h1 {
54
+ h1,
55
+ .h1 {
60
56
  margin-top: 1.8125rem;
61
57
  margin-bottom: 3.625rem;
62
58
  line-height: 5.4375rem;
63
59
  font-size: 5.1875rem;
64
60
  }
65
61
 
66
- h2, .h2 {
62
+ h2,
63
+ .h2 {
67
64
  margin-top: 1.8125rem;
68
65
  margin-bottom: 1.8125rem;
69
66
  line-height: 3.625rem;
70
- font-family: Optiker, sans-serif;
71
67
  font-size: 3rem;
72
68
  ;
73
69
  }
@@ -81,39 +77,48 @@ h2:not(:first-of-type):before {
81
77
  background: #555;
82
78
  }
83
79
 
84
- h2 + p, h3 + p {
80
+ h2,h3 {
81
+ font-family: Optiker, sans-serif;
82
+ }
83
+
84
+ h2+p,
85
+ h3+p {
85
86
  margin-top: -2.5rem;
86
87
  margin-bottom: 1em;
87
88
  line-height: 1.2;
88
89
  font-size: 0.85em;
89
90
  }
90
91
 
91
- h3 + p {
92
+ h3+p {
92
93
  margin-top: -1.8125rem;
93
94
  }
94
95
 
95
- h2 small, h3 small {
96
+ h2 small,
97
+ h3 small {
96
98
  font-family: PublicSans, sans-serif;
97
99
  }
98
100
 
99
- header h1, h3, .h3 {
101
+ header h1,
102
+ h3,
103
+ .h3 {
100
104
  margin-top: 1.8125rem;
101
105
  margin-bottom: 1.8125rem;
102
106
  line-height: 1.8125rem;
103
- font-family: Optiker, sans-serif;
104
107
  font-size: 1.75rem;
105
108
  }
106
109
 
107
- h4, .h4 {
110
+ h4,
111
+ .h4 {
108
112
  margin-top: 1.8125rem;
109
113
  margin-bottom: 0;
110
114
  line-height: 1.8125rem;
111
115
  font-size: 1rem;
112
116
  }
113
117
 
114
- header h1, header p {
118
+ header h1,
119
+ header p {
115
120
  display: flex;
116
- align-content: center;
121
+ align-items: baseline;
117
122
  margin: 0;
118
123
  }
119
124
 
@@ -121,7 +126,12 @@ header a {
121
126
  color: currentColor;
122
127
  }
123
128
 
124
- p, ul, ol, pre, table, blockquote {
129
+ p,
130
+ ul,
131
+ ol,
132
+ pre,
133
+ table,
134
+ blockquote {
125
135
  margin-top: 0;
126
136
  margin-bottom: 1.5rem;
127
137
  }
@@ -139,6 +149,10 @@ a {
139
149
  text-align: center;
140
150
  }
141
151
 
152
+ /*------------------
153
+ LIST
154
+ ------------------*/
155
+
142
156
  .list-actions {
143
157
  width: 100%;
144
158
  max-width: 100%;
@@ -149,18 +163,21 @@ a {
149
163
  margin-bottom: -1em;
150
164
  }
151
165
 
152
- .list-actions ol, .list-actions ul {
166
+ .list-actions ol,
167
+ .list-actions ul {
153
168
  margin: 2rem 0;
154
169
  padding: 0;
155
170
  }
156
171
 
157
- .list-actions-grid ol, .list-actions-grid ul {
172
+ .list-actions-grid ol,
173
+ .list-actions-grid ul {
158
174
  display: grid;
159
175
  grid-template-columns: repeat(2, minmax(100px, 1fr));
160
176
  grid-gap: 0 1em;
161
177
  }
162
178
 
163
- .list-actions ol li, .list-actions ul li {
179
+ .list-actions ol li,
180
+ .list-actions ul li {
164
181
  position: relative;
165
182
  display: flex;
166
183
  justify-content: space-between;
@@ -182,7 +199,8 @@ a {
182
199
  word-break: break-all;
183
200
  }
184
201
 
185
- .list-actions ol li > *, .list-actions ul li > * {
202
+ .list-actions ol li>*,
203
+ .list-actions ul li>* {
186
204
  display: flex;
187
205
  align-items: center;
188
206
  flex: 0 1 auto;
@@ -190,22 +208,26 @@ a {
190
208
  padding: 1em 2em 1em 1em;
191
209
  }
192
210
 
193
- .list-actions ol li > *:first-child, .list-actions ul li > *:first-child {
211
+ .list-actions ol li>*:first-child,
212
+ .list-actions ul li>*:first-child {
194
213
  position: relative;
195
214
  overflow: scroll;
196
215
  flex-grow: 999;
197
216
  white-space: nowrap;
198
217
  }
199
218
 
200
- .list-actions ol li > *:last-child, .list-actions ul li > *:last-child {
219
+ .list-actions ol li>*:last-child,
220
+ .list-actions ul li>*:last-child {
201
221
  padding-right: 1em;
202
222
  }
203
223
 
204
- .list-actions-title ol li, .list-actions-title ul li {
224
+ .list-actions-title ol li,
225
+ .list-actions-title ul li {
205
226
  margin-top: 6em;
206
227
  }
207
228
 
208
- .list-actions ol li h4, .list-actions ul li h4 {
229
+ .list-actions ol li h4,
230
+ .list-actions ul li h4 {
209
231
  position: absolute;
210
232
  top: -1.5em;
211
233
  left: 0;
@@ -216,7 +238,8 @@ a {
216
238
  background: #333;
217
239
  }
218
240
 
219
- .list-actions ol li b, .list-actions ul li b {
241
+ .list-actions ol li b,
242
+ .list-actions ul li b {
220
243
  justify-content: center;
221
244
  min-width: 6rem;
222
245
  max-width: 15rem;
@@ -279,6 +302,7 @@ a {
279
302
  transform: translateY(-50%);
280
303
  text-align: center;
281
304
  color: currentColor;
305
+ font-family: IBMPlexMono, optiker, sans-serif;
282
306
 
283
307
  font-variant-numeric: tabular-nums;
284
308
  }
@@ -315,7 +339,7 @@ a {
315
339
 
316
340
  .list-rank b {
317
341
  padding: 0.25em 0.4em;
318
- font-family: optiker;
342
+ font-family: IBMPlexMono, optiker, sans-serif;
319
343
  font-size: 1.3rem;
320
344
  color: #fefefe;
321
345
  border-radius: 50%;
@@ -346,11 +370,21 @@ a {
346
370
  order: 4;
347
371
  }
348
372
 
349
- .list-actions ul li.progressive-web-app ~ .progressive-web-app, .list-actions ul li.performance ~ .performance, .list-actions ul li.best-practices ~ .best-practices, .list-actions ul li.accessibility ~ .accessibility, .list-actions ul li.seo ~ .seo, .list-actions ul li.pwa ~ .pwa {
373
+ .list-actions ul li.progressive-web-app~.progressive-web-app,
374
+ .list-actions ul li.performance~.performance,
375
+ .list-actions ul li.best-practices~.best-practices,
376
+ .list-actions ul li.accessibility~.accessibility,
377
+ .list-actions ul li.seo~.seo,
378
+ .list-actions ul li.pwa~.pwa {
350
379
  margin-top: -1px;
351
380
  }
352
381
 
353
- .list-actions ul li.progressive-web-app ~ .progressive-web-app::before, .list-actions ul li.performance ~ .performance::before, .list-actions ul li.best-practices ~ .best-practices::before, .list-actions ul li.accessibility ~ .accessibility::before, .list-actions ul li.seo ~ .seo::before, .list-actions ul li.pwa ~ .pwa::before {
382
+ .list-actions ul li.progressive-web-app~.progressive-web-app::before,
383
+ .list-actions ul li.performance~.performance::before,
384
+ .list-actions ul li.best-practices~.best-practices::before,
385
+ .list-actions ul li.accessibility~.accessibility::before,
386
+ .list-actions ul li.seo~.seo::before,
387
+ .list-actions ul li.pwa~.pwa::before {
354
388
  display: none;
355
389
  }
356
390
 
@@ -387,7 +421,7 @@ a {
387
421
  display: none !important;
388
422
  }
389
423
 
390
- .grid > * {
424
+ .grid>* {
391
425
  flex: 1 1 auto;
392
426
  }
393
427
 
@@ -406,6 +440,7 @@ a {
406
440
  padding: 1em;
407
441
  text-align: center;
408
442
  border: 1px solid;
443
+ font-family: IBMPlexMono, optiker, sans-serif;
409
444
  }
410
445
 
411
446
  .grid-score span {
@@ -436,7 +471,7 @@ a {
436
471
  margin: 0 -1rem 1.5rem;
437
472
  }
438
473
 
439
- .flex > * {
474
+ .flex>* {
440
475
  flex: 1;
441
476
  margin: 0 1rem;
442
477
  max-width: calc(100% - 2rem);
@@ -448,7 +483,7 @@ a {
448
483
  grid-template-columns: repeat(10, minmax(100px, 150px));
449
484
  }
450
485
 
451
- .flex > * {
486
+ .flex>* {
452
487
  max-width: calc(50% - 2rem);
453
488
  }
454
489
  }
@@ -466,7 +501,7 @@ a {
466
501
  width: 100%;
467
502
  }
468
503
 
469
- .flex-list-color > * {
504
+ .flex-list-color>* {
470
505
  position: relative;
471
506
  float: left;
472
507
  height: 2rem;
@@ -494,7 +529,8 @@ a {
494
529
  padding: 0;
495
530
  }
496
531
 
497
- .flex-list > li, .flex-list > div {
532
+ .flex-list>li,
533
+ .flex-list>div {
498
534
  display: flex;
499
535
  clear: both;
500
536
  margin: 0 0 0.3em;
@@ -502,7 +538,7 @@ a {
502
538
  width: 100%;
503
539
  }
504
540
 
505
- .flex-list > li a .flex-list > div a {
541
+ .flex-list>li a .flex-list>div a {
506
542
  display: block;
507
543
  overflow: hidden;
508
544
  max-width: 50%;
@@ -510,11 +546,13 @@ a {
510
546
  text-overflow: ellipsis;
511
547
  }
512
548
 
513
- .flex-list > li > *, .flex-list > div > * {
549
+ .flex-list>li>*,
550
+ .flex-list>div>* {
514
551
  flex: 1;
515
552
  }
516
553
 
517
- .flex-list > li > *:first-child, .flex-list > div > *:first-child {
554
+ .flex-list>li>*:first-child,
555
+ .flex-list>div>*:first-child {
518
556
  padding: 0 1.5em 0 0;
519
557
  }
520
558
 
@@ -575,12 +613,12 @@ a {
575
613
  }
576
614
 
577
615
  .score-up {
578
- background: rgba(255, 75, 75, 0.15);
616
+ background: rgba(255, 75, 75, 0.05);
579
617
  box-shadow: inset 0 0 4px rgba(255, 75, 75, 0.45);
580
618
  }
581
619
 
582
620
  .score-down {
583
- background: rgba(125, 255, 100, 0.15);
621
+ background: rgba(125, 255, 100, 0.05);
584
622
  box-shadow: inset 0 0 4px rgba(125, 255, 100, 0.75);
585
623
  }
586
624
 
@@ -588,7 +626,7 @@ a {
588
626
  color: #004c6d;
589
627
  background: #fff;
590
628
  /*letter-spacing: -4px;*/
591
- box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.1);
629
+ box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.2);
592
630
  text-shadow: none;
593
631
  }
594
632
 
@@ -606,9 +644,9 @@ a {
606
644
 
607
645
  .number {
608
646
  line-height: 1.5;
609
- font-family: IBMPlexMono, sans-serif;
610
647
  font-size: 1.5rem;
611
648
  font-weight: bold;
649
+ font-family: IBMPlexMono, optiker, sans-serif;
612
650
  }
613
651
 
614
652
  .date p {
@@ -639,6 +677,8 @@ a {
639
677
  .pointseco {
640
678
  color: #fefefe;
641
679
  background: #22961e !important;
680
+ box-shadow: inset 0 -1px 8px rgba(0, 0, 0, 0.2);
681
+
642
682
  }
643
683
 
644
684
  .top path {
@@ -689,12 +729,12 @@ a {
689
729
  padding-left: 1em;
690
730
  }
691
731
 
692
- .axe > div {
732
+ .axe>div {
693
733
  display: flex;
694
734
  width: 100%;
695
735
  }
696
736
 
697
- .axe > div strong {
737
+ .axe>div strong {
698
738
  flex: 1;
699
739
  }
700
740
 
@@ -756,11 +796,12 @@ a {
756
796
  padding: 1em;
757
797
  border: 1px solid rgba(0, 0, 0, 0.1);
758
798
  background: rgba(0, 0, 0, 0.08);
759
- box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1), ;
799
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
760
800
  }
761
801
 
762
802
  .js-tabcontent h3 {
763
803
  margin: 0.5em 0 1em;
804
+ text-transform: capitalize;
764
805
  }
765
806
 
766
807
  [aria-hidden='true'].tabs-tabs__content {
@@ -771,7 +812,8 @@ a {
771
812
  ACCORDEON
772
813
  ------------------*/
773
814
 
774
- .js-to_expand[aria-hidden=true], .js-to_expand[data-hidden=true] {
815
+ .js-to_expand[aria-hidden=true],
816
+ .js-to_expand[data-hidden=true] {
775
817
  display: none;
776
818
  }
777
819
 
@@ -793,7 +835,7 @@ a {
793
835
  margin-right: 0.5em;
794
836
  padding: 0 0.2em;
795
837
  line-height: 0;
796
- font-family: monospace;
838
+ font-family: IBMPlexMono, optiker, sans-serif;
797
839
  color: #fefefe;
798
840
  background: #333;
799
841
  }
@@ -802,7 +844,8 @@ a {
802
844
  content: '-';
803
845
  }
804
846
 
805
- .js-expandmore-button[aria-expanded=true] > .expandmore__symbol:before, .js-expandmore-button[data-expanded=true] > .expandmore__symbol:before {
847
+ .js-expandmore-button[aria-expanded=true]>.expandmore__symbol:before,
848
+ .js-expandmore-button[data-expanded=true]>.expandmore__symbol:before {
806
849
  content: '− ';
807
850
  }
808
851
 
@@ -841,7 +884,7 @@ a {
841
884
  }
842
885
  }
843
886
 
844
- .progress + .progress {
887
+ .progress+.progress {
845
888
  padding-top: 0;
846
889
  }
847
890
 
@@ -853,34 +896,36 @@ a {
853
896
  margin: auto;
854
897
  padding: 0;
855
898
  }
899
+
856
900
  .progress li {
857
901
  min-width: 8rem;
858
902
  list-style: none;
859
903
  }
860
904
 
861
- .progress > * {
905
+ .progress>* {
862
906
  display: flex;
863
907
  align-items: center;
864
908
  margin: 0;
865
909
  padding: 1em 0;
866
910
  max-width: 100%;
867
911
  border: 1px solid rgba(0, 0, 0, 0.3);
868
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
912
+ box-shadow: inset 0 0 4px rgba(0,0,0,0.12);
913
+
869
914
  }
870
915
 
871
- .progress > *:not(:first-child) {
916
+ .progress>*:not(:first-child) {
872
917
  min-height: 7em;
873
918
  }
874
919
 
875
- .progress > div:first-child {
920
+ .progress>div:first-child {
876
921
  display: flex;
877
922
  align-items: center;
878
923
  flex: 0 1 20%;
879
924
  justify-content: center;
880
925
  text-align: center;
881
926
  color: #fff;
882
- background: #333;
883
- box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
927
+ background: #2a0301;
928
+ box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.35);
884
929
  }
885
930
 
886
931
  .progress h4 {
@@ -929,7 +974,7 @@ a {
929
974
  min-height: 7em;
930
975
  }
931
976
 
932
- .progress-circular ul > li {
977
+ .progress-circular ul>li {
933
978
  position: relative;
934
979
  display: inline-block;
935
980
  flex: 1;
@@ -939,29 +984,29 @@ a {
939
984
  margin-bottom: 4.5em;
940
985
  }
941
986
 
942
- .progress-circular ul > li:before {
987
+ .progress-circular ul>li:before {
943
988
  position: absolute;
944
989
  content: attr(data-name);
945
990
  bottom: -2em;
946
991
  width: 100%;
947
992
  line-height: 1;
948
- font-family: Optiker, sans-serif;
993
+ font-family: IBMPlexMono, optiker, sans-serif;
949
994
  font-size: 1.5em;
950
995
  font-weight: bold;
951
996
  }
952
997
 
953
- .progress-circular ul > li:after {
998
+ .progress-circular ul>li:after {
954
999
  position: absolute;
955
1000
  z-index: 2;
956
1001
  content: attr(data-percent);
957
- top: 0;
1002
+ top: 5px;
958
1003
  left: 0;
959
1004
  display: flex;
960
1005
  align-items: center;
961
1006
  justify-content: center;
962
1007
  width: 100%;
963
1008
  height: 100%;
964
- font-family: Optiker, sans-serif;
1009
+ font-family: IBMPlexMono, optiker, sans-serif;
965
1010
  font-size: 2.3em;
966
1011
  text-align: center;
967
1012
  }
@@ -1003,7 +1048,6 @@ a {
1003
1048
  width: 75%;
1004
1049
  height: 1em;
1005
1050
  border: 1px solid #333;
1006
- border-radius: 5px;
1007
1051
  background: rgb(34, 150, 30);
1008
1052
  background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(48, 212, 42, 1) 20%, rgba(214, 129, 0, 1) 70%, rgba(176, 2, 2, 1) 100%);
1009
1053
  }
@@ -1018,23 +1062,26 @@ a {
1018
1062
  height: 1em;
1019
1063
  border-top: 1px solid #ccc;
1020
1064
  border-bottom: 1px solid #ccc;
1065
+ /* background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(34, 150, 30, 1) 50%, rgba(176, 2, 2, 1) 51%, rgba(176, 2, 2, 1) 100%); */
1021
1066
  }
1022
1067
 
1023
- .progress-bar-score, .progress-bar-tooltip {
1068
+ .progress-bar-score,
1069
+ .progress-bar-tooltip {
1024
1070
  position: absolute;
1025
1071
  padding: 0 1em;
1026
1072
  min-width: 1em;
1027
1073
  line-height: 1.3;
1028
1074
  transform: translate(-50%, -50%);
1029
- font-size: 1.3em;
1075
+ font-size: 1.1em;
1030
1076
  text-align: center;
1031
1077
  }
1032
1078
 
1033
1079
  .progress-bar-score {
1034
- font-family: optiker;
1080
+ font-family: IBMPlexMono, optiker, sans-serif;
1035
1081
  }
1036
1082
 
1037
- .progress-bar-score:first-child, .progress-bar-score:last-child {
1083
+ .progress-bar-score:first-child,
1084
+ .progress-bar-score:last-child {
1038
1085
  top: 45%;
1039
1086
  right: calc(100% + 2em);
1040
1087
  height: 2em;
@@ -1054,12 +1101,13 @@ a {
1054
1101
  background: #555;
1055
1102
  }
1056
1103
 
1057
- .progress-bar-score:not(:first-child):not(:last-child), .progress-bar-tooltip {
1104
+ .progress-bar-score:not(:first-child):not(:last-child),
1105
+ .progress-bar-tooltip {
1058
1106
  animation: slide 1s;
1059
1107
  }
1060
1108
 
1061
1109
  .progress-bar-score {
1062
- top: 100%;
1110
+ top: 130%;
1063
1111
  min-width: 26px;
1064
1112
  transform: translate(-50%, 35%);
1065
1113
 
@@ -1069,7 +1117,7 @@ a {
1069
1117
  .progress-bar-score:not(:first-child):not(:last-child)::before {
1070
1118
  position: absolute;
1071
1119
  content: '';
1072
- bottom: calc(100% - 3px);
1120
+ bottom: 100%;
1073
1121
  left: 50%;
1074
1122
  width: 0;
1075
1123
  height: 5px;
@@ -1080,7 +1128,7 @@ a {
1080
1128
  .progress-bar-score:not(:first-child):not(:last-child)::after {
1081
1129
  position: absolute;
1082
1130
  content: '';
1083
- bottom: 100%;
1131
+ bottom: 121%;
1084
1132
  left: 50%;
1085
1133
  width: 0;
1086
1134
  height: 0;
Binary file
Binary file