feat(Article): improve layout and styling of article header and description

.vitepress/theme/layouts/Article.vue

@@ -261,8 +261,12 @@ if (isClient()) {
   <main id="article-content">
     <hgroup>
       <h1>{{ frontmatter.title || page.title }}</h1>
-      <h6 v-if="frontmatter.description">{{ frontmatter.description }}</h6>
-      <hr />
+      <div>
+        <hr />
+        <h6 v-if="frontmatter.description">
+          {{ frontmatter.description }}
+        </h6>
+      </div>
     </hgroup>
     <Content />
     <ButtonGroup v-if="frontmatter?.external_links" :links="frontmatter.external_links" />

.vitepress/theme/styles/layouts/Article.scss

@@ -11,24 +11,55 @@ main#article-content {
     }
 
     > hgroup {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      gap: 12px;
+
       position: relative;
 
-      width: max-content;
+      width: 100%;
+
+      margin-block-end: 24px;
 
       h1 {
         @include mixin.typescale-style("display-large");
+
+        text-align: center;
       }
 
-      h6::before {
-        @include mixin.material-symbols($name: "message", $size: 18);
+      div {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 6px;
 
-        margin-inline-end: 3px;
+        width: 100%;
 
-        vertical-align: middle;
-      }
+        hr {
+          flex-grow: 1;
 
-      hr {
-        margin-block-start: 3px;
+          margin: 0px;
+        }
+
+        h6 {
+          display: grid;
+          align-items: start;
+          gap: 6px;
+          grid-template-columns: max-content auto;
+
+          width: max-content;
+
+          line-height: 18px;
+          text-align: justify;
+
+          &::before {
+            @include mixin.material-symbols($name: "message", $size: 18);
+
+            vertical-align: middle;
+          }
+        }
       }
     }
   }
@@ -353,6 +384,10 @@ main#article-content {
       padding-block-end: 0px;
     }
 
+    &:first-child .title-with-achor {
+      margin-block-start: 0px;
+    }
+
     .title-with-achor {
       h1,
       h2,
@@ -829,12 +864,6 @@ div#article-beside {
   main#article-content {
     grid-column: 1 / 7;
 
-    > hgroup {
-      width: 100%;
-
-      text-align: center;
-    }
-
     .custom-block > * {
       grid-column: 1 / 3;
     }