Refond la page d’accueil

themes/default/assets/css/hero.css

@@ -1,13 +1,151 @@
 #hero {
-    padding: 1rem;
+    width: 90%;
+    max-width: 1100px;
+    margin: 2rem auto 1.25rem;
     display: flex;
-    gap: 1rem;
+    flex-direction: column;
-    align-items: center;
+    gap: 1.35rem;
+    padding: 1.25rem 1.4rem 1.3rem;
+    border-radius: 12px;
+    position: relative;
+    background: linear-gradient(140deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.94));
+    border: 1px solid rgba(255, 255, 255, 0.04);
 }
 
-@media (max-width: 768px) {
+#hero header {
-    #hero {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+#hero header figure {
+    flex-shrink: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+#hero header figure img {
+    width: 100%;
+    max-width: 160px;
+    height: auto;
+    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35));
+}
+
+#hero header > div {
+    display: flex;
     flex-direction: column;
+    gap: 0.35rem;
+}
+
+#hero header h1 {
+    margin: 0;
+    font-size: 2.6rem;
+    letter-spacing: 0.02em;
+}
+
+#hero header .site-description {
+    margin: 0;
+    font-size: 1.1rem;
+    color: var(--text-softest);
+    letter-spacing: 0.04em;
+}
+#hero > ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+#hero > ul li {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 1.1rem 1.2rem;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(20, 20, 20, 0.2));
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+#hero > ul li strong {
+    margin: 0;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted2);
+}
+
+#hero > ul li span {
+    color: var(--text-white);
+}
+
+#hero > ul li span,
+#hero > ul li time {
+    font-size: 1.65rem;
+    font-weight: 600;
+    color: var(--text-white);
+}
+
+#hero > nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+#hero > nav a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.45rem 0.9rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-softer);
+    text-decoration: none;
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    flex: 1 1 170px;
+    text-align: center;
+    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
+}
+
+#hero > nav a:hover,
+#hero > nav a:focus {
+    color: var(--text-white);
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+@media (max-width: 900px) {
+    #hero {
+        margin: 1.5rem auto;
+        gap: 1rem;
         text-align: center;
     }
+
+    #hero header {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    #hero header figure img {
+        max-width: 140px;
+    }
+
+    #hero > ul {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+    }
+
+    #hero > nav a {
+        flex: 1 1 140px;
+    }
 }

themes/default/assets/css/list.css

@@ -105,3 +105,123 @@
     margin-top: .5rem;
     /* Force ces éléments à coller en bas */
 }
+
+.featured-section {
+    padding: 1rem;
+}
+
+.featured-card {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1.5rem;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(12, 12, 12, 0.92));
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
+    align-items: stretch;
+}
+
+.featured-card__image {
+    display: block;
+    flex: 0 0 42%;
+    border-radius: 10px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #1f1f1f, #101010);
+}
+
+.featured-card__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.featured-card__image--placeholder {
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+    background: linear-gradient(135deg, #2a2a2a, #161616);
+}
+
+.featured-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    color: var(--text-softer);
+}
+
+.featured-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.featured-card__meta time {
+    font-size: 0.85rem;
+    color: var(--text-soft);
+}
+
+.featured-card__title {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.2;
+}
+
+.featured-card__title a {
+    color: var(--text-white);
+    text-decoration: none;
+}
+
+.featured-card__title a:hover,
+.featured-card__title a:focus {
+    color: var(--accent-blue);
+}
+
+.featured-card__summary {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--text-soft);
+}
+
+.featured-card__cta {
+    align-self: flex-start;
+    padding: 0.45rem 1rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    text-decoration: none;
+    color: var(--text-softer);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
+}
+
+.featured-card__cta:hover,
+.featured-card__cta:focus {
+    color: var(--text-white);
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.featured-card__section {
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 0.08em;
+    color: var(--text-muted2);
+}
+
+@media (max-width: 900px) {
+    .featured-card {
+        flex-direction: column;
+    }
+
+    .featured-card__image {
+        flex: none;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+    }
+}

themes/default/assets/css/typography.css

@@ -4,6 +4,7 @@ article {
     }
 }
 
