Improve feed HTML

discord_rss_bot/templates/feed.html

@@ -1,6 +1,9 @@
 {% extends "base.html" %}
 {% block title %} | {{ feed.title }}{% endblock %}
 {% block content %}
+    <div class="p-2 mb-2 border border-dark" style="background: #161616;">
+
+        {# The feed title.#}
         <h2>
             <a class="text-muted text-decoration-none" href="{{ feed.link }}">
                 {{ feed.title }}
@@ -10,19 +13,25 @@
             </a>
         </h2>
 
-
+        {# Feed subtitle, probably description. #}
         {% if feed.subtitle %}
             <small class="text-muted text-decoration-none">{{ feed.subtitle }}</small>
+            <br>
         {% endif %}
 
+        {# When this feed was added.#}
         {% if feed.added %}
             Added: {{ feed.added.strftime('%Y-%m-%d, %T') }}
+            <br>
         {% endif %}
 
+        {# If this feed has had an error. #}
         {% if feed.last_exception %}
             Last exception: {{ feed.last_exception }}
+            <br>
         {% endif %}
 
+        {# Remove feed button. #}
         <div class="btn-group" role="group">
             <form action="/remove" method="post">
                 <button class="btn btn-danger" type="submit" name="feed_url" value="{{ feed.url }}"
@@ -32,16 +41,15 @@
             </form>
         </div>
 
-    <div class="p-2 border border-dark" style="background: #0f0f0f">
+
+    </div>
     {% for entry in entries %}
-            {% if loop.index > 1 %}
-                <hr>
-            {% endif %}
-
+        <div class="p-2 mb-2 border border-dark" style="background: #161616;">
+            <h2>
                 <a class="text-muted text-decoration-none" href="{{ entry.link }}">
-                <h2>{{ entry.title }}</h2>
+                    {{ entry.title }}
                 </a>
-
+            </h2>
             By {{ entry.author }}
             {% if entry.published %}
                 @ {{ entry.published.strftime('%Y-%m-%d, %T') }}
@@ -63,6 +71,6 @@
                     </div>
                 </details>
             {% endif %}
-        {% endfor %}
         </div>
+    {% endfor %}
 {% endblock %}