From fd737aaf83186fe9b9dab1f7e65adad545e2fc3e Mon Sep 17 00:00:00 2001
From: quangdz1704 <Ntq.1704@gmail.com>
Date: Thu, 11 Jul 2024 17:36:54 +0700
Subject: [PATCH] update: font

---
 src/components/Countdown.vue | 18 +++++++++++++-----
 src/style.css                | 30 +++++++++++++++---------------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index 7d51fafd..214142fb 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -14,7 +14,7 @@ const s = ref(0);
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
-    class="countdown-container flex justify-items-center items-start justify-center"
+    class="countdown-container flex justify-items-center items-start justify-center gap-2 md:gap3"
   >
     <div class="flex flex-col">
       <span
@@ -23,7 +23,9 @@ const s = ref(0);
       >
         {{ days }}
       </span>
-      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">days</p>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
+        days
+      </p>
     </div>
     <span class="mt-4">:</span>
     <div class="flex flex-col">
@@ -33,7 +35,9 @@ const s = ref(0);
       >
         {{ hours }}
       </span>
-      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">hours</p>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
+        hours
+      </p>
     </div>
     <span class="mt-4">:</span>
     <div class="flex flex-col">
@@ -43,7 +47,9 @@ const s = ref(0);
       >
         {{ minutes }}
       </span>
-      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">minutes</p>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
+        minutes
+      </p>
     </div>
     <span class="mt-4">:</span>
     <div class="flex flex-col">
@@ -62,7 +68,9 @@ const s = ref(0);
           </Transition>
         </div>
       </span>
-      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">secs</p>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3 text-center">
+        secs
+      </p>
     </div>
   </Countdown>
 </template>
diff --git a/src/style.css b/src/style.css
index bbf3d46a..28dca770 100644
--- a/src/style.css
+++ b/src/style.css
@@ -10,10 +10,17 @@ body {
   overflow-x: hidden;
 }
 
+:root {
+  --text-main: #333;
+  --text-secondary: #4b525d;
+  --bg-active: #fbfbfc;
+  --font-family: 'IBM Plex Sans';
+}
+
 body {
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: var(--font-family), Inter, -apple-system, BlinkMacSystemFont,
+  font-family: 'IBM Plex Sans', Inter, -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
     'Helvetica Neue', sans-serif;
   font-size: 15px;
@@ -23,13 +30,6 @@ body {
   background-color: #18181a;
 }
 
-:root {
-  --text-main: #333;
-  --text-secondary: #4b525d;
-  --bg-active: #fbfbfc;
-  --font-family: 'IBM Plex Sans';
-}
-
 html.dark,
 html[data-theme='dark'] {
   --text-main: #f7f7f7;
@@ -38,48 +38,48 @@ html[data-theme='dark'] {
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Thin.ttf');
   font-weight: 100;
   font-display: swap;
 }
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-ExtraLight.ttf');
   font-weight: 200;
   font-display: swap;
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Light.ttf');
   font-weight: 300;
   font-display: swap;
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Regular.ttf');
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Medium.ttf');
   font-weight: 500;
   font-display: swap;
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-SemiBold.ttf');
   font-weight: 600;
   font-display: swap;
 }
 
 @font-face {
-  font-family: var(--font-family);
+  font-family: 'IBM Plex Sans';
   src: url('./assets/fonts/IBMPlexSans/IBMPlexSans-Bold.ttf');
   font-weight: 700;
   font-display: swap;