v6: Albums Example layout fixes (#42357)

* Albums Example layout fixes

- navbar hamburger button - add btn-icon class
- align content at bottom of cards
- use a valid background color for albums (main content)

* Change link text color from text-white to fg-white

diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro
index 39c0d6bf29efa7f04f75e9bcf98a8cdae35363d9..dd35c20f0f876b03a11434436ee091bde4e98f46 100644 (file)
--- a/site/src/assets/examples/album/index.astro
+++ b/site/src/assets/examples/album/index.astro
@@ -16,9 +16,9 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <div class="sm:col-4 md:offset-1 py-4">
           <h4>Contact</h4>
           <ul class="list-unstyled">
-            <li><a href="#" class="text-white">Follow on X</a></li>
-            <li><a href="#" class="text-white">Like on Facebook</a></li>
-            <li><a href="#" class="text-white">Email me</a></li>
+            <li><a href="#" class="fg-white">Follow on X</a></li>
+            <li><a href="#" class="fg-white">Like on Facebook</a></li>
+            <li><a href="#" class="fg-white">Email me</a></li>
           </ul>
         </div>
       </div>
@@ -30,7 +30,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
         <strong>Album</strong>
       </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
     </div>
@@ -45,14 +45,14 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <h1 class="fw-light">Album example</h1>
         <p class="lead fg-2">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
-          <a href="#" class="btn-solid theme-primary my-2">Main call to action</a>
-          <a href="#" class="btn-solid theme-secondary my-2">Secondary action</a>
+          <a href="#" class="btn-solid theme-primary m-2">Main call to action</a>
+          <a href="#" class="btn-solid theme-secondary m-2">Secondary action</a>
         </p>
       </div>
     </div>
   </section>
 
-  <div class="album py-5 bg-body-tertiary">
+  <div class="album py-5 bg-1">
     <div class="container">
 
       <div class="row row-cols-1 sm:row-cols-2 md:row-cols-3 g-3">
@@ -61,7 +61,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -76,7 +76,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -91,7 +91,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -107,7 +107,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -122,7 +122,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -137,7 +137,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -153,7 +153,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -168,7 +168,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
@@ -183,7 +183,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
             <Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
             <div class="card-body">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-              <div class="d-flex justify-content-between align-items-center">
+              <div class="d-flex justify-content-between align-items-center w-100">
                 <div class="btn-group">
                   <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
                   <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>