fix layout

nics-tw · Sep 30, 2024 · a21b961 · a21b961
1 parent 5d8b6a7
commit a21b961
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 339 deletions.
diff --git a/_components/footer/index.md b/_components/footer/index.md
@@ -1,7 +1,7 @@
 ---
 layout: main
 title: 頁尾 (Footer)
-maturity: "alpha"
+maturity: "new"
 ---
 
 ### 基本頁尾
@@ -11,25 +11,15 @@ maturity: "alpha"
   include example.html content=html
 %}
 
-#### CSS
-
-- `.footer`：作為整個 footer 的容器。
-- `.width-container`：定義 footer 的寬度容器。
-- `.footer__content`：作為 footer 內容的容器。
-- `.footer__logo`：作為 footer 中 logo 的容器。
-- `.footer__logo-img`：定義 logo 圖像的樣式。
-- `.footer__info`：定義 footer 中的服務資訊部分。
-- `.footer__legal`：定義 footer 中的法律資訊部分。
-
 #### 建議使用時機
 
 - 當需要展示機構標誌和基本聯絡資訊時。
-    > 當使用者需要快速找到聯絡資訊和機構標誌時，純 Logo Footer 能提供清晰的展示。
+  - 當使用者需要快速找到聯絡資訊和機構標誌時，純 Logo Footer 能提供清晰的展示。
 
 #### 不建議使用時機
 
 - 當需要展示更多的導覽選項和支援連結時。
-    > 如果需要展示更多導覽選項，純 Logo Footer 可能無法滿足需求。
+  - 如果需要展示更多導覽選項，純 Logo Footer 可能無法滿足需求。
 
 ---
 
@@ -40,22 +30,15 @@ maturity: "alpha"
   include example.html content=html
 %}
 
-#### CSS
-
-- `.footer__support-links`：作為 footer 中支援連結的容器。
-- `.footer__inline-list`：定義支援連結的列表樣式。
-- `.footer__inline-list-item`：定義支援連結的列表項目樣式。
-- `.footer__divider`：定義 footer 中的分隔線樣式。
-
 #### 建議使用時機
 
 - 當需要在 footer 中提供額外的支援連結時。
-    > 支援連結 Footer 能夠幫助使用者快速找到幫助、聯絡資訊和法律條款。
+  - 支援連結 Footer 能夠幫助使用者快速找到幫助、聯絡資訊和法律條款。
 
 #### 不建議使用時機
 
 - 當網站內容非常簡單且不需要額外的支援連結時。
-    > 如果網站內容簡單，支援連結 Footer 可能顯得過於複雜。
+  - 如果網站內容簡單，支援連結 Footer 可能顯得過於複雜。
 
 ---
 
@@ -66,20 +49,12 @@ maturity: "alpha"
   include example.html content=html
 %}
 
-#### CSS
-
-- `.footer__navigation`：作為 footer 中多層次導覽的容器。
-- `.footer__section`：定義 footer 中各個導覽區塊的樣式。
-- `.footer__heading`：定義導覽區塊標題的樣式。
-- `.footer__list`：定義導覽區塊列表的樣式。
-- `.footer__list-item`：定義單個導覽項目的樣式。
-
 #### 建議使用時機
 
 - 當需要在 footer 中提供多層次的導覽選項時。
-    > 多層次導覽 Footer 能夠幫助使用者快速找到各個服務和資訊，適合內容豐富的網站。
+  - 多層次導覽 Footer 能夠幫助使用者快速找到各個服務和資訊，適合內容豐富的網站。
 
 #### 不建議使用時機
 
 - 當網站內容簡單且不需要多層次導覽時。
-    > 如果網站內容簡單，多層次導覽 Footer 可能顯得過於複雜。
+  - 如果網站內容簡單，多層次導覽 Footer 可能顯得過於複雜。
diff --git a/_components/header/index.md b/_components/header/index.md
@@ -1,7 +1,7 @@
 ---
 layout: main
 title: 頁首 (Header)
