From 6d8bc4aaa236722ae214fc545ea2df6db03ed947 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Sun, 8 Sep 2024 17:31:49 +0300
Subject: [PATCH] feat: new style for article headers

---
 CHANGELOG.md                |  2 ++
 src/layouts/ArticleHead.vue | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e8c807..7a21bc7 100644
--- 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
index c5a6d12..8ba840d 100644
--- 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,6 +35,9 @@
             },
           )
         }}
+      </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">
@@ -43,7 +45,7 @@
             }}<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 {