Upgrade NPM Dependencies

crafty.config.js

@@ -1,5 +1,6 @@
 
 module.exports = {
+    browsers: "> 0.25%, Edge >= 15, Safari >= 10, iOS >= 10, Chrome >= 56, Firefox >= 51, IE >= 11, not op_mini all",
     presets: [
       "@swissquote/crafty-preset-postcss",
       "@swissquote/crafty-runner-gulp"
@@ -13,7 +14,8 @@ module.exports = {
     ],
     stylelint: {
       rules: {
-        "swissquote/no-type-outside-scope": null
+        "swissquote/no-type-outside-scope": null,
+        "plugin/no-unsupported-browser-features": null
       }
     },
     css: {

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "build": "crafty run",
-    "watch": "crafty watch"
+    "watch": "crafty watch",
+    "lint:css": "crafty cssLint --fix --preset recommended themes/daux_singlepage/scss/*.scss themes/daux/scss/*.scss"
   }
 }

themes/daux/scss/_components.scss

@@ -7,7 +7,8 @@ a {
     color: var(--link-color);
 
     &.Link--external:after {
-        content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
+        content: " "
+            url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
     }
 
     &.Link--broken {
@@ -479,7 +480,8 @@ ul.TableOfContents {
     }
 
     /* Hover state whilst checked */
-    .Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
+    .Checkbox:hover input:not([disabled]):checked ~ &,
+    .Checkbox input:checked:focus ~ & {
         background: var(--checkbox-checked-hover-background);
     }
 

themes/daux/scss/_fonts.scss

@@ -1,15 +1,9 @@
-
 :root {
-    --font-family-text: -apple-system,
+    --font-family-text: -apple-system, ".SFNSText-Regular", "San Francisco",
-        ".SFNSText-Regular",
+        "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial,
-        "San Francisco",
-        "Roboto",
-        "Segoe UI",
-        "Helvetica Neue",
-        "Lucida Grande",
-        Arial,
         sans-serif;
-    --font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console", "Courier New", monospace;
+    --font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console",
+        "Courier New", monospace;
     --font-family-heading: "Roboto Slab", var(--font-family-text);
 }
 
@@ -20,13 +14,13 @@
     font-style: normal;
     font-weight: 300;
     src: url("../fonts/robotoslab-light.eot");
-    src:
+    src: url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
-        url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-light.woff2") format("woff2"),
         url("../fonts/robotoslab-light.woff") format("woff"),
         url("../fonts/robotoslab-light.ttf") format("truetype"),
         url("../fonts/robotoslab-light.svg#roboto_slablight") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 
 @font-face {
@@ -34,13 +28,14 @@
     font-style: normal;
     font-weight: 400;
     src: url("../fonts/robotoslab-regular.eot");
-    src:
+    src: url("../fonts/robotoslab-regular.eot?#iefix")
-        url("../fonts/robotoslab-regular.eot?#iefix") format("embedded-opentype"),
+            format("embedded-opentype"),
         url("../fonts/robotoslab-regular.woff2") format("woff2"),
         url("../fonts/robotoslab-regular.woff") format("woff"),
         url("../fonts/robotoslab-regular.ttf") format("truetype"),
         url("../fonts/robotoslab-regular.svg#roboto_slabregular") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 
 @font-face {
@@ -48,11 +43,11 @@
     font-style: normal;
     font-weight: 700;
     src: url("../fonts/robotoslab-bold.eot");
-    src:
+    src: url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
-        url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-bold.woff2") format("woff2"),
         url("../fonts/robotoslab-bold.woff") format("woff"),
         url("../fonts/robotoslab-bold.ttf") format("truetype"),
         url("../fonts/robotoslab-bold.svg#roboto_slabbold") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }

themes/daux/scss/_homepage.scss

@@ -113,7 +113,8 @@ Homepage
     background-color: white;
     padding: 40px 0;
 
-    ul, ol {
+    ul,
+    ol {
         li {
             list-style: none;
             margin-bottom: 0.5em;
@@ -154,7 +155,9 @@ Homepage
             margin: 0 -15px;
         }
 
-        .Row__third, .Row__half, .Row__quarter {
+        .Row__third,
+        .Row__half,
+        .Row__quarter {
             float: left;
             position: relative;
             min-height: 1px;

themes/daux/scss/_print.scss

@@ -1,4 +1,3 @@
-
 * {
     text-shadow: none !important;
     color: #000 !important; // Black prints faster: h5bp.com/s
@@ -6,12 +5,18 @@
     box-shadow: none !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     page-break-after: avoid;
     page-break-before: auto;
 }
 
-pre, blockquote {
+pre,
+blockquote {
     border: 1px solid #999;
     font-style: italic;
     page-break-inside: avoid;
@@ -23,16 +28,24 @@ img {
 }
 
 a,
-a:visited { text-decoration: underline; }
+a:visited {
+    text-decoration: underline;
+}
 
-abbr[title]:after { content: " (" attr(title) ")"; }
+abbr[title]:after {
+    content: " (" attr(title) ")";
+}
 
 q {
     quotes: none;
 
-    &:before { content: ""; }
+    &:before {
+        content: "";
+    }
 
-    &:after { content: " (" attr(cite) ")"; }
+    &:after {
+        content: " (" attr(cite) ")";
+    }
 }
 
 .PageBreak {
@@ -40,12 +53,18 @@ q {
     page-break-before: always;
 }
 
-.NoPrint { display: none; }
+.NoPrint {
+    display: none;
+}
 
 /* Hide the navigation */
-aside { display: none; }
+aside {
+    display: none;
+}
 
-.Pager { display: none; }
+.Pager {
+    display: none;
+}
 
 .Columns__right {
     width: 100% !important;
@@ -58,7 +77,9 @@ aside { display: none; }
 }
 
 /* Anchors don't need that */
-.s-content a[href^="#"]:after { content: ""; }
+.s-content a[href^="#"]:after {
+    content: "";
+}
 
 h1 a[href]:after {
     font-size: 50%;

themes/daux/scss/_structure.scss

@@ -1,5 +1,6 @@
-
+*,
-*, *:after, *:before {
+*:after,
+*:before {
     box-sizing: border-box;
 }
 
@@ -20,7 +21,8 @@ html {
     }
 }
 
-html, body {
+html,
+body {
     height: 100%;
     background-color: #fff;
     color: var(--text);
@@ -64,7 +66,9 @@ html, body {
     }
 
     &:hover {
-        background-color: var(--sidebar-collapsible--hamburger-hover-background);
+        background-color: var(
+            --sidebar-collapsible--hamburger-hover-background
+        );
 
         @include kill-box-shadow;
 
@@ -109,7 +113,8 @@ html, body {
             clear: both;
         }
 
-        &__left, &__right {
+        &__left,
+        &__right {
             position: relative;
             min-height: 1px;
             float: left;

themes/daux/scss/_typography.scss

@@ -12,18 +12,29 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: var(--font-family-heading);
     font-weight: 300;
 }
 
 .s-content {
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         cursor: text;
         line-height: 1.4em;
         margin: 2em 0 0.5em;
 
-        tt, code {
+        tt,
+        code {
             font-size: inherit;
         }
 
@@ -73,7 +84,8 @@ h1, h2, h3, h4, h5, h6 {
         margin-bottom: 1.3em;
     }
 
-    ul, ol {
+    ul,
+    ol {
         padding-left: 2em;
     }
 
@@ -219,7 +231,8 @@ h1, h2, h3, h4, h5, h6 {
             display: none;
         }
 
-        code, tt {
+        code,
+        tt {
             background-color: transparent;
             border: none;
         }
@@ -298,12 +311,23 @@ h1, h2, h3, h4, h5, h6 {
             background-color: white;
             white-space: normal;
 
-            pre, code {
+            pre,
+            code {
                 white-space: normal;
             }
         }
 
-        blockquote, p, ul, ol, dl, h2, h3, h4, h5, h6, hr {
+        blockquote,
+        p,
+        ul,
+        ol,
+        dl,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        hr {
             &:before {
                 width: 100%;
                 height: 10px;
@@ -311,7 +335,17 @@ h1, h2, h3, h4, h5, h6 {
                 clear: both;
             }
 
-            p, ul, ol, dl, h2, h3, h4, h5, h6, pre, hr {
+            p,
+            ul,
+            ol,
+            dl,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            pre,
+            hr {
                 width: auto;
                 float: none;
                 display: block;
@@ -324,8 +358,10 @@ h1, h2, h3, h4, h5, h6 {
 
         // Paragraphs and code inside lists and
         // blockquotes should have 100% width
-        li, blockquote {
+        li,
-            p, pre {
+        blockquote {
+            p,
+            pre {
                 width: 100%;
             }
         }

themes/daux_singlepage/scss/_fonts.scss

@@ -1,15 +1,9 @@
-
 :root {
-    --font-family-text: -apple-system,
+    --font-family-text: -apple-system, ".SFNSText-Regular", "San Francisco",
-        ".SFNSText-Regular",
+        "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial,
-        "San Francisco",
-        "Roboto",
-        "Segoe UI",
-        "Helvetica Neue",
-        "Lucida Grande",
-        Arial,
         sans-serif;
-    --font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console", "Courier New", monospace;
+    --font-family-monospace: Monaco, Menlo, Consolas, "Lucida Console",
+        "Courier New", monospace;
     --font-family-heading: "Roboto Slab", var(--font-family-text);
 }
 
@@ -20,13 +14,13 @@
     font-style: normal;
     font-weight: 300;
     src: url("../fonts/robotoslab-light.eot");
-    src:
+    src: url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
-        url("../fonts/robotoslab-light.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-light.woff2") format("woff2"),
         url("../fonts/robotoslab-light.woff") format("woff"),
         url("../fonts/robotoslab-light.ttf") format("truetype"),
         url("../fonts/robotoslab-light.svg#roboto_slablight") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 
 @font-face {
@@ -34,13 +28,14 @@
     font-style: normal;
     font-weight: 400;
     src: url("../fonts/robotoslab-regular.eot");
-    src:
+    src: url("../fonts/robotoslab-regular.eot?#iefix")
-        url("../fonts/robotoslab-regular.eot?#iefix") format("embedded-opentype"),
+            format("embedded-opentype"),
         url("../fonts/robotoslab-regular.woff2") format("woff2"),
         url("../fonts/robotoslab-regular.woff") format("woff"),
         url("../fonts/robotoslab-regular.ttf") format("truetype"),
         url("../fonts/robotoslab-regular.svg#roboto_slabregular") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 
 @font-face {
@@ -48,11 +43,11 @@
     font-style: normal;
     font-weight: 700;
     src: url("../fonts/robotoslab-bold.eot");
-    src:
+    src: url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
-        url("../fonts/robotoslab-bold.eot?#iefix") format("embedded-opentype"),
         url("../fonts/robotoslab-bold.woff2") format("woff2"),
         url("../fonts/robotoslab-bold.woff") format("woff"),
         url("../fonts/robotoslab-bold.ttf") format("truetype"),
         url("../fonts/robotoslab-bold.svg#roboto_slabbold") format("svg");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }

themes/daux_singlepage/scss/_print.scss

@@ -5,12 +5,18 @@
     box-shadow: none !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     page-break-after: avoid;
     page-break-before: auto;
 }
 
-pre, blockquote {
+pre,
+blockquote {
     border: 1px solid #999;
     font-style: italic;
     page-break-inside: avoid;
@@ -22,16 +28,24 @@ img {
 }
 
 a,
-a:visited { text-decoration: underline; }
+a:visited {
+    text-decoration: underline;
+}
 
-abbr[title]:after { content: " (" attr(title) ")"; }
+abbr[title]:after {
+    content: " (" attr(title) ")";
+}
 
 q {
     quotes: none;
 
-    &:before { content: ""; }
+    &:before {
+        content: "";
+    }
 
-    &:after { content: " (" attr(cite) ")"; }
+    &:after {
+        content: " (" attr(cite) ")";
+    }
 }
 
 .PageBreak {
@@ -39,10 +53,14 @@ q {
     page-break-before: always;
 }
 
-.NoPrint { display: none; }
+.NoPrint {
+    display: none;
+}
 
 /* Hide the navigation */
-aside { display: none; }
+aside {
+    display: none;
+}
 
 a[href]:after {
     content: " (" attr(href) ")";

themes/daux_singlepage/scss/_typography.scss

@@ -1,4 +1,9 @@
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: var(--font-family-heading);
     font-weight: 300;
 }
@@ -11,7 +16,12 @@ h1, h2, h3, h4, h5, h6 {
         font-size: 15px;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         font-weight: 300;
         -webkit-font-smoothing: antialiased;
         cursor: text;
@@ -19,7 +29,8 @@ h1, h2, h3, h4, h5, h6 {
         margin-top: 0.3em;
         margin-bottom: 0.3em;
 
-        tt, code {
+        tt,
+        code {
             font-size: inherit;
         }
 
@@ -32,30 +43,36 @@ h1, h2, h3, h4, h5, h6 {
         }
     }
 
-    h1 { // 40px
+    h1 {
+        // 40px
         font-size: 2.6666666667em;
         color: black;
     }
 
-    h2 { // 30px
+    h2 {
+        // 30px
         font-size: 2em;
         border-bottom: 1px solid #eee;
         color: black;
     }
 
-    h3 { // 26px
+    h3 {
+        // 26px
         font-size: 1.7333333333em;
     }
 
-    h4 { // 22px
+    h4 {
+        // 22px
         font-size: 1.4666666667em;
     }
 
-    h5 { // 18px
+    h5 {
+        // 18px
         font-size: 1.2em;
     }
 
-    h6 { // 16px
+    h6 {
+        // 16px
         font-size: 1.0666666667em;
         color: #555;
     }
@@ -64,12 +81,14 @@ h1, h2, h3, h4, h5, h6 {
         text-decoration: underline;
     }
 
-    p { // 15px
+    p {
+        // 15px
         line-height: 1.8em;
         margin-bottom: 20px;
     }
 
-    ul, ol {
+    ul,
+    ol {
         padding-left: 30px;
     }
 
@@ -169,7 +188,8 @@ h1, h2, h3, h4, h5, h6 {
         font-family: var(--font-family-monospace);
     }
 
-    code, tt {
+    code,
+    tt {
         margin: 0 2px;
         padding: 0 5px;
         white-space: nowrap;
@@ -192,7 +212,8 @@ h1, h2, h3, h4, h5, h6 {
             white-space: pre;
         }
 
-        code, tt {
+        code,
+        tt {
             background-color: transparent;
             border: none;
         }

themes/daux_singlepage/scss/main.scss

@@ -9,7 +9,8 @@
     -webkit-touch-callout: none;
 }
 
-html, body {
+html,
+body {
     height: 100%;
 }
 
@@ -25,7 +26,8 @@ a {
     text-decoration: none;
 }
 
-a:focus, a:hover {
+a:focus,
+a:hover {
     color: #23527c;
     text-decoration: underline;
 }
@@ -45,7 +47,9 @@ img {
     max-width: 100% !important;
 }
 
-.PageBreak { display: none; }
+.PageBreak {
+    display: none;
+}
 
 @media screen {
     body {