Basic first page
This commit is contained in:
parent
6bcac17b4a
commit
6edc566042
GPG key ID:
610ED1098B8F435B
11 changed files with 280 additions and 0 deletions
3
.eslintrc.json
Normal file
3
.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
19
app/globals.css
Normal file
19
app/globals.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
:root {
|
||||||
|
/* --max-width: 1100px; */
|
||||||
|
--border-radius: 12px;
|
||||||
|
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||||
|
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
|
||||||
|
--foreground-rgb: 255, 255, 255;
|
||||||
|
--background-rgb: 10, 10, 10;
|
||||||
|
|
||||||
|
--callout-rgb: 238, 240, 241;
|
||||||
|
--callout-border-rgb: 172, 175, 176;
|
||||||
|
--card-rgb: 180, 185, 188;
|
||||||
|
--card-border-rgb: 131, 134, 135;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(var(--foreground-rgb));
|
||||||
|
background: rgb(var(--background-rgb));
|
||||||
|
}
|
||||||
18
app/layout.tsx
Normal file
18
app/layout.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Noise',
|
||||||
|
description: 'Noise - An audio-visual pitch for a game about sound',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
41
app/page.module.css
Normal file
41
app/page.module.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10vh 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin {
|
||||||
|
margin: 25vh 0;
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: rgba(var(--card-rgb), 0.3);
|
||||||
|
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||||
|
transition: background 200ms, border 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enable hover only on non-touch devices */
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.begin:hover {
|
||||||
|
background: rgba(var(--card-rgb), 0.1);
|
||||||
|
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin:hover span {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
.begin:hover span {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
145
app/page.module.css.old
Normal file
145
app/page.module.css.old
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
display: inherit;
|
||||||
|
justify-content: inherit;
|
||||||
|
align-items: inherit;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
max-width: var(--max-width);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description p {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: rgba(var(--callout-rgb), 0.5);
|
||||||
|
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin {
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: rgba(var(--card-rgb), 0);
|
||||||
|
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||||
|
transition: background 200ms, border 200ms;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin span {
|
||||||
|
display: inline-block;
|
||||||
|
transition: transform 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin p {
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 34ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enable hover only on non-touch devices */
|
||||||
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.begin:hover {
|
||||||
|
background: rgba(var(--card-rgb), 0.1);
|
||||||
|
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin:hover span {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
.begin:hover span {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile and Tablet */
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
.begin {
|
||||||
|
padding: 1rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.begin h2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description a {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description p,
|
||||||
|
.description div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description p {
|
||||||
|
align-items: center;
|
||||||
|
inset: 0 0 auto;
|
||||||
|
padding: 2rem 1rem 1.4rem;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(var(--background-start-rgb), 1),
|
||||||
|
rgba(var(--callout-rgb), 0.5)
|
||||||
|
);
|
||||||
|
background-clip: padding-box;
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description div {
|
||||||
|
align-items: flex-end;
|
||||||
|
pointer-events: none;
|
||||||
|
inset: auto 0 0;
|
||||||
|
padding: 2rem;
|
||||||
|
height: 200px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0%,
|
||||||
|
rgb(var(--background-end-rgb)) 40%
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
16
app/page.tsx
Normal file
16
app/page.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import styles from './page.module.css'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className={styles.main}>
|
||||||
|
<div className={styles.begin}>
|
||||||
|
<h2>Click to begin</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.description}>
|
||||||
|
<p>Noise - An audio-visual pitch for a game about sound</p>
|
||||||
|
<p>By Rory Healy</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
8
next.config.js
Normal file
8
next.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
experimental: {
|
||||||
|
appDir: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
BIN
public/images/arrow_forward.png
Normal file
BIN
public/images/arrow_forward.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 B |
1
public/images/arrow_forward.svg
Normal file
1
public/images/arrow_forward.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 141 B |
1
public/images/arrow_forward_white.svg
Normal file
1
public/images/arrow_forward_white.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 220 B |
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES6",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue