From 0b61263f3653f8576ae6ce305ae9b9bbe0d40e93 Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 4 Nov 2021 12:45:18 +0100 Subject: [PATCH] Added stuff --- LICENSE | 21 ++++++ components/mainmenu.module.css | 73 +++++++++++++++++++++ components/mainmenu.tsx | 75 ++++++++++++++++++++++ pages/api/hello.ts | 2 +- pages/index.tsx | 57 ++--------------- pages/library.tsx | 27 ++++++++ styles/Home.module.css | 114 +-------------------------------- styles/globals.css | 22 +++++++ 8 files changed, 227 insertions(+), 164 deletions(-) create mode 100644 LICENSE create mode 100644 components/mainmenu.module.css create mode 100644 components/mainmenu.tsx create mode 100644 pages/library.tsx diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..99a0a12 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Accord's Library + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/components/mainmenu.module.css b/components/mainmenu.module.css new file mode 100644 index 0000000..85d3b03 --- /dev/null +++ b/components/mainmenu.module.css @@ -0,0 +1,73 @@ +.menu { + border: 1px solid black; + height: 100%; + width: 100%; + display: grid; + justify-items: center; + padding: 2rem; + overflow-y: auto; + max-height: 100vh; + scrollbar-width: none; + grid-row-gap: 0.5em; +} + +.menuLogo { + display: grid; + place-items: center; + cursor: pointer; +} + +.menuLogo > h2 { + margin-top: 0; +} + +.menuLogo > img { + width: 50%; + height: auto; + place-self: start center; +} + +.menu > hr { + height: 0; + width: 100%; + border: none; + border-top: 0.3rem dotted black; + margin: 2rem; +} + +.menuOption { + justify-self: start; + display: grid; + grid-template-areas: 'img title' '. subtitle'; + grid-template-columns: auto 1fr; + align-items: center; + grid-column-gap: 1em; + cursor: pointer; + padding: 0.4em 1em; + width: 100%; +} + +.menuOption:hover { + background-color: var(--color-main-base); + border-radius: 1em; +} + +.menuOption > * { + margin: 0; +} + +.menuOption > img { + width: 1.2em; + height: auto; + grid-area: img; +} + +.menuOption > h3 { + grid-area: title; + font-size: 150%; + font-weight: 600; +} + +.menuOption > p { + grid-area: subtitle; +} \ No newline at end of file diff --git a/components/mainmenu.tsx b/components/mainmenu.tsx new file mode 100644 index 0000000..08ff103 --- /dev/null +++ b/components/mainmenu.tsx @@ -0,0 +1,75 @@ +import Link from 'next/link' +import styles from './mainmenu.module.css' + +export default function MainMenu() { + return ( +
+ + +
+ +

Accord's Library

+
+ + + + +
+ + +
+ +

Library

+

Browse all physical and digital media

+
+ + + +
+ +

Hubs

+

Explore all content of a specific game/series

+
+ + + +
+ +

Chronology

+

Follow all events in chronological order

+
+ + +
+ + +
+ +

Archive

+
+ + + +
+ +

News

+
+ + + +
+ +

Gallery

+
+ + + +
+ +

About us

+
+ + +
+ ) +} \ No newline at end of file diff --git a/pages/api/hello.ts b/pages/api/hello.ts index f8bcc7e..aa953fa 100644 --- a/pages/api/hello.ts +++ b/pages/api/hello.ts @@ -9,5 +9,5 @@ export default function handler( req: NextApiRequest, res: NextApiResponse ) { - res.status(200).json({ name: 'John Doe' }) + res.status(200).json({ name: 'John Lenon' }) } diff --git a/pages/index.tsx b/pages/index.tsx index 72a4a59..440b2a9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import type { NextPage } from 'next' import Head from 'next/head' -import Image from 'next/image' import styles from '../styles/Home.module.css' +import MainMenu from '../components/mainmenu' const Home: NextPage = () => { return ( @@ -9,62 +9,17 @@ const Home: NextPage = () => { Create Next App - + + + +
+
-

- Welcome to Next.js! -

-

- Get started by editing{' '} - pages/index.tsx -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
- ) } diff --git a/pages/library.tsx b/pages/library.tsx new file mode 100644 index 0000000..471eede --- /dev/null +++ b/pages/library.tsx @@ -0,0 +1,27 @@ +import type { NextPage } from 'next' +import Head from 'next/head' +import styles from '../styles/Home.module.css' +import MainMenu from '../components/mainmenu' + +const Home: NextPage = () => { + return ( +
+ + Library + + + + + + +
+ +
+ +
+ +
+ ) +} + +export default Home diff --git a/styles/Home.module.css b/styles/Home.module.css index 32a57d5..e6722bb 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,116 +1,6 @@ .container { - padding: 0 2rem; -} - -.main { + display: grid; + grid-template-columns: 20rem 1fr 5fr; min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; } -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/styles/globals.css b/styles/globals.css index e5e2dcc..c007c98 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,9 +1,17 @@ +:root { + --color-main-light: #ffedd8; + --color-main-base: #e6ccb2; + --color-main-dark: #9c6644; + --color-main-black: #1B1811; +} + html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + background-color: var(--color-main-light); } a { @@ -14,3 +22,17 @@ a { * { box-sizing: border-box; } + +button { + border: .1rem solid var(--color-main-dark); + color: var(--color-main-dark); + background: var(--color-main-light); + border-radius: 100vmax; + padding: 0.4em 1em; + cursor: pointer; +} + +button:hover { + background: var(--color-main-dark); + color: var(--color-main-light); +} \ No newline at end of file