From e3122d1d8f121590a742f7aef1697b7581a77b48 Mon Sep 17 00:00:00 2001
From: gribse <achille.toupin@gadz.org>
Date: Sun, 27 Apr 2025 22:40:54 +0200
Subject: [PATCH] refactor home layout for improved structure and
 responsiveness

---
 layouts/home.html | 130 +++++++++++++++++++++++++++++++---------------
 1 file changed, 88 insertions(+), 42 deletions(-)

diff --git a/layouts/home.html b/layouts/home.html
index 23676bf..b40f12f 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -27,8 +27,6 @@
             align-items: stretch; /* Ensure full height */
             min-height: 100vh; /* Ensure the body takes up the full viewport height */
         }
-
-
         .main-screen {
             display: flex;
             flex-direction: row;
@@ -56,6 +54,12 @@
             align-items: center; /* Align items vertically in the center */
             padding: 10px 20px; /* Optional: Add some padding */
         }
+        .title-wrapper {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            justify-content: space-between;
+        }
         .site-title {
             flex-grow: 1;
             margin: 0; /* Remove default margin */
@@ -65,25 +69,14 @@
         .navigation {
             flex-grow: 3;
             display: flex;
-
         }
-        .navigation ul {
-            display: flex;
-            flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
-            list-style: none;
-            margin: 0; /* Remove default margin */
-            padding: 0; /* Remove default padding */
-            justify-content: flex-end; /* Align items to the right */
+        .presentation, .side-content-column > * {
+            background-color: var(--entry);
+            padding: 10px;
+            border-radius: var(--radius);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
-        .navigation ul li {
-            margin: 0 10px 0 10px;
-            
-        }
-        .navigation ul li a:hover {
-            text-decoration: underline; /* Add underline on hover */
-            
-        }
-        .center-content {
+        .center-content, .side-content-column {
             display: flex;
             flex-grow: 1; /* Allow it to grow */
             gap: 20px; /* Optional: Add spacing between child elements */
@@ -99,8 +92,22 @@
         }
         .side-content-column {
             max-width: 100%; /* Ensure it doesn't exceed its container */
+            flex-direction: column;
         }
-        @media (max-width: 1380px) {
+        .excerpt {
+            display: flex;
+            align-items: center; /* Align items vertically in the center */
+            gap: 10px; /* Add spacing between text and image */
+        }
+        .excerpt-text {
+            flex: 1; /* Allow text to take up remaining space */
+        }
+        .excerpt img {
+            flex-shrink: 0; /* Prevent the image from shrinking */
+            max-width: 150px; /* Ensure the image doesn't exceed its intended size */
+            height: auto; /* Maintain aspect ratio */
+        }
+        @media (max-width: 1600px) {
             .side-screen {
             display: none; /* Hide side-screens on smaller screens */
             }
@@ -171,24 +178,8 @@
         </div>
         <div class="main-content">
             <div class="header">
-                <h1 class="site-title">Achille Toupin</h1>
-                <nav class="navigation">
-                    <ul>
-                        <li>📝 <a href="blog">Blog</a></li>
-                        <p> · </p>
-                        <li>📠 <a href="collection">Machines</a></li>
-                        <p> · </p>
-                        <li>🔗 <a href="liens">Liens</a></li>
-                        <p> · </p>
-                        <li>🔖 <a href="marque-pages">Marque-pages</a></li>
-                        <p> · </p>
-                        <li>🌐 <a href="blogroll">Blogroll</a></li>
-                        <p> · </p>
-                        <li>❓ <a href="a-propos">A propos</a></li>
-                        <p> · </p>
-                        <li>✉️ <a href="contact">Contact</a></li>
-                    </ul>
-
+                <div class="title-wrapper">
+                    <h1 class="site-title">Achille Toupin</h1>
                     {{- if (not site.Params.disableThemeToggle) }}
                     <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
                         <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
@@ -211,6 +202,11 @@
                         </svg>
                     </button>
                     {{- end }}
+                </div>
+
+
+                <nav class="navigation">
+                    {{ partial "menu.html" }}
                 </nav>
             </div>
             
@@ -220,12 +216,62 @@
                 </div>
                 <div class="side-content-column">
                     <div class="dernier-article">
-                        <h2>Mon dernier article</h2>
-                        {{ partial "posts-recents-carte.html" . }}
+                        {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+                            {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+                            {{- if $image -}}
+                                {{- $optimizedImage := $image.Fill "150x150 webp q95 Center" -}}
+                                <a href="{{ .RelPermalink }}">
+                                    <h2>Mon dernier article :</h2>
+                                    <h3>{{ .Title }}</h3>
+                                    <div class="excerpt">
+                                        <div class="excerpt-text">
+                                            <small>{{ .Date.Format "January 2, 2006" }}</small>
+                                            <p>{{ .Plain | plainify | truncate 100 }}</p>
+                                        </div>
+                                        <img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
+                                    </div>
+                                </a>
+                            {{ end }}
+                        {{ end }}
                     </div>
                     <div class="dernier-article">
-                        <h2>Mon dernier article</h2>
-                        {{ partial "posts-recents-carte.html" . }}
+                        {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "collection") }}
+                            {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+                            {{- if $image -}}
+                                {{- $optimizedImage := $image.Fit "150x150 webp q95 Center" -}}
+                                <a href="{{ .RelPermalink }}">
+                                    <h2>Une belle machine :</h2>
+                                    <h3>{{ .Title }}</h3>
+                                    <div class="excerpt">
+                                        <div class="excerpt-text">
+                                            <small>{{ .Date.Format "January 2, 2006" }}</small>
+                                            <p>{{ .Plain | plainify | truncate 100 }}</p>
+                                        </div>
+                                        <img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
+                                    </div>
+                                </a>
+                            {{ end }}
+                        {{ end }}
+                    </div>
+
+                    <div class="dernier-livre">
+                        {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "livres") }}
+                            {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+                            {{- if $image -}}
+                                {{- $optimizedImage := $image.Fit "150x150  webp q95 Center" -}}
+                                <a href="{{ .RelPermalink }}">
+                                    <h2>Lecture du moment :</h2>
+                                    <h3>{{ .Title }}</h3>
+                                    <div class="excerpt">
+                                        <div class="excerpt-text">
+                                            <small>{{ .Date.Format "January 2, 2006" }}</small>
+                                            <p>{{ .Plain | plainify | truncate 100 }}</p>
+                                        </div>
+                                        <img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
+                                    </div>
+                                </a>
+                            {{ end }}
+                        {{ end }}
                     </div>
                 </div>
             </div>