-maturity: "alpha"
+maturity: "new"
 ---
 
 ### 基本頁首
@@ -11,26 +11,17 @@ maturity: "alpha"
   include example.html content=html
 %}
 
-#### CSS
-
-- `.header`：作為整個 header 的容器。
-- `.header__top`：作為 header 的頂部部分。
-- `.header__divider`：分隔 header 的部分。
-- `.header__bottom`：作為 header 的底部部分。
-- `.header__logo`：作為 header 中 logo 的容器。
-- `.header__logotype`：定義 logo 的樣式。
-
 #### 建議使用時機
 
 - 當需要展示網站的標誌和主要導覽連結時。
-    > 當使用者需要快速訪問網站主要部分時，純 Logo Header 能幫助使用者迅速導覽。
+  - 當使用者需要快速訪問網站主要部分時，純 Logo Header 能幫助使用者迅速導覽。
 - 當需要簡潔、直觀的導覽體驗時。
-    > 純 Logo Header 提供了簡單而清晰的導覽，不會對使用者造成干擾。
+  - 純 Logo Header 提供了簡單而清晰的導覽，不會對使用者造成干擾。
 
 #### 不建議使用時機
 
 - 當需要更多的導覽選項和功能時。
-    > 如果網站需要提供多個導覽選項和功能，純 Logo Header 可能無法滿足需求。
+  - 如果網站需要提供多個導覽選項和功能，純 Logo Header 可能無法滿足需求。
 
 ---
 
@@ -41,55 +32,19 @@ maturity: "alpha"
   include example.html content=html
 %}
 
-#### CSS
-
-- `.header__menu-button`：定義 menu 按鈕的樣式。
-- `.header__content`：作為 header 中可選內容的容器。
-- `.header__additional-links`：在移動視圖中顯示的額外連結。
-
 #### 建議使用時機
 
 - 當需要在桌面和移動設備上提供一致的導覽體驗時。
-    > 單連結 Header 能夠在桌面和移動設備上提供一致的導覽體驗，適合不同設備的使用。
+  - 單連結 Header 能夠在桌面和移動設備上提供一致的導覽體驗，適合不同設備的使用。
 - 當需要提供多個導覽選項並且能夠在移動設備上顯示壓縮的導覽選單時。
-    > 當使用者在移動設備上訪問網站時，Header 能自適應顯示壓縮的導覽選單。
+  - 當使用者在移動設備上訪問網站時，Header 能自適應顯示壓縮的導覽選單。
 
 #### 不建議使用時機
 
 - 當網站內容非常簡單且不需要多個導覽選項時。
-    > 如果網站內容簡單，單連結 Header 可能顯得過於複雜。
+  - 如果網站內容簡單，單連結 Header 可能顯得過於複雜。
 - 當需要展示大量的導覽選項和功能時。
-    > 如果需要展示大量導覽選項和功能，單連結 Header 可能無法滿足需求。
-
----
-
-### 頁首附帶階層式連結
-
-{% capture html %}{% include header/header_linklevel.html %}{% endcapture %}
-{% 
-  include example.html content=html
-%}
-
-#### CSS
-
-- `.dropdown`：定義下拉選單的容器。
-- `.header__navigation`：作為導覽列表的樣式。
-- `.header__navigation-list`：定義導覽項目的列表樣式。
-- `.header__navigation-item`：定義單個導覽項目的樣式。
-
-#### 建議使用時機
-
-- 當需要提供多層次的導覽選項時。
-    > 階層式連結 Header 能夠提供多層次的導覽選項，適合內容豐富的網站。
-- 當需要展示大量的導覽項目並且希望它們以層次結構顯示時。
-    > 當使用者需要在不同層次的導覽項目之間快速切換時，階層式連結 Header 能夠提供便捷的操作。
-
-#### 不建議使用時機
-
-- 當網站內容簡單且不需要多層次導覽時。
-    > 如果網站內容簡單，階層式連結 Header 可能顯得過於複雜。
-- 當使用者主要在移動設備上訪問網站且需要簡化的導覽時。
-    > 如果使用者主要在移動設備上訪問網站，階層式連結 Header 可能顯得過於複雜，不適合移動設備的操作。
+  - 如果需要展示大量導覽選項和功能，單連結 Header 可能無法滿足需求。
 
 ---
 

