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 React from "react"
import styles from "../styles/Header.module.css"
const Header = () => { const Header = () => {
return <header> return <header className={styles.header}>
<h1>mico's Slayery</h1> <h1 className={styles.title}>mico's Slayery</h1>
<p>1213123 million GELD</p> <p className={styles.counter}>1213123 million GELD</p>
<p className={styles.counter_per_seconds}>per second: 55.000 thousand</p>
</header> </header>
} }

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

@ -1,20 +1,28 @@
import '../styles/globals.css'; import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css'; import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi'; import { WagmiProvider } from 'wagmi';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; import { RainbowKitProvider, midnightTheme } from '@rainbow-me/rainbowkit';
import { config } from '../wagmi'; import { config } from '../wagmi';
import { Texturina } from 'next/font/google'
const client = new QueryClient(); const client = new QueryClient();
const font = Texturina({ weight: ['400'], subsets: ["latin"] })
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<WagmiProvider config={config}> <WagmiProvider config={config}>
<QueryClientProvider client={client}> <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} /> <Component {...pageProps} />
</RainbowKitProvider> </RainbowKitProvider>
</QueryClientProvider> </QueryClientProvider>

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

@ -9,16 +9,18 @@ const Home: NextPage = () => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Head> <Head>
<title>RainbowKit App</title> <title>Slay Moloch</title>
<meta <meta
content="Generated by @rainbow-me/create-rainbowkit" content="Slay the moloch, earn shiny GELD"
name="description" name="Slay the moloch, earn shiny GELD"
/> />
<link href="/favicon.ico" rel="icon" /> <link href="/favicon.ico" rel="icon" />
</Head> </Head>
<main className={styles.main}> <main className={styles.main}>
<ConnectButton /> <div className={styles.connect}>
<ConnectButton />
</div>
<Header /> <Header />
<Background /> <Background />
</main> </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; padding: 0 2rem;
} }
.connect {
position: absolute;
top: 2rem;
right: 2rem;
}
.main { .main {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;