Click to begin
+Noise - An audio-visual pitch for a game about sound
+By Rory Healy
+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 ( +Noise - An audio-visual pitch for a game about sound
+By Rory Healy
+