/* ========================================================================== AURALAR — Wall mode, in three styles. All three are the same newspaper: the same paper, the same serif, the same masthead across the top and the same standings ruled off at the foot. What changes is how the day itself is set. BROADSHEET three columns — Diary, Standing Orders, Outstanding. The columns are weighted by what is in them, so a day with no events does not leave a third of the page empty. ALMANAC one sheet, ruled into cells. The number of columns and rows is computed from the item count and the shape of the screen, and the last row widens to fill, so the grid is never ragged. BULLETIN a diary band across the top, sized to exactly the rows its events need — and removed entirely when there are none — with everything left over given to the jobs. The skin is set by data-skin on ; every rule below that differs is scoped to it. Anything not scoped is shared by all three on purpose. ========================================================================== */ .wall { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: calc(18px + var(--safe-t)) calc(26px + var(--safe-r)) calc(12px + var(--safe-b)) calc(26px + var(--safe-l)); overflow: hidden; /* Type scale for the item cells, recomputed by the layout code. The skins that tile (Almanac, Bulletin) set this from the height of one row; the Broadsheet leaves it at 1 and uses its own density classes. */ --s: 1; } /* ========================================================================== The masthead ========================================================================== */ .wmast { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: baseline; column-gap: 20px; padding-bottom: 9px; border-bottom: 1px solid var(--ink); } .wname { font-size: 25px; font-weight: 400; font-variant: small-caps; letter-spacing: .05em; line-height: 1; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wdate { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wclock { font-size: 34px; font-weight: 700; line-height: .86; font-variant-numeric: tabular-nums; align-self: center; } /* The tally. A ring is the one non-print element in the whole app, and it earns its place: it is the only thing on the wall that answers "are we nearly there" without reading a word. */ .wring { position: relative; width: 56px; height: 56px; align-self: center; flex: none; } .wring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .wring .track { fill: none; stroke: var(--line); stroke-width: 3; } .wring .arc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: butt; transition: stroke-dashoffset .62s var(--ease), stroke .3s var(--ease); } .wring.is-all .arc { stroke: var(--good); } .wring .lbl { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; } .wring .lbl small { font-family: var(--sans); font-size: 8.5px; letter-spacing: .1em; color: var(--ink-3); margin-top: 2px; } .wring.is-hit { animation: ring-hit .7s var(--ease); } @keyframes ring-hit { 30% { transform: scale(1.13); } 60% { transform: scale(.98); } } .wtools { display: flex; gap: 6px; align-self: center; } .wtools .btn { min-height: 46px; min-width: 46px; padding: 0 12px; } .wtools .count { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: 5px; } /* ========================================================================== The standings ========================================================================== */ .wfoot { border-top: 3px double var(--ink); padding-top: 8px; display: flex; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; } .wfoot .kicker { flex: none; } .wpeople { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; min-width: 0; } .wperson { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; transition: transform .3s var(--ease); } .wperson .nm { border-bottom: 2px solid var(--dot, var(--ink-3)); padding-bottom: 1px; } .wperson .cr { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .wperson.is-bumped { transform: translateY(-3px) scale(1.06); } .wrest { margin-left: auto; font-style: italic; font-size: 15px; color: var(--ink-2); text-align: right; } /* ========================================================================== Shared item behaviour — every job in every skin ========================================================================== */ .j { position: relative; cursor: pointer; } .j:active { transform: scale(.992); } .j.is-done .t { text-decoration: line-through; color: var(--ink-3); } .j.is-done .p { color: var(--good); } .j.is-glow { animation: settle .62s var(--ease); } @keyframes settle { 0% { background: color-mix(in srgb, var(--good) 34%, transparent); } 100% { background: inherit; } } .j.is-rejected { animation: shake-x .42s var(--ease); } @keyframes shake-x { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: translateX(0); } } /* The "Settled" stamp, printed at a slight angle like a rubber stamp on a docket. Only ever appears on something already done. */ .stamp { display: inline-block; border: 1.5px solid var(--good); color: var(--good); font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 2px 5px; transform: rotate(-4deg); flex: none; } .late-tag { color: var(--bad); font-family: var(--sans); font-size: calc(9px * var(--s)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-style: normal; } .wwho { font-weight: 700; font-style: normal; color: var(--dot, var(--ink)); } .wmuted { color: var(--ink-3); } /* Four seconds to take it back. */ .wundo { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel-3); border-top: 1px solid var(--line-2); font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); animation: undo-in .2s var(--ease); z-index: 3; } .wundo .btn { min-height: 30px; padding: 0 10px; font-size: 11px; letter-spacing: .12em; } .wundo-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ink-3); animation: undo-drain 4s linear forwards; } @keyframes undo-in { from { opacity: 0; transform: translateY(6px); } } @keyframes undo-drain { from { width: 100%; } to { width: 0; } } /* The add-row that closes a section which already has something in it. */ .wadd { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 40px; margin-top: 6px; border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .14s var(--ease), border-color .14s var(--ease); } .wadd:hover { color: var(--ink); border-color: var(--ink-3); } /* An empty section says so in words, in the voice of the rest of the page. */ .wempty { display: grid; gap: 5px; justify-items: center; align-content: center; text-align: center; padding: 22px 10px; color: var(--ink-3); min-height: 0; } .wempty .hd { font-size: 20px; color: var(--ink-2); font-variant: small-caps; letter-spacing: .04em; } .wempty .sb { font-size: 13.5px; font-style: italic; max-width: 26ch; line-height: 1.45; } .wempty .mark { color: var(--line-2); margin-bottom: 2px; } .wempty.is-clear .mark { color: var(--good); } /* ========================================================================== BROADSHEET — three columns, weighted by what is in them ========================================================================== */ .wcols { display: grid; grid-template-columns: var(--cols, repeat(3, 1fr)); min-height: 0; } .wcol { padding: 0 22px; border-right: 1px solid var(--line); min-height: 0; min-width: 0; display: flex; flex-direction: column; } .wcol:first-child { padding-left: 0; } .wcol:last-child { padding-right: 0; border-right: 0; } .wcol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px; flex: none; } .wcol-head .cnt { font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-3); font-variant-numeric: tabular-nums; } .warts { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; /* A flex column so an empty state can centre itself in the space, and so a quiet column can hand its spare height to the articles instead of leaving two thirds of the page blank. */ display: flex; flex-direction: column; } .warts > .wart { flex: none; } .warts > .wempty { flex: 1 1 auto; } .warts > .wadd { flex: none; margin-top: auto; } .warts::-webkit-scrollbar { width: 4px; } .warts::-webkit-scrollbar-thumb { background: var(--line-2); } .wart { position: relative; padding: 16px 0; border-bottom: 1px dotted var(--line); } .wart:last-of-type { border-bottom: 0; } .wart .p { float: right; margin: 3px 0 6px 14px; font-size: 31px; line-height: .88; font-variant-numeric: tabular-nums; text-align: center; } .wart .p small { display: block; font-family: var(--sans); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; } .wart .t { font-size: 25px; line-height: 1.14; font-weight: 400; letter-spacing: -.008em; } .wart .m { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; margin-top: 5px; font-size: 13px; font-style: italic; color: var(--ink-2); } .wart .at { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* A busy column tightens before it scrolls; a quiet one spreads out. Three tiers rather than two, because the step from "a normal day" to "the Monday of a school term" is the whole reason this layout needed rethinking: twelve chores have to fit on the page, not merely be reachable by scrolling a wall panel nobody is going to scroll. */ .wcol.dense .wart { padding: 10px 0; } .wcol.dense .wart .t { font-size: 20px; } .wcol.dense .wart .p { font-size: 24px; margin-left: 10px; } .wcol.dense .wart .m { font-size: 12px; margin-top: 3px; } .wcol.packed .wart { padding: 6px 0; } .wcol.packed .wart .t { font-size: 17px; line-height: 1.1; } .wcol.packed .wart .p { font-size: 19px; margin: 0 0 2px 8px; } .wcol.packed .wart .p small { display: none; } .wcol.packed .wart .m { font-size: 11px; margin-top: 1px; } .wcol.packed .wadd { min-height: 30px; } /* Roomy: the articles share the spare height and compose themselves inside it, the numeral beside the headline rather than floated above the byline. With only one or two of them, growing is still right — it is what stops the column ending halfway up the page — but centring is not: a single headline floating in the middle of a tall box reads as a mistake. Sparse keeps the same composition and sets it at the top of the measure. */ .wcol.airy .wart { flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 18px; padding: 18px 0; } .wcol.airy .wart .t { grid-column: 1; font-size: 28px; } .wcol.airy .wart .m { grid-column: 1; } /* One or two items: natural height at the top of the measure, so the dotted rule under an article stays where the article ends rather than floating in the middle of the empty page. The add-row keeps the foot of the column. */ .wcol.sparse .wart { flex: none; align-content: start; padding: 18px 0; } .wcol.airy .wart .p { float: none; grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; } .wart.is-late { padding-left: 11px; border-left: 3px solid var(--bad); } .wart.is-done .p { color: var(--good); } /* ========================================================================== ALMANAC — one ruled sheet, cells computed to fill it ========================================================================== */ .wsheet { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); min-height: 0; overflow: hidden; } .wcell { position: relative; background: var(--panel); padding: calc(12px * var(--s)) calc(13px * var(--s)); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .wcell .kind { font-family: var(--sans); font-size: calc(8px * var(--s)); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); flex: none; } .wcell .t { font-size: calc(19px * var(--s)); line-height: 1.1; margin-top: calc(6px * var(--s)); overflow: hidden; } .wcell .m { margin-top: auto; padding-top: calc(8px * var(--s)); font-size: calc(11px * var(--s)); font-style: italic; color: var(--ink-2); display: flex; gap: 2px 6px; flex-wrap: wrap; align-items: baseline; } .wcell .at { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: calc(14px * var(--s)); } .wcell .p { position: absolute; top: calc(9px * var(--s)); right: calc(12px * var(--s)); font-size: calc(24px * var(--s)); line-height: .9; font-variant-numeric: tabular-nums; text-align: center; } .wcell .p small { display: block; font-family: var(--sans); font-size: calc(7px * var(--s)); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; } /* The diary reads as a slightly warmer stock, on purpose. */ .wcell.is-event { background: var(--panel-2); } .wcell.is-event .t { font-style: italic; } .wcell.is-late::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bad); } .wcell.is-done { background: var(--panel-2); } .wsheet .wempty { background: var(--panel); } /* ========================================================================== BULLETIN — a diary band, then everything else ========================================================================== */ .wbands { display: flex; flex-direction: column; gap: 15px; min-height: 0; } .wband { display: flex; flex-direction: column; min-height: 0; } .wband-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--ink); padding-bottom: 5px; margin-bottom: 11px; flex: none; } .wband-head .n { margin-left: auto; font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; } .wband.diary { flex: none; } .wdrow { display: grid; gap: 12px; } .wev { border-left: 2px solid var(--ink); padding: 7px 0 7px 12px; min-width: 0; cursor: pointer; } .wdrow.few .wev { padding: 12px 0 12px 15px; border-left-width: 3px; } .wdrow.few .wev .at { font-size: 20px; } .wdrow.few .wev .t { font-size: 26px; } .wev .at { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .wev .at.is-allday { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .wev .t { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.12; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wev .m { font-size: 12px; font-style: italic; color: var(--ink-2); margin-top: 2px; } .wband.jobs { flex: 1 1 auto; min-height: 0; } .wjgrid { display: grid; gap: 10px; flex: 1 1 auto; min-height: 0; } .wjob { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dot, var(--line-2)); padding: calc(11px * var(--s)) calc(13px * var(--s)); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .wjob .t { font-size: calc(18px * var(--s)); line-height: 1.12; letter-spacing: -.005em; padding-right: calc(42px * var(--s)); } .wjob .m { margin-top: auto; padding-top: calc(7px * var(--s)); font-size: calc(11px * var(--s)); font-style: italic; color: var(--ink-2); display: flex; gap: 2px 6px; flex-wrap: wrap; align-items: baseline; } .wjob .p { position: absolute; top: calc(9px * var(--s)); right: calc(12px * var(--s)); font-size: calc(22px * var(--s)); line-height: .9; font-variant-numeric: tabular-nums; text-align: center; } .wjob .p small { display: block; font-family: var(--sans); font-size: calc(7px * var(--s)); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; } /* On a quiet day the tiles get very tall. Pinning the byline to the floor leaves a dead middle, but centring it strands the numeral in the corner on its own — so with room the tile becomes a small composition instead. */ .wjgrid.roomy .wjob { display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: calc(16px * var(--s)); row-gap: calc(7px * var(--s)); } .wjgrid.roomy .wjob .t { order: 1; padding-right: 0; font-size: calc(21px * var(--s)); } .wjgrid.roomy .wjob .p { order: 2; position: static; align-self: start; text-align: right; } .wjgrid.roomy .wjob .m { order: 3; grid-column: 1 / -1; margin-top: 0; padding-top: 0; } .wjob.is-late { border-left-color: var(--bad); } .wjob.is-done { background: transparent; border-left-color: var(--good); } /* ========================================================================== Confetti (shared with the reward module) ========================================================================== */ .confetti { position: fixed; width: 7px; height: 9px; pointer-events: none; z-index: 150; opacity: 1; transition: transform .9s cubic-bezier(.15,.6,.35,1), opacity .9s linear; } /* ========================================================================== Portrait and phones Three columns at 360px wide is four words a line. Below this the page stops pretending to be a broadsheet and becomes a single column that scrolls. ========================================================================== */ @media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) { /* Three columns at 360px wide is four words a line, so the sections stack. The masthead and the standings stay put and the stack scrolls between them — the middle row of the page keeps its fixed box, and whichever layout is inside it becomes the scroller. Letting the whole page grow instead is what squeezed each section into a share of the screen and painted one over the next. */ .wall { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); gap: 12px; } .wmast { grid-template-columns: 1fr auto auto; grid-template-areas: "name clock ring" "date tools tools"; row-gap: 8px; } .wname { grid-area: name; font-size: 21px; } .wdate { grid-area: date; } .wclock { grid-area: clock; font-size: 27px; } .wring { grid-area: ring; width: 46px; height: 46px; } .wring .lbl { font-size: 16px; } .wtools { grid-area: tools; justify-self: end; } /* --- Broadsheet, stacked --- */ .wcols { grid-template-columns: 1fr !important; align-content: start; overflow-y: auto; overscroll-behavior: contain; } .wcol { padding: 0; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; min-height: auto; } .wcol:last-child { border-bottom: 0; margin-bottom: 0; } /* The list is no longer a box that scrolls inside a column, so it must stop being shrinkable: as a flex item with min-height 0 it is squeezed to a fraction of its content and the rest paints over the next section. */ .warts { overflow: visible; flex: none; min-height: auto; } .wart .t { font-size: 22px; } /* Growing to share a column's height is a landscape idea; stacked, an article is simply as tall as it is. */ .wcol.airy .wart { flex: none; align-content: start; } /* --- Almanac, stacked --- */ .wsheet { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(96px, auto); align-content: start; overflow-y: auto; overscroll-behavior: contain; } .wsheet .wcell { grid-column: auto !important; } /* The tiling skins scale their type to the height of a computed row. Stacked, rows are content-sized instead, so a scale worked out for a tall landscape row would set 30px type in an 84px tile and clip the byline off the bottom. Back to life size, and let a tile be as tall as its content needs. */ .wsheet, .wjgrid { --s: 1 !important; } .wcell, .wjob { overflow: visible; } /* The sheet paints the rules between its cells with its own background, so stretched over a short day it shows as a large slab of rule colour. Sized to its content instead, capped at the space available, it stays a sheet — and still scrolls when the day is long. */ .wsheet { align-self: start; max-height: 100%; } /* --- Bulletin, stacked --- */ .wbands { overflow-y: auto; overscroll-behavior: contain; } .wdrow { grid-template-columns: 1fr !important; } .wjgrid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(84px, auto); align-content: start; } .wjgrid .wjob { grid-column: auto !important; } .wfoot { gap: 8px 16px; } .wrest { margin-left: 0; text-align: left; flex-basis: 100%; } } /* A tablet held upright is still a wide screen — one column of tiles across 780px is a lot of white space on either side of a four-word title. */ @media (orientation: portrait) and (min-width: 700px) { .wsheet, .wjgrid { grid-template-columns: repeat(2, 1fr) !important; } .wdrow { grid-template-columns: repeat(2, 1fr) !important; } } /* With two columns, an odd number of cells leaves a hole at the end of the sheet. The last one takes the whole final row instead — the same rule the landscape layout applies with its computed column count. */ @media (orientation: portrait) and (min-width: 700px) { .wsheet .wcell:last-child:nth-child(odd), .wjgrid .wjob:last-child:nth-child(odd) { grid-column: span 2 !important; } } /* ========================================================================== A phone in the hand, not a panel on a wall -------------------------------------------------------------------------- The wall's type is sized to be read across a kitchen. Held at arm's length it is shouting: a 25px title on a 390px screen is four words a line and a chore list that needs two scrolls. Everything here is the same layout, one step quieter. ========================================================================== */ @media (max-width: 480px) { .wall { padding-top: calc(10px + var(--safe-t)); gap: 10px; } .wmast { row-gap: 6px; } .wname { font-size: 18px; } .wclock { font-size: 23px; } .wdate { font-size: 10px; letter-spacing: .14em; } .wring { width: 40px; height: 40px; } .wring .lbl { font-size: 14px; } .wtools .btn-icon { min-width: 46px; min-height: 46px; padding: 0 10px; } .wcol-head { margin-bottom: 6px; } .wart { padding: 10px 0; } .wart .t, .wcell .t, .wjob .t { font-size: 18px; line-height: 1.2; } .wart .m, .wcell .m, .wjob .m { font-size: 12px; } .wart .p, .wcell .p, .wjob .p { font-size: 22px; } .wart .p small, .wcell .p small, .wjob .p small { font-size: 8px; } /* An empty section says its piece in one line rather than a quarter of the screen. */ .wempty { padding: 14px 0; gap: 2px; } .wempty .mark { display: none; } .wempty .hd { font-size: 15px; } .wempty .sb { font-size: 12.5px; max-width: none; } .wfoot { padding-top: 8px; } .wperson { font-size: 13px; } .wrest { font-size: 11.5px; } }