/* * Aperina blog «مجله» — listings (index, category, tag, date) and one post. * Loaded only on blog views (inc/blog.php), after nav.css and blog-card.css: the card, the grid of * cards and the meta hairline live in blog-card.css, which the homepage rail loads on its own. * * Mobile first, logical properties only, role and scale tokens only. * Sections: page shell · category filter · the front of page one · empty state · portrait · * author page · one post. * * The page wrapper is «.blog-page», not «.blog»: WordPress already puts the class «blog» on * on the posts page, and a rule for it would reach the whole document. */ /* ========================================================= A tag's listing ----------------------------------------------------------------- WordPress puts the class «tag» on there, and the design system has a «.tag» component (components.css): an inline-flex 26px label. The whole page was laid out as one — header, listing and footer side by side. Undone here, property for property, on the page it happens on. ========================================================= */ body.tag { display: block; align-items: normal; min-height: 0; border: 0; border-radius: 0; padding: 0 0 calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--cart-bar-h, 0px)); font-size: var(--text-body); color: var(--text); } @media (min-width: 1024px) { body.tag { padding-block-end: 0; } } /* ========================================================= Page shell ========================================================= */ .blog-page { padding-block: var(--space-2) var(--space-16); } .blog-head { display: grid; justify-items: start; gap: var(--space-3); padding-block-end: var(--space-6); } .blog-head .breadcrumb { padding-block: var(--space-2); } .blog-head__kicker { margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); } .blog-head__title { font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); text-wrap: balance; } .blog-head__intro { max-inline-size: 40em; color: var(--text-muted); } .blog-head__intro p { margin: 0; } .blog-head__intro p + p { margin-block-start: var(--space-3); } @media (min-width: 768px) { .blog-page { padding-block: var(--space-4) var(--space-20); } .blog-head { padding-block-end: var(--space-8); } } /* ========================================================= Category filter — a section list, not a row of buttons ----------------------------------------------------------------- Words between two hairlines; the current one is ink and underlined, the others muted. It scrolls sideways inside itself on a phone. ========================================================= */ .blog-cats { border-block: 1px solid var(--divider); margin-block-end: var(--space-8); } .blog-cats__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; } .blog-cats__list::-webkit-scrollbar { display: none; } .blog-cats__list > li { flex: none; } .blog-cats__link { display: flex; align-items: center; min-block-size: 48px; font-size: var(--text-label); line-height: var(--lh-label); font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; } .blog-cats__link:hover { color: var(--text); } .blog-cats__link[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.7em; } .blog-cats__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } @media (min-width: 768px) { .blog-cats { margin-block-end: var(--space-10); } .blog-cats__list { gap: var(--space-8); } } /* ========================================================= The front of page one — the lead story and the column beside it ----------------------------------------------------------------- Phone: the lead, then the others as a list on hairlines. 768: the others become three short columns under the lead. 1024: the lead takes two thirds, the column one third, with a column rule between them, as a newspaper sets its front. One post alone is the lead across the whole row. ========================================================= */ .blog-front { display: grid; gap: var(--space-8); padding-block-end: var(--space-10); } .blog-front__lead { min-width: 0; } .blog-front__side { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; } .blog-front__side > li { display: grid; min-width: 0; padding-block: var(--space-5); border-block-start: 1px solid var(--divider); } .blog-front__side > li:last-child { padding-block-end: 0; } @media (min-width: 768px) { .blog-front { gap: var(--space-10); padding-block-end: var(--space-12); } .blog-front__side { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-6); } .blog-front__side > li { padding-block: var(--space-5) 0; } } @media (min-width: 1024px) { .blog-front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 0; align-items: start; } .blog-front__side { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); margin-inline-start: var(--space-10); padding-inline-start: var(--space-10); border-inline-start: 1px solid var(--divider); } .blog-front__side > li { padding-block: var(--space-6); } .blog-front__side > li:first-child { padding-block-start: 0; border-block-start: 0; } .blog-front__side > li:last-child { padding-block-end: 0; } /* Alone on the page: the photo about three fifths, the words beside it, set on its lower edge. */ .blog-front--solo { grid-template-columns: minmax(0, 1fr); } .blog-front--solo .blog-card--lead:not(.blog-card--text) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; column-gap: var(--space-10); } } /* ========================================================= The stream — one post a row, on hairlines (card variant «row») ========================================================= */ .blog-stream { list-style: none; margin: 0; padding: 0; display: grid; border-block-start: 1px solid var(--border-strong); } .blog-stream > li { display: grid; min-width: 0; padding-block: var(--space-5); } .blog-stream > li + li { border-block-start: 1px solid var(--divider); } @media (min-width: 768px) { .blog-stream > li { padding-block: var(--space-8); } } /* The grid under the front starts on a hairline of its own (blog-card.css). */ .blog-page .page-nav { margin-block-start: var(--space-12); } /* ========================================================= Nothing published yet ========================================================= */ .blog-empty { display: grid; justify-items: start; gap: var(--space-3); padding-block: var(--space-10) var(--space-16); border-block-start: 1px solid var(--divider); } .blog-empty p { margin: 0; color: var(--text-muted); } /* ========================================================= Portrait — byline and author box (inc/blog-authors.php) ----------------------------------------------------------------- The uploaded photo, or the first letter of the name. Never Gravatar. The size comes in as --photo from the helper that printed it. ========================================================= */ .blog-photo { flex: none; display: grid; place-items: center; overflow: hidden; inline-size: var(--photo, 44px); block-size: var(--photo, 44px); border-radius: 50%; background: var(--bg-sunken); } .blog-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; } .blog-photo--monogram { background: var(--accent-tint); color: var(--on-accent-tint); font-size: calc(var(--photo, 44px) * 0.4); font-weight: 600; line-height: 1; } /* ========================================================= One post — the sticky header it all has to clear ----------------------------------------------------------------- --header-h counts the first row of the site header only. From 1024px there is a second row (the mega menu: a 48px bar on a hairline), and for signed-in staff the admin bar sits above both — except on phones, where WordPress lets it scroll away. ========================================================= */ .blog-single { --post-header: var(--header-h); } .admin-bar .blog-single { --post-header: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 600px) { .admin-bar .blog-single { --post-header: var(--header-h); } } /* ========================================================= One post — the grid ----------------------------------------------------------------- Three tracks at every width: [start margin] [reading column] [end margin] (right to left, the start margin is on the right). On a phone both margins are 0 and the reading column is the screen. From 768 the column stops at --read and the margins take the rest, so the column is the centre of the page. From 1024 the end margin is at least wide enough for «در این مطلب». Everything sits in the reading column unless it says otherwise: - the head and the end matter start on the column's edge and may run on over the end margin (a headline can be wider than the text); - the cover, wide blocks and rails in the text break out into the start margin — the end margin belongs to the list of headings; - the rail that closes the article takes the full width after it. ========================================================= */ .blog-single .post { /* About 66 Persian letters a line at 18px — counted on the page, not in «ch», which is the width of a zero. */ --read: 640px; display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [text-start] minmax(0, var(--read)) [text-end] minmax(0, 1fr) [full-end]; row-gap: var(--space-8); } .blog-single .post > * { grid-column: text; min-width: 0; } @media (min-width: 768px) { .blog-single .post { row-gap: var(--space-10); } } @media (min-width: 1024px) { .blog-single .post { grid-template-columns: [full-start] minmax(0, 1fr) [text-start] minmax(0, var(--read)) [text-end] minmax(248px, 1fr) [full-end]; } .blog-single .post > .post-head { grid-column: text-start / full-end; } /* Under 1200px the start margin is too narrow to say anything, so the cover takes the row. */ .blog-single .post > .post-cover { grid-column: full; } } @media (min-width: 1200px) { .blog-single .post > .post-cover { grid-column: full-start / text-end; } } /* ========================================================= Head ========================================================= */ /* Breadcrumb, headline, standfirst, byline. The category is the last link of the trail and is not repeated as a kicker under it. */ .post-head { display: grid; justify-items: start; gap: var(--space-4); } .post-head .breadcrumb { padding-block: var(--space-2); } .post-title { max-inline-size: 15em; font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); text-wrap: balance; } .post-standfirst { margin: 0; max-inline-size: var(--read); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--text-muted); text-wrap: pretty; } /* The byline stands on a hairline as wide as the reading column. The portrait sits beside the name, not in the middle of the block the lines make. */ .post-byline { justify-self: stretch; max-inline-size: var(--read); display: flex; align-items: flex-start; gap: var(--space-3); margin-block-start: var(--space-2); padding-block-start: var(--space-5); border-block-start: 1px solid var(--divider); } .post-byline__lines { display: grid; gap: var(--space-1); min-width: 0; } .post-byline__who { margin: 0; font-size: var(--text-small); line-height: var(--lh-small); } .post-byline__who b { font-weight: 600; } .post-byline__role { color: var(--text-muted); } .post-byline__meta, .post-byline__update { color: var(--text-muted); } .post-byline__meta time { color: inherit; } .post-byline__update { margin: 0; } /* On a phone the name and the credential do not fit on one line, and a wrapped hairline row reads worse than a stack. Below 768px each part takes its own line and the hairlines step aside. */ @media (max-width: 767px) { .post-byline__who { flex-direction: column; align-items: start; gap: 0; } .post-byline__who > *:not(:last-child)::after { content: none; } } @media (min-width: 768px) { .post-head { gap: var(--space-5); } } /* ========================================================= Cover photo ----------------------------------------------------------------- Phone: edge to edge. From 1024: the start margin and the reading column together (920px in the 1280px wrap), its caption under the reading column, where the eye already is. ========================================================= */ .post-cover { display: grid; gap: var(--space-3); margin: 0; } .post-cover img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-sunken); } .post-cover__caption { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); } @media (max-width: 639px) { .post-cover { margin-inline: calc(var(--gutter, clamp(16px, 4vw, 40px)) * -1); } .post-cover__caption { padding-inline: var(--gutter, clamp(16px, 4vw, 40px)); } } @media (min-width: 1024px) { .post-cover { grid-template-columns: subgrid; } .post-cover img { grid-column: 1 / -1; } .post-cover__caption { grid-column: text; } } /* ========================================================= Body: the text, and «در این مطلب» ----------------------------------------------------------------- The body, the column that holds the text and the text itself all share the page's tracks (subgrid), so a paragraph, a wide table and the list of headings stand on the same lines as the head above. ========================================================= */ .blog-single .post > .post-body { grid-column: full; display: grid; grid-template-columns: subgrid; row-gap: var(--space-6); } .post-main { grid-column: full-start / text-end; display: grid; grid-template-columns: subgrid; min-width: 0; } .post-main > * { grid-column: text; min-width: 0; } .post-body > .post-toc--sheet { grid-column: text; } .post-toc--aside { display: none; } /* Phones and tablets: a disclosure above the article, closed. */ .post-toc--sheet { border-block: 1px solid var(--divider); } .post-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 48px; padding-block: var(--space-3); cursor: pointer; list-style: none; font-size: var(--text-label); line-height: var(--lh-label); font-weight: 500; } .post-toc__summary::-webkit-details-marker { display: none; } /* A chevron points down and then up; it is not mirrored in right-to-left text, so — like the tick on the design system's checkbox — its borders are physical, not logical. */ .post-toc__summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate var(--dur-base) var(--ease-out); } .post-toc--sheet[open] .post-toc__summary::after { rotate: -135deg; translate: 0 3px; } .post-toc__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .post-toc__title { margin: 0 0 var(--space-3); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--text-muted); } .post-toc__list { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: grid; } .post-toc__list a { display: block; padding-block: var(--space-2); color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small); text-decoration: none; } .post-toc__list a:hover { color: var(--text); } .post-toc__list a[aria-current="true"] { color: var(--text); } .post-toc__list a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @media (min-width: 768px) { .blog-single .post > .post-body { row-gap: var(--space-8); } } @media (min-width: 1024px) { /* Measured: 122px at 1280px — the 72px bar plus the 48px mega-menu row on its hairline. */ .blog-single { --post-header: calc(var(--header-h) + 50px); } .admin-bar .blog-single { --post-header: calc(var(--header-h) + 50px + var(--wp-admin--admin-bar--height, 32px)); } .post-main { grid-row: 1; } .post-toc--sheet { display: none; } /* The end margin: a quiet list on a hairline, beside the words it indexes and following the reading down the page. */ .post-toc--aside { display: block; grid-column: text-end / full-end; grid-row: 1; align-self: start; padding-inline-start: var(--space-12); position: sticky; inset-block-start: calc(var(--post-header) + var(--space-6)); max-block-size: calc(100dvh - var(--post-header) - var(--space-16)); overflow-y: auto; scrollbar-width: thin; } .post-toc--aside .post-toc__list { padding-block-end: 0; } .post-toc--aside .post-toc__list a { max-inline-size: 16em; padding-block: var(--space-2); padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--divider); font-size: var(--text-label); line-height: 1.7; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .post-toc--aside .post-toc__list a[aria-current="true"] { border-inline-start-color: var(--text); } } /* ========================================================= The article itself ========================================================= */ .post-body .entry-content.prose { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; max-width: none; font-size: var(--text-body); line-height: var(--lh-body); } /* A long address in running text has nowhere to break: without this it ran 293px past the edge of a 360px screen and was simply cut off, because the document clips what overflows it. `break-word`, not `anywhere`: both wrap the address, but `anywhere` also lets a table column shrink below its longest word, and «جوجه‌کباب» broke as «جوجه‌کبا / ب» on a phone. */ .post-body .prose > * { grid-column: text; min-width: 0; overflow-wrap: break-word; } .post-body .prose > * + * { margin-block-start: var(--space-5); } @media (min-width: 768px) { .post-body .entry-content.prose { font-size: 1.125rem; } } /* Section heads speak in the headline's voice: the same family, a lighter hand than the old 600, size doing the work. */ .post-body .prose h2, .post-body .prose h3 { scroll-margin-block-start: calc(var(--post-header) + var(--space-6)); text-wrap: balance; } .post-body .prose h2 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 400; line-height: 1.5; margin-block-start: var(--space-12); } .post-body .prose h3 { font-size: var(--text-title); font-weight: 500; line-height: var(--lh-title); margin-block-start: var(--space-8); } .post-body .prose h2 + *, .post-body .prose h3 + * { margin-block-start: var(--space-3); } .post-body .prose ul, .post-body .prose ol { padding-inline-start: var(--space-6); } .post-body .prose li + li { margin-block-start: var(--space-2); } .post-body .prose li::marker { color: var(--text-muted); } .post-body .prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; } /* * A quotation, and the pull-quote. * The old one was ExtraLight at 20px, and the strokes of that cut at that size are thinner than a * pixel: the screen then paints each word from its colour sub-pixels, and the quotation came out * with words in pink, blue and green. ExtraLight is a display cut — it is kept for sizes where its * strokes are whole pixels (the headlines, 36px and up), and a quotation at reading size is set in * Regular. The quote is then marked by size and a short rule, not by a thinner weight. */ .post-body .prose blockquote, .post-body .prose .wp-block-quote { margin-block: var(--space-10); padding: 0; border: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 400; line-height: 1.75; color: var(--text); } .post-body .prose blockquote::before { content: ""; display: block; inline-size: var(--space-12); block-size: 1px; margin-block-end: var(--space-5); background: var(--primary); } .post-body .prose blockquote p { margin: 0; } .post-body .prose blockquote p + p { margin-block-start: var(--space-3); } .post-body .prose cite { display: block; margin-block-start: var(--space-4); font-size: var(--text-caption); line-height: var(--lh-caption); font-style: normal; font-weight: 400; color: var(--text-muted); } .post-body .prose .wp-block-pullquote { margin-block: var(--space-12); padding-block: var(--space-8); padding-inline: 0; border-block: 1px solid var(--divider); border-inline: 0; text-align: start; } .post-body .prose .wp-block-pullquote blockquote { margin: 0; } .post-body .prose .wp-block-pullquote blockquote::before { content: none; } .post-body .prose .wp-block-pullquote p { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 400; line-height: 1.65; } .post-body .prose figure { margin-block: var(--space-8); } .post-body .prose figure img { display: block; } .post-body .prose figcaption, .post-body .prose .wp-element-caption { margin-block-start: var(--space-3); text-align: start; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); } .post-body .prose hr { border: 0; border-block-start: 1px solid var(--divider); margin-block: var(--space-10); } /* A table is data, not prose: it scrolls sideways inside itself when it must. Sideways only — a scroll container is free on both axes, and a rounded-off pixel of height was enough to put a second, vertical scrollbar beside the table. No minimum width: a two-column table was forced to scroll over its own empty space at 360px. */ .post-body .prose .wp-block-table { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .post-body .prose .wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: 1.7; border-block-start: 1px solid var(--border-strong); } /* «border: 0» first, and it is not spare: WordPress's own block stylesheet draws a 1px box around every cell and a 3px rule under the head, which turns a table into a grid of boxes. Rows on a hairline is what the rest of the magazine looks like. */ .post-body .prose .wp-block-table th, .post-body .prose .wp-block-table td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: top; border: 0; border-block-end: 1px solid var(--divider); } .post-body .prose .wp-block-table :is(th, td):first-child { padding-inline-start: 0; } .post-body .prose .wp-block-table thead { border-block-end: 0; } .post-body .prose .wp-block-table thead th { font-size: var(--text-caption); font-weight: 500; color: var(--text-muted); border: 0; border-block-end: 1px solid var(--border-strong); } .post-body .prose .wp-block-table tbody tr:last-child td { border-block-end: 0; } /* Aparat and the rest keep their shape instead of collapsing to a one-line box. */ .post-body .prose .wp-block-embed iframe, .post-body .prose .wp-block-embed video { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; } /* * What asks for more room gets it from the start margin: a wide or full block, and a shop rail left * in the middle of the text. The end margin is where the list of headings stands, so nothing * breaks out that way. */ .post-body .prose > .alignwide, .post-body .prose > .alignfull, .post-body .prose > .rail, .post-body .prose > .cat-rail { grid-column: full-start / text-end; max-inline-size: none; margin-inline: 0; } /* The shop's own blocks, dropped into an article by their author. */ .post-body .prose .rail, .post-body .prose .cat-rail { padding-block: var(--space-6); } /* * A rail's tracks are fractions of whatever holds them. A floor under the track keeps a card a card, * and the row then scrolls sideways — which is what a rail is for, and its own buttons still move it. */ .post-body .prose .product-row { grid-auto-columns: max(168px, calc((100% - 3 * var(--space-4)) / 3.4)); } .post-body .prose .rail > .wrap, .post-body .prose .cat-rail > .wrap { max-width: none; padding-inline: 0; } .post-body .prose .product-row, .post-body .prose .cat-rail__list { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .post-body .prose .rail__title { font-size: var(--text-title); } /* ========================================================= The rail that closes the article — the whole width, after the text ========================================================= */ .blog-single .post > .post-shop { grid-column: full; } .post-shop .rail, .post-shop .cat-rail { padding-block: var(--space-8) 0; border-block-start: 1px solid var(--divider); } .post-shop .rail > .wrap, .post-shop .cat-rail > .wrap { max-width: none; padding-inline: 0; } .post-shop .rail__title { font-size: var(--text-h3); font-weight: 400; line-height: var(--lh-h3); } /* On a phone a floor under the card: at 142px a product name broke one word a line. */ @media (max-width: 767px) { .post-shop .product-row { grid-auto-columns: max(168px, calc((100% - 2 * var(--space-3)) / 2.35)); } } /* ========================================================= The end matter — who stands behind it, how it was made, sources, its history, the tags ----------------------------------------------------------------- One row per part, each on a hairline: its label, then its content, in the reading column. From 1200 the labels move out into the start margin, like the side heads of a book, and the content keeps the column the article was read in. ========================================================= */ .post-foot { border-block-start: 1px solid var(--border-strong); } .post-foot > * { padding-block: var(--space-6); border-block-start: 1px solid var(--divider); } .post-foot > :first-child { border-block-start: 0; } .post-foot > :last-child { padding-block-end: 0; } .post-foot__title, .author-box__label { margin: 0 0 var(--space-3); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 500; color: var(--text-muted); } .post-foot__content { min-width: 0; max-inline-size: var(--read); font-size: var(--text-small); line-height: var(--lh-small); } .post-foot__content p { margin: 0; } .post-sources__list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); } /* The numbers are read, not decoration: --text-subtle is 2.2:1 and the tokens say so. */ .post-sources__list li::marker { color: var(--text-muted); } .post-history__list { margin: 0; display: grid; gap: var(--space-2); } .post-history__list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-4); } .post-history__list dt { color: var(--text-muted); } .post-history__list dd { margin: 0; } .post-history__note { display: block; color: var(--text-muted); } /* Tags: words on a line, underlined — the article's own vocabulary, not a row of pills. */ .post-tags__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); } .post-tags__link { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 0.45em; } .post-tags__link:hover { text-decoration-color: currentColor; } @media (min-width: 1024px) { .post-tags__link { min-block-size: 32px; } } /* One button is not a section: it stands under the rows, on no hairline of its own. */ .post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); } .post-foot > .post-actions { border-block-start: 0; padding-block-start: var(--space-4); } /* The people. */ .author-box__content { display: grid; gap: var(--space-4); min-width: 0; max-inline-size: var(--read); } .author-box__who { display: flex; align-items: flex-start; gap: var(--space-4); } .author-box__id { display: grid; gap: var(--space-1); min-width: 0; } .author-box__name { margin: 0; font-size: var(--text-title); line-height: var(--lh-title); font-weight: 500; } .author-box__name a { color: inherit; text-decoration: none; } .author-box__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; } .author-box__role { margin: 0; } .author-box__creds { margin: 0; padding: 0; list-style: none; display: grid; color: var(--text-muted); } .author-box__bio { margin: 0; color: var(--text); font-size: var(--text-small); line-height: var(--lh-small); } .author-box__links { margin: 0; } .author-box--reviewer .author-box__name { font-size: var(--text-body); } /* On a phone the portrait beside the name pushed the name, the role and every credential onto a second axis, while the label, the biography and the links stayed on the page edge — two starts in one block. Below 768px the portrait takes its own row and everything after it begins at the one edge. */ @media (max-width: 767px) { .author-box__who { display: grid; justify-items: start; gap: var(--space-3); } /* The size arrives as an inline custom property from the helper that printed the portrait. */ .author-box .blog-photo { --photo: 56px !important; } } /* From 1200px the start margin is wide enough to hold the labels: each label stands in the margin, set against the reading column, and the content stays in the column the article was read in. The hairlines run across both, as wide as the cover. */ @media (min-width: 1200px) { .blog-single .post > .post-foot { grid-column: full-start / text-end; display: grid; grid-template-columns: subgrid; } .post-foot > * { grid-column: 1 / -1; } .post-foot > :is(section, .author-box) { display: grid; grid-template-columns: subgrid; align-items: start; } .post-foot > * > :is(.post-foot__title, .author-box__label) { grid-column: full-start / text-start; margin: 0; padding-block-start: 0.15em; padding-inline-end: var(--space-8); text-align: end; } .post-foot > * > :is(.post-foot__content, .author-box__content) { grid-column: text; } .post-foot > .post-actions { grid-column: text; } } /* ========================================================= «بیشتر بخوانید» — the full width, after the article ========================================================= */ .post-related { margin-block-start: var(--space-16); } .post-related__title { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 400; margin-block-end: var(--space-6); } @media (min-width: 768px) { .post-related { margin-block-start: var(--space-20); } } @media (prefers-reduced-motion: reduce) { .post-toc__summary::after, .post-toc--aside .post-toc__list a { transition: none; } } .post-related { padding-block-start: var(--space-8); border-block-start: 1px solid var(--border-strong); } .post-related .blog-grid { padding-block-start: 0; border-block-start: 0; }