Merge pull request #1 from nurRiyad/font-change

Font change
2022-12-19 02:27:29 +06:00
parent 0f63a067e0 b6bc24411a
commit fc6d212b46
16 changed files with 56 additions and 58 deletions
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400;600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Poppins: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");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap");

@tailwind base;
@tailwind components;
--- a/components/ArchievCard.vue
+++ b/components/ArchievCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-5 font-mono mb-5">
+  <div class="px-5 font-ibmmono mb-5">
    <h4 class="font-semibold text-slate-800 text-xl antialiased p-2">
      Typescript
    </h4>
--- a/components/ArchivePostCard.vue
+++ b/components/ArchivePostCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-mono">
+  <div class="font-ibmmono">
    <nuxt-link class="flex items-baseline space-x-3 space-y-2" to="/">
      <icon name="arcticons:blogger" />
      <h4 class="text-blue-600 hover:underline">
--- a/components/BlogCard.vue
+++ b/components/BlogCard.vue
@@ -1,10 +1,15 @@
 <template>
-  <div class="space-y-2 m-5">
-    <h3 class="text-xl text-slate-800 font-semibold">This is a blog title</h3>
-    <p class="text-slate-700">
+  <div class="space-y-2 my-5 text-slate-800 group">
+    <h3 class="text-xl font-semibold group-hover:text-sky-500">
+      This is a blog title
+    </h3>
+    <p class="text-slate-600">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
    </p>
-    <p class="font-semibold">Read more</p>
+    <p class="font-semibold group-hover:text-sky-500">
+      Read more
+      <span class="hidden group-hover:inline"> ->> </span>
+    </p>
  </div>
 </template>
--- a/components/CategoryCard.vue
+++ b/components/CategoryCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg">
-    <nuxt-link to="/category/js" class="hover:underline">
+  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg group text-slate-800">
+    <nuxt-link to="/category/js" class="group-hover:text-sky-500">
      <div class="flex items-center">
-        <h4 class="text-2xl text-slate-800 font-medium py-1">Typescript</h4>
+        <h4 class="text-2xl font-medium py-1">Typescript</h4>
      </div>
    </nuxt-link>

@@ -14,8 +14,10 @@
      <p>433</p>
    </div>

-    <nuxt-link class="hover:underline" to="/">
-      <p class="font-medium">All Js Post</p>
+    <nuxt-link class="group-hover:text-sky-500" to="/">
+      <p class="font-medium text-sm">
+        Read All Post <span class="hidden group-hover:inline"> ->> </span>
+      </p>
    </nuxt-link>
  </div>
 </template>
--- a/components/FooterCom.vue
+++ b/components/FooterCom.vue
@@ -3,7 +3,7 @@ const theme = ref("light");
 </script>

 <template>
-  <footer class="p-3 mt-10 bg-[#a2d9ff] font-poppins">
+  <footer class="p-3 mt-10 bg-[#a2d9ff] font-ibmmono">
    <div class="container px-4 mx-auto max-w-6xl flex justify-center">
      <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
        <li>Copyright &#169; 2022 - Present</li>
--- a/components/LatestBlogCard.vue
+++ b/components/LatestBlogCard.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg">
-    <nuxt-link to="/" class="hover:underline">
-      <h4 class="text-xl text-slate-800 font-medium py-1">
-        This is latest blog card
-      </h4>
+  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg group">
+    <nuxt-link to="/" class="group-hover:text-sky-500">
+      <h4 class="text-xl font-medium py-1">This is latest blog card</h4>
    </nuxt-link>
    <div class="text-xs text-slate-500 pb-3 flex space-x-4">
      <div class="flex items-center space-x-1">
@@ -21,8 +19,11 @@
      reprehenderit sit possimus quibusdam ad facilis, consectetur beatae
      inventore sunt non.
    </p>
-    <nuxt-link class="hover:underline" to="/">
-      <p class="font-medium">Read More</p>
+    <nuxt-link class="group-hover:text-sky-500" to="/">
+      <p class="font-medium">
+        Read More
+        <span class="hidden group-hover:inline"> ->> </span>
+      </p>
    </nuxt-link>
  </div>
 </template>
