Harmoniser les asides et le rendu des articles
Closes #5 Closes #6 Closes #8 Closes #9 Closes #10
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user