歡迎來到這裡
慢慢生活，好好學習
Your Attractive Heading
/* === Header 基本排版 ====================================== */
.site-header {
/* 建議高度：手機 64px，桌機 80px，可視情況微調 */
height: clamp(64px, 10vh, 80px);
background: #f8d7df; /* 和現在的粉底色接近 */
display: flex;
align-items: center;
justify-content: center; /* Logo 置中；若要靠左可改成 flex-start */
padding-inline: 1.5rem; /* 左右留白 */
box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
/* === Logo 圖片或文字 ====================================== */
.site-title,
.site-logo {
/* 不管是 
都適用 */
max-height: 100%; /* 讓 logo 自動跟著 header 高度縮放 */
max-width: 200px; /* 桌機視窗下不超過 200px */
width: auto;
margin: 0;
font-family: “Recoleta”, serif; /* 若你用字型，替換成自己的字體 */
font-size: clamp(1.75rem, 6vw, 2.5rem); /* RWD 字體大小 */
color: #111;
}
/* === 捲動時壓縮（選配） ================================== */
@media (min-width: 768px) {
/* 桌機：捲到 120px 以上就把 header 再縮小，騰出閱讀空間 */
.is-scrolled .site-header {
height: 56px;
}
.is-scrolled .site-title,
.is-scrolled .site-logo {
max-width: 160px;
font-size: 1.5rem;
}
}
/* 你可以用 JS 在 window.scroll 事件時替 body 加上 .is-scrolled */
carol
還是 都適用 */
max-height: 100%; /* 讓 logo 自動跟著 header 高度縮放 */
max-width: 200px; /* 桌機視窗下不超過 200px */
width: auto;
margin: 0;
font-family: “Recoleta”, serif; /* 若你用字型，替換成自己的字體 */
font-size: clamp(1.75rem, 6vw, 2.5rem); /* RWD 字體大小 */
color: #111;
}
/* === 捲動時壓縮（選配） ================================== */
@media (min-width: 768px) {
/* 桌機：捲到 120px 以上就把 header 再縮小，騰出閱讀空間 */
.is-scrolled .site-header {
height: 56px;
}
.is-scrolled .site-title,
.is-scrolled .site-logo {
max-width: 160px;
font-size: 1.5rem;
}
}
/* 你可以用 JS 在 window.scroll 事件時替 body 加上 .is-scrolled */