blog: Make custom styling clearer and easier

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/style.scss b/src/scss/style.scss
index c5a9175078a4c365caf1a454d92b67c50901b8cc..8d0a1848bdc9b6446fb72e7c78ae2eeacc7f8cb4 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -220,15 +220,31 @@ footer {
 }
 
 .blog-post {
-       h5:first-of-type {
-               a {
-                       color: $body-color;
+       .blog-header {
+               h5 {
+                       a {
+                               color: $body-color;
+                       }
                }
        }
 
        &.lightning-wire-labs {
-               h5:first-of-type a, a {
-                       color: $lwl;
+               .blog-header {
+                       h5 {
+                               a {
+                                       color: $lwl;
+                               }
+                       }
+
+                       a {
+                               color: $lwl;
+                       }
+               }
+
+               .blog-content {
+                       a {
+                               color: $lwl;
+                       }
                }
        }
 }

diff --git a/src/templates/blog/modules/post.html b/src/templates/blog/modules/post.html
index 9e2e6ea802773d15c46978a46db7870664453ff0..5feb067ec30480b45c8c00d434f3f5fb68a021d6 100644 (file)
--- a/src/templates/blog/modules/post.html
+++ b/src/templates/blog/modules/post.html
@@ -1,16 +1,20 @@
 <div class="blog-post {% if "lightning-wire-labs" in post.tags %}lightning-wire-labs{% end %}">
-       <h5 class="mb-0">
-               <a href="https://blog.ipfire.org/post/{{ post.slug }}">
-                       {{ post.title }}
-               </a>
-       </h5>
+       <div class="blog-header">
+               <h5 class="mb-0">
+                       <a href="https://blog.ipfire.org/post/{{ post.slug }}">
+                               {{ post.title }}
+                       </a>
+               </h5>
 
-       <p class="small text-muted">
-               {{ _("by") }} <a href="/authors/{{ post.author.uid }}">{{ post.author.name }}</a>,
-               {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
-       </p>
+               <p class="small text-muted">
+                       {{ _("by") }} <a href="/authors/{{ post.author.uid }}">{{ post.author.name }}</a>,
+                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+               </p>
+       </div>
 
-       {% raw post.html %}
+       <div class="blog-content">
+               {% raw post.html %}
+       </div>
 
        {% if "lightning-wire-labs" in post.tags and post.link %}
                <div class="row">