From d4208dcc28f55986a10b1efc4df98e23068914ef Mon Sep 17 00:00:00 2001 From: babblebey Date: Fri, 1 Sep 2023 09:48:24 +0100 Subject: [PATCH] feat: add `font-heading` to header elements --- app/(www)/page.tsx | 10 +++++----- app/layout.tsx | 15 ++++++++++++--- tailwind.config.ts | 6 ++++++ 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/app/(www)/page.tsx b/app/(www)/page.tsx index 7d119ee..fc4ed0c 100644 --- a/app/(www)/page.tsx +++ b/app/(www)/page.tsx @@ -19,7 +19,7 @@ export default async function IndexPage() { <>
-

+

Hi, I'm Olabode 👋🏽

@@ -44,10 +44,10 @@ export default async function IndexPage() {

-

+

Olabode
-

+

Tools & Libraries

@@ -100,7 +100,7 @@ export default async function IndexPage() {

-

+

Projects

diff --git a/app/layout.tsx b/app/layout.tsx index f4a50c7..ea987b0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,10 +1,19 @@ import "@/styles/globals.css"; import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Inter, Bricolage_Grotesque } from "next/font/google"; import { siteConfig } from "@/config/site"; import { ThemeProvider } from "@/components/theme-provider"; +import { cn } from "@/lib/utils"; -const inter = Inter({ subsets: ['latin'] }); +const fontSans = Inter({ + subsets: ['latin'], + variable: "--font-sans" +}); + +const fontHeading = Bricolage_Grotesque({ + subsets: ['latin'], + variable: "--font-heading" +}); export const metadata: Metadata = { title: { @@ -59,7 +68,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/tailwind.config.ts b/tailwind.config.ts index 0377ea1..1ea876c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,3 +1,5 @@ +const { fontFamily } = require("tailwindcss/defaultTheme"); + /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], @@ -56,6 +58,10 @@ module.exports = { md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + heading: ["var(--font-heading)", ...fontFamily.sans], + }, keyframes: { "accordion-down": { from: { height: 0 },