--- a/components/NavbarCom.vue
+++ b/components/NavbarCom.vue
@@ -11,22 +11,19 @@ const activeNavbar = computed(() => {
 </script>

 <template>
-  <header class="sticky top-0 p-3 bg-[#a2d9ff] font-poppins">
-    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
+  <header class="sticky top-0 p-3 bg-[#a2d9ff] font-ibmmono">
+    <div
+      class="container px-4 mx-auto max-w-6xl flex justify-between text-slate-800"
+    >
      <ul class="flex space-x-8 items-end justify-start">
        <li class="align">
-          <nuxt-link to="/">
-            <icon
-              class="text-cyan-500 hover:scale-110 hover:transition"
-              size="35"
-              name="mdi:robot-excited"
-            />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link :class="{ underline: activeNavbar === '' }" to="/"
-            >Home</nuxt-link
+          <nuxt-link
+            class="font-semibold text-xl"
+            :class="{ underline: activeNavbar === '' }"
+            to="/"
          >
+            RafKhata
+          </nuxt-link>
        </li>
        <li>
          <nuxt-link
@@ -36,10 +33,8 @@ const activeNavbar = computed(() => {
          >
        </li>
        <li>
-          <nuxt-link
-            :class="{ underline: activeNavbar === 'category' }"
-            to="/category"
-            >Category</nuxt-link
+          <nuxt-link :class="{ underline: activeNavbar === 'tags' }" to="/tags"
+            >Tags</nuxt-link
          >
        </li>
        <li>
--- a/components/OneLineCard.vue
+++ b/components/OneLineCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div
-    class="font-semibold antialiased text-slate-800 font-poppins hover:underline"
-  >
+  <div class="group font-semibold antialiased text-slate-800 font-ibmmono">
    <nuxt-link class="flex items-baseline space-x-3" to="/">
-      <div class="hover:scale-125 transition">
+      <div class="group-hover:scale-125 transition">
        <icon name="ant-design:arrow-right-outlined" />
      </div>
-      <h4>How to use vite in your nuxt 3 project a a a riyad</h4>
+      <h4 class="group-hover:underline">
+        How to use vite in your nuxt 3 project a a a riyad
+      </h4>
    </nuxt-link>
  </div>
 </template>
--- a/components/content/InfoComponent.vue
+++ b/components/content/InfoComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xs font-poppins antialiased text-slate-600 flex space-x-2">
+  <div class="text-xs font-ibmmono antialiased text-slate-600 flex space-x-2">
    <div class="flex">
      <p class="mr-1">Created</p>
      <slot name="time" />
--- a/pages/archive.vue
+++ b/pages/archive.vue
@@ -6,7 +6,7 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
 </script>

 <template>
-  <div class="container mx-auto max-w-6xl font-mono antialiased">
+  <div class="container mx-auto max-w-6xl font-ibmmono antialiased">
    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
      ALL CONTENTS
    </h1>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,25 +4,19 @@ let x = ref(10);

 <template>
  <div
-    class="container px-4 mx-auto max-w-6xl flex font-poppins gap-14 antialiased"
+    class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased"
  >
    <div class="flex-1">
-      <h1 class="text-xl pb-8 tracking-wide text-[#e60067]">
-        RECENTLY PUBLISHED
-      </h1>
+      <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
      <div class="space-y-8">
        <blog-card v-for="n in 7" :key="n" />
      </div>
    </div>
    <div class="max-w-[400px]">
      <div>
-        <h2 class="text-xl pb-8 tracking-wide text-[#e60067]">
-          TOP CATEGORIES
-        </h2>
+        <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
        <topic-card />
-        <h2 class="text-xl py-8 tracking-wide text-[#e60067]">
-          POPULAR CONTENT
-        </h2>
+        <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
        <div class="space-y-5">
          <one-line-card v-for="n in 5" :key="n" />
        </div>
--- a/pages/latest.vue
+++ b/pages/latest.vue
@@ -6,7 +6,7 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
 </script>

 <template>
-  <div class="container mx-auto max-w-6xl font-poppins antialiased">
+  <div class="container mx-auto max-w-6xl font-ibmmono antialiased">
    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
      LATEST CONTENT
    </h1>
--- a/pages/category/[topic].vue
+++ b/pages/category/[topic].vue
@@ -6,7 +6,7 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
 </script>

 <template>
-  <div class="container mx-auto max-w-6xl font-poppins antialiased">
+  <div class="container mx-auto max-w-6xl font-ibmmono antialiased">
    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
      ALL JAVASCRIPT POST
    </h1>
--- a/pages/category/index.vue
+++ b/pages/category/index.vue
@@ -6,9 +6,9 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
 </script>

 <template>
-  <div class="container mx-auto max-w-6xl font-poppins antialiased">
+  <div class="container mx-auto max-w-6xl font-ibmmono antialiased">
    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      ALL CATEGORY
+      ALL TAGS
    </h1>
    <div class="flex justify-start flex-wrap">
      <category-card v-for="n in 19" :key="n" />
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,6 +4,7 @@ module.exports = {
    extend: {
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
+        ibmmono: ["IBM Plex Mono", "monospace"],
      },
    },
  },