From 693e26a34f08cb79a490442b437bd526f35a2aa5 Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 04:49:35 +0000
Subject: [PATCH 1/6] 1. Unified font in all pages. 2. Converted to Responsive
 Font Units

---
 gallery-mobile.html | 59 ++++++++++++++++++++++-----------------------
 gallery.html        | 33 ++++++++++++-------------
 styles.css          |  9 +++++--
 3 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/gallery-mobile.html b/gallery-mobile.html
index 5ac7aed..d76c4c3 100644
--- a/gallery-mobile.html
+++ b/gallery-mobile.html
@@ -13,7 +13,6 @@
             margin: 0;
             padding: 0;
             background: #000000;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         }
         
         .gallery-mobile {
@@ -44,39 +43,39 @@
             width: 220px;
             height: auto;
             margin-left: calc(50% - 220px/2 - 61.5px);
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
+            font-size: 1.5rem;
+            line-height: 2rem;
             color: #FFFFFF;
-            margin-bottom: 5px; /* Reduced spacing */
+            margin-bottom: 0.3125rem; /* 5px in rem */
         }
         
         .site-subtitle {
             width: 220px;
             height: auto;
             margin-left: calc(50% - 220px/2 - 61.5px);
-            margin-top: 0; /* Reduced spacing */
-            font-family: Georgia, "Times New Roman", serif;
+            margin-top: 0;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             color: #FFFFFF;
         }
         
         .divider {
             width: 344px;
             height: 0px;
-            margin: 10px auto; /* Reduced spacing */
+            margin: 0.625rem auto; /* 10px in rem */
             border: 0.5px solid #444444;
         }
         
         .tag-section {
             display: flex;
             justify-content: center;
-            margin: 10px 16px; /* Reduced spacing */
+            margin: 0.625rem 1rem; /* 10px 16px in rem */
         }
         
         .tag-filter {
@@ -90,8 +89,8 @@
         
         .tag-item {
             cursor: pointer;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             color: #FFFFFF;
             transition: color 0.3s ease;
             text-align: center;
@@ -107,38 +106,38 @@
             margin-left: calc(50% - 220px/2 - 61.5px); /* Match title positioning */
             width: 220px; /* Match title width */
             background: #000000;
-            margin-top: 20px;
+            margin-top: 1.25rem; /* 20px in rem */
             position: relative;
         }
         
         .tag-selected {
             width: 271px;
             height: 28px;
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 28px;
+            font-size: 1.5rem;
+            line-height: 1.75rem;
             color: #FFFFFF;
-            margin-bottom: 10px;
+            margin-bottom: 0.625rem;
         }
         
         .results-count {
             width: 101px;
             height: 24px;
-            margin-top: 5px;
-            font-family: 'Zen Old Mincho', serif;
+            margin-top: 0.3125rem; /* 5px in rem */
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             color: #FFFFFF;
         }
         
         .content-divider {
             width: 344px;
             height: 0px;
-            margin: 10px auto; /* Reduced spacing */
+            margin: 0.625rem auto; /* 10px in rem */
             border: 0.5px solid #444444;
         }
         
@@ -156,22 +155,22 @@
         }
         
         .footer {
-            margin-top: 40px;
-            padding: 0 16px 20px;
+            margin-top: 2.5rem; /* 40px in rem */
+            padding: 0 1rem 1.25rem; /* 0 16px 20px in rem */
         }
         
         .disclaimer {
-            font-size: 10px;
+            font-size: 0.625rem; /* 10px in rem */
             color: #CCCCCC;
             line-height: 1.4;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem; /* 20px in rem */
             text-align: left;
         }
         
         .footer-logos {
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 0.9375rem; /* 15px in rem */
         }
         
         .capture-logo-container,
@@ -190,9 +189,9 @@
         }
         
         .copyright {
-            font-size: 12px;
+            font-size: 0.75rem; /* 12px in rem */
             color: #CCCCCC;
-            margin-top: 10px;
+            margin-top: 0.625rem; /* 10px in rem */
             text-align: center;
         }
         
diff --git a/gallery.html b/gallery.html
index 3915a09..34469d6 100644
--- a/gallery.html
+++ b/gallery.html
@@ -13,7 +13,6 @@
             margin: 0;
             padding: 0;
             background: #0A0A0A;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             overflow-x: hidden;
         }
         
