From 6edc5660424d33d8568ee6cbc48caadeea3fab73 Mon Sep 17 00:00:00 2001 From: Rory Healy Date: Sun, 16 Apr 2023 19:37:27 +1000 Subject: [PATCH] Basic first page --- .eslintrc.json | 3 + app/globals.css | 19 ++++ app/layout.tsx | 18 ++++ app/page.module.css | 41 ++++++++ app/page.module.css.old | 145 ++++++++++++++++++++++++++ app/page.tsx | 16 +++ next.config.js | 8 ++ public/images/arrow_forward.png | Bin 0 -> 391 bytes public/images/arrow_forward.svg | 1 + public/images/arrow_forward_white.svg | 1 + tsconfig.json | 28 +++++ 11 files changed, 280 insertions(+) create mode 100644 .eslintrc.json create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.module.css create mode 100644 app/page.module.css.old create mode 100644 app/page.tsx create mode 100644 next.config.js create mode 100644 public/images/arrow_forward.png create mode 100644 public/images/arrow_forward.svg create mode 100644 public/images/arrow_forward_white.svg create mode 100644 tsconfig.json 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 0000000000000000000000000000000000000000..d1fbb62666136b2e5a858e8754ec23d036b2e6b7 GIT binary patch literal 391 zcmV;20eJq2P)Px#1am@3R0s$N2z&@+hyVZqF-b&0RA@u(*x?DnKnw-ob^|xj4ID+CKu2&BbrM%_ zBh3SaQaF2U@{%j$KoGQd?@R7SwC`5F`jzMJ5)j?N>_B!vS%JJl69qiV=X-gbl!Y!n z&g=lf-@Yf`SqLTop$~)7Q4mZ3veOZ403G20pd!2gG=wLBg75~IBO(B%h$w&=A`)PN zhz6(;EdW%A8o*Ufc(bO-!M+!HznMEb)c`!gm+CV)0JaWzhzw(San%5Dh1d&M=R7)O zGCaOt1Mmp{ltXrdgQ~)}06^szhmQuR!$$&4!bbtj!bbp1!+QhF!+QcK;k^K~@E!na zcs76@o(*`(0ox_x!JOHJISXNm{QbFGJ=@F)&+Y*B$Bz^YX~0kxvjddC<4qIbQszI0 lWCyYX$_nHaQWjAC_y>_~KQWL%#XSH3002ovPDHLkV1l#;mtg<^ literal 0 HcmV?d00001 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"] +}