Refactor CSS to use Bootstrap variables

Replaced custom `--gray-2` variable with Bootstrap's `--bs-light-text-emphasis` and `--bs-border-color` in `base.css` and `timeline.css`. This change standardizes the color scheme and improves maintainability by leveraging Bootstrap's predefined variables.
EdiWang · Sep 15, 2024 · 633560f · 633560f
1 parent 14560ad
commit 633560f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/Moonglade.Web/wwwroot/css/base.css b/src/Moonglade.Web/wwwroot/css/base.css
@@ -6,7 +6,6 @@
     --transparent-dark-2: rgba(0, 0, 0, 0.125);
     --transparent-dark-4: rgba(0, 0, 0, 0.175);
     --gray-1: #FAFAFA;
-    --gray-2: #EEE;
 }
 
 ::selection {
@@ -393,7 +392,7 @@ div.animbrand a:hover {
 }
 
 .navbar-moonglade .navbar-nav .nav-link {
-    color: var(--gray-2);
+    color: var(--bs-light-text-emphasis);
 }
 
     .navbar-moonglade .navbar-nav .nav-link:focus,

diff --git a/src/Moonglade.Web/wwwroot/css/timeline.css b/src/Moonglade.Web/wwwroot/css/timeline.css
@@ -7,7 +7,7 @@
 }
 
 .timeline-heading {
-    border-bottom: 1px solid var(--gray-2);
+    border-bottom: 1px solid var(--bs-border-color);
     margin-bottom: 10px;
 }
 
@@ -18,7 +18,7 @@
 }
 
     .timeline:before {
-        background-color: var(--gray-2);
+        background-color: var(--bs-border-color);
         bottom: 0;
         content: " ";
         left: 50%;