all repos — blog @ 4e87fe53d17e38f56ff50f24c7c02dc44dcced86

Code and content for 5ika.ch

Improve accessibility on mobile
Tim Izzo tim@5ika.ch
Fri, 19 Apr 2024 18:05:40 +0200
commit

4e87fe53d17e38f56ff50f24c7c02dc44dcced86

parent

c724518c278018bbc96e18343dabc5b899cd99d3

7 files changed, 35 insertions(+), 13 deletions(-)

jump to
M assets/css/style.css → assets/css/style.css 
@@ -1,5 +1,6 @@ 
 :root {
   --color-primary: #4f46e5;
+  --color-primary-light: rgba(79, 70, 229, 0.08);
   --color-bg: #f1f5f9;
   --text-secondary: #374151;
 }

@@ -54,6 +55,7 @@ 
 pre:has(code) {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
+  overflow: auto;
 }
 
 :not(pre) > code {

@@ -64,17 +66,25 @@ padding: 0 0.25rem;
   border-radius: 4px;
 }
 
-.links-list {
+nav {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
 
-.links-list > a {
+nav > a {
   display: block;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.date {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  background-color: var(--color-primary-light);
+  padding: 0 0.25rem;
+  border-radius: 4px;
+}
+
 .activity-grid {
   display: grid;
   grid-template-columns: 1fr 4fr;

@@ -91,13 +101,22 @@ main {
     padding: 0 0.5rem;
   }
 
-  .links-list {
+  nav {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 
   .activity-grid {
     grid-template-columns: 1fr;
+  }
+
+  ul.links-list {
+    padding-left: 1rem;
+    font-size: 1.1rem;
+
+    & > * {
+      margin-bottom: 1rem;
+    }
   }
 }
M content/inspirations.md → content/inspirations.md 
@@ -10,11 +10,11 @@ - [10% Happier](https://www.danharris.com/books) Dan Harris
 
 # Articles
 
-- [Aux apatrides du web merdique](https://www.arretsurimages.net/chroniques/clic-gauche/aux-apatrides-du-web-merdique) 28.01.2024
-- [Permacomputing](http://viznut.fi/texts-en/permacomputing.html) 24.06.2020
-- [Rediscovering the Small Web](https://neustadt.fr/essays/the-small-web/) 25.05.2020
-- [Into the Personal-Website-Verse](https://matthiasott.com/articles/into-the-personal-website-verse) 19.05.2019
-- [Against an Increasingly User-Hostile Web](https://neustadt.fr/essays/against-a-user-hostile-web/) 02.11.2017
+- [Aux apatrides du web merdique](https://www.arretsurimages.net/chroniques/clic-gauche/aux-apatrides-du-web-merdique) <span class='date'>28.01.2024</span>
+- [Permacomputing](http://viznut.fi/texts-en/permacomputing.html) <span class='date'>24.06.2020</span>
+- [Rediscovering the Small Web](https://neustadt.fr/essays/the-small-web/) <span class='date'>25.05.2020</span>
+- [Into the Personal-Website-Verse](https://matthiasott.com/articles/into-the-personal-website-verse) <span class='date'>19.05.2019</span>
+- [Against an Increasingly User-Hostile Web](https://neustadt.fr/essays/against-a-user-hostile-web/) <span class='date'>02.11.2017</span>
 
 # Blogroll
M hugo.toml → hugo.toml 
@@ -18,3 +18,6 @@ 
 [caches]
   [caches.getjson]
     maxAge = "24h"
+
+[markup.goldmark.renderer]
+  unsafe = true # Allow HTML in md files
M layouts/_default/list.html → layouts/_default/list.html 
@@ -7,13 +7,13 @@ Vous pouvez également retrouver ces articles à travers
     <a href="{{ .Permalink }}">ce flux RSS</a>.
   </p>
   {{ end }}
-  <ul>
+  <ul class="links-list">
     <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
     <li>
       <a href="{{ .RelPermalink }}">
         {{ if .Date }}
-          {{ .Date | time.Format "02.01.2006" }} - 
+          <span class="date">{{ .Date | time.Format "02.01.06" }}</span>
         {{ end }}
         {{ .LinkTitle }}</a
       >
M layouts/shortcodes/activity.html → layouts/shortcodes/activity.html 
@@ -3,7 +3,7 @@ <div class="activity-grid">
     <h4>Dernière publication</h4>
     <div>
         {{ range first 1 (where site.RegularPages "Section" "posts") }}
-        <a href="{{ .RelPermalink }}">{{ .LinkTitle }} ({{ .Date | time.Format "02.01.06" }})</a>
+        <a href="{{ .RelPermalink }}">{{ .LinkTitle }} <span class='date'>{{ .Date | time.Format "02.01.06" }}</span></a>
         {{end}}
     </div>
M layouts/shortcodes/links.html → layouts/shortcodes/links.html 
@@ -1,4 +1,4 @@ 
-<nav class="links-list">
+<nav>
   <a href="/posts">📝 Blog</a>
   <a href="./about">👋 Plus d’info</a>
   <a href="./now">⬇️ Maintenant</a>
M layouts/tutos/list.html → layouts/tutos/list.html 
@@ -1,7 +1,7 @@ 
 {{ define "main" }}
 <main>
   <p>{{ .Content }}</p>
-  <ul>
+  <ul class="links-list">
     <!-- Ranges through content/posts/*.md -->
     {{ range .Pages }}
     <li>