Theme improvements

The-EG · Sep 11, 2024 · f9589aa · f9589aa
1 parent 4891538
commit f9589aa
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 17 deletions.
diff --git a/theme/static/css/egblogstyles.css b/theme/static/css/egblogstyles.css
@@ -1,10 +1,16 @@
+/* Code blocks */
 div.highlight {
     background: var(--bs-tertiary-bg);
     padding-left: 1em;
     padding-right: 1em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-bottom: 1em;
     border: 1px solid var(--bs-tertiary-color);
+    border-radius: 5px;
+    box-shadow: var(--bs-box-shadow);
 }
 
 div.highlight > pre {
@@ -13,6 +19,16 @@ div.highlight > pre {
 
 .literal {
     background: var(--bs-tertiary-bg);
+    padding-top: 0.125em;
+    padding-bottom: 0.125em;
     padding-left: 0.125em;
     padding-right: 0.125em;
+    border-radius: 5px;
+}
+
+.btn-tag {
+    --bs-btn-padding-y: 0.125rem;
+    --bs-btn-padding-x: 0.25rem;
+    --bs-btn-font-size: 0.756rem;
+    --bs-btn-border-radius: 7px;
 }
diff --git a/theme/templates/article.html b/theme/templates/article.html
@@ -31,7 +31,11 @@ <h2>
       <div>
         <small class="text-secondary">
           {% for author in article.authors %}
-            <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+            <a 
+                class="link-secondary link-offset-1 link-underline-opacity-25 link-underline-opacity-100-hover"
+                href="{{ SITEURL }}/{{ author.url }}">
+                {{ author }}
+            </a>
           {%- endfor -%}: 
           <time datetime="{{ article.date.isoformat() }}">
             {{ article.locale_date }}
@@ -43,12 +47,14 @@ <h2>
           {% endif %}
         </small>
       </div>
-      <div>
-        <span class="text-secondary">Tags: </span>
+      <div class="mt-1">
+        <small class="text-secondary">Tags: </small>
         <div class="d-inline-flex flex-row">
         {% for tag in article.tags %}
-            <a href="{{ SITEURL }}/{{ tag.url }}" class="me-2">
-                <span class="badge rounded-pill text-bg-secondary">{{ tag }}</span>
+            <a 
+                class="btn btn-outline-secondary btn-tag me-1"
+                href="{{ SITEURL }}/{{ tag.url }}">
+                {{ tag }}
             </a>
         {% endfor %}
         </div>

diff --git a/theme/templates/category.html b/theme/templates/category.html
@@ -4,4 +4,5 @@
 
 {% block content_title %}
 <h2>Posts in {{ category }}</h2>
+<hr>
 {% endblock %}
diff --git a/theme/templates/index.html b/theme/templates/index.html
@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
-<div class="container">
 {% block content_title %}
-<h2>Posts</h2>
 {% endblock %}
-<hr>
 
 <div class="row row-gap-3">
     {% for article in articles_page.object_list %}
@@ -16,16 +13,18 @@ <h2>Posts</h2>
         </small>
         <h4>
             <a 
-                class="link-light"
+                class="link-light link-offset-1 link-underline-opacity-25 link-underline-opacity-100-hover"
                 href="{{ SITEURL }}/{{ article.url }}"
                 rel="bookmark" title="{{ article.title|striptags }}">
                 {{ article.title }}
             </a>
         </h4>
         <div class="d-flex flex-row">
             {% for tag in article.tags %}
-            <a href="{{ SITEURL }}/{{ tag.url }}" class="me-2">
-                <span class="badge rounded-pill text-bg-secondary">{{ tag }}</span>
+            <a 
+                class="btn btn-outline-secondary btn-tag me-1"
+                href="{{ SITEURL }}/{{ tag.url }}">
+                {{ tag }}
             </a>
             {% endfor %}
         </div>

diff --git a/theme/templates/tag.html b/theme/templates/tag.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - {{ tag }} tag{% endblock %}
 
 {% block content_title %}
-<h2>Brews tagged with {{ tag }}</h2>
-{% endblock %}
+<h2>Posts tagged with {{ tag }}</h2>
+{% endblock %}
diff --git a/theme/templates/tags.html b/theme/templates/tags.html
@@ -4,9 +4,15 @@
 
 {% block content %}
     <h2>Tags for {{ SITENAME }}</h2>
-    <ul>
+    <div class="d-flex flex-wrap">
     {% for tag, articles in tags|sort %}
-        <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>
+        <div class="mb-1 me-1">
+            <a 
+                class="btn btn-outline-secondary"
+                href="{{ SITEURL }}/{{ tag.url }}">
+                {{ tag }} ({{ articles|count }})
+            </a>
+        </div>
     {% endfor %}
-    </ul>
-{% endblock %}
+    </div>
+{% endblock %}