style: set base font to lexend deca (sans serif)

barraIhsan · Nov 4, 2024 · c56f5d0 · c56f5d0
1 parent a9dc3fb
commit c56f5d0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -10,7 +10,7 @@ let pathname = Astro.url.pathname;
   <div
     class="container mx-auto flex justify-between items-center px-5 sm:px-12"
   >
-    <a class="text-3xl font-extrabold hidden lg:block" href="/">Barra</a>
+    <a class="text-3xl font-bold hidden lg:block" href="/">Barra</a>
     <ul class="flex gap-6 md:gap-12 text-base sm:text-xl md:text-2xl">
       <li>
         <a

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -24,7 +24,7 @@ import "@styles/global.css";
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lexend+Deca:[email protected]&display=swap"
       rel="stylesheet"
     />
 
@@ -48,7 +48,7 @@ import "@styles/global.css";
     <title>{title}</title>
   </head>
 
-  <body class="bg-gray-900 text-gray-50 font-mono">
+  <body class="bg-gray-900 text-gray-50">
     <slot />
 
     <!-- "vim" mode -->

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -18,8 +18,8 @@ let secondStacks = stacks.slice(9);
   <main class="container mx-auto mt-40 md:mt-72 2xl:mt-[30rem] px-5 sm:px-12">
     <div class="flex flex-col gap-10 relative">
       <div class="font-extrabold">
-        <h1 class="text-4xl font-extrabold md:text-6xl 2xl:text-8xl">Hello!</h1>
-        <h1 class="text-[2.5rem] font-extrabold md:text-7xl 2xl:text-9xl">
+        <h1 class="text-4xl font-bold md:text-6xl 2xl:text-8xl">Hello!</h1>
+        <h1 class="text-[2.5rem] font-bold md:text-7xl 2xl:text-9xl">
           I'm Barra 👋
         </h1>
       </div>

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,7 +4,22 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        mono: ["Jetbrains Mono", "Courier New", "Courier", "monospace"],
+        sans: [
+          "Lexend Deca",
+          "Arial",
+          "Helvetica",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif",
+        ],
+        mono: [
+          "Jetbrains Mono",
+          "ui-monospace",
+          "Consolas",
+          "Courier New",
+          "Courier",
+          "monospace",
+        ],
       },
       keyframes: {
         scroll: {