4 years ago · 7987e18fd5
--- a/components/link-list.tsx
+++ b/components/link-list.tsx
 import { FaItunes, FaSpotify, FaTwitter } from 'react-icons/fa';
 export default function LinkList() {
    return (
        <span className="flex flex-row justify-evenly w-1/3 bg-blue-900 bg-gradient-to-t top-1 bottom-1 rounded">
            <FaTwitter color="#1DA1F2" />
            <FaSpotify color="#1DB954" />
            <FaItunes color="white" />
        </span>
    )
 }
--- a/components/misc/header.tsx
+++ b/components/misc/header.tsx
 import {  SUB_TITLE } from "../../misc/globals";
 import { SUB_TITLE } from "../../misc/globals";
 import LinkList from "../link-list";
 import SvgLogo from "./logo";
 export default function Header() {
    return (
        <header className="flex justify-center h-screen w-auto items-center md:items-baseline ">
            <div className="flex flex-col w-full">
                <SvgLogo className="object-fill w-full h-auto" />
        <header className="bg-cover	bg-no-repeat bg-film-background  h-full w-auto">
            <div className="flex justify-center items-center  flex-col w-full h-full  md:space-y-7 ">
                <SvgLogo className="object-fill md:w-auto w-full h-auto md:h-2/3" />
                <h2 className="capitalize text-white font-bold text-center md:text-3xl">
                    {SUB_TITLE}
                </h2>
                <LinkList />
            </div>
        </header>
    )
--- a/components/misc/logo.tsx
+++ b/components/misc/logo.tsx
    return (
        <svg
            viewBox="0 0 1500 750"
            height="100%"
            width="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            {...props}
            style={{width: '100%'}}
        >
            <defs>
                <symbol overflow="visible" id="logo_svg__e">
--- a/package-lock.json
+++ b/package-lock.json
        "csstype": "^3.0.2"
      }
    },
    "@types/react-icons": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@types/react-icons/-/react-icons-3.0.0.tgz",
      "integrity": "sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==",
      "requires": {
        "react-icons": "*"
      }
    },
    "@webassemblyjs/ast": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
        "scheduler": "^0.20.1"
      }
    },
    "react-icons": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
      "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg=="
    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
    "start": "next start"
  },
  "dependencies": {
    "@types/react-icons": "^3.0.0",
    "autoprefixer": "^10.2.1",
    "next": "10.0.5",
    "postcss": "^8.2.4",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-icons": "^4.1.0",
    "tailwindcss": "^2.0.2"
  },
  "devDependencies": {
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
 function MyApp({ Component, pageProps }) {
  return (
    <div style={{ backgroundColor: '#ad4932' }}>
    <div className="bg-primary">
      <Head>
        <title>Nerdbrawl</title>
        <link rel="icon" href="/favicon.ico" />
        <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap" rel="stylesheet"></link>
      </Head>
      <Header />
      <main className="flex flex-col justify-around items-center">
      <main className="h-screen w-screen">
        <Header />
        <Component  {...pageProps} />
        <Footer />
      </main>
      <Footer />
    </div>
--- a/pages/index.tsx
+++ b/pages/index.tsx
 import Head from 'next/head'
 export default function Home() {
  return (
    <div>test</div>
    <div className="grid grid-flow-row gap-3">
      <article></article>
    </div>
  )
 }
--- a/public/img/background-mobile.png
+++ b/public/img/background-mobile.png
--- a/public/img/background.png
+++ b/public/img/background.png
--- a/styles/globals.css
+++ b/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
 body {
    width: 100%;
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
 module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: 'media', // or 'media' or 'class'
  backgroundColor: theme => ({
    ...theme('colors'),
    'primary': '#e76143',
  }),
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      backgroundColor: theme => ({
        ...theme('colors'),
        'primary': '#ad4932',
      }),
      backgroundImage: theme => ({
        'film-background': "url('/img/background.png')",
        'mb-film-background': "url('/img/background-mobile.png')",
      }),
    },
    fontFamily: {
      'diplay': ['Comic Neue'],
      'body': ['Comic Neue'],  
      'body': ['Comic Neue'],
      'sans': ['Comic Neue']
    }
  },