feat: New header font

paintoshi · Oct 1, 2024 · 9c92816 · 9c92816
1 parent aa7bd19
commit 9c92816
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/app/components/Widget.tsx b/app/components/Widget.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { LiFiWidget, WidgetConfig, WidgetSkeleton, ChainId } from '@lifi/widget'
+import { LiFiWidget, WidgetConfig, WidgetSkeleton } from '@lifi/widget'
 import styles from '@/app/page.module.css'
 import { ClientOnly } from '@/app/components/ClientOnly'
 

diff --git a/app/globals.css b/app/globals.css
@@ -1,10 +1,10 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
+  --font-manrope: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
   --foreground-rgb: 250, 250, 250;
   --background-start-rgb: 0, 0, 10;
   --background-end-rgb: 0, 0, 37;
@@ -44,12 +44,21 @@ a {
   color: #25a4d7;
   text-decoration: none;
   cursor: pointer;
+}
 
-  &:hover {
-    color: #277cbd;
-  }
+a:hover {
+  color: #277cbd;
 }
 
 html {
   color-scheme: dark;
 }
+
+/* Add these new styles */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-orbitron);
+}
+
+code, pre {
+  font-family: var(--font-mono);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,18 @@
 import type { Metadata, Viewport } from "next"
-import { Manrope } from "next/font/google"
+import { Manrope, Orbitron } from "next/font/google"
 import "./globals.css"
 import Script from "next/script"
 
-const manrope = Manrope({ subsets: ['latin'] })
+const manrope = Manrope({ 
+  subsets: ['latin'],
+  variable: '--font-manrope',
+})
+
+const orbitron = Orbitron({ 
+  weight: '700',
+  subsets: ['latin'],
+  variable: '--font-orbitron',
+})
 
 export const metadata: Metadata = {
   title: "TinySwap",
@@ -27,7 +36,7 @@ export const metadata: Metadata = {
     images: "https://tinyswap.app/og.png",
     url: "https://tinyswap.app",
   },
-  icons: [{ rel: "icon", url: "/favicon.ico" }]
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
 }
 
 export const viewport: Viewport = {
@@ -42,7 +51,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={manrope.className}>
+      <body className={`${manrope.variable} ${orbitron.variable}`}>
         {children}
         {/* Global Site Tag (gtag.js) - Google Analytics */}
         <Script

diff --git a/app/page.module.css b/app/page.module.css
@@ -21,13 +21,15 @@
   font-weight: 700;
   text-align: center;
   margin-bottom: 0.5rem;
+  font-family: var(--font-orbitron);
 }
 
 .description {
   font-size: 1rem;
   font-weight: 200;
   text-align: center;
   margin-bottom: 2.5rem;
+  font-family: var(--font-manrope);
 }
 
 .githubLink {

diff --git a/public/og.png b/public/og.png