mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
P41T
8e8dd0c8c2
What? This PR updates the dependency "prettier" from version 3.2.5 to version 3.6.2. It also modifies other scripts by using the pnpm run prettier-fix after updating the dependency. Why? This is updated to benefit from the changes and fixes introduced in the newer versions of prettier, from versions 3.3 to 3.6. How? The package has been updated using pnpm install prettier@latest, and the files other than package.json and pnpm-lock.json have been modified using the script pnpm run prettier-fix. This PR does only have formatting changes introduced by the updated dependency This PR is the same as #82719 , with fixes implemented to prevent prettier to modifiy symlink files
175 lines
2.9 KiB
CSS
175 lines
2.9 KiB
CSS
html {
|
|
--system-fonts:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
|
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
--xata-accent: rgb(255, 0, 117);
|
|
--xata-accent-faded: rgba(255, 0, 117, 0.4);
|
|
--transition-duration: 350ms;
|
|
--background-color: #000;
|
|
--text-color: #fff;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
font-family: "Inter", var(--system-fonts);
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
h1 {
|
|
font-family: monospace;
|
|
font-size: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
width: 300px;
|
|
}
|
|
|
|
a,
|
|
li {
|
|
transition: all var(--transition-duration) ease-in-out;
|
|
}
|
|
|
|
a {
|
|
color: var(--text-color);
|
|
font-size: 2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: underline dotted;
|
|
color: var(--xata-accent);
|
|
}
|
|
|
|
li a[target="_blank"]::after {
|
|
content: "↗";
|
|
position: relative;
|
|
top: -1em;
|
|
left: 0.5em;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-color);
|
|
font-size: 1.2rem;
|
|
line-height: 2;
|
|
}
|
|
|
|
main {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
header {
|
|
height: clamp(4rem, 40rem, 55vh);
|
|
}
|
|
footer {
|
|
border-top: dashed 2px rgba(255, 255, 255, 0.4);
|
|
height: clamp(2rem, 5rem, 10vh);
|
|
}
|
|
|
|
section {
|
|
display: grid;
|
|
place-items: center;
|
|
max-width: 70vw;
|
|
padding: 5rem;
|
|
grid-gap: 2rem;
|
|
margin: 5rem auto;
|
|
border-radius: 30px/15px;
|
|
border: dashed 2px var(--xata-accent);
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
line-height: 2;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
padding: 1rem 2rem;
|
|
border: solid 2px var(--xata-accent);
|
|
color: var(--xata-accent);
|
|
font-size: 2rem;
|
|
border-radius: 15px;
|
|
transition: all var(--transition-duration) ease-in-out;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover,
|
|
button:focus {
|
|
border-color: transparent;
|
|
color: var(--background-color);
|
|
background-color: var(--xata-accent);
|
|
}
|
|
|
|
li button {
|
|
position: absolute;
|
|
padding: 1rem 2rem;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 1.2rem;
|
|
color: transparent;
|
|
text-shadow: 0 0 0 var(--text-color);
|
|
border: none;
|
|
}
|
|
|
|
li button:hover,
|
|
li button:focus {
|
|
text-shadow: 0 0 0 var(--xata-accent);
|
|
color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
|
|
ul {
|
|
max-width: 120ch;
|
|
margin: 0 auto;
|
|
padding: 5rem 2rem;
|
|
display: grid;
|
|
grid-gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
padding: 1rem 2rem;
|
|
border: solid 2px var(--text-color);
|
|
border-radius: 10px/5px;
|
|
}
|
|
|
|
object {
|
|
position: relative;
|
|
top: 10px;
|
|
width: 2rem;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
@media (min-width: 700px) {
|
|
ul {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
html {
|
|
--background-color: #fff;
|
|
--text-color: #000;
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
html {
|
|
--transition-duration: 0;
|
|
}
|
|
}
|
|
}
|