Ryan Wang
@@ -16,11 +16,18 @@ const { title } = Astro.props as Props;
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="flex gap-3">
|
||||
<a href="/" th:href="@{/}">Home</a>
|
||||
<a href="/post" th:href="@{/post}">Post</a>
|
||||
<a href="/links" th:href="@{/links}">Links</a>
|
||||
</nav>
|
||||
<div class="flex justify-between">
|
||||
<nav class="flex gap-3">
|
||||
<a href="/" th:href="@{/}">Home</a>
|
||||
<a href="/post" th:href="@{/post}">Post</a>
|
||||
<a href="/links" th:href="@{/links}">Links</a>
|
||||
</nav>
|
||||
<div>
|
||||
<a href="/">默认</a>
|
||||
<a href="/?language=zh">中文</a>
|
||||
<a href="/?language=en">英文</a>
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
</body>
|
||||
|
||||
|
||||
+72
-68
@@ -5,84 +5,88 @@ import PostCard from "../components/PostCard.vue"
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
Check out the <code>src/pages</code> directory to get started.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card href="https://docs.astro.build/" title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs." />
|
||||
<Card href="https://astro.build/integrations/" title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries." />
|
||||
<Card href="https://astro.build/themes/" title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes." />
|
||||
<Card href="https://astro.build/chat/" title="Chat"
|
||||
body="Come say hi to our amazing Discord community. ❤️" />
|
||||
</ul>
|
||||
<PostCard client:visible />
|
||||
</main>
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
Check out the <code>src/pages</code> directory to get started.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card href="https://docs.astro.build/" title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs." />
|
||||
<Card href="https://astro.build/integrations/" title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries." />
|
||||
<Card href="https://astro.build/themes/" title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes." />
|
||||
<Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
|
||||
</ul>
|
||||
<ul class="list-decimal list-inside">
|
||||
<li th:text="#{foo}"></li>
|
||||
<li th:text="#{bar}"></li>
|
||||
<li th:text="#{hello('Ryan Wang')}"></li>
|
||||
</ul>
|
||||
<PostCard client:visible />
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
||||
}
|
||||
:root {
|
||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
font-weight: 900;
|
||||
background-image: var(--astro-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 100% 200%;
|
||||
background-position-y: 100%;
|
||||
border-radius: 0.4rem;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
.text-gradient {
|
||||
font-weight: 900;
|
||||
background-image: var(--astro-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 100% 200%;
|
||||
background-position-y: 100%;
|
||||
border-radius: 0.4rem;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position-y: 80%;
|
||||
}
|
||||
}
|
||||
50% {
|
||||
background-position-y: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
background: #4f39fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
background: #4f39fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
border: 0.1em solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
border: 0.1em solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.25em;
|
||||
}
|
||||
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user