@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/habit/style.css

@@ -1,246 +1,174 @@
 /* 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, laid out as a grid: its head (the chip, the name, the days in all as its quiet
-   meta at the right, its end clear of the card's grip); the streak, its label small and muted over its
-   count, large, its unit after it, with the button at its right; the last seven days at the bottom, each
-   a dot over its weekday (today's 今), a day done filled with the accent and ticked, an open one the
-   track's gray, today ringed in the accent. Where the card has the room (past 300px wide and 130px high:
-   a 4 x 2 card from a window 1440px wide) the last 30 days as a ring at the left of the streak and the week, the
-   days done of them in its middle. The button is a primary one, pale blue with no line ("打卡"); once
-   today is done a pale green "✓ 已打卡" that a press takes back; where nothing is written, a plain muted
-   line. Low (under 124px), the streak's label goes; a narrow card (2 x 2) leaves the week out and puts
-   the button under the streak, as wide as its words. Never checked in (data-fresh): no streak and no
-   ring, a muted line where the streak stands. Light and dark. */
+   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 (a flame's warm chip, the name, a field with no line
+   until it is typed in, the days in all after it, faint), the streak (36px) and 天连续 with the button at
+   its right, and this week's seven circles at the bottom; "narrow" (2 × 2) the name alone (13px, 600, two lines at most), a
+   flame and the streak (40px), and the button as wide as the card; "tall" (4 × 4) the head, the streak and
+   the button, 最近五周 and its count, and five weeks of circles of 26px. A day done the accent, ticked; one
+   done before the streak (a month's) the accent's pale tint; today ringed in the accent; the days to come
+   an outline. The button has no line: a pale blue 打卡, a pale green ✓ 已打卡, a line of words where nothing
+   writes. Never checked in: 还没打过卡 where the streak stands, the chip gray. Light and dark. */
 [data-doc-component="gallery/habit"] {
-  container-type: size;
-  height: 10em;
-  > .gallery-habit-face {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas: "head head" "streak press" "week week";
-    align-items: center;
-    gap: 8px 12px;
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-    color: var(--gallery-text);
-    font-size: 14px;
-    line-height: 1.4;
-  }
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-habit-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
   > .gallery-habit-face > .gallery-habit-head {
-    grid-area: head;
     display: flex;
     align-items: center;
     gap: 8px;
+    flex: none;
+    height: 20px;
     min-width: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
   }
   > .gallery-habit-face > .gallery-habit-head > .gallery-habit-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-warm-soft);
+    color: var(--gallery-warm);
   }
