| 1 | /* Home's own Calma rules: the team home's header on the sky, and its |
| 2 | grid of apps. The bar, the menus and the door are estilo's (chrome.css), |
| 3 | the rest estilo's theme (theme.css) and rastrillo's tokens.css. */ |
| 4 | |
| 5 | /* tokens.css reserves the scrollbar's gutter on every page, so short and |
| 6 | long pages are the same width. Under the sky that reserved strip is a |
| 7 | visible pale band down the trailing edge, so Home takes the documented |
| 8 | opt-out; its pages have no layout that a scrollbar's arrival could jolt. */ |
| 9 | :root { |
| 10 | --rst-scrollbar-gutter: auto; |
| 11 | } |
| 12 | |
| 13 | /* The door (sign-in, id.*'s account pages, signed out) is estilo's: |
| 14 | chrome.css draws the card on the sky under the bar. */ |
| 15 | |
| 16 | /* Your home: the team home's header on the sky, then a grid of every |
| 17 | app, each one tile. An app you can open is a link across its whole |
| 18 | tile; one you cannot yet is shown quieter, with its status saying why. |
| 19 | |
| 20 | The header spans the page under the bar, as the door does, so the sky |
| 21 | is never boxed in; its padding puts the words back on the page's |
| 22 | column. The sky fades in and out inside the band (sky.css's mask), so |
| 23 | neither edge cuts it. */ |
| 24 | :root:has([home-hub-head]) { overflow-x: clip; } |
| 25 | [home-hub-head] { |
| 26 | box-sizing: border-box; |
| 27 | margin: calc(-1 * var(--rst-sp-5)) calc(50% - 50vw) var(--rst-sp-5); |
| 28 | padding: 64px calc(50vw - 50%) 48px; |
| 29 | min-block-size: 240px; |
| 30 | /* A sky's layers overhang its box by 12% above and below and fade out |
| 31 | from 58% to 92% (sky.css): 260px placed 50px up has faded out by |
| 32 | about 220px, inside the band's 240. */ |
| 33 | --estilo-sky-top: -50px; |
| 34 | --estilo-sky-height: 260px; |
| 35 | } |
| 36 | [home-hub-head] h1 { |
| 37 | margin: 0 0 8px; |
| 38 | font-size: clamp(1.9rem, 4vw, 2.5rem); |
| 39 | letter-spacing: -0.03em; |
| 40 | } |
| 41 | [home-hub-lede] { |
| 42 | margin: 0; |
| 43 | color: var(--rst-text-muted); |
| 44 | } |
| 45 | [home-apps] { |
| 46 | display: grid; |
| 47 | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| 48 | gap: 12px; |
| 49 | margin: 0 0 48px; |
| 50 | padding: 0; |
| 51 | list-style: none; |
| 52 | } |
| 53 | [home-app] { |
| 54 | box-sizing: border-box; |
| 55 | height: 100%; |
| 56 | display: flex; |
| 57 | flex-direction: column; |
| 58 | align-items: center; |
| 59 | gap: 8px; |
| 60 | padding: 22px 12px 18px; |
| 61 | border-radius: 18px; |
| 62 | background: var(--rst-surface); |
| 63 | box-shadow: 0 0 0 1px var(--rst-line); |
| 64 | color: var(--rst-text); |
| 65 | text-align: center; |
| 66 | text-decoration: none; |
| 67 | } |
| 68 | a[home-app]:hover { box-shadow: 0 0 0 1px var(--rst-line), var(--rst-shadow-lift); } |
| 69 | [home-app] img { margin-bottom: 4px; filter: drop-shadow(0 5px 9px rgba(20, 24, 33, 0.16)); } |
| 70 | [home-app] b { font-weight: 620; } |
| 71 | [home-app] small { color: var(--rst-text-faint); font-size: 0.8rem; } |
| 72 | div[home-app] img { filter: saturate(0.6); opacity: 0.8; } |
| 73 | |
| 74 | /* In dark, the sky runs brighter (estilo's gain) and muted text on its |
| 75 | brightest band falls under 4.5:1 (review, discussion 75). So the team |
| 76 | home's sky is quieter here, and text that sits on it is full-strength. |
| 77 | The door's text sits on its card, so the door keeps estilo's sky. */ |
| 78 | @media (prefers-color-scheme: dark) { |
| 79 | :root:not([data-theme="light"]) [home-hub-head] { --estilo-sky-strength: 0.32; } |
| 80 | :root:not([data-theme="light"]) [home-hub-lede] { color: var(--rst-text); } |
| 81 | } |
| 82 | :root[data-theme="dark"] [home-hub-head] { --estilo-sky-strength: 0.32; } |
| 83 | :root[data-theme="dark"] [home-hub-lede] { color: var(--rst-text); } |
| 84 | |
| 85 | /* The team chooser: one button per team, stacked. */ |
| 86 | [home-teams] { display: grid; justify-items: start; gap: var(--rst-sp-2); } |
| 87 | |
amadan