Rebuild assets

And add `postcss-scss` and fixing some issues.

app/Resources/static/themes/_global/global.scss

@@ -5,9 +5,9 @@
 .material-icons.md-48 { font-size: 48px; }
 
 /* Rules for using icons as black on a light background. */
-.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark { color: rgb(0 0 0 / 54%); }
-.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+.material-icons.md-dark.md-inactive { color: rgb(0 0 0 / 26%); }
 
 /* Rules for using icons as white on a dark background. */
-.material-icons.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light { color: rgb(255 255 255 / 100%); }
-.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+.material-icons.md-light.md-inactive { color: rgb(255 255 255 / 30%); }

app/Resources/static/themes/_global/share.scss

@@ -112,7 +112,7 @@ blockquote::before,
 blockquote::after,
 q::before,
 q::after {
-  content: '';
+  content: "";
   content: none;
 }
 
@@ -300,8 +300,6 @@ dl dt {
   overflow: hidden;
   clear: left;
   text-align: right;
-  -ms-text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: bold;
@@ -314,8 +312,6 @@ dl dd {
 }
 
 pre {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 4em 0;
   border: 0.0625em solid #efefef;
@@ -378,7 +374,7 @@ thead tr {
 }
 
 tbody tr:nth-child(2n+1) {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
 }
 
 tbody {

app/Resources/static/themes/baggy/css/article.scss

@@ -1,4 +1,3 @@
-
 #article {
   width: 70%;
   margin-bottom: 3em;
@@ -159,7 +158,7 @@ pre code {
     text-transform: uppercase;
     text-decoration: none;
     font-weight: 400;
-    font-family: PT Sans, sans-serif;
+    font-family: "PT Sans", sans-serif;
     transition: all 0.5s ease;
   }
 }

app/Resources/static/themes/baggy/css/guide.scss

@@ -1,4 +1,3 @@
-
 ::selection {
   color: #fff;
   background-color: #000;
@@ -60,9 +59,9 @@ form input[type="email"] {
   color: #666;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+@media screen {
   select {
-    -webkit-appearance: none;
+    appearance: none;
     border-radius: 0;
     background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
   }
@@ -109,10 +108,6 @@ input[type="submit"]:hover,
 input[type="submit"]:focus {
   background-color: #fff;
   color: #000;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -148,7 +143,7 @@ h2::after {
   background-color: #333;
   padding-top: 9.5em;
   height: 100%;
-  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6);
+  box-shadow: inset -4px 0 20px rgb(0 0 0 / 60%);
   z-index: 15;
 
   > li > a {

app/Resources/static/themes/baggy/css/index.scss

@@ -1,13 +1,13 @@
 /* Style */
-@import 'guide';
+@import "guide";
-@import 'layout';
+@import "layout";
-@import 'article';
+@import "article";
-@import 'pictos';
+@import "pictos";
-@import 'login';
+@import "login";
-@import 'save';
+@import "save";
-@import 'messages';
+@import "messages";
 
 /* Tools */
-@import 'media_queries';
+@import "media_queries";
-@import 'print';
+@import "print";
-@import 'ratatouille';
+@import "ratatouille";

app/Resources/static/themes/baggy/css/layout.scss

@@ -40,7 +40,7 @@ footer {
   display: inline-block;
   margin: 0 5px;
   padding: 5px 12px;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(0 0 0 / 60%);
   border-radius: 3px;
   max-height: 2em;
   overflow: hidden;
@@ -78,7 +78,7 @@ footer {
 .entry {
   background-color: #fff;
   letter-spacing: normal;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
   display: inline-block;
   width: 32%;
   margin-bottom: 1.5em;
@@ -120,7 +120,7 @@ footer {
   }
 
   &:hover {
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 1);
+    box-shadow: 0 3px 10px rgb(0 0 0 / 100%);
 
     &::after {
       height: 40px;
@@ -219,7 +219,7 @@ footer {
     li {
       margin: 10px 10px 10px auto;
       padding: 5px 12px 5px 25px;
-      background-color: rgba(0, 0, 0, 0.6);
+      background-color: rgb(0 0 0 / 60%);
       border-radius: 0 3px 3px 0;
       color: #fff;
       cursor: default;

app/Resources/static/themes/baggy/css/login.scss

@@ -9,7 +9,7 @@
   form {
     background-color: #fff;
     padding: 1.5em;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
+    box-shadow: 0 1px 8px rgb(0 0 0 / 90%);
     width: 20em;
     position: absolute;
     top: 8em;

app/Resources/static/themes/baggy/css/main.css

@@ -30,7 +30,7 @@ body {
 .login form {
   background-color: #fff;
   padding: 1.5em;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
+  box-shadow: 0 1px 8px rgb(0 0 0 / 90%);
   width: 20em;
   position: absolute;
   top: 8em;
@@ -110,9 +110,9 @@ form input[type="email"] {
   color: #666;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+@media screen and (min-device-pixel-ratio: 0) {
   select {
-    -webkit-appearance: none;
+    appearance: none;
     border-radius: 0;
     background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
   }
@@ -157,10 +157,6 @@ input[type="submit"]:hover,
 input[type="submit"]:focus {
   background-color: #fff;
   color: #000;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -196,7 +192,7 @@ h2::after {
   background-color: #333;
   padding-top: 9.5em;
   height: 100%;
-  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6);
+  box-shadow: inset -4px 0 20px rgb(0 0 0 / 60%);
   z-index: 15;
 }
 
@@ -217,10 +213,6 @@ h2::after {
   text-decoration: none;
   font-weight: normal;
   font-family: "PT Sans", sans-serif;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -365,7 +357,7 @@ footer a {
 .card-entry-labels li {
   margin: 10px 10px 10px auto;
   padding: 5px 12px 5px 25px;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(0 0 0 / 60%);
   border-radius: 0 3px 3px 0;
   color: #fff;
   cursor: default;
@@ -387,7 +379,7 @@ footer a {
   display: inline-block;
   margin: 0 5px;
   padding: 5px 12px;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(0 0 0 / 60%);
   border-radius: 3px;
   max-height: 2em;
   overflow: hidden;
@@ -425,7 +417,7 @@ footer a {
 .entry {
   background-color: #fff;
   letter-spacing: normal;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
   display: inline-block;
   width: 32%;
   margin-bottom: 1.5em;
@@ -448,10 +440,6 @@ footer a {
   bottom: 0.3em;
   z-index: 10;
   right: 1.5em;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -463,15 +451,11 @@ footer a {
   bottom: 0;
   left: 0;
   background-color: #000;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
 .entry:hover {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 1);
+  box-shadow: 0 3px 10px rgb(0 0 0 / 100%);
 }
 
 .entry:hover::after {
@@ -501,10 +485,6 @@ footer a {
   text-decoration: none;
   color: #000;
   word-wrap: break-word;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -537,10 +517,6 @@ img.preview {
   z-index: 10;
   padding-right: 0.5em;
   text-align: right;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -ms-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }
 
@@ -626,7 +602,7 @@ div.pagination ul .current {
   ========================================================================== */
 
 .popup-form {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   position: absolute;
   top: 0;
   left: 10em;
@@ -752,7 +728,7 @@ a.add-to-wallabag-link-after::after {
 }
 
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/MaterialIcons-Regular.eot);
@@ -762,7 +738,7 @@ a.add-to-wallabag-link-after::after {
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 1em;  /* Preferred icon size */
@@ -786,7 +762,7 @@ a.add-to-wallabag-link-after::after {
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
 }
 
 .material-icons.md-18 { font-size: 18px; }
@@ -812,11 +788,6 @@ a.add-to-wallabag-link-after::after {
 
   /* Enable Ligatures ================ */
   letter-spacing: 0;
-  -webkit-font-feature-settings: "liga";
-  -moz-font-feature-settings: "liga=1";
-  -moz-font-feature-settings: "liga";
-  -ms-font-feature-settings: "liga" 1;
-  -o-font-feature-settings: "liga";
   font-feature-settings: "liga";
 
   /* Better Font Rendering =========== */

app/Resources/static/themes/baggy/css/media_queries.scss

@@ -1,4 +1,3 @@
-
 @media screen and (max-width: 1050px) {
   .entry {
     width: 49%;

app/Resources/static/themes/baggy/css/pictos.scss

@@ -4,13 +4,13 @@
 
 @font-face {
   font-family: icomoon;
-  src: url('~icomoon-free-npm/Font/IcoMoon-Free.ttf');
+  src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
   font-weight: normal;
   font-style: normal;
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 1em;  /* Preferred icon size */
@@ -34,7 +34,7 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
 
   .md-18 { font-size: 18px; }
   .md-24 { font-size: 24px; }
@@ -64,11 +64,6 @@
 
   /* Enable Ligatures ================ */
   letter-spacing: 0;
-  -webkit-font-feature-settings: "liga";
-  -moz-font-feature-settings: "liga=1";
-  -moz-font-feature-settings: "liga";
-  -ms-font-feature-settings: "liga" 1;
-  -o-font-feature-settings: "liga";
   font-feature-settings: "liga";
 
   /* Better Font Rendering =========== */

app/Resources/static/themes/baggy/css/ratatouille.scss

@@ -5,15 +5,12 @@
 */
 
 * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 html {
   font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 body {
@@ -100,7 +97,7 @@ textarea {
 }
 
 input[type="search"] {
-  -webkit-appearance: textfield;
+  appearance: textfield;
 }
 
 /* ==========================================================================
@@ -218,9 +215,9 @@ video {
   display: inline-block;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+@media screen {
   select {
-    -webkit-appearance: none;
+    appearance: none;
     border-radius: 0;
   }
 }

app/Resources/static/themes/baggy/css/save.scss

@@ -3,7 +3,7 @@
   ========================================================================== */
 
 .popup-form {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   position: absolute;
   top: 0;
   left: 10em;

app/Resources/static/themes/material/css/entries.scss

@@ -27,7 +27,7 @@
 }
 
 .card-stacked {
-  input[type=checkbox] {
+  input[type="checkbox"] {
     position: relative;
     opacity: initial;
     left: 0;

app/Resources/static/themes/material/css/icons.scss

@@ -8,7 +8,7 @@
  *
  */
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
@@ -32,7 +32,7 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
 
   .md-18 {
     font-size: 18px;
@@ -51,18 +51,18 @@
   }
 
   .md-dark {
-    color: rgba(0, 0, 0, 0.54);
+    color: rgb(0 0 0 / 54%);
 
     .md-inactive {
-      color: rgba(0, 0, 0, 0.26);
+      color: rgb(0 0 0 / 26%);
     }
   }
 
   .md-light {
-    color: rgba(255, 255, 255, 1);
+    color: rgb(255 255 255 / 100%);
 
     .md-inactive {
-      color: rgba(255, 255, 255, 0.3);
+      color: rgb(255 255 255 / 30%);
     }
   }
 }
@@ -185,5 +185,5 @@ footer [class*=" icon-"] {
 
 footer [class^="icon-"]:hover,
 footer [class*=" icon-"]:hover {
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 10px rgb(0 0 0 / 30%);
 }

app/Resources/static/themes/material/css/index.scss

@@ -1,18 +1,18 @@
-@import 'variables';
+@import "variables";
 
 /* Style */
-@import 'article';
+@import "article";
-@import 'cards';
+@import "cards";
-@import 'entries';
+@import "entries";
-@import 'filters';
+@import "filters";
-@import 'layout';
+@import "layout";
-@import 'nav';
+@import "nav";
-@import 'sidenav';
+@import "sidenav";
-@import 'various';
+@import "various";
-@import 'dark_theme';
+@import "dark_theme";
 
 /* Tools */
-@import 'fonts';
+@import "fonts";
-@import 'icons';
+@import "icons";
-@import 'print';
+@import "print";
-@import 'media_queries';
+@import "media_queries";

app/Resources/static/themes/material/css/media_queries.scss

@@ -103,7 +103,7 @@
 
 @media only screen and (min-width: 1200px) and (max-width: 1650px) {
   .row .col.l3 {
-    width: 33.33333%;
+    width: 33.3333%;
     margin-left: 0;
   }
 }
@@ -116,12 +116,12 @@
     }
 
     .col.l2 {
-      width: 33.33333%;
+      width: 33.3333%;
       margin-left: 0;
     }
 
     .col.l3 {
-      width: 41.66667%;
+      width: 41.6667%;
       margin-left: 0;
     }
 
@@ -131,12 +131,12 @@
     }
 
     .col.l5 {
-      width: 58.33333%;
+      width: 58.333%;
       margin-left: 0;
     }
 
     .col.l6 {
-      width: 66.66667%;
+      width: 66.6667%;
       margin-left: 0;
     }
 
@@ -146,12 +146,12 @@
     }
 
     .col.l8 {
-      width: 83.33333%;
+      width: 83.3333%;
       margin-left: 0;
     }
 
     .col.l9 {
-      width: 91.66667%;
+      width: 91.6667%;
       margin-left: 0;
     }
 

app/Resources/static/themes/material/css/nav.scss

@@ -1,4 +1,3 @@
-
 /* ==========================================================================
    Nav
    ========================================================================== */

app/config/webpack/common.js

@@ -23,7 +23,7 @@ module.exports = {
       'window.jQuery': 'jquery',
     }),
     new StyleLintPlugin({
-      configFile: '.stylelintrc',
+      configFile: 'stylelint.config.js',
       failOnError: false,
       quiet: false,
       context: 'app/Resources/static/themes',

package.json

@@ -52,6 +52,7 @@
     "node-sass": "^7.0.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^6.2.1",
+    "postcss-scss": "^4.0.2",
     "sass": "^1.45.2",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",

stylelint.config.js

@@ -1,8 +1,7 @@
-{
+module.exports = {
-  "extends": "stylelint-config-standard",
+  extends: ['stylelint-config-standard'],
-  "plugins": [
+  customSyntax: require('postcss-scss'),
-    "stylelint-scss"
+  plugins: ['stylelint-scss'],
-  ],
   rules: {
     'at-rule-no-unknown': null,
     'no-duplicate-selectors': null,
@@ -10,4 +9,4 @@
     'no-descending-specificity': null,
     'scss/at-rule-no-unknown': true,
   },
-}
+};

web/wallassets/public.css

@@ -1,3 +1,3 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{background-color:#fff;color:#444;font-family:Georgia;line-height:1.7;-ms-content-zooming:none;margin-bottom:64px}h1,h2,h3,h4,h5,h6{font-weight:600;margin:.2em 0}article h1,article h2,article h3,article h4,article h5,article h6{text-align:left;line-height:1.3}h1{font-size:1.4em}h2{font-size:1.3em}h3,h4{font-size:1.2em}h5,h6{font-size:1.1em}p{margin-bottom:.75em}b,strong{font-weight:bold}i,em{font-style:italic}a{color:#444;text-decoration:underline}a:active,a:hover{outline:0}p,ul,ol,dl{margin:0 0 1.75em}ul,ol{padding-left:1.25em}li{padding-bottom:.2em;line-height:1.6}li p:last-child,li li:last-child{margin-bottom:-0.2em}ul li:last-child,ol li:last-child{padding-bottom:0}iframe,video{max-width:100%;height:auto}mark{padding:0 .2em}mark a{text-decoration:none}blockquote{font-style:italic;border-left:.25em solid #000;margin-left:-20px;padding-left:17px;margin-bottom:.5em;margin-top:.5em}blockquote cite{text-transform:uppercase;font-size:.8em;font-style:normal}blockquote cite::before{content:"—";margin-right:.5em}img{display:block;height:auto;margin-bottom:.5em;max-width:100%}figure{margin:0}figure figcaption{display:block;margin-top:.3em;font-style:italic;font-size:.8em}button{display:none !important}hr{display:block;height:1px;border:solid #666;border-width:1px 0 0;margin:1.6em 0;padding:0}small{font-size:.7em}dl{margin:1.6em 0}dl dt{float:left;width:11.25em;overflow:hidden;clear:left;text-align:right;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;margin-bottom:1em}dl dd{margin-left:12.5em;margin-bottom:1em}pre{box-sizing:border-box;margin:4em 0;border:.0625em solid #efefef;width:100%;padding:1em;font-family:Consolas,monospace;white-space:pre;overflow:auto}pre code{font-size:.8em;line-height:1.6em;white-space:pre-wrap;background:transparent;border:none;padding:0;vertical-align:inherit}code{padding:.125em .375em;margin:0 .2em;font-family:Consolas,monospace;font-size:.8em;white-space:pre;border:1px solid #d3d3d3;overflow:auto}audio,video{max-width:43.75em}::-moz-selection{background:#666;color:#fff}::selection,mark{background:#666;color:#fff}table{border-collapse:collapse;margin-bottom:2em;width:100%}th,td{padding:.25em;text-align:left}thead tr{text-transform:uppercase;font-size:.85em;letter-spacing:1px;font-family:"Segoe UI",sans-serif;font-weight:600}tbody tr:nth-child(2n+1){background:rgba(0,0,0,.1)}tbody{border:solid #999;border-width:1px 0}figure{text-align:center}figure>*{margin:0 auto}header{text-align:center}.shared-by{margin-bottom:1em}@media(max-width: 719px){header>*:not(.preview),article{padding:0 1em}}@media(min-width: 720px){blockquote{margin-left:-1.4375em;padding-left:1.25em}header{margin-top:32px}.block{margin-left:auto;margin-right:auto;max-width:43.75em;padding:0 1.25em}}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{background-color:#fff;color:#444;font-family:Georgia;line-height:1.7;-ms-content-zooming:none;margin-bottom:64px}h1,h2,h3,h4,h5,h6{font-weight:600;margin:.2em 0}article h1,article h2,article h3,article h4,article h5,article h6{text-align:left;line-height:1.3}h1{font-size:1.4em}h2{font-size:1.3em}h3,h4{font-size:1.2em}h5,h6{font-size:1.1em}p{margin-bottom:.75em}b,strong{font-weight:bold}i,em{font-style:italic}a{color:#444;text-decoration:underline}a:active,a:hover{outline:0}p,ul,ol,dl{margin:0 0 1.75em}ul,ol{padding-left:1.25em}li{padding-bottom:.2em;line-height:1.6}li p:last-child,li li:last-child{margin-bottom:-0.2em}ul li:last-child,ol li:last-child{padding-bottom:0}iframe,video{max-width:100%;height:auto}mark{padding:0 .2em}mark a{text-decoration:none}blockquote{font-style:italic;border-left:.25em solid #000;margin-left:-20px;padding-left:17px;margin-bottom:.5em;margin-top:.5em}blockquote cite{text-transform:uppercase;font-size:.8em;font-style:normal}blockquote cite::before{content:"—";margin-right:.5em}img{display:block;height:auto;margin-bottom:.5em;max-width:100%}figure{margin:0}figure figcaption{display:block;margin-top:.3em;font-style:italic;font-size:.8em}button{display:none !important}hr{display:block;height:1px;border:solid #666;border-width:1px 0 0;margin:1.6em 0;padding:0}small{font-size:.7em}dl{margin:1.6em 0}dl dt{float:left;width:11.25em;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;margin-bottom:1em}dl dd{margin-left:12.5em;margin-bottom:1em}pre{box-sizing:border-box;margin:4em 0;border:.0625em solid #efefef;width:100%;padding:1em;font-family:Consolas,monospace;white-space:pre;overflow:auto}pre code{font-size:.8em;line-height:1.6em;white-space:pre-wrap;background:transparent;border:none;padding:0;vertical-align:inherit}code{padding:.125em .375em;margin:0 .2em;font-family:Consolas,monospace;font-size:.8em;white-space:pre;border:1px solid #d3d3d3;overflow:auto}audio,video{max-width:43.75em}::-moz-selection{background:#666;color:#fff}::selection,mark{background:#666;color:#fff}table{border-collapse:collapse;margin-bottom:2em;width:100%}th,td{padding:.25em;text-align:left}thead tr{text-transform:uppercase;font-size:.85em;letter-spacing:1px;font-family:"Segoe UI",sans-serif;font-weight:600}tbody tr:nth-child(2n+1){background:rgba(0,0,0,.1)}tbody{border:solid #999;border-width:1px 0}figure{text-align:center}figure>*{margin:0 auto}header{text-align:center}.shared-by{margin-bottom:1em}@media(max-width: 719px){header>*:not(.preview),article{padding:0 1em}}@media(min-width: 720px){blockquote{margin-left:-1.4375em;padding-left:1.25em}header{margin-top:32px}.block{margin-left:auto;margin-right:auto;max-width:43.75em;padding:0 1.25em}}
 
 /*# sourceMappingURL=public.css.map*/

yarn.lock

@@ -4716,6 +4716,11 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
+postcss-scss@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.2.tgz#39ddcc0ab32f155d5ab328ee91353d67a52d537b"
+  integrity sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==
+
 postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.7:
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz#f023ed7a9ea736cd7ef70342996e8e78645a7914"