nageyqma·git

note

HTTPS https://git.nageyqma.icu/nageyqma/note.git SSH git@git.nageyqma.icu:nageyqma/note.git

HTTPS 链接可直接 git clone；推送代码请使用 SSH。

6.5 KB · 164 行raw
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
{{- /* ============================================================
     首页与分类版块页背景注入区（覆盖主题同名局部）
     全幅插画背景：圆形主楼（柱形鼓楼 + 中央塔楼圆窗），与主站
     星期背景同一套扁平手绘语言。亮色 = 黄昏暖金，暗色 = 星夜暖灯。
     作用范围：首页 + 主导航的 Categories 版块页（/categories/ 总览
     与 /categories/<版块>/）；文章页（single）不注入，不受影响。
     ============================================================ */ -}}
{{- /* Categories 版块页判定：taxonomy 总览页与 term 版块页，
       categories 分类法的 singular 固定为 category */ -}}
{{- $isCategoryPage := false -}}
{{- if in (slice "taxonomy" "term") .Kind -}}
{{- $isCategoryPage = eq .Data.Singular "category" -}}
{{- end -}}
{{- if or .IsHome $isCategoryPage -}}
<style>
  /* ===== 固定全幅背景层：body 双伪元素，按主题交叉淡入 =====
     - 横竖屏媒体查询换用横版/竖版两套独立构图（非裁切缩放）；
     - 跟随 PaperMod 的 <html data-theme>（首帧前已解析为 light/dark，
       无 JS 时停留在 auto，用系统偏好媒体查询兜底）。 */

  /* 底色兜底：插画未加载完成或加载失败时不发白/发黑 */
  html { background: #f4e7cf; transition: background-color 1.4s ease; }
  html[data-theme='dark'] { background: #101d33; }

  /* body 自带的实色底让位（负 z-index 的背景层绘制在 body 底色之上、
     内容之下），底色改由 html 承担 */
  body.list { background: transparent; }
  html[data-theme='dark'] body.list { background: transparent; }

  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    /* 拉长昼夜交叉淡入：标准缓动 + 1.4s，切换过程清晰可感 */
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* 黄昏层（亮色主题显示） */
  body::before {
    background-image: url('/backgrounds/campus-main-building-landscape-day.svg');
    opacity: 1;
  }
  /* 星夜层（暗色主题显示） */
  body::after {
    background-image: url('/backgrounds/campus-main-building-landscape-night.svg');
    opacity: 0;
  }
  /* 竖屏（宽 ≤ 高）换竖版构图 */
  @media (orientation: portrait) {
    body::before { background-image: url('/backgrounds/campus-main-building-portrait-day.svg'); }
    body::after { background-image: url('/backgrounds/campus-main-building-portrait-night.svg'); }
  }
  /* 主题切换：两层交叉淡入 */
  html[data-theme='dark'] body::before { opacity: 0; }
  html[data-theme='dark'] body::after { opacity: 1; }
  /* 无 JS 兜底：data-theme 停留在 auto 时跟随系统偏好 */
  @media (prefers-color-scheme: dark) {
    html[data-theme='auto'] body::before { opacity: 0; }
    html[data-theme='auto'] body::after { opacity: 1; }
  }

  /* 主题切换时正文文字颜色与背景同步渐变，避免「背景在淡入、文字瞬跳」 */
  body { transition: color 1.4s ease; }

  /* =====「画框」留白：首屏先露天空与主楼 =====
     首页大画框（约半屏，露出主楼冠部与圆窗）；
     版块页小画框（页标题浮于天际，卡片随后压在主楼之上）。 */
  {{- if .IsHome }}
  .main { padding-top: clamp(260px, 52vh, 520px); }
  {{- else }}
  .main { padding-top: clamp(160px, 34vh, 340px); }
  {{- end }}

  /* ===== 内容面板毛玻璃化（与主站面板、glass-header.css 同款取色） ===== */
  .first-entry {
    padding: var(--gap);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    transition: background-color 1.4s ease, border-color 1.4s ease;
  }
  /* 保留主题自带的悬停上浮过渡，仅追加配色渐变 */
  .post-entry {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    transition: transform 0.25s ease, background-color 1.4s ease, border-color 1.4s ease;
  }
  html[data-theme='dark'] .first-entry {
    background: rgba(15, 27, 46, 0.55);
    border-color: rgba(146, 176, 214, 0.32);
  }
  html[data-theme='dark'] .post-entry {
    background: rgba(15, 27, 46, 0.5);
    border-color: rgba(146, 176, 214, 0.32);
  }

  {{- /* 以下两项只出现在版块页：页头标题面板 + 「全部分类」药丸 */ -}}
  {{- if not .IsHome }}
  .page-header {
    padding: var(--gap);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    transition: background-color 1.4s ease, border-color 1.4s ease;
  }
  .terms-tags a {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    transition: background-color 1.4s ease, border-color 1.4s ease;
  }
  html[data-theme='dark'] .page-header {
    background: rgba(15, 27, 46, 0.55);
    border-color: rgba(146, 176, 214, 0.32);
  }
  html[data-theme='dark'] .terms-tags a {
    background: rgba(15, 27, 46, 0.5);
    border-color: rgba(146, 176, 214, 0.32);
  }
  {{- end }}

  /* 头部/页脚毛玻璃底色与背景同节奏渐变（样式来自 glass-header.css） */
  .header,
  .footer { transition: background-color 1.4s ease, border-color 1.4s ease; }

  /* 回退：不支持毛玻璃时用高不透明度纯色，保证可读 */
  @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .first-entry,
    .post-entry,
    .page-header,
    .terms-tags a { background: rgba(255, 255, 255, 0.96); }
    html[data-theme='dark'] .first-entry,
    html[data-theme='dark'] .post-entry,
    html[data-theme='dark'] .page-header,
    html[data-theme='dark'] .terms-tags a { background: rgba(13, 23, 40, 0.97); }
  }

  /* 尊重「减少动态」偏好：所有切换不做过渡，直接呈现 */
  @media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    body,
    html,
    .header,
    .footer,
    .first-entry,
    .post-entry,
    .page-header,
    .terms-tags a { transition: none; }
  }
</style>
{{- end -}}