mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
feat: new design welcome template (#178)
This commit is contained in:
Florent Delerue
GitHub
parent
8714023a67
commit
09186ffc39
@ -2,8 +2,8 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ messages.loading }} | {{ messages.appName }}</title>
|
<title>{{ messages.loading }} | {{ messages.appName }}</title>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8" />
|
||||||
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
|
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
|
||||||
<script type="module" src="/styles.ts"></script>
|
<script type="module" src="/styles.ts"></script>
|
||||||
<style>
|
<style>
|
||||||
.spotlight {
|
.spotlight {
|
||||||
@ -15,7 +15,7 @@
|
|||||||
transition: opacity 0.4s ease-in;
|
transition: opacity 0.4s ease-in;
|
||||||
}
|
}
|
||||||
.nuxt-loader-bar {
|
.nuxt-loader-bar {
|
||||||
background: repeating-linear-gradient(to right, #0047E1 0%, #34CDFE 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%);
|
background: repeating-linear-gradient(to right, #36E4DA 0%, #1DE0B1 25%, #00DC82 50%, #1DE0B1 75%, #36E4DA 100%);
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background-size: 200% auto;
|
background-size: 200% auto;
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
@ -29,7 +29,7 @@
|
|||||||
right: -50px;
|
right: -50px;
|
||||||
}
|
}
|
||||||
.mouse-gradient {
|
.mouse-gradient {
|
||||||
background: repeating-linear-gradient(to right, #0047E1 0%, #34CDFE 50%, #00DC82 100%);
|
background: repeating-linear-gradient(to right, #00DC82 0%, #1DE0B1 50%, #36E4DA 100%);
|
||||||
filter: blur(100px);
|
filter: blur(100px);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -68,9 +68,6 @@
|
|||||||
color: white;
|
color: white;
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
#nuxtImageDigit3 {
|
|
||||||
fill: #00DC82 !important;
|
|
||||||
}
|
|
||||||
.nuxt-loader-bar {
|
.nuxt-loader-bar {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -79,23 +76,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="relative overflow-hidden min-h-screen bg-white dark:bg-black flex flex-col justify-center items-center text-center">
|
<body class="relative overflow-hidden min-h-screen bg-white dark:bg-black flex flex-col justify-center items-center text-center">
|
||||||
<div id="mouseLight" class="absolute top-0 rounded-full mouse-gradient transition-opacity h-[200px] w-[200px]"></div>
|
<div id="mouseLight" class="absolute top-0 rounded-full mouse-gradient transition-opacity h-[200px] w-[200px]"></div>
|
||||||
<a href="https://v3.nuxtjs.org" target="_blank" rel="noopener" class="nuxt-logo z-20">
|
<a href="https://nuxt.com" target="_blank" rel="noopener" class="nuxt-logo z-20">
|
||||||
<svg id="nuxtImg" viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg"
|
<svg id="nuxtImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 53" width="214" height="53" fill="none">
|
||||||
class="w-40 h-16 mb-4 text-black dark:text-white transition-opacity">
|
<path fill="#00DC82" d="M42.692 50.378h27.773c.882 0 1.75-.225 2.513-.653a4.951 4.951 0 0 0 1.84-1.784 4.76 4.76 0 0 0 .672-2.437c0-.855-.233-1.696-.675-2.436l-18.652-31.33a4.95 4.95 0 0 0-1.838-1.783 5.144 5.144 0 0 0-2.513-.653c-.881 0-1.748.225-2.512.653a4.95 4.95 0 0 0-1.838 1.784l-4.77 8.016L33.368 4.08a4.953 4.953 0 0 0-1.84-1.784 5.148 5.148 0 0 0-2.512-.652c-.882 0-1.749.225-2.513.652a4.954 4.954 0 0 0-1.84 1.784L1.453 43.068a4.758 4.758 0 0 0-.674 2.436c0 .855.232 1.696.673 2.437a4.95 4.95 0 0 0 1.839 1.784c.764.428 1.63.653 2.512.653h17.434c6.907 0 12.001-2.943 15.506-8.683l8.51-14.292 4.558-7.648 13.68 22.974H47.253l-4.56 7.649Zm-19.74-7.657-12.166-.002 18.238-30.631 9.1 15.315L32.03 37.64c-2.328 3.724-4.972 5.081-9.078 5.081Z" />
|
||||||
<g>
|
<path fill="currentColor" d="M86.928 49.32V8.75h9.276l11.942 19.648c1.739 2.859 3.381 5.989 4.927 9.389-.386-3.748-.579-7.284-.579-10.607V8.75h8.753v40.57h-9.333L100.03 29.673c-1.778-2.86-3.44-5.97-4.986-9.331.387 3.709.58 7.225.58 10.548v18.43H86.93ZM155.782 20.11v29.21h-8.116v-4.057c-.811 1.391-2.01 2.492-3.594 3.304-1.546.811-3.304 1.217-5.275 1.217-2.165 0-4.058-.483-5.682-1.449-1.623-1.005-2.898-2.376-3.826-4.115-.889-1.739-1.333-3.71-1.333-5.912V20.11h8.058v16.402c0 1.777.522 3.245 1.565 4.404 1.044 1.121 2.396 1.681 4.058 1.681 1.739 0 3.169-.618 4.29-1.854 1.159-1.237 1.739-2.782 1.739-4.637V20.11h8.116ZM178.224 34.135l10.493 15.185h-8.58l-6.261-8.983-6.319 8.983h-8.637l10.55-15.242-9.797-13.968h8.812l5.333 7.708 5.334-7.708h8.869l-9.797 14.025ZM195.921 11.474h8.058v8.636h7.826v6.723h-7.826v11.533c0 2.782 1.372 4.173 4.116 4.173h3.71v6.781h-4.812c-3.401 0-6.106-.927-8.116-2.782-1.971-1.854-2.956-4.462-2.956-7.824V26.833h-5.623V20.11h5.623v-8.636Z" />
|
||||||
<path
|
|
||||||
d="M82.5623 18.5705H89.864L105.338 43.312V18.5705H112.079V53.6281H104.827L89.3025 28.938V53.6281H82.5623V18.5705ZM142.207 53.628H135.925V49.712C134.496 52.4679 131.586 54.0196 127.91 54.0196C122.088 54.0196 118.307 49.9127 118.307 44.0021V28.3847H124.589V42.7098C124.589 46.1656 126.735 48.569 129.951 48.569C133.475 48.569 135.925 45.8646 135.925 42.1591V28.3847H142.207V53.628ZM164.064 53.2289L158.038 44.8145L152.011 53.2289H145.321L154.617 40.0566L146.037 27.9857H152.88L158.038 35.2498L163.144 27.9857H170.039L161.407 40.0566L170.702 53.2289H164.064V53.2289ZM183.469 20.7726V28.3842H190.618V33.5435H183.469V46.0746C183.469 46.4954 183.639 46.8991 183.942 47.1969C184.245 47.4947 184.657 47.6623 185.086 47.663H190.618V53.6177H186.481C180.864 53.6177 177.188 50.4115 177.188 44.8068V33.5484H172.132V28.3842H175.304C176.783 28.3842 177.644 27.5203 177.644 26.091V20.7726H183.469Z"
|
|
||||||
fill="currentColor" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
||||||
d="M30.1185 11.5456C28.2332 8.30393 23.5198 8.30392 21.6345 11.5456L1.08737 46.8747C-0.797952 50.1164 1.5587 54.1685 5.32936 54.1685H21.3695C19.7583 52.7604 19.1616 50.3244 20.3809 48.2344L35.9424 21.5594L30.1185 11.5456V11.5456Z"
|
|
||||||
fill="#80EEC0" />
|
|
||||||
<path
|
|
||||||
d="M43.1374 19.2952C44.6977 16.6429 48.5984 16.6429 50.1586 19.2952L67.1631 48.2009C68.7234 50.8531 66.7731 54.1685 63.6525 54.1685H29.6435C26.5229 54.1685 24.5726 50.8531 26.1329 48.2009L43.1374 19.2952Z"
|
|
||||||
fill="#00DC82" />
|
|
||||||
<path id="nuxtImageDigit3"
|
|
||||||
d="M198.483 53.8005H209.174C211.776 53.8005 213.961 53.3168 215.729 52.3494C217.531 51.382 218.898 50.0977 219.832 48.4965C220.766 46.8953 221.234 45.1272 221.234 43.1925C221.234 40.8907 220.616 38.9893 219.382 37.4882C218.148 35.9537 216.547 34.9863 214.578 34.586C216.18 34.1189 217.514 33.2183 218.582 31.8839C219.682 30.5162 220.233 28.8483 220.233 26.8802C220.233 25.1789 219.799 23.6277 218.932 22.2266C218.098 20.8256 216.847 19.7081 215.179 18.8741C213.544 18.0068 211.526 17.5731 209.124 17.5731C205.755 17.5731 203.003 18.5072 200.868 20.3752C198.767 22.2433 197.649 24.7952 197.516 28.031H203.77C203.87 26.63 204.371 25.4457 205.271 24.4783C206.206 23.5109 207.49 23.0272 209.124 23.0272C210.626 23.0272 211.793 23.4275 212.627 24.2282C213.494 24.9954 213.928 26.0295 213.928 27.3305C213.928 28.8983 213.361 30.0826 212.227 30.8832C211.093 31.6838 209.675 32.0841 207.974 32.0841H205.322V37.338H207.923C209.992 37.338 211.676 37.8217 212.977 38.7891C214.312 39.7232 214.979 41.1076 214.979 42.9423C214.979 44.5101 214.478 45.8111 213.478 46.8452C212.477 47.8793 210.992 47.7792 209.124 47.7792H198.483C198.55 50.3479 198.483 51.9491 198.483 53.8005Z"
|
|
||||||
fill="currentColor" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<button id="animation-toggle">Animation Enabled</button>
|
<button id="animation-toggle">Animation Enabled</button>
|
||||||
@ -133,7 +117,7 @@
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
mouseLight.style.opacity = 0
|
mouseLight.style.opacity = 0
|
||||||
nuxtImg.style.opacity = 0
|
nuxtImg.style.opacity = 0.7
|
||||||
}
|
}
|
||||||
function onMouseMove(e) {
|
function onMouseMove(e) {
|
||||||
if (!enableAnimation) {
|
if (!enableAnimation) {
|
||||||
@ -154,10 +138,10 @@
|
|||||||
|
|
||||||
const dx = e.pageX - pointerRect.left
|
const dx = e.pageX - pointerRect.left
|
||||||
const dy = e.pageY - pointerRect.top
|
const dy = e.pageY - pointerRect.top
|
||||||
const logoGradient = `radial-gradient(circle at ${dx}px ${dy}px, black 50%, transparent 100%)`
|
const logoGradient = `radial-gradient(circle at ${dx}px ${dy}px, black 75%, transparent 100%)`
|
||||||
nuxtImg.style['-webkit-mask-image'] = logoGradient
|
nuxtImg.style['-webkit-mask-image'] = logoGradient
|
||||||
nuxtImg.style['mask-image'] = logoGradient
|
nuxtImg.style['mask-image'] = logoGradient
|
||||||
nuxtImg.style.opacity = Math.min(Math.max(size / 4, 0.6), 1)
|
nuxtImg.style.opacity = Math.min(Math.max(size / 4, 0.7), 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleAnimation(value = !enableAnimation) {
|
function toggleAnimation(value = !enableAnimation) {
|
||||||
|
|||||||
@ -2,123 +2,360 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ messages.title }}</title>
|
<title>{{ messages.title }}</title>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8" />
|
||||||
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
|
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
|
||||||
|
<link rel="icon" type="image/png" href="/icon.png" />
|
||||||
<script type="module" src="/styles.ts"></script>
|
<script type="module" src="/styles.ts"></script>
|
||||||
<style>
|
<style lang="postcss">
|
||||||
.spotlight {
|
/*linear gradients */
|
||||||
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
|
|
||||||
filter: blur(20vh);
|
|
||||||
height: 50vh;
|
|
||||||
bottom: -40vh;
|
|
||||||
}
|
|
||||||
.spotlight-wrapper {
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity 0.4s ease-in;
|
|
||||||
}
|
|
||||||
.nuxt-logo:hover ~ .spotlight-wrapper {
|
|
||||||
opacity: 0.95;
|
|
||||||
}
|
|
||||||
.gradient-border {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.gradient-border {
|
.get-started-gradient-border {
|
||||||
background-color: rgba(255, 255, 255, 0.3);
|
background: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #00DC82, #1DE0B1, #36E4DA);
|
||||||
}
|
}
|
||||||
.gradient-border::before {
|
.gradient-border-modules {
|
||||||
background: linear-gradient(90deg, #e2e2e2 0%, #e2e2e2 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%);
|
background: linear-gradient(var(--gradient-angle), rgba(247, 209, 76), rgba(247, 209, 76, 0.6), rgba(255, 255, 255, 0.8), rgba(247, 209, 76));
|
||||||
|
}
|
||||||
|
.gradient-border-examples {
|
||||||
|
background: linear-gradient(var(--gradient-angle), rgba(141, 234, 255), rgba(141, 234, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(141, 234, 255));
|
||||||
|
}
|
||||||
|
.gradient-border-documentation {
|
||||||
|
background: linear-gradient(var(--gradient-angle), rgba(0, 220, 130), rgba(0, 220, 130, 0.6), rgba(255, 255, 255, 0.8), rgba(0, 220, 130));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.gradient-border {
|
.get-started-gradient-border {
|
||||||
background-color: rgba(20, 20, 20, 0.3);
|
background: linear-gradient(to right, #18181B, #18181B), linear-gradient(to right, #00DC82, #1DE0B1, #36E4DA);
|
||||||
}
|
}
|
||||||
.gradient-border::before {
|
.gradient-border-modules {
|
||||||
background: linear-gradient(90deg, #303030 0%, #303030 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%);
|
background: linear-gradient(var(--gradient-angle), rgba(247, 209, 76), rgba(163, 129, 8), rgba(255, 255, 255, 0.3), rgba(163, 129, 8));
|
||||||
|
}
|
||||||
|
.gradient-border-examples {
|
||||||
|
background: linear-gradient(var(--gradient-angle), rgba(141, 234, 255), rgba(0, 138, 169), rgba(255, 255, 255, 0.3), rgba(0, 138, 169));
|
||||||
|
}
|
||||||
|
.gradient-border-documentation {
|
||||||
|
background: linear-gradient(var(--gradient-angle), rgba(0, 220, 130), rgba(0, 63, 37), rgba(255, 255, 255, 0.2), rgba(0, 63, 37));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gradient-border::before {
|
|
||||||
content: "";
|
/* get started */
|
||||||
|
.get-started-gradient-border {
|
||||||
|
background-clip: padding-box, border-box;
|
||||||
|
background-origin: padding-box, border-box;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 12px;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-started-gradient-border:hover > :is(.get-started-gradient-left, .get-started-gradient-right) {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-started-gradient-left, .get-started-gradient-right {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* gradient border */
|
||||||
|
.gradient-border {
|
||||||
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
width: calc(100% + 2px);
|
||||||
bottom: 0;
|
border-radius: 12px;
|
||||||
border-radius: 0.5rem;
|
z-index: -1;
|
||||||
padding: 2px;
|
transform: translate(-1px, -1px);
|
||||||
width: 100%;
|
|
||||||
background-size: 400% auto;
|
|
||||||
background-position: 0 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: background-position 0.3s ease-in-out, opacity 0.2s ease-in-out;
|
|
||||||
-webkit-mask:
|
|
||||||
linear-gradient(#fff 0 0) content-box,
|
|
||||||
linear-gradient(#fff 0 0);
|
|
||||||
mask:
|
|
||||||
linear-gradient(#fff 0 0) content-box,
|
|
||||||
linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
}
|
}
|
||||||
.gradient-border:hover::before {
|
|
||||||
background-position: -50% 0;
|
.gradient-border-rect {
|
||||||
|
height: calc(100% + 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.gradient-border-rect {
|
||||||
|
height: calc(100% + 1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-border-square {
|
||||||
|
height: calc(100% + 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modules-gradient-right {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modules-container:hover > .gradient-border, .examples-container:hover > .gradient-border, .documentation-container:hover > .gradient-border {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
animation: gradient-rotate 5s cubic-bezier(0,0,1,1) 0s infinite reverse;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modules-container:hover > .modules-gradient-right {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples-container:hover > .examples-gradient-right {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples-gradient-right {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* images */
|
||||||
|
.documentation-image-color-light, .documentation-image-color-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modules-image-color-light, .modules-image-color-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples-image-color-light, .examples-image-color-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* image */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
/*modules*/
|
||||||
|
.modules-image-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modules-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modules-container:hover > a > .modules-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modules-container:hover > a > .modules-image-color-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* examples */
|
||||||
|
.examples-image-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.examples-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.examples-container:hover > a > .examples-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.examples-container:hover > a > .examples-image-color-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* documentation */
|
||||||
|
.documentation-image-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.documentation-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.documentation-container:hover > a > div > .documentation-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.documentation-container:hover > a > div > .documentation-image-color-light {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
/*modules*/
|
||||||
|
.modules-image-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modules-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modules-container:hover > a > .modules-image-color-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modules-container:hover > a > .modules-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* examples */
|
||||||
|
.examples-image-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.examples-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.examples-container:hover > a > .examples-image-color-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.examples-container:hover > a > .examples-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* documentation */
|
||||||
|
.documentation-image-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.documentation-image-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.documentation-container:hover > a > div >.documentation-image-color-dark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.documentation-container:hover > a > div > .documentation-image-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@property --gradient-angle {
|
||||||
|
syntax: '<angle>';
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 180deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-rotate {
|
||||||
|
0% {
|
||||||
|
--gradient-angle: 0deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
--gradient-angle: 360deg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="font-sans antialiased bg-white dark:bg-black text-black dark:text-white min-h-screen place-content-center flex flex-col items-center justify-center p-8 text-sm sm:text-base">
|
<body class="antialiased bg-white dark:bg-black text-black dark:text-white min-h-screen place-content-center flex flex-col items-center justify-center text-sm sm:text-base">
|
||||||
<div class="grid grid-cols-3 gap-4 md:gap-8 max-w-5xl w-full z-20">
|
<div class="flex-1 flex flex-col gap-y-16 py-14">
|
||||||
<div class="flex justify-between items-end col-span-3">
|
<div class="flex flex-col gap-y-4 items-center justify-center">
|
||||||
<a href="https://v3.nuxtjs.org" target="_blank" rel="noopener" class="nuxt-logo">
|
<a href="https://nuxt.com" target="_blank">
|
||||||
<svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-40 text-black dark:text-white"><g clip-path="url(#a)"><path fill="currentColor" d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z" fill="#80EEC0"></path> <path d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z" fill="#00DC82"></path></g> <defs><clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"></path></clipPath></defs></svg>
|
<svg width="61" height="42" viewBox="0 0 61 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
</a>
|
<path d="M33.9869 41.2211H56.412C57.1243 41.2212 57.824 41.0336 58.4408 40.6772C59.0576 40.3209 59.5698 39.8083 59.9258 39.191C60.2818 38.5737 60.469 37.8736 60.4687 37.1609C60.4684 36.4482 60.2805 35.7482 59.924 35.1313L44.864 9.03129C44.508 8.41416 43.996 7.90168 43.3793 7.54537C42.7626 7.18906 42.063 7.00147 41.3509 7.00147C40.6387 7.00147 39.9391 7.18906 39.3225 7.54537C38.7058 7.90168 38.1937 8.41416 37.8377 9.03129L33.9869 15.7093L26.458 2.65061C26.1018 2.03354 25.5895 1.52113 24.9726 1.16489C24.3557 0.808639 23.656 0.621094 22.9438 0.621094C22.2316 0.621094 21.5318 0.808639 20.915 1.16489C20.2981 1.52113 19.7858 2.03354 19.4296 2.65061L0.689224 35.1313C0.332704 35.7482 0.144842 36.4482 0.144532 37.1609C0.144222 37.8736 0.331476 38.5737 0.687459 39.191C1.04344 39.8083 1.5556 40.3209 2.17243 40.6772C2.78925 41.0336 3.48899 41.2212 4.20126 41.2211H18.2778C23.8551 41.2211 27.9682 38.7699 30.7984 33.9876L37.6694 22.0813L41.3498 15.7093L52.3951 34.8492H37.6694L33.9869 41.2211ZM18.0484 34.8426L8.2247 34.8404L22.9504 9.32211L30.2979 22.0813L25.3784 30.6092C23.4989 33.7121 21.3637 34.8426 18.0484 34.8426Z" fill="#00DC82" />
|
||||||
<a href="https://github.com/nuxt/framework/releases/tag/{{ messages.version }}" target="_blank" rel="noopener" class="flex justify-end pb-1 sm:pb-2">{{ messages.version }}</a>
|
|
||||||
<div class="spotlight-wrapper"><div class="fixed z-10 left-0 right-0 spotlight"></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-span-3 rounded p-4 flex flex-col gradient-border">
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h1 class="font-medium text-2xl">
|
|
||||||
Get Started
|
|
||||||
</h1>
|
|
||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M29.4284 31.095C26.9278 33.5955 23.5364 35.0003 20.0001 35.0003C16.4637 35.0003 13.0723 33.5955 10.5717 31.095C8.07118 28.5944 6.66638 25.203 6.66638 21.6667C6.66638 18.1304 8.07118 14.7389 10.5717 12.2383C10.5717 12.2383 11.6667 15 15.0001 16.6667C15.0001 13.3333 15.8334 8.33333 19.9767 5C23.3334 8.33333 26.8167 9.62833 29.4267 12.2383C30.667 13.475 31.6506 14.9446 32.321 16.5626C32.9915 18.1806 33.3355 19.9152 33.3334 21.6667C33.3357 23.418 32.9919 25.1525 32.3218 26.7705C31.6516 28.3886 30.6683 29.8582 29.4284 31.095V31.095Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M16.465 26.8683C17.0456 27.4491 17.7604 27.878 18.5462 28.1169C19.3319 28.3559 20.1644 28.3976 20.9701 28.2385C21.7758 28.0793 22.5299 27.7241 23.1657 27.2043C23.8015 26.6845 24.2995 26.016 24.6157 25.2581C24.9318 24.5001 25.0564 23.6759 24.9784 22.8584C24.9004 22.0408 24.6222 21.2551 24.1684 20.5705C23.7146 19.886 23.0992 19.3238 22.3766 18.9336C21.6539 18.5434 20.8463 18.3373 20.025 18.3333L18.3333 23.3333H15C15 24.6133 15.4883 25.8933 16.465 26.8683Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</a>
|
||||||
<p class="mb-2">Remove this welcome page by replacing <a class="bg-gray-100 dark:bg-white/10 rounded font-mono p-1 font-bold"><NuxtWelcome /></a> in <a href="https://v3.nuxtjs.org/docs/directory-structure/app" target="_blank" rel="noopener" class="bg-gray-100 dark:bg-white/10 rounded font-mono p-1 font-bold">app.vue</a> with your own code.</p>
|
<h1 class="text-black dark:text-white text-4xl sm:text-5xl font-semibold text-center">
|
||||||
|
Welcome to Nuxt!
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 lg:grid-cols-10 gap-6 max-w-[960px] px-4">
|
||||||
|
<div class="col-span-2 lg:col-span-10 relative get-started-gradient-border">
|
||||||
|
<div class="get-started-gradient-left absolute left-0 inset-y-0 w-[20%] bg-gradient-to-r to-transparent from-green-400 rounded-xl z-1 transition-opacity duration-300"></div>
|
||||||
|
<div class="get-started-gradient-right absolute right-0 inset-y-0 w-[20%] bg-gradient-to-l to-transparent from-blue-400 rounded-xl z-1 transition-opacity duration-300"></div>
|
||||||
|
<div class="w-full absolute inset-x-0 flex justify-center -top-[58px]">
|
||||||
|
<img src="/icons/get-started.svg" class="hidden dark:block">
|
||||||
|
<img src="/icons/get-started-light.svg" class="dark:hidden">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col rounded-xl items-center gap-y-4 pt-[58px] px-4 sm:px-28 pb-6 z-10">
|
||||||
|
<h2 class="font-semibold text-2xl text-black dark:text-white">
|
||||||
|
Get started
|
||||||
|
</h2>
|
||||||
|
<p class="mb-2 text-center">Remove this welcome page by replacing <a class="bg-gray-100 dark:bg-white/10 rounded font-mono p-1 font-bold"><NuxtWelcome /></a> in <a href="https://nuxt.com/docs/directory-structure/app" target="_blank" rel="noopener" class="bg-gray-100 dark:bg-white/10 rounded font-mono p-1 font-bold">app.vue</a> with your own code.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:min-h-min sm:min-h-[220px] md:min-h-[180px] col-span-2 sm:col-span-1 lg:col-span-6 text-black dark:text-white rounded-xl modules-container relative items-center justify-center border border-gray-200 dark:border-transparent hover:border-transparent">
|
||||||
|
<div class="gradient-border gradient-border-modules gradient-border-rect"></div>
|
||||||
|
<div class="modules-gradient-right absolute right-0 inset-y-0 w-[20%] bg-gradient-to-l to-transparent from-yellow-400 rounded-xl z-1 transition-opacity duration-300"></div>
|
||||||
|
<a href="https://nuxt.com/modules" target="_blank" class="py-6 px-5 rounded-xl flex items-center justify-center gap-x-4 dark:border-none bg-white dark:bg-gray-900 sm:min-h-[220px] md:min-h-[180px] lg:min-h-min">
|
||||||
|
<img src="/icons/modules-color-light.svg" alt="modules icon" class="modules-image-color-light">
|
||||||
|
<img src="/icons/modules-color.svg" alt="modules icon" class="modules-image-color-dark">
|
||||||
|
<img src="/icons/modules-light.svg" alt="modules icon" class="modules-image-light">
|
||||||
|
<img src="/icons/modules.svg" alt="modules icon" class="modules-image-dark">
|
||||||
|
<div class="flex flex-col space-y text-black dark:text-white">
|
||||||
|
<h3 class="font-semibold text-xl">
|
||||||
|
Modules
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="row-span-2 col-span-2 order-last lg:order-none lg:col-span-4 text-black dark:text-white documentation-container rounded-xl relative items-center justify-center border border-gray-200 dark:border-transparent hover:border-transparent">
|
||||||
|
<div class="gradient-border gradient-border-square gradient-border-documentation"></div>
|
||||||
|
<a href="https://nuxt.com/docs" target="_blank" class="rounded-xl flex lg:flex-col items-center justify-center gap-y-4 bg-white dark:bg-gray-900">
|
||||||
|
<div class="py-6 lg:py-7 px-5 rounded-xl flex flex-col sm:flex-row lg:flex-col items-center justify-center gap-y-2 ">
|
||||||
|
<div class="flex flex-col space-y text-black dark:text-white">
|
||||||
|
<h3 class="font-semibold text-xl">
|
||||||
|
Documentation
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
We highly recommend you take a look at the Nuxt documentation to level up.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="/icons/documentation-color-light.svg" alt="documentation icon" class="documentation-image-color-light h-32 sm:h-34">
|
||||||
|
<img src="/icons/documentation-color.svg" alt="documentation icon" class="documentation-image-color-dark h-32 sm:h-34">
|
||||||
|
<img src="/icons/documentation-light.svg" alt="documentation icon" class="documentation-image-light h-32 sm:h-34">
|
||||||
|
<img src="/icons/documentation.svg" alt="documentation icon" class="documentation-image-dark h-32 sm:h-34">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="lg:min-h-min sm:min-h-[220px] md:min-h-[180px] col-span-2 sm:col-span-1 lg:col-span-6 text-black dark:text-white rounded-xl examples-container relative items-center justify-center border border-gray-200 dark:border-transparent hover:border-transparent">
|
||||||
|
<div class="gradient-border gradient-border-examples gradient-border-rect"></div>
|
||||||
|
<div class="examples-gradient-right absolute right-0 inset-y-0 w-[20%] bg-gradient-to-l to-transparent from-blue-400 rounded-xl z-1 transition-opacity duration-300"></div>
|
||||||
|
<a href="https://nuxt.com/docs/examples" target="_blank" class="py-6 px-5 rounded-xl flex items-center justify-center gap-x-4 bg-white dark:bg-gray-900 sm:min-h-[220px] md:min-h-[180px] lg:min-h-min">
|
||||||
|
<img src="/icons/examples-color-light.svg" alt="examples icon" class="examples-image-color-light">
|
||||||
|
<img src="/icons/examples-color.svg" alt="examples icon" class="examples-image-color-dark">
|
||||||
|
<img src="/icons/examples-light.svg" alt="examples icon" class="examples-image-light">
|
||||||
|
<img src="/icons/examples.svg" alt="examples icon" class="examples-image-dark">
|
||||||
|
<div class="flex flex-col space-y text-black dark:text-white">
|
||||||
|
<h3 class="font-semibold text-xl">
|
||||||
|
Examples
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
Explore different way of using Nuxt features and get inspired with our list of examples.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="https://v3.nuxtjs.org" target="_blank" rel="noopener" class="gradient-border cursor-pointer col-span-3 sm:col-span-1 p-4 flex flex-col">
|
|
||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M20 10.4217C21.9467 9.12833 24.59 8.33333 27.5 8.33333C30.4117 8.33333 33.0533 9.12833 35 10.4217V32.0883C33.0533 30.795 30.4117 30 27.5 30C24.59 30 21.9467 30.795 20 32.0883M20 10.4217V32.0883V10.4217ZM20 10.4217C18.0533 9.12833 15.41 8.33333 12.5 8.33333C9.59 8.33333 6.94667 9.12833 5 10.4217V32.0883C6.94667 30.795 9.59 30 12.5 30C15.41 30 18.0533 30.795 20 32.0883V10.4217Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<rect x="23.3334" y="13.3333" width="8.33334" height="1.66667" rx="0.833333" fill="currentColor"/>
|
|
||||||
<rect x="8.33337" y="13.3333" width="8.33333" height="1.66667" rx="0.833333" fill="currentColor"/>
|
|
||||||
<rect x="8.33337" y="18.3333" width="8.33333" height="1.66667" rx="0.833333" fill="currentColor"/>
|
|
||||||
<rect x="8.33337" y="23.3333" width="8.33333" height="1.66667" rx="0.833334" fill="currentColor"/>
|
|
||||||
<rect x="23.3334" y="18.3333" width="8.33334" height="1.66667" rx="0.833333" fill="currentColor"/>
|
|
||||||
<rect x="23.3334" y="23.3333" width="8.33334" height="1.66667" rx="0.833334" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
<h2 class="font-semibold text-xl mt-4">Documentation</h2>
|
|
||||||
<p class="mt-2">{{ messages.readDocs }}</p>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/nuxt/framework" target="_blank" rel="noopener" class="cursor-pointer gradient-border col-span-3 sm:col-span-1 p-4 flex flex-col">
|
|
||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 3.33333C10.795 3.33333 3.33337 10.8067 3.33337 20.0283C3.33337 27.4033 8.10837 33.6617 14.7317 35.8683C15.565 36.0217 15.8684 35.5067 15.8684 35.0633C15.8684 34.6683 15.855 33.6167 15.8467 32.225C11.21 33.2333 10.2317 29.9867 10.2317 29.9867C9.47504 28.0567 8.38171 27.5433 8.38171 27.5433C6.86837 26.51 8.49671 26.53 8.49671 26.53C10.1684 26.6467 11.0484 28.25 11.0484 28.25C12.535 30.8 14.95 30.0633 15.8984 29.6367C16.0517 28.5583 16.4817 27.8233 16.9584 27.4067C13.2584 26.985 9.36671 25.5517 9.36671 19.155C9.36671 17.3333 10.0167 15.8417 11.0817 14.675C10.91 14.2533 10.3384 12.555 11.245 10.2583C11.245 10.2583 12.645 9.80833 15.8284 11.9683C17.188 11.5975 18.5908 11.4087 20 11.4067C21.4167 11.4133 22.8417 11.5983 24.1734 11.9683C27.355 9.80833 28.7517 10.2567 28.7517 10.2567C29.6617 12.555 29.0884 14.2533 28.9184 14.675C29.985 15.8417 30.6317 17.3333 30.6317 19.155C30.6317 25.5683 26.7334 26.98 23.0217 27.3933C23.62 27.9083 24.1517 28.9267 24.1517 30.485C24.1517 32.715 24.1317 34.5167 24.1317 35.0633C24.1317 35.51 24.4317 36.03 25.2784 35.8667C28.5972 34.7535 31.4823 32.6255 33.5258 29.7834C35.5694 26.9413 36.6681 23.5289 36.6667 20.0283C36.6667 10.8067 29.2034 3.33333 20 3.33333Z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
<h2 class="font-semibold text-xl mt-4">GitHub</h5>
|
|
||||||
<p class="mt-2">{{ messages.starGitHub }}</p>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener" class="cursor-pointer gradient-border col-span-3 sm:col-span-1 p-4 flex flex-col">
|
|
||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.8167 33.7557C26.395 33.7557 33.275 23.334 33.275 14.2973C33.275 14.0007 33.275 13.7057 33.255 13.414C34.5937 12.4449 35.7489 11.245 36.6667 9.87066C35.4185 10.424 34.0943 10.7869 32.7384 10.9473C34.1661 10.0924 35.2346 8.74791 35.745 7.164C34.4029 7.96048 32.9345 8.52188 31.4034 8.824C30.3724 7.72694 29.0084 7.00039 27.5228 6.75684C26.0371 6.51329 24.5126 6.76633 23.1852 7.47678C21.8579 8.18723 20.8018 9.31545 20.1805 10.6868C19.5592 12.0581 19.4073 13.596 19.7484 15.0623C17.0294 14.9261 14.3694 14.2195 11.9411 12.9886C9.51285 11.7577 7.37059 10.0299 5.65337 7.91733C4.7789 9.42267 4.51102 11.2047 4.90427 12.9006C5.29751 14.5965 6.32232 16.0788 7.77004 17.0457C6.68214 17.0142 5.61776 16.7215 4.66671 16.1923V16.279C4.66736 17.8578 5.21403 19.3878 6.21404 20.6096C7.21404 21.8313 8.60582 22.6696 10.1534 22.9823C9.14639 23.2569 8.08986 23.2968 7.06504 23.099C7.50198 24.4581 8.35284 25.6467 9.49859 26.4984C10.6443 27.35 12.0277 27.8223 13.455 27.849C12.0369 28.9633 10.413 29.7871 8.67625 30.2732C6.93948 30.7594 5.12391 30.8984 3.33337 30.6823C6.46105 32.6896 10.1004 33.7542 13.8167 33.749" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
<h2 class="font-semibold text-xl mt-4">Twitter</h5>
|
|
||||||
<p class="mt-2">{{ messages.followTwitter }}</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<footer class="relative border-t bg-white dark:bg-black border-gray-200 dark:border-gray-900 w-full h-[70px] flex items-center">
|
||||||
|
<div class="absolute inset-x-0 flex items-center justify-center -top-3">
|
||||||
|
<a href="https://nuxt.com" target="_blank">
|
||||||
|
<svg width="70" height="20" viewBox="0 0 70 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<ellipse cx="34.6528" cy="10.4209" rx="34.5" ry="9.5" fill="white" class="dark:hidden" />
|
||||||
|
<ellipse cx="34.6528" cy="10.4209" rx="34.5" ry="9.5" fill="black" class="hidden dark:block" />
|
||||||
|
<path d="M36.0605 15.9209H42.6256C42.8341 15.9209 43.0389 15.8655 43.2195 15.7602C43.4001 15.6548 43.55 15.5033 43.6543 15.3209C43.7585 15.1384 43.8133 14.9315 43.8132 14.7208C43.8131 14.5102 43.7581 14.3033 43.6537 14.1209L39.2448 6.40667C39.1406 6.22427 38.9907 6.0728 38.8101 5.96748C38.6296 5.86217 38.4248 5.80672 38.2163 5.80672C38.0078 5.80672 37.803 5.86217 37.6225 5.96748C37.4419 6.0728 37.292 6.22427 37.1878 6.40667L36.0605 8.38048L33.8563 4.52076C33.752 4.33837 33.602 4.18692 33.4214 4.08163C33.2409 3.97633 33.036 3.9209 32.8275 3.9209C32.619 3.9209 32.4141 3.97633 32.2335 4.08163C32.053 4.18692 31.903 4.33837 31.7987 4.52076L26.3123 14.1209C26.2079 14.3033 26.1529 14.5102 26.1528 14.7208C26.1527 14.9315 26.2076 15.1384 26.3118 15.3209C26.416 15.5033 26.5659 15.6548 26.7465 15.7602C26.9271 15.8655 27.1319 15.9209 27.3405 15.9209H31.4615C33.0943 15.9209 34.2984 15.1964 35.127 13.7829L37.1385 10.2638L38.216 8.38048L41.4496 14.0376H37.1385L36.0605 15.9209ZM31.3943 14.0356L28.5184 14.035L32.8294 6.49263L34.9805 10.2638L33.5402 12.7844C32.99 13.7015 32.3649 14.0356 31.3943 14.0356Z" fill="#00DC82" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto sm:px-6 lg:px-8 px-4 w-full">
|
||||||
|
<div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
|
||||||
|
<div class="flex flex-col-reverse items-center gap-3 sm:flex-row">
|
||||||
|
<span class="text-sm text-gray-700 dark:text-gray-300">© 2022 Nuxt - MIT License</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="flex items-center justify-end gap-3">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://chat.nuxt.dev"
|
||||||
|
target="_blank"
|
||||||
|
class="focus-visible:ring-2 text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.3705 1.07322C13.3663 1.06497 13.3594 1.05851 13.351 1.05499C12.3785 0.599487 11.3522 0.274675 10.2978 0.0886873C10.2882 0.0868693 10.2783 0.0881809 10.2695 0.0924354C10.2607 0.0966899 10.2534 0.103671 10.2487 0.112385C10.109 0.371315 9.98212 0.637279 9.86863 0.909263C8.73205 0.733138 7.57595 0.733138 6.43938 0.909263C6.32514 0.636589 6.19624 0.370559 6.05328 0.112385C6.04838 0.10386 6.04107 0.0970401 6.03232 0.0928132C6.02356 0.0885863 6.01377 0.0871486 6.0042 0.0886873C4.9497 0.274285 3.92333 0.599121 2.95092 1.05502C2.9426 1.05862 2.93558 1.06477 2.93082 1.07262C0.986197 4.03716 0.453491 6.92881 0.714819 9.78465C0.715554 9.79165 0.71766 9.79843 0.721013 9.80458C0.724365 9.81073 0.728896 9.81613 0.734334 9.82046C1.86667 10.6763 3.1332 11.3296 4.47988 11.7525C4.48937 11.7554 4.49949 11.7552 4.5089 11.7521C4.51831 11.7489 4.52655 11.7429 4.53251 11.7349C4.82175 11.3331 5.07803 10.9077 5.29876 10.4629C5.3018 10.4568 5.30353 10.4501 5.30384 10.4433C5.30416 10.4365 5.30305 10.4296 5.3006 10.4233C5.29814 10.4169 5.29439 10.4111 5.2896 10.4064C5.2848 10.4016 5.27906 10.3979 5.27277 10.3955C4.86862 10.2377 4.47736 10.0474 4.10266 9.82645C4.09586 9.82236 4.09014 9.81663 4.08602 9.80976C4.0819 9.80288 4.0795 9.79508 4.07903 9.78703C4.07856 9.77899 4.08004 9.77095 4.08334 9.76362C4.08664 9.7563 4.09166 9.74992 4.09794 9.74504C4.17657 9.68491 4.25524 9.62236 4.33032 9.55918C4.33699 9.55358 4.34506 9.54998 4.35362 9.5488C4.36218 9.54762 4.3709 9.54891 4.37879 9.55252C6.83362 10.6962 9.4913 10.6962 11.9171 9.55252C11.925 9.54868 11.9338 9.54721 11.9425 9.54829C11.9512 9.54936 11.9594 9.55293 11.9662 9.55858C12.0413 9.62176 12.1199 9.68491 12.1991 9.74504C12.2054 9.74987 12.2105 9.75621 12.2138 9.7635C12.2172 9.7708 12.2187 9.77882 12.2183 9.78687C12.2179 9.79492 12.2156 9.80274 12.2115 9.80964C12.2074 9.81654 12.2018 9.82232 12.195 9.82645C11.8211 10.0492 11.4295 10.2394 11.0243 10.3949C11.018 10.3974 11.0123 10.4012 11.0075 10.406C11.0028 10.4109 10.9991 10.4167 10.9967 10.4231C10.9943 10.4295 10.9932 10.4364 10.9936 10.4433C10.9939 10.4501 10.9957 10.4568 10.9988 10.4629C11.2232 10.9052 11.4791 11.3301 11.7645 11.7342C11.7703 11.7425 11.7785 11.7487 11.7879 11.7519C11.7974 11.7552 11.8076 11.7554 11.8171 11.7524C13.1662 11.331 14.4349 10.6776 15.5687 9.82046C15.5742 9.81635 15.5788 9.81108 15.5822 9.80501C15.5855 9.79893 15.5876 9.7922 15.5882 9.78525C15.9011 6.4836 15.0644 3.61565 13.3705 1.07322ZM5.66537 8.04574C4.92629 8.04574 4.31731 7.35337 4.31731 6.50305C4.31731 5.65274 4.91448 4.96032 5.66537 4.96032C6.42213 4.96032 7.02522 5.65875 7.01341 6.503C7.01341 7.35337 6.41622 8.04574 5.66537 8.04574ZM10.6496 8.04574C9.91051 8.04574 9.30153 7.35337 9.30153 6.50305C9.30153 5.65274 9.8987 4.96032 10.6496 4.96032C11.4064 4.96032 12.0094 5.65875 11.9976 6.503C11.9976 7.35337 11.4064 8.04574 10.6496 8.04574Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://twitter.nuxt.dev"
|
||||||
|
target="_blank"
|
||||||
|
class="focus-visible:ring-2 text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.486 1.75441C16.8596 2.02615 16.1972 2.20579 15.5193 2.28774C16.2345 1.86051 16.7704 1.18839 17.0277 0.396073C16.3556 0.796126 15.62 1.07799 14.8527 1.22941C14.3398 0.673216 13.6568 0.302987 12.9108 0.176783C12.1649 0.0505786 11.3981 0.175539 10.7308 0.532064C10.0635 0.88859 9.53345 1.45652 9.2237 2.14677C8.91396 2.83702 8.84208 3.61056 9.01934 4.34607C7.66053 4.27734 6.33137 3.92353 5.11822 3.30762C3.90506 2.69171 2.83504 1.82748 1.97767 0.771073C1.67695 1.29621 1.51894 1.89093 1.51934 2.49607C1.51827 3.05806 1.65618 3.61159 1.9208 4.10738C2.18541 4.60317 2.56852 5.02583 3.036 5.33774C2.49265 5.32296 1.96091 5.17716 1.486 4.91274V4.95441C1.49008 5.74182 1.766 6.50365 2.2671 7.11104C2.7682 7.71844 3.46372 8.13411 4.236 8.28774C3.93872 8.37821 3.63007 8.42591 3.31934 8.42941C3.10424 8.42689 2.88969 8.40739 2.67767 8.37107C2.89759 9.04842 3.32319 9.64036 3.89523 10.0645C4.46728 10.4887 5.15732 10.724 5.86934 10.7377C4.66701 11.6838 3.18257 12.2001 1.65267 12.2044C1.37412 12.2053 1.09578 12.1886 0.819336 12.1544C2.38136 13.163 4.20168 13.6983 6.061 13.6961C7.34408 13.7094 8.61695 13.4669 9.80527 12.9828C10.9936 12.4987 12.0735 11.7826 12.982 10.8765C13.8905 9.97033 14.6093 8.89223 15.0965 7.70516C15.5836 6.51809 15.8294 5.24585 15.8193 3.96274C15.8193 3.82107 15.8193 3.67107 15.8193 3.52107C16.4732 3.03342 17.0372 2.43559 17.486 1.75441Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.nuxt.dev"
|
||||||
|
target="_blank"
|
||||||
|
class="focus-visible:ring-2 text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.15269 0.792969C7.17392 0.793051 5.25974 1.49723 3.75266 2.77951C2.24558 4.06179 1.24394 5.83849 0.92697 7.7917C0.609997 9.74492 0.998373 11.7472 2.02261 13.4403C3.04684 15.1333 4.6401 16.4067 6.51729 17.0325C6.93396 17.1055 7.09021 16.8555 7.09021 16.6367C7.09021 16.4388 7.07978 15.7825 7.07978 15.0846C4.98603 15.47 4.44436 14.5742 4.27769 14.1055C4.09276 13.6496 3.79959 13.2456 3.42353 12.9284C3.13186 12.7721 2.71519 12.3867 3.4131 12.3763C3.67959 12.4052 3.93518 12.498 4.15822 12.6467C4.38125 12.7953 4.56516 12.9956 4.69436 13.2305C4.80833 13.4352 4.96159 13.6155 5.14535 13.7609C5.32911 13.9063 5.53975 14.014 5.76522 14.0779C5.99068 14.1418 6.22653 14.1605 6.45926 14.1331C6.69198 14.1056 6.917 14.0325 7.12143 13.918C7.1575 13.4943 7.34631 13.0982 7.65269 12.8034C5.79853 12.5951 3.86103 11.8763 3.86103 8.68883C3.84931 7.86062 4.15493 7.05931 4.71519 6.44924C4.46043 5.72943 4.49024 4.93948 4.79853 4.24091C4.79853 4.24091 5.49642 4.02215 7.09019 5.09508C8.45376 4.72005 9.89328 4.72005 11.2569 5.09508C12.8506 4.01174 13.5485 4.24091 13.5485 4.24091C13.8569 4.93947 13.8867 5.72943 13.6319 6.44924C14.1938 7.05826 14.4997 7.86027 14.486 8.68883C14.486 11.8867 12.5381 12.5951 10.6839 12.8034C10.8828 13.005 11.036 13.247 11.133 13.513C11.2301 13.779 11.2688 14.0628 11.2464 14.3451C11.2464 15.4597 11.236 16.3555 11.236 16.6367C11.236 16.8555 11.3923 17.1159 11.8089 17.0326C13.6828 16.4016 15.2715 15.1253 16.2914 13.4313C17.3112 11.7374 17.6959 9.73616 17.3768 7.78483C17.0576 5.83351 16.0553 4.05911 14.5489 2.77839C13.0425 1.49768 11.1299 0.793998 9.15269 0.792969Z" fill="currentColor" /> </svg>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"title": "Welcome to Nuxt 3!",
|
"title": "Welcome to Nuxt!",
|
||||||
"readDocs": "We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework.",
|
"readDocs": "We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework.",
|
||||||
"followTwitter": "Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips.",
|
"followTwitter": "Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips.",
|
||||||
"starGitHub": "Nuxt is open source and the code is available on GitHub, feel free to star it, participate in discussions or dive into the source."
|
"starGitHub": "Nuxt is open source and the code is available on GitHub, feel free to star it, participate in discussions or dive into the source."
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -59,7 +59,18 @@ module.exports = {
|
|||||||
rose: colors.rose,
|
rose: colors.rose,
|
||||||
yellow: colors.amber,
|
yellow: colors.amber,
|
||||||
orange: colors.orange,
|
orange: colors.orange,
|
||||||
gray: colors.gray,
|
gray: {
|
||||||
|
50: '#f5f5f5',
|
||||||
|
100: '#eeeeee',
|
||||||
|
200: '#e0e0e0',
|
||||||
|
300: '#bdbdbd',
|
||||||
|
400: '#9e9e9e',
|
||||||
|
500: '#757575',
|
||||||
|
600: '#616161',
|
||||||
|
700: '#424242',
|
||||||
|
800: '#212121',
|
||||||
|
900: '#18181B'
|
||||||
|
},
|
||||||
purple: colors.purple,
|
purple: colors.purple,
|
||||||
sky: {
|
sky: {
|
||||||
surface: '#E5F9FF',
|
surface: '#E5F9FF',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user