From 4c2b64879bbecc66ffad5cd464b7879c8bf86eae Mon Sep 17 00:00:00 2001
From: kmacoders <hungkids3003@gmail.com>
Date: Sat, 10 Jul 2021 23:01:41 +0700
Subject: [PATCH] feat: wip idea title, minimal menu for reading

---
 components/global/BannerMinimal.vue   | 18 +++++++++++++
 components/global/MinimalBanner.vue   | 17 ++++++++++++
 components/organisms/FeaturedBlog.vue | 31 +++++++++++++++++++---
 components/templates/TheHeader.vue    |  1 +
 nuxt.config.js                        |  2 +-
 pages/blog/index.vue                  | 37 +++++++++++++++------------
 6 files changed, 85 insertions(+), 21 deletions(-)
 create mode 100644 components/global/BannerMinimal.vue
 create mode 100644 components/global/MinimalBanner.vue

diff --git a/components/global/BannerMinimal.vue b/components/global/BannerMinimal.vue
new file mode 100644
index 0000000..9acdfd7
--- /dev/null
+++ b/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>
diff --git a/components/global/MinimalBanner.vue b/components/global/MinimalBanner.vue
new file mode 100644
index 0000000..95b7a5c
--- /dev/null
+++ b/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>
diff --git a/components/organisms/FeaturedBlog.vue b/components/organisms/FeaturedBlog.vue
index 2a6436f..a010822 100644
--- a/components/organisms/FeaturedBlog.vue
+++ b/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>
diff --git a/components/templates/TheHeader.vue b/components/templates/TheHeader.vue
index bd8c9e2..6ff09de 100644
--- a/components/templates/TheHeader.vue
+++ b/components/templates/TheHeader.vue
@@ -2,6 +2,7 @@
   <b-navbar
     fixed-top
     transparent
+    shadow
     spaced
   >
     <template #brand>
diff --git a/nuxt.config.js b/nuxt.config.js
index da82513..b7cad5d 100644
--- a/nuxt.config.js
+++ b/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'
       }
     ]
   },
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index d7f7cfa..1876f5d 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,23 +1,26 @@
 <template>
-  <section class="section">
-    <div class="container">
-      <div class="columns">
-        <div class="column">
-          <FeaturedBlog :first-blog="allArticles[0]" />
-          <hr>
-          <ListBlog :list-blogs="paginatedArticles" />
+  <div class="container">
+    <MinimalBanner />
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column">
+            <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">
-        <div class="column">
-          <Pagination
-            :total="allArticles.length"
-            :per-page="perPage"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 
 <script>