feat: 样式调整
This commit is contained in:
@@ -1 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784382428422" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5545" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="5546"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="5547"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784628432297" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="9154"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="9155"></path></svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
@@ -46,12 +46,16 @@ import backTopIcon from "@/assets/icon/back-top.svg?url";
|
||||
display: none;
|
||||
}
|
||||
|
||||
.back-top :global(img) {
|
||||
.back-top img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:global(.dark) .back-top img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.back-top:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 4px;
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
---
|
||||
import { metadata } from "../consts";
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="content">
|
||||
<span>© 2026 {metadata.siteTitle}</span>
|
||||
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
|
||||
备案号：鄂ICP备2023000060号-2
|
||||
</a>
|
||||
@@ -12,22 +16,23 @@
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background: #ffffff;
|
||||
background: #22252b;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 2px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
color: #1f2937;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:global(.dark) footer {
|
||||
|
||||
@@ -28,7 +28,7 @@ import ThemeIcon from './ThemeIcon.astro'
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
||||
box-shadow: var(--shadow);
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -12,13 +12,14 @@ interface Props {
|
||||
|
||||
const {posts, page, totalPage, categories} = Astro.props
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<PostList posts={posts} page={page} totalPage={totalPage}/>
|
||||
|
||||
<IndexSidebar categories={categories}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
|
||||
@@ -94,10 +94,12 @@ posts.map((post) => {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.post-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.post-cover {
|
||||
flex-shrink: 0;
|
||||
@@ -233,8 +235,6 @@ posts.map((post) => {
|
||||
width: 128px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
|
||||
@@ -13,7 +13,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
@@ -28,7 +28,7 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
|
||||
</head>
|
||||
<body>
|
||||
<BaseHeader />
|
||||
<main>
|
||||
<main class="main">
|
||||
<slot />
|
||||
</main>
|
||||
<BaseFooter />
|
||||
|
||||
@@ -10,7 +10,7 @@ import Layout from "@/layouts/Layout.astro";
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.not-found{
|
||||
.not-found {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -20,7 +20,7 @@ import Layout from "@/layouts/Layout.astro";
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.back-home{
|
||||
.back-home {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import IndexView from "@/components/IndexView.astro";
|
||||
import type {Post, CategoriesStats} from "@/types/post";
|
||||
import {createHttp} from "@/lib/request";
|
||||
import {metadata} from "@/consts.ts";
|
||||
import type { Post, CategoriesStats } from "@/types/post";
|
||||
import { createHttp } from "@/lib/request";
|
||||
import { metadata } from "@/consts.ts";
|
||||
|
||||
const http = createHttp(Astro.request.headers)
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const {list, total} = await http.get<ApiPageResponse<Post>>("post", {
|
||||
const { list, total } = await http.get<ApiPageResponse<Post>>("post", {
|
||||
searchParams: {
|
||||
page: 1,
|
||||
page_size: metadata.postPageSize
|
||||
}
|
||||
page_size: metadata.postPageSize,
|
||||
},
|
||||
});
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize)
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize);
|
||||
|
||||
const {data: categories} = await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
|
||||
const { data: categories } =
|
||||
await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<IndexView categories={categories} posts={list} page={1} totalPage={totalPage}/>
|
||||
<IndexView
|
||||
categories={categories}
|
||||
posts={list}
|
||||
page={1}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
@@ -1,34 +1,40 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import type {CategoriesStats, Post} from "@/types/post";
|
||||
import {createHttp} from "@/lib/request";
|
||||
import {metadata} from "@/consts.ts";
|
||||
import type { CategoriesStats, Post } from "@/types/post";
|
||||
import { createHttp } from "@/lib/request";
|
||||
import { metadata } from "@/consts.ts";
|
||||
import IndexView from "@/components/IndexView.astro";
|
||||
|
||||
const {page} = Astro.params
|
||||
const { page } = Astro.params;
|
||||
|
||||
if (isNaN(Number(page))) {
|
||||
return Astro.redirect('/')
|
||||
return Astro.redirect("/");
|
||||
}
|
||||
|
||||
const http = createHttp(Astro.request.headers)
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
const {list, total} = await http.get<ApiPageResponse<Post>>("post", {
|
||||
const { list, total } = await http.get<ApiPageResponse<Post>>("post", {
|
||||
searchParams: {
|
||||
page,
|
||||
page_size: metadata.postPageSize
|
||||
}
|
||||
page_size: metadata.postPageSize,
|
||||
},
|
||||
});
|
||||
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize)
|
||||
const totalPage = Math.ceil(total / metadata.postPageSize);
|
||||
|
||||
if (totalPage < Number(page)) {
|
||||
return Astro.redirect('/404')
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
|
||||
const {data: categories} = await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
|
||||
const { data: categories } =
|
||||
await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<IndexView categories={categories} posts={list} page={Number(page)} totalPage={totalPage}/>
|
||||
<IndexView
|
||||
categories={categories}
|
||||
posts={list}
|
||||
page={Number(page)}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
@@ -1,56 +1,70 @@
|
||||
---
|
||||
import "@/styles/github-markdown.css"
|
||||
import "@/styles/github-markdown-reset.css"
|
||||
import "@/styles/github-markdown.css";
|
||||
import "@/styles/github-markdown-reset.css";
|
||||
import "photoswipe/dist/photoswipe.css";
|
||||
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import {createHttp} from "@/lib/request.ts";
|
||||
import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
|
||||
import {formatDatetime} from "@/lib/format.ts";
|
||||
import type {Post} from "@/types";
|
||||
import { createHttp } from "@/lib/request.ts";
|
||||
import { highlightHtmlWithJsdom } from "@/lib/highlight.js";
|
||||
import { formatDatetime } from "@/lib/format.ts";
|
||||
import type { Post } from "@/types";
|
||||
|
||||
const {slug} = Astro.params;
|
||||
const { slug } = Astro.params;
|
||||
|
||||
let data: Post;
|
||||
|
||||
const http = createHttp(Astro.request.headers)
|
||||
const http = createHttp(Astro.request.headers);
|
||||
|
||||
try {
|
||||
const res = await http.get<ApiResponse<Post>>(`post/${slug}`);
|
||||
data = res.data
|
||||
data = res.data;
|
||||
} catch (error) {
|
||||
return Astro.redirect("/404")
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
const content = await highlightHtmlWithJsdom(data.content)
|
||||
const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
|
||||
const content = await highlightHtmlWithJsdom(data.content);
|
||||
const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
||||
---
|
||||
|
||||
<Layout title={data.title} description={data.summary}>
|
||||
<div class="page-content">
|
||||
<div class="post">
|
||||
<h1 class="post-title">{data.title}</h1>
|
||||
|
||||
<div class="post-meta">
|
||||
<div class="published-at">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="lucide lucide-calendar-days-icon lucide-calendar-days">
|
||||
<path d="M8 2v4"/>
|
||||
<path d="M16 2v4"/>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2"/>
|
||||
<path d="M3 10h18"/>
|
||||
<path d="M8 14h.01"/>
|
||||
<path d="M12 14h.01"/>
|
||||
<path d="M16 14h.01"/>
|
||||
<path d="M8 18h.01"/>
|
||||
<path d="M12 18h.01"/>
|
||||
<path d="M16 18h.01"/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-calendar-days-icon lucide-calendar-days"
|
||||
>
|
||||
<path d="M8 2v4"></path>
|
||||
<path d="M16 2v4"></path>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
|
||||
<path d="M3 10h18"></path>
|
||||
<path d="M8 14h.01"></path>
|
||||
<path d="M12 14h.01"></path>
|
||||
<path d="M16 14h.01"></path>
|
||||
<path d="M8 18h.01"></path>
|
||||
<path d="M12 18h.01"></path>
|
||||
<path d="M16 18h.01"></path>
|
||||
</svg>
|
||||
{published_at}
|
||||
</div>
|
||||
|
||||
<div class="post-view">
|
||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="5122">
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="5122"
|
||||
>
|
||||
<path
|
||||
d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
|
||||
p-id="5123"></path>
|
||||
@@ -59,11 +73,8 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="markdown-body"
|
||||
data-color-mode="dark"
|
||||
set:html={content}
|
||||
></div>
|
||||
<div class="markdown-body" data-color-mode="dark" set:html={content} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -73,8 +84,7 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
|
||||
border: 1px solid #e7e8ec;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
@@ -140,43 +150,44 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox"
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
|
||||
const init = async () => {
|
||||
const post = document.querySelector('.post')!
|
||||
const images = Array.from(post.querySelectorAll('img'))
|
||||
const post = document.querySelector(".post")!;
|
||||
const images = Array.from(post.querySelectorAll("img"));
|
||||
|
||||
const waitImageLoaded = (img: HTMLImageElement) => {
|
||||
if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
|
||||
return Promise.resolve()
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
img.addEventListener("load", () => resolve(), {once: true})
|
||||
img.addEventListener("error", () => resolve(), {once: true})
|
||||
})
|
||||
}
|
||||
img.addEventListener("load", () => resolve(), { once: true });
|
||||
img.addEventListener("error", () => resolve(), { once: true });
|
||||
});
|
||||
};
|
||||
|
||||
await Promise.all(
|
||||
images.map(async (img) => {
|
||||
if (img.closest("a")) return
|
||||
if (img.closest("a")) return;
|
||||
|
||||
await waitImageLoaded(img)
|
||||
await waitImageLoaded(img);
|
||||
|
||||
const link = document.createElement("a")
|
||||
const link = document.createElement("a");
|
||||
|
||||
link.href = img.currentSrc || img.src
|
||||
link.target = "_blank"
|
||||
link.rel = "noreferrer"
|
||||
link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200)
|
||||
link.dataset.pswpHeight = String(img.naturalHeight || img.height || 800)
|
||||
link.href = img.currentSrc || img.src;
|
||||
link.target = "_blank";
|
||||
link.rel = "noreferrer";
|
||||
link.dataset.pswpWidth = String(img.naturalWidth || img.width || 1200);
|
||||
link.dataset.pswpHeight = String(
|
||||
img.naturalHeight || img.height || 800,
|
||||
);
|
||||
|
||||
img.parentNode?.insertBefore(link, img)
|
||||
link.appendChild(img)
|
||||
})
|
||||
)
|
||||
img.parentNode?.insertBefore(link, img);
|
||||
link.appendChild(img);
|
||||
}),
|
||||
);
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: ".post",
|
||||
@@ -192,10 +203,10 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
|
||||
bgOpacity: 0.5,
|
||||
tapAction: "close",
|
||||
bgClickAction: "close",
|
||||
})
|
||||
});
|
||||
|
||||
lightbox.init()
|
||||
}
|
||||
lightbox.init();
|
||||
};
|
||||
|
||||
init()
|
||||
init();
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
|
||||
--card-bg: #ffffff;
|
||||
--text: #2b2f36;
|
||||
--text-color: #2b2f36;
|
||||
--text-secondary: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
--primary: #2b2f36;
|
||||
@@ -16,7 +16,7 @@
|
||||
.dark {
|
||||
--background: #0a0a0a;
|
||||
--card-bg: #161b22;
|
||||
--text: #2b2f36;
|
||||
--text-color: #ffffff;
|
||||
--text-secondary: #e5e7eb;
|
||||
--border: #e5e7eb;
|
||||
--primary: #3d414a;
|
||||
@@ -24,18 +24,10 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: var(--background);
|
||||
color: #fff;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -43,18 +35,21 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: var(--layout-width);
|
||||
.main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 100%;
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user