picocss: import pico

- Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Loads the Lilex font. - Centers de site title and the main menu. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00 · 2024-09-02 19:58:59 +02:00 · d0adc170eb
parent c2ac1f5ed1
commit d0adc170eb
23 changed files with 528 additions and 104 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -16,10 +16,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

 ### Commits

+- picocss: import pico [`f86a2df`](https://git.milhit.ch/igor/portfoligor/commit/f86a2df9540433b27158f2a5425760356ee19fa6)
+- 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/_font-face.scss
+++ b/assets/scss/_font-face.scss
@ -0,0 +1,23 @@
+@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');
+}
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@ -4,13 +4,6 @@
 //               //
 ///////////////////

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

 blockquote {
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@ -5,16 +5,10 @@
 ///////////////////

 .main-footer {
-  margin-top: 1.25rem;
-  padding-bottom: 1.25rem;
-
-  ul {
-    display: flex;
-    justify-content: space-evenly;
-    margin: 0;
-    padding: 0;
+  nav {
+    ul {
+      flex-grow: 1;
+      justify-content: space-evenly;
+    }
  }
-
-  @include inline-list;
-
 }
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@ -4,7 +4,35 @@
 //               //
 ///////////////////

+.logo {
+  height: 3rem;
+  margin-right: 1em;
+}
+
 .main-header {
+
+  nav {
+    display: flex;
+    flex-direction: column;
+
+    ul {
+      align-self: center;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+
+      h1 {
+        margin: 0;
+      }
+
+    }
+
+  }
+}
+
+/* .main-header {
  display: flex;
  flex-direction: column;
  margin: 1.25rem 0;
@ -42,4 +70,4 @@
    @include inline-list;

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

 main {
--- 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: 46rem,
+    ),
+    xl: (
+      viewport: 46rem,
+    ),
+    xxl: (
+      viewport: 46rem,
+    ),
+  )
+);
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -1,4 +1,25 @@
-///////////////////
+// Overide pico variables
+
+:root {
+  --pico-font-family: "mylilex";
+}
+
+[data-theme=light],
+  :root:not([data-theme=dark]) {
+  --logo-color: #000000;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --logo-color: #ffffff;
+  }
+}
+
+[data-theme=dark] {
+  --logo-color: #ffffff;
+}
+
+/* ///////////////////
 //               //
 //    WIDTH      //
 //               //
@ -73,4 +94,4 @@ $aurora-orange: $nord12;
 $aurora-yellow: $nord13;
 $aurora-green: $nord14;
 $aurora-purple: $nord15;
-
+*/
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -4,19 +4,22 @@
 //                //
 ////////////////////

-@import 'variables';
-@import 'grid';
+@use "picocss";
+@use "font-face";
+@use "variables";
+@use "layout";
+@use "header";
+@use "footer";
+@use "fonts";
+
+/* @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';
+@import 'texts'; */


 ////////////////////
@ -25,7 +28,7 @@
 //                //
 ////////////////////

-code,
+/* code,
 pre {
  border-radius: 5px;
  padding: .2rem;
@ -43,4 +46,4 @@ pre {

 .term {
  margin-right: 1rem;
-}
+} */
--- 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,29 @@
-<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>
+        <a href="{{ .Site.BaseURL }}"
+           class="title no-reformat"
+           title="{{ .Site.Title }}" >
+          <!-- Insert the logo in SVG xml -->
+          {{ partial "logo.html" . -}}
+          <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==