💄 adjust sizing, spacing; make .text-container purely layout-related

okfde · Jul 22, 2024 · 9c2fad9 · 9c2fad9
1 parent 3d5a688
commit 9c2fad9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/fragdenstaat_de/fds_blog/templates/fds_blog/_article_detail.html b/fragdenstaat_de/fds_blog/templates/fds_blog/_article_detail.html
@@ -8,7 +8,7 @@
         <div class="blog-header-meta">
             <div class="container-lg py-5">
                 <h1>
-                    <span class="d-block fw-normal fs-base mb-2">{{ article.kicker }}</span>
+                    <span class="d-block fw-normal fs-5 mb-2">{{ article.kicker }}</span>
                     <span>{% render_model article "title" %}</span>
                 </h1>
                 {% if article.teaser %}
@@ -70,11 +70,11 @@ <h1>
     {% endif %}
 {% endblock article_content %}
 {% block article_footer %}
-    <footer>
+    <footer class="mb-3">
         <section>
             {% block article_author_bios %}
                 <div class="container-lg">
-                    <h3>
+                    <h3 class="small text-secondary">
                         {% blocktrans count counter=article.get_authors|length %}
                         About the author
                     {% plural %}
@@ -120,7 +120,7 @@ <h4 class="h6">{{ author.get_full_name }}</h4>
             {% if previous_articles %}
                 <section>
                     <div class="container-lg">
-                        <h3>
+                        <h3 class="small text-secondary">
                             {% blocktranslate count counter=previous_articles|length %}
                             Previous article:
                         {% plural %}

diff --git a/fragdenstaat_de/fds_blog/templates/fds_blog/includes/blog_item_list.html b/fragdenstaat_de/fds_blog/templates/fds_blog/includes/blog_item_list.html
@@ -1,6 +1,6 @@
 <article class="blog-article-item row position-relative"
          {% if counter %}id="article-{{ counter }}"{% endif %}>
-    <div class="col col-12 col-md-4">
+    <div class="col col-12 col-md-4 mb-3 mb-md-0">
         {% if article.image %}
             <div class="shadow">
                 <a href="{{ article.get_absolute_url }}">

diff --git a/frontend/styles/blog.scss b/frontend/styles/blog.scss
@@ -70,7 +70,6 @@ $blog-standout-width: 72rem;
   > ul,
   > ol,
   > p,
-  .text-container,
   > details,
   > hr {
     font-family: $font-family-serif;
@@ -81,10 +80,13 @@ $blog-standout-width: 72rem;
     margin-bottom: 0.75rem;
   }
 
+  > .text-container {
+    @include blog-width();
+  }
+
   > p,
   > ul,
   > ol,
-  .text-container,
   > details {
     font-size: 1.225rem;
     line-height: 1.5;
@@ -135,18 +137,10 @@ $blog-standout-width: 72rem;
   }
 }
 
-.blog-article footer {
-  h3 {
-    font-size: $font-size-sm;
-    color: var(--#{$prefix}secondary-color);
-    margin-bottom: $spacer * 1.5;
-  }
-
-  > section {
-    border-top: 1px var(--#{$prefix}border-color) solid;
-    margin-top: $spacer * 1.5;
-    padding-top: $spacer * 1.5;
-  }
+.blog-article footer > section {
+  border-top: 1px var(--#{$prefix}border-color) solid;
+  margin-top: $spacer * 1.5;
+  padding-top: $spacer * 1.5;
 }
 
 aside.article-banner {