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

style: 优化移动端ui

Browse Source
This commit is contained in:
21 Guns
2026-08-15 21:45:31 +08:00
parent 560f6f29ea
commit 80d461f0e2
4 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/IndexPage.astro
View File

@@ -3,6 +3,7 @@ import {siteConfig} from "@/consts.ts";
import PostList from "@/components/Post/List.astro";
import Pagination from "@/components/Post/Pagination.astro";
import type {Post} from "@/types";
import PageHeader from "@/components/PageHeader.astro";
const {siteTitle} = siteConfig;
@@ -16,22 +17,12 @@ const {posts, page, totalPage} = Astro.props
---
<div class="page-content">
<header>
<div class="top">
<h1>{siteTitle}</h1>
<!--<nav>-->
<!-- <span>归档</span>-->
<!-- <span>/</span>-->
<!-- <span>标签</span>-->
<!-- <span>/</span>-->
<!-- <span>关于</span>-->
<!--</nav>-->
</div>
<div class="intro">
<p>did you stand too close to the fire?<br>
like a liar looking for forgiveness from a stone.</p>
</div>
</header>
<PageHeader/>
<div class="intro">
<p>did you stand too close to the fire?<br>
like a liar looking for forgiveness from a stone.</p>
</div>
<main>
<PostList posts={posts}/>
@@ -53,24 +44,6 @@ const {posts, page, totalPage} = Astro.props
gap: 24px;
}
header {
margin-bottom: 24px;
margin-top: 48px;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border-primary);
padding-bottom: 16px;
}
h1 {
font-size: 24px;
font-weight: 600;
}
nav {
display: flex;
gap: 12px;
@@ -79,11 +52,12 @@ const {posts, page, totalPage} = Astro.props
}
.intro {
padding: 28px 0;
border-bottom: var(--border-secondary);
line-height: 2;
font-size: 15px;
color: var(--text-secondary);
padding-bottom: 32px;
margin-bottom: 12px;
}
main {
@@ -104,4 +78,15 @@ const {posts, page, totalPage} = Astro.props
gap: 12px;
color: var(--text-tertiary);
}
@media (max-width: 640px) {
.page-content {
gap: 24px;
}
footer {
height: 64px;
padding-bottom: 0;
}
}
</style>

38
src/components/PageHeader.astro Normal file
View File

@@ -0,0 +1,38 @@
---
import {siteConfig} from "@/consts.ts";
const {siteTitle} = siteConfig;
---
<header>
<a href="/"><h1>{siteTitle}</h1></a>
<!--<nav>-->
<!-- <span>归档</span>-->
<!-- <span>/</span>-->
<!-- <span>标签</span>-->
<!-- <span>/</span>-->
<!-- <span>关于</span>-->
<!--</nav>-->
</header>
<style>
header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border-primary);
margin-top: 32px;
padding-bottom: 24px;
}
h1 {
font-size: 24px;
font-weight: 600;
}
@media (max-width: 640px) {
header {
margin-top: 24px;
margin-bottom: 0;
}
}
</style>

2
src/components/Post/List.astro
View File

@@ -39,7 +39,7 @@ const {posts} = Astro.props
}
.post h2 {
font-size: 17px;
font-size: 16px;
font-weight: 500;
flex: 1;
white-space: nowrap;

37
src/pages/post/[...slug].astro
View File

@@ -4,6 +4,7 @@ import "@/styles/github-markdown-reset.css";
import "photoswipe/dist/photoswipe.css";
import Layout from '@/layouts/Layout.astro';
import PageHeader from '@/components/PageHeader.astro';
import {createHttp} from "@/lib/request.ts";
import type {Post} from "@/types";
import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
@@ -31,10 +32,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
<Layout title={data.title} description="">
<div class="page-container">
<nav class="nav">
<a class="nav-title" href="/">{siteTitle}</a>
<a href="/">← 返回首页</a>
</nav>
<PageHeader />
<article>
<div class="meta">
@@ -69,39 +67,18 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
<style>
.page-container {
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.nav {
flex-shrink: 0;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
width: 100%;
}
.nav a {
color: #999;
text-decoration: none;
}
.nav-title {
font-size: 16px;
}
.nav a:hover {
color: #24292e;
}
article {
width: 100%;
margin: 0 auto;
padding: 48px 0 0;
padding: 24px 0 24px 0;
flex: 1;
flex-shrink: 0;
}
@@ -125,7 +102,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
}
h1 {
font-size: 32px;
font-size: 28px;
line-height: 1.4;
font-weight: 400;
margin: 20px 0 20px;
@@ -149,7 +126,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
}
.tags {
margin-top: 44px;
margin-top: 24px;
display: flex;
gap: 10px;
flex-wrap: wrap;
@@ -166,7 +143,7 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
footer{
flex-shrink: 0;
width: 100%;
margin-top: 44px;
margin-top: 24px;
border-top: var(--border-secondary);
height: 66px;
display: flex;