Blog優化之客制小區塊紀錄

{{/* 可選參數：
     type: info|warning|note
     title: 自訂標題（預設：文章聲明）
     tone:  normal|bold（預設：normal） */}}
{{ $type := .Get "type"    | default "info" }}
{{ $title := .Get "title"  | default "文章聲明" }}
{{ $tone := .Get "tone"    | default "normal" }}

<aside class="arx-stmt arx-stmt--{{ $type }} arx-stmt--tone-{{ $tone }}">
  <div class="arx-stmt__title">{{ $title }}</div>
  <div class="arx-stmt__body">
    {{ .Inner | markdownify }}
  </div>
</aside>

/* ===== 基礎外觀（共用） ===== */
.arx-stmt {
  position: relative;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem 1rem 1rem;
  border-radius: 0.75rem;
  /* 用顏色變數控制：背景透明度、邊框透明度、陰影強度 */
  box-shadow: var(--stmt-shadow, 0 2px 10px rgba(0,0,0,.04));
  border: 1px solid rgba(var(--stmt-rgb, 17 24 39), var(--stmt-border-alpha, .16));
  background: rgba(var(--stmt-rgb, 17 24 39), var(--stmt-bg-alpha, .06));
}

/* 左側色條（更醒目） */
.arx-stmt::before{
  content:"";
  position:absolute; inset-block:0; inset-inline-start:0;
  width:6px; border-radius:0.75rem 0 0 0.75rem;
  background: rgb(var(--stmt-rgb, 17 24 39));
  opacity: .9;
}

.arx-stmt__title { font-weight: 700; font-size: .95rem; margin-bottom:.25rem; }
.arx-stmt__body  { font-size: .95rem; line-height: 1.65; }

/* ===== 語氣色盤（Tailwind 近似色）===== */
.arx-stmt--info { --stmt-rgb: 59 130 246; }   /* blue-500 */
.arx-stmt--note { --stmt-rgb: 34 197 94;  }   /* green-500 */
.arx-stmt--warn,
.arx-stmt--warning { --stmt-rgb: 245 158 11; }/* amber-500 */

/* ===== 亮／暗主題下的對比策略 ===== */
/* 淺色主題：把透明度設高一點，讓底色更有存在感 */
:root {
  --stmt-bg-alpha: .12;      /* 背景底色濃度（原本可能只有 ~.06）*/
  --stmt-border-alpha: .28;  /* 邊框對比 */
  --stmt-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 深色主題：維持舒服的透明度，不要太刺眼 */
.dark {
  --stmt-bg-alpha: .18;
  --stmt-border-alpha: .40;
  --stmt-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ===== 讓使用者可選更「醒目」的 bold 模式 ===== */
.arx-stmt--tone-bold {
  --stmt-bg-alpha: .20;      /* 再更實一點 */
  --stmt-border-alpha: .55;  /* 邊框更實 */
  --stmt-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* 文字與標題顏色微帶主色調（可選） */
.arx-stmt__title { color: rgb(var(--stmt-rgb)); }