blog/2025
1
Fork 0
Code Issues Activity

Correction pour validation HTML + CSS + RSS

Browse Source
This commit is contained in:
Richard Dern
2026-04-04 23:27:51 +02:00
parent fdc3b58ce0
commit 7b288f6bc2
32 changed files with 496 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,7 +52,6 @@ main nav.articles-list > ol > li > article {
main nav.articles-list > ol > li > article :is(h2, h3, p, a, time, span, strong) {
overflow-wrap: anywhere;
word-break: break-word;
}
main nav.articles-list article {
@@ -221,8 +220,9 @@ body:has(> header.article-header) > main > article {
/* Titres de sections dans le corps d'article :
alignés avec la sobriété des en-têtes de blocs de l'accueil. */
main > article :is(h2, h3, h4, h5, h6) {
--article-heading-accent: var(--color-accent-1);
--article-heading-rule-width: clamp(13rem, 42vw, 18rem);
--article-heading-rule-color: var(--color-accent-1-border-soft);
--article-heading-text-color: var(--color-heading);
margin-top: var(--space-6);
margin-bottom: 0;
padding-top: calc(var(--space-3) + 0.15rem);
@@ -233,7 +233,7 @@ main > article :is(h2, h3, h4, h5, h6) {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-heading);
color: var(--article-heading-text-color);
}
main > article img {
@@ -246,15 +246,15 @@ main > article :is(h2, h3, h4, h5, h6)::before {
inset-block-start: 0;
inset-inline-start: 0;
width: min(100%, var(--article-heading-rule-width));
border-top: var(--border-width-regular) solid color-mix(in srgb, var(--article-heading-accent) 65%, var(--color-border));
border-top: var(--border-width-regular) solid var(--article-heading-rule-color);
}
main > article h2 {
--article-heading-accent: var(--color-accent-1);
--article-heading-rule-width: 100%;
--article-heading-rule-color: #5a7fa4;
--article-heading-text-color: #e0ecf8;
margin-top: calc(var(--article-feature-block-margin) * 2);
font-size: clamp(1.55rem, 2.55vw, 2.15rem);
color: color-mix(in srgb, var(--color-accent-1) 18%, var(--color-heading));
}
body:has(> header.article-header) > main > article > h2:first-child {
@@ -262,24 +262,24 @@ body:has(> header.article-header) > main > article > h2:first-child {
}
main > article h3 {
--article-heading-accent: var(--color-section-divider-1);
--article-heading-rule-color: #a48a41;
--article-heading-text-color: #f2e4be;
font-size: clamp(1.36rem, 2.08vw, 1.8rem);
color: color-mix(in srgb, var(--color-section-divider-1) 34%, var(--color-heading));
}
main > article h4 {
--article-heading-accent: var(--color-section-divider-2);
--article-heading-rule-color: #6b57a5;
--article-heading-text-color: #e0dbf6;
font-size: clamp(1.2rem, 1.82vw, 1.5rem);
color: color-mix(in srgb, var(--color-section-divider-2) 22%, var(--color-heading));
}
main > article h5 {
--article-heading-accent: var(--color-border-strong);
--article-heading-rule-color: var(--color-border-strong);
font-size: clamp(1.08rem, 1.5vw, 1.28rem);
}
main > article h6 {
--article-heading-accent: var(--color-border-strong);
--article-heading-rule-color: var(--color-border-strong);
font-size: clamp(1rem, 1.3vw, 1.16rem);
}
@@ -560,14 +560,14 @@ main > article > table {
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid color-mix(in srgb, var(--color-section-divider-1) 46%, #5f3f1a);
border: 1px solid #9e772b;
border-radius: 0;
background: linear-gradient(180deg, rgba(37, 23, 10, 0.82) 0%, rgba(15, 10, 6, 0.9) 100%);
color: var(--color-text);
}
main > article > table :is(th, td) {
border: 1px solid color-mix(in srgb, var(--color-section-divider-3) 36%, #4e3218);
border: 1px solid #804c26;
padding: 0.55rem 0.72rem;
vertical-align: top;
}
@@ -648,12 +648,12 @@ main > article > section.article-asides > section.article-comments-callout > p:l
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));
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) {
border-color: color-mix(in srgb, var(--color-section-divider-1) 78%, var(--color-border-strong));
border-color: #c1a249;
background: linear-gradient(180deg, rgba(217, 122, 63, 0.54) 0%, rgba(17, 27, 42, 0.98) 100%);
}
@@ -798,7 +798,7 @@ main > article > section.article-books > div > section > article {
row-gap: var(--space-2);
align-items: start;
margin-top: 0;
border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 62%, transparent);
border-top: 1px solid var(--color-border-strong-alpha-62);
padding-top: var(--space-3);
padding-bottom: 0;
background: transparent;
@@ -864,28 +864,28 @@ main > article > section.article-books > div > section p:last-child {
main > article > section.article-books > div > section p:last-child > a.ui-button {
min-height: 2.35rem;
border-color: color-mix(in srgb, var(--color-link-external) 58%, var(--color-border-strong));
border-color: var(--color-link-external-button-border);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-link-external) 38%, var(--color-background-alt)) 0%,
color-mix(in srgb, var(--color-link-external) 12%, var(--color-background-alt)) 100%
var(--color-link-external-button-background-top) 0%,
var(--color-link-external-button-background-bottom) 100%
);
}
main > article > section.article-books > div > section p:last-child > a.ui-button:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--color-link-external-hover) 70%, var(--color-border-strong));
border-color: var(--color-link-external-button-border-hover);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-link-external-hover) 44%, var(--color-background-alt)) 0%,
color-mix(in srgb, var(--color-link-external) 18%, var(--color-background-alt)) 100%
var(--color-link-external-button-background-top-hover) 0%,
var(--color-link-external-button-background-bottom-hover) 100%
);
}
main > article > dl {
margin-block: var(--article-feature-block-margin);
padding-block: var(--space-3) var(--space-2);
border-top: var(--border-width-regular) solid color-mix(in srgb, var(--color-section-divider-1) 62%, var(--color-section-divider-3));
border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 72%, transparent);
border-top: var(--border-width-regular) solid #e2a03f;
border-bottom: 1px solid var(--color-border-strong-alpha-72);
display: grid;
grid-template-columns: minmax(13rem, 0.9fr) minmax(0, 2.1fr);
column-gap: var(--space-4);
@@ -905,14 +905,14 @@ main > article > dl > dt {
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
color: color-mix(in srgb, var(--color-section-divider-1) 55%, var(--color-heading));
color: #eed695;
}
main > article > dl > dd {
margin: 0;
grid-column: 2;
padding-left: var(--space-3);
border-left: var(--border-width-regular) solid color-mix(in srgb, var(--color-section-divider-3) 65%, var(--color-border));
border-left: var(--border-width-regular) solid #9b6241;
font-size: 1.03rem;
line-height: 1.6;
color: var(--color-text);
@@ -922,7 +922,7 @@ main > article > dl > dd + dt,
main > article > dl > dd + dt + dd {
margin-top: var(--space-1);
padding-top: var(--space-2);
border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
border-top: 1px solid var(--color-border-strong-alpha-55);
}
body:has(> header.article-header) > main > article > pre {
@@ -1053,7 +1053,7 @@ main > article figure.figure-media > figcaption.figure-media-meta {
flex-direction: column;
min-height: 100%;
gap: var(--space-2);
background: color-mix(in srgb, var(--color-background-alt) 82%, transparent);
background: var(--color-content-soft-background);
}
main > article figure.figure-media > figcaption.figure-media-meta > .figure-media-meta-main {
@@ -1247,7 +1247,6 @@ body:has(> header.article-header) > main > aside.article-toc > details.article-t
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-gutter: stable both-edges;
border: 1px solid var(--color-border-strong);
background: rgba(6, 12, 20, 0.96);
padding: var(--space-3);
@@ -1362,7 +1361,6 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
body:has(> header.article-header) > main > article > table :is(th, td) {
overflow-wrap: anywhere;
word-break: break-word;
}
main > article > dl {