yuanzonghao
8f94d3aa65
Revises the InfiPlot homepage from the initial prototype pass.
Stories data model
- Replaces the artificial 7-hero + 16-gallery split with a flat
per-gender model: 30 preset stories each for 男性向 / 女性向.
- Renames assets hero*/gallery* → m{0..29} / f{0..29}; same index
shares aspect ratio across genders so the gender crossfade never
jumps card height.
- Fills in the missing 女性向 set and expands both genders to 30.
Cards
- StoryCard measures aspect ratio at runtime from the loaded image
(onLoad → naturalWidth/Height), fixing the frosted-caption band
reflow on lazy image load. Drops ready/fallback props; single
masonry map over STORIES[gender].
Hero input
- Single-line <input> → auto-growing <textarea> (rows=1, resize-none)
so long prompts and long card seeds are fully visible. Enter submits,
Shift+Enter inserts a newline.
- lining-nums on the input so digits sit on the baseline instead of
Cormorant's default old-style figures.
Typography / styles
- layout.tsx: editorial fonts (Cormorant Garamond + Inter via
--font-serif / --font-sans) + Font Awesome; drops Patrick Hand /
Noto Sans SC and the hand-drawn SVG jitter filters.
- globals.css trimmed to the editorial base (paper grain, hairline,
num, ripple); play/page.tsx font/style follow-up.
Scripts
- generate-home-images.mjs reworked into a flat 2×30 idempotent
Runware FLUX.2 generator.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
69 lines
1.2 KiB
CSS
69 lines
1.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
font-feature-settings: "ss01", "kern", "liga";
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-image:
|
|
radial-gradient(rgba(133, 79, 37, 0.025) 1px, transparent 1px),
|
|
radial-gradient(rgba(133, 79, 37, 0.018) 1px, transparent 1px);
|
|
background-size: 28px 28px, 38px 38px;
|
|
background-position: 0 0, 14px 19px;
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgb(217 122 46 / 0.28);
|
|
color: #2d1810;
|
|
}
|
|
|
|
textarea::placeholder {
|
|
color: rgb(168 105 59 / 0.45);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.hairline {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
rgba(45, 24, 16, 0.18) 18%,
|
|
rgba(45, 24, 16, 0.18) 82%,
|
|
transparent
|
|
);
|
|
height: 1px;
|
|
}
|
|
|
|
.hairline-full {
|
|
height: 1px;
|
|
background: rgba(45, 24, 16, 0.14);
|
|
}
|
|
|
|
.num {
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
}
|
|
|
|
.smallcaps {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.32em;
|
|
}
|
|
}
|
|
|
|
@keyframes yume-ripple {
|
|
0% {
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0.95;
|
|
}
|
|
100% {
|
|
width: 110px;
|
|
height: 110px;
|
|
opacity: 0;
|
|
}
|
|
}
|