Updated design to a tailwindcss based design. Already looking better on mobile.
Some optimisation still needs to be done
This commit is contained in:
Ludoviko
parent
1f21e18241
commit
3a7194b33d
17
components/linkcard.tsx
Normal file
17
components/linkcard.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export default function LinkCard(props: {
|
||||
link: string;
|
||||
title: string;
|
||||
sub: string;
|
||||
}) {
|
||||
const { link, title, sub } = props;
|
||||
return (
|
||||
<Link href={link} passHref>
|
||||
<a className="box-border p-2 bg-gray-50 dark:bg-gray-500 hover:bg-gray-100 hover:text-indigo-500 dark:hover:bg-gray-600 dark:hover:text-indigo-300 rounded-md">
|
||||
<h2 className="px-4">{title} →</h2>
|
||||
<p className="px-4">{sub}</p>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
|
|
@ -1,3 +1,6 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -9,11 +9,14 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "11.0.1",
|
||||
"next-intl": "^1.4.4",
|
||||
"next-plausible": "^2.0.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
"autoprefixer": "^10.3.3",
|
||||
"next": "^11.1.2",
|
||||
"next-intl": "^2.0.0",
|
||||
"next-plausible": "^2.1.1",
|
||||
"postcss": "^8.3.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"tailwindcss": "^2.2.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "17.0.14",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import '../styles/globals.css'
|
||||
import 'tailwindcss/tailwind.css'
|
||||
import type { AppProps } from 'next/app'
|
||||
import {NextIntlProvider} from 'next-intl';
|
||||
import PlausibleProvider from 'next-plausible';
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
type Data = {
|
||||
name: string
|
||||
}
|
||||
|
||||
export default function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse<Data>
|
||||
) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||
import Image from 'next/image'
|
||||
import LinkCard from '../components/linkcard'
|
||||
|
||||
export function getStaticProps({locale}: GetStaticPropsContext) {
|
||||
return {
|
||||
|
|
@ -18,10 +17,9 @@ export function getStaticProps({locale}: GetStaticPropsContext) {
|
|||
}
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter()
|
||||
const t = useTranslations('common')
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className="">
|
||||
<Head>
|
||||
<title>Vänner Bäst | Friends Best</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
|
|
@ -35,34 +33,22 @@ export default function Home() {
|
|||
<meta property="og:description" content="A Young Royals fan website with links to different discussion spaces."/>
|
||||
</Head>
|
||||
|
||||
<main className={styles.main}>
|
||||
<Image src="/yr.jpg" alt="Young Royals" width={256} height={144} />
|
||||
<h1 className={styles.title}>
|
||||
<main className="container mx-auto min-h-screen min-w-full bg-gray-300 dark:bg-gray-700">
|
||||
<Image src="/yr.jpg" alt="Young Royals" width={512} height={288} className="py-6" />
|
||||
<h1 className="dark:text-gray-300 font-bold text-center text-6xl pt-4">
|
||||
{t('welcome')}
|
||||
</h1>
|
||||
<p className={styles.description}>
|
||||
<p className="dark:text-gray-300 text-center text-2xl">
|
||||
{t('desc')}
|
||||
</p>
|
||||
<div className={styles.grid}>
|
||||
<a href="https://vannerba.st/watch" className={styles.card}>
|
||||
<h2>{t('watch.title')} →</h2>
|
||||
<p>{t('watch.desc')} </p>
|
||||
</a>
|
||||
<a href="https://vannerba.st/discord" className={styles.card}>
|
||||
<h2>Discord →</h2>
|
||||
<p>{t('discord')}</p>
|
||||
</a>
|
||||
<a href="https://vannerba.st/reddit" className={styles.card}>
|
||||
<h2>Reddit →</h2>
|
||||
<p>{t('reddit')}</p>
|
||||
</a>
|
||||
<a href="https://vannerba.st/learn" className={styles.card}>
|
||||
<h2>{t('learn.title')} →</h2>
|
||||
<p>{t('learn.desc')}</p>
|
||||
</a>
|
||||
<div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
|
||||
<LinkCard link="https://vannerba.st/watch" title={`${t('watch.title')}`} sub={t('watch.desc')}/>
|
||||
<LinkCard link="https://vannerba.st/discord" title={`Discord`} sub={t('discord')}/>
|
||||
<LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
|
||||
<LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/>
|
||||
</div>
|
||||
</main>
|
||||
<footer className={styles.footer}><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
|
||||
<footer className="bg-gray-300 dark:bg-gray-700 dark:text-gray-300 text-center dark:hover:text-indigo-400"><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
18
tailwind.config.js
Normal file
18
tailwind.config.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
boxSizing: ['hover'],
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Reference in a new issue