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

2
themes/2026/assets/css/article-header.css
View File

@@ -189,7 +189,7 @@
}
.article-header .article-origin-link-button .article-origin-link-button-link.ui-button {
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.36) 0%, rgba(17, 27, 42, 0.94) 100%);
}

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

@@ -10,9 +10,9 @@ body {
line-height: 1.7;
background: linear-gradient(
170deg,
color-mix(in srgb, var(--color-background-wash) 16%, var(--color-background-alt)) 0%,
color-mix(in srgb, var(--color-background-wash) 8%, var(--color-background-alt)) 46%,
color-mix(in srgb, var(--color-background-wash) 4%, var(--color-background-deep)) 100%
var(--color-body-gradient-top) 0%,
var(--color-body-gradient-mid) 46%,
var(--color-body-gradient-bottom) 100%
);
color: var(--color-text);
padding: var(--page-gutter);
@@ -75,8 +75,8 @@ body:has(> header.article-header) > main > article > :is(p, ul, ol, blockquote,
text-shadow: none;
background-image: linear-gradient(
to bottom,
color-mix(in srgb, var(--color-strong-highlight) 82%, var(--color-background-deep)) 0%,
color-mix(in srgb, var(--color-strong-highlight) 92%, var(--color-background-deep)) 100%
var(--color-strong-highlight-start) 0%,
var(--color-strong-highlight-end) 100%
);
background-size: 100% 1em;
background-position: 0 52%;
@@ -106,9 +106,9 @@ a {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 72%, transparent);
text-decoration-color: currentColor;
text-underline-offset: 0.15em;
word-break: break-word;
overflow-wrap: anywhere;
}
a:hover,
@@ -162,7 +162,7 @@ body:has(> main.listing-page) > main.listing-page table span.link-dead {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 72%, transparent);
text-decoration-color: currentColor;
text-underline-offset: 0.2em;
}
@@ -177,7 +177,7 @@ body:has(> main.listing-page) > main.listing-page table span.link-dead:is(:hover
body:has(> header.article-header) > main > article > :not(footer):not(section.article-asides) :is(a, span).link-dead.link-dead-404:not(.ui-button),
body:has(> main.listing-page) > main.listing-page table span.link-dead.link-dead-404 {
color: var(--color-link-dead-404);
text-decoration-color: color-mix(in srgb, var(--color-link-dead-404) 78%, transparent);
text-decoration-color: var(--color-link-dead-404-underline);
}
body:has(> header.article-header) > main > article > :not(footer):not(section.article-asides) :is(a, span).link-dead.link-dead-404:not(.ui-button):is(:hover, :focus-visible),
@@ -189,7 +189,7 @@ body:has(> main.listing-page) > main.listing-page table span.link-dead.link-dead
body:has(> header.article-header) > main > article > :not(footer):not(section.article-asides) del.link-dead.link-dead-marked,
body:has(> main.listing-page) > main.listing-page table del.link-dead.link-dead-marked {
color: var(--color-link-dead-marked);
text-decoration-color: color-mix(in srgb, var(--color-link-dead-marked) 82%, transparent);
text-decoration-color: var(--color-link-dead-marked-underline);
}
body:has(> header.article-header) > main > article > :not(footer):not(section.article-asides) del.link-dead.link-dead-marked > span.link-dead.link-dead-marked:not(.ui-button),
@@ -287,7 +287,7 @@ details > summary {
}
.ui-button:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--color-accent-1) 62%, var(--color-border-strong));
border-color: var(--color-accent-1-border-soft);
background: linear-gradient(180deg, rgba(118, 167, 215, 0.32) 0%, rgba(17, 27, 42, 0.96) 100%);
color: #ffffff;
text-decoration: none;

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 {

6
themes/2026/assets/css/header.css
View File

@@ -58,7 +58,7 @@ body > header > section:first-of-type > form.site-search > input[type="search"]
min-height: 2.35rem;
padding: 0.45rem 0.65rem;
border: 1px solid var(--color-border-strong);
background-color: color-mix(in srgb, var(--color-background-alt) 88%, #000000 12%);
background-color: var(--color-search-background);
color: var(--color-heading);
font-family: var(--font-body);
font-size: 1rem;
@@ -66,7 +66,7 @@ body > header > section:first-of-type > form.site-search > input[type="search"]
body > header > section:first-of-type > form.site-search > input[type="search"]:focus-visible {
border-color: var(--color-accent-1);
outline: 2px solid color-mix(in srgb, var(--color-accent-1) 78%, transparent);
outline: 2px solid var(--color-accent-1-focus-outline);
outline-offset: 1px;
}
@@ -226,7 +226,7 @@ body > header:has(> h1) > p:not(:has(time)) {
}
.page-links a.ui-button:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--color-accent-1) 62%, var(--color-border-strong));
border-color: var(--color-accent-1-border-soft);
color: #ffffff;
}

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

@@ -200,7 +200,7 @@ body > main > section > div.spotlight.spotlight-aside-first > aside > ol > li >
}
body > main > section > div.spotlight > aside > ol > li:is(:hover, :focus-within) > a::before {
pointer-events: auto;
pointer-events: initial;
}
body > main > section > div.spotlight > aside > ol > li > a > span:first-child {
@@ -383,20 +383,20 @@ body > main.home-main > section.home-books > div > section p:last-child {
body > main.home-main > section.home-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));
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%
);
}
body > main.home-main > section.home-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%
);
}

22
themes/2026/assets/css/variables.css
View File

@@ -34,6 +34,28 @@
--color-strong-highlight: #8f3340;
--border-width-regular: 2px;
/* Couleurs derivees pour rester compatibles avec le validateur CSS local. */
--color-body-gradient-top: #1d2c3f;
--color-body-gradient-mid: #172434;
--color-body-gradient-bottom: #080e1a;
--color-strong-highlight-start: #762b38;
--color-strong-highlight-end: #84303c;
--color-search-background: #0f1825;
--color-accent-1-border-soft: #6087af;
--color-accent-1-focus-outline: rgba(118, 167, 215, 0.78);
--color-link-dead-404-underline: rgba(255, 159, 179, 0.78);
--color-link-dead-marked-underline: rgba(255, 91, 110, 0.82);
--color-link-external-button-border: #58a598;
--color-link-external-button-background-top: #346660;
--color-link-external-button-background-bottom: #1c333b;
--color-link-external-button-border-hover: #80c6b6;
--color-link-external-button-background-top-hover: #4f7c76;
--color-link-external-button-background-bottom-hover: #223e44;
--color-border-strong-alpha-55: rgba(59, 83, 109, 0.55);
--color-border-strong-alpha-62: rgba(59, 83, 109, 0.62);
--color-border-strong-alpha-72: rgba(59, 83, 109, 0.72);
--color-content-soft-background: rgba(17, 27, 42, 0.82);
--font-body: "Source Sans 3", "Noto Sans", "DejaVu Sans", sans-serif;
--font-heading: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
--font-size-root-min: 16px;