diff --git a/inc/theme-mourning.php b/inc/theme-mourning.php index ab87b0c..c1165e4 100644 --- a/inc/theme-mourning.php +++ b/inc/theme-mourning.php @@ -258,17 +258,50 @@ function yang_mourning_status_text() ); } /** - * 哀悼期间在页面顶部显示一条提示,链接到说明页 + * 哀悼期间在页面**最顶部正中**显示一条提示,链接到说明页 * - * ── 为什么必须放在顶部 ──────────────────────────────────────── + * ── 为什么必须放在最顶部 ────────────────────────────────────── * 用户的原话是「别人都不知道咋回事,为啥变黑白」。只把入口藏在页脚, * 绝大多数人根本不会看到 —— 他们看到一片灰就关掉了。 - * 所以提示条要出现在**首屏就能看到**的位置。 + * 所以提示条必须出现在**首屏第一眼就看到**的位置:整页最上方、水平居中。 + * + * ── 只在哀悼日出现 ──────────────────────────────────────────── + * 平时打开站点的人不应该看到任何"哀悼说明"的入口 —— 他既没看到黑白, + * 也不知道在对什么致哀,那个入口本身就是困惑源。所以页脚的常驻链接 + * 已经移除,说明页的入口就只在这条提示里。 * * ── 为什么不做成弹窗 ────────────────────────────────────────── * 弹窗会挡住内容,纪念日当天每个访客每次访问都被弹一次,是骚扰。 * 一条可以关闭的细横条才是合适的强度,且关闭状态记在 sessionStorage * (用 session 而不是 localStorage:当天关闭后,第二天不应该还记着)。 + * + * ── 定位方式:占文档流第一行 + 同步下移导航栏 ───────────────── + * 目标是「整页最上方、水平居中」。实现时连撞两次,都靠真实几何测出来: + * + * 第一版:`position:relative`,排进文档流。左右 padding 是 + * `9px 46px 9px 18px`(左 18、右 46,为了给关闭按钮让位), + * 内容整体偏左(实测文字中心 602、视口中心 640,偏 38px)—— + * "最中间"根本没做到。同时它从 y=0 开始、高 40px,而导航栏 + * `.k-nav` 是 `absolute; top:0`、z-index 1030,提示条 z-index 9990 + * ⇒ **压在站点标题上方**(与 `.navbar-brand` 实测重叠 32px),把 Logo 遮住。 + * + * 第二版:改成 `position:fixed; top:0; left:0; right:0`,并给 body 加 + * `padding-top`。居中问题解决了(中心精确等于视口中心),但**重叠仍在 31px**。 + * 原因很隐蔽:`.k-nav` 是 `position:absolute`,它的包含块是初始包含块 + * (视口),**body 的 padding 推不动它**。 + * + * 现在的做法(两件事配合): + * 1. 提示条本身 `position:relative` 占文档流第一行、横跨整宽, + * 内容交给内层 `.ymb-inner` 居中,左右 padding 等宽, + * 关闭按钮 absolute 不占内部流 ⇒ 几何中心 = 视口中心。 + * 它占位后,`.k-header` 会被自然推下去,正文不受影响。 + * 2. 唯独 `.k-nav` 是 absolute,必须单独补一条 + * `body.has-yang-mourning-bar .k-nav{top:var(--ymb-h)}` 把它挪到提示条下方。 + * 没有提示条时该变量不存在、偏移为 0,行为与改动前完全一致。 + * + * 不用 fixed 的理由:fixed 会一直悬浮,滚动看文章时顶部永远压一条深色带, + * 内容从它下面穿过去;而且它不占位,必须靠 padding 补偿,补偿量还算不准 + * (窄屏换行后高度会变)。占文档流第一行没有这些问题。 */ function yang_mourning_notice_bar() { @@ -287,36 +320,67 @@ function yang_mourning_notice_bar() : __('今天是纪念日,本站以黑白致哀。', 'kratos'); ?>
- - - + + + + +
-