monitoring-jekyll-theme 0.4.2 → 0.5.0

data/assets/css/styles.css

@@ -1,23 +1,6 @@
-@font-face {
-  font-family: Optiker;
-  font-weight: 300;
-
-  src: url('../../assets/fonts/Optiker-K.woff2');
-}
-
-@font-face {
-  font-family: IBMPlexMono;
-  font-weight: 300;
-
-  src: url('../../assets/fonts/IBMPlexMono-Bold.ttf');
-}
-
-@font-face {
-  font-family: PublicSans;
-  font-weight: 300;
-
-  src: url('../../assets/fonts/PublicSans-Regular.woff2');
-}
+/*------------------
+  LAYOUT
+------------------*/
 
 body {
   overflow: scroll;
@@ -31,14 +14,25 @@ body {
 header {
   margin-bottom: -1.5em !important;
   color: #fefefe;
-  border-bottom: 17px solid rgb(37, 2, 0);
+  /* border-bottom: 17px solid rgb(37, 2, 0); */
   background: #333;
-  background: linear-gradient(to right, rgb(68, 31, 29), rgb(37, 2, 0));
+  background: linear-gradient(90deg,#89216b,#480602);
+  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);
+}
+
+header a {
+  display: block;
+  padding: 1em 0 1em 0.5em;
+  text-decoration: none;
+  font-weight: 200;
+  &, small {
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  }
 }
 
 .wrapper {
   margin: auto;
-  padding: 0 5vw 0.5em;
+  padding: 0 1.5em 0.5em;
 }
 
 .wrapper:not(header) {
@@ -46,7 +40,8 @@ header {
   max-width: 75em;
 }
 
-body, .article {
+body,
+.article {
   margin: auto;
   line-height: 1.8125rem;
   font-size: 1rem;
@@ -56,18 +51,19 @@ body, .article {
   TYPOGRAPHY
 ------------------*/
 
-h1, .h1 {
+h1,
+.h1 {
   margin-top: 1.8125rem;
   margin-bottom: 3.625rem;
   line-height: 5.4375rem;
   font-size: 5.1875rem;
 }
 
-h2, .h2 {
+h2,
+.h2 {
   margin-top: 1.8125rem;
   margin-bottom: 1.8125rem;
   line-height: 3.625rem;
-  font-family: Optiker, sans-serif;
   font-size: 3rem;
   ;
 }
@@ -81,39 +77,48 @@ h2:not(:first-of-type):before {
   background: #555;
 }
 
-h2 + p, h3 + p {
+h2,h3 {
+  font-family: Optiker, sans-serif;
+}
+
+h2+p,
+h3+p {
   margin-top: -2.5rem;
   margin-bottom: 1em;
   line-height: 1.2;
   font-size: 0.85em;
 }
 
-h3 + p {
+h3+p {
   margin-top: -1.8125rem;
 }
 
-h2 small, h3 small {
+h2 small,
+h3 small {
   font-family: PublicSans, sans-serif;
 }
 
-header h1, h3, .h3 {
+header h1,
+h3,
+.h3 {
   margin-top: 1.8125rem;
   margin-bottom: 1.8125rem;
   line-height: 1.8125rem;
-  font-family: Optiker, sans-serif;
   font-size: 1.75rem;
 }
 
-h4, .h4 {
+h4,
+.h4 {
   margin-top: 1.8125rem;
   margin-bottom: 0;
   line-height: 1.8125rem;
   font-size: 1rem;
 }
 
-header h1, header p {
+header h1,
+header p {
   display: flex;
-  align-content: center;
+  align-items: baseline;
   margin: 0;
 }
 
@@ -121,7 +126,12 @@ header a {
   color: currentColor;
 }
 
-p, ul, ol, pre, table, blockquote {
+p,
+ul,
+ol,
+pre,
+table,
+blockquote {
   margin-top: 0;
   margin-bottom: 1.5rem;
 }
@@ -139,6 +149,10 @@ a {
   text-align: center;
 }
 
+/*------------------
+  LIST
+------------------*/
+
 .list-actions {
   width: 100%;
   max-width: 100%;
@@ -149,18 +163,21 @@ a {
   margin-bottom: -1em;
 }
 
-.list-actions ol, .list-actions ul {
+.list-actions ol,
+.list-actions ul {
   margin: 2rem 0;
   padding: 0;
 }
 
-.list-actions-grid ol, .list-actions-grid ul {
+.list-actions-grid ol,
+.list-actions-grid ul {
   display: grid;
   grid-template-columns: repeat(2, minmax(100px, 1fr));
   grid-gap: 0 1em;
 }
 
-.list-actions ol li, .list-actions ul li {
+.list-actions ol li,
+.list-actions ul li {
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -182,7 +199,8 @@ a {
   word-break: break-all;
 }
 
-.list-actions ol li > *, .list-actions ul li > * {
+.list-actions ol li>*,
+.list-actions ul li>* {
   display: flex;
   align-items: center;
   flex: 0 1 auto;
@@ -190,22 +208,26 @@ a {
   padding: 1em 2em 1em 1em;
 }
 
-.list-actions ol li > *:first-child, .list-actions ul li > *:first-child {
+.list-actions ol li>*:first-child,
+.list-actions ul li>*:first-child {
   position: relative;
   overflow: scroll;
   flex-grow: 999;
   white-space: nowrap;
 }
 
-.list-actions ol li > *:last-child, .list-actions ul li > *:last-child {
+.list-actions ol li>*:last-child,
+.list-actions ul li>*:last-child {
   padding-right: 1em;
 }
 
-.list-actions-title ol li, .list-actions-title ul li {
+.list-actions-title ol li,
+.list-actions-title ul li {
   margin-top: 6em;
 }
 
-.list-actions ol li h4, .list-actions ul li h4 {
+.list-actions ol li h4,
+.list-actions ul li h4 {
   position: absolute;
   top: -1.5em;
   left: 0;
@@ -216,7 +238,8 @@ a {
   background: #333;
 }
 
-.list-actions ol li b, .list-actions ul li b {
+.list-actions ol li b,
+.list-actions ul li b {
   justify-content: center;
   min-width: 6rem;
   max-width: 15rem;
@@ -279,6 +302,7 @@ a {
   transform: translateY(-50%);
   text-align: center;
   color: currentColor;
+  font-family: IBMPlexMono, optiker, sans-serif;
 
   font-variant-numeric: tabular-nums;
 }
@@ -315,7 +339,7 @@ a {
 
 .list-rank b {
   padding: 0.25em 0.4em;
-  font-family: optiker;
+  font-family: IBMPlexMono, optiker, sans-serif;
   font-size: 1.3rem;
   color: #fefefe;
   border-radius: 50%;
@@ -346,11 +370,21 @@ a {
   order: 4;
 }
 
-.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 {
+.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 {
   margin-top: -1px;
 }
 
-.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 {
+.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 {
   display: none;
 }
 
@@ -387,7 +421,7 @@ a {
   display: none !important;
 }
 
-.grid > * {
+.grid>* {
   flex: 1 1 auto;
 }
 
@@ -406,6 +440,7 @@ a {
   padding: 1em;
   text-align: center;
   border: 1px solid;
+  font-family: IBMPlexMono, optiker, sans-serif;
 }
 
 .grid-score span {
@@ -436,7 +471,7 @@ a {
   margin: 0 -1rem 1.5rem;
 }
 
-.flex > * {
+.flex>* {
   flex: 1;
   margin: 0 1rem;
   max-width: calc(100% - 2rem);
@@ -448,7 +483,7 @@ a {
     grid-template-columns: repeat(10, minmax(100px, 150px));
   }
 
-  .flex > * {
+  .flex>* {
     max-width: calc(50% - 2rem);
   }
 }
@@ -466,7 +501,7 @@ a {
   width: 100%;
 }
 
-.flex-list-color > * {
+.flex-list-color>* {
   position: relative;
   float: left;
   height: 2rem;
@@ -494,7 +529,8 @@ a {
   padding: 0;
 }
 
-.flex-list > li, .flex-list > div {
+.flex-list>li,
+.flex-list>div {
   display: flex;
   clear: both;
   margin: 0 0 0.3em;
@@ -502,7 +538,7 @@ a {
   width: 100%;
 }
 
-.flex-list > li a .flex-list > div a {
+.flex-list>li a .flex-list>div a {
   display: block;
   overflow: hidden;
   max-width: 50%;
@@ -510,11 +546,13 @@ a {
   text-overflow: ellipsis;
 }
 
-.flex-list > li > *, .flex-list > div > * {
+.flex-list>li>*,
+.flex-list>div>* {
   flex: 1;
 }
 
-.flex-list > li > *:first-child, .flex-list > div > *:first-child {
+.flex-list>li>*:first-child,
+.flex-list>div>*:first-child {
   padding: 0 1.5em 0 0;
 }
 
@@ -575,12 +613,12 @@ a {
 }
 
 .score-up {
-  background: rgba(255, 75, 75, 0.15);
+  background: rgba(255, 75, 75, 0.05);
   box-shadow: inset 0 0 4px rgba(255, 75, 75, 0.45);
 }
 
 .score-down {
-  background: rgba(125, 255, 100, 0.15);
+  background: rgba(125, 255, 100, 0.05);
   box-shadow: inset 0 0 4px rgba(125, 255, 100, 0.75);
 }
 
@@ -588,7 +626,7 @@ a {
   color: #004c6d;
   background: #fff;
   /*letter-spacing: -4px;*/
-  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.2);
   text-shadow: none;
 }
 
@@ -606,9 +644,9 @@ a {
 
 .number {
   line-height: 1.5;
-  font-family: IBMPlexMono, sans-serif;
   font-size: 1.5rem;
   font-weight: bold;
+  font-family: IBMPlexMono, optiker, sans-serif;
 }
 
 .date p {
@@ -639,6 +677,8 @@ a {
 .pointseco {
   color: #fefefe;
   background: #22961e !important;
+  box-shadow: inset 0 -1px 8px rgba(0, 0, 0, 0.2);
+
 }
 
 .top path {
@@ -689,12 +729,12 @@ a {
   padding-left: 1em;
 }
 
-.axe > div {
+.axe>div {
   display: flex;
   width: 100%;
 }
 
-.axe > div strong {
+.axe>div strong {
   flex: 1;
 }
 
@@ -756,11 +796,12 @@ a {
   padding: 1em;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: rgba(0, 0, 0, 0.08);
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1), ;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
 }
 
 .js-tabcontent h3 {
   margin: 0.5em 0 1em;
+  text-transform: capitalize;
 }
 
 [aria-hidden='true'].tabs-tabs__content {
@@ -771,7 +812,8 @@ a {
   ACCORDEON
 ------------------*/
 
-.js-to_expand[aria-hidden=true], .js-to_expand[data-hidden=true] {
+.js-to_expand[aria-hidden=true],
+.js-to_expand[data-hidden=true] {
   display: none;
 }
 
@@ -793,7 +835,7 @@ a {
   margin-right: 0.5em;
   padding: 0 0.2em;
   line-height: 0;
-  font-family: monospace;
+  font-family: IBMPlexMono, optiker, sans-serif;
   color: #fefefe;
   background: #333;
 }
@@ -802,7 +844,8 @@ a {
   content: '-';
 }
 
-.js-expandmore-button[aria-expanded=true] > .expandmore__symbol:before, .js-expandmore-button[data-expanded=true] > .expandmore__symbol:before {
+.js-expandmore-button[aria-expanded=true]>.expandmore__symbol:before,
+.js-expandmore-button[data-expanded=true]>.expandmore__symbol:before {
   content: '− ';
 }
 
@@ -841,7 +884,7 @@ a {
   }
 }
 
-.progress + .progress {
+.progress+.progress {
   padding-top: 0;
 }
 
@@ -853,34 +896,36 @@ a {
   margin: auto;
   padding: 0;
 }
+
 .progress li {
   min-width: 8rem;
   list-style: none;
 }
 
-.progress > * {
+.progress>* {
   display: flex;
   align-items: center;
   margin: 0;
   padding: 1em 0;
   max-width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 0 4px rgba(0,0,0,0.12);
+
 }
 
-.progress > *:not(:first-child) {
+.progress>*:not(:first-child) {
   min-height: 7em;
 }
 
-.progress > div:first-child {
+.progress>div:first-child {
   display: flex;
   align-items: center;
   flex: 0 1 20%;
   justify-content: center;
   text-align: center;
   color: #fff;
-  background: #333;
-  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.35);
+  background: #2a0301;
+  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.35);
 }
 
 .progress h4 {
@@ -929,7 +974,7 @@ a {
   min-height: 7em;
 }
 
-.progress-circular ul > li {
+.progress-circular ul>li {
   position: relative;
   display: inline-block;
   flex: 1;
@@ -939,29 +984,29 @@ a {
   margin-bottom: 4.5em;
 }
 
-.progress-circular ul > li:before {
+.progress-circular ul>li:before {
   position: absolute;
   content: attr(data-name);
   bottom: -2em;
   width: 100%;
   line-height: 1;
-  font-family: Optiker, sans-serif;
+  font-family: IBMPlexMono, optiker, sans-serif;
   font-size: 1.5em;
   font-weight: bold;
 }
 
-.progress-circular ul > li:after {
+.progress-circular ul>li:after {
   position: absolute;
   z-index: 2;
   content: attr(data-percent);
-  top: 0;
+  top: 5px;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  font-family: Optiker, sans-serif;
+  font-family: IBMPlexMono, optiker, sans-serif;
   font-size: 2.3em;
   text-align: center;
 }
@@ -1003,7 +1048,6 @@ a {
   width: 75%;
   height: 1em;
   border: 1px solid #333;
-  border-radius: 5px;
   background: rgb(34, 150, 30);
   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%);
 }
@@ -1018,23 +1062,26 @@ a {
   height: 1em;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
+  /* 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%); */
 }
 
-.progress-bar-score, .progress-bar-tooltip {
+.progress-bar-score,
+.progress-bar-tooltip {
   position: absolute;
   padding: 0 1em;
   min-width: 1em;
   line-height: 1.3;
   transform: translate(-50%, -50%);
-  font-size: 1.3em;
+  font-size: 1.1em;
   text-align: center;
 }
 
 .progress-bar-score {
-  font-family: optiker;
+  font-family: IBMPlexMono, optiker, sans-serif;
 }
 
-.progress-bar-score:first-child, .progress-bar-score:last-child {
+.progress-bar-score:first-child,
+.progress-bar-score:last-child {
   top: 45%;
   right: calc(100% + 2em);
   height: 2em;
@@ -1054,12 +1101,13 @@ a {
   background: #555;
 }
 
-.progress-bar-score:not(:first-child):not(:last-child), .progress-bar-tooltip {
+.progress-bar-score:not(:first-child):not(:last-child),
+.progress-bar-tooltip {
   animation: slide 1s;
 }
 
 .progress-bar-score {
-  top: 100%;
+  top: 130%;
   min-width: 26px;
   transform: translate(-50%, 35%);
 
@@ -1069,7 +1117,7 @@ a {
 .progress-bar-score:not(:first-child):not(:last-child)::before {
   position: absolute;
   content: '';
-  bottom: calc(100% - 3px);
+  bottom: 100%;
   left: 50%;
   width: 0;
   height: 5px;
@@ -1080,7 +1128,7 @@ a {
 .progress-bar-score:not(:first-child):not(:last-child)::after {
   position: absolute;
   content: '';
-  bottom: 100%;
+  bottom: 121%;
   left: 50%;
   width: 0;
   height: 0;