MAJ todo

content/_index.md

@@ -4,4 +4,18 @@ date: 2018-02-09T10:17:00
 draft: false
 ---
 
-Minions ipsum gelatooo uuuhhh para tú bappleees para tú tank yuuu! Gelatooo po kass. Bappleees poopayee tulaliloo pepete belloo! Wiiiii. Baboiii hana dul sae bappleees pepete hana dul sae po kass po kass baboiii. Belloo! hahaha baboiii poopayee hahaha belloo! La bodaaa bee do bee do bee do chasy. Pepete poopayee tank yuuu! Butt la bodaaa wiiiii aaaaaah ti aamoo! Poulet tikka masala. Tatata bala tu daa ti aamoo! Poulet tikka masala poopayee wiiiii bappleees hana dul sae ti aamoo! Jeje belloo!
+## Salut !
+
+Je suis Achille Toupin, un 
+
+Ce site personnel regroupe ma présence sur internet
+
+Je collectionne les machines à écrire (entre autres)
+
+J'aime bien bricoler, les motos, le bois
+
+J'aime bien coder [git]()
+
+J'écris des [articles de blog](blog) quand ça me chante
+
+

layouts/home.html

@@ -45,29 +45,68 @@
         }
 
         .main-content {
+            display: flex;
+            flex-direction: column;
             flex-grow: 1; /* Take up the remaining space between side-screens */
-        max-width: 750px; /* Optional: Limit max width */
+            max-width: 900px; /* Optional: Limit max width */
             margin: 0 25px;
         }
 
+        .header {
+            display: flex;
+            justify-content: space-between; /* Space between the title and navigation */
+            align-items: center; /* Align items vertically in the center */
+            padding: 10px 20px; /* Optional: Add some padding */
+        }
+        
         .site-title {
-        width: 100%;
+            flex-grow: 1;
-        text-align: center;
+            margin: 0; /* Remove default margin */
+            font-size: 3rem; /* Adjust font size as needed */
+
         }
 
