@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/countdown/kit.js

@@ -1,14 +1,18 @@
 // gallery/countdown (倒计时): 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
+// 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, asks for one; the words are the page's language (the UI's where Gallery
-// says it, else the page's lang). Its head is the cards' (the kit's card tokens): the chip, an hourglass,
-// before the day's name alone (春节, or 倒计时 where it has none), on one line; under it the count's label
-// (还有, 已经过去) over the count, large, and its unit, the family's label over a number; its face says by
-// `data-kind` which of left, today, since or none it shows.
+// 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. The words are the page's language (the UI's where Gallery says it, else the page's
+// lang). Its face (the pack's design B, in the kit's card tokens): a head of the chip, an hourglass, and
+// the day's name alone (春节, or 倒计时 where it has none), on one line; at the bottom the count's label
+// (还有, 已经过去) over the count, the hero, and its unit, and the date under them, faint (2027年2月6日 周六);
+// on the day, 就是今天 in the accent where the count stands. A card four cells wide (`data-layout` "wide",
+// by context.size, read again on `layout`) sets the month of the date beside it, a small calendar, Monday
+// first, the day itself the one solid square of the accent (`monthOf`). A date it cannot read, or none,
+// is the cards' empty face under the head: 选一个日子, and where to set one. Its face says by `data-kind`
+// which of left, today, since or none it shows.
 
 const WORDS = {
   zh: {
@@ -18,9 +22,11 @@ const WORDS = {
     days: (/** @type {number} */ count) => `${count}`,
     unit: () => "天",
     countdown: "倒计时",
-    pick: "选一个日期",
-    where: "右上角手柄 › 设置…",
-    weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+    pick: "选一个日子",
+    where: "在卡片右上角的 设置… 里填日期",
+    whereShort: "在 设置… 里填日期",
+    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+    initials: ["一", "二", "三", "四", "五", "六", "日"],
     date: (/** @type {number} */ year, /** @type {number} */ month, /** @type {number} */ day, /** @type {string} */ weekday) => [`${year}年${month}月${day}日`, weekday],
   },
   en: {
@@ -30,10 +36,12 @@ const WORDS = {
     days: (/** @type {number} */ count) => `${count}`,
     unit: (/** @type {number} */ count) => (count === 1 ? "day" : "days"),
     countdown: "Countdown",
-    pick: "Pick a date",
-    where: "The grip at the top right › Settings…",
-    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    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}`],
+    pick: "Pick a day",
+    where: "Set its date in Settings… at the card's top right",
+    whereShort: "Set its date in Settings…",
+    weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    initials: ["M", "T", "W", "T", "F", "S", "S"],
+    date: (/** @type {number} */ year, /** @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}, ${year}`],
   },
 };
 
