From d280a57c6b39ef2d6ae3397ea42bad95acb363f2 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Mon, 2 Sep 2024 19:58:59 +0200 Subject: [PATCH] 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 --- CHANGELOG.md | 5 + assets/scss/_colors.scss | 50 ------ assets/scss/_fonts.scss | 48 ++++-- assets/scss/_footer.scss | 20 +-- assets/scss/_grid.scss | 16 -- assets/scss/_header.scss | 50 +++--- assets/scss/_layout.scss | 3 - assets/scss/_lists.scss | 90 +++++++++++ assets/scss/_main_body.scss | 44 ----- assets/scss/_medias.scss | 33 ++-- assets/scss/_mixins.scss | 12 -- assets/scss/_picocss.scss | 39 +++++ assets/scss/_post.scss | 64 -------- assets/scss/_texts.scss | 32 ++-- assets/scss/_variables.scss | 106 +++++------- assets/scss/main.scss | 49 ++---- 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 +++++++++------ 30 files changed, 665 insertions(+), 461 deletions(-) delete mode 100644 assets/scss/_colors.scss delete mode 100644 assets/scss/_grid.scss delete mode 100644 assets/scss/_main_body.scss delete mode 100644 assets/scss/_mixins.scss create mode 100644 assets/scss/_picocss.scss delete mode 100644 assets/scss/_post.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..1ecd7dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,15 +11,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). ### 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) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss deleted file mode 100644 index 9ea85fc..0000000 --- a/assets/scss/_colors.scss +++ /dev/null @@ -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; -} diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss index 8790505..09de1f5 100644 --- 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; -} 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/_grid.scss b/assets/scss/_grid.scss deleted file mode 100644 index 20d5cd0..0000000 --- a/assets/scss/_grid.scss +++ /dev/null @@ -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 - } -} - 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/_lists.scss b/assets/scss/_lists.scss index 8f74bed..3ec6ffe 100644 --- 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; +} diff --git a/assets/scss/_main_body.scss b/assets/scss/_main_body.scss deleted file mode 100644 index 8094193..0000000 --- a/assets/scss/_main_body.scss +++ /dev/null @@ -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; -} diff --git a/assets/scss/_medias.scss b/assets/scss/_medias.scss index 16be130..880ddce 100644 --- 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; } } diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss deleted file mode 100644 index fe751c0..0000000 --- a/assets/scss/_mixins.scss +++ /dev/null @@ -1,12 +0,0 @@ -/////////////////// -// // -// MIXINS // -// // -/////////////////// - -// Inline, no bullet lists -@mixin inline-list { - ul > li { - display: inline; - } -} diff --git a/assets/scss/_picocss.scss b/assets/scss/_picocss.scss new file mode 100644 index 0000000..6e07030 --- /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: 43rem, + ), + xl: ( + viewport: 43rem, + ), + xxl: ( + viewport: 43rem, + ), + ) +); diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss deleted file mode 100644 index d0fc570..0000000 --- a/assets/scss/_post.scss +++ /dev/null @@ -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; -} diff --git a/assets/scss/_texts.scss b/assets/scss/_texts.scss index 816c599..54e477a 100644 --- 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; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 18631bb..04306d7 100644 --- 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; +} diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1a5333c..a1b3481 100644 --- 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"; 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 }}

    +     +
    • +