diff --git a/manifest.yaml b/manifest.yaml index 528fb31..d0a75c6 100644 --- a/manifest.yaml +++ b/manifest.yaml @@ -123,8 +123,19 @@ css: /* ---- Typography -------------------------------------------- */ /* Families flow through the admin-bound CSS variables; the fallback leads with the bundled OFL family so the intended look - survives before the admin assigns a slot. @font-face for the - bundled families is auto-emitted from fonts.json. */ + survives before the admin assigns a slot. + + Bundled display faces. The host does not yet emit @font-face for + bundled_fonts (LoadedPlugin.BundledFonts is unconsumed — CMS dead + code), so the theme declares its own faces against the served + artifact paths (/templates/kindergarten/fonts/...). Presets set + typography.fontHeading/fontBody to template:kindergarten: + so --font-heading/--font-body resolve to these families. Weights + match fonts.json exactly (Baloo 2 700; Quicksand 400/500 share the + 400 file, 700 its own). */ + @font-face { font-family: 'Baloo 2'; src: url('/templates/kindergarten/fonts/baloo2-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } + @font-face { font-family: 'Quicksand'; src: url('/templates/kindergarten/fonts/quicksand-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } + @font-face { font-family: 'Quicksand'; src: url('/templates/kindergarten/fonts/quicksand-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } .kg-body { font-family: var(--font-body, "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif); @@ -374,12 +385,17 @@ css: .kg-btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 4px 0 0 hsl(var(--foreground) / 0.15); } .kg-btn-outline { background-color: hsl(var(--background)); color: hsl(var(--primary)); border: 3px solid hsl(var(--primary)); } - /* Alphabet strip (persona block). */ + /* Alphabet strip (persona block). Aligned to the content column + (same max-width + inline padding as .kg-container) so its left + edge lines up with every other block instead of sitting flush to + the viewport edge; still horizontally scrollable when narrow. */ .kg-alphabet-strip { display: flex; flex-wrap: nowrap; gap: 0.6rem; - padding: 0.6rem 1rem; + max-width: 72rem; + margin-inline: auto; + padding: 0.6rem 1.5rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; diff --git a/presets.json b/presets.json index aafb3f4..cb40247 100644 --- a/presets.json +++ b/presets.json @@ -5,6 +5,10 @@ "description": "The default — crayon blue, red, and yellow. Bright classroom by day, quiet-time navy by night.", "theme": { "mode": "both", + "typography": { + "fontHeading": "template:kindergarten:Baloo 2", + "fontBody": "template:kindergarten:Quicksand" + }, "lightColors": { "background": "48 55% 98%", "foreground": "222 47% 16%", @@ -55,6 +59,10 @@ "description": "Warm red-and-sun classroom by day, soft navy with a glow-star yellow for nap time.", "theme": { "mode": "both", + "typography": { + "fontHeading": "template:kindergarten:Baloo 2", + "fontBody": "template:kindergarten:Quicksand" + }, "lightColors": { "background": "40 70% 97%", "foreground": "20 40% 18%", @@ -105,6 +113,10 @@ "description": "Calm blue-and-teal for reading corners. Deep quiet navy with a teal glow after dark.", "theme": { "mode": "both", + "typography": { + "fontHeading": "template:kindergarten:Baloo 2", + "fontBody": "template:kindergarten:Quicksand" + }, "lightColors": { "background": "205 60% 98%", "foreground": "218 45% 16%", @@ -155,6 +167,10 @@ "description": "Green-and-orange nature play by day, deep teal-navy with a warm glow for winding down.", "theme": { "mode": "both", + "typography": { + "fontHeading": "template:kindergarten:Baloo 2", + "fontBody": "template:kindergarten:Quicksand" + }, "lightColors": { "background": "90 45% 97%", "foreground": "140 35% 15%", @@ -205,6 +221,10 @@ "description": "Playful pink-and-purple for toy shops and party rooms. Plum-navy with a soft glow at night.", "theme": { "mode": "both", + "typography": { + "fontHeading": "template:kindergarten:Baloo 2", + "fontBody": "template:kindergarten:Quicksand" + }, "lightColors": { "background": "330 50% 98%", "foreground": "300 35% 18%",