248 lines
7.6 KiB
CSS
248 lines
7.6 KiB
CSS
@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;
|
|
}
|
|
|
|
}
|