From 367be5c6d4851c02fc8092bb75f4cbee960319df Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 13 Jul 2025 21:31:59 +0800
Subject: [PATCH 1/4] fix: use @variant for tailwind 4.0

---
 assets/css/compiled/main.css | 24 ++++++++++++------------
 assets/css/main.css          | 24 ++++++++++++------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 7ca3ba0b..29c869b1 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3746,7 +3746,7 @@ pre {
 [id^="fn"], [id^="fnref"] {
   scroll-margin-top: 145px;
 }
-@screen sm {
+@media (width >= 640px) {
   .thumbnail {
     min-width: 100%;
     height: 180px;
@@ -3755,7 +3755,7 @@ pre {
     flex-wrap: wrap;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .thumbnail {
     min-width: 300px;
     min-height: 180px;
@@ -3873,7 +3873,7 @@ pre {
   width: calc(100% - 5px);
   margin: 0px !important;
 }
-@screen sm {
+@media (width >= 640px) {
   .sm\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -3959,7 +3959,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .md\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4045,7 +4045,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen lg {
+@media (width >= 1024px) {
   .lg\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4131,7 +4131,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen xl {
+@media (width >= 1280px) {
   .xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4217,7 +4217,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen 2xl {
+@media (width >= 1536px) {
   .2xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4312,7 +4312,7 @@ pre {
 .ratio-32-9 {
   padding-top: 28.125%;
 }
-@screen sm {
+@media (width >= 640px) {
   .sm\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4323,7 +4323,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .md\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4334,7 +4334,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen lg {
+@media (width >= 1024px) {
   .lg\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4345,7 +4345,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen xl {
+@media (width >= 1280px) {
   .xl\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4356,7 +4356,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen 2xl {
+@media (width >= 1536px) {
   .2xl\:ratio-16-9 {
     padding-top: 56.25%;
   }
diff --git a/assets/css/main.css b/assets/css/main.css
index 89efdc90..f15ad75b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -457,7 +457,7 @@ pre {
   scroll-margin-top: 145px;
 }
 
-@screen sm {
+@variant sm {
   .thumbnail {
     min-width: 100%;
     height: 180px;
@@ -467,7 +467,7 @@ pre {
   }
 }
 
-@screen md {
+@variant md {
   .thumbnail {
     min-width: 300px;
     min-height: 180px;
@@ -599,7 +599,7 @@ pre {
   margin: 0px !important;
 }
 
-@screen sm {
+@variant sm {
   .sm\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -686,7 +686,7 @@ pre {
   }
 }
 
-@screen md {
+@variant md {
   .md\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -773,7 +773,7 @@ pre {
   }
 }
 
-@screen lg {
+@variant lg {
   .lg\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -860,7 +860,7 @@ pre {
   }
 }
 
-@screen xl {
+@variant xl {
   .xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -947,7 +947,7 @@ pre {
   }
 }
 
-@screen 2xl {
+@variant 2xl {
   .2xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -1045,7 +1045,7 @@ pre {
   padding-top: 28.125%;
 } /* 32:9 Aspect Ratio */
 
-@screen sm {
+@variant sm {
   .sm\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1057,7 +1057,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen md {
+@variant md {
   .md\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1069,7 +1069,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen lg {
+@variant lg {
   .lg\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1081,7 +1081,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen xl {
+@variant xl {
   .xl\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1093,7 +1093,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen 2xl {
+@variant 2xl {
   .2xl\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */

From 23e0416f51ac74c590ba201f56ca4fd31c46d9f7 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 13 Jul 2025 21:52:54 +0800
Subject: [PATCH 2/4] refactor: modularize carousel and gallery css

---
 assets/css/compiled/main.css       | 578 ----------------------------
 assets/css/components/carousel.css |  65 ++++
 assets/css/components/gallery.css  | 579 ++++++++++++++++++++++++++++
 assets/css/main.css                | 592 -----------------------------
 layouts/partials/vendor.html       |  14 +
 5 files changed, 658 insertions(+), 1170 deletions(-)
 create mode 100644 assets/css/components/carousel.css
 create mode 100644 assets/css/components/gallery.css

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 29c869b1..1c4a32e1 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3789,584 +3789,6 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
-.grid-w10 {
-  width: calc(10% - 5px);
-  margin: 0px !important;
-}
-.grid-w15 {
-  width: calc(15% - 5px);
-  margin: 0px !important;
-}
-.grid-w20 {
-  width: calc(20% - 5px);
-  margin: 0px !important;
-}
-.grid-w25 {
-  width: calc(25% - 5px);
-  margin: 0px !important;
-}
-.grid-w30 {
-  width: calc(30% - 5px);
-  margin: 0px !important;
-}
-.grid-w33 {
-  width: calc(33% - 5px);
-  margin: 0px !important;
-}
-.grid-w35 {
-  width: calc(35% - 5px);
-  margin: 0px !important;
-}
-.grid-w40 {
-  width: calc(40% - 5px);
-  margin: 0px !important;
-}
-.grid-w45 {
-  width: calc(45% - 5px);
-  margin: 0px !important;
-}
-.grid-w50 {
-  width: calc(50% - 5px);
-  margin: 0px !important;
-}
-.grid-w55 {
-  width: calc(55% - 5px);
-  margin: 0px !important;
-}
-.grid-w60 {
-  width: calc(60% - 5px);
-  margin: 0px !important;
-}
-.grid-w65 {
-  width: calc(65% - 5px);
-  margin: 0px !important;
-}
-.grid-w66 {
-  width: calc(66% - 5px);
-  margin: 0px !important;
-}
-.grid-w70 {
-  width: calc(70% - 5px);
-  margin: 0px !important;
-}
-.grid-w75 {
-  width: calc(75% - 5px);
-  margin: 0px !important;
-}
-.grid-w80 {
-  width: calc(80% - 5px);
-  margin: 0px !important;
-}
-.grid-w85 {
-  width: calc(85% - 5px);
-  margin: 0px !important;
-}
-.grid-w90 {
-  width: calc(90% - 5px);
-  margin: 0px !important;
-}
-.grid-w95 {
-  width: calc(95% - 5px);
-  margin: 0px !important;
-}
-.grid-w100 {
-  width: calc(100% - 5px);
-  margin: 0px !important;
-}
-@media (width >= 640px) {
-  .sm\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-@media (width >= 853px) {
-  .md\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-@media (width >= 1024px) {
-  .lg\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-@media (width >= 1280px) {
-  .xl\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-@media (width >= 1536px) {
-  .2xl\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-.ratio-16-9 {
-  padding-top: 56.25%;
-}
-.ratio-21-9 {
-  padding-top: 42.85%;
-}
-.ratio-32-9 {
-  padding-top: 28.125%;
-}
-@media (width >= 640px) {
-  .sm\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .sm\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .sm\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 853px) {
-  .md\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .md\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .md\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1024px) {
-  .lg\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .lg\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .lg\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1280px) {
-  .xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1536px) {
-  .2xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .2xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .2xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
 @layer base {
   [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
     appearance: none;
diff --git a/assets/css/components/carousel.css b/assets/css/components/carousel.css
new file mode 100644
index 00000000..9a799e05
--- /dev/null
+++ b/assets/css/components/carousel.css
@@ -0,0 +1,65 @@
+/* Carousel Specific Styles */
+.ratio-16-9 {
+  padding-top: 56.25%;
+}
+.ratio-21-9 {
+  padding-top: 42.85%;
+}
+.ratio-32-9 {
+  padding-top: 28.125%;
+}
+@media (width >= 640px) {
+  .sm\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .sm\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .sm\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 853px) {
+  .md\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .md\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .md\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1024px) {
+  .lg\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .lg\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .lg\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1280px) {
+  .xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1536px) {
+  .\32xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .\32xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .\32xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
diff --git a/assets/css/components/gallery.css b/assets/css/components/gallery.css
new file mode 100644
index 00000000..e9e9616b
--- /dev/null
+++ b/assets/css/components/gallery.css
@@ -0,0 +1,579 @@
+/* Gallery Specific Styles */
+.grid-w10 {
+  width: calc(10% - 5px);
+  margin: 0px !important;
+}
+.grid-w15 {
+  width: calc(15% - 5px);
+  margin: 0px !important;
+}
+.grid-w20 {
+  width: calc(20% - 5px);
+  margin: 0px !important;
+}
+.grid-w25 {
+  width: calc(25% - 5px);
+  margin: 0px !important;
+}
+.grid-w30 {
+  width: calc(30% - 5px);
+  margin: 0px !important;
+}
+.grid-w33 {
+  width: calc(33% - 5px);
+  margin: 0px !important;
+}
+.grid-w35 {
+  width: calc(35% - 5px);
+  margin: 0px !important;
+}
+.grid-w40 {
+  width: calc(40% - 5px);
+  margin: 0px !important;
+}
+.grid-w45 {
+  width: calc(45% - 5px);
+  margin: 0px !important;
+}
+.grid-w50 {
+  width: calc(50% - 5px);
+  margin: 0px !important;
+}
+.grid-w55 {
+  width: calc(55% - 5px);
+  margin: 0px !important;
+}
+.grid-w60 {
+  width: calc(60% - 5px);
+  margin: 0px !important;
+}
+.grid-w65 {
+  width: calc(65% - 5px);
+  margin: 0px !important;
+}
+.grid-w66 {
+  width: calc(66% - 5px);
+  margin: 0px !important;
+}
+.grid-w70 {
+  width: calc(70% - 5px);
+  margin: 0px !important;
+}
+.grid-w75 {
+  width: calc(75% - 5px);
+  margin: 0px !important;
+}
+.grid-w80 {
+  width: calc(80% - 5px);
+  margin: 0px !important;
+}
+.grid-w85 {
+  width: calc(85% - 5px);
+  margin: 0px !important;
+}
+.grid-w90 {
+  width: calc(90% - 5px);
+  margin: 0px !important;
+}
+.grid-w95 {
+  width: calc(95% - 5px);
+  margin: 0px !important;
+}
+.grid-w100 {
+  width: calc(100% - 5px);
+  margin: 0px !important;
+}
+@media (width >= 640px) {
+  .sm\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .sm\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+@media (width >= 853px) {
+  .md\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .md\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+@media (width >= 1024px) {
+  .lg\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .lg\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+@media (width >= 1280px) {
+  .xl\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .xl\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+@media (width >= 1536px) {
+  .\32xl\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+.ratio-16-9 {
+  padding-top: 56.25%;
+}
+.ratio-21-9 {
+  padding-top: 42.85%;
+}
+.ratio-32-9 {
+  padding-top: 28.125%;
+}
+@media (width >= 640px) {
+  .sm\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .sm\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .sm\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 853px) {
+  .md\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .md\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .md\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1024px) {
+  .lg\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .lg\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .lg\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1280px) {
+  .xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1536px) {
+  .\32xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .\32xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .\32xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index f15ad75b..6dfa1a7c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -512,595 +512,3 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
-
-/* Gallery Specific Styles */
-.grid-w10 {
-  width: calc(10% - 5px);
-  margin: 0px !important;
-}
-.grid-w15 {
-  width: calc(15% - 5px);
-  margin: 0px !important;
-}
-.grid-w20 {
-  width: calc(20% - 5px);
-  margin: 0px !important;
-}
-.grid-w25 {
-  width: calc(25% - 5px);
-  margin: 0px !important;
-}
-.grid-w30 {
-  width: calc(30% - 5px);
-  margin: 0px !important;
-}
-.grid-w33 {
-  width: calc(33% - 5px);
-  margin: 0px !important;
-}
-.grid-w35 {
-  width: calc(35% - 5px);
-  margin: 0px !important;
-}
-.grid-w40 {
-  width: calc(40% - 5px);
-  margin: 0px !important;
-}
-.grid-w45 {
-  width: calc(45% - 5px);
-  margin: 0px !important;
-}
-.grid-w50 {
-  width: calc(50% - 5px);
-  margin: 0px !important;
-}
-.grid-w55 {
-  width: calc(55% - 5px);
-  margin: 0px !important;
-}
-.grid-w60 {
-  width: calc(60% - 5px);
-  margin: 0px !important;
-}
-.grid-w65 {
-  width: calc(65% - 5px);
-  margin: 0px !important;
-}
-.grid-w66 {
-  width: calc(66% - 5px);
-  margin: 0px !important;
-}
-.grid-w70 {
-  width: calc(70% - 5px);
-  margin: 0px !important;
-}
-.grid-w75 {
-  width: calc(75% - 5px);
-  margin: 0px !important;
-}
-.grid-w80 {
-  width: calc(80% - 5px);
-  margin: 0px !important;
-}
-.grid-w85 {
-  width: calc(85% - 5px);
-  margin: 0px !important;
-}
-.grid-w90 {
-  width: calc(90% - 5px);
-  margin: 0px !important;
-}
-.grid-w95 {
-  width: calc(95% - 5px);
-  margin: 0px !important;
-}
-.grid-w100 {
-  width: calc(100% - 5px);
-  margin: 0px !important;
-}
-
-@variant sm {
-  .sm\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .sm\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-
-@variant md {
-  .md\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .md\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-
-@variant lg {
-  .lg\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .lg\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-
-@variant xl {
-  .xl\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .xl\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-
-@variant 2xl {
-  .2xl\:grid-w10 {
-    width: calc(10% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w15 {
-    width: calc(15% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w20 {
-    width: calc(20% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w25 {
-    width: calc(25% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w30 {
-    width: calc(30% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w33 {
-    width: calc(33% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w35 {
-    width: calc(35% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w40 {
-    width: calc(40% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w45 {
-    width: calc(45% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w50 {
-    width: calc(50% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w55 {
-    width: calc(55% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w60 {
-    width: calc(60% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w65 {
-    width: calc(65% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w66 {
-    width: calc(66% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w70 {
-    width: calc(70% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w75 {
-    width: calc(75% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w80 {
-    width: calc(80% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w85 {
-    width: calc(85% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w90 {
-    width: calc(90% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w95 {
-    width: calc(95% - 5px);
-    margin: 0px !important;
-  }
-  .2xl\:grid-w100 {
-    width: calc(100% - 5px);
-    margin: 0px !important;
-  }
-}
-
-/* Carousel Specific Styles */
-.ratio-16-9 {
-  padding-top: 56.25%;
-} /* 16:9 Aspect Ratio */
-.ratio-21-9 {
-  padding-top: 42.85%;
-} /* 21:9 Aspect Ratio */
-.ratio-32-9 {
-  padding-top: 28.125%;
-} /* 32:9 Aspect Ratio */
-
-@variant sm {
-  .sm\:ratio-16-9 {
-    padding-top: 56.25%;
-  } /* 16:9 Aspect Ratio */
-  .sm\:ratio-21-9 {
-    padding-top: 42.85%;
-  } /* 21:9 Aspect Ratio */
-  .sm\:ratio-32-9 {
-    padding-top: 28.125%;
-  } /* 32:9 Aspect Ratio */
-}
-
-@variant md {
-  .md\:ratio-16-9 {
-    padding-top: 56.25%;
-  } /* 16:9 Aspect Ratio */
-  .md\:ratio-21-9 {
-    padding-top: 42.85%;
-  } /* 21:9 Aspect Ratio */
-  .md\:ratio-32-9 {
-    padding-top: 28.125%;
-  } /* 32:9 Aspect Ratio */
-}
-
-@variant lg {
-  .lg\:ratio-16-9 {
-    padding-top: 56.25%;
-  } /* 16:9 Aspect Ratio */
-  .lg\:ratio-21-9 {
-    padding-top: 42.85%;
-  } /* 21:9 Aspect Ratio */
-  .lg\:ratio-32-9 {
-    padding-top: 28.125%;
-  } /* 32:9 Aspect Ratio */
-}
-
-@variant xl {
-  .xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  } /* 16:9 Aspect Ratio */
-  .xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  } /* 21:9 Aspect Ratio */
-  .xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  } /* 32:9 Aspect Ratio */
-}
-
-@variant 2xl {
-  .2xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  } /* 16:9 Aspect Ratio */
-  .2xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  } /* 21:9 Aspect Ratio */
-  .2xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  } /* 32:9 Aspect Ratio */
-}
diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index f76b90fc..9210cc57 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -60,6 +60,13 @@
 
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
+  {{ $galleryCSS := resources.Get "css/components/gallery.css" }}
+  {{ $galleryCSS = $galleryCSS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $galleryCSS.RelPermalink }}"
+    integrity="{{ $galleryCSS.Data.Integrity }}">
   {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
   {{ $packeryLib = $packeryLib | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
   <script
@@ -78,6 +85,13 @@
 
 {{/* tw-elements */}}
 {{ if or (.Page.HasShortcode "carousel") (.Page.HasShortcode "timeline") }}
+  {{ $carouselCSS := resources.Get "css/components/carousel.css" }}
+  {{ $carouselCSS = $carouselCSS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $carouselCSS.RelPermalink }}"
+    integrity="{{ $carouselCSS.Data.Integrity }}">
   {{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
   {{ $twelementsLib = $twelementsLib | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
   <script

From cb2609a65dd0a7183cca44ec1277f4ddca746dbe Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 13 Jul 2025 22:04:51 +0800
Subject: [PATCH 3/4] refactor: modularize chroma css

---
 assets/css/compiled/main.css     | 334 +++++++++++++++----------------
 assets/css/components/chroma.css | 226 +++++++++++++++++++++
 assets/css/main.css              | 227 +--------------------
 3 files changed, 394 insertions(+), 393 deletions(-)
 create mode 100644 assets/css/components/chroma.css

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 1c4a32e1..f1a3bd7e 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -12,6 +12,168 @@ body.zen-mode-enable {
     display: none !important;
   }
 }
+.prose .chroma {
+  position: static;
+  border-radius: var(--radius-md);
+  background-color: rgba(var(--color-neutral-50), 1);
+  color: rgba(var(--color-neutral-700), 1);
+  &:is(.dark *) {
+    background-color: rgba(var(--color-neutral-700), 1);
+  }
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-200), 1);
+  }
+}
+.chroma .lntd, .chroma .lntd pre {
+  margin: calc(var(--spacing) * 0);
+  --tw-border-style: none;
+  border-style: none;
+  padding: calc(var(--spacing) * 0);
+  vertical-align: top;
+}
+.chroma .lntable {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 3);
+  font-size: var(--text-base);
+  line-height: var(--tw-leading, var(--text-base--line-height));
+  border-spacing: 0;
+}
+.chroma .hl {
+  margin-inline: calc(var(--spacing) * -4);
+  display: block;
+  width: auto;
+  background-color: rgba(var(--color-primary-100), 1);
+  padding-inline: calc(var(--spacing) * 4);
+  &:is(.dark *) {
+    background-color: rgba(var(--color-primary-900), 1);
+  }
+}
+.chroma .lntd .hl {
+  margin: calc(var(--spacing) * 0);
+  padding: calc(var(--spacing) * 0);
+}
+.chroma .lnt, .chroma .ln {
+  margin-right: 0.4em;
+  padding-inline: 0.4em;
+  padding-block: calc(var(--spacing) * 0);
+  color: rgba(var(--color-neutral-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-300), 1);
+  }
+}
+.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
+  color: rgba(var(--color-primary-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-300), 1);
+  }
+}
+.chroma .kc {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-600), 1);
+  }
+}
+.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
+  color: rgba(var(--color-secondary-900), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-200), 1);
+  }
+}
+.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
+  color: rgba(var(--color-secondary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-300), 1);
+  }
+}
+.chroma .no, .chroma .ne, .chroma .vg {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .nf {
+  color: rgba(var(--color-secondary-600), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
+  color: rgba(var(--color-primary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-400), 1);
+  }
+}
+.chroma .se {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-secondary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-secondary-500), 1);
+  }
+}
+.chroma .sr, .chroma .ss {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-primary-800), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-400), 1);
+  }
+}
+.chroma .ow {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-primary-400), 1);
+  &:is(.dark *) {
+    color: rgba(var(--color-primary-600), 1);
+  }
+}
+.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
+  color: rgba(var(--color-neutral-500), 1);
+  font-style: italic;
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-400), 1);
+  }
+}
+.chroma .ch {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-neutral-500), 1);
+  font-style: italic;
+  &:is(.dark *) {
+    color: rgba(var(--color-neutral-400), 1);
+  }
+}
+.chroma .ge {
+  font-style: italic;
+}
+.chroma .gh {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+  color: rgba(var(--color-neutral-500), 1);
+}
+.chroma .gs {
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
+}
+.chroma .gu, .chroma .gt {
+  color: rgba(var(--color-neutral-500), 1);
+}
+.chroma .gl {
+  text-decoration-line: underline;
+}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -3521,171 +3683,9 @@ a {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
-.prose .chroma {
-  position: static;
-  border-radius: var(--radius-md);
-  background-color: rgba(var(--color-neutral-50), 1);
-  color: rgba(var(--color-neutral-700), 1);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-neutral-700), 1);
-  }
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-200), 1);
-  }
-}
 .prose-invert .highlight pre > code {
   background-color: unset;
 }
-.chroma .lntd, .chroma .lntd pre {
-  margin: calc(var(--spacing) * 0);
-  --tw-border-style: none;
-  border-style: none;
-  padding: calc(var(--spacing) * 0);
-  vertical-align: top;
-}
-.chroma .lntable {
-  display: block;
-  width: auto;
-  overflow: hidden;
-  padding-inline: calc(var(--spacing) * 4);
-  padding-block: calc(var(--spacing) * 3);
-  font-size: var(--text-base);
-  line-height: var(--tw-leading, var(--text-base--line-height));
-  border-spacing: 0;
-}
-.chroma .hl {
-  margin-inline: calc(var(--spacing) * -4);
-  display: block;
-  width: auto;
-  background-color: rgba(var(--color-primary-100), 1);
-  padding-inline: calc(var(--spacing) * 4);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-primary-900), 1);
-  }
-}
-.chroma .lntd .hl {
-  margin: calc(var(--spacing) * 0);
-  padding: calc(var(--spacing) * 0);
-}
-.chroma .lnt, .chroma .ln {
-  margin-right: 0.4em;
-  padding-inline: 0.4em;
-  padding-block: calc(var(--spacing) * 0);
-  color: rgba(var(--color-neutral-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-300), 1);
-  }
-}
-.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
-  color: rgba(var(--color-primary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-300), 1);
-  }
-}
-.chroma .kc {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-600), 1);
-  }
-}
-.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
-  color: rgba(var(--color-secondary-900), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-200), 1);
-  }
-}
-.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
-  color: rgba(var(--color-secondary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-300), 1);
-  }
-}
-.chroma .no, .chroma .ne, .chroma .vg {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .nf {
-  color: rgba(var(--color-secondary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .se {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .sr, .chroma .ss {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .ow {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-600), 1);
-  }
-}
-.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ch {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ge {
-  font-style: italic;
-}
-.chroma .gh {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gs {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-}
-.chroma .gu, .chroma .gt {
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gl {
-  text-decoration-line: underline;
-}
 pre {
   text-align: left;
 }
@@ -3946,6 +3946,10 @@ pre {
     }
   }
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4069,10 +4073,6 @@ pre {
   syntax: "*";
   inherits: false;
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-tracking {
   syntax: "*";
   inherits: false;
@@ -4277,6 +4277,7 @@ pre {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -4304,7 +4305,6 @@ pre {
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
-      --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
diff --git a/assets/css/components/chroma.css b/assets/css/components/chroma.css
new file mode 100644
index 00000000..628714b6
--- /dev/null
+++ b/assets/css/components/chroma.css
@@ -0,0 +1,226 @@
+
+/* -- Chroma Highlight -- */
+/* Background */
+.prose .chroma {
+  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+}
+
+/* LineTableTD */
+.chroma .lntd,
+.chroma .lntd pre {
+  @apply p-0 m-0 align-top border-none;
+}
+
+/* LineTable */
+.chroma .lntable {
+  @apply block w-auto px-4 py-3 overflow-hidden text-base;
+  border-spacing: 0;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
+}
+
+.chroma .lntd .hl {
+  @apply p-0 m-0;
+}
+
+/* LineNumbersTable */
+/* LineNumbers */
+.chroma .lnt,
+.chroma .ln {
+  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
+}
+
+/* Keyword */
+/* KeywordDeclaration */
+/* KeywordNamespace */
+/* KeywordPseudo */
+/* KeywordReserved */
+/* NameClass */
+/* NameFunctionMagic */
+/* NameNamespace */
+/* NameVariableClass */
+/* Operator */
+.chroma .k,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .nc,
+.chroma .fm,
+.chroma .nn,
+.chroma .vc,
+.chroma .o {
+  @apply text-primary-600 dark:text-primary-300;
+}
+
+/* KeywordConstant */
+.chroma .kc {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* KeywordType */
+/* NameVariable */
+/* NameVariableInstance */
+/* NameVariableMagic */
+/* LiteralNumber */
+/* LiteralNumberBin */
+/* LiteralNumberFloat */
+/* LiteralNumberHex */
+/* LiteralNumberInteger */
+/* LiteralNumberIntegerLong */
+/* LiteralNumberOct */
+.chroma .kt,
+.chroma .nv,
+.chroma .vi,
+.chroma .vm,
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
+  @apply text-secondary-400 dark:text-secondary-600;
+}
+
+/* Name */
+/* NameDecorator */
+/* NameEntity */
+/* NameLabel */
+.chroma .n,
+.chroma .nd,
+.chroma .ni,
+.chroma .nl {
+  @apply text-secondary-900 dark:text-secondary-200;
+}
+
+/* NameAttribute */
+/* NameBuiltin */
+/* NameBuiltinPseudo */
+/* NameOther */
+/* NameProperty */
+/* NameTag */
+.chroma .na,
+.chroma .nb,
+.chroma .bp,
+.chroma .nx,
+.chroma .py,
+.chroma .nt {
+  @apply text-secondary-800 dark:text-secondary-300;
+}
+
+/* NameConstant */
+/* NameException */
+/* NameVariableGlobal */
+.chroma .no,
+.chroma .ne,
+.chroma .vg {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* NameFunction */
+.chroma .nf {
+  @apply text-secondary-600 dark:text-secondary-500;
+}
+
+/* Literal */
+/* LiteralDate */
+/* LiteralString */
+/* LiteralStringAffix */
+/* LiteralStringBacktick */
+/* LiteralStringChar */
+/* LiteralStringDelimiter */
+/* LiteralStringDoc */
+/* LiteralStringDouble */
+/* LiteralStringHeredoc */
+/* LiteralStringInterpol */
+/* LiteralStringOther */
+/* LiteralStringSingle */
+/* GenericInserted */
+/* GenericOutput */
+/* GenericPrompt */
+.chroma .l,
+.chroma .ld,
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .sh,
+.chroma .si,
+.chroma .sx,
+.chroma .s1,
+.chroma .gi,
+.chroma .go,
+.chroma .gp {
+  @apply text-primary-800 dark:text-primary-400;
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+}
+
+/* LiteralStringRegex */
+/* LiteralStringSymbol */
+.chroma .sr,
+.chroma .ss {
+  @apply font-semibold text-primary-800 dark:text-primary-400;
+}
+
+/* OperatorWord */
+.chroma .ow {
+  @apply font-semibold text-primary-400 dark:text-primary-600;
+}
+
+/* Comment */
+/* CommentMultiline */
+/* CommentSingle */
+/* CommentSpecial */
+/* CommentPreproc */
+/* CommentPreprocFile */
+.chroma .c,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
+  @apply italic text-neutral-500 dark:text-neutral-400;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
+}
+
+/* GenericEmph */
+.chroma .ge {
+  @apply italic;
+}
+
+/* GenericHeading */
+.chroma .gh {
+  @apply font-semibold text-neutral-500;
+}
+
+/* GenericStrong */
+.chroma .gs {
+  @apply font-semibold;
+}
+
+/* GenericSubheading */
+/* GenericTraceback */
+.chroma .gu,
+.chroma .gt {
+  @apply text-neutral-500;
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  @apply underline;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 6dfa1a7c..a01866af 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,6 +1,7 @@
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 
 @import "./components/zen-mode.css";
+@import "./components/chroma.css";
 
 @import "tailwindcss";
 @config "../../tailwind.config.js";
@@ -151,236 +152,10 @@ a {
   overflow-wrap: break-word;
 }
 
-/* -- Chroma Highlight -- */
-/* Background */
-.prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
-}
-
 .prose-invert .highlight pre > code {
   background-color: unset;
 }
 
-/* LineTableTD */
-.chroma .lntd,
-.chroma .lntd pre {
-  @apply p-0 m-0 align-top border-none;
-}
-
-/* LineTable */
-.chroma .lntable {
-  @apply block w-auto px-4 py-3 overflow-hidden text-base;
-  border-spacing: 0;
-}
-
-/* LineHighlight */
-.chroma .hl {
-  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
-}
-
-.chroma .lntd .hl {
-  @apply p-0 m-0;
-}
-
-/* LineNumbersTable */
-/* LineNumbers */
-.chroma .lnt,
-.chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
-}
-
-/* Keyword */
-/* KeywordDeclaration */
-/* KeywordNamespace */
-/* KeywordPseudo */
-/* KeywordReserved */
-/* NameClass */
-/* NameFunctionMagic */
-/* NameNamespace */
-/* NameVariableClass */
-/* Operator */
-.chroma .k,
-.chroma .kd,
-.chroma .kn,
-.chroma .kp,
-.chroma .kr,
-.chroma .nc,
-.chroma .fm,
-.chroma .nn,
-.chroma .vc,
-.chroma .o {
-  @apply text-primary-600 dark:text-primary-300;
-}
-
-/* KeywordConstant */
-.chroma .kc {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* KeywordType */
-/* NameVariable */
-/* NameVariableInstance */
-/* NameVariableMagic */
-/* LiteralNumber */
-/* LiteralNumberBin */
-/* LiteralNumberFloat */
-/* LiteralNumberHex */
-/* LiteralNumberInteger */
-/* LiteralNumberIntegerLong */
-/* LiteralNumberOct */
-.chroma .kt,
-.chroma .nv,
-.chroma .vi,
-.chroma .vm,
-.chroma .m,
-.chroma .mb,
-.chroma .mf,
-.chroma .mh,
-.chroma .mi,
-.chroma .il,
-.chroma .mo {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-
-/* Name */
-/* NameDecorator */
-/* NameEntity */
-/* NameLabel */
-.chroma .n,
-.chroma .nd,
-.chroma .ni,
-.chroma .nl {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-
-/* NameAttribute */
-/* NameBuiltin */
-/* NameBuiltinPseudo */
-/* NameOther */
-/* NameProperty */
-/* NameTag */
-.chroma .na,
-.chroma .nb,
-.chroma .bp,
-.chroma .nx,
-.chroma .py,
-.chroma .nt {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-
-/* NameConstant */
-/* NameException */
-/* NameVariableGlobal */
-.chroma .no,
-.chroma .ne,
-.chroma .vg {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* NameFunction */
-.chroma .nf {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-
-/* Literal */
-/* LiteralDate */
-/* LiteralString */
-/* LiteralStringAffix */
-/* LiteralStringBacktick */
-/* LiteralStringChar */
-/* LiteralStringDelimiter */
-/* LiteralStringDoc */
-/* LiteralStringDouble */
-/* LiteralStringHeredoc */
-/* LiteralStringInterpol */
-/* LiteralStringOther */
-/* LiteralStringSingle */
-/* GenericInserted */
-/* GenericOutput */
-/* GenericPrompt */
-.chroma .l,
-.chroma .ld,
-.chroma .s,
-.chroma .sa,
-.chroma .sb,
-.chroma .sc,
-.chroma .dl,
-.chroma .sd,
-.chroma .s2,
-.chroma .sh,
-.chroma .si,
-.chroma .sx,
-.chroma .s1,
-.chroma .gi,
-.chroma .go,
-.chroma .gp {
-  @apply text-primary-800 dark:text-primary-400;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* LiteralStringRegex */
-/* LiteralStringSymbol */
-.chroma .sr,
-.chroma .ss {
-  @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  @apply font-semibold text-primary-400 dark:text-primary-600;
-}
-
-/* Comment */
-/* CommentMultiline */
-/* CommentSingle */
-/* CommentSpecial */
-/* CommentPreproc */
-/* CommentPreprocFile */
-.chroma .c,
-.chroma .cm,
-.chroma .c1,
-.chroma .cs,
-.chroma .cp,
-.chroma .cpf {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
-}
-
-/* GenericEmph */
-.chroma .ge {
-  @apply italic;
-}
-
-/* GenericHeading */
-.chroma .gh {
-  @apply font-semibold text-neutral-500;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  @apply font-semibold;
-}
-
-/* GenericSubheading */
-/* GenericTraceback */
-.chroma .gu,
-.chroma .gt {
-  @apply text-neutral-500;
-}
-
-/* GenericUnderline */
-.chroma .gl {
-  @apply underline;
-}
-
 /* Custom */
 
 pre {

From 1461ee534dd2d306e46ba90f0f39b030ff71c0cf Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 13 Jul 2025 22:07:36 +0800
Subject: [PATCH 4/4] refactor: consolidate background properties in CSS

---
 assets/css/main.css | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index a01866af..c1e6e7de 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -162,39 +162,32 @@ pre {
   text-align: left;
 }
 
-.thumbnail {
-  min-width: 300px;
-  height: 180px;
+.thumbnail,
+.thumbnail_card,
+.thumbnail_card_related,
+.thumbnail_card_term,
+.single_hero_basic,
+.single_hero_background {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }
 
+.thumbnail {
+  min-width: 300px;
+  height: 180px;
+}
+
 .thumbnail_card {
   height: 200px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 
 .thumbnail_card_related {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 
 .thumbnail_card_term {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.single_hero_basic {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 
 .single_hero_round {
@@ -203,9 +196,6 @@ pre {
 }
 
 .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   z-index: -10;
 }