@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/today/style.css

@@ -1,85 +1,82 @@
 /* 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: the chip (the sun by day in its warm color, the moon in the
-   evening in the accent) and the date beside it, the date in the text's color and the weekday muted, its
-   end clear of the card's grip; the greeting large in the middle of the room under them; on a card wide
-   enough (past 260px) the week at the bottom, each day's initial over its date, muted, the days gone
-   fainter still, today's 今 over its date on a quiet gray in the accent; the number of the week its head's
-   quiet meta at the end; a glow at the card's top left, the sun's warm color by day, the accent's in the
-   evening, as the hero of a home page (the face's data-sky), fainter in dark, where a warm wash on the
-   card's gray reads as haze. The greeting grows with the card's width (the instance is a container: cqi),
-   between a least and a most, so that a 2 x 2 card and a 4 x 2 one at 1920 both read as a widget. A narrow
-   card's head is the date alone, its weekday left out, on one line. Light and dark. */
+   reaches the rest of the page. The face (the pack's design B) in the kit's card tokens, a grid laid out by
+   the card's cells (the face's data-layout, which the script sets from context.size): "full" (4 × 2, the
+   default) a head of the chip, the date (600) and the number of the week after it (the head's quiet meta),
+   the greeting large under it and the week at the bottom, seven days of 38px, the days gone fainter,
+   today the one solid square of the accent; "narrow" (2 wide) a page of a desk calendar, the greeting
+   the head's title, today's day of the month large at the bottom, its weekday and month under it;
+   "line" (one cell high) the chip, the greeting and the date on one line. The chip is the sun's warm
+   color by day and the accent's pale blue in the evening, and so is the soft glow at the card's top left
+   (the face's data-sky), drawn from the card's edges: the face taken out over the card's padding and
+   given it back. Its head keeps clear of the card's grip. Light and dark. */
 [data-doc-component="gallery/today"] {
-  container-type: inline-size;
-  --gallery-today-sun: light-dark(#d98a1c, #f0b44f);
-  --gallery-today-sun-soft: light-dark(rgb(217 138 28 / 11%), rgb(240 180 79 / 14%));
-  /* The glow at the card's top left: the sun's warm color by day, the accent's in the evening. */
-  --gallery-today-glow: light-dark(rgb(240 160 60 / 12%), rgb(240 180 79 / 3.5%));
-  --gallery-today-glow-evening: light-dark(rgb(46 124 209 / 8%), rgb(92 154 217 / 6%));
+  --gallery-today-glow: light-dark(rgb(255 183 77 / 20%), rgb(255 170 60 / 8.5%));
+  --gallery-today-glow-evening: light-dark(rgb(64 132 207 / 13%), rgb(80 143 214 / 15%));
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
   > .gallery-today-face {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas: "chip date meta" "greeting greeting greeting" "week week week";
-    align-items: center;
-    gap: 8px 10px;
+    grid-template-columns: auto minmax(0, max-content) auto minmax(var(--gallery-grip-room, 0px), 1fr);
+    grid-template-rows: 20px auto 1fr;
+    grid-template-areas: "chip date meta ." "greeting greeting greeting greeting" "week week week week";
+    column-gap: 8px;
     box-sizing: border-box;
-    height: 100%;
     min-height: 0;
-    color: var(--gallery-text);
   }
   > .gallery-today-face > .gallery-today-chip {
     grid-area: chip;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    align-self: 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-today-face > .gallery-today-chip[data-sky="sun"] { background: var(--gallery-today-sun-soft); color: var(--gallery-today-sun); }
-  > .gallery-today-face > .gallery-today-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-today-face > .gallery-today-chip[data-sky="moon"] { background: var(--gallery-accent-soft); color: var(--gallery-accent-ink); }
+  > .gallery-today-face > .gallery-today-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
   > .gallery-today-face > .gallery-today-date {
     grid-area: date;
-    display: block;
+    align-self: center;
     min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     font-size: var(--gallery-title-size);
-    line-height: 18px;
-    color: var(--doc-muted);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text);
   }
-  /* The number of the week, the head's quiet meta at its end, at the content's edge, faded while the card's grip shows. */
   > .gallery-today-face > .gallery-today-meta {
     grid-area: meta;
-    opacity: calc(1 - var(--gallery-grip-shown, 0));
-    transition: opacity .12s ease-out;
+    align-self: center;
     font-size: var(--gallery-meta-size);
-    line-height: 18px;
-    color: var(--doc-muted);
+    line-height: var(--gallery-title-line);
+    color: var(--gallery-faint);
     white-space: nowrap;
   }
-  /* The date in the text's color, its weekday muted; they break between them, never inside either. */
-  > .gallery-today-face > .gallery-today-date > span { display: inline-block; }
-  > .gallery-today-face > .gallery-today-date > span:not(.gallery-today-weekday) { color: var(--gallery-text-strong); font-weight: 600; }
   > .gallery-today-face > .gallery-today-greeting {
     grid-area: greeting;
-    align-self: center;
-    margin: 0;
-    font-size: clamp(24px, 10.5cqi, 48px);
-    line-height: 1.15;
+    margin: 8px 0 0;
+    font-size: 28px;
+    line-height: 34px;
     font-weight: 600;
-    letter-spacing: -.02em;
+    letter-spacing: .02em;
     color: var(--gallery-text-strong);
-    overflow-wrap: anywhere;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   > .gallery-today-face > .gallery-today-week {
     grid-area: week;
+    align-self: end;
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));
-    gap: 2px;
-    margin: 8px 0 0;
+    gap: 4px;
+    margin: 0;
     padding: 0;
     list-style: none;
   }
@@ -87,34 +84,66 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 3px;
-    padding: 4px 0;
-    border-radius: 8px;
+    justify-content: center;
+    height: 38px;
+    border-radius: 9px;
+  }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-initial { font-size: 10.5px; line-height: 14px; color: var(--gallery-faint); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-number { font-size: 13px; line-height: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gallery-text); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-past > .gallery-today-number { font-weight: 500; color: var(--gallery-faint); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now { background: var(--gallery-accent); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-initial { color: rgb(255 255 255 / 82%); }
+  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-number { color: #fff; }
+  > .gallery-today-face > :is(.gallery-today-big, .gallery-today-foot) { display: none; }
+  > .gallery-today-face > .gallery-today-big {
+    grid-area: big;
+    align-self: end;
+    font-size: 56px;
     line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: -.04em;
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
   }
-  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-initial { font-size: 11px; color: var(--doc-muted); }
-  > .gallery-today-face > .gallery-today-week > .gallery-today-day > .gallery-today-number { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--doc-muted); }
-  > .gallery-today-face > .gallery-today-week > .gallery-today-past { opacity: .55; }
-  > .gallery-today-face > .gallery-today-week > .gallery-today-now { background: var(--gallery-neutral-soft); }
-  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-initial,
-  > .gallery-today-face > .gallery-today-week > .gallery-today-now > .gallery-today-number { color: var(--gallery-accent); font-weight: 600; }
-}
-/* A narrow card (2 wide): no week, no week's number; the greeting in the middle of the room under the date. */
-@container (max-width: 260px) {
-  [data-doc-component="gallery/today"] > .gallery-today-face { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "chip date" "greeting greeting"; }
-  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-date { padding-inline-end: var(--gallery-grip-room, 0px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-date > .gallery-today-weekday { display: none; }
-  [data-doc-component="gallery/today"] > .gallery-today-face > :is(.gallery-today-week, .gallery-today-meta) { display: none; }
-  [data-doc-component="gallery/today"] > .gallery-today-face > .gallery-today-greeting { font-size: clamp(24px, 15cqi, 44px); }
+  > .gallery-today-face > .gallery-today-foot { grid-area: foot; margin-top: 8px; font-size: 12.5px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-today-face > .gallery-today-foot > .gallery-today-dot { margin: 0 5px; color: var(--gallery-faintest); }
+
+  /* A narrow card: a page of a desk calendar. */
+  > .gallery-today-face[data-layout="narrow"] {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: 20px 1fr auto;
+    grid-template-areas: "chip greeting" "big big" "foot foot";
+  }
+  > .gallery-today-face[data-layout="narrow"] > :is(.gallery-today-date, .gallery-today-meta, .gallery-today-week) { display: none; }
+  > .gallery-today-face[data-layout="narrow"] > :is(.gallery-today-big, .gallery-today-foot) { display: block; }
+  > .gallery-today-face[data-layout="narrow"] > .gallery-today-greeting {
+    align-self: center;
+    margin: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    letter-spacing: 0;
+    color: var(--gallery-text);
+  }
+  /* A card one cell high: a line. */
+  > .gallery-today-face[data-layout="line"] {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-rows: 1fr;
+    grid-template-areas: "chip greeting date";
+    align-items: center;
+  }
+  > .gallery-today-face[data-layout="line"] > :is(.gallery-today-meta, .gallery-today-week) { display: none; }
+  > .gallery-today-face[data-layout="line"] > .gallery-today-greeting { margin: 0; font-size: 15px; line-height: 20px; letter-spacing: 0; }
+  > .gallery-today-face[data-layout="line"] > .gallery-today-date { margin-inline-start: 4px; padding-inline-end: var(--gallery-grip-room, 0px); font-weight: 400; color: var(--gallery-muted); }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding, and its
-   glow the whole card's, from its edges (the face taken out over the card's padding and given it back). */
+/* On a custom page the face is the card's: as high as what the card holds inside its padding, and its glow
+   the whole card's, from its edges (the face taken out over the card's padding and given it back). */
 .gallery-card > [data-doc-component="gallery/today"] { height: 100%; }
 .gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face {
   height: calc(100% + 2 * var(--gallery-card-pad));
   margin: calc(-1 * var(--gallery-card-pad));
   padding: var(--gallery-card-pad);
-  border-radius: calc(var(--gallery-card-radius) - 1px);
-  background: linear-gradient(160deg, var(--gallery-today-glow) 0%, transparent 62%);
+  border-radius: var(--gallery-card-radius);
+  background: radial-gradient(110% 100% at 0% 0%, var(--gallery-today-glow), transparent 62%);
 }
-.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face[data-sky="moon"] { background: linear-gradient(160deg, var(--gallery-today-glow-evening) 0%, transparent 62%); }
+.gallery-card > [data-doc-component="gallery/today"] > .gallery-today-face[data-sky="moon"] { background: radial-gradient(110% 100% at 0% 0%, var(--gallery-today-glow-evening), transparent 62%); }

package/packs/gallery/today/writing.md

@@ -6,9 +6,9 @@ A card for a custom page (its places are `page`): a greeting by the time of day
 
 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 today`: the instance is empty, `<div data-doc-component="gallery/today"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes.
 
-- Sizes: 4 × 2 (the default: the date at the top, the greeting in the middle, the week at the bottom) and 2 × 2 (the date and the greeting, no week). The user may switch between them.
+- Sizes: 4 × 2 (the default: the date and the week's number at the top, the greeting large, this week at the bottom), 2 × 2 (a page of a desk calendar: the greeting, today's day of the month large, its weekday and month) and 4 × 1 (one line: the greeting and the date). The user may switch between them.
 - Its places hold no document: no document's menu offers it. In a document it would show the same words, framed by nothing.
 
 ## How it looks
 
-The date beside a chip of the sun (by day) or the moon (in the evening) at the top, the number of the week (第 46 周) at its end, the greeting large in the middle, a soft glow at the card's top left (warm by day, the accent's blue in the evening), and on a card wide enough the week it is in at the bottom, Monday to Sunday, today's 今 over its date and marked (a 2 × 2 card's top line the date alone, no weekday); 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 changes by itself: the greeting as the hour turns (it hears the kit's clock each minute), the date at midnight. 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. The chip is the sun in its warm color by day and the moon in the accent's in the evening, and so is a soft glow at the card's top left, the one mood of a home page. On a 4 × 2 card the greeting is 28px and this week sits at the bottom, seven days, the days gone fainter, today the one solid square of the accent; a 2 × 2 card is a page of a desk calendar, today's day of the month 56px; a 4 × 1 card one line. It changes by itself: the greeting as the hour turns (it hears the kit's clock each minute), the date at midnight. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/todos/component.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery/todos",
   "apiVersion": 1,
-  "version": "1.3.0",
+  "version": "2.0.0",
   "name": { "zh": "我的待办", "en": "My to-dos" },
   "description": { "zh": "所有文档里没完成的待办：勾选就写回那篇文档，点文字打开它", "en": "The to-dos of every document not done yet: check one in its document, or click it to open it there" },
   "words": "wodedaiban daiban renwu todo todos tasks checklist 待办 任务 清单 我的待办 没完成",