updates

templates/default.html

@@ -84,6 +84,12 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-    {% block footer_includes %}
-    {% endblock %}
+
+    <div class="container-fluid">
+      <div class="row">
+        {% block footer_includes %}
+        {% endblock %}
+      </div>
+      <div class="row small text-muted justify-content-end"><p class="mx-4">Page created with <a href="">microgen</a></p></div>
+    </div>
   </body>

templates/index.html

@@ -7,12 +7,17 @@
 {% endblock %}
 
 {% block content %}
-
-  <!-- <div class="row row-cols-1 row-cols-md-3 row-cols-xxl-5 g-4 px-1 py-2"> -->
-  <div class="container-fluid content-row">
-    <div class="row justify-content-start" style="margin-left: auto; margin-right: auto;">
+<div class="container">
+  <div class="row justify-content-around" style="margin-left: auto; margin-right: auto;">
+    {% for category in categories %}
+      <a href="categories/{{ category }}.html" class="mx-2">{{ category }}</a>
+    {% endfor %}
+  </div>
+</div>
+<div class="container-fluid content-row mx-auto">
+    <div class="row justify-content-start mx-auto">
       {% for content_item in content_items %}
-        <div class="d-flex justify-content-center mx-2 mb-4">
+        <div class="d-flex justify-content-center mb-4">
           <div class="card h-100 rounded mx-1 my-3" style="width: 400px;">
             <div class="card-header">
               {% if content_item.image_file %}