blog/2025
1
Fork 0
Code Issues Activity

Bloc "Pour aller plus loin"

Browse Source
This commit is contained in:
Richard Dern
2026-04-05 00:14:23 +02:00
parent 7592c9cace
commit adcb370623
19 changed files with 204 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -303,52 +303,52 @@ main > article li + li {
margin-top: 0.35rem;
}
main > article > section.article-asides > section.article-related > nav.articles-list {
main > article > section.article-asides > section.article-page-links > nav.articles-list {
--articles-related-flow-gap: 0.78rem;
margin-top: var(--space-2);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol {
padding-left: 0;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li,
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li + li {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li,
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li + li {
margin-top: 0;
}
main > article > section.article-asides > section.article-related > nav.articles-list article {
main > article > section.article-asides > section.article-page-links > nav.articles-list article {
border-top: 0;
padding-top: 0;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header {
margin-top: 0;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > a {
display: block;
color: inherit;
text-decoration: none;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a > figure {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > a > figure {
margin: 0;
min-height: 0;
aspect-ratio: 340 / 191;
overflow: hidden;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > a > figure img {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > a > figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > p {
margin-top: var(--articles-related-flow-gap);
font-size: 0.84rem;
line-height: 1.15;
@@ -357,17 +357,17 @@ main > article > section.article-asides > section.article-related > nav.articles
color: var(--color-text-muted);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p > a {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > p > a {
color: inherit;
text-decoration: none;
font-family: var(--font-heading);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > p > a:is(:hover, :focus-visible) {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > p > a:is(:hover, :focus-visible) {
color: var(--color-link-hover);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3 {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > h3 {
margin-top: var(--articles-related-flow-gap);
margin-bottom: 0;
padding-top: 0;
@@ -380,19 +380,19 @@ main > article > section.article-asides > section.article-related > nav.articles
font-weight: 400;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3::before {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > h3::before {
display: none;
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header:has(> p) > h3 {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header:has(> p) > h3 {
margin-top: calc(var(--articles-related-flow-gap) * 0.4);
}
main > article > section.article-asides > section.article-related > nav.articles-list article > p:nth-of-type(1) {
main > article > section.article-asides > section.article-page-links > nav.articles-list article > p:nth-of-type(1) {
display: none;
}
main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child {
main > article > section.article-asides > section.article-page-links > nav.articles-list article > p:last-child {
margin-top: var(--articles-related-flow-gap);
display: flex;
flex-wrap: wrap;
@@ -405,23 +405,23 @@ main > article > section.article-asides > section.article-related > nav.articles
font-family: var(--font-heading);
}
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > a:is(:hover, :focus-visible) > h3,
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article > header > h3 > a:is(:hover, :focus-visible),
main > article > section.article-asides > section.article-related > nav.articles-list > ol > li article:has(> header > a:is(:hover, :focus-visible)) > header > h3 > a {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > a:is(:hover, :focus-visible) > h3,
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article > header > h3 > a:is(:hover, :focus-visible),
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol > li article:has(> header > a:is(:hover, :focus-visible)) > header > h3 > a {
color: var(--color-link-hover);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child > a {
main > article > section.article-asides > section.article-page-links > nav.articles-list article > p:last-child > a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
main > article > section.article-asides > section.article-related > nav.articles-list article > p:last-child > a:is(:hover, :focus-visible) {
main > article > section.article-asides > section.article-page-links > nav.articles-list article > p:last-child > a:is(:hover, :focus-visible) {
color: inherit;
filter: brightness(1.2);
}
@@ -1510,6 +1510,10 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
}
@media (max-width: 1100px) {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:has(> header.article-header) > main > article > table {
width: 100%;
max-width: 100%;
@@ -1602,6 +1606,10 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
}
@media (max-width: 800px) {
main > article > section.article-asides > section.article-page-links > nav.articles-list > ol {
grid-template-columns: minmax(0, 1fr);
}
main > article > figure.chat-message {
--chat-bubble-max-width: calc(100% - 1.4rem);
}