blog/2025
1
Fork 0
Code Issues 1 Activity

Corrections pour les petites résolutions

Browse Source
This commit is contained in:
Richard Dern
2026-02-21 16:21:59 +01:00
parent a7f539ceb4
commit d5a97d990c
3 changed files with 222 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);

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

@@ -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;
}

223
themes/2026/assets/css/responsive.css
View File

@@ -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;
}
}