diff --git a/themes/default/assets/css/hero.css b/themes/default/assets/css/hero.css index 92746900..d39464a3 100644 --- a/themes/default/assets/css/hero.css +++ b/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; - align-items: center; + flex-direction: column; + 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 { + 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 { - flex-direction: column; + margin: 1.5rem auto; + gap: 1rem; text-align: center; } -} \ No newline at end of file + + #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; + } +} diff --git a/themes/default/assets/css/list.css b/themes/default/assets/css/list.css index 085090d6..36c86aa2 100644 --- a/themes/default/assets/css/list.css +++ b/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; + } +} diff --git a/themes/default/assets/css/typography.css b/themes/default/assets/css/typography.css index b5f42867..ea284491 100644 --- a/themes/default/assets/css/typography.css +++ b/themes/default/assets/css/typography.css @@ -4,6 +4,7 @@ article { } } + .article-content, article aside { a { diff --git a/themes/default/layouts/_default/home.html b/themes/default/layouts/_default/home.html index 59cd9382..5433f6e7 100644 --- a/themes/default/layouts/_default/home.html +++ b/themes/default/layouts/_default/home.html @@ -1,27 +1,68 @@ {{- define "main" }} -
-
- {{ $logo := resources.GetMatch "logo-large.png" -}} - {{- with $logo.Resize "x256" -}} - - {{- end }} +{{- $site := .Site -}} +{{- $logoPath := $site.Params.logo | default "logo-large.png" -}} +{{- $logo := resources.GetMatch $logoPath -}} +{{- $siteDescription := $site.Params.description -}} +{{- $allArticles := $site.RegularPages.ByDate.Reverse -}} +{{- $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 -}} -
- {{ .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) -}} + + {{- $featured := index $allArticles 0 -}} + {{- $used := slice $featured.File.Path -}} + +
+

En vedette

+ {{- partial "featured-card.html" (dict "Page" $featured) -}}
+ {{- $recent := first 4 (after 1 $allArticles) -}} + {{- range $recent }} + {{- $used = $used | append .File.Path -}} + {{- end -}} +
- {{- $pages := site.RegularPages -}} - {{- $paginator := .Paginate $pages.ByDate.Reverse 12 -}} - {{- $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 -}} +

Dernières publications

+ {{- partial "articles-list.html" (dict "Pages" $recent "Context" .) -}}
+ + {{- 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 -}} +
+ {{- $trail := slice -}} + {{- range $ancestor := $section.Ancestors.Reverse -}} + {{- if ne $ancestor.RelPermalink "/" -}} + {{- $trail = $trail | append $ancestor -}} + {{- end -}} + {{- end -}} + +

{{ with $section.LinkTitle }}{{ . }}{{ else }}{{ $section.Title }}{{ end }}

+ {{- partial "articles-list.html" (dict "Pages" $sectionPages "Context" .) -}} +
+ {{- end -}}
-{{- end }} \ No newline at end of file +{{- end }} diff --git a/themes/default/layouts/partials/featured-card.html b/themes/default/layouts/partials/featured-card.html new file mode 100644 index 00000000..b26f52ee --- /dev/null +++ b/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 -}} + + diff --git a/themes/default/layouts/partials/home-hero.html b/themes/default/layouts/partials/home-hero.html new file mode 100644 index 00000000..406bb8e4 --- /dev/null +++ b/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 -}} +
+
+ {{- with $logo -}} +
+ Logo de {{ $title }} +
+ {{- end -}} +
+

{{ $title }}

+ {{- with $description }} +
{{ . }}
+ {{- end }} +
+
+ + {{- with $content }} +
+ {{ . }} +
+ {{- end }} + +
    +
  • + Articles publiés + {{ $total }} +
    • +
  • + Thématiques + {{ $sectionsCount }} +
    • +
  • + Dernière mise à jour + +
    • +
+ +
+ + {{- with $menu }} + + {{- end }} + +
+