update

config.toml

@@ -9,7 +9,7 @@ default_language = "fr"
 
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = true
-
+ignored_content = ["*.kate-swp"]
 
 taxonomies = [
     { name = "tags", feed = true},

content/blog/first/index.md

@@ -1,5 +1,5 @@
 +++
-title = "#1 Fabriquer son vélo cargo : la génèse"
+title = "Fabriquer son vélo cargo"
 date = 2023-02-15
 [taxonomies]
 tags = [
@@ -13,6 +13,7 @@ categorie = [
     ]
 [extra]
 image = "cover.jpg"
+subtitle = "#1 : la génèse"
 +++
 
 Je m'intéresse depuis longtemps aux modes de transport alternatifs. Mon déménagement vers la campagne et

content/notes/third.md

@@ -1,6 +1,6 @@
 +++
 title = "My third post"
-date = 2023-11-28
+date = 2023-04-28
 [taxonomies]
 tags = [
     "rust",
@@ -12,13 +12,13 @@ categorie = [
 [extra]
 image="/img/lantern.png"
 +++
-This is my third blog post. c'est un post assez cool bien qu'assez court mais que je veux tester pour voir ses limites
-
+This is my third blog post. c'est un post assez cool bien qu'assez court mais que je veux tester pour voir ses limites et bla bla bla
+<!-- more -->
 ```
 du code 
 ```
 # et c'est tout bon.
-<!-- more -->
+
 et c'est encore bon !
 
 

sass/blog.scss

@@ -9,3 +9,19 @@
 @import "../bulma/sass/grid/columns.sass";
 @import "../bulma/sass/layout/footer.sass";
 
+
+@import "./fontawesome/scss/fontawesome.scss";
+@import "./fontawesome/scss/solid.scss";
+@import "./fontawesome/scss/brands.scss";
+
+
+
+.bulma-overlay-mixin {
+  @include overlay(1.5rem);
+  background-color: darkorange;
+  border-radius: 0.25em;
+  color: white;
+  opacity: 0.9;
+  padding: 1em;
+}
+

sass/fontawesome/scss/_animated.scss

@@ -0,0 +1,153 @@
+// animating icons
+// --------------------------
+
+.#{$fa-css-prefix}-beat {
+  animation-name: #{$fa-css-prefix}-beat;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-bounce {
+  animation-name: #{$fa-css-prefix}-bounce;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
+}
+
+.#{$fa-css-prefix}-fade {
+  animation-name: #{$fa-css-prefix}-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-beat-fade {
+  animation-name: #{$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-flip {
+  animation-name: #{$fa-css-prefix}-flip;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-shake {
+  animation-name: #{$fa-css-prefix}-shake;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin-reverse {
+  --#{$fa-css-prefix}-animation-direction: reverse;
+}
+
+.#{$fa-css-prefix}-pulse,
+.#{$fa-css-prefix}-spin-pulse {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
+}
+
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .#{$fa-css-prefix}-beat,
+  .#{$fa-css-prefix}-bounce,
+  .#{$fa-css-prefix}-fade,
+  .#{$fa-css-prefix}-beat-fade,
+  .#{$fa-css-prefix}-flip,
+  .#{$fa-css-prefix}-pulse,
+  .#{$fa-css-prefix}-shake,
+  .#{$fa-css-prefix}-spin,
+  .#{$fa-css-prefix}-spin-pulse {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat {
+  0%, 90% { transform: scale(1); }
+  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
+}
+
+@keyframes #{$fa-css-prefix}-bounce {
+  0%   { transform: scale(1,1) translateY(0); }
+  10%  { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
+  30%  { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
+  50%  { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
+  57%  { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
+  64%  { transform: scale(1,1) translateY(0); }
+  100% { transform: scale(1,1) translateY(0); }
+}
+
+@keyframes #{$fa-css-prefix}-fade {
+  50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
+}
+
+@keyframes #{$fa-css-prefix}-beat-fade {
+  0%, 100% {
+    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-flip {
+  50% {
+    transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-shake {
+  0% { transform: rotate(-15deg); }
+  4% { transform: rotate(15deg); }
+  8%, 24% { transform: rotate(-18deg); }
+  12%, 28% { transform: rotate(18deg); }
+  16% { transform: rotate(-22deg); }
+  20% { transform: rotate(22deg); }
+  32% { transform: rotate(-12deg); }
+  36% { transform: rotate(12deg); }
+  40%, 100% { transform: rotate(0deg); }
+}
+
+@keyframes #{$fa-css-prefix}-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

sass/fontawesome/scss/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// bordered + pulled icons
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
+}
+
+.#{$fa-css-prefix}-pull-left { 
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}
+
+.#{$fa-css-prefix}-pull-right { 
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}

sass/fontawesome/scss/_core.scss

@@ -0,0 +1,43 @@
+// base icon class definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
+  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
+}
+
+.#{$fa-css-prefix},
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-sharp,
+.fas,
+.#{$fa-css-prefix}-solid,
+.far,
+.#{$fa-css-prefix}-regular,
+.fab,
+.#{$fa-css-prefix}-brands {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-rendering: auto;
+}
+
+.fas,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-solid,
+.far,
+.#{$fa-css-prefix}-regular {
+  font-family: 'Font Awesome 6 Free';
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-family: 'Font Awesome 6 Brands';
+}
+
+
+%fa-icon {
+  @include fa-icon;
+}

