beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 调整样式

Browse Source
This commit is contained in:
21 Guns
2025-11-24 21:29:14 +08:00
parent 7ea114d876
commit 4c20ee73d3
5 changed files with 64 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BaseFooter.astro
View File

@@ -1,16 +1,16 @@
<style> <style>
footer { footer {
background-color: #1a1a1a; background-color: #ffffff;
height: 70px; height: 70px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
} }
.content { .content {
color: aliceblue;
max-width: var(--layout-width); max-width: var(--layout-width);
margin: 0 auto; margin: 0 auto;
color: #f9f8f6; color: #1f2937;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;

23
src/components/BaseHeader.astro
View File

@@ -1,3 +1,7 @@
---
import { metadata } from "../consts";
---
<style> <style>
header { header {
height: 60px; height: 60px;
@@ -13,7 +17,17 @@
max-width: var(--layout-width); max-width: var(--layout-width);
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
padding: 0 16px; padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-nav h1 {
user-select: none;
font-size: 30px;
cursor: pointer;
font-size: 24px;
} }
.main-nav .menu { .main-nav .menu {
@@ -27,7 +41,6 @@
/* element: menu-item */ /* element: menu-item */
.main-nav .menu-item a { .main-nav .menu-item a {
text-decoration: none; text-decoration: none;
font-weight: bold;
} }
.main-nav .menu-item a:hover { .main-nav .menu-item a:hover {
@@ -36,8 +49,14 @@
<header> <header>
<nav class="main-nav"> <nav class="main-nav">
<h1>
<a href="/">{metadata.siteTitle}</a>
</h1>
<ul class="menu"> <ul class="menu">
<li class="menu-item"><a href="/">首页</a></li> <li class="menu-item"><a href="/">首页</a></li>
<li class="menu-item"><a href="/">文章</a></li>
<li class="menu-item"><a href="/">分类</a></li>
<li class="menu-item"><a href="/">关于</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

32
src/layouts/Layout.astro
View File

@@ -23,7 +23,6 @@ const { siteTitle } = metadata;
<body> <body>
<BaseHeader /> <BaseHeader />
<main> <main>
<div class="grid-background"></div>
<slot /> <slot />
</main> </main>
<BaseFooter /> <BaseFooter />
@@ -40,6 +39,7 @@ const { siteTitle } = metadata;
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fafafa;
} }
main { main {
@@ -47,34 +47,6 @@ const { siteTitle } = metadata;
max-width: var(--layout-width); max-width: var(--layout-width);
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 16px; padding: 32px;
position: relative;
}
.grid-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
opacity: 0.3;
background-image: linear-gradient(#d7edfb 2px, transparent 2px),
linear-gradient(90deg, #d7edfb 2px, transparent 2px),
linear-gradient(#d7edfb 1px, transparent 1px),
linear-gradient(90deg, #d7edfb 1px, #ffffff 1px);
background-size:
50px 50px,
50px 50px,
10px 10px,
10px 10px;
background-position:
-2px -2px,
-2px -2px,
-1px -1px,
-1px -1px;
} }
</style> </style>

21
src/pages/index.astro
View File

@@ -11,10 +11,13 @@ const posts = [
--- ---
<Layout> <Layout>
<div> <div class="posts">
{ {
posts.map((post) => ( posts.map((post) => (
<a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}> <a
class="post"
href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}
>
<h2>{post.title}</h2> <h2>{post.title}</h2>
<p>{post.date}</p> <p>{post.date}</p>
<p class="summary">{post.summary}</p> <p class="summary">{post.summary}</p>
@@ -25,8 +28,20 @@ const posts = [
</Layout> </Layout>
<style> <style>
.posts {
display: flex;
flex-direction: column;
gap: 20px;
}
.post {
background: #fff;
padding: 16px;
border-radius: 12px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
}
.summary { .summary {
line-height: 2;
font-size: 16px; font-size: 16px;
color: rgb(66, 63, 63); color: rgb(66, 63, 63);
} }

21
src/pages/posts/[...slug].astro
View File

@@ -2,8 +2,27 @@
import Layout from "@/layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
const { slug } = Astro.params; const { slug } = Astro.params;
const str = `
<h1>Sample Post Title</h1>
<p>This is a sample blog post content for the post with slug: </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
`;
--- ---
<Layout> <Layout>
<h1>Post Slug: {slug}</h1> <div class="post" set:html={str}>
</div>
</Layout> </Layout>
<style>
.post{
background: #fff;
border-radius: 12px;
overflow: auto;
padding: 16px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
}
</style>