Use fg-* color classes; tweak sidebar alignment

Replace instances of text-white/text-secondary with the fg-white/fg-secondary utility across example pages for consistent foreground color utilities. Updated: site/src/assets/examples/{cover,drawer-navbar,features,headers,sidebars}/index.astro. Also added align-items-start to sidebar <ul> elements to improve item alignment.

Author: coliff

site/src/assets/examples/cover/index.astro

@@ -26,6 +26,6 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
   </main>
 
   <footer class="mt-auto fg-secondary">
-    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
+    <p>Cover template for <a href="https://getbootstrap.com/" class="fg-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="fg-white">@mdo</a>.</p>
   </footer>
 </div>

site/src/assets/examples/drawer-navbar/index.astro

@@ -65,7 +65,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 </div>
 
 <main class="container">
-  <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
+  <div class="d-flex align-items-center p-3 my-3 fg-white bg-purple rounded shadow-sm">
     <img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
     <div class="lh-1">
       <h1 class="h6 mb-0 fg-white lh-1">Bootstrap</h1>

site/src/assets/examples/features/index.astro

@@ -149,7 +149,7 @@ export const extra_css = ['features.css']
     <div class="row row-cols-1 lg:row-cols-3 align-items-stretch g-4 py-5">
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
@@ -170,7 +170,7 @@ export const extra_css = ['features.css']
 
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">

site/src/assets/examples/headers/index.astro

@@ -97,10 +97,10 @@ export const extra_css = ['headers.css']
 
         <ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
           <li><a href="#" class="nav-link px-2 fg-secondary">Home</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Features</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Pricing</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">FAQs</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">About</a></li>
         </ul>
 
         <form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
@@ -249,25 +249,25 @@ export const extra_css = ['headers.css']
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
                 Dashboard
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
                 Orders
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
                 Products
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
                 Customers
               </a>

site/src/assets/examples/sidebars/index.astro

@@ -37,33 +37,33 @@ export const extra_js = [{src: 'sidebars.js'}]
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav flex-column mb-auto">
+    <ul class="nav flex-column align-items-start mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
           Home
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link text-white">
+        <a href="#" class="nav-link fg-white">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
           Customers
         </a>
@@ -93,7 +93,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav flex-column mb-auto">
+    <ul class="nav flex-column align-items-start mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>