feat: wip idea title, minimal menu for reading

components/global/BannerMinimal.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <img src="https://cdn.emk.dev/templates/bulma-logo-light.png" width="150" height="40">
+      <h2 class="subtitle">
+        Ghost's Casper theme made with Bulma
+      </h2>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class MinimalBanner extends Vue {
+
+}
+</script>

components/global/MinimalBanner.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title is-1 has-text-primary">
+        eHandyBlog
+      </h1>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+
+@Component
+export default class MinimalBanner extends Vue {
+
+}
+</script>

components/organisms/FeaturedBlog.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="columns featured-post is-multiline">
     <div class="column is-12 post">
-      <h2 class="title is-2">
+      <h2 class="featured-post__title title is-3 has-text-primary">
         {{ featuredTitle }}
       </h2>
       <article class="columns featured">
@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { Vue, Component } from 'nuxt-property-decorator'
 
 @Component({
@@ -51,6 +51,31 @@ import { Vue, Component } from 'nuxt-property-decorator'
   }
 })
 export default class FeaturedBlog extends Vue {
-  featuredTitle = 'Bài viết mới nhất'
+  featuredTitle: string = 'Latest'
 }
 </script>
+<style lang="scss">
+.featured-post {
+  .featured-post__title {
+    position: relative;
+    width: fit-content;
+  }
+
+  .featured-post__title::after {
+    content: '';
+    width: 60px;
+    height: 4px;
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    background-color: #242424;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .featured-post__title:hover {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+</style>

components/templates/TheHeader.vue

@@ -2,6 +2,7 @@
   <b-navbar
     fixed-top
     transparent
+    shadow
     spaced
   >
     <template #brand>

nuxt.config.js

@@ -14,7 +14,7 @@ export default {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&family=Montserrat:ital,wght@0,300;0,600;1,300;1,600&display=swap'
+        href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'
       }
     ]
   },

pages/blog/index.vue

@@ -1,23 +1,26 @@
 <template>
-  <section class="section">
+  <div class="container">
-    <div class="container">
+    <MinimalBanner />
-      <div class="columns">
+    <section class="section">
-        <div class="column">
+      <div class="container">
-          <FeaturedBlog :first-blog="allArticles[0]" />
+        <div class="columns">
-          <hr>
+          <div class="column">
-          <ListBlog :list-blogs="paginatedArticles" />
+            <FeaturedBlog :first-blog="allArticles[0]" />
+            <hr>
+            <ListBlog :list-blogs="paginatedArticles" />
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column">
+            <Pagination
+              :total="allArticles.length"
+              :per-page="perPage"
+            />
+          </div>
         </div>
       </div>
-      <div class="columns">
+    </section>
-        <div class="column">
+  </div>
-          <Pagination
-            :total="allArticles.length"
-            :per-page="perPage"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
 </template>
 
 <script>