-  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-head > .gallery-habit-chip { background: var(--gallery-fill); color: var(--gallery-muted); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  /* The name: a field drawn as the head's title, as wide as its words (field-sizing), a soft fill while typed in. */
   > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name {
-    flex: 1 1 auto;
-    min-width: 0;
+    field-sizing: content;
+    min-width: 2em;
+    max-width: 100%;
+    flex: 0 1 auto;
     box-sizing: border-box;
-    width: 0;
-    margin: 0 0 0 -6px;
-    padding: 3px 6px;
+    height: 20px;
+    margin: 0 -4px;
+    padding: 0 4px;
     border: 0;
-    border-radius: 6px;
+    border-radius: 4px;
     outline: 0;
     background: transparent;
     font: inherit;
     font-size: var(--gallery-title-size);
     line-height: var(--gallery-title-line);
     font-weight: 600;
-    color: var(--gallery-text-strong);
+    color: var(--gallery-text);
     text-overflow: ellipsis;
   }
-  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name::placeholder { color: var(--doc-muted); font-weight: 500; opacity: .8; }
-  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):hover,
-  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus { background: var(--doc-hover); }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name::placeholder { color: var(--gallery-faint); font-weight: 500; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:not(:read-only):is(:hover, :focus) { background: var(--gallery-hover); }
   > .gallery-habit-face > .gallery-habit-head > .gallery-habit-name:read-only { cursor: default; }
-  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total {
-    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);
-    line-height: var(--gallery-title-line);
-    color: var(--doc-muted);
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-label { display: none; }
+  > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-habit-face > .gallery-habit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; flex: none; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak { display: flex; align-items: baseline; margin: 0; min-width: 0; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame { display: none; align-self: center; margin-right: 4px; color: var(--gallery-warm); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame > svg { display: block; width: 18px; height: 18px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-count {
+    font-size: 36px;
+    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);
   }
-  > .gallery-habit-face > .gallery-habit-check {
-    grid-area: press;
-    justify-self: end;
-    align-self: center;
-    padding: 5px 14px;
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-fresh { display: none; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-row > .gallery-habit-streak { display: none; }
+  > .gallery-habit-face[data-fresh] > .gallery-habit-row > .gallery-habit-fresh { display: block; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    flex: none;
+    height: 30px;
+    padding: 0 14px;
     border: 0;
     border-radius: 8px;
     background: var(--gallery-accent-soft);
+    color: var(--gallery-accent-ink);
     font: inherit;
     font-size: 13px;
-    line-height: 18px;
-    font-weight: 500;
-    color: var(--gallery-accent);
+    font-weight: 600;
     white-space: nowrap;
     cursor: pointer;
-  }
-  > .gallery-habit-face > .gallery-habit-check:hover { background: color-mix(in srgb, var(--gallery-accent) 15%, transparent); }
-  > .gallery-habit-face > .gallery-habit-check:active { background: color-mix(in srgb, var(--gallery-accent) 21%, transparent); }
-  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done { background: var(--gallery-good-soft); color: var(--gallery-good); }
-  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:hover { background: color-mix(in srgb, var(--gallery-good) 16%, transparent); }
-  /* Nothing to press (an export, a page that takes no edits): a line saying how today stands. */
-  > .gallery-habit-face > .gallery-habit-check:disabled,
-  > .gallery-habit-face > .gallery-habit-check.gallery-habit-done:disabled {
-    padding-inline: 0;
-    background: transparent;
-    font-weight: 400;
-    color: var(--doc-muted);
-    cursor: default;
-  }
-  /* The streak: its label over its count, the count large, its unit small and muted after it. */
-  > .gallery-habit-face > .gallery-habit-streak {
-    grid-area: streak;
-    align-self: center;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    min-width: 0;
-    margin: 0;
-  }
-  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label {
-    flex: 0 0 100%;
-    margin-bottom: 2px;
-    font-size: var(--gallery-meta-size);
-    line-height: 16px;
-    color: var(--doc-muted);
-  }
-  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-count {
-    font-size: clamp(28px, 100cqh - 100px, var(--gallery-hero-size)); /* the hero, a little less on a card too low for it beside the week */
-    line-height: 1;
-    font-weight: var(--gallery-numeral-weight);
-    letter-spacing: var(--gallery-numeral-tracking);
-    color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
-  }
-  > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-unit {
-    margin-inline-start: var(--gallery-unit-gap);
-    font-size: max(12px, calc(var(--gallery-hero-size) * .4)); /* the hero's unit (--gallery-unit-size of it) */
-    font-weight: 500;
-    color: var(--doc-muted);
-  }
-  /* Never checked in: a muted line where the streak stands. */
-  > .gallery-habit-face > .gallery-habit-fresh { display: none; }
-  > .gallery-habit-face[data-fresh] > .gallery-habit-streak { display: none; }
-  > .gallery-habit-face[data-fresh] > .gallery-habit-fresh {
-    grid-area: streak;
-    align-self: center;
-    display: block;
-    min-width: 0;
-    margin: 0;
-    font-size: 13px;
-    line-height: 1.45;
-    color: var(--doc-muted);
-  }
-  /* The last 30 days: a ring of the accent on the track, the days done in its middle over its label. */
-  > .gallery-habit-face > .gallery-habit-ring {
-    grid-area: ring;
-    display: none;
-    position: relative;
-    width: clamp(76px, calc(100cqh - 52px), 128px);
-    aspect-ratio: 1;
-    align-self: center;
-  }
-  > .gallery-habit-face > .gallery-habit-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
-  > .gallery-habit-face > .gallery-habit-ring > svg > circle { fill: none; stroke-width: 9; }
-  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-track { stroke: var(--gallery-track); }
-  > .gallery-habit-face > .gallery-habit-ring > svg > .gallery-habit-arc {
-    stroke: var(--gallery-accent);
-    stroke-linecap: round;
-    stroke-dasharray: calc(var(--gallery-habit-share, 0) * 100) 100;
-  }
-  > .gallery-habit-face > .gallery-habit-ring[data-none] > svg > .gallery-habit-arc { display: none; }
-  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate {
-    position: relative;
-    font-size: clamp(20px, 7cqi, 28px);
-    line-height: 1;
-    font-weight: var(--gallery-numeral-weight);
-    letter-spacing: var(--gallery-numeral-tracking);
-    font-variant-numeric: tabular-nums;
-    text-align: center;
-  }
-  > .gallery-habit-face > .gallery-habit-ring > .gallery-habit-rate-label {
-    position: relative;
-    margin-top: 4px;
-    font-size: 11px;
-    line-height: 14px;
-    color: var(--doc-muted);
-    text-align: center;
-  }
-  > .gallery-habit-face > .gallery-habit-week {
-    grid-area: week;
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-    gap: 4px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
+    transition: background-color .12s ease-out;
+  }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:hover { background: color-mix(in srgb, var(--gallery-accent) 18%, var(--gallery-accent-soft)); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:focus-visible { outline: 2px solid var(--gallery-accent-wash); outline-offset: 1px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check.gallery-habit-done { background: var(--gallery-good-soft); color: var(--gallery-good-ink); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check.gallery-habit-done:hover { background: color-mix(in srgb, var(--gallery-good) 18%, var(--gallery-good-soft)); }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check > svg { display: block; width: 13px; height: 13px; }
+  > .gallery-habit-face > .gallery-habit-row > .gallery-habit-check:disabled { padding: 0; background: transparent; color: var(--gallery-faint); font-weight: 500; cursor: default; }
+  > .gallery-habit-face > .gallery-habit-caption { display: none; }
+  /* This week: seven circles at the bottom, 4px in from either side, so that today's second ring, done,
+     stays inside the content on a Monday and a Sunday too. */
+  > .gallery-habit-face > .gallery-habit-week { display: flex; justify-content: space-between; margin: auto 0 0; padding: 0 4px; list-style: none; }
   > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--gallery-fill);
     font-size: 11px;
     line-height: 1;
-    color: var(--doc-muted);
-  }
-  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day > .gallery-habit-dot {
-    box-sizing: border-box;
-    width: clamp(18px, 6.4cqi, 26px);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background: var(--gallery-track);
-  }
-  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-kept > .gallery-habit-dot {
-    background: var(--gallery-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
-  }
-  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today { color: var(--gallery-accent); font-weight: 600; }
-  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today:not(.gallery-habit-kept) > .gallery-habit-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); }
-}
-/* Room for the ring: at the left of the streak and the week, the dots no wider than they need. */
-@container (min-width: 300px) and (min-height: 130px) {
-  [data-doc-component="gallery/habit"] > .gallery-habit-face {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-areas: "head head head" "ring streak press" "ring week week";
-    column-gap: 20px;
+    color: var(--gallery-faint);
+    font-variant-numeric: tabular-nums;
   }
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; }
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week { align-self: end; }
-  /* Never checked in: no ring, the line and the week from the card's left. */
-  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "streak press" "week week"; }
-  [data-doc-component="gallery/habit"] > .gallery-habit-face[data-fresh] > .gallery-habit-ring { display: none; }
-}
-/* Low: the count alone, no label over it. */
-@container (max-height: 124px) {
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-streak > .gallery-habit-label { display: none; }
-}
-/* A narrow card: the head, the streak, the button under it at its start, as wide as its words, the two in the middle of the room under the head; no week, no days in all. */
-@container (max-width: 220px) {
-  [data-doc-component="gallery/habit"] > .gallery-habit-face { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto 1fr; grid-template-areas: "head" "." "streak" "press" "."; }
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-check { justify-self: start; }
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-week,
-  [data-doc-component="gallery/habit"] > .gallery-habit-face > .gallery-habit-head > .gallery-habit-total { display: none; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-day > svg { display: block; width: 13px; height: 13px; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-kept { background: var(--gallery-accent); color: #fff; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); color: var(--gallery-accent-ink); font-weight: 600; }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-today.gallery-habit-kept { background: var(--gallery-accent); color: #fff; box-shadow: 0 0 0 2px var(--gallery-card-fill), 0 0 0 3.5px var(--gallery-accent); }
+  > .gallery-habit-face > .gallery-habit-week > .gallery-habit-future { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-hair); color: var(--gallery-faintest); }
+
+  /* A narrow card: the name, the streak with its flame, the button as wide as the card. */
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > :is(.gallery-habit-chip, .gallery-habit-total) { display: none; }
+  /* Its name: the words, 13px and 600 on 18px lines, two lines at most and then cut (…), 12px clear of the
+     card's edge (the grip's dots end 9px into the content); the field lies over them unseen, the one a
+     press or Tab reaches, and stands in their place, one line, while it has the focus. */
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head { position: relative; display: block; height: auto; padding-inline-end: 0; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-label {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin: 0 -4px;
+    padding: 0 16px 0 4px;
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 600;
+    color: var(--gallery-text);
+    overflow-wrap: anywhere;
+  }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-label[data-empty] { font-weight: 500; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name { position: absolute; inset: 0 auto auto 0; width: calc(100% + 8px); max-width: none; height: 100%; opacity: 0; line-height: 18px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:read-only { pointer-events: none; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):hover + .gallery-habit-label { background: var(--gallery-hover); }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus { width: calc(100% + 8px - var(--gallery-grip-room, 0px) * var(--gallery-grip-shown, 0)); height: 18px; opacity: 1; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-head > .gallery-habit-name:not(:read-only):focus + .gallery-habit-label { visibility: hidden; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row { display: contents; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > :is(.gallery-habit-streak, .gallery-habit-fresh) { margin: auto 0 10px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-flame { display: block; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-streak > .gallery-habit-count { font-size: 40px; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-row > .gallery-habit-check { width: 100%; margin-top: auto; }
+  > .gallery-habit-face[data-layout="narrow"] > .gallery-habit-week { display: none; }
+  /* A tall card: five weeks of circles under 最近五周. */
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-caption { display: flex; justify-content: space-between; margin: auto 0 8px; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-caption b { font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5px; justify-items: center; margin: 0; padding: 0; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-initial { height: 14px; font-size: 10.5px; line-height: 14px; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-day { width: 26px; height: 26px; font-size: 10.5px; background: transparent; color: var(--gallery-faint); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-kept { background: var(--gallery-accent-soft); color: var(--gallery-accent-ink); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-kept.gallery-habit-streak-day { background: var(--gallery-accent); color: #fff; }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-accent); color: var(--gallery-accent-ink); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-today.gallery-habit-kept { background: var(--gallery-accent); color: #fff; box-shadow: 0 0 0 2px var(--gallery-card-fill), 0 0 0 3.5px var(--gallery-accent); }
+  > .gallery-habit-face[data-layout="tall"] > .gallery-habit-week > .gallery-habit-future { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-hair); color: var(--gallery-faintest); }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding. */
+/* On a custom page the face fills the card the board frames. */
 .gallery-card > [data-doc-component="gallery/habit"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/habit"] > .gallery-habit-face { height: 100%; }

package/packs/gallery/habit/writing.md

@@ -9,7 +9,7 @@ Put it on a custom page as a card of its board, `<section class="gallery-card" d
 - `name`: the habit, a few words (每天读书半小时); `""` shows 给习惯起个名字, and the user names it on the card.
 - `days`: the days it was done, each `YYYY-MM-DD` by the user's clock, in order, each once. Leave the days of a card that is there alone: they are the user's record.
 
-Sizes: 4 × 2 (the default: the name, the streak and the button, the week, and where the window is wide enough the last 30 days as a ring) and 2 × 2 (the name, the streak, the button under it).
+Sizes: 4 × 2 (the default: the name, the streak and the button, this week's seven days), 2 × 2 (the name, the streak, the button as wide as the card) and 4 × 4 (the last five weeks as a month).
 
 ## What the user does
 
@@ -18,4 +18,4 @@ Sizes: 4 × 2 (the default: the name, the streak and the button, the week, and w
 
 ## How it looks
 
-The name beside a flame's chip on the top line, the days in all at its end; the streak under it, 连续打卡 over its count, large, with the button at its right (打卡, pale blue; once done a pale green ✓ 已打卡 that a press takes back), the week at the bottom, a day done a dot filled with the accent and ticked, today ringed and named 今; on a card with the room for it, the last 30 days as a ring at the left, the days done of them in its middle; 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. It moves to the next day by itself at midnight (it hears the kit's clock). A habit never checked in shows neither the streak nor the ring but a muted line, 还没打过卡，今天开始第 1 天, until its first check-in. Where nothing can be written (an export) the button is a line saying whether today is done. 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 flame's warm chip, the habit's name (a field: click to rename) and the days in all (共 41 天); the streak is the hero (36px, 天连续 after it), the button at its right a pale blue 打卡, a pale green ✓ 已打卡 once pressed (a press takes it back). A 4 × 2 card's foot is this week, seven circles Monday to Sunday: a day done the accent with a tick, one missed a soft gray, today ringed in the accent (今), the days to come an outline. A 4 × 4 card shows the last five weeks as a month instead, the days of the streak in the accent, those done before it its pale tint, with how many were done. Never checked in, it says 还没打过卡 where the streak stands. It changes by itself at midnight.

package/packs/gallery/heatmap/component.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery/heatmap",
   "apiVersion": 1,
-  "version": "1.3.0",
+  "version": "2.0.0",
   "name": { "zh": "编辑热力图", "en": "Editing heatmap" },
   "description": { "zh": "过去一年每天编辑了几次或写了多少字，像 GitHub 的贡献图", "en": "How often, or how many words, the workspace was edited each day of the past year, like GitHub's contribution graph" },
   "words": "bianjireilitu reilitu heatmap activity contributions calendar 热力图 编辑 贡献 日历 字数 每天",
@@ -10,7 +10,7 @@
   },
   "runtime": { "generated": [":scope > .gallery-heatmap-face"] },
   "places": ["page"],
-  "card": { "sizes": [[8, 3], [12, 3], [4, 3]], "resize": true },
+  "card": { "sizes": [[8, 4], [12, 4], [4, 4], [12, 3], [8, 3], [8, 2]], "resize": true },
   "settings": [
     { "key": "words", "label": { "zh": "按字数显示", "en": "Show words, not edits" }, "type": "switch", "default": false }
   ],