varela

andrewnjoo · May 26, 2024 · 21b83f3 · 21b83f3
1 parent ae0798c
commit 21b83f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Fonts */
+.radix-themes {
+  --default-font-family: var(--font-varela-round);
+}
+
+/* Framer Motion */
 .framer-pill {
   display: flex;
   overflow-x: hidden;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,17 @@
 import type { Metadata } from 'next';
+import { Varela_Round } from 'next/font/google';
 import { Theme as RadixTheme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import Footer from '@/components/Footer';
 import Navbar from '@/components/Navbar';
 import './globals.css';
 
+const varelaRound = Varela_Round({
+  subsets: ['latin'],
+  weight: ['400'],
+  variable: '--font-varela-round',
+})
+
 export const metadata: Metadata = {
   title: "drew's site",
   description: 'Generated by create next app',
@@ -16,8 +23,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en' suppressHydrationWarning>
-      <body>
+    <html lang='en' suppressHydrationWarning className={varelaRound.variable}>
+      <body >
         <RadixTheme accentColor='indigo' grayColor='sand' radius='large'>
           <Navbar />
           <main className='min-h-screen'>{children}</main>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -20,7 +20,7 @@ export const sitePages = [
 
 const Navbar = () => {
   return (
-    <div className='flex flex-row gap-8 justify-center'>
+    <div className='flex flex-row gap-8 justify-center pt-4 sm:pt-8'>
       {sitePages.map((page) => (
         <Link
           href={page.href}