picocss: implement the pico css framework

- Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29, #16, #15. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00 · 2024-09-02 19:58:59 +02:00 · d225bd6ca7
parent c2ac1f5ed1
commit d225bd6ca7
30 changed files with 668 additions and 462 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -7,19 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

-## [Unreleased](https://git.milhit.ch/igor/portfoligor/compare/v0.2.0...HEAD)
+## [Unreleased](https://git.milhit.ch/igor/portfoligor/compare/v0.3.0...HEAD)
+
+## [v0.3.0](https://git.milhit.ch/igor/portfoligor/compare/v0.2.0...v0.3.0) - 2024-10-19

 ### Fixed

+- picocss: implement the pico css framework [`#29`](https://git.milhit.ch/igor/portfoligor/issues/29)
 - i18n: extract, translate strings to be translated [`#18`](https://git.milhit.ch/igor/portfoligor/issues/18)
 - style: add a stylesheet for printing [`#28`](https://git.milhit.ch/igor/portfoligor/issues/28)

 ### Commits

+- rss: add an updated date [`a5ee40a`](https://git.milhit.ch/igor/portfoligor/commit/a5ee40adb7d5530e6b2a912348910cbc743c163b)
+- layouts: update author metadata [`75086bc`](https://git.milhit.ch/igor/portfoligor/commit/75086bc831a5c1273f8fcbb400a9d07d07e6e592)
+- layouts: move `.Site` (deprecated) to `hugo` [`91837de`](https://git.milhit.ch/igor/portfoligor/commit/91837de4f73f55bfde1947382daeee32bf0195fd)
 - documentation: update the README to new git repo [`282b6bc`](https://git.milhit.ch/igor/portfoligor/commit/282b6bcd85b9843eab18190ac5cb808624358e8c)
 - gitInfo: configuration of the git repository [`1aaa6b0`](https://git.milhit.ch/igor/portfoligor/commit/1aaa6b02b5cab985ffc3e66aaceeeb91fd8bf134)
 - scss: improve the `verse` text layout [`989343e`](https://git.milhit.ch/igor/portfoligor/commit/989343ea597de5d892530e70b038dff1e6a69511)
 - post image: get the image in the atom xml file [`0c21f00`](https://git.milhit.ch/igor/portfoligor/commit/0c21f00b671865f392a27a156b7d036fb7e3949e)
+- dependencies: add picocss as a dependency [`c2ac1f5`](https://git.milhit.ch/igor/portfoligor/commit/c2ac1f5ed1a583477245f72e6acdd01c627e3918)
 - text: set font style to em nested in blockquote [`e78fd96`](https://git.milhit.ch/igor/portfoligor/commit/e78fd961ae14a4b69e181f8c199ea002d2691404)
 - text: style the new citation block [`40da59a`](https://git.milhit.ch/igor/portfoligor/commit/40da59a1eb073f231087ee133397e649ee2bf552)
 - homepage: move the CV file to the personal data [`7a2aa2d`](https://git.milhit.ch/igor/portfoligor/commit/7a2aa2d1a9f5e1951cf7977e662888af4db33da9)
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@ -1,50 +0,0 @@
-////////////////////
-//                //
-// SETTING COLORS //
-//                //
-////////////////////
-
-html,
-body {
-  background-color: $darkest-polar;
-  color: $snow-storm-light-grey;
-}
-
-a {
-  color: $frost-green;
-}
-
-a:visited {
-  color: $frost-grey-blue;
-}
-
-a:active,
-a:focus,
-.main-header a:active,
-.main-header a:focus {
-  color: $frost-lighter-green;
-}
-
-a:hover,
-.main-header a:hover,
-.main-footer a:hover {
-  color: $aurora-purple;
-}
-
-.main-header,
-.main-header a,
-.main-footer,
-.main-footer a,
-nav {
-  color: $snow-storm-lightest-grey;
-}
-
-code,
-pre {
-  background-color: $darker-polar;
-}
-
-mark {
-  background-color: $aurora-yellow;
-  color: $the-darkiest-polar;
-}
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@ -1,16 +1,39 @@
+///////////////////
+//               //
+//   FONT-FACE   //
+//               //
+///////////////////
+
+@font-face {
+  font-family: "mylilex";
+  font-weight: 100;
+  src: url("/fonts/Lilex-Thin.ttf") format('truetype');
+}
+
+@font-face {
+  font-family: "mylilex";
+  font-weight: 200;
+  src: url("/fonts/Lilex-ExtraLight.ttf") format('truetype');
+}
+
+@font-face {
+  font-family: "mylilex";
+  font-weight: 400;
+  src: url("/fonts/Lilex-Regular.ttf") format('truetype');
+}
+
+@font-face {
+  font-family: "mylilex";
+  font-weight: 700;
+  src: url("/fonts/Lilex-Bold.ttf") format('truetype');
+}
+
 ///////////////////
 //               //
 //     FONTS     //
 //               //
 ///////////////////

-html,
-body {
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  font-family: $font-family;
-}
-
 code,
 figure figcaption,
 .footnotes,
@ -20,23 +43,20 @@ figure figcaption,
 nav,
 .post-info,
 .posts-list footer {
-  font-size: $font-size-small;
+  font-size: smaller;
 }

 blockquote {
  font-style: italic;
 }

-.smallcaps {
+.smallcaps,
+#licence {
  font-variant: small-caps;
 }

 .home-lists {
  dt {
-    font-weight: bold;
+    font-weight: 700;
  }
 }
-
-#licence {
-  font-variant: small-caps;
-}
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@ -5,16 +5,16 @@
 ///////////////////

 .main-footer {
-  margin-top: 1.25rem;
-  padding-bottom: 1.25rem;
+  nav {
+
+    ul {
+      flex-grow: 1;
+      justify-content: space-evenly;
+    }
+
+    a {
+      text-decoration: none;
+    }

-  ul {
-    display: flex;
-    justify-content: space-evenly;
-    margin: 0;
-    padding: 0;
  }
-
-  @include inline-list;
-
 }
--- a/assets/scss/_grid.scss
+++ b/assets/scss/_grid.scss
@ -1,16 +0,0 @@
-////////////////////
-//                //
-//      Grid      //
-//                //
-////////////////////
-
-@mixin breakpoint($point) {
-  @if $point == desktop {
-    @media (min-width: 75em) { @content ; }         // 1200 px
-  } @else if $point == laptop {
-    @media (min-width: 47.5em) { @content ; }       // 760 px
-  } @else if $point == tablet {
-    @media (min-width: 37.5rem) { @content ; }      // 600 px
-  }
-}
-
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@ -1,45 +1,35 @@
 ///////////////////
 //               //
-//    HEADER     //
+//  MAIN HEADER  //
 //               //
 ///////////////////

+.logo {
+  height: 3rem;
+  margin-right: .5em;
+}
+
+.title {
+  text-decoration: none;
+}
+
 .main-header {
-  display: flex;
-  flex-direction: column;
-  margin: 1.25rem 0;
-
-  .avatar {
-    height: 3rem;
-    margin: auto 0;
-    border-radius: 35%;
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  article {
-    flex-grow: 1;
-  }
-
-  .title {
-    display: flex;
-    justify-content: center;
-    gap: .5rem;
-    margin-bottom: .5rem;
-  }

  nav {
+    display: flex;
+    flex-direction: column;

    ul {
-      display: flex;
-      justify-content: space-evenly;
-      margin: 0;
-      padding: 0;
+      align-self: center;
    }

-    @include inline-list;
+    a {
+
+      h1 {
+        margin: 0;
+      }
+
+    }

  }
 }
--- a/assets/scss/_layout.scss
+++ b/assets/scss/_layout.scss
@ -8,11 +8,8 @@ body {
  display: flex;
  flex-direction: column;
  height: 100vh;
-  max-width: $content-max-width;
-  margin: 0 0 0 $content-left-margin;
 }

 main {
  flex-grow: 1;
-  margin: 0 0 2.5rem 0;
 }
--- a/assets/scss/_lists.scss
+++ b/assets/scss/_lists.scss
@ -4,6 +4,7 @@
 //               //
 ///////////////////

+/* Lists of posts (like in categories page) */
 .posts-list {
  display: flex;
  flex-direction: column;
@ -14,3 +15,92 @@
  }
 }

+/* Lists of the main page, for contact */
+.home-lists {
+
+  margin: 0;
+
+  @media (min-width: 768px) {
+    display: inline-flex;
+    flex-flow: row;
+    flex-wrap: wrap;
+    overflow: visible;
+    width: 100%;      // set the container width
+
+    dt {
+      flex: 0 0 24%;
+      word-wrap: anywhere;
+    }
+
+    dd {
+      flex: 0 0 74%;
+      margin-left: auto;
+      text-align: left;
+    }
+  }
+
+  dd {
+    margin-left: .5rem;
+  }
+
+  dt::after {
+    content: ' :';
+  }
+
+}
+
+/* List under the post information summary */
+.post-info {
+
+  summary,
+  ol,
+  ul,
+  li {
+    margin: 0;
+  }
+
+  ul {
+    padding: 0;
+
+  }
+
+  li {
+    display: flex;
+
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      white-space: pre;
+    }
+
+    > ul::before {
+      content: ' ';
+      white-space: pre;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .post-info > ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    > li:not(:last-child) {
+      &::after {
+        content: ' /';
+        white-space: pre;
+      }
+    }
+  }
+}
+
+.post-taxonomies:not(:last-child) {
+  &::after {
+    content: ', ';
+  }
+}
+
+.list-footer {
+  padding-left: .5em;
+}
--- a/assets/scss/_main_body.scss
+++ b/assets/scss/_main_body.scss
@ -1,44 +0,0 @@
-///////////////////
-//               //
-//      MAIN     //
-//               //
-///////////////////
-
-.home-lists {
-
-  @include breakpoint(laptop) {
-    display: inline-flex;
-    flex-flow: row;
-    flex-wrap: wrap;
-    overflow: visible;
-    width: 100%;      // set the container width
-
-    dt {
-      flex: 0 0 39%;
-      word-wrap: anywhere;
-    }
-
-    dd {
-      flex: 0 0 59%;
-      margin-left: auto;
-      text-align: left;
-    }
-  }
-
-  dd {
-    margin-left: .5rem;
-  }
-
-  dt::after {
-    content: ' :';
-  }
-
-}
-
-.contents {
-  padding: 0;
-}
-
-.home-lists {
-  margin: 0;
-}
--- a/assets/scss/_medias.scss
+++ b/assets/scss/_medias.scss
@ -4,17 +4,20 @@
 //               //
 ///////////////////

+
+@use "@picocss/pico/scss/colors/index" as *;
+
 .audio,
 .stream {
-  border: $dark-polar solid 1px;
+  border: $purple-200 solid var(--pico-border-width);

  audio {
-    border-radius: .5rem;
+    border-radius: var(--pico-border-radius);
    width: 100%;
  }

  figcaption p {
-    font-size: $font-size-small;
+    font-size: smaller;
    padding-left: .5rem;
    text-align: left;
  }
@ -24,7 +27,7 @@
  display: flex;
  flex-direction: column;

-  @include breakpoint(tablet) {
+  @media (min-width: 768px) {
    flex-direction: row;

    img {
@ -40,7 +43,7 @@
  }


-  @include breakpoint(laptop) {
+  @media (min-width: 1024px) {

    div {
      flex-grow: 4;
@ -54,22 +57,18 @@
 }

 figure {
-  border-radius: 5px;
-  margin-left: .4rem;
-  margin-right: .4rem;
+  border-radius: var(--pico-border-radius);
+  margin: 1em auto;
  padding: .4rem;
-  border: $dark-polar solid 1px;
-
-  @include breakpoint(laptop) {
-    max-width: 80%;
-  }
+  border: $purple-200 solid var(--pico-border-width);
+  width: 80%;

  img {
    width: 100%;
  }

  figcaption {
-    font-size: $font-size-small;
+    font-size: smaller;

    p {
      margin: .2rem 0;
@ -80,12 +79,12 @@ figure {

 .post-image {
  border: none;
-  margin-left: 0;
+  width: 100%;
  padding-left: 0;

-  @include breakpoint(laptop) {
+  @media (min-width: 768px) {
    max-width: 97%;
-    margin-right: 0;
+    margin: auto;
    padding-right: 0;
  }
 }
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@ -1,12 +0,0 @@
-///////////////////
-//               //
-//    MIXINS     //
-//               //
-///////////////////
-
-// Inline, no bullet lists
-@mixin inline-list {
-  ul > li {
-    display: inline;
-  }
-}
--- a/assets/scss/_picocss.scss
+++ b/assets/scss/_picocss.scss
@ -0,0 +1,39 @@
+/////////////////////////
+//                     //
+//      Pico CSS       //
+// https://picocss.com //
+//                     //
+/////////////////////////
+
+
+@use "@picocss/pico/scss/pico" with (
+  $theme-color: "purple",
+  $enable-semantic-container: true,
+  $enable-responsive-spacings: true,
+  $modules: (
+    // deactive unused modules
+    "forms/input-color": false,
+    "forms/input-date": false,
+    "forms/input-file": false,
+    "forms/input-range": false,
+    "forms/input-search": false,
+    "components/card": false,
+    "components/dropdown": false,
+    "components/loading": false,
+    "components/modal": false,
+    "components/progress": false,
+    "components/tooltip": false,
+  ),
+  // Limit the viewport width for large screen
+  $breakpoints: (
+    lg: (
+      viewport: 43rem,
+    ),
+    xl: (
+      viewport: 43rem,
+    ),
+    xxl: (
+      viewport: 43rem,
+    ),
+  )
+);
--- a/assets/scss/_post.scss
+++ b/assets/scss/_post.scss
@ -1,64 +0,0 @@
-///////////////////
-//               //
-//      POST     //
-//               //
-///////////////////
-
-.post-header {
-  h1 {
-    margin: 0;
-  }
-}
-
-.post-info {
-
-  > ul {
-    margin-top: 0;
-    padding: 0;
-
-    > li {
-      padding-right: .3rem;
-    }
-  }
-
-  li {
-    display: flex;
-    list-style: none;
-
-    > ul {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 0;
-      white-space: pre;
-    }
-
-    > ul::before {
-      content: ' ';
-      white-space: pre;
-    }
-  }
-}
-
-@include breakpoint(tablet) {
-  .post-info > ul {
-    display: flex;
-    flex-wrap: wrap;
-
-    > li:not(:last-child) {
-      &::after {
-        content: ' /';
-        white-space: pre;
-      }
-    }
-  }
-}
-
-.post-taxonomies:not(:last-child) {
-  &::after {
-    content: ', ';
-  }
-}
-
-.list-footer {
-  padding-left: .5em;
-}
--- a/assets/scss/_texts.scss
+++ b/assets/scss/_texts.scss
@ -4,16 +4,18 @@
 //                //
 ////////////////////

+@use "@picocss/pico/scss/colors/index" as *;
+
 .verse {
-  line-height: $line-height-verse;
-  @include breakpoint(laptop) {
+  line-height: var(--line-height-verse);
+  @media (min-width: 768px) {
    margin-left: 3rem;
  }

  p:not(:last-child) {
-    margin-bottom: $verse-p-bottom-space;
-    @include breakpoint(laptop) {
-      margin-bottom: $verse-p-bottom-space-larger;
+    margin-bottom: var(--verse-p-bottom-space);
+    @media (min-width: 768px) {
+       margin-bottom: var(--verse-p-bottom-space-larger);
    }
  }

@ -22,29 +24,19 @@
  }
 }

-.main-header,
-.main-footer {
-  a {
-    text-decoration: none;
-  }
+mark {
+  background-color: $purple-100;
 }

 .citation {
  border: none;
-  margin-left: 0;
+  margin: initial;
+  width: initial;

  blockquote {
    margin: 0;
    margin-left: .5rem;
-    @include breakpoint(laptop) {
-      margin-left: 1rem;
-    }
-    border-left: solid $lighter-polar .5rem;
-    padding-left: .5rem;
-
-    @include breakpoint(laptop) {
-      padding-left: 1rem;
-    }
+    padding: 0 0 0 .5rem;

    p {
      text-align: left;
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -1,76 +1,42 @@
-///////////////////
-//               //
-//    WIDTH      //
-//               //
-///////////////////
+// Overide pico variables

-$content-max-width: 46rem;              // 920 px
-$content-left-margin: 3vw;
+:root {
+  --pico-font-family-monospace: "mylilex",
+                                monospace,
+                                var(--pico-font-family-emoji);
+  --pico-font-family: "mylilex", serif, var(--pico-font-family-emoji);
+  --pico-font-weight: 400;
+  --line-height-verse: 1.4;
+  --verse-p-bottom-space: 2rem;
+  --verse-p-bottom-space-larger: 3rem;
+}

-///////////////////
-//               //
-//     FONT      //
-//               //
-///////////////////
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+thead th,
+thead td,
+tfoot th,
+tfoot td {
+  --pico-font-weight: 700;
+}

-$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-$font-size-base: 1.25rem !default;      // 25 px
-$font-size-small: .9rem;                // 18 px
-$line-height-base: 1.4;
-$line-height-verse: 1.3;
-$verse-p-bottom-space: 2rem;
-$verse-p-bottom-space-larger: 3rem;
+// Adapt the SVG logo color to the colorscheme

+[data-theme=light],
+  :root:not([data-theme=dark]) {
+  --logo-color: #000000;
+}

-/////////////////////
-//                 //
-//     COLORS      //
-//                 //
-//  Based on Nord  //
-//  color scheme   //
-//                 //
-/////////////////////
-
-$nord0: #2e3440;            // Polar night, darkest grey
-$nord1: #3b4252;            // Polar night, darker grey
-$nord2: #434c5e;            // Polar night, dark grey
-$nord3: #4c566a;            // Polar night, lighter grey
-$nord4: #d8dee9;            // Snow storm, origin, light grey
-$nord5: #e5e9f0;            // Snow storm, brighter light grey
-$nord6: #eceff4;            // Snow storm, the brightest one
-$nord7: #8fbcbb;            // Frost, frozen polar water
-$nord8: #88c0d0;            // Frost, brighter, pure and clear ice
-$nord9: #81a1c1;            // Frost, darker, arctic waters
-$nord10: #5e81ac;           // Frost, darkest, deep arctic ocean
-$nord11: #bf616a;           // Aurora, red
-$nord12: #d08770;           // Aurora, orange
-$nord13: #ebcb8b;           // Aurora, yellow
-$nord14: #a3be8c;           // Aurora, green
-$nord15: #b48ead;           // Aurora, purple
-
-
-// Polar, translated into something easy to remember, hopefully
-$darkest-polar: $nord0;
-$darker-polar: $nord1;
-$dark-polar: $nord2;
-$lighter-polar: $nord3;
-$the-darkiest-polar: darken($darkest-polar, 4%);
-
-// Snow storm, translated into something easy to remember, hopefully
-$snow-storm-light-grey: $nord4;
-$snow-storm-lighter-grey: $nord5;
-$snow-storm-lightest-grey: $nord6;
-
-//Frost, translated into something easy to remember, hopefully
-$frost-green: $nord7;
-$frost-lighter-green: $nord8;
-$frost-grey-blue: $nord9;
-$frost-deep-blue: $nord10;
-
-//Aurora, translated into something easy to remember, hopefully
-$aurora-red: $nord11;
-$aurora-orange: $nord12;
-$aurora-yellow: $nord13;
-$aurora-green: $nord14;
-$aurora-purple: $nord15;
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --logo-color: #ffffff;
+  }
+}

+[data-theme=dark] {
+  --logo-color: #ffffff;
+}
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -4,43 +4,12 @@
 //                //
 ////////////////////

-@import 'variables';
-@import 'grid';
-@import 'mixins';
-@import 'colors';
-@import 'fonts';
-@import 'footer';
-@import 'header';
-@import 'layout';
-@import 'lists';
-@import 'main_body';
-@import 'medias';
-@import 'post';
-@import 'texts';
-
-
-////////////////////
-//                //
-//     Divers     //
-//                //
-////////////////////
-
-code,
-pre {
-  border-radius: 5px;
-  padding: .2rem;
-}
-
-pre {
-  max-width: 95vw;
-  overflow: auto;
-}
-
-.terms {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.term {
-  margin-right: 1rem;
-}
+@use "picocss";     /* The pico css framework, customized */
+@use "fonts";       /* The font face and fonts settings */
+@use "variables";   /* Overrides the pico css variables and sets others */
+@use "layout";      /* Main structure display */
+@use "header";
+@use "footer";
+@use "lists";       /* Lists, post-infos, posts-lists */
+@use "medias";      /* Audio, streams, figures, post-images */
+@use "texts";
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -6,7 +6,7 @@
    <!-- "{{.Content}}" pulls from the markdown content of the corresponding
         _index.md -->
    {{.Content}}
-    <article class="posts-list">
+    <section class="grid posts-list">
        <!-- Ranges through content/posts/*.md in reverse order, then displays
             the post title, the date and categories (list-footer template) -->
        {{ range .Pages.ByPublishDate.Reverse }}
@ -15,6 +15,6 @@
            {{ partial "lists-footer.html" . }}
        </article>
        {{ end }}
-    </article>
+    </section>
 </main>
 {{ end }}
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@ -4,11 +4,11 @@
 </header>
 <!-- "{{.Content}}" pulls from the markdown content of the corresponding
     _index.md -->
-<article>
+<main>
    <header>
        {{.Content }}
    </header>
-    <article class="posts-list">
+    <section class="posts-list">
        <!--
            Ranges pages by the publish date, in reverse order, to display the
            post titles of the section from most recent to older. It adds to
@ -22,6 +22,6 @@
                {{ partial "lists-footer.html" . }}
            </article>
            {{ end }}
-    </article>
-</article>
+    </section>
+</main>
 {{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,6 +1,6 @@
 {{ $currentPage := . -}}
 {{ $siteSources := .Site.Params.siteSources }}
-<footer class="main-footer no-print">
+<footer class="container main-footer no-print">
  <nav role="navigation" aria-label="Secondary">
    <ul>
      {{ range sort .Site.Menus.footer -}}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -4,11 +4,20 @@
  <title>{{ .Title  }} - {{ .Site.Title }}</title>
  <link rel="canonical" href="{{ .Permalink  }}">
  {{- if hugo.IsServer -}}
-  {{- $options := (dict "targetPath" "styles.css" "enableSourceMap" true) -}}
+  {{- $options := (dict
+    "targetPath" "styles.css"
+    "transpiler" "dartsass"
+    "includePaths" (slice "node_modules")
+    "enableSourceMap" true
+  ) -}}
  {{- $styles := resources.Get "scss/main.scss" | toCSS $options }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
  {{- else -}}
-  {{- $options := (dict "targetPath" "styles.css") -}}
+  {{- $options := (dict
+    "transpiler" "dartsass"
+    "targetPath" "styles.css"
+    "includePaths" (slice "node_modules")
+  ) -}}
  {{- $styles := resources.Get "scss/main.scss" | toCSS $options | minify -}}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
  {{- end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,18 +1,34 @@
-<header class="main-header">
-  <a href="{{ .Site.BaseURL }}" class="title no-reformat">
-    <img class="avatar no-print" src="{{ .Site.BaseURL  }}images/avatar.png">
-    <h1>{{ .Site.Title }}</h1>
-  </a>
+<header class="container main-header">
  <nav class="no-print" role="navigation" aria-label="Primary">
+    <ul>
+      <li>
+        <!-- Insert the logo in SVG xml -->
+        <a href="{{ .Site.BaseURL }}"
+           title="{{ .Site.Title }}">
+          {{ partial "logo.html" }}
+        </a>
+      </li>
+      <li>
+        <a href="{{ .Site.BaseURL }}"
+          class="title no-reformat"
+          title="{{ .Site.Title }}" >
+          <h1>{{ .Site.Title }}</h1>
+        </a>
+      </li>
+    </ul>
    <ul>
      {{ $currentPage := . -}}
      {{ range sort .Site.Menus.main -}}
-      <li class="nav-item">
-        <a class="nav-item-link{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
+      <li class="nav-item secondary">
+        <a class="nav-item-link{{if or (
+          $currentPage.IsMenuCurrent "main" .
+          ) (
+          $currentPage.HasMenuCurrent "main" .
+          ) }} active{{end}}"
           href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
      </li>
      {{ end -}}
-      <li class="nav-item">
+      <li class="nav-item secondary">
        {{ if .IsPage -}}
        <a class="nav-item-link"
           href="{{ .Site.BaseURL }}index.xml"
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@ -0,0 +1,21 @@
+<!-- Logo color is set in the variable file, adapted to colorsheme -->
+<svg
+  class="logo"
+  viewBox="0 0 25.91326 47.594673"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+    id="layer1"
+    transform="translate(-104.95998,-80.24504)">
+    <path
+      style="fill:var(--logo-color);stroke:var(--logo-color);"
+      d="m 173.18931,352.15872 c -5.12,0 -8.704,-1.024 -10.752,-3.072 -2.048,-2.176 -3.072,-4.8 -3.072,-7.872 v -4.032 c 0,-3.072 1.024,-5.632 3.072,-7.68 2.048,-2.176 5.632,-3.264 10.752,-3.264 5.12,0 8.704,1.088 10.752,3.264 2.048,2.048 3.072,4.608 3.072,7.68 v 4.032 c 0,3.072 -1.024,5.696 -3.072,7.872 -2.048,2.048 -5.632,3.072 -10.752,3.072 z"
+      transform="matrix(0.26458333,0,0,0.26458333,62.926875,-5.94)"
+    />
+    <path
+      d="m 287.55592,836.26743 v -134.016 h 25.152 l 21.312,54.528 h 1.344 l 21.12,-54.528 h 24 v 134.016 h -18.24 v -64.704 l 0.576,-40.704 h -1.728 l -27.072,68.928 -27.072,-68.928 h -1.728 l 0.576,40.704 v 64.704 z"
+      style="fill:var(--logo-color);stroke:var(--logo-color);"
+      transform="matrix(0.26458333,0,0,0.26458333,30.07125,-93.555)"
+    />
+  </g>
+</svg>
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,257 @@
+{
+  "name": "portfoliGor",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "portfoliGor",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "gutenberg-css": "^0.6.1"
+      },
+      "devDependencies": {
+        "@picocss/pico": "2.0.6",
+        "auto-changelog": "^2.0.0"
+      }
+    },
+    "node_modules/@picocss/pico": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.6.tgz",
+      "integrity": "sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.19.0"
+      }
+    },
+    "node_modules/auto-changelog": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.5.0.tgz",
+      "integrity": "sha512-UTnLjT7I9U2U/xkCUH5buDlp8C7g0SGChfib+iDrJkamcj5kaMqNKHNfbKJw1kthJUq8sUo3i3q2S6FzO/l/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.2.0",
+        "handlebars": "^4.7.7",
+        "import-cwd": "^3.0.0",
+        "node-fetch": "^2.6.1",
+        "parse-github-url": "^1.0.3",
+        "semver": "^7.3.5"
+      },
+      "bin": {
+        "auto-changelog": "src/index.js"
+      },
+      "engines": {
+        "node": ">=8.3"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/gutenberg-css": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/gutenberg-css/-/gutenberg-css-0.6.1.tgz",
+      "integrity": "sha512-6OKs0SsqMhU68sBPYvm0imc2Wa4s7W6QzwSUq5vM3GIqsAcd5hV5RvW7Natp1hbJ3go8B3xDPdYSb7zu3vDkbw==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize.css": "^8.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-from": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "license": "MIT"
+    },
+    "node_modules/parse-github-url": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.3.tgz",
+      "integrity": "sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "parse-github-url": "cli.js"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
  "author": "iGor milhit <igor@milhit.ch>",
  "license": "MIT",
  "devDependencies": {
-    "@picocss/pico": "^1.4.1",
+    "@picocss/pico": "2.0.6",
    "auto-changelog": "^2.0.0"
  },
  "dependencies": {
--- a/static/fonts/Lilex-Bold.ttf
+++ b/static/fonts/Lilex-Bold.ttf
--- a/static/fonts/Lilex-ExtraLight.ttf
+++ b/static/fonts/Lilex-ExtraLight.ttf
--- a/static/fonts/Lilex-Medium.ttf
+++ b/static/fonts/Lilex-Medium.ttf
--- a/static/fonts/Lilex-Regular.ttf
+++ b/static/fonts/Lilex-Regular.ttf
--- a/static/fonts/Lilex-Thin.ttf
+++ b/static/fonts/Lilex-Thin.ttf
--- a/yarn.lock
+++ b/yarn.lock
@ -2,107 +2,127 @@
 # yarn lockfile v1


-"@picocss/pico@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-1.4.1.tgz#cac2f8fb4cff70e371c9f0162a7929fd7e627b6e"
-  integrity sha512-YVIeo/021QhPk0/BuJBbNwrM1/v7R1PaJ9I4XhIrA8S5bswmR3SET23SbXHohCQ7ozHyAZnjpmDW7ZKbZIuApw==
+"@picocss/pico@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.6.tgz"
+  integrity sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==

 auto-changelog@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/auto-changelog/-/auto-changelog-2.3.0.tgz#08ab8b1840a5d804410f1d1a5d2c4b2df0d835e1"
-  integrity sha512-S2B+RtTgytsa7l5iFGBoWT9W9ylITT5JJ8OaMJ7nrwvnlRm1dSS2tghaYueDeInZZafOE+1llH3tUQjMDRVS1g==
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.5.0.tgz"
+  integrity sha512-UTnLjT7I9U2U/xkCUH5buDlp8C7g0SGChfib+iDrJkamcj5kaMqNKHNfbKJw1kthJUq8sUo3i3q2S6FzO/l/wA==
  dependencies:
-    commander "^5.0.0"
-    handlebars "^4.7.3"
-    node-fetch "^2.6.0"
-    parse-github-url "^1.0.2"
-    semver "^6.3.0"
+    commander "^7.2.0"
+    handlebars "^4.7.7"
+    import-cwd "^3.0.0"
+    node-fetch "^2.6.1"
+    parse-github-url "^1.0.3"
+    semver "^7.3.5"

-commander@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==

 gutenberg-css@^0.6.1:
  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/gutenberg-css/-/gutenberg-css-0.6.1.tgz#dd06c38ec3a33e6bb05a6d3cd2682c96d8b6eaf4"
+  resolved "https://registry.npmjs.org/gutenberg-css/-/gutenberg-css-0.6.1.tgz"
  integrity sha512-6OKs0SsqMhU68sBPYvm0imc2Wa4s7W6QzwSUq5vM3GIqsAcd5hV5RvW7Natp1hbJ3go8B3xDPdYSb7zu3vDkbw==
  dependencies:
    normalize.css "^8.0.1"

-handlebars@^4.7.3:
-  version "4.7.7"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
-  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+handlebars@^4.7.7:
+  version "4.7.8"
+  resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz"
+  integrity sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
  dependencies:
    minimist "^1.2.5"
-    neo-async "^2.6.0"
+    neo-async "^2.6.2"
    source-map "^0.6.1"
    wordwrap "^1.0.0"
  optionalDependencies:
    uglify-js "^3.1.4"

-minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+import-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz"
+  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
+  dependencies:
+    import-from "^3.0.0"

-neo-async@^2.6.0:
+import-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz"
+  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
+  dependencies:
+    resolve-from "^5.0.0"
+
+minimist@^1.2.5:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+neo-async@^2.6.2:
  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==

-node-fetch@^2.6.0:
-  version "2.6.6"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.6.tgz#1751a7c01834e8e1697758732e9efb6eeadfaf89"
-  integrity sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==
+node-fetch@^2.6.1:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
  dependencies:
    whatwg-url "^5.0.0"

 normalize.css@^8.0.1:
  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz"
  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==

-parse-github-url@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
-  integrity sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==
+parse-github-url@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.3.tgz"
+  integrity sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==

-semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+semver@^7.3.5:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==

 source-map@^0.6.1:
  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

 tr46@~0.0.3:
  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==

 uglify-js@^3.1.4:
-  version "3.14.4"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.4.tgz#68756f17d1b90b9d289341736cb9a567d6882f90"
-  integrity sha512-AbiSR44J0GoCeV81+oxcy/jDOElO2Bx3d0MfQCUShq7JRXaM4KtQopZsq2vFv8bCq2yMaGrw1FgygUd03RyRDA==
+  version "3.19.3"
+  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz"
+  integrity sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==

 webidl-conversions@^3.0.0:
  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==

 whatwg-url@^5.0.0:
  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
  dependencies:
    tr46 "~0.0.3"
    webidl-conversions "^3.0.0"

 wordwrap@^1.0.0:
  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+  resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==