Nouveau thème pour 2026
This commit is contained in:
247
themes/2026/assets/css/responsive.css
Normal file
247
themes/2026/assets/css/responsive.css
Normal file
@@ -0,0 +1,247 @@
|
||||
@media (max-width: 1100px) {
|
||||
body > header > section.site-stats > ul {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > article,
|
||||
body > main > section > div.spotlight.spotlight-aside-first > article {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > aside,
|
||||
body > main > section > div.spotlight.spotlight-aside-first > aside:first-child {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > aside {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > aside > ol {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > aside > ol {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > aside > ol > li,
|
||||
body > main > section > div.spotlight > aside > ol > li:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > main.home-main > section.home-books > div {
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body > main.home-main > section.home-books > div > section {
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
body > main.home-main > section.home-rubrics > div {
|
||||
grid-template-columns: repeat(2, minmax(0, 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: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
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: 12rem;
|
||||
}
|
||||
|
||||
body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:nth-of-type(1) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article figure {
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article > p:nth-of-type(1) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article {
|
||||
grid-template-columns: minmax(6.4rem, 8rem) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
body > main:has(> article:first-child):has(> aside) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main:has(> article:first-child):has(> aside) > article:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > main:has(> article:first-child):has(> aside) > aside {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
body > footer > section:nth-of-type(1) > dl {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
body {
|
||||
font-size: var(--font-size-body-mobile);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
body > main,
|
||||
body > footer {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
body > header > section.site-stats > ul {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > header:has(> h1) > h1 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
main nav.articles-list > ol {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main > section > div.spotlight > article figure {
|
||||
min-height: 14rem;
|
||||
}
|
||||
|
||||
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.home-main > section.home-books > div > section figure {
|
||||
min-height: 0;
|
||||
width: min(11rem, 100%);
|
||||
}
|
||||
|
||||
body > main.home-main > section.home-rubrics > div {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main.home-main > section.home-rubrics > div > article > ul > li {
|
||||
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 > li article figure {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
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-timeline > section.listing-timeline > ol::before {
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li {
|
||||
padding-inline-start: var(--space-4);
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li::before {
|
||||
inset-inline-start: -0.35rem;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article > a > figure {
|
||||
min-height: 9rem;
|
||||
}
|
||||
|
||||
body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > a > figure {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
body > main:has(> article:first-child):has(> aside) > article:first-child {
|
||||
font-size: 1.14rem;
|
||||
line-height: 1.82;
|
||||
}
|
||||
|
||||
body > main:has(> article:first-child):has(> aside) > article:first-child > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
padding-top: var(--space-3);
|
||||
padding-inline: var(--space-1);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
body > footer > section:nth-of-type(1) > dl {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
body > footer > section:nth-of-type(1) > dl > div {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-left: 0;
|
||||
padding-top: var(--space-1);
|
||||
}
|
||||
|
||||
body > footer > section:nth-of-type(1) > dl > div:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user