Nouveau thème pour 2026
This commit is contained in:
257
themes/2026/assets/css/base.css
Normal file
257
themes/2026/assets/css/base.css
Normal file
@@ -0,0 +1,257 @@
|
||||
html {
|
||||
color-scheme: dark;
|
||||
font-size: max(100%, var(--font-size-root-min));
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--font-size-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%
|
||||
);
|
||||
color: var(--color-text);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer {
|
||||
width: min(100%, var(--max-width));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
body > main,
|
||||
body > footer {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
body > main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
main > article {
|
||||
min-width: 0;
|
||||
width: min(100%, var(--max-width-reading));
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-heading);
|
||||
line-height: 1.15;
|
||||
color: var(--color-heading);
|
||||
text-wrap: balance;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 4.2vw, 4rem);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.35rem, 2.2vw, 2rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.05rem, 1.7vw, 1.35rem);
|
||||
}
|
||||
|
||||
main > article :is(strong, b) {
|
||||
font-weight: 800;
|
||||
color: var(--color-heading);
|
||||
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%
|
||||
);
|
||||
background-size: 100% 1em;
|
||||
background-position: 0 52%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 0.12em;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
figure,
|
||||
pre,
|
||||
blockquote,
|
||||
table,
|
||||
section,
|
||||
article,
|
||||
aside,
|
||||
nav,
|
||||
details,
|
||||
dl {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 72%, transparent);
|
||||
text-underline-offset: 0.15em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus-visible {
|
||||
color: var(--color-link-hover);
|
||||
text-decoration-thickness: 2px;
|
||||
text-decoration-color: currentColor;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
a.link-external:not(.link-affiliated) {
|
||||
color: var(--color-link-external);
|
||||
}
|
||||
|
||||
a.link-external:not(.link-affiliated):is(:hover, :focus-visible) {
|
||||
color: var(--color-link-external-hover);
|
||||
}
|
||||
|
||||
a.link-affiliated {
|
||||
color: var(--color-link-affiliated);
|
||||
}
|
||||
|
||||
a.link-affiliated:is(:hover, :focus-visible) {
|
||||
color: var(--color-link-affiliated-hover);
|
||||
}
|
||||
|
||||
img,
|
||||
video,
|
||||
audio,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
time,
|
||||
sub,
|
||||
small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--space-2);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
thead th {
|
||||
color: var(--color-heading);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
dd {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
/* Habillage commun des boutons contextuels (Sommaire, liens d'en-tête, oeuvres). */
|
||||
.ui-button {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 2.35rem;
|
||||
padding: 0.45rem 0.85rem;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
background: linear-gradient(180deg, rgba(118, 167, 215, 0.22) 0%, rgba(17, 27, 42, 0.9) 100%);
|
||||
color: var(--color-heading);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui-button:is(:hover, :focus-visible) {
|
||||
border-color: color-mix(in srgb, var(--color-accent-1) 62%, var(--color-border-strong));
|
||||
background: linear-gradient(180deg, rgba(118, 167, 215, 0.32) 0%, rgba(17, 27, 42, 0.96) 100%);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.ui-button:visited,
|
||||
a.ui-button.link-external:not(.link-affiliated),
|
||||
a.ui-button.link-affiliated {
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.ui-button--vertical {
|
||||
width: 2.25rem;
|
||||
min-height: 7.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-button--vertical > span {
|
||||
display: inline-block;
|
||||
transform: rotate(90deg);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
main > section,
|
||||
main > aside,
|
||||
main > article {
|
||||
border-top: var(--border-width-regular) solid var(--color-border);
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
main > section:nth-of-type(3n+1) {
|
||||
border-top-color: var(--color-section-divider-1);
|
||||
}
|
||||
|
||||
main > article {
|
||||
border-top-color: var(--color-accent-1);
|
||||
}
|
||||
|
||||
main > section:nth-of-type(3n+2) {
|
||||
border-top-color: var(--color-section-divider-2);
|
||||
}
|
||||
|
||||
main > section:nth-of-type(3n),
|
||||
main > aside:last-child {
|
||||
border-top-color: var(--color-section-divider-3);
|
||||
}
|
||||
Reference in New Issue
Block a user