san/idle_moloch
1
0
Fork 0
forked from mico/idle_moloch
Code Pull Requests Activity

Lil upsexing of the Header and adding fonts

Browse Source
This commit is contained in:
mic0 2024-10-21 10:42:22 +02:00
parent 01f0c01235
commit 37ac6c22c6
Signed by: mico
GPG Key ID: A3F8023524CF1C8D
5 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/Header.tsx
View File

@ -1,9 +1,11 @@
import React from "react"
import styles from "../styles/Header.module.css"
const Header = () => {
return <header>
<h1>mico's Slayery</h1>
<p>1213123 million GELD</p>
return <header className={styles.header}>
<h1 className={styles.title}>mico's Slayery</h1>
<p className={styles.counter}>1213123 million GELD</p>
<p className={styles.counter_per_seconds}>per second: 55.000 thousand</p>
</header>
}

16
app/src/pages/_app.tsx
View File

@ -1,20 +1,28 @@
import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { RainbowKitProvider, midnightTheme } from '@rainbow-me/rainbowkit';
import { config } from '../wagmi';
import { Texturina } from 'next/font/google'
const client = new QueryClient();
const font = Texturina({ weight: ['400'], subsets: ["latin"] })
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={client}>
<RainbowKitProvider>
<RainbowKitProvider theme={midnightTheme()}>
<style jsx global>{`
html, body, p, span, a {
font-family: ${font.style.fontFamily};
}
h1, h2, h3, h4, h5, h6, .title {
font-family: ${font.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</RainbowKitProvider>
</QueryClientProvider>

8
app/src/pages/index.tsx
View File

@ -9,16 +9,18 @@ const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>RainbowKit App</title>
<title>Slay Moloch</title>
<meta
content="Generated by @rainbow-me/create-rainbowkit"
name="description"
content="Slay the moloch, earn shiny GELD"
name="Slay the moloch, earn shiny GELD"
/>
<link href="/favicon.ico" rel="icon" />
</Head>
<main className={styles.main}>
<div className={styles.connect}>
<ConnectButton />
</div>
<Header />
<Background />
</main>

18
app/src/styles/Header.module.css Normal file
View File

@ -0,0 +1,18 @@
.header {
margin-top: 5rem;
}
.title {
font-size: 1.5rem;
margin: 0;
}
.counter {
font-size: 2rem;
font-weight: 600;
margin: 0.5rem 0 0.2rem;
line-height: 2rem;
}
.counter_per_seconds {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}

7
app/src/styles/Home.module.css
View File

@ -2,7 +2,14 @@
padding: 0 2rem;
}
.connect {
position: absolute;
top: 2rem;
right: 2rem;
}
.main {
position: relative;
display: flex;
flex-direction: column;
align-items: center;