-      .icon-row {
+        .navigation {
+            flex-grow: 3;
             display: flex;
-        flex-direction: row;
+
-        justify-content: center;
-        width: 100%;
-        gap: 2rem;
         }
 
-      .icon-item {
+        .navigation ul {
             display: flex;
-        flex-direction: column;
+            flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
-        align-items: center;
+            list-style: none;
-        gap: 1rem;
+            margin: 0; /* Remove default margin */
+            padding: 0; /* Remove default padding */
+            justify-content: flex-end; /* Align items to the right */
+        }
+
+        .navigation ul li {
+            margin: 0 10px 0 10px;
+            
+        }
+
+        .navigation ul li a:hover {
+            text-decoration: underline; /* Add underline on hover */
+            
+        }
+
+        .center-content {
+            display: flex;
+            flex-grow: 1; /* Allow it to grow */
+            gap: 20px; /* Optional: Add spacing between child elements */
+        }
+
+        .presentation, .side-content-column {
+            flex: 1; /* Make both elements take up equal width */
+        }
+
+        .presentation {
+            max-width: 100%; /* Ensure it doesn't exceed its container */
+        }
+
+        .side-content-column {
+            max-width: 100%; /* Ensure it doesn't exceed its container */
         }
 
         @media (max-width: 1380px) {
@@ -79,6 +118,18 @@
             justify-content: center; /* Center main-content when side-screens are hidden */
             }
         }
+          /* Media query for when main-content is less than 700px wide */
+        @media (max-width: 700px) {
+            .center-content, .header{
+                flex-direction: column; /* Stack elements vertically */
+            }
+
+            .presentation, .side-content-column, .site-title, .navigation{
+                flex: none; /* Reset flex property */
+                width: 100%; /* Make them take full width */
+            }
+        }
+
     </style>
 </head>
 
@@ -137,12 +188,33 @@
             {{ partial "posts-defile.html" (dict "context" . "direction" "up") }}
         </div>
         <div class="main-content">
-            <h1 class="site-title">{{ .Title }}</h1>
+            
+            <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="liens">Marque-pages</a></li>
+                        <p> · </p>
+                        <li>🌐 <a href="blogroll">Blogroll</a></li>
+                        <p> · </p>
+                        <li>❓ <a href="blogroll">A propos</a></li>
+                        <p> · </p>
+                        <li>✉️ <a href="contact">Contact</a></li>
+                        
+                    </ul>
 
                     {{- 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="18" viewBox="0 0 24 24"
+                        <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                             stroke-linejoin="round">
                             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                         </svg>
@@ -161,27 +233,41 @@
                         </svg>
                     </button>
                     {{- end }}
+                </nav>
+
+
+                
 
 
-            {{ .Content }}
-            <div class="icon-row">
-                <a class="icon-item" href="/blog">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Blog</span>
-                </a>
-                <a class="icon-item" href="/collection">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Collection</span>
-                </a>
-                <a class="icon-item" href="/recettes">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Recettes</span>
-                </a>
-                <a class="icon-item" href="/livres">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Livres</span>
-                </a>
             </div>
+
+
+            
+            <div class="center-content">
+
+                <div class="presentation">
+                    {{ .Content }}
+                </div>
+
+                <div class="side-content-column">
+
+                    <div class="dernier-article">
+                        <h2>Mon dernier article</h2>
+                        {{ partial "posts-recents-carte.html" . }}
+                    </div>
+                    
+                    <div class="dernier-article">
+                        <h2>Mon dernier article</h2>
+                        {{ partial "posts-recents-carte.html" . }}
+                    </div>
+                </div>
+
+            </div>
+
+            {{ partial "buttons.html"}}
+
+            {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
+
         </div>
         <div class="side-screen">
             {{ partial "posts-defile.html" (dict "context" . "direction" "down") }}

layouts/partials/buttons.html

@@ -0,0 +1,34 @@
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-width: 100vw; /* Make the container as wide as the viewport */
+        gap: 3px;
+        margin: 0; /* Remove any default margin */
+        padding: 0; /* Remove any default padding */
+    }
+    .button {
+        display: inline-block; 
+        border: none;
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+        background: none;
+        image-rendering: auto;
+        image-rendering: crisp-edges;
+        image-rendering: pixelated;
+        image-rendering: -webkit-optimize-contrast;
+    }
+</style>
+
+<div class="buttons">
+{{ $buttons := resources.Match "buttons/*" }}
+{{ if $buttons }}
+    {{ range $index, $button := $buttons }}
+        <img class="button" src="{{ $button.RelPermalink }}" alt="Button {{ $button.Name | path.Base }}" />
+    {{ end }}
+{{ else }}
+    <p>No buttons available.</p>
+{{ end }}
+</div>

layouts/partials/donnees-chargement.html

@@ -3,7 +3,7 @@ Code volé chez lucien
 https://git.shenanigans.cc/globuzma/blog/commit/695e63b275ca03ec53a099d68f274c9466d0539f 
 -->
 
-<p class="small-text" id="data-used">0kB chargés</p>
+<span class="small-text" id="data-used">0kB chargés</span>
 <script>
   window.addEventListener('load', function () {
     let totalTransferSize = 0;

layouts/partials/posts-recents-carte.html

@@ -0,0 +1,19 @@
+{{ $n := 1 }} <!-- Change this value to set the number of posts to display -->
+{{ range first $n (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+
+  {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+  {{- if $image -}}
+
+    {{- $optimizedImage := $image.Fill "100x100 webp q95 Center" -}}
+    <a href="{{ .RelPermalink }}" >
+        <h3>{{ .Title }}</h3>
+        <img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
+        <small>{{ .Date.Format "January 2, 2006" }}</small>
+        <p>{{ .Summary | truncate 100 }}</p>
+        
+    </a>
+  {{ end }}
+  
+
+{{ end }}
+

readMe.md

@@ -38,5 +38,6 @@
     - [x] Faire fonctionner l'auth avec forgejo
     - [ ] Configurer decap CMS pour qu'il affiche les posts, et fonctionne avec les page bundles
     - [ ] Configurer les galleries dans Decap CMS
-
+- [ ] Ajouter des catégories aux articles et une liste de catégories sur page accueil
+- [ ] Boutons grossissent quand la souris est dessus, comme https://88x31.kate.pet/