sass/fontawesome/scss/_fixed-width.scss

@@ -0,0 +1,7 @@
+// fixed-width icons
+// -------------------------
+
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}

sass/fontawesome/scss/_functions.scss

@@ -0,0 +1,57 @@
+// functions
+// --------------------------
+
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+  @return unquote("\"#{ $fa-var }\"");
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+//
+// Licensed under: The MIT License (MIT)
+//
+// Copyright (c) 2011-2021 Twitter, Inc.
+// Copyright (c) 2011-2021 The Bootstrap Authors
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@function fa-divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
+  }
+  @return ($quotient + $remainder) * $sign;
+}

sass/fontawesome/scss/_icons.scss

@@ -0,0 +1,10 @@
+// specific icon class definition
+// -------------------------
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+readers do not read off random characters that represent icons */
+
+@each $name, $icon in $fa-icons {
+  .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
+}
+

sass/fontawesome/scss/_list.scss

@@ -0,0 +1,18 @@
+// icons in a list
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  list-style-type: none;
+  margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
+  padding-left: 0;
+
+  > li { position: relative; }
+}
+
+.#{$fa-css-prefix}-li {
+  left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
+  position: absolute;
+  text-align: center;
+  width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
+  line-height: inherit;
+}

sass/fontawesome/scss/_mixins.scss

@@ -0,0 +1,75 @@
+// mixins
+// --------------------------
+
+// base rendering for an icon
+@mixin fa-icon {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
+// sets relative font-sizing and alignment (in _sizing)
+@mixin fa-size ($font-size) {
+  font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
+  line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
+  vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
+}
+
+// only display content to screen readers
+// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@mixin fa-sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+@mixin fa-sr-only-focusable() {
+  &:not(:focus) {
+    @include fa-sr-only();
+  }
+}
+
+// sets a specific icon family to use alongside style + icon mixins
+
+// convenience mixins for declaring pseudo-elements by CSS variable,
+// including all style-specific font properties, and both the ::before
+// and ::after elements in the duotone case.
+@mixin fa-icon-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-solid;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-regular($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-regular;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-brands($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-brands;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+

sass/fontawesome/scss/_rotated-flipped.scss

@@ -0,0 +1,31 @@
+// rotating + flipping icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.#{$fa-css-prefix}-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.#{$fa-css-prefix}-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.#{$fa-css-prefix}-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.#{$fa-css-prefix}-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.#{$fa-css-prefix}-flip-both,
+.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { 
+  transform: scale(-1, -1);
+}
+
+.#{$fa-css-prefix}-rotate-by {
+  transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
+}

sass/fontawesome/scss/_screen-reader.scss

@@ -0,0 +1,14 @@
+// screen-reader utilities
+// -------------------------
+
+// only display content to screen readers
+.sr-only,
+.#{$fa-css-prefix}-sr-only {
+  @include fa-sr-only;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.sr-only-focusable,
+.#{$fa-css-prefix}-sr-only-focusable {
+  @include fa-sr-only-focusable;
+}

sass/fontawesome/scss/_sizing.scss

@@ -0,0 +1,16 @@
+// sizing icons
+// -------------------------
+
+// literal magnification scale
+@for $i from 1 through 10 {
+  .#{$fa-css-prefix}-#{$i}x {
+    font-size: $i * 1em;
+  }
+}
+
+// step-based scale (with alignment)
+@each $size, $value in $fa-sizes {
+  .#{$fa-css-prefix}-#{$size} {
+     @include fa-size($value);
+  }
+}

sass/fontawesome/scss/_stacked.scss

@@ -0,0 +1,32 @@
+// stacking icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  display: inline-block;
+  height: 2em;
+  line-height: 2em;
+  position: relative;
+  vertical-align: $fa-stack-vertical-align;
+  width: $fa-stack-width;
+}
+
+.#{$fa-css-prefix}-stack-1x,
+.#{$fa-css-prefix}-stack-2x {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
+}
+
+.#{$fa-css-prefix}-stack-1x {
+  line-height: inherit;
+}
+
+.#{$fa-css-prefix}-stack-2x {
+  font-size: 2em;
+}
+
+.#{$fa-css-prefix}-inverse {
+  color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
+}

