blog/2025
1
Fork 0
Code Issues Activity

Harmoniser les asides et le rendu des articles

Browse Source 
Closes #5

Closes #6

Closes #8

Closes #9

Closes #10
This commit is contained in:
Richard Dern
2026-04-05 15:07:52 +02:00
parent edc6f3def5
commit 67717fdb7b
17 changed files with 279 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
themes/2026/assets/css/base.css
View File

@@ -82,8 +82,6 @@ body:has(> header.article-header) > main > article > :is(p, ul, ol, blockquote,
background-position: 0 52%;
background-repeat: no-repeat;
padding: 0 0.12em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
p,
@@ -136,17 +134,11 @@ body:has(> header.article-header) > main > article > :not(footer):not(section.ar
}
body:has(> header.article-header) > main > article > :not(footer):not(section.article-asides) a.link-archive:not(.ui-button)::after {
content: "";
display: inline-block;
width: 0.9em;
height: 0.9em;
margin-left: 0.22em;
vertical-align: -0.08em;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h18v2h-1v8h2v2H2v-2h2v-8H3V9zm3 2v8h2v-8H6zm5 0v8h2v-8h-2zm5 0v8h2v-8h-2zM12 2l10 5v1H2V7l10-5zm0 2.2L7.2 6h9.6L12 4.2z' fill='%23000'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
content: " [archive]";
margin-left: 0.28em;
font-size: 0.8em;
letter-spacing: 0.03em;
text-transform: uppercase;
}
a.link-affiliated {
@@ -283,7 +275,6 @@ details > summary {
letter-spacing: 0.08em;
line-height: 1.2;
cursor: pointer;
user-select: none;
}
.ui-button:is(:hover, :focus-visible) {

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

@@ -290,6 +290,58 @@ main > article h5 + h6 {
margin-top: var(--space-5);
}
main > article details:is(.spoiler, .update) {
margin-top: var(--space-4);
padding: var(--space-3);
border-top: var(--border-width-regular) solid #d88d2f;
background: linear-gradient(180deg, rgba(137, 72, 18, 0.88) 0%, rgba(45, 24, 8, 0.96) 100%);
color: #fff2dc;
}
main > article details.update {
border-top-color: #3f8e54;
background: linear-gradient(180deg, rgba(26, 81, 44, 0.9) 0%, rgba(9, 30, 16, 0.97) 100%);
color: #e9f7ed;
}
main > article details:is(.spoiler, .update) > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: calc(var(--space-3) * -1);
padding: var(--space-3);
color: inherit;
font-family: var(--font-heading);
font-size: 0.88rem;
letter-spacing: 0.08em;
line-height: 1.25;
text-transform: uppercase;
}
main > article details:is(.spoiler, .update) > summary::after {
content: "+";
flex: none;
font-size: 1rem;
line-height: 1;
}
main > article details:is(.spoiler, .update)[open] > summary {
margin-bottom: var(--space-3);
}
main > article details:is(.spoiler, .update)[open] > summary::after {
content: "-";
}
main > article details:is(.spoiler, .update) > :not(summary) {
color: inherit;
}
main > article details:is(.spoiler, .update) > summary + * {
margin-top: 0;
}
main > article > p {
text-align: justify;
}
@@ -426,84 +478,6 @@ main > article > section.article-asides > section.article-page-links > nav.artic
filter: brightness(1.2);
}
main > article > footer.article-footer {
margin-top: var(--space-6);
border-top: 1px solid var(--color-border);
padding-top: var(--space-4);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav {
margin-top: 0;
border-left: var(--border-width-regular) solid var(--color-accent-2);
padding-left: var(--space-3);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > p.article-footer-dossier-nav-label {
margin-top: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1);
font-family: var(--font-heading);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > p.article-footer-dossier-nav-label > span {
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > p.article-footer-dossier-nav-label > strong {
font-size: 0.9rem;
color: var(--color-heading);
letter-spacing: 0.04em;
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links {
margin-top: var(--space-2);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-3);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link {
margin-top: 0;
border-top: 1px solid var(--color-border);
padding-top: var(--space-2);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link > span {
font-family: var(--font-heading);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link > a {
color: var(--color-heading);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
line-height: 1.3;
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link > a:is(:hover, :focus-visible) {
color: var(--color-link-hover);
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link-prev > span::before {
content: "← ";
}
main > article > footer.article-footer > nav.article-footer-dossier-nav > div.article-footer-dossier-nav-links > p.article-footer-dossier-nav-link-next > span::after {
content: " →";
}
main > article blockquote {
border-left: var(--border-width-regular) solid var(--color-accent-2);
padding-left: var(--space-3);
@@ -601,29 +575,45 @@ main > article > section.article-books + section.article-asides {
margin-top: var(--space-3);
}
main > article > section.article-asides > section.article-aside-block {
main > article > section.article-asides > div.article-asides-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
gap: var(--space-4);
}
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 {
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 {
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-change-history {
main > article > section.article-asides section.article-dossier-summary {
border-top-color: #8fb2d3;
background: linear-gradient(180deg, rgba(55, 86, 118, 0.28) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-asides section.article-complementary-files {
border-top-color: #c29a56;
background: linear-gradient(180deg, rgba(136, 112, 63, 0.18) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-asides section.article-change-history {
border-top-color: var(--color-section-divider-2);
background: linear-gradient(180deg, rgba(143, 106, 216, 0.2) 0%, rgba(17, 27, 42, 0.56) 100%);
}
main > article > section.article-asides > section.article-aside-block > h2 {
main > article > section.article-asides section.article-aside-block > h2 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
@@ -635,67 +625,63 @@ main > article > section.article-asides > section.article-aside-block > h2 {
color: var(--color-heading);
}
main > article > section.article-asides > section.article-aside-block > h2::before {
main > article > section.article-asides section.article-aside-block > h2::before {
content: none;
}
main > article > section.article-asides > section.article-aside-block > p {
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 {
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 {
main > article > section.article-asides section.article-comments-callout > p:last-child > a.ui-button {
width: 100%;
min-height: 2.7rem;
border-color: #a69250;
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) {
main > article > section.article-asides section.article-comments-callout > p:last-child > a.ui-button:is(:hover, :focus-visible) {
border-color: #c1a249;
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 {
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 {
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 {
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 {
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 {
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 {
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,
main > article > section.article-asides section.article-taxonomies details.article-taxonomy-group > ul,
body > main.taxonomy-page > section > ul {
list-style: none;
margin-top: 0;
@@ -709,7 +695,7 @@ body > main.taxonomy-page > section > ul {
margin-top: var(--space-2);
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li,
main > article > section.article-asides section.article-taxonomies details.article-taxonomy-group > ul > li,
body > main.taxonomy-page > section > ul > li {
margin-top: 0;
display: inline-flex;
@@ -724,26 +710,110 @@ body > main.taxonomy-page > section > ul > li {
line-height: 1.3;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li > a,
main > article > section.article-asides section.article-taxonomies details.article-taxonomy-group > ul > li > a,
body > main.taxonomy-page > section > ul > li > a {
color: var(--color-heading);
text-decoration: none;
overflow-wrap: anywhere;
}
main > article > section.article-asides > section.article-taxonomies details.article-taxonomy-group > ul > li > a:is(:hover, :focus-visible),
main > article > section.article-asides section.article-taxonomies details.article-taxonomy-group > ul > li > a:is(:hover, :focus-visible),
body > main.taxonomy-page > section > 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,
main > article > section.article-asides section.article-taxonomies details.article-taxonomy-group > ul > li > sub,
body > main.taxonomy-page > section > ul > li > sub {
font-size: 0.66rem;
color: var(--color-text-muted);
}
main > article > section.article-asides > section.article-change-history > ol {
main > article > section.article-asides section.article-complementary-files > ul {
list-style: none;
margin-top: var(--space-3);
padding-left: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: var(--space-3);
}
main > article > section.article-asides section.article-complementary-files > ul > li {
margin-top: 0;
}
main > article > section.article-asides section.article-complementary-files > ul > li > a {
display: block;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.03);
}
main > article > section.article-asides section.article-complementary-files > ul > li > a:is(:hover, :focus-visible) {
border-color: var(--color-accent-3);
}
main > article > section.article-asides section.article-complementary-files > ul > li > a > img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] {
margin-top: 0;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > p {
margin-top: 0;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > p > strong {
font-family: var(--font-heading);
font-size: 0.88rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-heading);
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol {
list-style: none;
margin-top: var(--space-2);
padding-left: 0;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol > li {
margin-top: 0;
border-top: 1px solid var(--color-border);
padding-top: var(--space-2);
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol > li + li {
margin-top: var(--space-2);
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol :is(a, strong) {
display: block;
font-family: var(--font-heading);
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
color: var(--color-heading);
text-decoration: none;
line-height: 1.15;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol > li > a:is(:hover, :focus-visible) {
color: var(--color-link-hover);
text-decoration: underline;
}
main > article > section.article-asides section.article-dossier-summary nav[aria-label="Sommaire du dossier"] > ol > li > strong {
color: var(--color-accent-1);
font-weight: 400;
}
main > article > section.article-asides section.article-change-history > ol {
--article-change-history-marker-size: 1rem;
--article-change-history-marker-offset: 0.25rem;
--article-change-history-marker-top: 0.25rem;
@@ -755,17 +825,17 @@ main > article > section.article-asides > section.article-change-history > ol {
padding-left: 0;
}
main > article > section.article-asides > section.article-change-history > ol > li {
main > article > section.article-asides section.article-change-history > ol > li {
margin-top: 0;
position: relative;
padding-left: calc(var(--space-6) + 0.2rem);
}
main > article > section.article-asides > section.article-change-history > ol > li + li {
main > article > section.article-asides section.article-change-history > ol > li + li {
margin-top: var(--space-4);
}
main > article > section.article-asides > section.article-change-history > ol > li::before {
main > article > section.article-asides section.article-change-history > ol > li::before {
content: "";
position: absolute;
z-index: 1;
@@ -779,7 +849,7 @@ main > article > section.article-asides > section.article-change-history > ol >
box-shadow: 0 0 0 0.2rem rgba(143, 106, 216, 0.18);
}
main > article > section.article-asides > section.article-change-history > ol > li::after {
main > article > section.article-asides section.article-change-history > ol > li::after {
content: "";
position: absolute;
inset-block-start: calc(
@@ -795,11 +865,11 @@ main > article > section.article-asides > section.article-change-history > ol >
background: linear-gradient(180deg, rgba(211, 185, 255, 0.7) 0%, rgba(143, 106, 216, 0.36) 100%);
}
main > article > section.article-asides > section.article-change-history > ol > li:last-child::after {
main > article > section.article-asides section.article-change-history > ol > li:last-child::after {
content: none;
}
main > article > section.article-asides > section.article-change-history > ol > li > :is(a, div) {
main > article > section.article-asides section.article-change-history > ol > li > :is(a, div) {
display: flex;
flex-direction: column;
gap: 0.25rem;
@@ -809,19 +879,19 @@ main > article > section.article-asides > section.article-change-history > ol >
text-decoration: none;
}
main > article > section.article-asides > section.article-change-history > ol > li > :is(a, div) > span.article-change-history-subject {
main > article > section.article-asides section.article-change-history > ol > li > :is(a, div) > span.article-change-history-subject {
font-family: var(--font-heading);
font-size: 1.08rem;
line-height: 1.2;
color: var(--color-heading);
}
main > article > section.article-asides > section.article-change-history > ol > li > a:is(:hover, :focus-visible) > span.article-change-history-subject {
main > article > section.article-asides section.article-change-history > ol > li > a:is(:hover, :focus-visible) > span.article-change-history-subject {
color: #f3ddff;
text-decoration: underline;
}
main > article > section.article-asides > section.article-change-history > ol > li > :is(a, div) > time {
main > article > section.article-asides section.article-change-history > ol > li > :is(a, div) > time {
font-size: 0.86rem;
line-height: 1.4;
color: #d8c8f3;
@@ -1480,10 +1550,6 @@ body:has(> header.article-header) > main > aside.article-toc > a.article-toc-lin
min-height: 7.2rem;
}
body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary::-webkit-details-marker {
display: none;
}
body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary > span,
body:has(> header.article-header) > main > aside.article-toc > a.article-toc-link > span {
color: var(--color-heading);
@@ -1578,10 +1644,16 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
text-decoration-color: currentColor;
}
body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Sommaire du dossier"] > ol > li.is-current {
border-left: var(--border-width-regular) solid var(--color-accent-1);
padding: var(--space-1) var(--space-2);
background: rgba(118, 167, 215, 0.14);
}
body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Sommaire du dossier"] > ol > li > strong {
color: #ffffff;
text-decoration: none;
font-weight: 700;
font-weight: 800;
}
body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Sommaire du dossier"] > p {

1
themes/2026/assets/css/home.css
View File

@@ -880,7 +880,6 @@ body > main.home-main > section.home-collections.collections-section > div > art
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.2rem;
scrollbar-width: thin;
}