447 lines
15 KiB
CSS
447 lines
15 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;
|
|
}
|
|
|
|
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: 0;
|
|
}
|
|
|
|
body > main > section > div.spotlight > article h3 {
|
|
font-size: clamp(1.4rem, 8vw, 2.1rem);
|
|
}
|
|
|
|
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 {
|
|
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,
|
|
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: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: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,
|
|
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 {
|
|
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: 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|