Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.

Replace Levenim MT with Figtree Light #151

Merged
merged 13 commits into from
Jul 14, 2023
Merged

Replace Levenim MT with Figtree Light #151

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
96b79d3
Changed Levenim MT to Gantari
nerddtvg Apr 26, 2023
88cfe31
Merge branch 'main' into test-font-quicksand
nerddtvg Apr 26, 2023
b127242
Added Roboto Mono to make monospace fonts global
nerddtvg Apr 26, 2023
511ab26
Changed to Figtree to test
nerddtvg Apr 26, 2023
8843dbe
Added Noto Sans Display Light for testing
nerddtvg Apr 26, 2023
2388f55
Merge branch 'main' into test-font-quicksand
nerddtvg Jun 20, 2023
177192c
Reduced changes to Figtree Light
nerddtvg Jun 20, 2023
489542d
Removed Levenim MT
nerddtvg Jun 20, 2023
3b395ae
Increased global letterSpacing
nerddtvg Jun 20, 2023
81260f8
Merge remote-tracking branch 'origin/main' into test-font-quicksand
nerddtvg Jun 29, 2023
162e05c
Reducing to 0.025em
nerddtvg Jun 29, 2023
1dcf9fb
Fixing a margin className typo
nerddtvg Jun 29, 2023
c9c06cc
Upgrading next from 13.3.0 to 13.4.8
nerddtvg Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 43 additions & 17 deletions src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useState } from 'react'
import type { AppProps } from 'next/app'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import localFont from 'next/font/local'
import ContactDrawer from '@/components/ContactDrawer'
import MenuDrawer from '@/components/MenuDrawer'
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
Expand All @@ -14,14 +13,33 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
import { Roboto_Mono, Gantari, Figtree, Noto_Sans_Display } from 'next/font/google'

const font = localFont({
src: [
{path: '../../public/assets/lvnm.woff2'},
{path: '../../public/assets/lvnm.woff'},
{path: '../../public/assets/lvnm.ttf'},
{path: '../../public/assets/lvnm.eot'}
],
const gantari = Gantari({
subsets: ['latin'],
weight: [ '400' ],
display: 'swap',
variable: '--font-gantari',
})

const figtree = Figtree({
subsets: ['latin'],
weight: ['300'],
display: 'swap',
variable: '--font-figtree',
})

const notoSansDisplay = Noto_Sans_Display({
subsets: ['latin'],
weight: ['300'],
display: 'swap',
variable: '--font-noto-sans-display',
})

const robotoMono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
})

export default function App({ Component, pageProps }: AppProps) {
Expand All @@ -44,6 +62,16 @@ export default function App({ Component, pageProps }: AppProps) {
nonce: undefined,
}}
>
<style jsx global>
{`
:root,:host {
--font-gantari: ${gantari.style.fontFamily};
--font-roboto-mono: ${robotoMono.style.fontFamily};
--font-figtree: ${figtree.style.fontFamily};
--font-noto-sans-display: ${notoSansDisplay.style.fontFamily};
}
`}
</style>
<Head>
<title>Ocelot Consulting</title>
<meta name='designed by' content='Fluid22' />
Expand All @@ -68,15 +96,13 @@ export default function App({ Component, pageProps }: AppProps) {
gtag('config', 'UA-84294052-1');
`}
</Script>
<div className={font.className}>
<Header setShowMenu={setShowMenu} setShowContact={setShowContact} />
<main>
<Component {...pageProps} setShowContact={setShowContact} />
</main>
<Footer />
<MenuDrawer show={showMenu} setShow={setShowMenu} showContactForm={() => setShowContact(true)}/>
<ContactDrawer show={showContact} setShow={setShowContact} />
</div>
<Header setShowMenu={setShowMenu} setShowContact={setShowContact} />
<main>
<Component {...pageProps} setShowContact={setShowContact} />
</main>
<Footer />
<MenuDrawer show={showMenu} setShow={setShowMenu} showContactForm={() => setShowContact(true)}/>
<ContactDrawer show={showContact} setShow={setShowContact} />
</GoogleReCaptchaProvider>
)
}
2 changes: 1 addition & 1 deletion src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function Document() {
return (
<Html lang="en" className="scroll-smooth">
<Head />
<body>
<body className='font-body'>
<Main />
<NextScript />
</body>
Expand Down
3 changes: 2 additions & 1 deletion src/styles/prism-coldark-cold.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
code[class*="language-"],
pre[class*="language-"] {
color: #ebdbb2; /* fg1 / fg */
font-family: Consolas, Monaco, "Andale Mono", monospace;
/* Leaving this unset inherits from font-mono from Tailwind */
/* font-family: Consolas, Monaco, "Andale Mono", monospace; */
direction: ltr;
text-align: left;
white-space: pre;
Expand Down
13 changes: 8 additions & 5 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
Expand Down Expand Up @@ -26,9 +28,10 @@ module.exports = {
}
},
fontFamily: {
heading: ['Levenim', 'sans-serif'],
body: ['Poppins', 'sans-serif'],
sans: ['Poppins', 'sans-serif']
heading: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
body: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
sans: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
mono: ['var(--font-roboto-mono)', ...defaultTheme.fontFamily.mono],
},
fontSize: {
xs: ['0.75rem', '1rem'],
Expand Down Expand Up @@ -66,7 +69,7 @@ module.exports = {
}
},
plugins: [
require('@tailwindcss/forms'),
require("@tailwindcss/typography")
require('@tailwindcss/forms'),
require("@tailwindcss/typography")
],
}