+
 .article-content,
 article aside {
     a {

themes/default/layouts/_default/home.html

@@ -1,27 +1,68 @@
 {{- define "main" }}
-<main>
+{{- $site := .Site -}}
-  <section id="hero">
+{{- $logoPath := $site.Params.logo | default "logo-large.png" -}}
-    {{ $logo := resources.GetMatch "logo-large.png" -}}
+{{- $logo := resources.GetMatch $logoPath -}}
-    {{- with $logo.Resize "x256" -}}
+{{- $siteDescription := $site.Params.description -}}
-    <img src="{{ .RelPermalink }}" alt="Logo" class="site-logo" />
+{{- $allArticles := $site.RegularPages.ByDate.Reverse -}}
-    {{- end }}
+{{- $totalArticles := len $site.RegularPages -}}
+{{- $allSections := where $site.Pages "Kind" "section" -}}
+{{- $allSections = where $allSections "RelPermalink" "!=" "/" -}}
+{{- $leafSections := slice -}}
+{{- range $allSections -}}
+  {{- if eq (len .Sections) 0 -}}
+    {{- $leafSections = $leafSections | append . -}}
+  {{- end -}}
+{{- end -}}
+{{- $sectionsCount := len $leafSections -}}
+{{- $lastUpdated := $site.Lastmod -}}
 
-    <div class="article-content">
+<main>
-      {{ .Content -}}
+  {{- partial "home-hero.html" (dict "Logo" $logo "Title" $site.Title "Description" $siteDescription "Content" .Content "TotalArticles" $totalArticles "SectionsCount" $sectionsCount "LastUpdated" $lastUpdated "HeroMenu" $site.Menus.hero) -}}
-    </div>
+
+  {{- $featured := index $allArticles 0 -}}
+  {{- $used := slice $featured.File.Path -}}
+
+  <section class="articles-list featured-section">
+    <h2>En vedette</h2>
+    {{- partial "featured-card.html" (dict "Page" $featured) -}}
   </section>
 
+  {{- $recent := first 4 (after 1 $allArticles) -}}
+  {{- range $recent }}
+    {{- $used = $used | append .File.Path -}}
+  {{- end -}}
+
   <section class="articles-list">
-    {{- $pages := site.RegularPages -}}
+    <h2>Dernières publications</h2>
-    {{- $paginator := .Paginate $pages.ByDate.Reverse 12 -}}
+    {{- partial "articles-list.html" (dict "Pages" $recent "Context" .) -}}
-    {{- $context := . -}}
-    {{- $context.Scratch.Set "paginationPosition" "down" -}}
-    {{- $context.Scratch.Set "paginator" $paginator -}}
-    {{- partial "pagination.html" $context -}}
-    {{- partial "articles-list.html" (dict "Pages" $paginator.Pages "Context" $context) -}}
-    {{- $context.Scratch.Set "paginationPosition" "up" -}}
-    {{- $context.Scratch.Set "paginator" $paginator -}}
-    {{- partial "pagination.html" $context -}}
   </section>
+
+  {{- range sort $leafSections "Lastmod" "desc" -}}
+    {{- $section := . -}}
+    {{- $sectionPages := slice -}}
+    {{- range $section.RegularPagesRecursive.ByDate.Reverse -}}
+      {{- if not (in $used .File.Path) -}}
+        {{- $sectionPages = $sectionPages | append . -}}
+      {{- end -}}
+    {{- end -}}
+    {{- $sectionPages = first 4 $sectionPages -}}
+    <section class="articles-list">
+      {{- $trail := slice -}}
+      {{- range $ancestor := $section.Ancestors.Reverse -}}
+        {{- if ne $ancestor.RelPermalink "/" -}}
+          {{- $trail = $trail | append $ancestor -}}
+        {{- end -}}
+      {{- end -}}
+      <nav aria-label="Fil d’Ariane">
+        <ol>
+          {{- range $item := $trail -}}
+          <li><a href="{{ $item.RelPermalink }}">{{ with $item.LinkTitle }}{{ . }}{{ else }}{{ $item.Title }}{{ end }}</a></li>
+          {{- end -}}
+        </ol>
+      </nav>
+      <h2><a href="{{ $section.RelPermalink }}">{{ with $section.LinkTitle }}{{ . }}{{ else }}{{ $section.Title }}{{ end }}</a></h2>
+      {{- partial "articles-list.html" (dict "Pages" $sectionPages "Context" .) -}}
+    </section>
+  {{- end -}}
 </main>
 {{- end }}

themes/default/layouts/partials/featured-card.html

@@ -0,0 +1,41 @@
+{{- $page := .Page -}}
+{{- $coverPath := $page.Params.cover -}}
+{{- $img := false -}}
+{{- if $coverPath -}}
+  {{- if strings.HasSuffix $coverPath ".yaml" -}}
+    {{- $coverAbsPath := printf "%s%s" $page.File.Dir $coverPath -}}
+    {{- $coverRaw := readFile $coverAbsPath -}}
+    {{- $coverData := $coverRaw | transform.Unmarshal -}}
+    {{- with $coverData.file -}}
+      {{- $img = $page.Resources.GetMatch . -}}
+    {{- end -}}
+  {{- else -}}
+    {{- $img = $page.Resources.GetMatch $coverPath -}}
+  {{- end -}}
+{{- end -}}
+
+<article class="featured-card">
+  <a class="featured-card__image" href="{{ $page.RelPermalink }}">
+    {{- if $img -}}
+      {{- $resized := $img.Resize "640x" -}}
+      <img src="{{ $resized.RelPermalink }}" alt="{{ default $page.Title $page.Params.cover_alt }}" loading="lazy" />
+    {{- else -}}
+      <div class="featured-card__image--placeholder" aria-hidden="true"></div>
+    {{- end -}}
+  </a>
+  <div class="featured-card__body">
+    <div class="featured-card__meta">
+      {{- with $page.Parent }}
+      <span class="featured-card__section">{{ .LinkTitle }}</span>
+      {{- end }}
+      {{- with $page.Date }}
+      <time datetime="{{ . | time.Format "2006-01-02" }}">{{ . | time.Format ":date_long" }}</time>
+      {{- end }}
+    </div>
+    <h3 class="featured-card__title"><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h3>
+    {{- with $page.Summary }}
+    <p class="featured-card__summary">{{ . | plainify }}</p>
+    {{- end }}
+    <a class="featured-card__cta" href="{{ $page.RelPermalink }}">Lire l’article</a>
+  </div>
+</article>

themes/default/layouts/partials/home-hero.html

@@ -0,0 +1,56 @@
+{{- $logo := .Logo -}}
+{{- $title := .Title -}}
+{{- $description := .Description -}}
+{{- $content := .Content -}}
+{{- $total := .TotalArticles -}}
+{{- $sectionsCount := .SectionsCount -}}
+{{- $lastUpdated := .LastUpdated -}}
+{{- $menu := .HeroMenu -}}
+<section id="hero">
+  <header>
+    {{- with $logo -}}
+    <figure>
+      <img src="{{ .RelPermalink }}" alt="Logo de {{ $title }}" />
+    </figure>
+    {{- end -}}
+    <div>
+      <h1>{{ $title }}</h1>
+      {{- with $description }}
+      <div class="site-description">{{ . }}</div>
+      {{- end }}
+    </div>
+  </header>
+
+  {{- with $content }}
+  <div>
+    {{ . }}
+  </div>
+  {{- end }}
+
+  <ul>
+    <li>
+      <strong>Articles publiés</strong>
+      <span>{{ $total }}</span>
+    </li>
+    <li>
+      <strong>Thématiques</strong>
+      <span>{{ $sectionsCount }}</span>
+    </li>
+    <li>
+      <strong>Dernière mise à jour</strong>
+      <time datetime="{{ $lastUpdated | time.Format "2006-01-02" }}">{{ $lastUpdated | time.Format "02/01/2006" }}</time>
+    </li>
+  </ul>
+
+  <hr class="hr-mirror">
+
+  {{- with $menu }}
+  <nav>
+    {{- range . }}
+    <a href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+    {{- end }}
+  </nav>
+  {{- end }}
+
+  <hr />
+</section>