.header-text-buy { flex: none; } .header-text-buy.header-text { text-align: right; } .header-text-buy { display: none; } .header-text-buy[attr="display-menu-item"] { display: block; } /* Nothing in the work header wraps to a second line, which is what the action labels did once a second one joined the row. The original site's .nav-text carried the same declaration. No overflow: hidden beside it. The only label whose length varies is the title, and main.css:558 already truncates that one. Putting it on every item would drop the logo's automatic minimum size to zero, so a header that ran out of room would start clipping the C instead of the title. */ .section-header .header-text { white-space: nowrap; } /* The rule between the header's two rows. It exists only at portrait, where it both draws the divider and forces the actions onto a row of their own - the original's .line, which carried the same small-layout-only visibility. */ .header-rule { display: none; } .wrap--scrolling-content { height: var(--height-portfolio); grid-column-gap: 0px; grid-row-gap: 0px; background-color: var(--white); color: var(--black); scrollbar-width: thin; scrollbar-color: var(--blue) var(--black); flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100vw; display: flex; overflow: auto hidden; cursor: var(--cursor-scroll-horisontal); } .wrap--block { width: auto; height: var(--height-portfolio); margin: 0; padding: 0; scroll-snap-align: start; flex: none; position: relative; } .wrap--block-narrow { width: 35vw; } .wrap--block-square { width: var(--height-portfolio); } .wrap--block-wide { width: 75vw; } .wrap--block p { line-height: var(--size-m); font-size: var(--text-m); margin: var(--size-m); padding: 0; } /* The credit block - glyph counts, copyright, social links - is set small. The CMS's rich text editor moves a link-only last line out of the quote when an entry is opened and saved, so the same block exists in two shapes across the content. Both are styled here, because which one a work happens to be in should not change how it looks. */ .wrap--block blockquote p, .wrap--block blockquote + p { line-height: var(--size-s); font-size: var(--text-s); } .wrap--block img { width: 100%; height: 100%; object-fit: cover; } .wrap--block video { width: 100%; height: var(--height-portfolio); object-fit: cover; } .wrap--block .font-tester { padding: var(--size-m); width: 100%; height: var(--height-portfolio); } .wrap--block .font-tester, .wrap--block .font-tester .ft-preview, .wrap--block .font-tester label { cursor: var(--cursor-text); } .link-list-item-grid-portfolio { width: var(--size-grid); height: calc(2 * var(--size-grid)); } .link-list-item-grid-portfolio[data="fonts"]:hover, .link-list-item-grid-portfolio[data="projects"] { transform: translate(0, calc(-1 * var(--size-grid))); } .link-list-item-grid-portfolio[data="fonts"], .link-list-item-grid-portfolio[data="projects"]:hover { transform: translate(0, 0); } .footer-open-close { width: var(--size-l); height: var(--size-l); background-color: var(--black); color: var(--white); font-size: var(--text-l); font-feature-settings: "case"; border: 1px var(--black); justify-content: center; align-items: center; margin-top: -4vw; text-decoration: none; display: flex; position: absolute; bottom: 0; right: 0; z-index: 99; cursor: var(--cursor-pointer); transition: transform 0.3s ease; } .footer-open-close div { transition: transform 0.3s ease; } .footer-open-close:hover { text-decoration: none; } /* 3. Vertical screen (Portrait) */ @media screen and (max-aspect-ratio: 2.6/3) { /* 1px rather than --height-borders, which is calc(--size-unit * 0.005) and resolves to 0.018vw here - sub-pixel, so it would draw nothing. */ body { --height-header-rule: 1px; --height-header-work: calc(2 * var(--height-header) + var(--height-header-rule)); } .link--header-category { display: none; } /* Two rows, ported from the original site: the action group clears onto its own row and the header states the height that holds both. Only a work that has an action gets the second row - a divider with an empty row under it is the gap acceptance 2 forbids, and 36 of the 52 works carry neither link. The header's height and the body's offset are one expression, so they cannot drift apart. Its three flex lines - navigation, rule, actions - measure exactly that: two --height-header rows plus the rule. That third term is what the original left out - it stated calc(2 * nav-space) and its own .line was not in the sum, so the archived page measures scrollHeight 128 against clientHeight 126. Acceptance 5 wants them equal. row-gap is zeroed because main.css:461 sets grid-row-gap: .4vw on the header. It was inert while the header was a single line and flex-wrap makes it live, which would add 0.8vw the stated height does not carry. */ .section-header--actions { flex-wrap: wrap; row-gap: 0; height: var(--height-header-work); } .section-header--actions + .section-body { margin-top: var(--height-header-work); } /* The title is pinned to the first row. Flex collects lines by each item's hypothetical size, before any shrinking, so a title left at flex-basis: auto would be carried onto a line of its own the moment it outgrew the space beside the logo - a fourth line, and the header's stated height holds three. At flex-basis 0 it can never force that break, and it grows into whatever the row has left, which is where main.css:558's ellipsis takes over. The spacer has no work to do once the actions sit on their own row, and it would otherwise halve the space the title grows into. */ .section-header--actions h1.header-text { flex: 1 1 0; } .section-header--actions .div-block { display: none; } .header-rule { display: block; flex: 0 1 100%; height: var(--height-header-rule); background: var(--white); } /* Resets, not deletes: variables.css:117 also makes the buy button a fixed bottom bar here and this file may not edit that one. The button now sits in the header's second row, so the bar and the body padding that cleared it are both gone. Its bottom/left/right are left standing rather than reset, because insets do not apply to a static box at all. text-align is restated rather than dropped: without it the portrait value would fall through to the `right` at line 6 of this file, which is a change to the second row nobody asked for. */ .header-text-buy.header-text { text-align: left; position: static; padding: 0; background: none; } .wrap--scrolling-content { display: block; height: auto; width: 100vw; } .wrap--block { width: 100vw; height: auto; margin: 0; padding: 0; scroll-snap-align: start; flex: none; position: relative; } .wrap--block img, .wrap--block video, .wrap--block .font-tester, .wrap--block p { overflow: hidden; height: auto; } .wrap--block .font-tester .LetterinkFontTester-Form { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--size-s); } .wrap--block .font-tester .LetterinkFontTester-Form > * { flex-grow: 1; margin: 0; } .footer-open-close { display: none; } }