blog/2025
1
Fork 0
Code Issues Activity

Rétablit les asides d'article du thème 2026

Browse Source
This commit is contained in:
Richard Dern
2026-03-25 21:50:37 +01:00
parent eef35b286e
commit 9595558c55
8 changed files with 269 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
themes/2026/assets/css/content.css
View File

@@ -440,8 +440,148 @@ main > article > table tbody tr:nth-child(even) td {
background: rgba(255, 186, 85, 0.06);
}
main > article > section.article-asides {
margin-top: var(--article-feature-block-margin);
margin-bottom: var(--article-feature-block-margin);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--article-feature-block-margin);
}
main > article > section.article-books + section.article-asides {
margin-top: var(--space-3);
}
main > article > section.article-asides > section.article-aside-block {
margin-top: 0;
border-top: var(--border-width-regular) solid var(--color-border-strong);
padding: var(--space-3);
background: var(--color-surface-soft);
}
main > article > section.article-asides > section.article-comments-callout {
border-top-color: var(--color-section-divider-1);
background: linear-gradient(180deg, rgba(217, 122, 63, 0.18) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-asides > section.article-taxonomies {
border-top-color: var(--color-accent-2);
background: linear-gradient(180deg, rgba(93, 134, 173, 0.18) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-asides > section.article-aside-block > h2 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
position: static;
line-height: 1.15;
font-size: clamp(1.08rem, 1.8vw, 1.45rem);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-heading);
}
main > article > section.article-asides > section.article-aside-block > h2::before {
content: none;
}
main > article > section.article-asides > section.article-aside-block > p {
margin-top: var(--space-2);
font-size: 1rem;
line-height: 1.6;
text-align: left;
}
main > article > section.article-asides > section.article-comments-callout > p:last-child {
margin-top: var(--space-3);
}
main > article > section.article-asides > section.article-comments-callout > p:last-child > a.ui-button {
width: 100%;
min-height: 2.7rem;
border-color: color-mix(in srgb, var(--color-section-divider-1) 62%, var(--color-border-strong));
background: linear-gradient(180deg, rgba(217, 122, 63, 0.38) 0%, rgba(17, 27, 42, 0.94) 100%);
}
main > article > section.article-asides > section.article-comments-callout > p:last-child > a.ui-button:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--color-section-divider-1) 78%, var(--color-border-strong));
background: linear-gradient(180deg, rgba(217, 122, 63, 0.54) 0%, rgba(17, 27, 42, 0.98) 100%);
}
main > article > section.article-asides > section.article-taxonomies > div.article-taxonomies-groups {
margin-top: var(--space-2);
display: grid;
gap: var(--space-2);
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group {
margin-top: 0;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > summary.ui-button {
width: 100%;
justify-content: space-between;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > summary.ui-button::-webkit-details-marker {
display: none;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > summary.ui-button::after {
content: "+";
font-size: 1rem;
line-height: 1;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group[open] > summary.ui-button::after {
content: "-";
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group[open] > summary.ui-button {
margin-bottom: var(--space-2);
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul {
list-style: none;
margin-top: 0;
padding-left: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li {
margin-top: 0;
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
padding: 0.2rem 0.55rem;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.04);
font-size: 0.88rem;
line-height: 1.3;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li > a {
color: var(--color-heading);
text-decoration: none;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li > a:is(:hover, :focus-visible) {
color: var(--color-link-hover);
text-decoration: underline;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li > sub {
font-size: 0.66rem;
color: var(--color-text-muted);
}
main > article > section.article-books {
margin-block: var(--article-feature-block-margin);
border-top: var(--border-width-regular) solid var(--color-accent-3);
padding: var(--space-3);
background: linear-gradient(180deg, rgba(136, 112, 63, 0.18) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-books > header {
@@ -472,53 +612,49 @@ main > article > section.article-books > header > h2::before {
main > article > section.article-books > header > p {
width: 100%;
margin-top: var(--space-2);
border-left: var(--border-width-regular) solid var(--color-accent-2);
padding: 0.62rem 0.9rem;
background: linear-gradient(90deg, rgba(93, 134, 173, 0.16) 0%, rgba(93, 134, 173, 0.04) 100%);
color: var(--color-heading);
font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.28rem);
font-weight: 400;
line-height: 1.3;
text-align: center;
font-size: 1rem;
line-height: 1.6;
text-align: left;
}
main > article > section.article-books > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem));
justify-content: center;
gap: var(--space-5);
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin-top: var(--space-3);
}
main > article > section.article-books > div > section {
margin-top: 0;
width: 100%;
max-width: 22rem;
max-width: none;
}
main > article > section.article-books > div > section > article {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-2);
align-items: start;
margin-top: 0;
border-top: var(--border-width-regular) solid var(--color-border-strong);
border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 62%, transparent);
padding-top: var(--space-3);
background: var(--color-surface-soft);
padding-inline: var(--space-3);
padding-bottom: var(--space-3);
padding-bottom: 0;
background: transparent;
padding-inline: 0;
}
main > article > section.article-books > div > section:nth-child(2n+1) > article {
border-top-color: var(--color-accent-2);
}
main > article > section.article-books > div > section:nth-child(2n) > article {
border-top-color: var(--color-accent-3);
main > article > section.article-books > div > section:first-child > article {
border-top: 0;
padding-top: 0;
}
main > article > section.article-books > div > section figure {
margin-top: 0;
width: min(13rem, 100%);
align-self: center;
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
align-self: start;
aspect-ratio: 2 / 3;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.02);
@@ -533,7 +669,8 @@ main > article > section.article-books > div > section figure img {
}
main > article > section.article-books > div > section h2 {
margin-top: var(--space-3);
grid-column: 2;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
position: static;
@@ -542,7 +679,7 @@ main > article > section.article-books > div > section h2 {
text-transform: none;
letter-spacing: 0.01em;
color: var(--color-heading);
text-align: center;
text-align: left;
}
main > article > section.article-books > div > section h2::before {
@@ -551,19 +688,20 @@ main > article > section.article-books > div > section h2::before {
main > article > section.article-books > div > section p {
margin-top: 0;
grid-column: 2;
font-size: 1rem;
text-align: left;
}
main > article > section.article-books > div > section p:last-child {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: flex-start;
gap: var(--space-2);
margin-top: var(--space-3);
margin-top: var(--space-1);
}
main > article > section.article-books > div > section p:last-child > a.ui-button {
width: 100%;
min-height: 2.35rem;
border-color: color-mix(in srgb, var(--color-link-external) 58%, var(--color-border-strong));
background: linear-gradient(
@@ -649,11 +787,11 @@ body:has(> header.article-header) > main > article > table {
}
body:has(> header.article-header) > main > article > section.article-books {
width: min(calc(100vw - (2 * var(--space-2))), var(--max-width));
max-width: min(calc(100vw - (2 * var(--space-2))), var(--max-width));
margin-inline: 0;
margin-left: 50%;
transform: translateX(-50%);
width: min(100%, 74ch);
max-width: 74ch;
margin-inline: auto;
margin-left: auto;
transform: none;
}
main > article figure {
@@ -1080,6 +1218,10 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
padding-left: var(--space-2);
}
main > article > section.article-books > div > section > article {
grid-template-columns: minmax(7.5rem, 9rem) minmax(0, 1fr);
}
main > article figure.figure-media {
--figure-media-justify: start;
grid-template-columns: minmax(0, 1fr);
@@ -1140,6 +1282,22 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
}
}
@media (max-width: 800px) {
main > article > section.article-books > div > section > article {
grid-template-columns: minmax(0, 1fr);
}
main > article > section.article-books > div > section figure {
grid-row: auto;
width: min(11rem, 100%);
justify-self: center;
}
main > article > section.article-books > div > section :is(h2, p) {
grid-column: 1;
}
}
main section > ul,
main section > ol {
padding-left: 1.25rem;

12
themes/2026/layouts/_partials/article-asides.html Normal file
View File

@@ -0,0 +1,12 @@
{{- $commentsMarkup := strings.TrimSpace (partial "asides/comments.html" .) -}}
{{- $keywordsMarkup := strings.TrimSpace (partial "asides/keywords.html" .) -}}
{{- if or (ne $commentsMarkup "") (ne $keywordsMarkup "") -}}
<section class="article-asides">
{{- with $commentsMarkup -}}
{{- . | safeHTML -}}
{{- end -}}
{{- with $keywordsMarkup -}}
{{- . | safeHTML -}}
{{- end -}}
</section>
{{- end -}}

12
themes/2026/layouts/_partials/article-books.html Normal file
View File

@@ -0,0 +1,12 @@
{{- $booksMarkup := strings.TrimSpace (partial "asides/oeuvres.html" .) -}}
{{- if ne $booksMarkup "" -}}
<section class="article-books">
<header>
<h2>Mes livres</h2>
<p>Si vous aimez ce blog, vous apprécierez mes livres. En les achetant, vous m'aidez à continuer de le faire vivre.</p>
</header>
<div>
{{- $booksMarkup | safeHTML -}}
</div>
</section>
{{- end -}}

21
themes/2026/layouts/_partials/asides/comments.html
View File

@@ -1,7 +1,20 @@
{{- $url := .Params.comments_url -}}
{{- if $url -}}
<section>
{{- $url := "" -}}
{{- with .Params.comments_url -}}
{{- $url = strings.TrimSpace . -}}
{{- end -}}
{{- if ne $url "" -}}
{{- $isExternal := strings.HasPrefix $url "http" -}}
<section class="article-aside-block article-comments-callout">
<h2>Échanger autour de ce texte</h2>
<p>Si vous souhaitez réagir publiquement, <a href="{{ $url }}" target="_blank" rel="noopener">un fil dédié vous attend ici</a>.</p>
<p>Si vous souhaitez réagir publiquement, un fil dédié vous attend.</p>
<p>
<a
class="ui-button{{ if $isExternal }} link-external{{ end }}"
href="{{ $url }}"
{{- if $isExternal }} target="_blank" rel="noreferrer noopener"{{ end -}}
>
Ouvrir le fil de discussion
</a>
</p>
</section>
{{- end -}}

28
themes/2026/layouts/_partials/asides/keywords.html
View File

@@ -1,7 +1,12 @@
{{- $ctx := . -}}
{{- $scratch := newScratch -}}
{{- $scratch.Set "blocks" 0 -}}
{{- $taxonomyNames := slice -}}
{{- range $taxonomy, $_ := $ctx.Site.Taxonomies -}}
{{- $taxonomyNames = $taxonomyNames | append $taxonomy -}}
{{- end -}}
{{- range sort $taxonomyNames -}}
{{- $taxonomy := . -}}
{{- with $ctx.Page.GetTerms $taxonomy -}}
{{- $scratch.Add "blocks" 1 -}}
{{- end -}}
@@ -13,26 +18,27 @@
{{- end -}}
{{- if gt ($scratch.Get "blocks") 0 -}}
<section>
<details>
<summary>Taxonomies</summary>
{{- range $taxonomy, $_ := $ctx.Site.Taxonomies -}}
<section class="article-aside-block article-taxonomies">
<h2>Taxonomies</h2>
<div class="article-taxonomies-groups">
{{- range sort $taxonomyNames -}}
{{- $taxonomy := . -}}
{{- with $ctx.Page.GetTerms $taxonomy -}}
<section>
{{- $taxonomyPage := $ctx.Site.GetPage "taxonomy" $taxonomy -}}
<h2>{{ with $taxonomyPage }}{{ .Title }}{{ else }}{{ humanize $taxonomy }}{{ end }}</h2>
<details class="article-taxonomy-group">
<summary class="ui-button">{{ with $taxonomyPage }}{{ .Title }}{{ else }}{{ humanize $taxonomy }}{{ end }}</summary>
{{- partial "keywords.html" . -}}
</section>
</details>
{{- end -}}
{{- end -}}
{{- with $ctx.Params.keywords -}}
{{- if gt (len .) 0 -}}
<section>
<h2>Mots-clés libres</h2>
<details class="article-taxonomy-group">
<summary class="ui-button">Mots-clés libres</summary>
{{- partial "keywords.html" . -}}
</section>
</details>
{{- end -}}
{{- end -}}
</details>
</div>
</section>
{{- end -}}

14
themes/2026/layouts/contact/single.html
View File

@@ -3,19 +3,7 @@
<main>
<article>
{{ .Content }}
{{- with .Params.oeuvres -}}
<section class="article-books">
<header>
<h2>Mes livres</h2>
<p>Si vous aimez ce blog, vous apprécierez mes livres. En les achetant, vous m'aidez à continuer de le faire vivre.</p>
</header>
<div>
{{ partial "asides/oeuvres.html" $ }}
</div>
</section>
{{- end -}}
{{ partial "article-books.html" . }}
{{ partial "article-footer.html" . }}
</article>
{{ partial "asides/toc.html" . }}

2
themes/2026/layouts/page.html
View File

@@ -3,6 +3,8 @@
<main>
<article>
{{ .Content }}
{{ partial "article-books.html" . }}
{{ partial "article-asides.html" . }}
{{ partial "article-footer.html" . }}
</article>
{{ partial "asides/complementary-images.html" . }}