修窄屏装饰层压不住作用域块(手机上一直显示桌面版樱花)
@media 不提升特异性:作用域块 html[data-theme-style][data-page-scope="box"] 是 (0,2,1), 媒体查询里写的 html[data-theme-style] 只有 (0,1,1),于是「窄屏装饰层全置 none」这行 从来没生效 —— 手机上照样铺开桌面的花枝与花朵。深色作用域块是 (0,3,1),更压不住。 - 媒体查询里补三条同特异性的通配规则(作用域 0,2,1 / 深色基础 0,2,1 / 深色+作用域 0,3,1), 媒体块在文件更后,同特异性即胜出。 - 新增 TestNarrowMediaOverridesScopedDeco:外层每处非 none 的 --tb-deco,都要求窄屏里有 同属性名、属性数不少于它的声明。变异验证过(删掉深层那条立即 FAIL)。 它同时报出 shiroko 的 900px 块只覆盖浅色 —— 但深色块本就是 none,不算缺陷,故跳过。 - 窄屏改由加强版底纹承担樱花(透明度 ×1.9、格子 180px):桌面那套 0.18~0.34 的透明度 在 390px 上实测接近纯粉。顶栏与卡片之间那条 35px 带子试过放小花,question/admin 页卡片 从 y=110 起会切掉一半,最终不放装饰层。
This commit is contained in:
@@ -92,7 +92,10 @@ def branch(wood, light, deep, heart, flip=False):
|
||||
# 密度是刻意的:最早一版放了 2 朵花 + 2 片瓣并且 260px 平铺,页面上读出来是
|
||||
# 「整齐的包装纸」——因为每个元素都在固定格点上重复。现在只留 1 朵 + 2 片,
|
||||
# 尺寸放大到 300px 且各自错位,平铺时才看不出周期。
|
||||
def pattern(light):
|
||||
def pattern(light, strong=False):
|
||||
"""平铺底纹。strong 给窄屏用:那里装饰层全关,底纹是屏幕上唯一的樱花,
|
||||
照桌面那套 0.18~0.34 的透明度在 390px 上基本看不出来(实测截图接近纯粉底)。"""
|
||||
k = 1.9 if strong else 1.0
|
||||
one = (
|
||||
'<g fill="%s">' % light
|
||||
+ "".join(f'<ellipse cx="50" cy="27" rx="14" ry="21" transform="rotate({a} 50 50)"/>'
|
||||
@@ -101,13 +104,14 @@ def pattern(light):
|
||||
)
|
||||
petal_path = ('<path d="M20 1c9 0 15 8 15 18 0 5-2 9-4 12l-4-5-7 9-7-9-4 5'
|
||||
'c-2-3-4-7-4-12C5 9 11 1 20 1z" fill="%s"/>')
|
||||
o = lambda v: min(0.92, round(v * k, 2))
|
||||
return (
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">'
|
||||
f'<g transform="translate(96 84) scale(0.34) translate(-50 -50)" opacity="0.34">{one}</g>'
|
||||
f'<g transform="translate(236 208) rotate(28) scale(0.26)" opacity="0.24">'
|
||||
f'<g transform="translate(96 84) scale(0.34) translate(-50 -50)" opacity="{o(0.34)}">{one}</g>'
|
||||
f'<g transform="translate(236 208) rotate(28) scale(0.26)" opacity="{o(0.24)}">'
|
||||
+ (petal_path % light) +
|
||||
"</g>"
|
||||
f'<g transform="translate(188 52) rotate(-34) scale(0.2)" opacity="0.18">'
|
||||
f'<g transform="translate(188 52) rotate(-34) scale(0.2)" opacity="{o(0.18)}">'
|
||||
+ (petal_path % light) +
|
||||
"</g>"
|
||||
"</svg>"
|
||||
@@ -140,6 +144,7 @@ def uris(p, asset_base=""):
|
||||
"branch_l": 'url("%s/branch-left.webp")' % b,
|
||||
"branch_r": 'url("%s/branch-right.webp")' % b,
|
||||
"pattern": 'url("%s/pattern.webp")' % b,
|
||||
"pattern_narrow": 'url("%s/pattern.webp")' % b,
|
||||
}
|
||||
return {
|
||||
"blossom_l": uri(blossom(p["light"], p["deep"], p["heart"])),
|
||||
@@ -147,6 +152,7 @@ def uris(p, asset_base=""):
|
||||
"branch_l": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=True)),
|
||||
"branch_r": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=False)),
|
||||
"pattern": uri(pattern(p["pattern"])),
|
||||
"pattern_narrow": uri(pattern(p["pattern"], strong=True)),
|
||||
}
|
||||
|
||||
|
||||
@@ -213,8 +219,12 @@ SCOPES = {
|
||||
("var(--sk-petal)", "28px", "right 18% top 27%"),
|
||||
("var(--sk-blossom)", "auto 52px", "right 6% bottom 8%"),
|
||||
],
|
||||
# 窄屏:卡片占满宽度,留白只剩顶栏上下那两条 —— 装饰层放什么都没有立足之地,
|
||||
# 樱花改由底纹承担(@media 里把 pattern 缩小到 200px,密度上来才看得出来)
|
||||
# 窄屏:卡片占满宽度,左右只剩 ~16px 边距,花枝放哪儿都糊在字上。
|
||||
# 实测底纹铺在 16px 边距里根本落不到花 —— 花朵在格子里的位置固定在 x≈58,
|
||||
# 所以只在「顶栏与卡片之间」那条 30px 的横带里放几朵小的,其余交给加强底纹。
|
||||
# 试过在「顶栏与卡片之间」那条 ~35px 的带子里放小樱花:box 页卡片从 y=122 起还行,
|
||||
# question/admin 页卡片从 y=110 起就把它切掉半个,结果是贴在卡片边上的粉色碎块。
|
||||
# 手机上没有可靠的留白,干脆不放装饰层 —— 观感交给配色与底纹(加强版 pattern)。
|
||||
"narrow": [],
|
||||
}
|
||||
|
||||
@@ -320,13 +330,30 @@ html[data-theme="dark"][data-theme-style="new-sakura"] {{
|
||||
f'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="{key}"]',
|
||||
SCOPES[key]) + "\n"
|
||||
|
||||
# 作用域块的选择器是 html[data-theme-style][data-page-scope="box"](特异性 0,2,1),
|
||||
# 比 html[data-theme-style] (0,1,1)高 —— 光写一条压不住,窄屏照样是桌面版装饰。
|
||||
# 所以用同等特异性的通配属性选择器再写一遍,靠「在文件里更晚」取胜;
|
||||
# 深色作用域块是 0,3,1,还得再补一条。
|
||||
narrow_rules = ""
|
||||
for sel in (
|
||||
'html[data-theme-style="new-sakura"][data-page-scope]',
|
||||
'html[data-theme="dark"][data-theme-style="new-sakura"]',
|
||||
'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope]',
|
||||
):
|
||||
narrow_rules += " %s {\n%s }\n" % (
|
||||
sel, deco_block_inline(SCOPES["narrow"], indent=" "))
|
||||
|
||||
narrow = (
|
||||
"\n@media (max-width: 640px) {\n"
|
||||
' html[data-theme-style="new-sakura"] {\n'
|
||||
+ deco_block_inline(SCOPES["narrow"], indent=" ")
|
||||
+ " /* 手机上唯一的留白是顶栏上下两条,装饰层没有立足之地 —— 缩小底纹让樱花密起来 */\n"
|
||||
" --tb-page-pattern-size: 200px 200px;\n"
|
||||
" }\n}\n"
|
||||
+ " /* 手机上装饰层整个收掉(卡片占满宽度),樱花只能由底纹承担:\n"
|
||||
" 换成加强版 + 缩小格子,否则 390px 上看就是一片纯粉 */\n"
|
||||
" --tb-page-pattern: %s;\n" % u["pattern_narrow"]
|
||||
+ " --tb-page-pattern-size: 180px 180px;\n"
|
||||
" }\n"
|
||||
+ narrow_rules
|
||||
+ "}\n"
|
||||
)
|
||||
|
||||
return HEADER + body + dark_block + narrow + FOOTER
|
||||
|
||||
Reference in New Issue
Block a user