Updated browserslist, added new fonts to Tailwind config and layout, and applied fonts to dashboard and landing pages

Author: joesalaz

package-lock.json

@@ -18,7 +18,7 @@
     "sqlite3": "^5.1.7"
   },
   "devDependencies": {
-    "browserlist": "^1.0.1",
+    "browserslist": "^4.23.0",
     "tailwindcss": "^3.4.17"
   }
 }

package.json

@@ -934,8 +934,12 @@ video {
   font-family: Inter, sans-serif;
 }
 
-.font-monserrat {
-  font-family: Monserrat, sans-serif;
+.font-montserrat {
+  font-family: Montserrat, sans-serif;
+}
+
+.font-nunito {
+  font-family: Nunito, sans-serif;
 }
 
 .font-raleway {
@@ -967,6 +971,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1152,6 +1161,11 @@ video {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 
 @media (min-width: 1024px) {

public/stylesheets/output.css

@@ -1,32 +1,31 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./views/**/*.hbs",
-    "./public/**/*.js"
-  ],
+  content: ["./views/**/*.hbs", "./public/**/*.js"],
   theme: {
     extend: {
-      colors:{
-        titlleColor:'#1c398e',
-        iconColor: '#2563eb',
-        welcomeColor: '#1c398e !important'
+      colors: {
+        titlleColor: "#1c398e",
+        iconColor: "#2563eb",
+        welcomeColor: "#1c398e !important",
+      },
+      fontFamily: {
+        montserrat: ["Montserrat", "sans-serif"],
+        playfair: ["Playfair Display", "serif"],
+        poppins: ["Poppins", "sans-serif"],
+        merriweather: ["Merriweather", "serif"],
+        inter: ["Inter", "sans-serif"],
+        roboto: ["Roboto", "sans-serif"],
+        nunito: ["Nunito", "sans-serif"],
+        raleway: ["Raleway", "sans-serif"],
+        lato: ["Lato", "sans-serif"],
+        quicksand: ["Quicksand", "sans-serif"],
+        sourcesans: ["Source Sans 3", "sans-serif"],
+        barlow: ["Barlow", "sans-serif"],
+        marhey: ["Marhey", "cursive"],
+        baloo2: ["Baloo 2", "cursive"],
       },
-      fontFamily:{
-        monserrat: ['Monserrat', 'sans-serif'],
-        playfair: ['Playfair Display', 'serif'],
-        poppins: ['Poppins', 'sans-serif'],
-        merriweather: ['Merriweather', 'serif'],
-        inter: ['Inter', 'sans-serif'],
-        roboto: ['Roboto', 'sans-serif'],
-        nunito: ['Nunito', 'sans-serif'],
-        raleway: ['Raleway', 'sans-serif'],
-        lato: ['Lato', 'sans-serif'],
-        quicksand: ['Quicksand', 'sans-serif'],
-        sourcesans: ['Source Sans 3', 'sans-serif'],
-        barlow: ['Barlow', 'sans-serif'],
-      }
     },
   },
   plugins: [],
-}
+};
 

tailwind.config.js

@@ -2,7 +2,7 @@
     <!-- Header -->
    <header class="bg-gradient-to-br from-blue-100 to-blue-300 mx-auto w-full py-6 shadow text-blue-900">
   <div class="container mx-auto flex justify-between items-center px-4">
-    <h1 class="text-2xl font-bold text-titleColor font-monserrat">{{title}}</h1>
+    <h1 class="text-3xl md:text-3xl text-titleColor font-bold font-nunito">{{title}}</h1>
     <!-- Hamburger Button (Mobile) -->
     <button id="menuBtn" class="md:hidden p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-700" aria-label="Open Menu">
       <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">

views/dashboard.hbs

@@ -1,6 +1,6 @@
  <!-- Hero Section -->
   <section class="bg-gradient-to-br from-blue-100 to-blue-300 py-16 text-center">
-    <h1 class="text-4xl md:text-5xl font-bold mb-4 text-welcomeColor">Welcome to <span class="font-monserrat">{{title}}</span></h1>
+    <h1 class="text-4xl md:text-5xl mb-4 text-welcomeColor">Welcome to <span class="font-nunito font-bold">{{title}}</span></h1>
     <p class="text-lg md:text-xl mb-6 text-blue-700">Organize, search, and manage your favorite books with ease.</p>
     <p class="mt-2 text-blue-700">
       BookWise is <span class="font-semibold">open source</span>! View the code or contribute on 

views/landing.hbs

@@ -10,7 +10,9 @@
     {{!-- <script src="https://cdn.tailwindcss.com/3.0.0"></script> --}}
     <link rel="stylesheet" href="/stylesheets/output.css"/>
     <link rel='stylesheet' href='/stylesheets/style.css' />
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&family=Poppins:wght@400;700&family=Merriweather:wght@400;700&family=Inter:wght@400;700&family=Roboto:wght@400;700&family=Nunito:wght@400;700&family=Raleway:wght@700&family=Lato:wght@700&family=Quicksand:wght@700&family=Source+Sans+3:wght@700&family=Barlow:wght@700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Barlow:wght@400;700&family=Inter:wght@400;700&family=Lato:wght@400;700&family=Marhey:wght@400;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;700&family=Nunito:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;700&family=Quicksand:wght@400;700&family=Raleway:wght@400;700&family=Roboto:wght@400;700&family=Source+Sans+3:wght@400;700&display=swap"
+      rel="stylesheet">
 
   </head>
   <body class="font-inter min-h-screen flex flex-col">