sass/fontawesome/scss/brands.scss

@@ -0,0 +1,30 @@
+/*!
+ * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
+}

sass/fontawesome/scss/fontawesome.scss

@@ -0,0 +1,21 @@
+/*!
+ * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

sass/fontawesome/scss/regular.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-regular {
+  font-weight: 400;
+}

sass/fontawesome/scss/solid.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
+}
+
+.fas,
+.#{$fa-css-prefix}-solid {
+  font-weight: 900;
+}

sass/fontawesome/scss/v4-shims.scss

@@ -0,0 +1,11 @@
+/*!
+ * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+// V4 shims compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'shims';

static/custom.css

@@ -31,3 +31,67 @@ section {
 footer {
     margin-top : 3em;
 }
+
+.media-flex {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-x: clip;
+}
+
+@media screen and (min-width: 769px){
+  .divide {
+        height: 100%;
+  }
+  
+}
+
+.divide {
+ padding-left: 1em;
+ padding-right: 2em;
+ border-top-width: 0px;
+ border-bottom-width: 0px;
+ border-right-width: 1px;
+ border-style: solid;
+ border-color: rgb(226 232 240);
+ border-left-width: 0px;
+}
+
+.note:hover {
+box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  
+}
+
+.plus-articles {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 1em;
+  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
+  padding: 1em;
+}
+
+@media screen and (max-width: 768px) {
+  .overlay {
+      background-image: linear-gradient(to bottom, rgba(190, 184, 184, 0), rgb(190, 184, 184));
+      display: flex;
+      justify-content: center;
+      padding: 1em;
+  }
+}
+
+.overlay:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+@media screen and (min-width: 769px) {
+  .overlay {
+  display: flex;
+  align-items: center;
+  position: relative;
+  right: 11em;
+  border-radius: 0.25em;
+  padding: 1em;
+  background-image: linear-gradient(to right, rgba(190, 184, 184, 0), rgb(190, 184, 184));
+  }  
+}

templates/index.html

@@ -5,62 +5,45 @@
 {% block content %}
 
 
-<div class="tile is-ancestor">
-  <div class="tile is-vertical is-8">
       <div class="columns is-multiline mt-6">
   {% set blog = get_section(path="blog/_index.md") %}
     {% for page in blog.pages %}
          {% if loop.index0 == 3 %}{% break %}{% endif %}
-        {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
+        {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, subtitle="la génèse", abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
                     
     {% endfor %}
     
-      
+    <div class="plus-articles">
+      <a href="#" class="title is-4" style="width: 6em; text-align: center;">
+            Plus 
+            <i class="computer fas fa-chevron-right"></i>
+      </a>
+    </div>
     </div>
     
-    <nav class="pagination is-centered is-rounded" role="navigation" aria-label="pagination">
-    <ul class="pagination-list">
+    <section class="section">
+  <h1 class="title">Notes diverses</h1>
+  <h2 class="subtitle">
+    Des sujets qui ne méritent pas un article complet mais dont j'ai envie de parler.
+  </h2>
+  <div class="columns is-gapless" style="box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);">
+   {% set notes = get_section(path="notes/_index.md") %}
+    {% for page in notes.pages %}
+    <div class="column  is-one-fifth ">
+         {% if loop.index0 == 5 %}{% break %}{% endif %}
+        {{ macro_media::create_media(link=page.permalink, img=page.extra.image, title=page.title, subtitle="la génèse", abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
+    </div>
+    {% endfor %}
+    <div class="overlay">
+      <a href="#" class="title is-4" style="width: 6em; text-align: center;">
+            Plus 
+            <i class="computer fas fa-chevron-right"></i>
+      </a>
+    </div>
+  </div>
+  </section>
+
     
-    <ul class="pagination-list">
-      <li><a class="pagination-link" href="{{ paginator.first }}">1</a></li>
-      <li><span class="pagination-ellipsis">&hellip;</span></li>
-      {% if paginator.previous %}
-      <li><a class="pagination-link"  href="{{ paginator.previous }}">{{ paginator.current_index - 1 }}</a></li>
-      {% endif %}
-      <li><a class="pagination-link is-current" aria-label="Page 46" >{{ paginator.current_index }}</a></li>
-      {% if paginator.next %}
-        <li><a class="pagination-link" href="{{ paginator.next }}">{{ paginator.current_index + 1 }}</a></li>
-      {% endif %}
-      <li><span class="pagination-ellipsis">&hellip;</span></li>
-      <li><a class="pagination-link" href="{{ paginator.last }}">{{ paginator.number_pagers }}</a></li>
-    </ul>
-  </nav>
-  </div>
-  <div class="tile mt-6 ml-3 columns">
-   <div class="column">
-   <div class="card">
-   <div class="card-image" >
-                <section class="hero is-info is-light">
-  <div class="hero-body">
-    <p class="title">
-      Tips et découvertes
-    </p>
-    <p class="subtitle">
-      Des trouvailles rapides
-    </p>
-  </div>
-</section>
-</div>
-                <div class="card-content" >
-                  {% set notes = get_section(path="notes/_index.md") %}
-                  {% for page in notes.pages %}
-                  {% if loop.index0 == 4 %}{% break %}{% endif %}
-                            {{ macro_media::create_media(link=page.permalink, img=page.extra.image, title=page.title, abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
-                  {% endfor %}
-                </div>
-            </div>
-        </div>  </div>
-        </div>
   
   
 {% endblock content %}

templates/macros/card.html

@@ -1,8 +1,8 @@
-{% macro create_card(link, img, title, abstract, tags, date) %}
+{% macro create_card(link, img, title, subtitle, abstract, tags, date) %}
         <div class="column is-one-third">
             <div class="card has-equal-height">
-            <a href="{{ link | safe }}">
-                <div class="card-image" >
+            <a href="{{ link | safe }}"  style="height:100%">
+<!--                <div class="card-image" >
                     <figure class="image is-3by2">
                         {% if img is not starting_with("/") %}
                         <img src={{ link }}{{ img }} alt="Placeholder image">
@@ -11,9 +11,10 @@
                         <img src="{{ get_url(path=img, trailing_slash=false) }}" alt="Placeholder image">
                         {% endif %}
                     </figure>
-                </div>
-                <div class="card-content">
+                </div>-->
+                <div class="card-content" style="height:100%">
                         <div class="title is-3 has-text-centered">{{ title }}</div>
+                        <div class="title is-5 has-text-centered">{{ subtitle }}</div>
                     <div class="media">
                         <div class="content">
                             <hr/>

templates/macros/media.html

@@ -1,36 +1,18 @@
 {% macro create_media(link, img, title, abstract, tags, date) %}
 
-<article class="media"><!--
-  <figure class="media-left">
-    <p class="image is-128x128">
-{% if img is not starting_with("/") %}
-                        <img src={{ link }}{{ img }} alt="Placeholder image">
-                        {% endif %}
-                        {% if img isstarting_with("/") %}
-                        <img src="{{ get_url(path=img, trailing_slash=false) }}" alt="Placeholder image">
-{% endif %}
-    </p>-->
-  </figure>
-  <div class="media-content">
-    <a href="{{ link | safe }}">
-    <div class="content">
-      <p>
-        <strong class="title is-3">{{ title }}</strong>
-        <br>
-         {{ abstract | markdown | safe }}
-      </p>
-    </div>
-    </a>
-    <nav class="level is-mobile">
-      <div class="level-left">
-        {% for tag in tags %}
+<article class="media has-equal-height divide note p-4" >
+  <div class="media-content media-flex" style="overflow-y: clip;">
+        <a href="#" class="has-equal-height" style="width: 100%">
+          <h4 class="title is-4">{{ title }}</h4>
+          <div class="content has-text-justified">
+              {{ abstract | markdown | safe }}
+          </div>
+        </a>
+        <div class="buttons mt-1">
+         {% for tag in tags %}
                         <a class="button is-small is-info is-light is-rounded" href="{{ get_url(path="tags/")  }}/{{ tag }}"> {{ tag }}</a>
-        {% endfor %}
-      </div>
-    </nav>
-  </div>
+        {% endfor %}</a>
+        </div>
 </article>
-
-        
 {% endmacro %}
 

templates/taxonomy_list.html

@@ -7,7 +7,7 @@
     <div class="columns is-vcentered mt-6">
     {{ macro_card::create_card_tag(link=current_url, title=taxo.name) }}
     {% for page in taxo.pages %}
-         {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
+         {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, subtitle="la génèse", abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
         {% endfor %}
       </div>
  {% endfor %}

templates/taxonomy_single.html

@@ -19,7 +19,7 @@
     
   {% for page in term.pages %}
   
-      {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
+      {{ macro_card::create_card(link=page.permalink, img=page.extra.image, title=page.title, subtitle="la génèse", abstract=page.summary, tags=page.taxonomies.tags, date=page.date) }}
                    
   {% endfor %}
   </div>