Next.js Fonts and Responsive Design

15Dkatz · Jul 6, 2023 · 4efd1b4 · 4efd1b4
1 parent e91dcb0
commit 4efd1b4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/app/layout.js b/app/layout.js
@@ -1,9 +1,19 @@
 import './globals.css'
-import { Inter } from 'next/font/google'
+import { Ranga, Roboto_Condensed } from 'next/font/google'
 import Link from 'next/link'
 import { GRID_DATA_ITEMS } from './data'
 
-const inter = Inter({ subsets: ['latin'] })
+const ranga = Ranga({
+  subsets: ['latin'],
+  weight: '700',
+  variable: '--font-ranga-bold'
+})
+
+const robotoCondensed = Roboto_Condensed({
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-roboto-condensed'
+})
 
 export const metadata = {
   title: 'Create Next App',
@@ -12,14 +22,14 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={`${inter.className} flex justify-center items-center min-h-screen`}>
-        <div className="w-[1000px] flex flex-col items-center pt-4 pb-4">
+    <html lang="en" className={`${ranga.variable} ${robotoCondensed.variable}`}>
+      <body className="font-roboto flex justify-center items-center min-h-screen">
+        <div className="w-[350px] lg:w-[1000px] flex flex-col items-center pt-4 pb-4">
           <div className="w-full bg-slate-100 flex flex-col items-center pb-10 pt-10">
-            <div className="text-2xl mb-5 underline decoration-3 decoration-blue-400">
+            <div className="font-ranga text-2xl lg:text-4xl mb-5 underline decoration-3 decoration-blue-400">
               DAVID KANDO MUSIC
             </div>
-            <div className="grid grid-cols-4 gap-1">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-1">
               {
                 GRID_DATA_ITEMS.map((gridDataItem) => {
                   const { id, attributes } = gridDataItem;
@@ -28,12 +38,13 @@ export default function RootLayout({ children }) {
                     <Link key={id} href={attributes.href}>
                       <div
                         className={
-                          `${attributes.background} w-52 h-52
+                          `${attributes.background} w-36 h-36 lg:w-52 lg:h-52
                           flex items-end border-black border-[2px]`
                         }
                       >
                         <div className={
-                          `bg-slate-200/75 w-full text-center mb-2
+                          `font-ranga bg-slate-200/75 w-full text-center mb-2
+                           text-sm lg:text-2xl h-[18px] lg:h-[30px]
                           hover:text-white hover:bg-slate-700/75`
                           }
                         >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,11 +7,10 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
+      fontFamily: {
+        ranga: ['var(--font-ranga-bold)'],
+        roboto: ['var(--font-roboto-condensed)']
+      }
     },
   },
   plugins: [],