refactor: add flexbox gap to .article-details

assets/scss/partials/article.scss

@@ -49,13 +49,13 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-
     padding: var(--card-padding);
+    gap: 15px;
 }
 
 .article-title {
     font-weight: 600;
-    margin: 10px 0;
+    margin: 0;
     color: var(--card-text-color-main);
     font-size: 2.2rem;
 
@@ -70,31 +70,31 @@
             color: var(--card-text-color-main);
         }
     }
-
-    & + .article-subtitle {
-        margin-top: 0;
-    }
 }
 
 .article-subtitle {
     font-weight: normal;
     color: var(--card-text-color-secondary);
-    margin: 5px 0;
     line-height: 1.5;
-
+    margin: 0;
     font-size: 1.75rem;
     @include respond(xl) {
         font-size: 2rem;
     }
 }
 
+.article-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
 .article-time,
 .article-translations {
     display: flex;
     align-items: center;
     color: var(--card-text-color-tertiary);
     gap: 15px;
-    margin-top: 10px;
     flex-wrap: wrap;
 
     svg {

layouts/partials/article/components/details.html

@@ -9,17 +9,19 @@
     </header>
     {{ end }}
 
-    <h2 class="article-title">
+    <div class="article-title-wrapper">
-        <a href="{{ .RelPermalink }}">
+        <h2 class="article-title">
-            {{- .Title -}}
+            <a href="{{ .RelPermalink }}">
-        </a>
+                {{- .Title -}}
-    </h2>
+            </a>
+        </h2>
     
-    {{ with .Params.description }}
+        {{ with .Params.description }}
-    <h3 class="article-subtitle">
+        <h3 class="article-subtitle">
-        {{ . }}
+            {{ . }}
-    </h3>
+        </h3>
-    {{ end }}
+        {{ end }}
+    </div>
 
     {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
     <footer class="article-time">