style: updating style

package.json

@@ -23,6 +23,7 @@
     "@astrojs/rss": "4.0.5",
     "@astrojs/sitemap": "3.1.4",
     "@astrojs/tailwind": "^5.1.0",
+    "@fontsource-variable/montserrat": "^5.0.19",
     "@fontsource/source-sans-pro": "^5.0.8",
     "astro": "^4.9.1",
     "dayjs": "~1.11.11",

src/components/Footer.astro

@@ -14,16 +14,8 @@ const today = new Date();
     <div class="flex items-center justify-between">
       <span class="text-sm">&copy; {today.getFullYear()} Nam Vo's blog.</span>
       <span class="flex gap-4">
-        <a
-          href="/policy-privacy"
-          class="text-sm hover:text-primary-600 active:text-primary-700 hover:underline"
-          >Điều khoản</a
-        >
-        <a
-          href="/rss.xml"
-          class="text-sm hover:text-primary-600 active:text-primary-700 hover:underline"
-          >RSS</a
-        >
+        <a href="/policy-privacy" class="text-sm hover:underline">Điều khoản</a>
+        <a href="/rss.xml" class="text-sm hover:underline">RSS</a>
       </span>
     </div>
   </div>

src/components/Header.astro

@@ -12,7 +12,7 @@ import ThemeToggle from "./ThemeToggle.astro";
     <div class="flex items-centers justify-between py-6 px-4 xl:px-0">
       <a
         href="/"
-        class="text-heading text-2xl font-bold text-slate-900 dark:text-slate-50"
+        class="font-display text-2xl font-bold text-slate-900 dark:text-slate-200 hover:text-sky-500 dark:hover:text-sky-400"
       >
         {SITE_TITLE}
       </a>

src/components/HeaderLink.astro

@@ -3,30 +3,31 @@ import type { HTMLAttributes } from "astro/types";
 
 type Props = HTMLAttributes<"a">;
 
-const { href, class: className, ...props } = Astro.props;
+const { href, ...props } = Astro.props;
 const { pathname } = Astro.url;
 
 const tmpPathname = pathname.split("/");
 const tmpHref = (href as string).split("/");
 const isActive = tmpPathname[1] === tmpHref[1];
 ---
 
-<a href={href} class:list={[className, { active: isActive }]} {...props}>
+<a
+  href={href}
+  class:list={[
+    "inline-block",
+    "no-underline",
+    "hover:underline",
+    "hover:text-slate-900 dark:hover:text-slate-200",
+    { active: isActive },
+  ]}
+  {...props}
+>
   <slot />
 </a>
 
 <style>
-  a {
-    display: inline-block;
-    text-decoration: none;
-  }
-
   a.active {
     font-weight: bold;
-    color: #0ea5e9;
-  }
-
-  a:hover {
-    text-decoration: underline;
+    color: #0ea5e9 !important;
   }
 </style>

src/components/LatestPostItem.astro

@@ -10,7 +10,7 @@ const { post } = Astro.props;
   <FormattedDate pubDate={post.data.pubDate} />
   <a
     href={`/${pluralize(post.collection)}/${post.slug}/`}
-    class="block pb-1 text-lg md:text-xl text-slate-900 tracking-tight dark:text-slate-200 box-border"
+    class="block pb-1 text-lg md:text-xl text-slate-900 dark:text-slate-200 font-display"
   >
     {post.data.title}
   </a>

src/components/Navigate.astro

@@ -9,12 +9,12 @@ const { category, nextPost, prevPost } = Astro.props;
         prevPost && (
           <a
             href={`/${category}/${prevPost.slug}/`}
-            class="text-xl hover:text-primary-600 active:text-primary-700"
+            class="text-xl text-slate-900 dark:text-slate-200 border-b border-b-primary-400 hover:border-b-2"
           >
             <span class="block pb-1 text-xs text-slate-600 dark:text-slate-400 text-semibold uppercase">
               ← Quay lại
             </span>
-            {prevPost.data?.title}
+            <span class="font-display">{prevPost.data?.title}</span>
           </a>
         )
       }
@@ -25,12 +25,12 @@ const { category, nextPost, prevPost } = Astro.props;
         nextPost && (
           <a
             href={`/${category}/${nextPost.slug}/`}
-            class="text-xl hover:text-primary-600 active:text-primary-700"
+            class="text-xl text-slate-900 dark:text-slate-200 border-b border-b-primary-400 hover:border-b-2"
           >
             <span class="block pb-1 text-xs text-slate-600 dark:text-slate-400 text-semibold uppercase">
               Xem tiếp →
             </span>
-            {nextPost.data?.title}
+            <span class="font-display">{nextPost.data?.title}</span>
           </a>
         )
       }

src/components/PostItem.astro

@@ -36,7 +36,7 @@ const backgroundColor =
     <FormattedDate pubDate={post.data.pubDate} />
     <a
       href={`/${category}/${post.slug}/`}
-      class="block pb-1 text-lg md:text-xl text-slate-900 tracking-tight dark:text-slate-200"
+      class="block pb-1 text-lg md:text-xl text-slate-900 dark:text-slate-200 font-display"
     >
       {post.data.title}
     </a>

