Ryan Wang
+38
-33
@@ -1,6 +1,6 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props as Props;
|
||||
@@ -10,48 +10,53 @@ const { title } = Astro.props as Props;
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<slot />
|
||||
<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>
|
||||
<slot />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<style>
|
||||
:root {
|
||||
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||
:root {
|
||||
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||
|
||||
--color-text: hsl(12, 5%, 4%);
|
||||
--color-bg: hsl(10, 21%, 95%);
|
||||
--color-border: hsl(17, 24%, 90%);
|
||||
}
|
||||
--color-text: hsl(12, 5%, 4%);
|
||||
--color-bg: hsl(10, 21%, 95%);
|
||||
--color-border: hsl(17, 24%, 90%);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(h1) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
:global(h1) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
:global(h2) {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
:global(h2) {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
:global(code) {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
</style>
|
||||
:global(code) {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,7 +37,7 @@ import PostCard from "../components/PostCard.vue"
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 60ch;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
@@ -85,4 +85,4 @@ import PostCard from "../components/PostCard.vue"
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
||||
const links = [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Ryan Wang's Blog",
|
||||
"url": "https://ryanc.cc/",
|
||||
"logo": "https://ryanc.cc/avatar",
|
||||
"description": "Hello Halo",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"name": "guqing's blog",
|
||||
"url": "https://www.guqing.xyz/",
|
||||
"logo": "https://www.guqing.xyz/avatar",
|
||||
"description": "毕生所求无它，爱与自由而已",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 104,
|
||||
"name": "JohnNiang's Blog",
|
||||
"url": "https://johnniang.me",
|
||||
"logo": "https://johnniang.me/avatar",
|
||||
"description": "Core contributor of Halo organization.",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
{
|
||||
"id": 152,
|
||||
"name": "烟霞志",
|
||||
"url": "https://simplestark.com",
|
||||
"logo": "https://simplestark.com/avatar",
|
||||
"description": "空有烟霞之志，叹无水云之身。",
|
||||
"team": "",
|
||||
"priority": 0
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="Links">
|
||||
<main>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2">
|
||||
|
||||
{links.map((data) => <a href={data.url} th:href="#{data.url}" target="_blank">
|
||||
<div
|
||||
class="relative rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:shadow flex items-center space-x-3 hover:border-gray-400">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-12 w-12 rounded-full" th:src="#{data.logo}" th:alt="#{data.name}" src={data.logo}
|
||||
alt={data.name}>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900 truncate" th:text="#{data.name}">{data.name}</p>
|
||||
<p class="text-sm text-gray-500 truncate" th:text="#{data.description}">{data.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>)}
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user