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

View File

@ -10,6 +10,10 @@ const Home: NextPage = () => {
<title>Mantic Markets</title>
<meta name="description" content="Create and bet" />
<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>
<LandingPage />

View File

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