Improve BrainOrdure editorial UI

app/views/Categories/index.asp

@@ -1,44 +1,49 @@
-<div class="d-flex align-items-center justify-content-between mb-4">
-  <div>
-    <div class="eyebrow mb-2">Section index</div>
-    <h1 class="page-title h3 mb-1">Categories</h1>
-    <p class="text-muted mb-0">Browse post categories from ASPBlogBrainOrdure.</p>
+<header class="masthead masthead-page">
+  <div class="overlay"></div>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-md-10 mx-auto">
+        <div class="page-heading text-center">
+          <h1>Categories</h1>
+          <span class="subheading">Browse the sections of BrainOrdure.</span>
+        </div>
+      </div>
+    </div>
   </div>
-  <a class="btn btn-primary" href="<%= CategoryNewUrl() %>">New Category</a>
-</div>
+</header>
+
+<div class="row">
+  <div class="col-lg-8 mx-auto">
+    <div class="d-flex justify-content-end mb-4">
+      <a class="btn btn-primary" href="<%= CategoryNewUrl() %>">New Category</a>
+    </div>
 
 <%
 Dim categoryIter, categoryItem
 Set categoryIter = categories.Iterator()
-
-If categories.Count = 0 Then
 %>
-  <div class="alert alert-secondary">No categories are available yet.</div>
-<%
-Else
-%>
-  <div class="row gy-3 magazine-list">
-    <%
-    Do While categoryIter.HasNext
-        Set categoryItem = categoryIter.GetNext()
-    %>
-      <div class="col-12">
-        <article class="card shadow-sm">
-          <div class="card-body">
-            <h2 class="h5 mb-2">
-              <a href="<%= CategoryUrl(categoryItem.CategoryID) %>" class="text-decoration-none">
-                <%= H(categoryItem.Name) %>
-              </a>
-            </h2>
-            <p class="text-muted mb-3"><%= H(categoryItem.Description) %></p>
-            <a class="btn btn-sm btn-outline-primary" href="<%= CategoryUrl(categoryItem.CategoryID) %>">View</a>
-          </div>
-        </article>
+    <% If categories.Count = 0 Then %>
+      <div class="alert alert-secondary">No categories are available yet.</div>
+    <% Else %>
+      <div class="row gy-4">
+        <%
+        Do While categoryIter.HasNext
+            Set categoryItem = categoryIter.GetNext()
+        %>
+        <div class="col-md-6">
+          <article class="card shadow-sm h-100 post-card">
+            <div class="card-body">
+              <div class="magazine-label mb-3">Section</div>
+              <h2 class="post-title h4"><a href="<%= CategoryUrl(categoryItem.CategoryID) %>"><%= H(categoryItem.Name) %></a></h2>
+              <p class="post-subtitle mb-3"><%= H(categoryItem.Description) %></p>
+              <a class="btn btn-sm btn-outline-primary" href="<%= CategoryUrl(categoryItem.CategoryID) %>">Browse</a>
+            </div>
+          </article>
+        </div>
+        <%
+        Loop
+        %>
       </div>
-    <%
-    Loop
-    %>
+    <% End If %>
   </div>
-<%
-End If
-%>
+</div>