feat: new style for article headers

aplosdev · Sep 8, 2024 · 6d8bc4a · 6d8bc4a
1 parent c669564
commit 6d8bc4a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - The navigation bar first appears when you enter the page, as you scroll down it will disappear, and when you scroll up it will appear again (that way it won't take up space when you're reading, so you can focus on the content)
 
+- New style for article headers
+
   - New date format for articles (with the hour and minute)
 
 - **Depricate the `description` field for articles**

diff --git a/src/layouts/ArticleHead.vue b/src/layouts/ArticleHead.vue
@@ -8,7 +8,7 @@
         alt="Banner"
       />
     </div>
-    <div :id="frontmatter.banner ? 'banner-margin' : ''">
+    <div :id="frontmatter.banner ? 'banner-margin' : ''" class="main-head">
       <small v-if="frontmatter.update">
         Last updated on
         {{
@@ -24,7 +24,6 @@
           )
         }}
       </small>
-      <h1>{{ frontmatter.title }}</h1>
       <small>
         {{
           new Date(frontmatter.date).toLocaleDateString(
@@ -36,14 +35,17 @@
             },
           )
         }}
+      </small>
+      <h1>{{ frontmatter.title }}</h1>
+      <small>
         <span v-if="!theme.articles.authors === false && frontmatter.author">
           &middot; {{ frontmatter.author.length > 1 ? "Authors:" : "Author:" }}
           <template v-for="(author, index) in frontmatter.author" :key="index">
             {{ author
             }}<span v-if="index !== frontmatter.author.length - 1">, </span>
           </template>
         </span>
-        <span> &middot; {{ readingTime }} minutes to read </span>
+        <span> {{ readingTime }} minutes to read </span>
         <span class="tags">
           &middot;
           <span v-for="(tag, index) in frontmatter.tags" :key="index">{{
@@ -77,8 +79,17 @@ onMounted(() => {
 
 <style lang="scss">
 #article-head {
+  text-align: center;
   padding-top: 2.0938rem;
 
+  .main-head {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   #banner-container {
     $mask: linear-gradient(black, transparent);
     -webkit-mask-image: $mask;
@@ -108,8 +119,21 @@ onMounted(() => {
   }
 
   h1 {
-    margin-top: 0;
-    margin-bottom: 0;
+    font-weight: 800;
+    line-height: 1.05em;
+    background-image: radial-gradient(
+      circle,
+      var(--color-accent) 0%,
+      var(--color-accent-alpha) 100%
+    );
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-top: -0.5rem !important;
+    margin-bottom: 0 !important;
   }
 
   .tags {