@@ -51,22 +50,22 @@
         }
         
         .site-title {
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
+            font-size: 1.5rem;
+            line-height: 2rem;
             color: #FFFFFF;
-            margin-bottom: 10px;
+            margin-bottom: 0.625rem;
             text-align: left;
         }
         
         .site-subtitle {
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             color: #FFFFFF;
             text-align: left;
         }
@@ -94,7 +93,7 @@
         .tag-item {
             cursor: pointer;
             padding: 8px 0;
-            font-size: 16px;
+            font-size: 1rem;
             color: #FFFFFF;
             transition: color 0.3s ease;
             width: 100%;
@@ -150,21 +149,21 @@
         }
         
         .tag-selected {
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
+            font-size: 1.5rem;
+            line-height: 2rem;
             color: #FFFFFF;
             width: 460px;
         }
         
         .results-count {
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             text-align: right;
             color: #FFFFFF;
         }
@@ -196,7 +195,7 @@
         }
         
         .disclaimer {
-            font-size: 10px;
+            font-size: 0.625rem;
             color: #CCCCCC;
             text-align: left;
             width: 100%;
@@ -233,7 +232,7 @@
         }
         
         .copyright {
-            font-size: 12px;
+            font-size: 0.75rem;
             color: #CCCCCC;
             text-align: left;
             margin-top: 10px;
diff --git a/styles.css b/styles.css
index 79049a8..099811f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,9 @@
 /* Global Styles */
+:root {
+    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-heading: Georgia, "Times New Roman", serif;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -7,7 +12,7 @@
 
 /* Base font for entire site */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-family: var(--font-primary);
     background-color: #000;
     color: #fff;
     line-height: 1.6;
@@ -15,7 +20,7 @@ body {
 
 /* Heading font family - only defined once */
 .main-title, .subtitle, .modal-text {
-    font-family: Georgia, "Times New Roman", serif;
+    font-family: var(--font-heading);
     font-weight: 600;
 }
 

From d1543a9681729b81da34cbffef7bf6aaaafe0323 Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 04:57:14 +0000
Subject: [PATCH 2/6] Use the same font for all Chinese text element

---
 gallery-mobile.html | 2 ++
 gallery.css         | 1 +
 gallery.html        | 1 +
 3 files changed, 4 insertions(+)

diff --git a/gallery-mobile.html b/gallery-mobile.html
index d76c4c3..45601f7 100644
--- a/gallery-mobile.html
+++ b/gallery-mobile.html
@@ -89,6 +89,7 @@
         
         .tag-item {
             cursor: pointer;
+            font-family: var(--font-heading);
             font-size: 1rem;
             line-height: 1.5rem;
             color: #FFFFFF;
@@ -160,6 +161,7 @@
         }
         
         .disclaimer {
+            font-family: var(--font-heading);
             font-size: 0.625rem; /* 10px in rem */
             color: #CCCCCC;
             line-height: 1.4;
diff --git a/gallery.css b/gallery.css
index 729bbdc..0824e7b 100644
--- a/gallery.css
+++ b/gallery.css
@@ -17,6 +17,7 @@
     padding: 0.5rem 0;
     position: relative;
     font-size: 0.95rem;
+    font-family: var(--font-heading);
 }
 
 .tag-item::after {
diff --git a/gallery.html b/gallery.html
index 34469d6..df82622 100644
--- a/gallery.html
+++ b/gallery.html
@@ -195,6 +195,7 @@
         }
         
         .disclaimer {
+            font-family: var(--font-heading);
             font-size: 0.625rem;
             color: #CCCCCC;
             text-align: left;

From 273d3b9031de3f2ef5a8f20228f9edaac2b5d090 Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 05:25:40 +0000
Subject: [PATCH 3/6] Standardizing all color used.

---
 gallery-mobile.html | 36 +++++++++++++--------------
 gallery.css         | 20 +++++++--------
 gallery.html        | 32 ++++++++++++------------
 styles.css          | 60 +++++++++++++++++++++++++++++----------------
 4 files changed, 83 insertions(+), 65 deletions(-)

diff --git a/gallery-mobile.html b/gallery-mobile.html
index 45601f7..09fff08 100644
--- a/gallery-mobile.html
+++ b/gallery-mobile.html
@@ -12,7 +12,7 @@
         body {
             margin: 0;
             padding: 0;
-            background: #000000;
+            background: var(--color-background);
         }
         
         .gallery-mobile {
@@ -30,7 +30,7 @@
             top: 0;
             left: 0;
             right: 0;
-            background: #000000;
+            background: var(--color-background);
             z-index: 100;
             padding: 15px 0 0;
         }
@@ -48,7 +48,7 @@
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 2rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             margin-bottom: 0.3125rem; /* 5px in rem */
         }
         
@@ -62,14 +62,14 @@
             font-weight: 600;
             font-size: 1rem;
             line-height: 1.5rem;
-            color: #FFFFFF;
+            color: var(--color-text);
         }
         
         .divider {
             width: 344px;
             height: 0px;
             margin: 0.625rem auto; /* 10px in rem */
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
         }
         
         .tag-section {
@@ -92,13 +92,13 @@
             font-family: var(--font-heading);
             font-size: 1rem;
             line-height: 1.5rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             transition: color 0.3s ease;
             text-align: center;
         }
         
         .tag-item.active {
-            color: #DAA520;
+            color: var(--color-accent);
         }
         
         /* Selected tag section */
@@ -106,7 +106,7 @@
             padding: 0;
             margin-left: calc(50% - 220px/2 - 61.5px); /* Match title positioning */
             width: 220px; /* Match title width */
-            background: #000000;
+            background: var(--color-background);
             margin-top: 1.25rem; /* 20px in rem */
             position: relative;
         }
@@ -119,7 +119,7 @@
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 1.75rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             margin-bottom: 0.625rem;
         }
         
