adding root layout and theme

DerLev · Aug 2, 2023 · c6300f0 · c6300f0
1 parent d2f96f0
commit c6300f0
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 5 deletions.
diff --git a/homepage/pages/_app.tsx b/homepage/pages/_app.tsx
@@ -1,11 +1,25 @@
 import GlobalStyles from '@/styles/GlobalStyles'
 import type { AppProps } from 'next/app'
+import tw from 'twin.macro'
+
+const styles = {
+  wrapper: tw`flex min-h-screen flex-col`,
+  main: tw`relative flex grow flex-col`,
+  footer: tw`flex items-center justify-center py-2 px-4 text-xs text-text-500`,
+}
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <GlobalStyles />
-      <Component {...pageProps} />
+      <div css={styles.wrapper}>
+        <main css={styles.main}>
+          <Component {...pageProps} />
+        </main>
+        <footer css={styles.footer}>
+          <p>&copy; {new Date().getFullYear()} DerLev</p>
+        </footer>
+      </div>
     </>
   )
 }

diff --git a/homepage/pages/_document.tsx b/homepage/pages/_document.tsx
@@ -3,7 +3,18 @@ import { Html, Head, Main, NextScript } from 'next/document'
 const Document = () => {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <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=Space+Grotesk:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />

diff --git a/homepage/pages/index.tsx b/homepage/pages/index.tsx
@@ -1,5 +1,15 @@
+import tw from 'twin.macro'
+
+const styles = {
+  wrapper: tw`flex grow flex-col items-center justify-center`,
+}
+
 const Index = () => {
-  return <p>Hello World!</p>
+  return (
+    <div css={styles.wrapper}>
+      <p>Hello World!</p>
+    </div>
+  )
 }
 
 export default Index
diff --git a/homepage/styles/GlobalStyles.tsx b/homepage/styles/GlobalStyles.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
 import { Global } from '@emotion/react'
-import tw, { css, theme, GlobalStyles as BaseStyles } from 'twin.macro'
+import tw, { css, GlobalStyles as BaseStyles } from 'twin.macro'
 
 const customStyles = css({
+  html: {
+    fontSize: '112.5%',
+  },
+
   body: {
+    ...tw`bg-background text-text-100 font-body`,
     ...tw`antialiased`,
   },
 })

diff --git a/homepage/tailwind.config.js b/homepage/tailwind.config.js
@@ -2,7 +2,45 @@
 module.exports = {
   content: [],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'text': {
+          100: '#fafafa',
+          500: '#7d7d7d',
+          900: '#050505'
+        },
+        'background': '#050505',
+        'primary': {
+          50: '#f1e6ff',
+          100: '#d4b3ff',
+          200: '#b780fe',
+          300: '#9a4dfe',
+          400: '#7d1bfe',
+          500: '#6c01f9',
+          600: '#4d01b2',
+          700: '#37017f',
+          800: '#21004c',
+          900: '#0b0019'
+        },
+        'secondary': '#262626',
+        'accent': {
+          50: '#e7fef5',
+          100: '#b6fce0',
+          200: '#85facb',
+          300: '#54f8b6',
+          400: '#23f6a1',
+          500: '#0aea90',
+          600: '#07ab6a',
+          700: '#057a4b',
+          800: '#03492d',
+          900: '#01180f'
+        },
+      }
+    },
+    fontFamily: {
+      'display': ['"Space Grotesk"', 'sans-serif'],
+      'body': ['"Space Grotesk"', 'sans-serif']
+    }
   },
   plugins: [],
 }