Date: Tue, 29 Nov 2022 15:05:30 -0800
Subject: [PATCH 13/19] update copy to Templates
---
packages/create-next-app/templates/app/js/app/page.jsx | 2 +-
packages/create-next-app/templates/app/ts/app/page.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/page.jsx b/packages/create-next-app/templates/app/js/app/page.jsx
index 098f59bbd881666..0cb379e1bff0259 100644
--- a/packages/create-next-app/templates/app/js/app/page.jsx
+++ b/packages/create-next-app/templates/app/js/app/page.jsx
@@ -83,7 +83,7 @@ export default function Home() {
rel="noopener noreferrer"
>
- Examples ->
+ Templates ->
Explore the Next.js 13 playground.
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index 818c9b6f6d7abf6..f03e6c2ae8c049d 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -83,7 +83,7 @@ export default function Home() {
rel="noopener noreferrer"
>
- Examples ->
+ Templates ->
Explore the Next.js 13 playground.
From f25f18711143c31e6241bdfdc617f335dc0d16c8 Mon Sep 17 00:00:00 2001
From: jueungrace
Date: Tue, 29 Nov 2022 15:07:28 -0800
Subject: [PATCH 14/19] Update classname to main
---
packages/create-next-app/templates/app/js/app/page.jsx | 2 +-
packages/create-next-app/templates/app/js/app/page.module.css | 2 +-
packages/create-next-app/templates/app/ts/app/page.module.css | 2 +-
packages/create-next-app/templates/app/ts/app/page.tsx | 2 +-
packages/create-next-app/templates/default/js/pages/index.js | 2 +-
.../create-next-app/templates/default/js/styles/Home.module.css | 2 +-
packages/create-next-app/templates/default/ts/pages/index.tsx | 2 +-
.../create-next-app/templates/default/ts/styles/Home.module.css | 2 +-
8 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/page.jsx b/packages/create-next-app/templates/app/js/app/page.jsx
index 0cb379e1bff0259..4ae614c73e03e8e 100644
--- a/packages/create-next-app/templates/app/js/app/page.jsx
+++ b/packages/create-next-app/templates/app/js/app/page.jsx
@@ -21,7 +21,7 @@ const spaceMono = Space_Mono({
export default function Home() {
return (
-
+
Get started by editing
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index dbf5161c9b98fc2..17c7e58b538fbdc 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -1,4 +1,4 @@
-.content {
+.main {
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index dbf5161c9b98fc2..17c7e58b538fbdc 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -1,4 +1,4 @@
-.content {
+.main {
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index f03e6c2ae8c049d..5cc7fc6d8e23427 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -21,7 +21,7 @@ const spaceMono = Space_Mono({
export default function Home() {
return (
-
+
Get started by editing
diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js
index a84176dd7da5caa..02befd86425eb7c 100644
--- a/packages/create-next-app/templates/default/js/pages/index.js
+++ b/packages/create-next-app/templates/default/js/pages/index.js
@@ -29,7 +29,7 @@ export default function Home() {
-
+
Get started by editing
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index 49ac5abb866522d..888c267cc4d30eb 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -1,4 +1,4 @@
-.content {
+.main {
display: flex;
flex-direction: column;
justify-content: space-between;
diff --git a/packages/create-next-app/templates/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx
index b691e7a537cb0a4..152a3bf906a5684 100644
--- a/packages/create-next-app/templates/default/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/index.tsx
@@ -29,7 +29,7 @@ export default function Home() {
-
+
Get started by editing
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index 49ac5abb866522d..888c267cc4d30eb 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -1,4 +1,4 @@
-.content {
+.main {
display: flex;
flex-direction: column;
justify-content: space-between;
From 1a2d6412de11655a799c123c1e392981921989a5 Mon Sep 17 00:00:00 2001
From: jueungrace
Date: Tue, 29 Nov 2022 15:35:03 -0800
Subject: [PATCH 15/19] combine reused styles
---
.../templates/app/js/app/page.module.css | 37 ++++++++++---------
.../templates/app/ts/app/page.module.css | 37 ++++++++++---------
.../default/js/styles/Home.module.css | 37 ++++++++++---------
.../default/ts/styles/Home.module.css | 37 ++++++++++---------
4 files changed, 76 insertions(+), 72 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index 17c7e58b538fbdc..af018d2f5778a27 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -85,12 +85,10 @@
border-radius: 50%;
width: 480px;
height: 360px;
- left: 50%;
margin-left: -400px;
}
.center::after {
- left: 50%;
background: var(--primary-glow);
width: 240px;
height: 180px;
@@ -100,6 +98,7 @@
.center::before,
.center::after {
content: '';
+ left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
@@ -124,12 +123,16 @@
box-shadow: 0px 2px 8px -1px #0000001a;
}
-/* Conic Gradient Animation */
-.thirteen::before {
+.thirteen::before,
+.thirteen::after {
content: '';
position: absolute;
- animation: 6s rotate linear infinite;
z-index: -1;
+}
+
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
@@ -137,8 +140,6 @@
/* Inner Square */
.thirteen::after {
- content: '';
- position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
@@ -148,7 +149,6 @@
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
- z-index: -1;
}
/* Enable hover only on non-touch devices */
@@ -203,20 +203,25 @@
height: 300px;
}
- .description p,
- .description a {
+ .description {
font-size: 0.8rem;
+ }
+
+ .description a {
padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
}
.description p {
- position: fixed;
- display: flex;
align-items: center;
- justify-content: center;
inset: 0 0 auto;
- width: 100%;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
@@ -231,15 +236,11 @@
}
.description div {
- display: flex;
align-items: flex-end;
- justify-content: center;
- position: fixed;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
- width: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index 17c7e58b538fbdc..af018d2f5778a27 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -85,12 +85,10 @@
border-radius: 50%;
width: 480px;
height: 360px;
- left: 50%;
margin-left: -400px;
}
.center::after {
- left: 50%;
background: var(--primary-glow);
width: 240px;
height: 180px;
@@ -100,6 +98,7 @@
.center::before,
.center::after {
content: '';
+ left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
@@ -124,12 +123,16 @@
box-shadow: 0px 2px 8px -1px #0000001a;
}
-/* Conic Gradient Animation */
-.thirteen::before {
+.thirteen::before,
+.thirteen::after {
content: '';
position: absolute;
- animation: 6s rotate linear infinite;
z-index: -1;
+}
+
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
@@ -137,8 +140,6 @@
/* Inner Square */
.thirteen::after {
- content: '';
- position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
@@ -148,7 +149,6 @@
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
- z-index: -1;
}
/* Enable hover only on non-touch devices */
@@ -203,20 +203,25 @@
height: 300px;
}
- .description p,
- .description a {
+ .description {
font-size: 0.8rem;
+ }
+
+ .description a {
padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
}
.description p {
- position: fixed;
- display: flex;
align-items: center;
- justify-content: center;
inset: 0 0 auto;
- width: 100%;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
@@ -231,15 +236,11 @@
}
.description div {
- display: flex;
align-items: flex-end;
- justify-content: center;
- position: fixed;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
- width: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index 888c267cc4d30eb..6a830b87d068fd1 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -85,12 +85,10 @@
border-radius: 50%;
width: 480px;
height: 360px;
- left: 50%;
margin-left: -400px;
}
.center::after {
- left: 50%;
background: var(--primary-glow);
width: 240px;
height: 180px;
@@ -100,6 +98,7 @@
.center::before,
.center::after {
content: '';
+ left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
@@ -124,12 +123,16 @@
box-shadow: 0px 2px 8px -1px #0000001a;
}
-/* Conic Gradient Animation */
-.thirteen::before {
+.thirteen::before,
+.thirteen::after {
content: '';
position: absolute;
- animation: 6s rotate linear infinite;
z-index: -1;
+}
+
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
@@ -137,8 +140,6 @@
/* Inner Square */
.thirteen::after {
- content: '';
- position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
@@ -148,7 +149,6 @@
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
- z-index: -1;
}
/* Enable hover only on non-touch devices */
@@ -203,20 +203,25 @@
height: 300px;
}
- .description p,
- .description a {
+ .description {
font-size: 0.8rem;
+ }
+
+ .description a {
padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
}
.description p {
- position: fixed;
- display: flex;
align-items: center;
- justify-content: center;
inset: 0 0 auto;
- width: 100%;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
@@ -231,15 +236,11 @@
}
.description div {
- display: flex;
align-items: flex-end;
- justify-content: center;
- position: fixed;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
- width: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index 888c267cc4d30eb..6a830b87d068fd1 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -85,12 +85,10 @@
border-radius: 50%;
width: 480px;
height: 360px;
- left: 50%;
margin-left: -400px;
}
.center::after {
- left: 50%;
background: var(--primary-glow);
width: 240px;
height: 180px;
@@ -100,6 +98,7 @@
.center::before,
.center::after {
content: '';
+ left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
@@ -124,12 +123,16 @@
box-shadow: 0px 2px 8px -1px #0000001a;
}
-/* Conic Gradient Animation */
-.thirteen::before {
+.thirteen::before,
+.thirteen::after {
content: '';
position: absolute;
- animation: 6s rotate linear infinite;
z-index: -1;
+}
+
+/* Conic Gradient Animation */
+.thirteen::before {
+ animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
@@ -137,8 +140,6 @@
/* Inner Square */
.thirteen::after {
- content: '';
- position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
@@ -148,7 +149,6 @@
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
- z-index: -1;
}
/* Enable hover only on non-touch devices */
@@ -203,20 +203,25 @@
height: 300px;
}
- .description p,
- .description a {
+ .description {
font-size: 0.8rem;
+ }
+
+ .description a {
padding: 1rem;
+ }
+
+ .description p,
+ .description div {
+ display: flex;
+ justify-content: center;
+ position: fixed;
width: 100%;
}
.description p {
- position: fixed;
- display: flex;
align-items: center;
- justify-content: center;
inset: 0 0 auto;
- width: 100%;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
@@ -231,15 +236,11 @@
}
.description div {
- display: flex;
align-items: flex-end;
- justify-content: center;
- position: fixed;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
- width: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
From 549ec85c7f254cb9e2adf273f4b483b7213ea98e Mon Sep 17 00:00:00 2001
From: jueungrace
Date: Wed, 30 Nov 2022 09:37:13 -0800
Subject: [PATCH 16/19] Update appdir templates link to marketplace
---
packages/create-next-app/templates/app/js/app/page.jsx | 2 +-
packages/create-next-app/templates/app/ts/app/page.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/page.jsx b/packages/create-next-app/templates/app/js/app/page.jsx
index 4ae614c73e03e8e..f2547955ad6d42c 100644
--- a/packages/create-next-app/templates/app/js/app/page.jsx
+++ b/packages/create-next-app/templates/app/js/app/page.jsx
@@ -77,7 +77,7 @@ export default function Home() {
Date: Wed, 30 Nov 2022 15:13:06 -0800
Subject: [PATCH 17/19] Reduce font use in /pages
---
.../templates/default/js/pages/index.js | 39 ++++++-------------
.../default/js/styles/Home.module.css | 14 ++++---
.../templates/default/js/styles/globals.css | 3 ++
.../templates/default/ts/pages/index.tsx | 39 ++++++-------------
.../default/ts/styles/Home.module.css | 14 ++++---
.../templates/default/ts/styles/globals.css | 3 ++
6 files changed, 46 insertions(+), 66 deletions(-)
diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js
index 02befd86425eb7c..932452dde70c43b 100644
--- a/packages/create-next-app/templates/default/js/pages/index.js
+++ b/packages/create-next-app/templates/default/js/pages/index.js
@@ -1,24 +1,9 @@
import Head from 'next/head'
import Image from 'next/image'
-import { Inter, Space_Grotesk, Space_Mono } from '@next/font/google'
+import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
-const inter = Inter({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceGrotesk = Space_Grotesk({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceMono = Space_Mono({
- weight: ['400', '700'],
- subsets: ['latin'],
- variable: '--font-mono',
- fallback: ['ui-monospace', 'monospace'],
-})
+const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
@@ -31,13 +16,12 @@ export default function Home() {
-
+
Get started by editing
pages/index.js
Docs ->
-
- Find in-depth information about Next.js features and API.
+
+ Find in-depth information about Next.js features and API.
@@ -99,8 +83,8 @@ export default function Home() {
Learn ->
-
- Learn about Next.js in an interactive course with quizzes!
+
+ Learn about Next.js in an interactive course with quizzes!
@@ -113,8 +97,8 @@ export default function Home() {
Templates ->
-
- Discover and deploy boilerplate example Next.js projects.
+
+ Discover and deploy boilerplate example Next.js projects.
@@ -127,8 +111,9 @@ export default function Home() {
Deploy ->
-
- Instantly deploy your Next.js site to a shareable URL with Vercel.
+
+ Instantly deploy your Next.js site to a shareable URL
+ with Vercel.
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index 6a830b87d068fd1..b868a36feeec1bc 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -11,10 +11,11 @@
display: inherit;
justify-content: inherit;
align-items: inherit;
- font-size: 0.9rem;
+ font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
+ font-family: var(--font-mono);
}
.description a {
@@ -27,7 +28,7 @@
.description p {
position: relative;
margin: 0;
- padding: 0.8rem 1rem 0.9rem;
+ 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);
@@ -66,10 +67,11 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.25;
- max-width: 32ch;
- letter-spacing: -0.01em;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ max-width: 30ch;
+ word-spacing: -0.1rem;
+ font-family: var(--font-mono);
}
.center {
diff --git a/packages/create-next-app/templates/default/js/styles/globals.css b/packages/create-next-app/templates/default/js/styles/globals.css
index c183def8b534c5a..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/default/js/styles/globals.css
+++ b/packages/create-next-app/templates/default/js/styles/globals.css
@@ -1,6 +1,9 @@
: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;
diff --git a/packages/create-next-app/templates/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx
index 152a3bf906a5684..ba681c5734ec9ca 100644
--- a/packages/create-next-app/templates/default/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/index.tsx
@@ -1,24 +1,9 @@
import Head from 'next/head'
import Image from 'next/image'
-import { Inter, Space_Grotesk, Space_Mono } from '@next/font/google'
+import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
-const inter = Inter({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceGrotesk = Space_Grotesk({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceMono = Space_Mono({
- weight: ['400', '700'],
- subsets: ['latin'],
- variable: '--font-mono',
- fallback: ['ui-monospace', 'monospace'],
-})
+const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
@@ -31,13 +16,12 @@ export default function Home() {
-
+
Get started by editing
pages/index.tsx
Docs ->
-
- Find in-depth information about Next.js features and API.
+
+ Find in-depth information about Next.js features and API.
@@ -99,8 +83,8 @@ export default function Home() {
Learn ->
-
- Learn about Next.js in an interactive course with quizzes!
+
+ Learn about Next.js in an interactive course with quizzes!
@@ -113,8 +97,8 @@ export default function Home() {
Templates ->
-
- Discover and deploy boilerplate example Next.js projects.
+
+ Discover and deploy boilerplate example Next.js projects.
@@ -127,8 +111,9 @@ export default function Home() {
Deploy ->
-
- Instantly deploy your Next.js site to a shareable URL with Vercel.
+
+ Instantly deploy your Next.js site to a shareable URL
+ with Vercel.
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index 6a830b87d068fd1..b868a36feeec1bc 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -11,10 +11,11 @@
display: inherit;
justify-content: inherit;
align-items: inherit;
- font-size: 0.9rem;
+ font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
+ font-family: var(--font-mono);
}
.description a {
@@ -27,7 +28,7 @@
.description p {
position: relative;
margin: 0;
- padding: 0.8rem 1rem 0.9rem;
+ 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);
@@ -66,10 +67,11 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.25;
- max-width: 32ch;
- letter-spacing: -0.01em;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ max-width: 30ch;
+ word-spacing: -0.1rem;
+ font-family: var(--font-mono);
}
.center {
diff --git a/packages/create-next-app/templates/default/ts/styles/globals.css b/packages/create-next-app/templates/default/ts/styles/globals.css
index c183def8b534c5a..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/default/ts/styles/globals.css
+++ b/packages/create-next-app/templates/default/ts/styles/globals.css
@@ -1,6 +1,9 @@
: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;
From 919a1e9d39bcc9c735a56d7ec40ed0af04666776 Mon Sep 17 00:00:00 2001
From: jueungrace
Date: Wed, 30 Nov 2022 15:21:09 -0800
Subject: [PATCH 18/19] Appdir remove custom mono fonts
---
.../templates/app/js/app/globals.css | 3 ++
.../templates/app/js/app/page.jsx | 34 ++++---------------
.../templates/app/js/app/page.module.css | 13 +++----
.../templates/app/ts/app/globals.css | 3 ++
.../templates/app/ts/app/page.module.css | 13 +++----
.../templates/app/ts/app/page.tsx | 34 ++++---------------
6 files changed, 34 insertions(+), 66 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/globals.css b/packages/create-next-app/templates/app/js/app/globals.css
index c183def8b534c5a..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/app/js/app/globals.css
+++ b/packages/create-next-app/templates/app/js/app/globals.css
@@ -1,6 +1,9 @@
: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;
diff --git a/packages/create-next-app/templates/app/js/app/page.jsx b/packages/create-next-app/templates/app/js/app/page.jsx
index f2547955ad6d42c..99132270a879ece 100644
--- a/packages/create-next-app/templates/app/js/app/page.jsx
+++ b/packages/create-next-app/templates/app/js/app/page.jsx
@@ -1,35 +1,19 @@
import Image from 'next/image'
-import { Inter, Space_Grotesk, Space_Mono } from '@next/font/google'
+import { Inter } from '@next/font/google'
import styles from './page.module.css'
-const inter = Inter({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceGrotesk = Space_Grotesk({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceMono = Space_Mono({
- weight: ['400', '700'],
- subsets: ['latin'],
- variable: '--font-mono',
- fallback: ['ui-monospace', 'monospace'],
-})
+const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
-
+
Get started by editing
app/page.jsx
Docs ->
-
- Find in-depth information about Next.js features and API.
-
+ Find in-depth information about Next.js features and API.
Templates ->
-
- Explore the Next.js 13 playground.
-
+ Explore the Next.js 13 playground.
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL with Vercel.
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index af018d2f5778a27..c20cf88d360e271 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -11,10 +11,11 @@
display: inherit;
justify-content: inherit;
align-items: inherit;
- font-size: 0.9rem;
+ font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
+ font-family: var(--font-mono);
}
.description a {
@@ -27,7 +28,7 @@
.description p {
position: relative;
margin: 0;
- padding: 0.8rem 1rem 0.9rem;
+ 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);
@@ -66,10 +67,10 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.25;
- max-width: 32ch;
- letter-spacing: -0.01em;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ word-spacing: -0.1rem;
+ font-family: var(--font-mono);
}
.center {
diff --git a/packages/create-next-app/templates/app/ts/app/globals.css b/packages/create-next-app/templates/app/ts/app/globals.css
index c183def8b534c5a..3a54ccd80be4277 100644
--- a/packages/create-next-app/templates/app/ts/app/globals.css
+++ b/packages/create-next-app/templates/app/ts/app/globals.css
@@ -1,6 +1,9 @@
: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;
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index af018d2f5778a27..c20cf88d360e271 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -11,10 +11,11 @@
display: inherit;
justify-content: inherit;
align-items: inherit;
- font-size: 0.9rem;
+ font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
+ font-family: var(--font-mono);
}
.description a {
@@ -27,7 +28,7 @@
.description p {
position: relative;
margin: 0;
- padding: 0.8rem 1rem 0.9rem;
+ 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);
@@ -66,10 +67,10 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.25;
- max-width: 32ch;
- letter-spacing: -0.01em;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ word-spacing: -0.1rem;
+ font-family: var(--font-mono);
}
.center {
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index 08677612dcec63a..df74c142dd2de7d 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -1,35 +1,19 @@
import Image from 'next/image'
-import { Inter, Space_Grotesk, Space_Mono } from '@next/font/google'
+import { Inter } from '@next/font/google'
import styles from './page.module.css'
-const inter = Inter({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceGrotesk = Space_Grotesk({
- subsets: ['latin'],
- fallback: ['system-ui', '-apple-system', 'Arial', 'sans-serif'],
-})
-
-const spaceMono = Space_Mono({
- weight: ['400', '700'],
- subsets: ['latin'],
- variable: '--font-mono',
- fallback: ['ui-monospace', 'monospace'],
-})
+const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
-
+
Get started by editing
app/page.tsx
Docs ->
-
- Find in-depth information about Next.js features and API.
-
+ Find in-depth information about Next.js features and API.
Templates ->
-
- Explore the Next.js 13 playground.
-
+ Explore the Next.js 13 playground.
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL with Vercel.
From 7681c0bb9cdd82246e74bdca48e1123720d6c76e Mon Sep 17 00:00:00 2001
From: jueungrace
Date: Wed, 30 Nov 2022 16:38:51 -0800
Subject: [PATCH 19/19] Change p font to Inter
---
packages/create-next-app/templates/app/js/app/page.jsx | 8 +++++---
.../create-next-app/templates/app/js/app/page.module.css | 5 ++---
.../create-next-app/templates/app/ts/app/page.module.css | 5 ++---
packages/create-next-app/templates/app/ts/app/page.tsx | 8 +++++---
.../create-next-app/templates/default/js/pages/index.js | 8 ++++----
.../templates/default/js/styles/Home.module.css | 4 +---
.../create-next-app/templates/default/ts/pages/index.tsx | 8 ++++----
.../templates/default/ts/styles/Home.module.css | 4 +---
8 files changed, 24 insertions(+), 26 deletions(-)
diff --git a/packages/create-next-app/templates/app/js/app/page.jsx b/packages/create-next-app/templates/app/js/app/page.jsx
index 99132270a879ece..ca2f14fe4230be9 100644
--- a/packages/create-next-app/templates/app/js/app/page.jsx
+++ b/packages/create-next-app/templates/app/js/app/page.jsx
@@ -55,7 +55,9 @@ export default function Home() {
Docs ->
- Find in-depth information about Next.js features and API.
+
+ Find in-depth information about Next.js features and API.
+
Templates ->
- Explore the Next.js 13 playground.
+ Explore the Next.js 13 playground.
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL with Vercel.
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index c20cf88d360e271..4732b55fdc23708 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -67,10 +67,9 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.8rem;
+ font-size: 0.9rem;
line-height: 1.5;
- word-spacing: -0.1rem;
- font-family: var(--font-mono);
+ max-width: 34ch;
}
.center {
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index c20cf88d360e271..4732b55fdc23708 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -67,10 +67,9 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.8rem;
+ font-size: 0.9rem;
line-height: 1.5;
- word-spacing: -0.1rem;
- font-family: var(--font-mono);
+ max-width: 34ch;
}
.center {
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index df74c142dd2de7d..47fcc959cf52b13 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -55,7 +55,9 @@ export default function Home() {
Docs ->
- Find in-depth information about Next.js features and API.
+
+ Find in-depth information about Next.js features and API.
+
Templates ->
- Explore the Next.js 13 playground.
+ Explore the Next.js 13 playground.
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL with Vercel.
diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js
index 932452dde70c43b..dc5a1cce79a7da7 100644
--- a/packages/create-next-app/templates/default/js/pages/index.js
+++ b/packages/create-next-app/templates/default/js/pages/index.js
@@ -69,7 +69,7 @@ export default function Home() {
Docs ->
-
+
Find in-depth information about Next.js features and API.
@@ -83,7 +83,7 @@ export default function Home() {
Learn ->
-
+
Learn about Next.js in an interactive course with quizzes!
@@ -97,7 +97,7 @@ export default function Home() {
Templates ->
-
+
Discover and deploy boilerplate example Next.js projects.
@@ -111,7 +111,7 @@ export default function Home() {
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL
with Vercel.
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index b868a36feeec1bc..27dfff5ec4cf882 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -67,11 +67,9 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.8rem;
+ font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
- word-spacing: -0.1rem;
- font-family: var(--font-mono);
}
.center {
diff --git a/packages/create-next-app/templates/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx
index ba681c5734ec9ca..c08b1b34a0f94ac 100644
--- a/packages/create-next-app/templates/default/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/index.tsx
@@ -69,7 +69,7 @@ export default function Home() {
Docs ->
-
+
Find in-depth information about Next.js features and API.
@@ -83,7 +83,7 @@ export default function Home() {
Learn ->
-
+
Learn about Next.js in an interactive course with quizzes!
@@ -97,7 +97,7 @@ export default function Home() {
Templates ->
-
+
Discover and deploy boilerplate example Next.js projects.
@@ -111,7 +111,7 @@ export default function Home() {
Deploy ->
-
+
Instantly deploy your Next.js site to a shareable URL
with Vercel.
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index b868a36feeec1bc..27dfff5ec4cf882 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -67,11 +67,9 @@
.card p {
margin: 0;
opacity: 0.6;
- font-size: 0.8rem;
+ font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
- word-spacing: -0.1rem;
- font-family: var(--font-mono);
}
.center {