|
| 1 | +@use "../../abstracts/abstracts" as *; |
| 2 | + |
| 3 | +// ========================================================================== |
| 4 | +// PWA Install |
| 5 | +// Footer "install app" control + iOS add-to-home-screen hint. |
| 6 | +// |
| 7 | +// It used to sit in the masthead, but on a 375px phone that row already |
| 8 | +// carries search, language, theme and the hamburger — a fifth control left |
| 9 | +// the wordmark too little width. Installing happens once, so it belongs with |
| 10 | +// the other once-in-a-while footer affordances, where there is room to label |
| 11 | +// it rather than leave a bare download glyph to be guessed at. |
| 12 | +// |
| 13 | +// Borrows the footer social links' quiet chrome (same box, same border and |
| 14 | +// hover) so the bottom bar reads as one row. Stays hidden (the [hidden] |
| 15 | +// attribute) until js/pwa-install.js confirms installability. |
| 16 | +// ========================================================================== |
| 17 | + |
| 18 | +.pwa-install { |
| 19 | + align-items: center; |
| 20 | + justify-content: center; |
| 21 | + gap: var(--space-2); |
| 22 | + height: var(--size-control-md); |
| 23 | + padding-inline: var(--space-3); |
| 24 | + background: transparent; |
| 25 | + border: 1px solid var(--footer-divider); |
| 26 | + border-radius: var(--radius-sm); |
| 27 | + color: var(--footer-text); |
| 28 | + font-family: var(--font-body); |
| 29 | + font-size: var(--text-xs); |
| 30 | + line-height: 1; |
| 31 | + // Every <button> inherits the global base style (_buttons.scss): radius, |
| 32 | + // --glow-sm and a hover lift. Reset the halo and the bounce so this reads |
| 33 | + // as the flat outlined control its social-link neighbours are. |
| 34 | + box-shadow: none; |
| 35 | + transition: |
| 36 | + border-color var(--transition-fast), |
| 37 | + color var(--transition-fast), |
| 38 | + background-color var(--transition-fast); |
| 39 | + |
| 40 | + // `hidden` must win even though we set a display — scope display to the |
| 41 | + // not-hidden state so the attribute keeps the button out of flow. |
| 42 | + display: none; |
| 43 | + |
| 44 | + &:not([hidden]) { |
| 45 | + display: inline-flex; |
| 46 | + } |
| 47 | + |
| 48 | + &:hover { |
| 49 | + background: color-mix(in oklab, var(--footer-text) 8%, transparent); |
| 50 | + border-color: var(--primary); |
| 51 | + color: var(--primary); |
| 52 | + box-shadow: none; |
| 53 | + transform: none; |
| 54 | + } |
| 55 | + |
| 56 | + &__icon { |
| 57 | + display: flex; |
| 58 | + } |
| 59 | + |
| 60 | + // iOS hint popover — opens *upward* from the footer control (in the |
| 61 | + // masthead it dropped down), so it never pushes past the page bottom. |
| 62 | + // |
| 63 | + // `width: max-content` is load-bearing: an absolutely-positioned box |
| 64 | + // shrink-to-fits inside its containing block, so without it the popover |
| 65 | + // inherited the ~113px width of its anchor and wrapped one or two words |
| 66 | + // per line. It grows leftward from the anchor's inline-end edge, capped |
| 67 | + // against the viewport rather than the anchor. |
| 68 | + &__hint { |
| 69 | + position: absolute; |
| 70 | + bottom: calc(100% + var(--space-2)); |
| 71 | + inset-inline-end: 0; |
| 72 | + z-index: var(--z-tooltip); |
| 73 | + width: max-content; |
| 74 | + max-width: min(20rem, calc(100vw - var(--space-8))); |
| 75 | + padding: var(--space-3) var(--space-4); |
| 76 | + background: var(--surface); |
| 77 | + color: var(--ink); |
| 78 | + border: 1px solid var(--border); |
| 79 | + border-radius: var(--radius-md); |
| 80 | + box-shadow: var(--shadow-md); |
| 81 | + font-family: var(--font-body); |
| 82 | + font-size: var(--text-sm); |
| 83 | + line-height: var(--line-height-normal); |
| 84 | + text-align: start; |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +// Anchor for the absolutely-positioned iOS hint (the hint is inserted as a |
| 89 | +// sibling of the button inside this wrapper). |
| 90 | +.main-footer__install { |
| 91 | + position: relative; |
| 92 | + display: flex; |
| 93 | + justify-content: center; |
| 94 | + flex-shrink: 0; |
| 95 | + // Below $lg the bottom bar is a centred column: stretch the wrapper across |
| 96 | + // the row so the hint, anchored to its inline-end, has the full row width |
| 97 | + // to open leftward into and can't run off the screen edge. |
| 98 | + align-self: stretch; |
| 99 | + |
| 100 | + // Desktop: sit with the social cluster at the end of the bottom bar |
| 101 | + // (copyright keeps order 0 and stays first). |
| 102 | + @media (min-width: $lg) { |
| 103 | + order: 2; |
| 104 | + align-self: auto; |
| 105 | + } |
| 106 | +} |
0 commit comments