@@ -76,8 +84,10 @@ function countdownOf(written, now) {
 /**
  * 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 count's label (还有, 已经过去; "" with no count), its
- * count (null on the day and with no date; `big`, the words standing there instead), the count's unit, and
- * its foot, a list of words a line breaks between and never inside (the date, its weekday).
+ * count (null on the day and with no date; `big`, the words standing there instead: 就是今天), the count's
+ * unit, its foot, a list of words a line breaks between and never inside (the date, its weekday), and,
+ * with no date it can read, `empty`: what the empty face says (选一个日子, where to set one on a wide card
+ * and on a narrow one).
  * @param {any} settings
  * @param {Date} now
  * @param {"zh" | "en"} language
@@ -88,11 +98,24 @@ function faceOf(settings, now, language) {
   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] };
+  if (!date || count.kind === "none") return { head, label: "", count: null, unit: "", big: "", foot: [], empty: { title: words.pick, where: words.where, whereShort: words.whereShort } };
   const weekday = words.weekdays[new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay()];
   const foot = words.date(date.year, date.month, date.day, weekday);
-  if (count.kind === "today") return { head, label: "", count: null, unit: "", big: words.today, foot };
-  return { head, label: count.kind === "left" ? words.left : words.since, count: words.days(count.days), unit: words.unit(count.days), big: "", foot };
+  if (count.kind === "today") return { head, label: "", count: null, unit: "", big: words.today, foot, empty: null };
+  return { head, label: count.kind === "left" ? words.left : words.since, count: words.days(count.days), unit: words.unit(count.days), big: "", foot, empty: null };
+}
+
+/**
+ * The month of `date` ({ year, month, day }) as the small calendar draws it, Monday first: its weeks, each
+ * seven days of the month (a number) or none before its first and after its last (null).
+ * @param {{ year: number, month: number }} date
+ */
+function monthOf(date) {
+  const first = (new Date(Date.UTC(date.year, date.month - 1, 1)).getUTCDay() + 6) % 7;
+  const length = new Date(Date.UTC(date.year, date.month, 0)).getUTCDate();
+  const cells = [...Array(first).fill(null), ...Array.from({ length }, (_, index) => index + 1)];
+  while (cells.length % 7) cells.push(null);
+  return Array.from({ length: cells.length / 7 }, (_, week) => cells.slice(week * 7, week * 7 + 7));
 }
 
 /**
@@ -109,20 +132,33 @@ function made(tag, kind) {
 
 DocKit.component({
   id: "gallery/countdown",
-  on: ["source", "clock"],
+  on: ["source", "clock", "layout"],
   mount(host, context) {
     const language = languageOf(document.documentElement);
+    const words = WORDS[language];
     const face = made("div", "face");
+    const main = made("div", "main");
     const head = made("p", "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.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 7h11M6.5 17h11M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zM6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/></svg>';
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 3.5h11M6.5 20.5h11M7.5 3.5v2.2c0 2 1.3 3.6 3.2 4.4l1.3.6 1.3-.6c1.9-.8 3.2-2.4 3.2-4.4V3.5M7.5 20.5v-2.2c0-2 1.3-3.6 3.2-4.4l1.3-.6 1.3.6c1.9.8 3.2 2.4 3.2 4.4v2.2"/></svg>';
     const named = made("span", "name");
     head.append(chip, named);
+    const core = made("div", "core");
     const label = made("p", "label");
     const middle = made("p", "count");
     const foot = made("p", "foot");
-    face.append(head, label, middle, foot);
+    core.append(label, middle, foot);
+    // No date: the cards' empty face, what to do and where.
+    const empty = made("div", "empty");
+    const emptyTitle = made("p", "empty-title");
+    const emptyWhere = made("p", "empty-where");
+    empty.append(emptyTitle, emptyWhere);
+    main.append(head, core, empty);
+    // A wide card's month, beside the count: the calendar of the date, the day itself marked.
+    const month = made("div", "month");
+    month.setAttribute("aria-hidden", "true");
+    face.append(main, month);
     host.append(face);
     const draw = (/** @type {string} */ reason = "", /** @type {unknown} */ detail = null) => {
       if (reason === "clock" && detail !== "day") return; // a minute moves no count
@@ -131,6 +167,8 @@ DocKit.component({
       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 at = new Date();
       const now = faceOf(settings, at, language);
+      const layout = context.size && context.size.w >= 4 ? "wide" : "narrow";
+      face.dataset.layout = layout;
       face.dataset.kind = countdownOf(settings.date, at).kind;
       named.textContent = now.head;
       named.title = now.head;
@@ -140,15 +178,37 @@ DocKit.component({
         middle.textContent = now.big;
       } else {
         middle.classList.remove("gallery-countdown-words");
+        const number = made("span", "number");
+        number.textContent = now.count;
         const unit = made("span", "unit");
         unit.textContent = now.unit;
-        middle.replaceChildren(now.count, unit);
+        middle.replaceChildren(number, unit);
       }
-      foot.replaceChildren(...now.foot.flatMap((words, index) => {
-        const piece = made("span", "piece");
-        piece.textContent = words;
-        return index === 0 ? [piece] : [" ", piece];
+      foot.replaceChildren(...now.foot.flatMap((piece, index) => {
+        const node = made("span", "piece");
+        node.textContent = piece;
+        return index === 0 ? [node] : [" ", node];
       }));
+      emptyTitle.textContent = now.empty?.title ?? "";
+      emptyWhere.textContent = now.empty ? (layout === "wide" ? now.empty.where : now.empty.whereShort) : "";
+      const date = dateOf(settings.date);
+      if (!date) return void month.replaceChildren();
+      const head = words.initials.map((initial, index) => {
+        const cell = made("span", "initial");
+        cell.classList.toggle("gallery-countdown-weekend", index >= 5);
+        cell.textContent = initial;
+        return cell;
+      });
+      const weeks = monthOf(date);
+      month.dataset.weeks = String(weeks.length);
+      month.replaceChildren(...head, ...weeks.flatMap((week) => week.map((day, index) => {
+        const cell = made("span", "day");
+        if (day === null) return cell;
+        cell.textContent = String(day);
+        cell.classList.toggle("gallery-countdown-weekend", index >= 5);
+        cell.classList.toggle("gallery-countdown-on", day === date.day);
+        return cell;
+      })));
     };
     draw();
     return { update: draw };

package/packs/gallery/countdown/preview.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 7h11M6.5 17h11M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zM6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/></g><rect x="50" y="28" width="24" height="6" rx="3" fill="#3b3a37"/><rect x="30" y="49" width="16" height="5" rx="2.5" fill="#c4c2bd"/><text x="28" y="84" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="34" font-weight="600" letter-spacing="-.5" fill="#3b3a37">89</text><rect x="72" y="74" width="11" height="9" rx="2.5" fill="#c4c2bd"/><rect x="30" y="93" width="82" height="5" rx="2.5" fill="#c4c2bd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="72.5" y="12.5" width="95" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="82" y="22" width="10" height="10" rx="3" fill="#efefed"/><rect x="96" y="24.5" width="22" height="5" rx="2.5" fill="#37352f"/><rect x="82" y="44" width="14" height="4" rx="2" fill="#a6a5a1"/><rect x="82" y="54" width="30" height="24" rx="3" fill="#1d1d1b"/><rect x="115" y="72" width="7" height="6" rx="3" fill="#a6a5a1"/><rect x="82" y="88" width="52" height="4" rx="2" fill="#d4d3cf"/></svg>

package/packs/gallery/countdown/style.css

@@ -1,130 +1,118 @@
 /* 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 face fills its card on a custom page (the board draws the frame), in
-   the kit's card tokens: its head at the top (the chip, then the day's name on one line, cut with an
-   ellipsis, its end clear of the card's grip), the count's label small and muted over the count, large
-   (the cards' hero size), its unit small and muted after it, the two in the middle of the room between the
-   head and the date, which is muted at the bottom. On the day itself the words stand in the accent. With
-   no date yet, the cards' empty face: a quiet picture (a calendar) in a soft disc over a muted line, where
-   to set one under it, in the middle of the room under the head. Light and dark. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: the head (the chip, an
+   hourglass, and the day's name, one line cut with an ellipsis, its end clear of the card's grip); at the
+   bottom the count's label (还有, 已经过去) over the count, the card's hero (44px, 48px on a wide card) and
+   its unit, and the date under them, faint; on the day, 就是今天 in the accent's ink where the count stands.
+   A wide card (data-layout "wide", four cells) sets the month of the date at its right, 126px, seven
+   columns Monday first, the weekend fainter, the day itself the one solid square of the accent (a month of
+   six weeks a little closer, so that it fits the card). No date: the cards' empty face under the head.
+   Light and dark. */
 [data-doc-component="gallery/countdown"] {
-  container-type: inline-size;
-  > .gallery-countdown-face {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: 6px;
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-    color: var(--gallery-text);
-  }
-  > .gallery-countdown-face > p { margin: 0; }
-  > .gallery-countdown-face > .gallery-countdown-head {
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-countdown-face { display: flex; gap: 16px; box-sizing: border-box; min-height: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head {
     display: flex;
     align-items: center;
     gap: 8px;
+    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);
-    font-weight: 600;
-    color: var(--gallery-text-strong);
   }
-  > .gallery-countdown-face > .gallery-countdown-head > .gallery-countdown-chip {
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-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-countdown-face > .gallery-countdown-head > .gallery-countdown-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
-  > .gallery-countdown-face > .gallery-countdown-head > .gallery-countdown-name {
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-head > .gallery-countdown-name {
     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);
   }
-  /* The count's label over it, the two in the middle of the room between the head and the date. */
-  > .gallery-countdown-face > .gallery-countdown-label {
-    margin-top: auto;
-    font-size: var(--gallery-meta-size);
-    line-height: 16px;
-    color: var(--doc-muted);
-  }
-  > .gallery-countdown-face > .gallery-countdown-label:empty { display: none; }
-  > .gallery-countdown-face > .gallery-countdown-label:empty + .gallery-countdown-count { margin-top: auto; }
-  > .gallery-countdown-face > .gallery-countdown-count {
-    margin-top: -4px;
-    font-size: var(--gallery-hero-size);
-    line-height: 1.1;
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core { margin-top: auto; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > p { margin: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-label { font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-label:empty { display: none; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count { display: flex; align-items: baseline; margin: 3px 0 7px; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-number {
+    font-size: 44px;
+    line-height: 1;
     font-weight: var(--gallery-numeral-weight);
     letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
     color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
   }
-  > .gallery-countdown-face > .gallery-countdown-count > .gallery-countdown-unit {
-    margin-inline-start: var(--gallery-unit-gap);
-    font-size: max(12px, var(--gallery-unit-size));
-    font-weight: 500;
-    letter-spacing: 0;
-    color: var(--doc-muted);
-  }
-  /* Today, or no date yet: words where the count stands, smaller; the day itself in the accent. */
-  > .gallery-countdown-face > .gallery-countdown-count.gallery-countdown-words {
-    font-size: min(var(--gallery-figure-size), 13cqi);
-    line-height: 1.2;
-    letter-spacing: -.01em;
-    white-space: normal;
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-words {
+    display: block;
+    margin: 2px 0 6px;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 600;
+    letter-spacing: .02em;
+    color: var(--gallery-accent-ink);
   }
-  > .gallery-countdown-face[data-kind="today"] > .gallery-countdown-count { color: var(--gallery-accent); }
-  /* No date yet: the cards' empty face (as todos' and recent's), the line and where to set it in the middle. */
-  > .gallery-countdown-face[data-kind="none"] { justify-content: flex-start; }
-  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count {
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-foot { font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty { display: none; }
+  > .gallery-countdown-face[data-layout="wide"] > .gallery-countdown-main > .gallery-countdown-core > .gallery-countdown-count > .gallery-countdown-number { font-size: 48px; }
+
+  /* No date: the cards' empty face, under the head. */
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-main > .gallery-countdown-core,
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-month,
+  > .gallery-countdown-face[data-layout="wide"][data-kind="none"] > .gallery-countdown-month { display: none; }
+  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-main > .gallery-countdown-empty {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    margin-top: auto;
-    font-size: 13px;
-    line-height: 1.45;
-    font-weight: 400;
-    letter-spacing: 0;
-    color: var(--doc-muted);
-    text-align: center;
+    justify-content: center;
+    gap: 4px;
+    min-height: 0;
   }
-  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count::before {
-    content: "";
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > p { margin: 0; }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > .gallery-countdown-empty-title { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-countdown-face > .gallery-countdown-main > .gallery-countdown-empty > .gallery-countdown-empty-where { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+
+  /* The month, at a wide card's right. */
+  > .gallery-countdown-face > .gallery-countdown-month { display: none; }
+  > .gallery-countdown-face[data-layout="wide"] > .gallery-countdown-month {
+    display: grid;
     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='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%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='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+    align-self: flex-end;
+    grid-template-columns: repeat(7, 18px);
+    row-gap: 2px;
+    width: 126px;
+    font-variant-numeric: tabular-nums;
   }
-  > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-foot { margin-top: 0; margin-bottom: auto; text-align: center; opacity: .8; }
-  > .gallery-countdown-face > .gallery-countdown-foot {
-    margin-top: auto;
-    font-size: var(--gallery-meta-size);
-    line-height: 1.45;
-    color: var(--doc-muted);
+  > .gallery-countdown-face > .gallery-countdown-month > span {
+    display: grid;
+    place-items: center;
+    height: 16px;
+    border-radius: 5px;
+    font-size: 10.5px;
+    line-height: 1;
+    color: var(--gallery-muted);
   }
-  /* The date and its weekday break between them, never inside either. */
-  > .gallery-countdown-face > .gallery-countdown-foot > .gallery-countdown-piece { display: inline-block; }
-}
-/* On a custom page the face is the card's: as high as what the card holds inside its padding, and a
-   container of that height too. A narrow card (two cells wide) shows the date alone, its weekday left
-   out, which would take a second line its two rows of cells have no room for; a low card's empty face
-   says where to set a date in its words alone, the picture over them left out. */
-.gallery-card > [data-doc-component="gallery/countdown"] { height: 100%; container-type: size; }
-@container (max-width: 180px) {
-  [data-doc-component="gallery/countdown"] > .gallery-countdown-face:not([data-kind="none"]) > .gallery-countdown-foot > .gallery-countdown-piece ~ .gallery-countdown-piece { display: none; }
-}
-@container (max-height: 150px) {
-  [data-doc-component="gallery/countdown"] > .gallery-countdown-face[data-kind="none"] > .gallery-countdown-count::before { display: none; }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-initial { font-size: 10px; color: var(--gallery-faint); }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-weekend { color: var(--gallery-faint); }
+  > .gallery-countdown-face > .gallery-countdown-month > .gallery-countdown-on { background: var(--gallery-accent); color: #fff; font-weight: 600; }
+  > .gallery-countdown-face > .gallery-countdown-month[data-weeks="6"] { row-gap: 1px; }
+  > .gallery-countdown-face > .gallery-countdown-month[data-weeks="6"] > span { height: 14px; }
 }
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/countdown"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/countdown"] > .gallery-countdown-face { height: 100%; }

package/packs/gallery/countdown/writing.md

@@ -15,8 +15,8 @@ They are kept in its data part `settings`, a `<script type="application/json">`,
 
 ## How to write it
 
-Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add countdown`, the instance as template.html has it, then its settings as above. Sizes: 2 × 2 (the default) and 4 × 2.
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add countdown`, the instance as template.html has it, then its settings as above. Sizes: 2 × 2 (the default) and 4 × 2 (the month of the date beside the count, the day marked).
 
 ## How it looks
 
-The day's name at the top beside an hourglass's chip, on one line (春节; 倒计时 where it has none), under it 还有 (or 已经过去) over the count of days, large, and the date with its weekday at the bottom, muted; on the day itself 就是今天 in the accent; 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 count moves by itself at midnight (it hears the kit's clock). 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 an hourglass's chip and the day's name; at the bottom 还有 (or 已经过去) over the count of days, 44px, and the date faint under them (2027年2月6日 周六). On the day itself 就是今天 in the accent stands where the count was. A 4 × 2 card sets the month of the date at its right, Monday first, the day the one solid square of the accent. With no date it says 选一个日子 and where to set one.

package/packs/gallery/habit/component.json

@@ -1,14 +1,14 @@
 {
   "id": "gallery/habit",
   "apiVersion": 1,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "name": { "zh": "习惯打卡", "en": "Habit tracker" },
-  "description": { "zh": "每天打一次卡，显示连续了几天和最近一周，名字在卡片上直接改", "en": "A check-in a day, the streak and the last seven days; the habit's name is edited on the card" },
+  "description": { "zh": "每天打一次卡，显示连续了几天和这一周，名字在卡片上直接改", "en": "A check-in a day, the streak and this week; the habit's name is edited on the card" },
   "words": "xiguandaka xiguan daka habit streak checkin tracker 习惯 打卡 连续 坚持",
   "parts": {
     "habit": { "at": ":scope > script", "edit": "data" }
   },
   "runtime": { "generated": [":scope > .gallery-habit-face"] },
   "places": ["page"],
-  "card": { "sizes": [[4, 2], [2, 2]], "resize": true }
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true }
 }