網站版面樣式修改記錄

# User interface configuration
[params.ui]
# Enable to show the side bar menu in its compact state.
sidebar_menu_compact = true
# 讓左邊選單可以折疊／展開
sidebar_menu_foldable = true

  <div class="td-toc">
    {{ . }}
  </div>

[params]
default_blog_author = "Michael Tsai" 

/*
  Add styles or override variables from the theme here.
*/

$google_font_name: "Noto Sans TC";
$google_font_family: "Noto+Sans+TC:300,300i,400,400i,700,700i";

@import "_admonition_variables";
@import "_admonition";

// This is a custom SCSS file for Hugo Docsy theme.
// See: https://www.docsy.dev/docs/adding-content/lookandfeel/#project-style-files

/*
  For MediumZoom.js to force the zoomed image to be displayed on top of everything.
  Without these settings, the zoomed image will display under some elements on the page.

  Ref: https://github.com/francoischalifour/medium-zoom#debugging
*/
.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}

// For admonitions. Copied from MkDocs Material (by Michael Tsai 2023-8-6).
:root > * {
  --md-shadow-z1: 0 0.2rem 0.5rem #0000000d,0 0 0.05rem #0000001a;
  --md-shadow-z2: 0 0.2rem 0.5rem #0000001a,0 0 0.05rem #00000040;
  --md-shadow-z3: 0 0.2rem 0.5rem #0003,0 0 0.05rem #00000059;

  --md-primary-fg-color: #16191F;
}

:root {
  --bs-body-font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  // for mark tag
  --line-yellow: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' width='120' height='6' viewBox='0 0 120 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 0.8C60 4 50-0.5 1 1.5' stroke='%23fc0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.logo-image-height {
  height: 32px;
  padding-right: 12px;
}

pre {
  font-size: 0.9rem;
}

h2 {
  font-size: 1.9rem;  
  font-weight: 600;
}

h2.feedback--title {
  padding-top: 2rem;
  font-size: 1.7rem;  
  font-weight: 500;
  color: var(--md-primary-fg-color);
}

// Section 首頁的標題連結
.section-index h5 a {
  font-weight: 700;
  font-family: '微軟正黑體', var(--bs-body-font-family);
  font-size: 1.18rem;
}

.lead {
  font-size: 1.1rem;
  font-weight: 400;
}

.reading-time {
  margin-top: 20px;
} 

.td-toc a {
  font-weight: 400;
}

.td-max-width-on-larger-screens {
  @include media-breakpoint-up(lg) {
    max-width: 95%; /* Docsy 預設為 80% */
  }
}

@media (min-width: 1200px) {
  // 左邊主選單的寬度
  .col-xl-2 {
    flex: none;
    width: 19%; // 原本為 16.66666667%
  }

  // 中間內文區域的寬度
  .col-xl-8 {
    flex: 0 0 auto;
    width: 60%; // 原本為 66.66666667%;
  }
}

// Docsy 預設的選單字型太大，顏色太淺，此處略作調整。
.td-sidebar-nav .td-sidebar-link {
  color: var(--md-primary-fg-color);
  display: block;
  padding-bottom: 0.375rem;
  font-size: 0.95rem;
  font-weight: 400;
}

// 左邊選單的子項目縮排
@media (min-width: 768px) {
  .td-sidebar-nav__section .ul-1 ul {
    padding-left: 1.2em;
  }
}

// 右邊的 table of contents 的樣式
.td-toc #TableOfContents a {
  color: var(--md-primary-fg-color);
  font-size: 0.9rem;
}

// 右邊的 table of contents 區塊的子標題縮排
.td-toc li li {
  margin-left: 0.9rem;
}

// 右邊的 table of contents 區塊的位置保持固定
@supports (position: sticky) {
.td-sidebar-toc {
    position: sticky;
    top: 6rem;
    height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

// 頁面頂端標題列（導覽列），樣式取自 Material for MkDocs。
.td-navbar {
  background: var(--md-primary-fg-color); // #30638e;

  // 下方加上陰影
  box-shadow: 0 0 0.2rem #0000001a, 0 0.2rem 0.4rem #0003;
  transition: transform .25s cubic-bezier(.1,.7,.1,1),box-shadow .25s;
}

// 頂端導覽列的字體
.td-navbar .nav-link {
    text-transform: none;
    font-weight: 500;
    font-size: 1.05rem;
}

// The outer page container for the default base template.
.td-default {
  main {
    > section:first-of-type {
      @include media-breakpoint-up(md) {
        padding-top: 1rem; // by Michael: 原本是 8rem
      }
    }

    section {
      @extend .td-block-padding;
    }
  }
}

// img[src$="#center"] 用來將圖片置中
img[src$="#center"] {
  display: block;
  margin: 1.0rem auto;
  max-width: 100%;
  height: auto;
}

// Mark tag as a yellow underline.
mark {
  color: inherit;
  background: var(--line-yellow) bottom left/100% 0.3em no-repeat;
  text-decoration: none;
  padding-bottom: 0.3em;
}

[ui_search]
other = "站內搜尋…"

[post_reading_time]
other = " 分鐘左右可讀完"
[post_less_than_a_minute_read]
other = "1 分鐘內可讀完"

[post_last_mod]
other = "Last update"

[post_byline_by]
other = "作者："

[ui_read_more]
other = "閱讀全文"