git server — blog.git: 599c5307d90fdbac44a9d9a8a80284daf60af38a

@@ -32,31 +32,33 @@ --color-primary: var(--lavender);
   --color-bg: white;
   --color-primary-light: color-mix(
     in srgb,
-    var(--color-primary) 20%,
+    var(--color-primary) 7%,
     var(--color-bg)
   );
   --text-primary: var(--text);
   --text-secondary: var(--subtext1);
+  --font-family-normal:
+    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  --font-family-alt:
+    "Departure", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", monospace;
+}
+
+@font-face {
+  font-family: Departure;
+  src: url("/fonts/DepartureMono-Regular.woff2");
 }
 
 body {
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace,
-    serif;
+  font-family: var(--font-family-normal);
   background-color: var(--color-bg);
   color: var(--text-primary);
 }
 
 header {
+  font-family: var(--font-family-alt);
   font-size: 1.5rem;
-  font-weight: bold;
 }
 
 main {
@@ -66,6 +68,7 @@ padding: 2rem 0 4rem;
 }
 
 blockquote {
+  font-family: var(--font-family-alt);
   margin: 0;
   padding-left: 1rem;
   color: var(--text-secondary);
@@ -78,6 +81,7 @@ }
 
 a {
   color: var(--color-primary);
+  color: color-mix(in srgb, var(--color-primary) 50%, var(--text-primary));
   text-decoration: none;
 }
 
