diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..062cce0 --- /dev/null +++ b/app/globals.css @@ -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)); +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..be2f7f1 --- /dev/null +++ b/app/layout.tsx @@ -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 ( + + {children} + + ) +} diff --git a/app/page.module.css b/app/page.module.css new file mode 100644 index 0000000..1149d8c --- /dev/null +++ b/app/page.module.css @@ -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; + } +} diff --git a/app/page.module.css.old b/app/page.module.css.old new file mode 100644 index 0000000..6e399a6 --- /dev/null +++ b/app/page.module.css.old @@ -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); + } +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..1683bae --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,16 @@ +import styles from './page.module.css' + +export default function Home() { + return ( +
+
+

Click to begin

+
+ +
+

Noise - An audio-visual pitch for a game about sound

+

By Rory Healy

+
+
+ ) +} diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..dafb0c8 --- /dev/null +++ b/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + appDir: true, + }, +} + +module.exports = nextConfig diff --git a/public/images/arrow_forward.png b/public/images/arrow_forward.png new file mode 100644 index 0000000..d1fbb62 Binary files /dev/null and b/public/images/arrow_forward.png differ diff --git a/public/images/arrow_forward.svg b/public/images/arrow_forward.svg new file mode 100644 index 0000000..98c5f2c --- /dev/null +++ b/public/images/arrow_forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/arrow_forward_white.svg b/public/images/arrow_forward_white.svg new file mode 100644 index 0000000..1547a57 --- /dev/null +++ b/public/images/arrow_forward_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..001a5b5 --- /dev/null +++ b/tsconfig.json @@ -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"] +}