cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-10-25 21:43:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update content width

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-09-17 13:35:59 +08:00
parent 566c5fa24a
commit 7c3bbfee42
4 changed files with 151 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/Header.astro
View file

@ -9,30 +9,30 @@ const t = getTranslations(lang);
--- ---
<div class="header-slot"> <div class="header-slot">
<header class="site-header"> <header class="site-header">
<div class="header-content"> <div class="header-content">
<div class="theme-icon-wrap"> <div class="theme-icon-wrap">
<ThemeIcon /> <ThemeIcon />
</div>
<nav class="header-nav">
<div class="banner">
<a
href={`/${lang}/`}
data-astro-reload
class="banner-link"
aria-label="banner"
>
<span class="banner-logo"></span>
</a>
</div> </div>
<Navigation />
</nav> <nav class="header-nav">
</div> <div class="banner">
<div class="divider"> <a
<Divider /> href={`/${lang}/`}
</div> data-astro-reload
</header> class="banner-link"
aria-label="banner"
>
<span class="banner-logo"></span>
</a>
</div>
<Navigation />
</nav>
</div>
<div class="divider">
<Divider />
</div>
</header>
</div> </div>
<style> <style>
@ -165,10 +165,7 @@ const t = getTranslations(lang);
width: var(--site-nav-width, auto); width: var(--site-nav-width, auto);
margin: var(--site-nav-margin, 1rem) 0; margin: var(--site-nav-margin, 1rem) 0;
padding-bottom: var(--site-nav-padding, 1rem); padding-bottom: var(--site-nav-padding, 1rem);
transform: translate( transform: translate(var(--site-nav-x, 0), var(--site-nav-y, 0));
var(--site-nav-x, 0),
var(--site-nav-y, 0)
);
} }
.site-header :global(.site-nav-desktop) { .site-header :global(.site-nav-desktop) {
@ -207,7 +204,6 @@ const t = getTranslations(lang);
font-size: clamp(1.25rem, 7vw, 2rem); font-size: clamp(1.25rem, 7vw, 2rem);
} }
} }
</style> </style>
<script> <script>
@ -330,9 +326,7 @@ const t = getTranslations(lang);
12 * rootFontSize, 12 * rootFontSize,
); );
const compactSiteNavWidth = Math.max( const compactSiteNavWidth = Math.max(
expandedWidth - expandedWidth - compactLogoWidth - 7.5 * rootFontSize,
compactLogoWidth -
7.5 * rootFontSize,
0, 0,
); );
const compactNavGap = Math.min( const compactNavGap = Math.min(
@ -406,8 +400,7 @@ const t = getTranslations(lang);
) { ) {
if (!slot) return; if (!slot) return;
const headerIsFullyExpanded = const headerIsFullyExpanded = currentScrollY >= HEADER_SCROLL_DISTANCE;
currentScrollY >= HEADER_SCROLL_DISTANCE;
slot.classList.toggle( slot.classList.toggle(
"is-footer-hidden", "is-footer-hidden",

129
src/layouts/MarkdownPostLayout.astro
View file

@ -18,78 +18,80 @@ const t = getTranslations(lang);
description={frontmatter.description} description={frontmatter.description}
image={frontmatter.image?.url} image={frontmatter.image?.url}
> >
<div id="reading-progress" aria-hidden="true"></div> <main class="post-layout">
<a <div id="reading-progress" aria-hidden="true"></div>
href="/" <a
class="back-button" href="/"
id="back-button" class="back-button"
aria-label="Go back" id="back-button"
title="返回" aria-label="Go back"
> title="返回"
<svg
viewBox="0 0 24 24"
width="20"
height="20"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
> >
<path d="M15 18l-6-6 6-6"></path> <svg
</svg> viewBox="0 0 24 24"
</a> width="20"
height="20"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M15 18l-6-6 6-6"></path>
</svg>
</a>
<PostMenu headings={headings} /> <PostMenu headings={headings} />
<article class="post-article"> <article class="post-article">
<div class="post-header"> <div class="post-header">
<div class="post-meta"> <div class="post-meta">
<h1 class="post-title" transition:name={`post-title-${postId}`}> <h1 class="post-title" transition:name={`post-title-${postId}`}>
{frontmatter.title} {frontmatter.title}
</h1> </h1>
<p class="description"> <p class="description">
<em>{frontmatter.description}</em> <em>{frontmatter.description}</em>
</p> </p>
<p class="meta-line"> <p class="meta-line">
{t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()} {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
</p> </p>
<p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p> <p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
<div class="tags" transition:name={`post-tags-${postId}`}> <div class="tags" transition:name={`post-tags-${postId}`}>
{ {
frontmatter.tags.map((tag: string) => ( frontmatter.tags.map((tag: string) => (
<p class="tag"> <p class="tag">
<a href={`/${lang}/tags/${tag}`}>{tag}</a> <a href={`/${lang}/tags/${tag}`}>{tag}</a>
</p> </p>
)) ))
} }
</div>
</div> </div>
<img
src={frontmatter.image.url}
alt={frontmatter.image.alt}
class="post-cover"
transition:name={`post-image-${postId}`}
/>
</div> </div>
<img <div class="post-divider"></div>
src={frontmatter.image.url}
alt={frontmatter.image.alt}
class="post-cover"
transition:name={`post-image-${postId}`}
/>
</div>
<div class="post-divider"></div> <div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
<slot />
</div>
<div class="post-content" transition:animate={fade({ duration: "0.2s" })}> <Dialog />
<slot />
</div>
<Dialog /> <PostNav post={post} lang={lang} />
<PostNav post={post} lang={lang} /> <h2>{comments}</h2>
{t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
<h2>{comments}</h2> <Remark42Embed slug={slug} />
{t.post.commentsDesc.map((line: string) => <p set:html={line} />)} </article>
<Remark42Embed slug={slug} /> </main>
</article>
</BaseLayout> </BaseLayout>
<script <script
@ -169,6 +171,11 @@ const t = getTranslations(lang);
</script> </script>
<style> <style>
.post-layout {
max-width: 850px;
margin: 0 auto;
}
#reading-progress { #reading-progress {
position: fixed; position: fixed;
top: 0; top: 0;

73
src/pages/[lang]/index.astro
View file

@ -14,51 +14,58 @@ const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang); const t = getTranslations(lang);
const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog"; const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
const pageTitle = t.home.title; const pageTitle = t.home.title;
const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml" const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
--- ---
<BaseLayout pageTitle=`${headerTitle} - ${t.banner.subtitle}`> <BaseLayout pageTitle=`${headerTitle} - ${t.banner.subtitle}`>
<h1 class="page-title"> <main class="index">
<span>{pageTitle}</span> <h1 class="page-title">
<a <span>{pageTitle}</span>
href={rssLink} <a
target="_blank" href={rssLink}
rel="noopener noreferrer" target="_blank"
aria-label="RSS Feed" rel="noopener noreferrer"
class="rss-link" aria-label="RSS Feed"
> class="rss-link"
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="33"
height="33"
aria-hidden="true"
style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
> >
<path <svg
d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z" xmlns="http://www.w3.org/2000/svg"
></path> viewBox="0 0 24 24"
</svg> fill="currentColor"
</a> width="33"
</h1> height="33"
<div class="content"> aria-hidden="true"
{t.home.content.map((line: string) => <p set:html={line} />)} style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
</div> >
<path
d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z"
></path>
</svg>
</a>
</h1>
<div class="content">
{t.home.content.map((line: string) => <p set:html={line} />)}
</div>
<div class="section-divider"></div> <div class="section-divider"></div>
<h2>{t.home.latestTitle}</h2> <h2>{t.home.latestTitle}</h2>
<PostList /> <PostList />
<div class="section-divider"></div> <div class="section-divider"></div>
<!-- <Remark42LatestComments lang={lang} client:load /> --> <!-- <Remark42LatestComments lang={lang} client:load /> -->
<LatestComments /> <LatestComments />
</main>
</BaseLayout> </BaseLayout>
<style> <style>
.index {
max-width: 850px;
margin: 0 auto;
}
.section-divider { .section-divider {
height: 1px; height: 1px;
background: #cdd2d8; background: #cdd2d8;

28
src/pages/[lang]/tags/index.astro
View file

@ -16,21 +16,27 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
--- ---
<BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`> <BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`>
<h1>{t.tags.title}</h1> <main class="tags-layout">
<p>{t.tags.description}</p> <h1>{t.tags.title}</h1>
<p>{t.tags.description}</p>
<div class="tags"> <div class="tags">
{ {
tags.map((tag) => ( tags.map((tag) => (
<p class="tag" transition:name={`post-tags-${tag}`}> <p class="tag" transition:name={`post-tags-${tag}`}>
<a href={`/${lang}/tags/${tag}`}>{tag}</a> <a href={`/${lang}/tags/${tag}`}>{tag}</a>
</p> </p>
)) ))
} }
</div> </div>
</main>
</BaseLayout> </BaseLayout>
<style> <style>
.tags-layout {
max-width: 850px;
margin: 0 auto;
}
.tags { .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;