@@ -89,6 +93,7 @@ 
 h1,
 h2,
 h3 {
+  font-family: var(--font-family-alt);
   background-color: var(--color-primary-light);
   border-radius: 4px;
   padding: 0.25rem 0.5rem;
@@ -165,17 +170,26 @@ }
 
 nav {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   margin: 2rem 0;
 }
 
 nav > a {
-  display: block;
+  font-family: var(--font-family-alt);
+  color: var(--text-primary);
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .date {
+  font-family: var(--font-family-alt);
   font-size: 0.9rem;
   color: var(--text-secondary);
   background-color: var(--color-primary-light);
@@ -210,16 +224,31 @@ display: grid;
   grid-template-columns: 1fr 4fr;
   column-gap: 1rem;
   row-gap: 1rem;
+  padding-left: 0.5rem;
 
   > h4 {
+    font-family: var(--font-family-alt);
+    font-size: 14px;
     margin: 0;
   }
 }
 
 .contact {
+  font-family: var(--font-family-alt);
+  padding-left: 0.5rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 1rem;
+
+  > a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 #contact-form {
@@ -243,6 +272,10 @@ }
 
 ul.categories-list li::before {
   content: "🌱 ";
+}
+
+.icon-pixel {
+  height: 1rem;
 }
 
 @media only screen and (max-width: 600px) {

A assets/fonts/DepartureMono-Regular.woff2

M content/_index.md → content/_index.md

@@ -2,16 +2,13 @@ ---
 Description: Partisan d'un Internet ouvert, sobre et distribué, je cultive des outils digitaux au travers de l'entreprise auto-gouvernée Octree afin de contribuer au monde de demain.
 ---
 
-> Un numérique durable au service de l'Humain 🌱
+> Un numérique durable au service de l'Humain <?xml version="1.0" encoding="UTF-8"?><svg fill='#40a02b' class="icon-pixel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m18,2v1h-2v1h-2v1h-1v1h-1v2h1v2h1v2h2v-1h2v-1h2v-1h1v-1h1v-2h1V2h-5Zm2,4v2h-2v1h-2v1h-1v-2h-1v-2h2v-1h2v-1h3v2h-1Z"/><path d="m12,9h-1v-1h-1v-1h-2v-1h-2v-1H1v3h1v2h1v2h1v1h1v1h2v1h4v7h2v-11h-1v-2Zm-7,3v-2h-1v-2h-1v-1h3v1h2v1h2v2h1v2h-4v-1h-2Z"/></svg>
 
 Ingénieur engagé pour un Internet ouvert, sobre et distribué, je cultive des outils numériques
 au travers de l'entreprise auto-gouvernée [Octree](https://octree.ch) afin de
 contribuer au monde de demain.
 
-J'aime m'attaquer à des problèmes complexes et conceptualiser les architectures techniques pour les résoudre dans une approche sobre et performante.
-J'ai l'habitude de me plonger dans le fonctionnement d'autres métiers pour  en comprendre toutes les intrications.
-
-Je développe notamment des projets dans les domaines de la [gestion des déchets](/r-21), l'[optimisation de consommation de bâtiments](/evospe), la [distribution de nourriture en circuit court](/circuitcourt) et le [covoiturage](/caroster).
+Je développe des projets dans les domaines de la [gestion des déchets](/r-21), l'[optimisation de consommation de bâtiments](/evospe), la [distribution de nourriture en circuit court](/circuitcourt) et le [covoiturage](/caroster).
 
 {{< links >}}

M layouts/partials/header.html → layouts/partials/header.html

@@ -1,21 +1,25 @@ 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="/favicon.ico"/>
+  <link rel="icon" href="/favicon.ico" />
   <link
     href="/posts/index.xml"
     type="application/rss+xml"
     rel="alternate"
     title="Le blog de 5ika"
   />
-  {{ with .OutputFormats.Get "rss" -}}
-    {{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
-  {{ end }}
-  <link rel="alternate" type="text/turtle" href="{{ .Site.BaseURL }}/profile.ttl" />
+  {{ with .OutputFormats.Get "rss" -}} {{ printf `
+  <link rel="%q" type="%q" href="%q" title="%q" />
+  ` .Rel .MediaType.Type .Permalink site.Title | safeHTML }} {{ end }}
+  <link
+    rel="alternate"
+    type="text/turtle"
+    href="{{ .Site.BaseURL }}/profile.ttl"
+  />
   <title>
     {{ .Page.Title }} {{- if .Page.Title }} - {{ end -}} Tim Izzo @5ika.ch
   </title>
   {{ $css := resources.Get "css/style.css" | minify }}
-  <link href="{{ $css.RelPermalink }}" rel="stylesheet">
+  <link href="{{ $css.RelPermalink }}" rel="stylesheet" />
   {{ partial "metatags.html" . }}
 </head>

M layouts/shortcodes/contact.html → layouts/shortcodes/contact.html

@@ -1,7 +1,16 @@ 
-<h3 style="margin-top:2rem">Contact</h3>
-<div class='contact'>
-  <a href="https://tooting.ch/@5ika" target="_blank" rel="me">⁂  Mastodon</a>
-  <a href="https://matrix.to/#/@tizzo:matrix.octr.ee" target="_blank">🔗 Matrix</a>
-  <a href="mailto:tim@5ika.ch" target="_blank">✉️ Email</a>
-  <a href="/contact">🔒 Message confidentiel</a>
+<h3 style="margin-top: 2rem">Contact</h3>
+<div class="contact">
+  <a href="https://tooting.ch/@5ika" target="_blank" rel="me"
+    ><span class="icon-pixel">⁂</span> Mastodon</a
+  >
+  <a href="https://matrix.to/#/@tizzo:matrix.octr.ee" target="_blank"
+    ><img alt="🔗" class="icon-pixel" src="/icons/message.svg" /> Matrix</a
+  >
+  <a href="mailto:tim@5ika.ch" target="_blank"
+    ><img alt="✉️" class="icon-pixel" src="/icons/mail.svg" /> Email</a
+  >
+  <a href="/contact"
+    ><img alt="🔒" class="icon-pixel" src="/icons/lock.svg" /> Message
+    confidentiel</a
+  >
 </div>

M layouts/shortcodes/links.html → layouts/shortcodes/links.html

@@ -1,14 +1,31 @@ 
 <nav>
-  <a href="/posts">📝 Blog</a>
-  <a href="/projects">🔨 Projets</a>
-  <a href="./about">👋 Plus d’info</a>
-  <a href="./now">⬇️ Maintenant</a>
+  <a href="/posts"
+    ><img alt="📝" class="icon-pixel" src="/icons/notebook-pen.svg" /> Blog</a
+  >
+  <a href="/projects"
+    ><img alt="🔨" class="icon-pixel" src="/icons/tools.svg" /> Projets</a
+  >
+  <a href="./about"
+    ><img alt="👋" class="icon-pixel" src="/icons/human.svg" /> Plus d’info</a
+  >
+  <a href="./now"
+    ><img alt="⬇️" class="icon-pixel" src="/icons/calendar.svg" /> Maintenant</a
+  >
   {{/* <a href="./ideas">💡 Idées</a> */}}
-  <a href="./inspirations">🧠 Inspirations</a>
-  <a href="./books">📘 Lectures</a>
-  <a href="/tim@5ika.ch.pub">🔑 Clé PGP</a>
-  <a href="./cv">👷 CV</a>
-  <a href="https://git.5ika.ch" style="display: flex; column-gap: 0.5rem"
-    ><img width="19px" src="{{ .Site.BaseURL }}/img/git.svg" />git</a
+  <a href="./inspirations"
+    ><img alt="🧠" class="icon-pixel" src="/icons/lightbulb.svg" />
+    Inspirations</a
+  >
+  <a href="./books"
+    ><img alt="📘" class="icon-pixel" src="/icons/book-open.svg" /> Lectures</a
+  >
+  <a href="/tim@5ika.ch.pub"
+    ><img alt="🔑" class="icon-pixel" src="/icons/key.svg" /> Clé PGP</a
+  >
+  <a href="./cv"
+    ><img alt="👷" class="icon-pixel" src="/icons/suitcase.svg" /> CV</a
+  >
+  <a href="https://git.5ika.ch"
+    ><img alt="" class="icon-pixel" src="/icons/git-branch.svg" /> git</a
   >
 </nav>

A static/icons/book-open.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#d20f39" viewBox="0 0 24 24"><path d="M2 3h9v2H2zM0 19h11v2H0zM13 3h9v2h-9zm0 16h11v2H13zM11 5h2v18h-2zM0 5h2v14H0zm22 0h2v14h-2zm-7 2h5v2h-5zm0 4h5v2h-5zm0 4h2v2h-2z"/></svg>

A static/icons/calendar.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#dd7878" viewBox="0 0 24 24"><path d="M19 22H5v-2h14v2ZM5 8h14V6h2v14h-2V10H5v10H3V6h2v2Zm4 10H7v-2h2v2Zm4 0h-2v-2h2v2Zm-4-4H7v-2h2v2Zm4 0h-2v-2h2v2Zm4 0h-2v-2h2v2ZM9 4h6V2h2v2h2v2H5V4h2V2h2v2Z"/></svg>

A static/icons/git-branch.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fe640b" viewBox="0 0 24 24"><path d="M8 22H4v-2h4v2Zm-4-2H2v-4h2v4Zm6 0H8v-4h2v4Zm7-1h-5v-2h5v2Zm2-2h-2v-5h2v5ZM8 16H4v-2h4v2Zm-1-4H5V2h2v10Zm13-2h-4V8h4v2Zm-4-2h-2V4h2v4Zm6 0h-2V4h2v4Zm-2-4h-4V2h4v2Z"/></svg>

A static/icons/human.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#179299" viewBox="0 0 24 24"><path d="M17 9h-2v13h-2v-6h-2v6H9V9H7V7h10v2Zm-6 5h2V9h-2v5ZM7 7H5V5h2v2Zm12 0h-2V5h2v2Zm-5-1h-4V2h4v4ZM5 5H3V3h2v2Zm16 0h-2V3h2v2Z"/></svg>

A static/icons/key.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ea76cb" viewBox="0 0 24 24"><path d="M11 18H3V16H11V18ZM23 15H21V18H17V16H19V13H21V11H11V8H13V9H23V15ZM3 16H1V8H3V16ZM17 16H15V15H13V16H11V13H17V16ZM9 14H5V10H9V14ZM11 8H3V6H11V8Z"></path></svg>

A static/icons/lightbulb.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#df8e1d" viewBox="0 0 24 24"><path d="M15 22H9v-6h6v6Zm-4-2h2v-2h-2v2Zm-2-4H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 14H5V8h2v6Zm12 0h-2V8h2v6ZM3 12H0v-2h3v2Zm21 0h-3v-2h3v2ZM9 8H7V6h2v2Zm8 0h-2V6h2v2ZM5 6H3V4h2v2Zm10 0H9V4h6v2Zm6 0h-2V4h2v2ZM3 4H1V2h2v2Zm20 0h-2V2h2v2ZM13 3h-2V0h2v3Z"/></svg>

A static/icons/lock.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#df8e1d" viewBox="0 0 24 24"><path d="M19 22H5v-2h14v2ZM5 20H3V10h2v10Zm16 0h-2V10h2v10ZM9 8h6V4h2v4h2v2H5V8h2V4h2v4Zm6-4H9V2h6v2Z"/></svg>

A static/icons/mail.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#e64553" viewBox="0 0 24 24"><path d="M20 20H4v-2h16v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-8-4h-4v-2h4v2Zm-4-2H8v-2h2v2Zm6 0h-2v-2h2v2Zm-8-2H6V8h2v2Zm10 0h-2V8h2v2Zm2-4H4V4h16v2Z"/></svg>

A static/icons/message.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#209fb5" viewBox="0 0 24 24"><path d="M4 18h2v2H4v2H2V4h2v14Zm16 0H6v-2h14v2Zm2-2h-2V4h2v12Zm-12-2H6v-2h4v2Zm4-4H6V8h8v2Zm6-6H4V2h16v2Z"/></svg>

A static/icons/notebook-pen.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#7287fd" viewBox="0 0 24 24"><path d="M18 20h2v2H6v-2h10v-8h2v8ZM6 7h2v2H6v2h2v2H6v2h2v2H6v3H4v-3H2v-2h2v-2H2v-2h2V9H2V7h2V4h2v3Zm16 13h-2V10h2v10ZM16 8h2v2h-4V6h2v2Zm4 0h-2V6h2v2Zm-2-2h-2V4h2v2Zm4 0h-2V4h2v2Zm-8-2H6V2h8v2Zm6 0h-2V2h2v2Z"></path></svg>

A static/icons/suitcase.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#8839ef" viewBox="0 0 24 24"><path d="M20 22H4v-2h16v2ZM4 20H2V8h2v12Zm18 0h-2V8h2v12ZM8 18H6v-8h2v8Zm10 0h-2v-8h2v8ZM10 6h4V4h2v2h4v2H4V6h4V4h2v2Zm4-2h-4V2h4v2Z"/></svg>

A static/icons/tea.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M16 20H6v-2h10v2Zm-2-4H8v-4h2V8H6v10H4V6h16v2h-2v4h2v2h-2v4h-2V8h-4v4h2v4Zm8-4h-2V8h2v4ZM9 4H7V2h2v2Zm6 0h-2V2h2v2Zm-4-2H9V0h2v2Zm6 0h-2V0h2v2Z"/></svg>

A static/icons/tools.svg

@@ -0,0 +1,1 @@ 
+<svg xmlns="http://www.w3.org/2000/svg" fill="#04a5e5" viewBox="0 0 24 24"><path d="M9 22H7v-2h2v2Zm12-6h2v6h-6v-6h2v-6h2v6Zm-2 2v2h2v-2h-2ZM7 20H5v-8h2v8Zm4 0H9v-8h2v8Zm-6-8H3v-2h2v2Zm8 0h-2v-2h2v2ZM3 10H1V4h2v6Zm12 0h-2V4h2v6Zm4 0h-2V4h2v6Zm4 0h-2V4h2v6ZM7 6h2V2h4v2h-2v4H5V4H3V2h4v4Zm14-2h-2V2h2v2Z"></path></svg>

all repos — blog @ 599c5307d90fdbac44a9d9a8a80284daf60af38a

Code and content for 5ika.ch