picocss: import pico

- Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Plays with layouts to discover picocss. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00 · 2024-09-02 19:58:59 +02:00 · 759724f993
parent c2ac1f5ed1
commit 759724f993
14 changed files with 101 additions and 63 deletions
--- a/assets/fonts/Lilex-Bold.ttf
+++ b/assets/fonts/Lilex-Bold.ttf
--- a/assets/fonts/Lilex-ExtraLight.ttf
+++ b/assets/fonts/Lilex-ExtraLight.ttf
--- a/assets/fonts/Lilex-Medium.ttf
+++ b/assets/fonts/Lilex-Medium.ttf
--- a/assets/fonts/Lilex-Regular.ttf
+++ b/assets/fonts/Lilex-Regular.ttf
--- a/assets/fonts/Lilex-Thin.ttf
+++ b/assets/fonts/Lilex-Thin.ttf
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -1,4 +1,9 @@
-///////////////////
+:root {
+  --font-family: "Lilex", monospace;
+  --font-size: 120%;
+}
+
+/* ///////////////////
 //               //
 //    WIDTH      //
 //               //
@ -73,4 +78,4 @@ $aurora-orange: $nord12;
 $aurora-yellow: $nord13;
 $aurora-green: $nord14;
 $aurora-purple: $nord15;
-
+*/
--- a/assets/scss/font-face.scss
+++ b/assets/scss/font-face.scss
@ -0,0 +1,8 @@
+@font-face {
+  font-family: Lilex;
+  src:
+    url("../fonts/Lilex-Regular.ttf"),
+    url("../fonts/Lilex-Bold.ttf"),
+    url("../fonts/Lilex-Thin.ttf"),
+    url("../fonts/Lilex-ExtraLight.ttf");
+}
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -4,8 +4,15 @@
 //                //
 ////////////////////

-@import 'variables';
-@import 'grid';
+@use "@picocss/pico/scss/pico";
+@use "font-face";
+
+/* :root {
+  --font-family: "Lilex", monospace;
+} */
+
+@use "variables";
+/* @import 'grid';
@import 'mixins';
@import 'colors';
@import 'fonts';
@ -16,7 +23,7 @@
@import 'main_body';
@import 'medias';
@import 'post';
-@import 'texts';
+@import 'texts'; */


 ////////////////////
@ -25,7 +32,7 @@
 //                //
 ////////////////////

-code,
+/* code,
 pre {
  border-radius: 5px;
  padding: .2rem;
@ -43,4 +50,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,14 +1,23 @@
-<header class="main-header">
+<header class="container main-header">
+  <nav class="no-print" role="navigation" aria-label="Primary">
+    <ul>
+      <li>
        <a href="{{ .Site.BaseURL }}" class="title no-reformat">
-    <img class="avatar no-print" src="{{ .Site.BaseURL  }}images/avatar.png">
+          <img class="avatar no-print"
+               src="{{ .Site.BaseURL  }}images/avatar.png">
          <h1>{{ .Site.Title }}</h1>
        </a>
-  <nav class="no-print" role="navigation" aria-label="Primary">
+      </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}}"
+        <a class="nav-item-link{{if or (
+          $currentPage.IsMenuCurrent "main" .
+          ) (
+          $currentPage.HasMenuCurrent "main" .
+          ) }} active{{end}}"
           href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
      </li>
      {{ end -}}
--- a/yarn.lock
+++ b/yarn.lock
@ -3,25 +3,25 @@


 "@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==
+  version "1.5.13"
+  resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-1.5.13.tgz#2a2f2f5fcdd4e3f4ceedce7f95889faf39025362"
+  integrity sha512-BPTeE4JC95+7/vsG9r+6hDR1qUkV4YZ1blI/TI6peOmM94XubjmUDE3jUi4f6DBV6WmCL76ueTct/NerJ33E8A==

 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.4.0"
+  resolved "https://registry.yarnpkg.com/auto-changelog/-/auto-changelog-2.4.0.tgz#a2d57d49b70ada7ca2e7c6a20a71572561d19cd9"
+  integrity sha512-vh17hko1c0ItsEcw6m7qPRf3m45u+XK5QyCrrBFViElZ8jnKrPC1roSznrd1fIB/0vR/zawdECCRJtTuqIXaJw==
  dependencies:
-    commander "^5.0.0"
-    handlebars "^4.7.3"
-    node-fetch "^2.6.0"
+    commander "^7.2.0"
+    handlebars "^4.7.7"
+    node-fetch "^2.6.1"
    parse-github-url "^1.0.2"
-    semver "^6.3.0"
+    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.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==

 gutenberg-css@^0.6.1:
  version "0.6.1"
@ -30,32 +30,32 @@ gutenberg-css@^0.6.1:
  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.yarnpkg.com/handlebars/-/handlebars-4.7.8.tgz#41c42c18b1be2365439188c77c6afae71c0cd9e9"
+  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==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==

-neo-async@^2.6.0:
+neo-async@^2.6.2:
  version "2.6.2"
  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
  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.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
  dependencies:
    whatwg-url "^5.0.0"

@ -65,14 +65,14 @@ normalize.css@^8.0.1:
  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==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.3.tgz#2ab55642c8685b63fbe2a196f5abe4ae9bd68abc"
+  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==
+semver@^7.3.5:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==

 source-map@^0.6.1:
  version "0.6.1"
@ -82,22 +82,22 @@ source-map@^0.6.1:
 tr46@~0.0.3:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+  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.yarnpkg.com/uglify-js/-/uglify-js-3.19.3.tgz#82315e9bbc6f2b25888858acd1fff8441035b77f"
+  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=
+  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=
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
  dependencies:
    tr46 "~0.0.3"
    webidl-conversions "^3.0.0"
@ -105,4 +105,4 @@ whatwg-url@^5.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=
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==