switching to Bootstrap 5

templates/content_item.html

@@ -14,9 +14,9 @@
     <h1>{{ content_item.title }}</h1>
   {% endif %}
   <article>{{ content_item.html | safe }}</article>
-  <div id="categories" class="row">
+  <div id="categories">
     {% for category in content_item.categories %}
-    <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-2 small text-muted">{{ category }} </a>
+    <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-1 text-decoration-none small text-muted">{{ category }} </a>
     {% endfor %}
   </div>
   <a href="../index.html" class="btn btn-secondary mt-4">← Back</a>

templates/default.html

@@ -5,9 +5,14 @@
     {% set base = "" %}
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
     <title>{{ page_title }}</title>
     <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      }
       .top_header {
         position: relative;
         height: 250px;
@@ -80,29 +85,29 @@
             <a href="{{ parent_path }}static/about.html">About</a>
     </div>
     <div id="categories_container" class="container">
-      <div id="categories_menu" class="row justify-content-around mx-auto" style="display: none">
+      <div id="categories_menu" class="row justify-content-center mx-auto mb-2" style="display: none">
         {% for category in categories %}
-          <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-2">{{ category }}</a>
+          <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-1 text-decoration-none">{{ category }}</a>
         {% endfor %}
       </div>
     </div>    
     
-    <div id="content">{% block content %}{% endblock %}</div>
+    <div id="content" class="container-fluid">
-
+      {% block content %}{% endblock %}
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    </div>
-    <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>
 
     <div id="footer" class="container-fluid">
       <div id="footer-data" class="row">
         {% block footer_includes %}
         {% endblock %}
       </div>
-      <div class="row small text-muted justify-content-end">
+      <div class="row small text-muted">
-        <p class="mx-4">Page created with <a href="#">microgen</a></p>
+        <p>Page created with <a class="text-decoration-none" href="#">microgen</a></p>
       </div>
     </div>
-  <script defer>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.min.js" integrity="sha384-RuyvpeZCxMJCqVUGFI0Do1mQrods/hhxYlcVfGPOfQtPJh0JCw12tUAZ/Mv10S7D" crossorigin="anonymous"></script>
+<script defer>
     document.getElementById("categories_toggle").onclick = function() {
       categories_menu_item = document.getElementById("categories_menu")
       if (categories_menu_item.style.display == "none") {

templates/index.html

@@ -9,11 +9,11 @@
 
 {% block content %}
 
-<div class="container-fluid content-row mx-auto">
+
-    <div class="row justify-content-start mx-auto">
+  <div class="row mx-auto justify-content-start g-4 py-4">
       {% for content_item in content_items %}
-        <div class="d-flex justify-content-center mb-4">
+      <div class="col">
-          <div class="card h-100 rounded mx-1 my-3" style="width: 400px;">
+          <div class="card h-100 px-0 rounded mx-1 my-3" style="width: 100%; width: 350px;">
             <div class="card-header">
               {% if content_item.image_file %}
               <img src="{{ parent_path }}static/images/{{ content_item.image_file }}" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-scale rounded" style="max-height: 200px; width: auto;">
@@ -21,9 +21,9 @@
               <img src="static/images/1x1.png" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-scale rounded" style="height: 200px; width: auto;">
               {% endif %}
             </div>
-            <div class="card-body d-flex flex-column">
+            <div class="card-body">
               <h5 class="card-title"><a class="text-decoration-none text-body" href="{{ parent_path }}content/{{ content_item.slug}}.html">{{ content_item.title }}</a></h5>
-              <p class="card-text mb-3">{{ content_item.preview | safe}}<a href="{{ parent_path }}content/{{ content_item.slug}}.html">... read more</a> </p>
+              <p class="card-text mb-2">{{ content_item.preview | safe}}<a class="text-decoration-none" href="{{ parent_path }}content/{{ content_item.slug}}.html">... read more</a> </p>
             </div>
             <div class="card-footer">
               {% for item_category in content_item.categories %}
@@ -32,9 +32,11 @@
             </div>
           </div>
       </div>
+
+
       {% endfor %}
     </div>
-  </div>
+
 
 
 {% endblock %}