From 3e1639108efeb9ad5cd0482d67d868d2463ee186 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. - Uses the partials scss files. - Updates the changelog. Co-Authored-by: iGor milhit --- CHANGELOG.md | 5 + assets/scss/_font-face.scss | 23 +++ assets/scss/_fonts.scss | 16 +- assets/scss/_footer.scss | 20 +-- assets/scss/_header.scss | 50 +++--- assets/scss/_layout.scss | 3 - assets/scss/_medias.scss | 25 ++- assets/scss/_picocss.scss | 39 +++++ assets/scss/_texts.scss | 28 +--- assets/scss/_variables.scss | 91 +++-------- assets/scss/main.scss | 23 +-- layouts/_default/list.html | 4 +- layouts/_default/section.html | 8 +- layouts/partials/footer.html | 2 +- layouts/partials/head.html | 13 +- layouts/partials/header.html | 32 +++- 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 +++++++++------ 25 files changed, 546 insertions(+), 242 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..6f1bc5c 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,14 +13,15 @@ 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; } @@ -36,7 +30,3 @@ blockquote { font-weight: bold; } } - -#licence { - font-variant: small-caps; -} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 18d54be..42fc73e 100644 --- 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; - } diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 4886046..b13789a 100644 --- 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; + } + + } } } diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index d408ea7..6ee2818 100644 --- 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; } diff --git a/assets/scss/_medias.scss b/assets/scss/_medias.scss index 16be130..e27d838 100644 --- a/assets/scss/_medias.scss +++ b/assets/scss/_medias.scss @@ -4,9 +4,12 @@ // // /////////////////// + +@use "@picocss/pico/scss/colors/index" as *; + .audio, .stream { - border: $dark-polar solid 1px; + border: $purple-200 solid 1px; audio { border-radius: .5rem; @@ -14,7 +17,7 @@ } 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; @@ -55,21 +58,17 @@ figure { border-radius: 5px; - margin-left: .4rem; - margin-right: .4rem; + margin: 1em auto; padding: .4rem; - border: $dark-polar solid 1px; - - @include breakpoint(laptop) { - max-width: 80%; - } + border: $purple-200 solid 1px; + width: 80%; img { width: 100%; } figcaption { - font-size: $font-size-small; + font-size: smaller; p { margin: .2rem 0; @@ -83,7 +82,7 @@ figure { margin-left: 0; padding-left: 0; - @include breakpoint(laptop) { + @media(lg) { max-width: 97%; margin-right: 0; padding-right: 0; 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/_texts.scss b/assets/scss/_texts.scss index 816c599..1bd84ae 100644 --- a/assets/scss/_texts.scss +++ b/assets/scss/_texts.scss @@ -5,15 +5,15 @@ //////////////////// .verse { - line-height: $line-height-verse; - @include breakpoint(laptop) { + line-height: var(--line-height-verse); + @media(lg) { 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(lg) { + margin-bottom: var(--verse-p-bottom-space-larger); } } @@ -22,29 +22,13 @@ } } -.main-header, -.main-footer { - a { - text-decoration: none; - } -} - .citation { border: none; - margin-left: 0; 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; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 18631bb..e45fd08 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,76 +1,25 @@ -/////////////////// -// // -// WIDTH // -// // -/////////////////// +// Overide pico variables -$content-max-width: 46rem; // 920 px -$content-left-margin: 3vw; +:root { + --pico-font-family: "mylilex"; + --line-height-verse: 1.4; + --verse-p-bottom-space: 2rem; + --verse-p-bottom-space-larger: 3rem; +} -/////////////////// -// // -// FONT // -// // -/////////////////// +// Adapt the SVG logo color to the colorscheme -$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; +[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; + } +} -///////////////////// -// // -// 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; - +[data-theme=dark] { + --logo-color: #ffffff; +} diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1a5333c..2a75a33 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -4,19 +4,24 @@ // // //////////////////// -@import 'variables'; +@use "picocss"; +@use "font-face"; +@use "variables"; +@use "layout"; +@use "header"; +@use "footer"; +@use "fonts"; +@use "medias"; +@use "texts"; + +/* @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'; +*/ //////////////////// @@ -25,7 +30,7 @@ // // //////////////////// -code, +/* code, pre { border-radius: 5px; padding: .2rem; @@ -43,4 +48,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 }}

    +     +
    • +