@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/weather/style.css

@@ -1,258 +1,140 @@
-/* Every selector starts at the instance and goes down from it (a step at a time, >, but for the
-   pictures' parts), so that nothing here reaches the rest of the page. The face fills its card on a
-   custom page (the board draws the frame), in the kit's card tokens: its head (the chip, the city, when it
-   was fetched, muted, its end clear of the card's grip); the sky's picture, the temperature large, the
-   sky's words and today's range; how it feels, the humidity and the wind, muted, a dot between them; and
-   the days ahead, each its lowest and highest at the ends of a bar in the accent drawn against all the
-   days shown. As much as the card holds: the instance is a container of both its sides (a 2 x 2 card
-   shows the temperature and, under it, the sky's words and its range on one muted line, a 4 x 2 one its
-   range and the more line too, a 4 x 4 one the days ahead), the weather now in the middle of the room under
-   the head, but where the days ahead show: then it stands under the head, the days right after the more
-   line, their rows taller where the card has the room (to 44px), the room left over at the bottom. The
-   temperature is the cards' hero size. What it says while there is nothing to show is the cards' empty face: a quiet
-   picture (a place's pin) in a soft disc over a muted line, where to set the city under it, in the middle. The sun and
-   the rain have colors of their own, light and dark. */
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The pack's design B, in the kit's card tokens, laid out by the card's cells
+   (the face's data-layout): "wide" (4 × 2) the head (the chip, a pin, the city, when, faint), the sky's
+   picture (50px) beside the temperature (46px, the hero) and the sky's words over today's lowest and
+   highest, and at the bottom how it feels, the humidity and the wind, each after a small picture; "narrow"
+   (2 × 2) the picture (40px) and the temperature (40px) at the bottom and one line under them; "tall" (4 ×
+   4) the picture larger (60px) and, at the bottom over a hairline, the next five days, each a row of its
+   weekday, its sky (22px), its lowest (faint), a bar of its span on the scale of all of them (the cold
+   blue to the warm orange) and its highest (600). The pictures have their own colors (the sun's orange, a
+   cloud's gray, the rain's blue), in light and dark. A state with nothing to show is the cards' empty face
+   under the head. Light and dark. */
 [data-doc-component="gallery/weather"] {
-  container-type: size;
-  --gallery-weather-sun: light-dark(#e09a2b, #f2b950);
-  --gallery-weather-rain: light-dark(#3a7bd5, #7aa9ec);
-  --gallery-weather-cloud: light-dark(#a3abb8, #7c8594);
-  > .gallery-weather-face {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gallery-face-gap);
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-    overflow: hidden;
-    color: var(--gallery-text);
-  }
-  > .gallery-weather-face > p { margin: 0; }
+  --gallery-weather-sun: light-dark(#f3a935, #f4b045);
+  --gallery-weather-cloud: light-dark(#dde2e9, #68717e);
+  --gallery-weather-cloud-2: light-dark(#c4cbd5, #4a515b);
+  --gallery-weather-rain: light-dark(#5e90d8, #70a1e2);
+  --gallery-weather-cool: light-dark(#88b2e3, #6b9bd7);
+  --gallery-weather-hot: light-dark(#f3b45a, #efa94a);
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-weather-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
   > .gallery-weather-face > .gallery-weather-head {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: none;
+    height: 20px;
     min-width: 0;
+    margin: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
-    font-size: var(--gallery-title-size);
-    line-height: var(--gallery-title-line);
   }
   > .gallery-weather-face > .gallery-weather-head > .gallery-weather-chip {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: center;
     width: var(--gallery-chip-size);
     height: var(--gallery-chip-size);
     border-radius: var(--gallery-chip-radius);
-    background: var(--gallery-accent-soft);
-    color: var(--gallery-accent);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
   }
-  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
   > .gallery-weather-face > .gallery-weather-head > .gallery-weather-city {
-    flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
     font-weight: 600;
-    color: var(--gallery-text-strong);
-  }
-  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at {
-    flex: none;
-    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
-    font-size: var(--gallery-meta-size);
-    color: var(--doc-muted);
-    white-space: nowrap;
-  }
-  > .gallery-weather-face > .gallery-weather-now {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    min-width: 0;
-    margin-top: auto;
-  }
-  /* The weather now and its more line, together in the middle of the room under the head. */
-  > .gallery-weather-face > .gallery-weather-more { margin-bottom: auto; }
-  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-picture {
-    flex: none;
-    width: clamp(40px, 13cqi, 52px);
-    height: clamp(40px, 13cqi, 52px);
+    color: var(--gallery-text);
   }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at > .gallery-weather-stale { display: inline-flex; color: var(--gallery-warm); }
+  > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at > .gallery-weather-stale > svg { width: 12px; height: 12px; stroke-width: 2; }
+  > .gallery-weather-face > .gallery-weather-now { display: flex; align-items: center; gap: 10px; flex: none; margin-top: 10px; }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-picture { flex: none; width: 50px; height: 50px; overflow: visible; }
   > .gallery-weather-face > .gallery-weather-now > .gallery-weather-temperature {
-    flex: none;
-    font-size: var(--gallery-hero-size);
+    font-size: 46px;
     line-height: 1;
-    font-weight: var(--gallery-numeral-weight);
-    letter-spacing: var(--gallery-numeral-tracking);
+    font-weight: 500;
+    letter-spacing: -.04em;
+    font-variant-numeric: lining-nums;
     color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
   }
-  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words {
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words { display: flex; flex-direction: column; gap: 2px; margin-left: 6px; min-width: 0; }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-sky { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--gallery-text); white-space: nowrap; }
+  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range { font-size: 12.5px; line-height: 16px; color: var(--gallery-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  > .gallery-weather-face > .gallery-weather-line { display: none; }
+  > .gallery-weather-face > .gallery-weather-more { display: flex; gap: 14px; flex: none; margin: auto 0 0; font-size: 12px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; overflow: hidden; }
+  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece { display: inline-flex; align-items: center; gap: 4px; }
+  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece > svg { flex: none; width: 13px; height: 13px; color: var(--gallery-faint); }
+  > .gallery-weather-face > .gallery-weather-days { display: none; }
+  /* The pictures' own colors. */
+  > .gallery-weather-face svg .gallery-weather-sun { fill: var(--gallery-weather-sun); stroke: var(--gallery-weather-sun); }
+  > .gallery-weather-face svg .gallery-weather-sun > circle { stroke: none; }
+  > .gallery-weather-face svg .gallery-weather-moon { fill: var(--gallery-weather-sun); }
+  > .gallery-weather-face svg .gallery-weather-cloud { fill: var(--gallery-weather-cloud); }
+  > .gallery-weather-face svg .gallery-weather-cloud-2 { fill: var(--gallery-weather-cloud-2); }
+  > .gallery-weather-face svg :is(.gallery-weather-rain, .gallery-weather-mist) { stroke: var(--gallery-weather-rain); }
+  > .gallery-weather-face svg .gallery-weather-mist { stroke: var(--gallery-weather-cloud-2); }
+  > .gallery-weather-face svg .gallery-weather-snow { fill: var(--gallery-weather-cool); }
+  > .gallery-weather-face svg .gallery-weather-bolt { fill: var(--gallery-weather-sun); }
+
+  /* A narrow card: the picture and the temperature at the bottom, one line under them. */
+  /* Its head the city alone, but for the sign of an answer kept from before the network went (its time in its title), so that yesterday's weather never reads as now's. */
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-head > .gallery-weather-at:not(:has(> .gallery-weather-stale)) { display: none; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-head > .gallery-weather-at > .gallery-weather-when { display: none; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-now { margin-top: auto; gap: 4px; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-now > .gallery-weather-picture { width: 40px; height: 40px; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-now > .gallery-weather-temperature { font-size: 40px; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-now > .gallery-weather-words,
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-more { display: none; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-line { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-line > b { font-weight: 600; color: var(--gallery-text); }
+  > .gallery-weather-face[data-layout="narrow"] > .gallery-weather-line > .gallery-weather-dot { margin: 0 5px; color: var(--gallery-faintest); }
+  /* A tall card: the five days ahead at the bottom. */
+  > .gallery-weather-face[data-layout="tall"] > .gallery-weather-now { margin-top: 14px; }
+  > .gallery-weather-face[data-layout="tall"] > .gallery-weather-now > .gallery-weather-picture { width: 60px; height: 60px; }
+  > .gallery-weather-face[data-layout="tall"] > .gallery-weather-more { margin-top: 12px; }
+  > .gallery-weather-face[data-layout="tall"] > .gallery-weather-days {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-    font-size: 14px;
-    line-height: 1.35;
-  }
-  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > * {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-sky { font-weight: 500; }
-  > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range {
-    font-size: 13px;
-    color: var(--doc-muted);
-    font-variant-numeric: tabular-nums;
-  }
-  /* How it feels, the humidity, the wind: muted, a dot between them, a piece never broken. */
-  > .gallery-weather-face > .gallery-weather-more {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 2px 0;
-    font-size: var(--gallery-meta-size);
-    line-height: 1.5;
-    color: var(--doc-muted);
-    font-variant-numeric: tabular-nums;
-  }
-  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece { white-space: nowrap; }
-  > .gallery-weather-face > .gallery-weather-more > .gallery-weather-piece + .gallery-weather-piece::before {
-    content: "";
-    display: inline-block;
-    width: 3px;
-    height: 3px;
-    margin: 0 8px;
-    border-radius: 50%;
-    background: currentColor;
-    opacity: .6;
-    vertical-align: middle;
-  }
-  > .gallery-weather-face > .gallery-weather-days {
-    display: none;
-    margin: 0;
-    padding: 8px 0 0;
+    margin: auto 0 0;
+    padding: 6px 0 0;
+    border-top: 1px solid var(--gallery-hair);
     list-style: none;
-    border-top: 1px solid var(--doc-grid);
   }
   > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day {
     display: grid;
-    grid-template-columns: minmax(2.6em, 1fr) 22px minmax(0, 3fr);
-    align-items: center;
-    gap: 10px;
-    padding: 3px 0;
-    font-size: 13px;
-    line-height: 1.4;
-  }
-  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-picture { width: 20px; height: 20px; }
-  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range {
-    display: grid;
-    grid-template-columns: 2.6em minmax(0, 1fr) 2.6em;
+    grid-template-columns: 34px 24px 30px 1fr 30px;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
+    height: 26px;
+    font-size: 12.5px;
     font-variant-numeric: tabular-nums;
   }
-  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-low { color: var(--doc-muted); text-align: end; }
-  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-bar {
-    position: relative;
-    height: 4px;
-    border-radius: 2px;
-    background: var(--gallery-track);
-  }
-  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-day-range > .gallery-weather-bar > .gallery-weather-fill {
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-weekday { color: var(--gallery-text); }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-picture { width: 22px; height: 22px; overflow: visible; }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-low { color: var(--gallery-faint); text-align: right; }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-high { color: var(--gallery-text); font-weight: 600; }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-bar { position: relative; height: 5px; border-radius: 3px; background: var(--gallery-fill); }
+  > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day > .gallery-weather-bar > .gallery-weather-fill {
     position: absolute;
     top: 0;
     bottom: 0;
-    left: calc(var(--from, 0) * 100%);
-    right: calc((1 - var(--to, 1)) * 100%);
-    min-width: 4px;
-    border-radius: 2px;
-    background: var(--gallery-accent);
-  }
-  /* What it says while there is nothing to show: the cards' empty face (as todos' and recent's), a quiet
-     picture over a muted line, where to set the city under it, the two in the middle. */
-  > .gallery-weather-face > .gallery-weather-note {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    margin-top: auto;
-    padding: 0 8px;
-    font-size: 13px;
-    line-height: 1.45;
-    color: var(--doc-muted);
-    text-align: center;
-  }
-  > .gallery-weather-face > .gallery-weather-note::before {
-    content: "";
-    flex: none;
-    width: 44px;
-    height: 44px;
-    margin-bottom: 2px;
-    background: currentColor;
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3Cpath d='M17.66 16.66 13.41 20.9a2 2 0 0 1-2.83 0l-4.24-4.24a8 8 0 1 1 11.32 0z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0 3 3 0 0 0-6 0'/%3E%3Cpath d='M17.66 16.66 13.41 20.9a2 2 0 0 1-2.83 0l-4.24-4.24a8 8 0 1 1 11.32 0z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  > .gallery-weather-face > .gallery-weather-note:last-child { margin-bottom: auto; }
-  > .gallery-weather-face > .gallery-weather-hint {
-    margin: -4px 0 auto;
-    font-size: var(--gallery-meta-size);
-    color: var(--doc-muted);
-    text-align: center;
-    opacity: .8;
-  }
-  .gallery-weather-picture { fill: var(--gallery-weather-cloud); }
-  .gallery-weather-picture .gallery-weather-sun { fill: var(--gallery-weather-sun); stroke: var(--gallery-weather-sun); }
-  .gallery-weather-picture g.gallery-weather-sun { fill: none; }
-  .gallery-weather-picture .gallery-weather-moon { fill: var(--gallery-weather-sun); }
-  .gallery-weather-picture .gallery-weather-rain,
-  .gallery-weather-picture .gallery-weather-cloud-line { stroke: var(--gallery-weather-rain); }
-  .gallery-weather-picture .gallery-weather-cloud-line { stroke: var(--gallery-weather-cloud); }
-  .gallery-weather-picture .gallery-weather-snow { fill: var(--gallery-weather-rain); }
-  .gallery-weather-picture .gallery-weather-bolt { fill: var(--gallery-weather-sun); }
-}
-/* A narrow card (2 wide): the picture at the left of the temperature and, under the temperature (from its
-   left, not the picture's), the sky's words and the range on one muted line, a dot between; no more line;
-   narrower still, no range. */
-@container (max-width: 260px) {
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { display: none; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-areas: "picture temperature" "picture words";
-    align-items: center;
-    gap: 2px 10px;
-    margin-bottom: auto;
-  }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-picture { grid-area: picture; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-temperature { grid-area: temperature; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words { grid-area: words; flex-direction: row; gap: 0; font-size: 13px; color: var(--doc-muted); }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-sky { font-weight: 400; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range::before { content: "·"; margin: 0 5px; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-head > .gallery-weather-at { display: none; }
-}
-@container (max-width: 200px) {
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now > .gallery-weather-words > .gallery-weather-range { display: none; }
-}
-/* A low card: no more line. */
-@container (max-height: 104px) {
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { display: none; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now { margin-bottom: auto; }
-}
-/* A tall card (4 high, or 2 high on a wide window but for its last row's room): the weather now under the
-   head, the days ahead right after its more line, their rows sharing the room left (each 44px at the most),
-   what is still left at the bottom. */
-@container (min-height: 240px) {
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-now { margin-top: 4px; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-more { margin-bottom: 0; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-days { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
-  [data-doc-component="gallery/weather"] > .gallery-weather-face > .gallery-weather-days > .gallery-weather-day { flex: 1 1 0; max-height: 44px; min-height: 0; }
+    border-radius: 3px;
+    background-image: linear-gradient(90deg, var(--gallery-weather-cool), var(--gallery-weather-hot));
+  }
+  /* Nothing to show yet: the cards' empty face under the head. */
+  > .gallery-weather-face > .gallery-weather-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; }
+  > .gallery-weather-face > .gallery-weather-empty > p { margin: 0; }
+  > .gallery-weather-face > .gallery-weather-empty > .gallery-weather-note { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-weather-face > .gallery-weather-empty > .gallery-weather-hint { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no card
-   is around it (a document, as gallery block check shows it) it is as high as a 4 x 2 card's face, for the
-   instance is a container of its height too and would otherwise have none. */
-[data-doc-component="gallery/weather"] { height: 11em; }
+/* On a custom page the face fills the card the board frames. */
 .gallery-card > [data-doc-component="gallery/weather"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/weather"] > .gallery-weather-face { height: 100%; }

package/packs/gallery/weather/writing.md

@@ -23,4 +23,4 @@ Put it on a custom page as a card of its board, `<section class="gallery-card" d
 
 ## How it looks
 
-The city beside a pin's chip and when the weather was fetched (更新于 14:05) at the top, the sky's picture, the temperature large and the sky's words beside it (on a 2 × 2 card under it, with the range, muted), how it feels, the humidity and the wind in a muted line, and on a 4 × 4 card the days ahead right under them, each with its picture and its lowest and highest at the ends of a bar drawn against the whole week; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark, the sun and the rain in colors of their own. It is fetched again when its settings change and every 30 minutes. While there is nothing to show it says why where the weather stands: 写上一个城市 (no city), 找不到「…」 (a name Open-Meteo does not know), 允许联网之后显示天气 (waiting for the user's consent, the kit's button over it), 现在连不上网，取不到天气 (no network, and nothing fetched before; Gallery gives the last answer it kept when there is one, its time at the top), 网络设置把天气服务指向了本地地址，取不到天气 (this computer's network setup gives Open-Meteo's names an address of this computer or of a private network, and no proxy of this computer takes them by name: Gallery refuses such an address). The script runs with the rights of the page's own scripts, as any block's does.
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a pin's chip, the city and when it was fetched (更新于 09:05; with no network, an answer kept from before says when, after a sign). The sky's picture, in its own colors (the sun's orange, a cloud's gray, the rain's blue), stands beside the temperature, the hero, and the sky's words over today's lowest and highest; at the bottom how it feels, the humidity and the wind, each after a small picture. A 2 × 2 card keeps the picture, the temperature and one line; a 4 × 4 card adds the next five days at the bottom, each its weekday, its sky, its lowest and highest at either end of a bar on the scale of all of them, cold blue to warm orange. Until the reader allows it online, or with no city, a city it cannot find or no network, the card says so under its head, and what to do faint under that.

package/packs/gallery-soft/countdown/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery-soft/countdown",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "倒计时", "en": "Countdown" },
+  "description": { "zh": "离某一天还有几天，宽卡片旁边放一页小日历；到了那天说就是今天，过了说已过几天", "en": "How many days until a date, a page of a calendar beside it on a wide card: today on the day, and the days since after it" },
+  "words": "daojishi daoshu countdown days until 倒计时 倒数日 纪念日 日子",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-soft-countdown-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[2, 2], [4, 2]], "resize": true },
+  "settings": [
+    { "key": "title", "label": { "zh": "名称", "en": "Name" }, "type": "text", "default": "" },
+    { "key": "date", "label": { "zh": "日期", "en": "Date" }, "type": "date", "required": true }
+  ]
+}

package/packs/gallery-soft/countdown/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery-soft/countdown">
+  <script type="application/json">{"title":"春节","date":"2027-02-06"}</script>
+</div>

package/packs/gallery-soft/countdown/kit.js

@@ -0,0 +1,206 @@
+// gallery-soft/countdown (倒计时, 柔光风格): Gallery 风格's gallery/countdown in the soft look, the same logic.
+// The days between today, by the reader's clock, and the date its settings name: how many are left before
+// it, 就是今天 on the day itself, how many have gone since after it. Its two settings, `title` (the name of the
+// day) and `date` (YYYY-MM-DD), are the card's form (on a custom page the grip at the card's top right ›
+// 设置…), kept in the data part `settings`, a script of JSON, which the board writes and this block only
+// reads: it writes nothing. Drawn from that part on every `source` (the form, an Agent's write, an undo)
+// and again as a day begins (the kit's `clock`, "day"), so that the count moves at midnight. A date it
+// cannot read, or none, shows the cards' empty face, a calendar in a soft disc over 还没有设日期 and where
+// to set one; the words are the page's language (the UI's where Gallery says it, else the page's lang).
+//
+// Its face, laid out by its card's size (`context.size`, read again on `layout`; data-w, data-h, data-pad):
+// a head of an hourglass's chip and the day's name (春节, or 倒计时 where it has none); the count the hero,
+// large, 还有 (or 已过) before it and 天 after it, muted; on the day 就是今天 in the accent; under it the date
+// (2月6日 周六 on a 2 × 2 card, 2027年2月6日 星期六 on a wider one, which sets a small page of a calendar
+// beside the count, the month on a band of the accent over the day). The face says by `data-kind` which of
+// left, today, since or none it shows.
+
+const WORDS = {
+  zh: {
+    left: "还有",
+    since: "已过",
+    today: "就是今天",
+    unit: () => "天",
+    countdown: "倒计时",
+    pick: "还没有设日期",
+    where: "右上角手柄 › 设置…",
+    whereShort: "手柄 › 设置…",
+    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    short: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${year}年${month}月${day}日`, weekday],
+    dateShort: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${month}月${day}日`, weekday],
+    month: (/** @type {number} */ month) => `${month}月`,
+  },
+  en: {
+    left: "In",
+    since: "",
+    today: "Today",
+    unit: (/** @type {number} */ count, /** @type {boolean} */ since = false) => `${count === 1 ? "day" : "days"}${since ? " ago" : ""}`,
+    countdown: "Countdown",
+    pick: "No date yet",
+    where: "The grip at the top right › Settings…",
+    whereShort: "Grip › Settings…",
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month - 1]} ${day}, ${year}`],
+    dateShort: (/** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${weekday},`, `${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1]} ${day}`],
+    month: (/** @type {number} */ month) => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month - 1],
+  },
+};
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * A date written YYYY-MM-DD as { year, month, day }, or null for anything else (no such day too:
+ * 2027-02-30).
+ * @param {unknown} written
+ */
+function dateOf(written) {
+  const found = typeof written === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(written) : null;
+  if (!found) return null;
+  const [year, month, day] = found.slice(1).map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? { year, month, day } : null;
+}
+
+/**
+ * Where `now` (the reader's clock) stands to the date `written` (YYYY-MM-DD): { kind: "left", days }
+ * before it, { kind: "today", days: 0 } on it, { kind: "since", days } after it, by whole days of the
+ * calendar (counted in UTC from each day's date, so that a change of the clocks in between changes
+ * nothing); { kind: "none" } for a date it cannot read.
+ * @param {unknown} written
+ * @param {Date} now
+ * @returns {{ kind: "left" | "since" | "today", days: number } | { kind: "none" }}
+ */
+function countdownOf(written, now) {
+  const date = dateOf(written);
+  if (!date) return { kind: "none" };
+  const days = Math.round((Date.UTC(date.year, date.month - 1, date.day) - Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
+  if (days === 0) return { kind: "today", days: 0 };
+  return days > 0 ? { kind: "left", days } : { kind: "since", days: -days };
+}
+
+/**
+ * What the card says, in `language`, of its `settings` (context.readJSON's, {} where none is set yet)
+ * at `now`: its head (the day's name, or 倒计时), the words before the count (还有, 已过) and its unit after it
+ * ("" with no count), its count (null on the day and with no date), the words standing there instead
+ * (`big`: 就是今天, or with no date 还没有设日期), the date (a list of words a line breaks between and never
+ * inside: the date and its weekday) long and short, or with no date where to set one (`where`, `whereShort`),
+ * and the calendar's page (its month and day; null with no date).
+ * @param {any} settings
+ * @param {Date} now
+ * @param {"zh" | "en"} language
+ */
+function faceOf(settings, now, language) {
+  const words = WORDS[language];
+  const date = dateOf(settings?.date);
+  const named = typeof settings?.title === "string" ? settings.title.trim() : "";
+  const count = countdownOf(settings?.date, now);
+  const head = named || words.countdown;
+  if (!date || count.kind === "none") return { head, label: "", count: null, unit: "", big: words.pick, foot: [words.where], footShort: [words.whereShort], page: null };
+  const weekday = new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay();
+  const foot = words.date(date.year, date.month, date.day, words.weekdays[weekday]);
+  const footShort = words.dateShort(date.month, date.day, words.short[weekday]);
+  const page = { month: words.month(date.month), day: String(date.day) };
+  if (count.kind === "today") return { head, label: "", count: null, unit: "", big: words.today, foot, footShort, page };
+  return { head, label: count.kind === "left" ? words.left : words.since, count: String(count.days), unit: words.unit(count.days, count.kind === "since"), big: "", foot, footShort, page };
+}
+
+/**
+ * The size the face is laid out by: its card's cells (`context.size`), or `fallback` (the manifest's first
+ * size) where no card is; and the frame's padding for it, as the soft cards pad theirs: "xs" on a card one
+ * cell high, "s" on a small one (2 × 2 and less), "l" on one 3 cells high or more, else "m".
+ * @param {DocComponentSize | null | undefined} size
+ * @param {[number, number]} fallback
+ */
+function sizeOf(size, fallback) {
+  const w = size?.w ?? fallback[0];
+  const h = size?.h ?? fallback[1];
+  return { w, h, pad: h === 1 ? "xs" : w <= 2 && h <= 2 ? "s" : h >= 3 ? "l" : "m" };
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-soft-countdown-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+/** Words as pieces a line breaks between and never inside. @param {string[]} pieces */
+const piecesOf = (pieces) => pieces.flatMap((words, index) => {
+  const piece = made("span", "piece", words);
+  return index === 0 ? [piece] : [" ", piece];
+});
+
+DocKit.component({
+  id: "gallery-soft/countdown",
+  on: ["source", "clock", "layout"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const face = made("div", "face");
+    host.append(face);
+    const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
+      if (reason === "clock" && detail !== "day") return; // a minute moves no count
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      if (settings === null || typeof settings !== "object" || Array.isArray(settings)) return context.fail(new Error("its settings are no object: { \"title\": \"…\", \"date\": \"YYYY-MM-DD\" }"));
+      const { w, h, pad } = sizeOf(context.size, [2, 2]);
+      const small = w <= 2;
+      const at = new Date();
+      const now = faceOf(settings, at, language);
+      const kind = countdownOf(settings.date, at).kind;
+      Object.assign(face.dataset, { kind, w: String(w), h: String(h), pad });
+      const head = made("div", "head");
+      const chip = made("span", "chip");
+      chip.setAttribute("aria-hidden", "true");
+      chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5h10M7 20.5h10"/><path d="M8 3.5v2.4c0 1.4.7 2.6 1.8 3.4L12 11l2.2-1.7A4.2 4.2 0 0 0 16 5.9V3.5"/><path d="M8 20.5v-2.4c0-1.4.7-2.6 1.8-3.4L12 13l2.2 1.7a4.2 4.2 0 0 1 1.8 3.4v2.4"/></svg>';
+      const named = made("span", "name", now.head);
+      named.title = now.head;
+      head.append(chip, named);
+      if (kind === "none") {
+        // The cards' empty face: a calendar in a soft disc, what is missing, where to set it.
+        const empty = made("div", "empty");
+        const disc = made("span", "disc");
+        disc.setAttribute("aria-hidden", "true");
+        disc.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5.5" width="16" height="14.5" rx="2.4"/><path d="M8 3.5v4M16 3.5v4M4 10.5h16"/></svg>';
+        empty.append(disc, made("p", "line", now.big), made("p", "how", (small ? now.footShort : now.foot).join(" ")));
+        face.replaceChildren(head, empty);
+        return;
+      }
+      // The count: 还有 before it, 天 after it; on the day, its words.
+      const figure = made("p", "count");
+      if (now.count === null) {
+        figure.classList.add("gallery-soft-countdown-words");
+        figure.textContent = now.big;
+      } else {
+        figure.append(...(now.label ? [made("span", "label", now.label)] : []), made("span", "number", now.count), made("span", "unit", now.unit));
+      }
+      const date = made("p", "date");
+      date.append(...piecesOf(small ? now.footShort : now.foot));
+      const body = made("div", "body");
+      const grow = made("div", "grow");
+      grow.append(figure, date);
+      body.append(grow);
+      if (!small && now.page) {
+        const page = made("div", "page");
+        page.setAttribute("aria-hidden", "true");
+        page.append(made("span", "month", now.page.month), made("span", "day", now.page.day));
+        body.append(page);
+      }
+      face.replaceChildren(head, body);
+    };
+    draw();
+    return { update: draw };
+  },
+});

package/packs/gallery-soft/countdown/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><defs><linearGradient id="w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3e7ac6" stop-opacity=".07"/><stop offset=".52" stop-color="#3e7ac6" stop-opacity="0"/></linearGradient></defs><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="14" fill="#ffffff" stroke="#e8e7e4"/><rect x="17" y="13" width="206" height="94" rx="13.5" fill="url(#w)"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ecf3fb"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="50" y="28" width="26" height="6" rx="3" fill="#37352f"/><rect x="30" y="58" width="18" height="7" rx="3.5" fill="#8d8c88"/><rect x="52" y="50" width="44" height="22" rx="11" fill="#1f1f1f"/><rect x="100" y="64" width="10" height="7" rx="3.5" fill="#8d8c88"/><rect x="30" y="82" width="70" height="5" rx="2.5" fill="#c4c2bd"/><rect x="168" y="46" width="38" height="44" rx="8" fill="#fff" stroke="#e6e5e2"/><path d="M168 54a8 8 0 0 1 8-8h22a8 8 0 0 1 8 8v4h-38z" fill="#3e7ac6"/><rect x="178" y="67" width="18" height="14" rx="7" fill="#1f1f1f"/></svg>