sliding modals, view transitions, accessibility, etc, etc

src/pages/partials/cards.astro

@@ -138,6 +138,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 });
 
 ---
+
 {(start === 0) &&
 
     <div id="facetContainer" hx-swap-oob="true">
@@ -164,8 +165,10 @@ const facets = searchResults.results.slice(1).map((result: any) => {
             </div>
         ))}
     </div>
-
-    <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small" hx-swap-oob="true">
+    <div id="totalResults d-none" class="ms-5 text-secondary" hx-swap-oob="true">
+        {totalHits} {totalHits === 1 ? ' result' : ' results'}
+    </div>
+    <div id="activeFilters" class="d-flex align-items-center small ms-auto" hx-swap-oob="true">
         {(Object.entries(filters).length > 0) && 
         <span class="me-1">Filtered by:</span>
         <ul class="list-group list-group-horizontal">
@@ -179,7 +182,6 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         }
     </div>
 
-
     <script define:vars={{ totalHits, filters, facets }} is:inline>
 
         // Filter the facet values to make things like Set easier to find