diff --git a/_includes/footer/footer.html b/_includes/footer/footer.html
@@ -1,18 +1,18 @@
 
 <footer class="footer">
     <div class="width-container">
-        <div class="footer__content">
-            <div class="footer__logo">
-                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer__logo-img">
+        <div class="footer-content">
+            <div class="footer-logo">
+                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer-logo-img">
             </div>
-            <div class="footer__info">
-                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer__link">02-2739-1000</a></p>
+            <div class="footer-info">
+                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer-link">02-2739-1000</a></p>
                 <p>傳真電話: 02-2733-1655</p>
                 <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
             </div>
-            <div class="footer__legal">
-                <p>更新日期: 03/13/2024</p>
-                <p><a href="#" class="footer__link">隱私權及網站安全政策</a> / <a href="#" class="footer__link">政府網站資料開放宣告</a>
+            <div class="footer-legal">
+                <p>更新日期: 2024/03/13</p>
+                <p><a href="#" class="footer-link">隱私權及網站安全政策</a> / <a href="#" class="footer-link">政府網站資料開放宣告</a>
                 </p>
                 <p>版權所有 © 2024 國家資通安全研究院</p>
             </div>

diff --git a/_includes/footer/footer_link.html b/_includes/footer/footer_link.html
@@ -1,28 +1,28 @@
 
 <footer class="footer">
     <div class="width-container">
-        <div class="footer__support-links">
+        <div class="footer-support-links">
             <h2 class="visually-hidden">支援連結</h2>
-            <ul class="footer__inline-list">
-                <li class="footer__inline-list-item"><a class="footer__link" href="#">幫助</a></li>
-                <li class="footer__inline-list-item"><a class="footer__link" href="#">Cookies</a></li>
-                <li class="footer__inline-list-item"><a class="footer__link" href="#">聯絡</a></li>
-                <li class="footer__inline-list-item"><a class="footer__link" href="#">條款和條件</a></li>
+            <ul class="footer-inline-list">
+                <li class="footer-inline-list-item"><a class="footer-link" href="#">幫助</a></li>
+                <li class="footer-inline-list-item"><a class="footer-link" href="#">Cookies</a></li>
+                <li class="footer-inline-list-item"><a class="footer-link" href="#">聯絡</a></li>
+                <li class="footer-inline-list-item"><a class="footer-link" href="#">條款和條件</a></li>
             </ul>
         </div>
-        <hr class="footer__divider">
-        <div class="footer__content">
-            <div class="footer__logo">
-                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer__logo-img">
+        <hr class="footer-divider">
+        <div class="footer-content">
+            <div class="footer-logo">
+                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer-logo-img">
             </div>
-            <div class="footer__info">
-                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer__link">02-2739-1000</a></p>
+            <div class="footer-info">
+                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer-link">02-2739-1000</a></p>
                 <p>傳真電話: 02-2733-1655</p>
                 <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
             </div>
-            <div class="footer__legal">
-                <p>更新日期: 03/13/2024</p>
-                <p><a href="#" class="footer__link">隱私權及網站安全政策</a> / <a href="#" class="footer__link">政府網站資料開放宣告</a>
+            <div class="footer-legal">
+                <p>更新日期: 2024/03/13</p>
+                <p><a href="#" class="footer-link">隱私權及網站安全政策</a> / <a href="#" class="footer-link">政府網站資料開放宣告</a>
                 </p>
                 <p>版權所有 © 2024 國家資通安全研究院</p>
             </div>

diff --git a/_includes/footer/footer_service.html b/_includes/footer/footer_service.html
@@ -1,43 +1,43 @@
 
 <footer class="footer">
     <div class="width-container">
