feat(sitemap): redesign UI for improved navigation

The sitemap page has undergone a significant redesign for enhanced user navigation. The update introduces a card-based layout with updated CSS for better visuals and user interaction, focusing on accessibility and aesthetics. The redesigned sitemap now features a containerized layout with cards, improving the overall page structure and readability. Each group within the sitemap is now displayed as a card, making individual sections more distinguishable and easier to navigate. This change aims to provide a more engaging user experience by making information easier to find and the page more pleasant to interact with.

src/structables/static/css/style.css

@@ -321,3 +321,34 @@ iframe {
 .text-muted {
   color: #6c757d !important;
 }
+
+
+
+.sitemap-group .card {
+  background-color: var(--primary-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
+  overflow: hidden;
+}
+
+.sitemap-group .card-title {
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.sitemap-group .list-unstyled {
+  padding-left: 0;
+}
+
+.sitemap-group .list-unstyled li {
+  margin-bottom: 0.5em;
+}
+
+.sitemap-group .list-unstyled li a {
+  color: var(--link-color);
+}
+
+.sitemap-group .list-unstyled li a:hover {
+  text-decoration: underline;
+}

src/structables/templates/sitemap.html

@@ -1,23 +1,27 @@
 {% extends "base.html" %}
 
 {% block content %}
-	<center>
+<div class="container my-5">
+    <div class="text-center mb-5">
         <h1>Sitemap</h1>
-		<div class="container">
+    </div>
-			<div class="row sitemap-groups"></div>
+    <div class="row">
         {% for group in groups %}
-			<div class="sitemap-group col-xs-12 col-sm-6 col-lg-4">
+        <div class="sitemap-group col-xs-12 col-sm-6 col-lg-4 mb-4">
-				<a href="{{ group[1] }}">
+            <div class="card h-100">
-					<h2>{{ group[0] }}</h2>
+                <div class="card-body">
-				</a>
+                    <h2 class="card-title">
-				<ul>
+                        <a href="{{ group[1] }}" class="text-decoration-none">{{ group[0] }}</a>
+                    </h2>
+                    <ul class="list-unstyled">
                         {% for channel in group[2] %}
-					<li><a href="{{ channel[1] }}">{{ channel[0] }}</a></li>
+                        <li><a href="{{ channel[1] }}" class="text-decoration-none">{{ channel[0] }}</a></li>
                         {% endfor %}
                     </ul>
                 </div>
+            </div>
+        </div>
         {% endfor %}
     </div>
 </div>
-	</center>
 {% endblock %}