feat: add layout background and fix fonts

Gwyntoria · Dec 6, 2022 · ba6a77a · ba6a77a
1 parent 19526b8
commit ba6a77a
Show file tree

Hide file tree

Showing 18 changed files with 395 additions and 355 deletions.
diff --git a/components/Seo.tsx b/components/Seo.tsx
@@ -0,0 +1,29 @@
+import Head from 'next/head'
+
+export default function Seo() {
+ return (
+ <Head>
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="/apple-touch-icon.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="/favicon-16x16.png"
+ />
+ <link rel="manifest" href="/site.webmanifest" />
+ <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#454545" />
+ <meta name="msapplication-TileColor" content="#282828" />
+ <meta name="theme-color" content="#ffffff" />
+ </Head>
+ )
+}
diff --git a/lib/font.ts b/lib/font.ts
@@ -0,0 +1,20 @@
+import localFont from '@next/font/local'
+
+const sansFont = localFont({
+ src: [
+ {
+ path: './fonts/Satoshi-Variable.woff2',
+ weight: '300 900',
+ style: 'normal',
+ },
+ {
+ path: './fonts/Satoshi-VariableItalic.woff2',
+ weight: '300 900',
+ style: 'italic',
+ },
+ ],
+ variable: '--font-sans',
+ display: 'swap',
+})
+
+export { sansFont }
diff --git a/lib/fonts/Satoshi-Variable.eot b/lib/fonts/Satoshi-Variable.eot
diff --git a/lib/fonts/Satoshi-Variable.ttf b/lib/fonts/Satoshi-Variable.ttf
diff --git a/lib/fonts/Satoshi-Variable.woff b/lib/fonts/Satoshi-Variable.woff
diff --git a/lib/fonts/Satoshi-Variable.woff2 b/lib/fonts/Satoshi-Variable.woff2
diff --git a/lib/fonts/Satoshi-VariableItalic.eot b/lib/fonts/Satoshi-VariableItalic.eot
diff --git a/lib/fonts/Satoshi-VariableItalic.ttf b/lib/fonts/Satoshi-VariableItalic.ttf
diff --git a/lib/fonts/Satoshi-VariableItalic.woff b/lib/fonts/Satoshi-VariableItalic.woff
diff --git a/lib/fonts/Satoshi-VariableItalic.woff2 b/lib/fonts/Satoshi-VariableItalic.woff2
diff --git a/package.json b/package.json
@@ -9,17 +9,18 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@types/node": "18.11.9",
- "@types/react": "18.0.25",
+ "@next/font": "^13.0.6",
+ "@types/node": "18.11.11",
+ "@types/react": "18.0.26",
  "@types/react-dom": "18.0.9",
  "@zolplay/react": "^0.5.1",
  "@zolplay/utils": "^1.3.4",
  "cloudinary-build-url": "^0.2.4",
  "contentlayer": "^0.2.9",
- "dayjs": "^1.11.6",
- "eslint": "8.28.0",
- "eslint-config-next": "13.0.5",
- "next": "13.0.5",
+ "dayjs": "^1.11.7",
+ "eslint": "8.29.0",
+ "eslint-config-next": "13.0.6",
+ "next": "13.0.6",
  "next-contentlayer": "^0.2.9",
  "react": "18.2.0",
  "react-dom": "18.2.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,26 @@
 import '~/styles/globals.css'
 import type { AppProps } from 'next/app'
+import { sansFont } from '~/lib/font'
+import Seo from '~/components/Seo'
+import { clsxm } from '@zolplay/utils'
 
 export default function App({ Component, pageProps }: AppProps) {
- return <Component {...pageProps} />
+ return (
+ <>
+ <Seo />
+
+ <main
+ className={clsxm(
+ sansFont.variable,
+ 'relative h-full font-sans',
+ 'bg-primary-900 text-slate-50',
+ 'bg-[url("/grid.svg")] bg-top bg-repeat'
+ )}
+ >
+ <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
+
+ <Component {...pageProps} />
+ </main>
+ </>
+ )
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx