Blog CSS adjustments

Author: maribedran

media/css/cms/pages/flare26-blog.css

@@ -8,12 +8,11 @@
     max-inline-size: var(--token-width-desktop-content);
 }
 
-.fl-blog-index-header {
-    margin-block-end: var(--token-layout-md);
-}
+/*  Heading and topics */
 
-.fl-blog-topics {
-    margin-block: var(--token-spacing-xl);
+.fl-blog-index-header .fl-heading-group,
+.fl-blog-index-header:not(:has(.fl-heading-group)) .fl-heading {
+    margin-block-end: var(--token-layout-lg);
 }
 
 .fl-blog-topics-list {
@@ -42,7 +41,8 @@
 }
 
 .fl-blog-topics-all {
-    margin-inline-start: auto;
+    inline-size: 100%;
+    margin-block-start: auto;
     text-transform: uppercase;
 }
 
@@ -79,9 +79,12 @@
     text-decoration: underline;
 }
 
+/* Featured */
+
 .fl-blog-featured-row {
     display: grid;
     gap: var(--token-spacing-2xl);
+    grid-template-columns: 1fr;
 }
 
 .fl-blog-featured-main {
@@ -93,6 +96,7 @@
 .fl-blog-featured-main img {
     aspect-ratio: 16/9;
     border-radius: var(--token-border-radius-md);
+    inline-size: 100%;
 }
 
 .fl-blog-featured-main .fl-heading-group {
@@ -178,13 +182,19 @@
     font-weight: var(--token-font-weight-medium);
 }
 
+.fl-blog-featured-row .fl-blog-article-list {
+    inline-size: unset;
+}
+
 @media (--viewport-md-up) {
-    .fl-blog-featured-row {
-        grid-template-columns: 2fr 1fr;
+    .fl-blog-topics-all {
+        inline-size: unset;
+        margin-block-start: 0;
+        margin-inline-start: auto;
     }
 
-    .fl-blog-featured-row .fl-blog-article-list {
-        inline-size: unset;
+    .fl-blog-featured-row {
+        grid-template-columns: 2fr 1fr;
     }
 
     .fl-blog-article-list-item-with-image {

springfield/cms/templates/cms/blog_index_page.html

@@ -35,29 +35,30 @@
               alignment_class="text-center"
             />
           {% endif %}
-        </div>
 
-        {% if all_topics %}
-          <div class="fl-blog-topics">
-            <div class="fl-blog-topics-list">
-              {% for topic in all_topics[:5] %}
-                <a href="{{ page.url }}{{ page.reverse_subpage('all_route') }}?topic={{ topic.slug }}" class="fl-blog-topic-link">
-                  <span class="fl-blog-topic-name">{{ topic.name }}</span>
-                  <include:tag
-                    text="{{ topic.article_count }}"
-                    color="purple"
-                    corners="round"
-                  />
-                </a>
-              {% endfor %}
-              <div class="fl-blog-topics-all">
-                <a href="{{ page.url }}{{ page.reverse_subpage('topics_route') }}" class="fl-link">{{ ftl('blog-view-all-topics') }}</a>
+          {% if all_topics %}
+            <div class="fl-blog-topics">
+              <div class="fl-blog-topics-list">
+                {% for topic in all_topics[:5] %}
+                  <a href="{{ page.url }}{{ page.reverse_subpage('all_route') }}?topic={{ topic.slug }}" class="fl-blog-topic-link">
+                    <span class="fl-blog-topic-name">{{ topic.name }}</span>
+                    <include:tag
+                      text="{{ topic.article_count }}"
+                      color="purple"
+                      corners="round"
+                    />
+                  </a>
+                {% endfor %}
+                <div class="fl-blog-topics-all">
+                  <a href="{{ page.url }}{{ page.reverse_subpage('topics_route') }}" class="fl-link">{{ ftl('blog-view-all-topics') }}</a>
+                </div>
               </div>
             </div>
-          </div>
-        {% endif %}
+          {% endif %}
+
+          <hr/>
+        </div>
 
-        <hr/>
 
         {% if page.featured_articles %}
           <div class="fl-blog-featured">