mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
815c256681
<!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation or adding/fixing Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> Fixed landing page responsiveness for smaller screens Sign in, Sign up, and User profile components centered on page Fixed demo URL in readme Added redirect to landing page after signout @perkinsjr --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
239 lines
3.5 KiB
CSS
239 lines
3.5 KiB
CSS
.container {
|
|
min-height: calc(100vh - 64px);
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 90vw;
|
|
margin: auto;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
max-width: 540px;
|
|
padding-top: 2rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.footer {
|
|
max-width: 540px;
|
|
color: #808080;
|
|
margin: 4em 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer img {
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.footer a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.title a {
|
|
color: #0070f3;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
line-height: 35px;
|
|
}
|
|
|
|
.description {
|
|
margin-top: 0.5rem;
|
|
color: #808080;
|
|
}
|
|
|
|
.title,
|
|
.description {
|
|
text-align: center;
|
|
}
|
|
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
|
|
.cards {
|
|
margin: 0;
|
|
}
|
|
|
|
.card {
|
|
min-height: 135px;
|
|
border: 2px solid #fff;
|
|
border-radius: 0.5em;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.card:empty {
|
|
padding: 2em;
|
|
background-image: radial-gradient(
|
|
circle 14px at 46px 46px,
|
|
#f2f2f2 99%,
|
|
transparent 0
|
|
),
|
|
linear-gradient(
|
|
100deg,
|
|
rgba(255, 255, 255, 0),
|
|
rgba(255, 255, 255, 0.5) 50%,
|
|
rgba(255, 255, 255, 0) 80%
|
|
),
|
|
linear-gradient(#f2f2f2 16px, transparent 0),
|
|
linear-gradient(#f2f2f2 16px, transparent 0),
|
|
linear-gradient(#f2f2f2 16px, transparent 0);
|
|
|
|
background-repeat: repeat-y;
|
|
|
|
background-size: 100px 200px, /* circle */ 50px 200px,
|
|
/* highlight */ 150px 200px, 350px 200px, 200px 200px;
|
|
|
|
background-position: 0 0, /* circle */ 0 0, /* highlight */ 70px 36px,
|
|
70px 58px, 70px 80px;
|
|
|
|
animation: shine 1s infinite;
|
|
}
|
|
|
|
@keyframes shine {
|
|
to {
|
|
background-position: 0 0, 100% 0, 70px 36px, 70px 58px, 70px 80px;
|
|
}
|
|
}
|
|
|
|
.card h3 {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.card p {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.25;
|
|
color: #808080;
|
|
}
|
|
|
|
.cardContent {
|
|
background: transparent;
|
|
border: none;
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr;
|
|
gap: 1em;
|
|
padding: 1.5em 1em;
|
|
text-align: left;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cardContent img {
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.logo {
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 3.5rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.link {
|
|
color: #335bf1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.main {
|
|
padding-top: 4.5rem;
|
|
}
|
|
|
|
.title {
|
|
line-height: 50px;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.title a:hover,
|
|
.title a:focus,
|
|
.title a:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cards {
|
|
margin: 4rem 0;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card:hover,
|
|
.card:focus,
|
|
.card:active {
|
|
border-color: #f2f2f2;
|
|
}
|
|
|
|
.card:hover .arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.cardContent {
|
|
grid-template-columns: 24px 1fr 42px;
|
|
padding: 2em;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.links {
|
|
padding-left: 28px;
|
|
flex-direction: row;
|
|
height: inherit;
|
|
}
|
|
|
|
.link {
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.link:hover {
|
|
background: url(/icons/external-link.svg) no-repeat right;
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.linkText:hover {
|
|
border-bottom: 2px solid #335bf1;
|
|
}
|
|
}
|
|
|
|
.backend {
|
|
margin-bottom: 4rem;
|
|
}
|
|
.backend h2 {
|
|
text-align: center;
|
|
}
|
|
.backend h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
.backend h4 em {
|
|
font-weight: normal;
|
|
margin-left: 0.5rem;
|
|
}
|
|
.backend pre {
|
|
font-size: 80%;
|
|
border-radius: 0.5rem;
|
|
}
|