+ 12
- 0
components/link-list.tsx
查看文件
| @@ -0,0 +1,12 @@ | |||
| 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> | |||
| ) | |||
| } | |||
+ 6
- 4
components/misc/header.tsx
查看文件
| @@ -1,13 +1,15 @@ | |||
| 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> | |||
| ) | |||
+ 1
- 2
components/misc/logo.tsx
查看文件
| @@ -4,11 +4,10 @@ function SvgLogo(props: React.SVGProps<SVGSVGElement>) { | |||
| 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"> | |||
+ 13
- 0
package-lock.json
查看文件
| @@ -268,6 +268,14 @@ | |||
| "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", | |||
| @@ -4044,6 +4052,11 @@ | |||
| "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", | |||
+ 2
- 0
package.json
查看文件
| @@ -8,11 +8,13 @@ | |||
| "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": { | |||
+ 4
- 5
pages/_app.tsx
查看文件
| @@ -5,7 +5,7 @@ import '../styles/globals.css' | |||
| function MyApp({ Component, pageProps }) { | |||
| return ( | |||
| <div style={{ backgroundColor: '#ad4932' }}> | |||
| <div className="bg-primary"> | |||
| <Head> | |||
| <title>Nerdbrawl</title> | |||
| <link rel="icon" href="/favicon.ico" /> | |||
| @@ -13,12 +13,11 @@ function MyApp({ Component, pageProps }) { | |||
| <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> | |||
+ 3
- 1
pages/index.tsx
查看文件
| @@ -1,6 +1,8 @@ | |||
| import Head from 'next/head' | |||
| export default function Home() { | |||
| return ( | |||
| <div>test</div> | |||
| <div className="grid grid-flow-row gap-3"> | |||
| <article></article> | |||
| </div> | |||
| ) | |||
| } | |||
二进制
public/img/background-mobile.png
查看文件
| 之前 | 之后 |
|---|---|
|
|
| 宽度: 363 | 高度: 583 | 大小: 73KB |
二进制
public/img/background.png
查看文件
| 之前 | 之后 |
|---|---|
|
|
| 宽度: 1680 | 高度: 945 | 大小: 165KB |
+ 5
- 1
styles/globals.css
查看文件
| @@ -1,3 +1,7 @@ | |||
| @tailwind base; | |||
| @tailwind components; | |||
| @tailwind utilities; | |||
| @tailwind utilities; | |||
| body { | |||
| width: 100%; | |||
| } | |||
+ 12
- 6
tailwind.config.js
查看文件
| @@ -1,14 +1,20 @@ | |||
| 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'] | |||
| } | |||
| }, | |||
正在加载...