-        <div class="footer__navigation">
-            <div class="footer__section">
-                <h2 class="footer__heading">服務和訊息</h2>
-                <ul class="footer__list">
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務1</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務2</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務3</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務4</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務5</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">服務6</a></li>
+        <div class="footer-navigation">
+            <div class="footer-section">
+                <h2 class="footer-heading">服務和訊息</h2>
+                <ul class="footer-list">
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務1</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務2</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務3</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務4</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務5</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">服務6</a></li>
                 </ul>
             </div>
-            <div class="footer__section">
-                <h2 class="footer__heading">部門和政策</h2>
-                <ul class="footer__list">
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結1</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結2</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結3</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結4</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結5</a></li>
-                    <li class="footer__list-item"><a class="footer__link" href="#">連結6</a></li>
+            <div class="footer-section">
+                <h2 class="footer-heading">部門和政策</h2>
+                <ul class="footer-list">
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結1</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結2</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結3</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結4</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結5</a></li>
+                    <li class="footer-list-item"><a class="footer-link" href="#">連結6</a></li>
                 </ul>
             </div>
         </div>
-        <hr class="footer__divider">
-        <div class="footer__content">
-            <div class="footer__logo">
-                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer__logo-img">
+        <hr class="footer-divider">
+        <div class="footer-content">
+            <div class="footer-logo">
+                <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="機構標誌" class="footer-logo-img">
             </div>
-            <div class="footer__info">
-                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer__link">02-2739-1000</a></p>
+            <div class="footer-info">
+                <p>服務電話: <a href="tel:+886-2-2739-1000" class="footer-link">02-2739-1000</a></p>
                 <p>傳真電話: 02-2733-1655</p>
                 <p>地址: 100057 臺北市中正區延平南路143號4樓</p>
             </div>
-            <div class="footer__legal">
-                <p>更新日期: 03/13/2024</p>
-                <p><a href="#" class="footer__link">隱私權及網站安全政策</a> / <a href="#" class="footer__link">政府網站資料開放宣告</a>
+            <div class="footer-legal">
+                <p>更新日期: 2024/03/13</p>
+                <p><a href="#" class="footer-link">隱私權及網站安全政策</a> / <a href="#" class="footer-link">政府網站資料開放宣告</a>
                 </p>
                 <p>版權所有 © 2024 國家資通安全研究院</p>
             </div>

diff --git a/_includes/header/header.html b/_includes/header/header.html
@@ -1,22 +1,19 @@
 <header class="headerfordemo" data-module="header">
-    <div class="header__top">
-        <div class="width-container header__top-container">
-            <div class="header__actions">
-                <a href="#" class="header__link small-text">網站導覽</a>
-                <a href="#" class="header__link small-text" lang="zh-TW">中文</a>
-                <a href="#" class="header__link small-text" lang="en">英文</a>
-                <a href="#" id="decreaseFont" class="header__link small-text" aria-label="Decrease font size">A-</a>
-                <a href="#" id="defaultFont" class="header__link small-text" aria-label="Default font size">A</a>
-                <a href="#" id="increaseFont" class="header__link small-text" aria-label="Increase font size">A+</a>
+    <div class="header-top">
+        <div class="width-container header-top-container">
+            <div class="header-actions">
+                <a href="#" class="header-link small-text">網站導覽</a>
+                <a href="#" class="header-link small-text" lang="zh-TW">中文</a>
+                <a href="#" class="header-link small-text" lang="en">英文</a>
             </div>
         </div>
     </div>
-    <div class="header__divider width-container"></div>
-    <div class="header__bottom">
+    <div class="header-divider width-container"></div>
+    <div class="header-bottom">
         <div class="width-container">
-            <div class="header__logo">
-                <a href="#" class="header__link header__link--homepage">
-                    <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="網站標誌" class="header__logotype">
+            <div class="header-logo">
+                <a href="#" class="header-link">
+                    <img src="{{ "/assets/favicon.png" | absolute_url }}" alt="網站標誌" class="header-logotype">
                 </a>
             </div>
         </div>