From d0adc170ebc6ea434d1c5cde98cae6194d229fa1 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Mon, 2 Sep 2024 19:58:59 +0200 Subject: [PATCH] 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 --- CHANGELOG.md | 5 + assets/scss/_font-face.scss | 23 +++ assets/scss/_fonts.scss | 9 +- assets/scss/_footer.scss | 16 +- assets/scss/_header.scss | 30 +++- assets/scss/_layout.scss | 4 +- assets/scss/_picocss.scss | 39 +++++ assets/scss/_variables.scss | 25 ++- assets/scss/main.scss | 21 +-- layouts/_default/list.html | 4 +- layouts/_default/section.html | 8 +- layouts/partials/footer.html | 2 +- layouts/partials/head.html | 13 +- layouts/partials/header.html | 27 +++- layouts/partials/logo.html | 21 +++ package-lock.json | 257 ++++++++++++++++++++++++++++++ package.json | 2 +- static/fonts/Lilex-Bold.ttf | Bin 0 -> 194380 bytes static/fonts/Lilex-ExtraLight.ttf | Bin 0 -> 187080 bytes static/fonts/Lilex-Medium.ttf | Bin 0 -> 189512 bytes static/fonts/Lilex-Regular.ttf | Bin 0 -> 195632 bytes static/fonts/Lilex-Thin.ttf | Bin 0 -> 186100 bytes yarn.lock | 126 +++++++++------ 23 files changed, 528 insertions(+), 104 deletions(-) create mode 100644 assets/scss/_font-face.scss create mode 100644 assets/scss/_picocss.scss create mode 100644 layouts/partials/logo.html create mode 100644 package-lock.json create mode 100644 static/fonts/Lilex-Bold.ttf create mode 100644 static/fonts/Lilex-ExtraLight.ttf create mode 100644 static/fonts/Lilex-Medium.ttf create mode 100644 static/fonts/Lilex-Regular.ttf create mode 100644 static/fonts/Lilex-Thin.ttf diff --git a/CHANGELOG.md b/CHANGELOG.md index 960e634..d1c4f88 100644 --- 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) diff --git a/assets/scss/_font-face.scss b/assets/scss/_font-face.scss new file mode 100644 index 0000000..b23c58a --- /dev/null +++ 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'); +} diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 8790505..9f1c1f7 100644 --- 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 { diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 18d54be..0c70f49 100644 --- 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; - } diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 4886046..9fc39d2 100644 --- 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; } -} +} */ diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index d408ea7..10c0edb 100644 --- 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 { diff --git a/assets/scss/_picocss.scss b/assets/scss/_picocss.scss new file mode 100644 index 0000000..1e57eef --- /dev/null +++ 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, + ), + ) +); diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 18631bb..29f43b7 100644 --- 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; - +*/ diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1a5333c..a72e857 100644 --- 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; -} +} */ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 775ad82..b9440df 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -6,7 +6,7 @@ {{.Content}} -
+
{{ range .Pages.ByPublishDate.Reverse }} @@ -15,6 +15,6 @@ {{ partial "lists-footer.html" . }}
{{ end }} - + {{ end }} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index e1bc813..655afa5 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -4,11 +4,11 @@ -
+
{{.Content }}
-
+
+ {{ partial "logo.html" . -}} +

{{ .Site.Title }}

+ + +