Use new title font

cesalberca · Aug 24, 2024 · 0e3ef9a · 0e3ef9a
1 parent d8848dd
commit 0e3ef9a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -80,6 +80,7 @@ html {
   h5,
   h6 {
     @apply leading-tight;
+    font-family: var(--font-azeret-mono);
   }
 
   h1 {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter, Azeret_Mono } from 'next/font/google'
 import './globals.css'
 import type { ReactNode } from 'react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
@@ -10,6 +10,7 @@ import { NextIntlClientProvider } from 'next-intl'
 import { ThemeProvider } from '@/core/components/theme/theme-provider'
 
 const inter = Inter({ subsets: ['latin'] })
+const azeret = Azeret_Mono({ subsets: ['latin'], weight: '400', variable: '--font-azeret-mono' })
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
@@ -47,7 +48,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
 
   return (
     <html lang={locale} suppressHydrationWarning>
-      <body className={`antialiased font-medium lg:mx-auto sm:text-lg text-base ${inter.className}`}>
+      <body className={`antialiased font-medium lg:mx-auto sm:text-lg text-base ${inter.className} ${azeret.variable}`}>
         <ThemeProvider attribute="class" enableSystem={false} forcedTheme="dark" disableTransitionOnChange>
           <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
           <Analytics />

diff --git a/src/features/home/delivery/home.page.tsx b/src/features/home/delivery/home.page.tsx
@@ -46,10 +46,10 @@ export const HomePage: FC = () => {
       <OpenToWork />
       <Hero image="/assets/images/me-no-bg.png" imageClassName="object-top md:object-contain pt-16 mx-auto max-w-xl">
         <header className="absolute inset-0 md:pt-[100px] flex flex-col justify-center wrapper">
-          <h2 className="uppercase text-4xl leading-tight min-h-[6rem] flex items-end">
+          <h1 className="uppercase min-h-[6rem] flex items-end">
             <ScrambleList texts={texts} />
-          </h2>
-          <h6>{t.rich('home.heroCaption')}</h6>
+          </h1>
+          <p>{t.rich('home.heroCaption')}</p>
           <section className="mt-xs text-xs">
             <SocialMedia />
           </section>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -14,6 +14,15 @@ const config = {
     },
     extend: {
       scrollBehavior: ['responsive'],
+      fontSize: {
+        sm: '0.64rem',
+        base: '1rem',
+        xl: '1.10rem',
+        '2xl': '1.25rem',
+        '3xl': '1.562rem',
+        '4xl': '1.953rem',
+        '5xl': '2.442rem',
+      },
       spacing: {
         xxs: '8px',
         xs: '12px',
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,6 +80,7 @@ html { @@
       h5,
       h6 {
         @apply leading-tight;
+        font-family: var(--font-azeret-mono);
       }
       h1 {
@@ Expand Down @@