/* public/styles/wallpapers.css * * ⚠️ 生成物 —— 不要手改。改 src/lib/wallpapers.ts 之后跑 `npm run wallpapers`。 * 构建期会拿这个文件和注册表重新渲染的结果逐字节比对，不一致直接报错 * （见 astro.config.mjs 的 assertWallpapersInSync）。 * * 为什么必须自包含：6 个 free-convert 页是独立文档（自己写 ， * 只 import SeoHead/LegalLinks），不加载 BaseLayout 的全局样式，所以 --wp-* * 全部在这里定义，不能依赖别处的 :root。 * * 两层间接： * html[data-wp="<主题>"] 决定 5 个槽位变量 --wp- 指向哪个文件； * 媒体查询按视口宽高比把 --wp-url 指到其中一个槽位。 * 规则数是 O(主题 + 断点)，不是 O(主题 × 尺寸)。 * * 另外 --wp-slot-bounds / --wp-slot-names 把分界表也交给客户端脚本读， * 免得 JS 再抄一份常量（见 public/scripts/wallpaper-theme.js）。 */ :root { --wp-phone: url('/assets/wallpapers/morandi-mobile-a.svg'); --wp-tablet: url('/assets/wallpapers/morandi-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/morandi-16-10-laptop.svg'); --wp-desktop: url('/assets/wallpapers/morandi-16-9-desktop-a.svg'); --wp-ultrawide: url('/assets/wallpapers/morandi-21-9-ultrawide.svg'); --wp-url: var(--wp-desktop); --wp-slot-bounds: 0.65 1 1.7 2.1; --wp-slot-names: phone tablet laptop desktop ultrawide; } html[data-wp='bauhaus'] { --wp-phone: url('/assets/wallpapers/bauhaus-mobile-9-19.svg'); --wp-tablet: url('/assets/wallpapers/bauhaus-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/bauhaus-laptop-16-10.svg'); --wp-desktop: url('/assets/wallpapers/bauhaus-desktop-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/bauhaus-21-9-ultrawide.svg'); } html[data-wp='botanical'] { --wp-phone: url('/assets/wallpapers/botanical-mobile-9-19.svg'); --wp-tablet: url('/assets/wallpapers/botanical-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/botanical-16-10.svg'); --wp-desktop: url('/assets/wallpapers/botanical-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/botanical-21-9-ultrawide.svg'); } html[data-wp='construct'] { --wp-phone: url('/assets/wallpapers/construct-mobile-9-19.svg'); --wp-tablet: url('/assets/wallpapers/construct-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/construct-16-10.svg'); --wp-desktop: url('/assets/wallpapers/construct-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/construct-21-9-ultrawide.svg'); } html[data-wp='sunset'] { --wp-phone: url('/assets/wallpapers/sunset-mobile-9-19.svg'); --wp-tablet: url('/assets/wallpapers/sunset-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/sunset-16-10.svg'); --wp-desktop: url('/assets/wallpapers/sunset-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/sunset-21-9-ultrawide.svg'); } html[data-wp='tropical'] { --wp-phone: url('/assets/wallpapers/tropical-mobile-9-19.svg'); --wp-tablet: url('/assets/wallpapers/tropical-tablet-4-3.svg'); --wp-laptop: url('/assets/wallpapers/tropical-16-10.svg'); --wp-desktop: url('/assets/wallpapers/tropical-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/tropical-21-9-ultrawide.svg'); } html[data-wp='zen-ink'] { --wp-phone: url('/assets/wallpapers/zen-ink-9-19.svg'); --wp-tablet: url('/assets/wallpapers/zen-ink-4-3.svg'); --wp-laptop: url('/assets/wallpapers/zen-ink-16-10.svg'); --wp-desktop: url('/assets/wallpapers/zen-ink-16-9.svg'); --wp-ultrawide: url('/assets/wallpapers/zen-ink-21-9-ultrawide.svg'); } /* 按视口宽高比选构图。 * * ⚠️ 除 desktop 槽位外每条都必须带 var(--x, var(--wp-desktop)) 兜底：槽位变量 * 缺失时整条自定义属性会失效，background-image 变成 unset —— 壁纸整个消失， * 而不是选错图。desktop 自己就是兜底目标，写 var(--wp-desktop, var(--wp-desktop)) * 会变成自引用（循环引用在计算值阶段直接失效），所以那条不带 fallback。 * * 分界取法见 src/lib/wallpapers.ts 的 RATIO_BOUNDS。边界上两条都命中，后写的赢 * （也就是更宽的那个槽位），与 slotForViewport 的严格小于一致。 */ @media (max-aspect-ratio: 13/20) { :root { --wp-url: var(--wp-phone, var(--wp-desktop)); } } @media (min-aspect-ratio: 13/20) and (max-aspect-ratio: 1/1) { :root { --wp-url: var(--wp-tablet, var(--wp-desktop)); } } @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 17/10) { :root { --wp-url: var(--wp-laptop, var(--wp-desktop)); } } @media (min-aspect-ratio: 17/10) and (max-aspect-ratio: 21/10) { :root { --wp-url: var(--wp-desktop); } } @media (min-aspect-ratio: 21/10) { :root { --wp-url: var(--wp-ultrawide, var(--wp-desktop)); } } /* JS 精修：wallpaper-theme.js 按真实宽高比设 html[data-wp-size]。 * 属性选择器特异性 (0,1,1) 高于 :root 的 (0,1,0)，所以能盖住上面的媒体查询。 * 同时也兜住不支持 aspect-ratio 媒体查询的老浏览器。 */ html[data-wp-size='phone'] { --wp-url: var(--wp-phone, var(--wp-desktop)); } html[data-wp-size='tablet'] { --wp-url: var(--wp-tablet, var(--wp-desktop)); } html[data-wp-size='laptop'] { --wp-url: var(--wp-laptop, var(--wp-desktop)); } html[data-wp-size='desktop'] { --wp-url: var(--wp-desktop); } html[data-wp-size='ultrawide'] { --wp-url: var(--wp-ultrawide, var(--wp-desktop)); }