mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-10-25 13:33:53 +00:00
update content width
This commit is contained in:
parent
566c5fa24a
commit
7c3bbfee42
4 changed files with 151 additions and 138 deletions
|
|
@ -9,30 +9,30 @@ const t = getTranslations(lang);
|
|||
---
|
||||
|
||||
<div class="header-slot">
|
||||
<header class="site-header">
|
||||
<div class="header-content">
|
||||
<div class="theme-icon-wrap">
|
||||
<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>
|
||||
<header class="site-header">
|
||||
<div class="header-content">
|
||||
<div class="theme-icon-wrap">
|
||||
<ThemeIcon />
|
||||
</div>
|
||||
<Navigation />
|
||||
</nav>
|
||||
</div>
|
||||
<div class="divider">
|
||||
<Divider />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<Navigation />
|
||||
</nav>
|
||||
</div>
|
||||
<div class="divider">
|
||||
<Divider />
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -165,10 +165,7 @@ const t = getTranslations(lang);
|
|||
width: var(--site-nav-width, auto);
|
||||
margin: var(--site-nav-margin, 1rem) 0;
|
||||
padding-bottom: var(--site-nav-padding, 1rem);
|
||||
transform: translate(
|
||||
var(--site-nav-x, 0),
|
||||
var(--site-nav-y, 0)
|
||||
);
|
||||
transform: translate(var(--site-nav-x, 0), var(--site-nav-y, 0));
|
||||
}
|
||||
|
||||
.site-header :global(.site-nav-desktop) {
|
||||
|
|
@ -207,7 +204,6 @@ const t = getTranslations(lang);
|
|||
font-size: clamp(1.25rem, 7vw, 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -330,9 +326,7 @@ const t = getTranslations(lang);
|
|||
12 * rootFontSize,
|
||||
);
|
||||
const compactSiteNavWidth = Math.max(
|
||||
expandedWidth -
|
||||
compactLogoWidth -
|
||||
7.5 * rootFontSize,
|
||||
expandedWidth - compactLogoWidth - 7.5 * rootFontSize,
|
||||
0,
|
||||
);
|
||||
const compactNavGap = Math.min(
|
||||
|
|
@ -406,8 +400,7 @@ const t = getTranslations(lang);
|
|||
) {
|
||||
if (!slot) return;
|
||||
|
||||
const headerIsFullyExpanded =
|
||||
currentScrollY >= HEADER_SCROLL_DISTANCE;
|
||||
const headerIsFullyExpanded = currentScrollY >= HEADER_SCROLL_DISTANCE;
|
||||
|
||||
slot.classList.toggle(
|
||||
"is-footer-hidden",
|
||||
|
|
|
|||
|
|
@ -18,78 +18,80 @@ const t = getTranslations(lang);
|
|||
description={frontmatter.description}
|
||||
image={frontmatter.image?.url}
|
||||
>
|
||||
<div id="reading-progress" aria-hidden="true"></div>
|
||||
<a
|
||||
href="/"
|
||||
class="back-button"
|
||||
id="back-button"
|
||||
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"
|
||||
<main class="post-layout">
|
||||
<div id="reading-progress" aria-hidden="true"></div>
|
||||
<a
|
||||
href="/"
|
||||
class="back-button"
|
||||
id="back-button"
|
||||
aria-label="Go back"
|
||||
title="返回"
|
||||
>
|
||||
<path d="M15 18l-6-6 6-6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<PostMenu headings={headings} />
|
||||
<PostMenu headings={headings} />
|
||||
|
||||
<article class="post-article">
|
||||
<div class="post-header">
|
||||
<div class="post-meta">
|
||||
<h1 class="post-title" transition:name={`post-title-${postId}`}>
|
||||
{frontmatter.title}
|
||||
</h1>
|
||||
<p class="description">
|
||||
<em>{frontmatter.description}</em>
|
||||
</p>
|
||||
<p class="meta-line">
|
||||
{t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
|
||||
</p>
|
||||
<p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
|
||||
<article class="post-article">
|
||||
<div class="post-header">
|
||||
<div class="post-meta">
|
||||
<h1 class="post-title" transition:name={`post-title-${postId}`}>
|
||||
{frontmatter.title}
|
||||
</h1>
|
||||
<p class="description">
|
||||
<em>{frontmatter.description}</em>
|
||||
</p>
|
||||
<p class="meta-line">
|
||||
{t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
|
||||
</p>
|
||||
<p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
|
||||
|
||||
<div class="tags" transition:name={`post-tags-${postId}`}>
|
||||
{
|
||||
frontmatter.tags.map((tag: string) => (
|
||||
<p class="tag">
|
||||
<a href={`/${lang}/tags/${tag}`}>{tag}</a>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
<div class="tags" transition:name={`post-tags-${postId}`}>
|
||||
{
|
||||
frontmatter.tags.map((tag: string) => (
|
||||
<p class="tag">
|
||||
<a href={`/${lang}/tags/${tag}`}>{tag}</a>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={frontmatter.image.url}
|
||||
alt={frontmatter.image.alt}
|
||||
class="post-cover"
|
||||
transition:name={`post-image-${postId}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
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-divider"></div>
|
||||
<div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="post-content" transition:animate={fade({ duration: "0.2s" })}>
|
||||
<slot />
|
||||
</div>
|
||||
<Dialog />
|
||||
|
||||
<Dialog />
|
||||
<PostNav post={post} lang={lang} />
|
||||
|
||||
<PostNav post={post} lang={lang} />
|
||||
|
||||
<h2>{comments}</h2>
|
||||
{t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
|
||||
<Remark42Embed slug={slug} />
|
||||
</article>
|
||||
<h2>{comments}</h2>
|
||||
{t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
|
||||
<Remark42Embed slug={slug} />
|
||||
</article>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<script
|
||||
|
|
@ -169,6 +171,11 @@ const t = getTranslations(lang);
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.post-layout {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#reading-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -14,51 +14,58 @@ const lang = getLangFromUrl(Astro.url);
|
|||
const t = getTranslations(lang);
|
||||
const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
|
||||
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}`>
|
||||
<h1 class="page-title">
|
||||
<span>{pageTitle}</span>
|
||||
<a
|
||||
href={rssLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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"
|
||||
<main class="index">
|
||||
<h1 class="page-title">
|
||||
<span>{pageTitle}</span>
|
||||
<a
|
||||
href={rssLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="RSS Feed"
|
||||
class="rss-link"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
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 /> -->
|
||||
<LatestComments />
|
||||
<!-- <Remark42LatestComments lang={lang} client:load /> -->
|
||||
<LatestComments />
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.index {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: #cdd2d8;
|
||||
|
|
|
|||
|
|
@ -16,21 +16,27 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
|
|||
---
|
||||
|
||||
<BaseLayout pageTitle=`${pageTitle} - ${t.banner.title}`>
|
||||
<h1>{t.tags.title}</h1>
|
||||
<p>{t.tags.description}</p>
|
||||
<main class="tags-layout">
|
||||
<h1>{t.tags.title}</h1>
|
||||
<p>{t.tags.description}</p>
|
||||
|
||||
<div class="tags">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<p class="tag" transition:name={`post-tags-${tag}`}>
|
||||
<a href={`/${lang}/tags/${tag}`}>{tag}</a>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="tags">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<p class="tag" transition:name={`post-tags-${tag}`}>
|
||||
<a href={`/${lang}/tags/${tag}`}>{tag}</a>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.tags-layout {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
Loading…
Reference in a new issue