src/components/TableOfContents.astro

@@ -29,7 +29,7 @@ function buildToc(headings: TableOfContent[]) {
 ---
 
 <nav class="max-w-xs dark:text-black">
-  <h1 class="font-bold mb-3 text-2xl dark:text-white">Mục lục</h1>
+  <h1 class="font-bold mb-3 text-2xl dark:text-slate-200">Mục lục</h1>
   <ul class="[text-wrap:balance] flex flex-col gap-1">
     {toc.map((heading) => <TabletOfContentsHeading heading={heading} />)}
   </ul>

src/components/TabletOfContentsHeading.astro

@@ -20,7 +20,7 @@ export interface Props {
 <li class="flex flex-col">
   <a
     href={`#${headingSlug}`}
-    class="bg-slate-200 dark:bg-slate-800 dark:hover:bg-indigo-400 hover:bg-indigo-300 hover:text-white py-1 px-4 dark:text-white rounded-full mb-2 first-letter:uppercase w-fit line-clamp-2"
+    class="bg-slate-200 dark:bg-slate-800 dark:hover:bg-indigo-400 hover:bg-indigo-300 hover:text-white py-1 px-4 dark:text-slate-200 rounded-full mb-2 first-letter:uppercase w-fit line-clamp-2"
   >
     {heading.text}
   </a>

src/components/ThemeToggle.astro

@@ -6,7 +6,7 @@
   aria-label="Theme Switcher"
   id="themeToggle"
   type="button"
-  class="block group flex items-center text-slate-600 hover:text-blue-600 font-semibold dark:text-slate-400 dark:hover:text-slate-500"
+  class="block group flex items-center font-semibold theme-toggler"
 >
   <svg width="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
@@ -24,7 +24,11 @@
 
 <style>
   html[data-mode="light"] .sun {
-    fill: black;
+    fill: #334155;
+  }
+
+  html[data-mode="light"] .theme-toggler:hover .sun {
+    fill: #0ea5e9;
   }
 
   html[data-mode="light"] .moon {
@@ -34,8 +38,13 @@
   html[data-mode="dark"] .sun {
     fill: transparent;
   }
+
   html[data-mode="dark"] .moon {
-    fill: white;
+    fill: #94a3b8;
+  }
+
+  html[data-mode="dark"] .theme-toggler:hover .moon {
+    fill: #38bdf8;
   }
 </style>
 

src/content/hobby/tong-quan-ve-ken-trumpet.mdx

@@ -18,7 +18,7 @@ Google dễ dàng hơn.
 
 ## Bộ Kèn Đồng
 
-`Bộ Kèn Đồng` hay gọi tắt là `Bộ Đồng`, tên tiếng anh là `Brass` là nói đến các nhạc cụ được làm từ đồng. Mặc dù nguồn gốc xa xưa của chung được làm bằng sừng. Do đó, hầu hết các nhà nhạc cụ học (Organologist) cho rằng thuật ngữ `"nhạc cụ bằng đồng"` nên được định nghĩa theo cách tạo ra âm thanh phát ra giống như tiếng kèn đồng, chứ không phải bởi nhạc cụ có thực sự được làm bằng đồng hay không. _Vì có nhạc cụ khác cũng được làm bằng đồng nhưng được xếp vào bộ Gỗ (Woodwinds) chính là kèn Saxophone, sáo Flute._
+`Bộ Kèn Đồng` hay gọi tắt là `Bộ Đồng`, tên tiếng anh là `Brass` là nói đến các nhạc cụ được làm từ đồng. Mặc dù nguồn gốc xa xưa của chung được làm bằng sừng. Do đó, hầu hết các nhà nhạc cụ học (Organologist) cho rằng thuật ngữ `"nhạc cụ bằng đồng"` nên được định nghĩa theo cách tạo ra âm thanh phát ra giống như tiếng kèn đồng, chứ không phải bởi nhạc cụ có thực sự được làm bằng đồng hay không. **Vì có nhạc cụ khác cũng được làm bằng đồng nhưng được xếp vào bộ Gỗ (Woodwinds) chính là kèn Saxophone, sáo Flute.**
 
 Trong bộ Đồng, có 4 loại nhạc cụ chính là `Trumpet`, `Trombone`, `Horn` (hay gọi là kèn `Cor`) và `Tuba`.
 
@@ -56,7 +56,13 @@ Kèn Trumpet là nhạc cụ cao nhất trong bộ Đồng (lấy cao độ theo
 | E♭2 / F2. | Bass Tuba                                                                                              |
 | B♭1 / C2  | Contrabass Tuba, Contrabass trombone                                                                   |
 
-Thường mọi người nhắc đến kèn Trumpet là mọi người hay nhắc đến B♭ Trumpet (Si giáng), do nó phổ biến nhất. Ngoài ra, kèn trumpet còn có các giọng các như `C` (Do), `D` (Re), `E♭` (Mi giáng),`A` (La), `F` (Fa).
+Bảng này thể hiện khoảng cao độ mọi người hay sử dụng nhất, thường là `F#3` tới `A5`.
+
+Còn nốt cao nhất thì tùy vào mỗi người. Như mình thì lên được tới `C6`. Còn Aturo Sandoval thì mấy nốt cao tít.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/EXjyU9M9mII?si=2dd6F69Wvg638IPy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Thường mọi người nhắc đến kèn Trumpet là mọi người hay nhắc đến Trumpet `B♭` (Si giáng), do nó phổ biến nhất. Ngoài ra, kèn trumpet còn có các giọng các như `C` (Do), `D` (Re), `E♭` (Mi giáng),`A` (La), `F` (Fa).
 
 Còn xét về thiết kế, thì kèn Trumpet được chia ra theo các loại sau:
 - Natural Trumpet

src/layouts/PostLayout.astro

@@ -40,7 +40,7 @@ const articleDate = new Date(pubDate).toISOString();
         class="py-5 xl:py-20 px-4 mb-12 bg-white dark:bg-slate-800 text-center"
       >
         <h1
-          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight dark:text-white mb-2 xl:mb-6"
+          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight dark:text-slate-200 mb-2 xl:mb-6"
         >
           {title}
         </h1>

src/pages/hobbies/index.astro

@@ -24,7 +24,7 @@ const posts = (await getCollection("hobby")).sort(sortByDate);
     <main class="my-20">
       <div class="py-5 xl:py-20 mb-12 bg-white dark:bg-slate-800">
         <h1
-          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight text-center dark:text-white mb-2 xl:mb-6"
+          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight text-center dark:text-slate-200 mb-2 xl:mb-6"
         >
           Giải trí
         </h1>

src/pages/index.astro

@@ -63,11 +63,11 @@ const tags = await getTags(allPosts);
               />
               <p class="md:ml-6 text-heading text-center md:text-left">
                 <strong
-                  class="text-2xl md:text-3xl text-slate-900 tracking-tight dark:text-slate-200"
+                  class="text-2xl md:text-3xl text-slate-900 dark:text-slate-200 font-display"
                   >Nam Vo</strong
                 >
                 <br />
-                <span class="text-xs font-semibold tracking-wide"
+                <span class="text-xs font-semibold font-display"
                   >Software Engineer</span
                 >
                 <br />
@@ -108,8 +108,12 @@ const tags = await getTags(allPosts);
                   ))
                 }
               </ul>
-              <div class="text-right hover:underline">
-                <a href="/tutorials">» Xem thêm</a>
+              <div class="text-right">
+                <a
+                  href="/tutorials"
+                  class="text-slate-900 dark:text-slate-200 border-b border-b-primary-400 hover:border-b-2"
+                  >» Xem thêm</a
+                >
               </div>
             </div>
           </section>

src/pages/tutorials/index.astro

@@ -24,7 +24,7 @@ const posts = (await getCollection("tutorial")).sort(sortByDate);
     <main class="my-20">
       <div class="py-5 xl:py-20 mb-12 bg-white dark:bg-slate-800">
         <h1
-          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight text-center dark:text-white mb-2 xl:mb-6"
+          class="text-slate-900 font-semibold text-2xl sm:text-3xl lg:text-4xl tracking-tight text-center dark:text-slate-200 mb-2 xl:mb-6"
         >
           Chia sẻ về Công nghệ Phần mềm
         </h1>

src/styles/global.scss

@@ -1,19 +1,20 @@
 @import "@fontsource/source-sans-pro/400.css";
 @import "@fontsource/source-sans-pro/600.css";
+@import "@fontsource-variable/montserrat";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 [data-mode="light"] {
   body {
-    @apply bg-slate-100 text-slate-700;
+    @apply bg-slate-100 text-slate-700 transition-colors;
   }
 }
 
 [data-mode="dark"] {
   body {
-    @apply bg-slate-900 text-slate-400;
+    @apply bg-slate-900 text-slate-400 transition-colors;
   }
 }
 
@@ -23,7 +24,7 @@ h3,
 h4,
 h5,
 h6 {
-  @apply font-semibold text-slate-900 dark:text-slate-50;
+  @apply font-display font-semibold text-slate-900 dark:text-slate-50;
 }
 
 .content {
@@ -49,7 +50,7 @@ h6 {
     @apply my-5 text-base;
   }
   a {
-    @apply text-slate-900 dark:text-white border-b border-b-primary-400;
+    @apply text-slate-900 dark:text-slate-200 border-b border-b-primary-400;
     &:hover,
     &:focus {
       @apply border-b-2;
@@ -118,7 +119,7 @@ h6 {
     @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700;
   }
   table tbody tr th {
-    @apply px-4 py-4 font-semibold text-gray-900 whitespace-nowrap dark:text-white;
+    @apply px-4 py-4 font-semibold text-gray-900 whitespace-nowrap dark:text-slate-200;
   }
   table tbody tr td {
     @apply px-4 py-4;

tailwind.config.cjs

@@ -11,6 +11,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
+        display: ["'Montserrat Variable'", ...defaultTheme.fontFamily.sans],
         sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
         mono: ["Fira Code VF", ...defaultTheme.fontFamily.mono],
         source: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],