diff --git a/package.json b/package.json index 69634932..929e8710 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ ] }, "dependencies": { + "@next/font": "13.1.6", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf6bdb3e..edb0478a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@commitlint/cli': 17.4.2 '@commitlint/config-conventional': 17.4.2 + '@next/font': 13.1.6 '@types/node': 18.11.18 '@types/react': 18.0.27 '@types/react-dom': 18.0.10 @@ -23,6 +24,7 @@ specifiers: typescript: 4.9.5 dependencies: + '@next/font': 13.1.6 next: 13.1.6_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -322,6 +324,10 @@ packages: glob: 7.1.7 dev: true + /@next/font/13.1.6: + resolution: {integrity: sha512-AITjmeb1RgX1HKMCiA39ztx2mxeAyxl4ljv2UoSBUGAbFFMg8MO7YAvjHCgFhD39hL7YTbFjol04e/BPBH5RzQ==} + dev: false + /@next/swc-android-arm-eabi/13.1.6: resolution: {integrity: sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==} engines: {node: '>= 10'} diff --git a/public/next.svg b/public/next.svg new file mode 100644 index 00000000..5bb00d40 --- /dev/null +++ b/public/next.svg @@ -0,0 +1 @@ + diff --git a/public/thirteen.svg b/public/thirteen.svg new file mode 100644 index 00000000..db65b53b --- /dev/null +++ b/public/thirteen.svg @@ -0,0 +1 @@ + diff --git a/public/vercel.svg b/public/vercel.svg index 7daff190..1aeda7d6 100644 --- a/public/vercel.svg +++ b/public/vercel.svg @@ -1,4 +1 @@ - - - + diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2c1df21c..9f9e7b5e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,6 @@ import type { AppProps } from 'next/app'; import '@/styles/globals.css'; -export default function MyApp({ Component, pageProps }: AppProps) { +export default function App({ Component, pageProps }: AppProps) { return ; } diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 00000000..e1e9cbbb --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from 'next/document'; + +export default function Document() { + return ( + + + +
+ + + + ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6fc30008..fb37be70 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,73 +1,128 @@ import Head from 'next/head'; import Image from 'next/image'; - +import { Inter } from '@next/font/google'; import styles from '@/styles/Home.module.css'; +// Note: The subsets need to use single quotes because the font loader values must be explicitly written literal. +// eslint-disable-next-line @typescript-eslint/quotes +const inter = Inter({ subsets: ['latin'] }); + export default function Home() { return ( -
+ <> TypeScript starter for Next.js + -
-

- Welcome to Next.js! -

+
+

+ Get started by editing  + src/pages/index.tsx +

+ +
-

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

+
+ Next.js Logo +
+ 13 +
+
- - -
+ ); } diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index bd50f42f..27dfff5e 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -1,129 +1,278 @@ -.container { - padding: 0 2rem; -} - .main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-between; align-items: center; + padding: 6rem; + min-height: 100vh; } -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; +.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); } -.footer a { +.description a { display: flex; justify-content: center; align-items: center; - flex-grow: 1; + gap: 0.5rem; } -.title a { - color: #0070f3; - text-decoration: none; +.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); } -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; +.code { + font-weight: 700; + font-family: var(--font-mono); } -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; +.grid { + display: grid; + grid-template-columns: repeat(4, minmax(25%, auto)); + width: var(--max-width); + max-width: 100%; } -.title, -.description { - text-align: center; +.card { + 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; } -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; +.card span { + display: inline-block; + transition: transform 200ms; } -.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; +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; } -.grid { +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +.center { display: flex; + justify-content: center; align-items: center; + position: relative; + padding: 4rem 0; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo, +.thirteen { + position: relative; +} + +.thirteen { + display: flex; justify-content: center; - flex-wrap: wrap; - max-width: 800px; + align-items: center; + width: 75px; + height: 75px; + padding: 25px 10px; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; } -.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; +.thirteen::before, +.thirteen::after { + content: ''; + position: absolute; + z-index: -1; } -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; +/* Conic Gradient Animation */ +.thirteen::before { + animation: 6s rotate linear infinite; + width: 200%; + height: 200%; + background: var(--tile-border); } -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; +/* Inner Square */ +.thirteen::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient( + to bottom right, + rgba(var(--tile-start-rgb), 1), + rgba(var(--tile-end-rgb), 1) + ); + background-clip: content-box; } -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } } -.logo { - height: 1em; - margin-left: 0.5rem; +@media (prefers-reduced-motion) { + .thirteen::before { + animation: none; + } + + .card:hover span { + transform: none; + } } -@media (max-width: 600px) { +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; width: 100%; - flex-direction: column; + } + + .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; + } +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); } } @media (prefers-color-scheme: dark) { - .card, - .footer { - border-color: #222; + .vercelLogo { + filter: invert(1); } - .code { - background: #111; + + .logo, + .thirteen img { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); } - .logo img { - filter: invert(1); +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); } } diff --git a/src/styles/globals.css b/src/styles/globals.css index 4f184216..d4f491e1 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,9 +1,98 @@ -html, -body { +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + box-sizing: border-box; padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); } a { @@ -11,16 +100,8 @@ a { text-decoration: none; } -* { - box-sizing: border-box; -} - @media (prefers-color-scheme: dark) { html { color-scheme: dark; } - body { - color: white; - background: black; - } } diff --git a/tsconfig.json b/tsconfig.json index 6afcc31d..a555972b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "target": "es2015", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true,