Better single post display

assets/css/app.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "header.css";
+@import "wordpress.css";
 
 /* Modern Design System */
 :root {

layouts/_default/single.html

@@ -11,20 +11,14 @@
                 {{ end }}
             </div>
             <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
-            <p class="text-xl text-gray-700 mb-8">{{ .Summary }}</p>
             <div class="flex items-center justify-center space-x-4 text-gray-600">
                 <div class="flex items-center">
-                    {{ if .Params.author_image }}
+                    <a href="/author/{{ .Params.author | urlize }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-600 hover:decoration-blue-800 transition-colors">{{ .Params.author | default "Auteur" }}</a>
-                        <img src="{{ .Params.author_image }}" alt="Author" class="rounded-full mr-2 w-10 h-10">
-                    {{ else }}
-                        <img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2 w-10 h-10">
-                    {{ end }}
-                    <span>{{ .Params.author | default "Author Name" }}</span>
                 </div>
                 <span>•</span>
-                <span>{{ .Date.Format "October 16, 2024" }}</span>
+                <span>{{ .Date.Format "2 janvier 2006" }}</span>
                 <span>•</span>
-                <span>{{ .ReadingTime }} min read</span>
+                <span>{{ .ReadingTime }} min de lecture</span>
             </div>
         </div>
     </div>
@@ -32,47 +26,31 @@
 
 <!-- Article Content -->
 <article class="py-12 md:py-16">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="max-w-3xl mx-auto prose">
-            {{ .Content }}
-        </div>
-    </div>
-</article>
-
-<!-- Tags Section -->
-<div class="py-8 border-t border-gray-200">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="max-w-3xl mx-auto">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
+            {{ if .Params.featured_image }}
-            <div class="flex flex-wrap gap-3">
+                <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-auto rounded-lg mb-8">
-                {{ with .Params.tags }}
+            {{ end }}
-                    {{ range . }}
+            <div class="prose">
-                        <a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">{{ . }}</a>
+                {{ .Content }}
-                    {{ end }}
-                {{ end }}
             </div>
         </div>
     </div>
-</div>
+</article>
 
 <!-- Author Bio -->
 <div class="py-12 bg-gray-50">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="max-w-3xl mx-auto">
             <div class="flex items-start space-x-6">
-                {{ if .Params.author_image }}
-                    <img src="{{ .Params.author_image }}" alt="Author" class="rounded-full w-20 h-20">
-                {{ else }}
-                    <img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
-                {{ end }}
                 <div>
-                    <h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Author Name" }}</h3>
+                    <h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Auteur" }}</h3>
-                    <p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p>
+                    <p class="text-blue-600 font-medium mb-4">Rédacteur technologique & chercheur sur le futur du travail</p>
-                    <p class="text-gray-700">{{ .Params.author_bio | default "Author bio goes here." }}</p>
+                    <p class="text-gray-700">{{ .Params.author_bio | default "Biographie de l'auteur ici." }}</p>
                     <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a>
+                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-medium"></i></a>
                     </div>
                 </div>
             </div>
@@ -83,7 +61,7 @@
 <!-- Related Articles -->
 <div class="py-12">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2>
+        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Articles connexes</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             {{ range first 3 (where .Site.RegularPages "Type" "post") }}
             <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
@@ -101,13 +79,13 @@
                         {{ end }}
                     </span>
                     <h3 class="text-xl font-semibold mt-2 mb-3">
-                        <a href="{{ .Permalink }}">{{ .Title }}</a>
+                        <a href="{{ .Permalink }}" class="text-gray-900 hover:text-blue-600 transition-colors">{{ .Title }}</a>
                     </h3>
                     <p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
                     <div class="flex items-center mt-4 text-sm text-gray-500">
-                        <span>{{ .Date.Format "Jan 2, 2006" }}</span>
+                        <span>{{ .Date.Format "2 janvier 2006" }}</span>
                         <span class="mx-2">•</span>
-                        <span>{{ .ReadingTime }} min read</span>
+                        <span>{{ .ReadingTime }} min de lecture</span>
                     </div>
                 </div>
             </div>
@@ -120,11 +98,11 @@
 <div class="py-12 bg-blue-50">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="max-w-3xl mx-auto text-center">
-            <h2 class="text-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2>
+            <h2 class="text-2xl font-bold text-gray-900 mb-4">Rejoignez la newsletter</h2>
-            <p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</p>
+            <p class="text-gray-700 mb-6">Restez informé des dernières actualités sur la technologie et le futur du travail.</p>
             <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
-                <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
+                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">S'abonner</button>
             </form>
         </div>
     </div>

static/builds/app.css

@@ -49,6 +49,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xl: 36rem;
+    --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --text-xs: 0.75rem;
@@ -75,6 +76,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -368,6 +370,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -428,6 +433,12 @@
   .inline-flex {
     display: inline-flex;
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -458,6 +469,15 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -470,6 +490,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -485,6 +508,9 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .flex-1 {
+    flex: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
@@ -505,6 +531,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .list-inside {
     list-style-position: inside;
   }
@@ -538,6 +567,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -616,6 +648,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -852,6 +887,12 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .decoration-blue-600 {
+    text-decoration-color: var(--color-blue-600);
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -898,6 +939,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -906,6 +952,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .ease-in {
     --tw-ease: var(--ease-in);
     transition-timing-function: var(--ease-in);
@@ -995,6 +1045,20 @@
       }
     }
   }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .hover\:decoration-blue-800 {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-color: var(--color-blue-800);
+      }
+    }
+  }
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
@@ -1315,6 +1379,235 @@
   border-radius: 4px;
   cursor: pointer;
 }
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  color: var(--gray-900);
+}
+.prose h1 {
+  font-size: 2.5em;
+}
+.prose h2 {
+  font-size: 2em;
+}
+.prose h3 {
+  font-size: 1.75em;
+}
+.prose h4 {
+  font-size: 1.5em;
+}
+.prose h5 {
+  font-size: 1.25em;
+}
+.prose h6 {
+  font-size: 1em;
+  color: var(--gray-600);
+}
+.prose p {
+  margin-bottom: 1.5em;
+  line-height: 1.75;
+  color: var(--gray-700);
+}
+.prose ul,
+.prose ol {
+  margin-bottom: 1.5em;
+  padding-left: 2em;
+}
+.prose ul {
+  list-style-type: disc;
+}
+.prose ol {
+  list-style-type: decimal;
+}
+.prose li {
+  margin-bottom: 0.5em;
+  line-height: 1.75;
+  color: var(--gray-700);
+}
+.prose ul ul,
+.prose ol ol,
+.prose ul ol,
+.prose ol ul {
+  margin-bottom: 0;
+  margin-top: 0.5em;
+}
+.prose a {
+  color: var(--primary-blue);
+  text-decoration: underline;
+  text-decoration-color: var(--primary-blue);
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+.prose a:hover {
+  color: var(--primary-blue-dark);
+  text-decoration-color: var(--primary-blue-dark);
+}
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+.prose figure {
+  margin: 2em 0;
+  text-align: center;
+}
+.prose figcaption {
+  font-size: 0.875em;
+  color: var(--gray-600);
+  margin-top: 0.5em;
+  text-align: center;
+  font-style: italic;
+}
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5em;
+  border: 1px solid var(--gray-300);
+}
+.prose th,
+.prose td {
+  padding: 0.75em 1em;
+  text-align: left;
+  border-bottom: 1px solid var(--gray-300);
+}
+.prose th {
+  background-color: var(--gray-100);
+  font-weight: 600;
+  color: var(--gray-900);
+}
+.prose tbody tr:nth-child(even) {
+  background-color: var(--gray-50);
+}
+.prose blockquote {
+  border-left: 4px solid var(--primary-blue);
+  padding-left: 1.5rem;
+  margin: 2em 0;
+  font-style: italic;
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  padding: 1.5rem;
+  border-radius: 0.25rem;
+}
+.prose blockquote p:last-child {
+  margin-bottom: 0;
+}
+.prose code {
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+  padding: 0.25em 0.5em;
+  border-radius: 0.25rem;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.875em;
+}
+.prose pre {
+  background-color: var(--gray-900);
+  color: var(--gray-50);
+  padding: 1.5em;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin-bottom: 1.5em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.875em;
+}
+.prose pre code {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+}
+.prose iframe,
+.prose video,
+.prose audio {
+  max-width: 100%;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+.prose .wp-block-embed {
+  margin: 2em 0;
+}
+.prose hr {
+  border: none;
+  height: 1px;
+  background-color: var(--gray-300);
+  margin: 2em 0;
+}
+.prose .wp-caption {
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-200);
+  padding: 1em;
+  border-radius: 0.5rem;
+  text-align: center;
+}
+.prose .wp-caption-text {
+  font-size: 0.875em;
+  color: var(--gray-600);
+  margin-top: 0.5em;
+  font-style: italic;
+}
+.prose .alignleft {
+  float: left;
+  margin: 0.5em 1.5em 0.5em 0;
+}
+.prose .alignright {
+  float: right;
+  margin: 0.5em 0 0.5em 1.5em;
+}
+.prose .aligncenter {
+  display: block;
+  margin: 1.5em auto;
+}
+@media (max-width: 768px) {
+  .prose .alignleft,
+    .prose .alignright {
+    float: none;
+    display: block;
+    margin: 1.5em auto;
+    clear: both;
+  }
+}
+.prose .wp-block-gallery {
+  margin: 2em 0;
+}
+.prose .wp-block-gallery .blocks-gallery-item {
+  margin: 0.5em;
+}
+.prose .wp-block-quote {
+  border-left: 4px solid var(--primary-blue);
+  padding-left: 1.5rem;
+  margin: 2em 0;
+  font-style: italic;
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  padding: 1.5rem;
+  border-radius: 0.25rem;
+}
+.prose .wp-block-pullquote {
+  border-top: 4px solid var(--primary-blue);
+  border-bottom: 4px solid var(--primary-blue);
+  padding: 2em;
+  margin: 2em 0;
+  text-align: center;
+  font-style: italic;
+  color: var(--gray-700);
+}
+.prose .wp-block-code {
+  background-color: var(--gray-900);
+  color: var(--gray-50);
+  padding: 1.5em;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin-bottom: 1.5em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.875em;
+}
 :root {
   --primary-blue: #3b82f6;
   --primary-blue-dark: #2563eb;