From d5a97d990c39664302f6075f47e3b8f207746983 Mon Sep 17 00:00:00 2001 From: Richard Dern Date: Sat, 21 Feb 2026 16:21:59 +0100 Subject: [PATCH] =?UTF-8?q?Corrections=20pour=20les=20petites=20r=C3=A9sol?= =?UTF-8?q?utions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/2026/assets/css/content.css | 10 ++ themes/2026/assets/css/home.css | 1 + themes/2026/assets/css/responsive.css | 223 ++++++++++++++++++++++++-- 3 files changed, 222 insertions(+), 12 deletions(-) diff --git a/themes/2026/assets/css/content.css b/themes/2026/assets/css/content.css index ba0de2e8..eca5d4f1 100644 --- a/themes/2026/assets/css/content.css +++ b/themes/2026/assets/css/content.css @@ -45,6 +45,16 @@ main nav.articles-list > ol { gap: var(--space-5) var(--space-4); } +main nav.articles-list > ol > li, +main nav.articles-list > ol > li > article { + min-width: 0; +} + +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 { border-top: 1px solid var(--color-border); padding-top: var(--space-3); diff --git a/themes/2026/assets/css/home.css b/themes/2026/assets/css/home.css index f6400062..8dc3e049 100644 --- a/themes/2026/assets/css/home.css +++ b/themes/2026/assets/css/home.css @@ -944,5 +944,6 @@ body > main.home-main > section.home-collections.collections-section > div > art /* Le carrousel des collections ne doit pas élargir le viewport mobile. */ html:has(body > main.home-main > section.home-collections.collections-section), body:has(> main.home-main > section.home-collections.collections-section) { + overflow-x: hidden; overflow-x: clip; } diff --git a/themes/2026/assets/css/responsive.css b/themes/2026/assets/css/responsive.css index d8b17a66..03157a3f 100644 --- a/themes/2026/assets/css/responsive.css +++ b/themes/2026/assets/css/responsive.css @@ -140,16 +140,91 @@ grid-template-columns: 1fr; } + main nav.articles-list > ol > li { + grid-column: auto; + grid-row: auto; + } + + main nav.articles-list figure { + min-height: 0; + width: 100%; + } + + main nav.articles-list figure img { + height: auto; + } + + body > main > section > div.spotlight { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); + } + + body > main > section > div.spotlight > aside, + body > main > section > div.spotlight.spotlight-aside-first > aside:first-child { + display: none; + } + + body > main > section > div.spotlight > article, + body > main > section > div.spotlight.spotlight-aside-first > article, + body > main > section > div.spotlight:has(> aside > ol > li:is(:hover, :focus-within)) > article { + display: block; + grid-column: auto; + grid-row: auto; + } + + body > main > section > div.spotlight > article { + border-top: 1px solid var(--color-border); + padding-top: var(--space-3); + } + + body > main > section > div.spotlight > article:first-of-type { + border-top: 0; + padding-top: 0; + } + body > main > section > div.spotlight > article figure { - min-height: 14rem; + min-height: 0; } body > main > section > div.spotlight > article h3 { font-size: clamp(1.4rem, 8vw, 2.1rem); } - body > main > section > div.spotlight > aside > ol { - grid-template-columns: 1fr; + body > main > section > div.spotlight > article figure img { + height: auto; + } + + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight, + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first { + display: grid !important; + grid-template-columns: 1fr !important; + gap: var(--space-4) !important; + } + + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > aside.spotlight-feed, + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > aside.spotlight-feed { + display: none !important; + } + + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card, + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card { + display: block !important; + grid-column: auto !important; + grid-row: auto !important; + width: 100% !important; + max-width: 100% !important; + } + + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card figure, + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card figure { + min-height: 0 !important; + width: 100% !important; + } + + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card figure img, + body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card figure img { + height: auto !important; } body > main.home-main > section.home-books > div > section figure { @@ -165,20 +240,36 @@ grid-template-columns: 1fr; } - body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol { - grid-template-columns: 1fr; + body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol, + body > main.home-main > section.home-deep > nav.articles-list > ol { + grid-template-columns: 1fr !important; } - body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article figure { - min-height: 10rem; + body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n), + body > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) { + grid-column: auto !important; + grid-row: auto !important; } - body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol { - grid-template-columns: 1fr; + body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) article figure, + body > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) article figure { + min-height: 0 !important; } - body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article figure { - min-height: 10rem; + body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol, + body > main.listing-page > section.listing-articles > nav.articles-list > ol { + grid-template-columns: 1fr !important; + } + + body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li:nth-child(n), + body > main.listing-page > section.listing-articles > nav.articles-list > ol > li:nth-child(n) { + grid-column: auto !important; + grid-row: auto !important; + } + + body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li:nth-child(n) article figure, + body > main.listing-page > section.listing-articles > nav.articles-list > ol > li:nth-child(n) article figure { + min-height: 0 !important; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol::before { @@ -198,7 +289,7 @@ } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article > a > figure { - min-height: 9rem; + min-height: 0; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div { @@ -245,3 +336,111 @@ } } + +@media (max-width: 480px) { + body { + font-size: 1.0625rem; + padding: var(--space-2); + } + + body > header > section:first-of-type > a { + gap: var(--space-2); + } + + body > header > section:first-of-type > a img { + width: 2.8rem; + } + + body > header > section:first-of-type > a strong { + font-size: clamp(1.3rem, 6.5vw, 1.85rem); + letter-spacing: 0.02em; + } + + body > header:has(> h1) > h1 { + font-size: clamp(1.6rem, 8.2vw, 2.25rem); + } + + .article-header > h1 { + font-size: clamp(1.4rem, 7.6vw, 2rem); + line-height: 1.08; + margin-top: var(--space-4); + margin-bottom: var(--space-4); + } + + body > main > section > div.spotlight > article figure { + min-height: 11.5rem; + } + + body > main > section > div.spotlight > article h3 { + font-size: clamp(1.22rem, 8vw, 1.72rem); + } + + body > main > section > div.spotlight > article > p:nth-of-type(1), + body > main.listing-page > section.listing-articles > nav.articles-list > ol > li article > p:nth-of-type(1) { + font-size: 1.04rem; + } + + main nav.articles-list h3 { + font-size: clamp(1.12rem, 6.5vw, 1.52rem); + } + + body > main:has(> article:first-child):has(> aside) > article:first-child { + font-size: 1.06rem; + line-height: 1.72; + } + + body > main:has(> article:first-child):has(> aside) > article:first-child > p { + text-align: left; + } + + body > main:has(> article:first-child):has(> aside) > article:first-child > :not(figure):not(table):not(pre):not(.highlight):not(section.article-books) { + max-width: 100%; + } + + body > main.home-main > section.home-rubrics > div > article > header { + align-items: flex-start; + flex-direction: column; + } + + body > main.home-main > section.home-rubrics > div > article > ul > li > time, + body > main.home-main > section.home-rubrics > div > article > header > p { + white-space: normal; + } + + body:has(> header.article-header) > main > aside.article-toc { + inset-inline-end: var(--space-2); + inset-block-start: auto; + inset-block-end: var(--space-2); + transform: none; + flex-direction: row; + align-items: flex-end; + gap: var(--space-2); + z-index: 40; + } + + body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary.ui-button--vertical { + width: auto; + min-height: 2.35rem; + padding: 0.45rem 0.72rem; + font-size: 0.74rem; + letter-spacing: 0.05em; + } + + body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary.ui-button--vertical > span { + transform: none; + white-space: normal; + } + + body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > .article-toc-drawer-panel { + inset-inline-end: 0; + inset-block-start: auto; + inset-block-end: calc(100% + var(--space-2)); + transform: none; + width: min(22rem, calc(100vw - (2 * var(--space-2)))); + max-height: min(68vh, 31rem); + } + + body:has(> header.article-header) > main > article { + padding-bottom: 3.8rem; + } +}