feat(theme): redesign the homepage around the mascot and the projects

.vitepress/theme/components/SiteFooter.vue

@@ -46,7 +46,7 @@ const other = computed(() => (zh.value ? { text: 'English', href: '/' } : { text
   <footer class="site-footer" :class="{ 'has-sidebar': hasSidebar }">
     <div class="inner">
       <div class="brand">
-        <img class="face" src="/mascot/avatar.webp" alt="" />
+        <img class="face" src="/mascot/logo-mark.webp" alt="" />
         <div>
           <p class="name">clice.io</p>
           <p class="line">{{ zh ? '下一代 C++ 工具链' : 'Next generation C++ tooling' }}</p>
@@ -115,14 +115,10 @@ const other = computed(() => (zh.value ? { text: 'English', href: '/' } : { text
   gap: 14px;
 }
 
+/* The site logo; its ring is part of the image. */
 .face {
-  width: 56px;
-  height: 56px;
-  border: var(--line) solid var(--line-color);
-  border-radius: 999px;
-  background: #ffffff;
-  object-fit: cover;
-  object-position: center 30%;
+  width: 60px;
+  height: 60px;
 }
 
 .brand p {

.vitepress/theme/index.ts

@@ -8,10 +8,10 @@ import HomeLanding from './components/HomeLanding.vue'
 import Mermaid from './components/Mermaid.vue'
 import SiteFooter from './components/SiteFooter.vue'
 import SnapExample from './components/SnapExample.vue'
-import '@fontsource/m-plus-rounded-1c/400.css'
-import '@fontsource/m-plus-rounded-1c/500.css'
-import '@fontsource/m-plus-rounded-1c/700.css'
-import '@fontsource/m-plus-rounded-1c/900.css'
+import '@fontsource/nunito/400.css'
+import '@fontsource/nunito/500.css'
+import '@fontsource/nunito/700.css'
+import '@fontsource/nunito/900.css'
 import '@fontsource/zen-kaku-gothic-new/700.css'
 import '@fontsource/zen-kaku-gothic-new/900.css'
 import '@fontsource/noto-sans-sc/400.css'

.vitepress/theme/style.css

@@ -139,13 +139,15 @@
   --vp-c-caution-3: var(--ribbon);
   --vp-c-caution-soft: var(--ribbon-soft);
 
+  /* Nunito's soft, rounded Latin keeps the manga warmth and stays legible at
+     body sizes; it has no CJK, so Chinese falls through to one SC font. */
   --vp-font-family-base:
-    "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yuanti SC", "PingFang SC",
-    "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
+    "Nunito", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans CJK SC", system-ui, sans-serif;
   --vp-font-family-mono:
     "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
   --clice-font-display:
-    "Zen Kaku Gothic New", "M PLUS Rounded 1c", "Hiragino Sans", "PingFang SC",
+    "Zen Kaku Gothic New", "Nunito", "Hiragino Sans", "PingFang SC",
     "Noto Sans CJK SC", system-ui, sans-serif;
 
   --vp-nav-bg-color: var(--paper);
@@ -849,8 +851,8 @@ html[lang^="zh"] {
     "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
     "Noto Sans CJK SC", system-ui, sans-serif;
   --vp-font-family-base:
-    "M PLUS Rounded 1c", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
+    "Nunito", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans CJK SC", system-ui, sans-serif;
 }
 
 /* ---------------------------------------------------------------------------
@@ -1212,22 +1214,6 @@ html[lang^="zh"] {
   }
 }
 
-.VPFooter .container {
-  position: relative;
-}
-
-.VPFooter .copyright::before {
-  content: "";
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  margin: -12px 10px -12px 0;
-  border: var(--line) solid var(--line-color);
-  border-radius: 999px;
-  background: var(--panel) url("/mascot/avatar.webp") center 30% / 130% no-repeat;
-  vertical-align: middle;
-}
-
 /* ---------------------------------------------------------------------------
  * Narrow screens: thinner shadows, no side rules
  * ------------------------------------------------------------------------ */

art/README.md

@@ -36,8 +36,21 @@ approved original ink portrait and character sheet; `fav-bust-02` used
 | Output | Path |
 | --- | --- |
 | Navbar logo, 128 px | `public/mascot/logo-mark.webp` |
-| Favicons, 16/32/48/64 px | `public/favicon-*.png` |
+| Favicons, 16/32/48/64 px, and a 16/32/48 `.ico` | `public/favicon-*.png`, `public/favicon.ico` |
 | apple-touch icon, 180 px | `public/apple-touch-icon.png` |
 | VS Code extension icon, 256 px | `logo/exports/vscode-icon.png` |
 
 Requires Python 3 with Pillow: `art/logo/build.sh`.
+
+## home/
+
+| Source | Used for |
+| --- | --- |
+| `sources/hero-quiet-01.png` | Homepage hero (`public/mascot/hero-home.webp`): trimmed to the figure and sized 1120 px tall for 2x displays |
+
+Generated with Codex `image_gen` (gpt-image-2, reasoning effort xhigh): a
+redraw of an earlier clasped-hands candidate that kept its head and fixed the
+body (shoulders following the head tilt, narrower skirt), referencing the
+approved full-body illustration, character sheet and colour portrait. The
+homepage's speech-bubble tail aims at her mouth; its position in the image is
+`HERO.mouth` in `HomeLanding.vue` and needs updating if the image changes.

art/home/build.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# Rebuild the homepage art in ../../public/ from sources/.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+python3 - <<'PY'
+from PIL import Image
+
+
+def hero(src, out):
+    """Trim a figure to her silhouette with a small margin and size it for a
+    2x display at up to 560 px tall."""
+    im = Image.open(src).convert("RGBA")
+    left, top, right, bottom = im.getchannel("A").getbbox()
+    pad = 12
+    im = im.crop((max(left - pad, 0), max(top - pad, 0), min(right + pad, im.width), min(bottom + pad, im.height)))
+    height = 1120
+    im = im.resize((round(im.width * height / im.height), height), Image.LANCZOS)
+    im.save(out, quality=90, method=6)
+
+
+hero("sources/hero-quiet-01.png", "../../public/mascot/hero-home.webp")
+PY

art/home/sources/hero-quiet-01.prompt.txt

@@ -0,0 +1,15 @@
+Use case: website hero illustration, character layer, a corrected redraw. On the website this figure stands in a tall panel on the LEFT of the hero; the headline is an HTML speech bubble to her RIGHT whose tail points at her mouth. The bubble is NOT part of this image.
+Image 1 is the previous candidate. KEEP HER HEAD EXACTLY: face, eyes, the gentle open smile, the head tilt, hair shape, dark navy headband, the cornflower-blue bow with its small warm-gold C-shaped clasp, and the single short braid on HER LEFT (viewer's right). Also keep the idea of the pose: standing quietly with both hands lightly clasped in front at hip height.
+Image 2 is the approved full-body illustration: authoritative for BODY PROPORTIONS (shoulder width, arm length, skirt flare and length, leg length), the outfit and the pen and colour language.
+Image 3 is the approved character sheet: hair, braid side, headband, bow.
+Image 4 is the approved colour portrait: the bow's centre piece is a small warm-gold C-shaped clasp (the letter c, open on its right side); it must stay clearly readable as a C.
+
+Fix these problems of Image 1, which make her head look pasted onto a stiff body:
+1. The body ignores the head tilt. Make the body respond to it: the shoulders tilt with the head (the shoulder on the side her head leans towards sits a little lower), a slight natural S-curve through the torso, nothing mirror-symmetric.
+2. The shoulders are too narrow. Use the shoulder width of Image 2, with the hair mass only slightly wider than the shoulders. Upper arms hang naturally from the shoulders with the elbows a little away from the body; hands lightly clasped in front at hip height, hands a little smaller than in Image 1.
+3. The skirt is too wide. Use an A-line skirt with moderate flare like Image 2: hem about 1.6 times the shoulder width, ending just above the knee, legs as long as in Image 2.
+4. The skirt pocket is fully visible and clearly reads as a pocket, not hidden behind a wrist.
+5. Let a little of her shoulder show below the hair on the viewer's left, and reduce the sideways hair flick at eye level on the viewer's right.
+Stance: knees close together, one heel lifted slightly off the ground with only the toe touching, a small shy, cute stance.
+The overall impression is CUTE, GENTLE and QUIET. Expression: warm gentle smile with the mouth slightly open as if softly speaking, eyes soft and friendly, looking at the viewer. Pen and colour language of Image 2: confident hand-inked navy lines with thick-thin variation, sparse directional hatching, flat fills (straw-blonde hair, blue eyes, white blouse with thin red neck ribbon, blue pinafore dress, white socks, navy shoes), no gradients, airbrushed blush, glow or glossy highlights. Hands drawn simply and correctly.
+Canvas: portrait 1024 x 1536. The whole figure is visible with small margins, feet near the bottom. Background fully transparent; every area inside her silhouette fully opaque. No text, speech bubble, props, frame, floor shadow or other elements.

art/logo/build.sh

@@ -32,6 +32,10 @@ for size in (16, 32, 48, 64):
         # A light unsharp mask keeps the eyes from dissolving at tab size.
         im = im.filter(ImageFilter.UnsharpMask(radius=0.6, percent=80, threshold=0))
     im.save(f"{PUBLIC}favicon-{size}.png")
+# Some clients request /favicon.ico regardless of the <link> tags.
+Image.open(f"{PUBLIC}favicon-48.png").save(
+    PUBLIC + "favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)],
+    append_images=[Image.open(f"{PUBLIC}favicon-{n}.png") for n in (16, 32)])
 Image.open("masters/apple-touch.png").convert("RGB").resize((180, 180), Image.LANCZOS).save(
     PUBLIC + "apple-touch-icon.png")
 Image.open("masters/vscode-icon.png").resize((256, 256), Image.LANCZOS).save("exports/vscode-icon.png")

package.json

@@ -15,9 +15,8 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.3.0",
-    "@fontsource/kosugi-maru": "^5.3.0",
-    "@fontsource/m-plus-rounded-1c": "^5.3.0",
     "@fontsource/noto-sans-sc": "^5.3.0",
+    "@fontsource/nunito": "^5.3.0",
     "@fontsource/zen-kaku-gothic-new": "^5.3.0"
   }
 }