/*
  檔案功能：style.css
  被引用目的：承接 HTML 頁面的主視覺與版型設計，讓藝術家網站呈現明確的版面節奏、色彩氣質與響應式結構。
  編寫安排：先載入全域設定或模組 CSS，再針對頁首、導覽、內容區、作品卡片、側欄、頁尾與動畫狀態進行細部設定。
  與 HTML 的關係：HTML 透過 class 名稱標記語意與區塊，本檔再用相同 class 選擇器把視覺樣式套用到對應區塊。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.container {
  /* 設定左側外距。 */
  margin-left: auto;
  /* 設定右側外距。 */
  margin-right: auto;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #de8130;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;
  /* 搭配定位使用，設定上方位移。 */
  top: 0;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: fixed;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 99;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-logo {
    /*設定樣式*/
  /* 設定文字顏色。 */
  color: #ffffff;
  /* 設定 CSS 屬性 text-transform，用來微調版面或視覺表現。 */
  text-transform: uppercase;
  /* 設定 CSS 屬性 font-weight，用來微調版面或視覺表現。 */
  font-weight: 800;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #de8130;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer-inner {
  /* 設定元素高度。 */
  height: 100px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-main {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-main-inner::after {
  /* 設定 CSS 屬性 content，用來微調版面或視覺表現。 */
  content: "";
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;
  /* 清除浮動效果，避免後續區塊被浮動元素影響。 */
  clear: both;}

.content,
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.sidebar {
  /* 設定元素高度。 */
  height: 1000px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.content {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #d2ffce;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.sidebar {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #f0ffab;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 768px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 720px;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 48%;
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: left;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 48%;
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: left;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar ~ .sidebar {
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: right;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar + .content {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 48%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content:last-child {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 48%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content:only-child {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 920px;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 1200px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 1100px;  }}

/* NMA teaching additions */
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
body {
  /* 設定字體家族，影響網站的氣質。 */
  font-family:
    -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    sans-serif;
  /* 設定文字顏色。 */
  color: #182022;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-logo {
  /* 設定字距，常用於 Logo 或標題的空氣感。 */
  letter-spacing: 0.08em;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header-toggle {
  /* 設定滑鼠游標樣式，提示可互動性。 */
  cursor: pointer;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-menu.is-open {
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.js-reveal {
  /* 設定透明度，可用於淡入動畫。 */
  opacity: 0;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translateY(18px);
  /* 設定屬性變化的時間與速度曲線。 */
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.js-reveal.is-visible {
  /* 設定透明度，可用於淡入動畫。 */
  opacity: 1;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translateY(0);}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.artist-note {
  /* 設定行高，影響段落閱讀節奏。 */
  line-height: 1.8;
  /* 設定字距，常用於 Logo 或標題的空氣感。 */
  letter-spacing: 0.03em;}
img {
    max-width: 100%;   /* 讓圖片最寬只能跟外面的容器一樣寬，不能撐破 */
    height: auto;      /* 讓圖片的高度按照比例自動縮放，才不會變形 */
    margin-top: 20px;  /* 順便在圖片上方加一點距離，才不會跟說明文字黏太緊 */
}
