Use Major Mono for the header font

This commit is contained in:
Austin Chen 2021-12-02 17:21:43 -06:00
parent 838f7a8c8a
commit d02ae06724
3 changed files with 11 additions and 4 deletions

View File

@ -19,13 +19,13 @@ export const Hero = () => {
> >
<div className="flex items-center flex-1"> <div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto"> <div className="flex items-center justify-between w-full md:w-auto">
<a href="#"> <a href="#" className="inline-grid grid-flow-col align-items-center h-6 sm:h-10">
<img className="h-8 w-auto sm:h-10 inline-block mr-2 mb-1" src="/logo-icon.svg" /> <img className="w-auto h-6 sm:h-10 inline-block mr-3" src="/logo-icon.svg" />
<span className="text-white font-mono">Mantic Markets</span> <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">Mantic Markets</span>
</a> </a>
</div> </div>
<div className="space-x-8 md:flex md:ml-10"> <div className="space-x-8 md:flex md:ml-16">
{navigation.map((item) => ( {navigation.map((item) => (
<a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-gray-300"> <a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-gray-300">
{item.name} {item.name}

View File

@ -10,6 +10,10 @@ const Home: NextPage = () => {
<title>Mantic Markets</title> <title>Mantic Markets</title>
<meta name="description" content="Create and bet" /> <meta name="description" content="Create and bet" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet" />
</Head> </Head>
<LandingPage /> <LandingPage />

View File

@ -3,6 +3,9 @@ module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
theme: { theme: {
fontFamily: {
'major-mono': ['Major Mono Display', 'monospace'],
},
extend: { extend: {
backgroundImage: { backgroundImage: {
'world-trading': "url('/world-trading-background.jpg')", 'world-trading': "url('/world-trading-background.jpg')",