@@ -132,14 +132,14 @@
             font-weight: 600;
             font-size: 1rem;
             line-height: 1.5rem;
-            color: #FFFFFF;
+            color: var(--color-text);
         }
         
         .content-divider {
             width: 344px;
             height: 0px;
             margin: 0.625rem auto; /* 10px in rem */
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
         }
         
         /* Content area with appropriate padding to prevent overlap with fixed header */
@@ -163,7 +163,7 @@
         .disclaimer {
             font-family: var(--font-heading);
             font-size: 0.625rem; /* 10px in rem */
-            color: #CCCCCC;
+            color: var(--color-text);
             line-height: 1.4;
             margin-bottom: 1.25rem; /* 20px in rem */
             text-align: left;
@@ -192,7 +192,7 @@
         
         .copyright {
             font-size: 0.75rem; /* 12px in rem */
-            color: #CCCCCC;
+            color: var(--color-text);
             margin-top: 0.625rem; /* 10px in rem */
             text-align: center;
         }
@@ -211,7 +211,7 @@
             width: 50px;
             height: 50px;
             border: 4px solid rgba(255, 255, 255, 0.3);
-            border-top: 4px solid #DAA520;
+            border-top: 4px solid var(--color-accent);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin-bottom: 1rem;
@@ -226,8 +226,8 @@
         .error-message {
             padding: 2rem;
             text-align: center;
-            color: #f8d7da;
-            background-color: rgba(220, 53, 69, 0.1);
+            color: var(--color-error);
+            background-color: var(--color-error-bg);
             border: 1px solid rgba(220, 53, 69, 0.3);
             border-radius: 5px;
             margin: 2rem 0;
@@ -236,7 +236,7 @@
         .no-results {
             padding: 3rem 0;
             text-align: center;
-            color: #ddd;
+            color: var(--color-light-gray);
             font-size: 1.2rem;
         }
     </style>
@@ -252,7 +252,7 @@
             <!-- Header with title -->
             <div class="header">
                 <a href="index.html" class="logo-home">
-                    <div class="site-title">孫中山逝世<span class="gold-text">100</span>週年</div>
+                    <div class="site-title">孫中山逝世百年紀念</div>
                     <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                 </a>
             </div>
diff --git a/gallery.css b/gallery.css
index 0824e7b..45a9b68 100644
--- a/gallery.css
+++ b/gallery.css
@@ -27,7 +27,7 @@
     left: 0;
     width: 0;
     height: 2px;
-    background-color: #DAA520;
+    background-color: var(--color-accent);
     transition: width 0.3s ease;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .tag-item.active {
-    color: #DAA520;
+    color: var(--color-accent);
     font-weight: 500;
 }
 
@@ -88,9 +88,9 @@ media-viewer {
 /* Customize Capture Eye modal appearance */
 capture-eye::part(modal) {
     max-width: 90vw;
-    background-color: #191919;
+    background-color: var(--color-modal-bg);
     border-radius: 8px;
-    color: #fff;
+    color: var(--color-text);
 }
 
 capture-eye::part(overlay) {
@@ -111,7 +111,7 @@ capture-eye::part(overlay) {
     width: 50px;
     height: 50px;
     border: 4px solid rgba(255, 255, 255, 0.3);
-    border-top: 4px solid #DAA520;
+    border-top: 4px solid var(--color-accent);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1rem;
@@ -126,8 +126,8 @@ capture-eye::part(overlay) {
 .error-message {
     padding: 2rem;
     text-align: center;
-    color: #f8d7da;
-    background-color: rgba(220, 53, 69, 0.1);
+    color: var(--color-error);
+    background-color: var(--color-error-bg);
     border: 1px solid rgba(220, 53, 69, 0.3);
     border-radius: 5px;
     margin: 2rem 0;
@@ -136,7 +136,7 @@ capture-eye::part(overlay) {
 .no-results {
     padding: 3rem 0;
     text-align: center;
-    color: #ddd;
+    color: var(--color-light-gray);
     font-size: 1.2rem;
 }
 
@@ -148,7 +148,7 @@ capture-eye::part(overlay) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: #1a1a1a;
+    background-color: var(--color-modal-bg);
     padding: 1rem;
     box-sizing: border-box;
 }
@@ -178,5 +178,5 @@ capture-eye::part(overlay) {
 .file-type {
     font-size: 0.8rem;
     opacity: 0.7;
-    color: #ddd;
+    color: var(--color-light-gray);
 }
diff --git a/gallery.html b/gallery.html
index df82622..852c94f 100644
--- a/gallery.html
+++ b/gallery.html
@@ -12,7 +12,7 @@
         body {
             margin: 0;
             padding: 0;
-            background: #0A0A0A;
+            background: var(--color-background);
             overflow-x: hidden;
         }
         
@@ -22,7 +22,7 @@
             max-width: 1512px;
             min-height: 100vh;
             margin: 0 auto;
-            background: #0A0A0A;
+            background: var(--color-background);
             display: flex;
         }
         
@@ -55,7 +55,7 @@
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 2rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             margin-bottom: 0.625rem;
             text-align: left;
         }
@@ -66,14 +66,14 @@
             font-weight: 600;
             font-size: 1rem;
             line-height: 1.5rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             text-align: left;
         }
         
         .divider {
             width: 204px;
             height: 0;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             margin: 20px 0;
         }
         
@@ -94,7 +94,7 @@
             cursor: pointer;
             padding: 8px 0;
             font-size: 1rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             transition: color 0.3s ease;
             width: 100%;
             text-align: left;
@@ -108,7 +108,7 @@
             left: 0;
             width: 0;
             height: 2px;
-            background-color: #DAA520;
+            background-color: var(--color-accent);
             transition: width 0.3s ease;
             max-width: 204px;
         }
@@ -119,7 +119,7 @@
         }
         
         .tag-item.active {
-            color: #DAA520;
+            color: var(--color-accent);
         }
         
         .main-content {
@@ -136,7 +136,7 @@
             top: 0;
             left: 286px;
             right: 46px;
-            background: #0A0A0A;
+            background: var(--color-background);
             z-index: 10;
             padding-top: 40px;
         }
@@ -154,7 +154,7 @@
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 2rem;
-            color: #FFFFFF;
+            color: var(--color-text);
             width: 460px;
         }
         
@@ -165,13 +165,13 @@
             font-size: 1rem;
             line-height: 1.5rem;
             text-align: right;
-            color: #FFFFFF;
+            color: var(--color-text);
         }
         
         .horizontal-divider {
             width: 100%;
             height: 0;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             margin: 0;
         }
         
@@ -181,7 +181,7 @@
             height: 0;
             left: 266px;
             top: 40px;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             transform: rotate(90deg);
             transform-origin: 0 0;
             z-index: 5;
@@ -197,7 +197,7 @@
         .disclaimer {
             font-family: var(--font-heading);
             font-size: 0.625rem;
-            color: #CCCCCC;
+            color: var(--color-text);
             text-align: left;
             width: 100%;
             max-width: 204px;
@@ -234,7 +234,7 @@
         
         .copyright {
             font-size: 0.75rem;
-            color: #CCCCCC;
+            color: var(--color-text);
             text-align: left;
             margin-top: 10px;
         }
@@ -254,7 +254,7 @@
             <div class="sidebar-content">
                 <div class="site-header">
                     <a href="index.html" class="logo-home">
-                        <div class="site-title">孫中山逝世<span class="gold-text">100</span>週年</div>
+                        <div class="site-title">孫中山逝世百年紀念</div>
                         <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                     </a>
                     
diff --git a/styles.css b/styles.css
index 099811f..ead8496 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,25 @@
 /* Global Styles */
 :root {
+    /* Font variables */
     --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --font-heading: Georgia, "Times New Roman", serif;
+    
+    /* Color variables */
+    --color-background: #0A0A0A;
+    --color-text: #FFFFFF;
+    --color-accent: #E0B122;
+    --color-link: #3498db;
+    --color-error: #f8d7da;
+    --color-error-bg: rgba(220, 53, 69, 0.1);
+    --color-divider: #444444;
+    
+    /* UI Element Colors */
+    --color-modal-bg: #191919;
+    --color-button: #555;
+    --color-button-hover: #777;
+    --color-footer-bg: #111;
+    --color-footer-text: #888;
+    --color-light-gray: #ddd;
 }
 
 * {
@@ -13,8 +31,8 @@
 /* Base font for entire site */
 body {
     font-family: var(--font-primary);
-    background-color: #000;
-    color: #fff;
+    background-color: var(--color-background);
+    color: var(--color-text);
     line-height: 1.6;
 }
 
@@ -30,12 +48,12 @@ body {
 }
 
 a {
-    color: #fff;
+    color: var(--color-text);
     text-decoration: none;
 }
 
 .link {
-    color: #3498db;
+    color: var(--color-link);
     text-decoration: none;
 }
 
@@ -114,7 +132,7 @@ a {
     font-size: 60px;
     line-height: 24px;
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     position: relative;
     width: 1200px;
     margin: 0 auto 50px;
@@ -124,18 +142,18 @@ a {
     font-size: 45px; /* Reverted back to original */
     line-height: 20px; /* Reverted back to original */
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     position: relative;
     width: 738px;
     margin: 0 auto 80px;
 }
 
 .white-text {
-    color: #FFFFFF;
+    color: var(--color-text);
 }
 
 .gold-text {
-    color: #E0B122;
+    color: var(--color-accent);
 }
 
 .powered-by {
@@ -146,7 +164,7 @@ a {
     font-size: 20px;
     line-height: 16px;
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     margin-bottom: 20px;
 }
 
@@ -175,7 +193,7 @@ a {
 
 /* KMT Logo with white rounded rectangle background */
 .kmt-logo-container {
-    background-color: #FFFFFF !important; /* Important flag to override browser styles */
+    background-color: var(--color-text) !important; /* Important flag to override browser styles */
     forced-color-adjust: none; /* Prevents Windows high contrast mode from changing colors */
     border-radius: 10px;
     display: flex;
@@ -209,7 +227,7 @@ a {
 }
 
 .enter-btn {
-    background-color: #FFFFFF !important; /* Important flag to override browser styles */
+    background-color: var(--color-text) !important; /* Important flag to override browser styles */
     forced-color-adjust: none; /* Prevents Windows high contrast mode from changing colors */
     color: #000000;
     font-size: 24px;
@@ -222,7 +240,7 @@ a {
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    border: 1px solid #FFFFFF;
+    border: 1px solid var(--color-text);
 }
 
 .enter-btn:hover {
@@ -234,7 +252,7 @@ a {
     line-height: 16px;
     text-align: center;
     text-decoration-line: underline;
-    color: #FFFFFF;
+    color: var(--color-text);
 }
 
 .learn-more:hover {
@@ -255,7 +273,7 @@ a {
 }
 
 .modal-content {
-    background-color: #000;
+    background-color: var(--color-background);
     margin: 5% auto;
     padding: 2rem;
     border: 1px solid #333;
@@ -278,13 +296,13 @@ a {
 
 .credits {
     font-size: 0.9rem;
-    color: #aaa;
+    color: var(--color-text);
     margin-top: 2rem;
 }
 
 .close-btn {
-    background-color: #555;
-    color: #fff;
+    background-color: var(--color-button);
+    color: var(--color-text);
     border: none;
     padding: 0.5rem 2rem;
     margin: 0 auto;
@@ -292,7 +310,7 @@ a {
 }
 
 .close-btn:hover {
-    background-color: #777;
+    background-color: var(--color-button-hover);
 }
 
 /* Responsive Adjustments */
@@ -451,7 +469,7 @@ a {
 
 /* Header for Gallery Page */
 header {
-    background-color: #000;
+    background-color: var(--color-background);
     padding: 1rem 0;
     position: sticky;
     top: 0;
@@ -479,7 +497,7 @@ header {
 
 /* Footer Styles */
 footer {
-    background-color: #111;
+    background-color: var(--color-footer-bg);
     padding: 2rem 0;
     margin-top: 2rem;
 }
@@ -512,7 +530,7 @@ footer {
 
 footer p {
     font-size: 0.9rem;
-    color: #888;
+    color: var(--color-footer-text);
 }
 
 /* Responsive footer adjustments */

From a71b16e633b9ad5569c17b25259542778cb4ebb4 Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 05:34:44 +0000
Subject: [PATCH 4/6] 1. Made the gold-text font size bigger 2. Fixed the font
 consistency between desktop and mobile views 3. Changed the enter-btn
 background color to match the accent color

---
 index.html |  2 +-
 styles.css | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1546698..554af37 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
                 <h1 class="main-title">
                     <span class="white-text">孫中山逝世</span>
                     <span class="gold-text">100</span>
-                    <span class="white-text">週年</span>
+                    <span class="white-text">週年紀念</span>
                 </h1>
                 <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
             </div>
diff --git a/styles.css b/styles.css
index ead8496..d71519f 100644
--- a/styles.css
+++ b/styles.css
@@ -154,6 +154,7 @@ a {
 
 .gold-text {
     color: var(--color-accent);
+    font-size: 1.15em; /* Make gold text 15% larger than surrounding text */
 }
 
 .powered-by {
@@ -227,7 +228,7 @@ a {
 }
 
 .enter-btn {
-    background-color: var(--color-text) !important; /* Important flag to override browser styles */
+    background-color: var(--color-accent) !important; /* Changed from white to accent color */
     forced-color-adjust: none; /* Prevents Windows high contrast mode from changing colors */
     color: #000000;
     font-size: 24px;
@@ -240,11 +241,11 @@ a {
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    border: 1px solid var(--color-text);
+    border: 1px solid var(--color-accent); /* Updated border color to match background */
 }
 
 .enter-btn:hover {
-    background-color: #f0f0f0;
+    background-color: #f0cd6d; /* Lighter version of the accent color for hover state */
 }
 
 .learn-more {
@@ -363,6 +364,7 @@ a {
         margin: 0 auto 30px;
         white-space: nowrap; /* Prevent line breaks within the title */
         text-align: center;
+        font-family: var(--font-heading); /* Explicitly set font family to ensure consistency */
     }
     
     .subtitle {
@@ -371,6 +373,7 @@ a {
         line-height: 32px; /* Increased line height to match the new font size */
         margin: 0 auto;
         text-align: center;
+        font-family: var(--font-heading); /* Explicitly set font family to ensure consistency */
     }
     
     .powered-by {
@@ -431,6 +434,11 @@ a {
         position: relative;
         margin: 0;
     }
+    
+    /* Gold text to maintain same relative size increase on mobile */
+    .gold-text {
+        font-size: 1.15em; /* Keep the same relative size increase */
+    }
 }
 
 @media (max-width: 480px) {

From a1a0bf763be2d4ed75ac2c8e96dd96d4999a4242 Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 05:44:48 +0000
Subject: [PATCH 5/6] Open gallery.html in a new tag

---
 gallery-mobile.html |  2 +-
 gallery.html        |  2 +-
 index.html          |  4 ++--
 styles.css          | 14 ++++++++++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/gallery-mobile.html b/gallery-mobile.html
index 09fff08..8342498 100644
--- a/gallery-mobile.html
+++ b/gallery-mobile.html
@@ -252,7 +252,7 @@
             <!-- Header with title -->
             <div class="header">
                 <a href="index.html" class="logo-home">
-                    <div class="site-title">孫中山逝世百年紀念</div>
+                    <div class="site-title">孫中山逝世百週年</div>
                     <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                 </a>
             </div>
diff --git a/gallery.html b/gallery.html
index 852c94f..6574cfc 100644
--- a/gallery.html
+++ b/gallery.html
@@ -254,7 +254,7 @@
             <div class="sidebar-content">
                 <div class="site-header">
                     <a href="index.html" class="logo-home">
-                        <div class="site-title">孫中山逝世百年紀念</div>
+                        <div class="site-title">孫中山逝世百週年</div>
                         <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                     </a>
                     
diff --git a/index.html b/index.html
index 554af37..b322b68 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
                 <h1 class="main-title">
                     <span class="white-text">孫中山逝世</span>
                     <span class="gold-text">100</span>
-                    <span class="white-text">週年紀念</span>
+                    <span class="white-text">週年</span>
                 </h1>
                 <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
             </div>
@@ -44,7 +44,7 @@ <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
             </div>
             
             <div class="buttons">
-                <a href="gallery.html" class="btn enter-btn">Enter</a>
+                <a href="gallery.html" target="_blank" class="btn enter-btn">Enter</a>
                 <a href="#" class="learn-more" id="learnMoreBtn">Learn more</a>
             </div>
         </div>
diff --git a/styles.css b/styles.css
index d71519f..527d06e 100644
--- a/styles.css
+++ b/styles.css
@@ -364,7 +364,7 @@ a {
         margin: 0 auto 30px;
         white-space: nowrap; /* Prevent line breaks within the title */
         text-align: center;
-        font-family: var(--font-heading); /* Explicitly set font family to ensure consistency */
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
     }
     
     .subtitle {
@@ -373,7 +373,14 @@ a {
         line-height: 32px; /* Increased line height to match the new font size */
         margin: 0 auto;
         text-align: center;
-        font-family: var(--font-heading); /* Explicitly set font family to ensure consistency */
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
+    }
+    
+    /* Ensure modal text uses the correct font in mobile */
+    .modal-text {
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
+        line-height: 1.8;
+        margin-bottom: 2rem;
     }
     
     .powered-by {
@@ -423,11 +430,14 @@ a {
         margin-bottom: 20px; /* Add extra bottom margin */
     }
     
+    /* Fix enter button styles on mobile */
     .enter-btn {
         margin: 0 auto 20px;
         width: 160px;
         height: 55px;
         font-size: 20px;
+        background-color: var(--color-accent) !important; /* Ensure accent color is applied */
+        border: 1px solid var(--color-accent);
     }
     
     .learn-more {

From 7416363a03916c9c4d165eff5c14e5d69783066f Mon Sep 17 00:00:00 2001
From: wcchung <wcchung@users.noreply.github.com>
Date: Fri, 18 Apr 2025 14:38:39 +0800
Subject: [PATCH 6/6] Use rel="noopener noreferrer" instead of target="_blank"

When using target="_blank", consider adding rel="noopener noreferrer" to prevent potential security issues related to reverse tabnabbing.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b322b68..156a0e5 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@ <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
             </div>
             
             <div class="buttons">
-                <a href="gallery.html" target="_blank" class="btn enter-btn">Enter</a>
+                <a href="gallery.html" target="_blank" rel="noopener noreferrer" class="btn enter-btn">Enter</a>
                 <a href="#" class="learn-more" id="learnMoreBtn">Learn more</a>
             </div>
         </div>