mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +02:00
refactor: remove back button and adjust page detail styles
This commit is contained in:
parent
d58cbcc786
commit
fef42675c0
10 changed files with 11 additions and 45 deletions
|
@ -1,32 +0,0 @@
|
||||||
<button
|
|
||||||
aria-label="Go back"
|
|
||||||
id="back-button"
|
|
||||||
class="aspect-square w-4 c-secondary active:scale-90"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path d="M12.7 1.7.9 12.1l11.8 10.3.2 1.5h.9l-.6-5.4h-.9l.2 2.4-9.2-8h19.8v-1.6H4.2L12.4 4l-.2 2.3h.9l.6-6.3h-.9l-.2 1.6Z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function setupBackButton() {
|
|
||||||
const backButton = document.getElementById('back-button')
|
|
||||||
if (backButton) {
|
|
||||||
backButton.addEventListener('click', (e) => {
|
|
||||||
if (window.history.length > 2) {
|
|
||||||
e.preventDefault()
|
|
||||||
window.history.back()
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('astro:after-swap', setupBackButton)
|
|
||||||
setupBackButton()
|
|
||||||
</script>
|
|
|
@ -14,7 +14,7 @@ const marginBottom = {
|
||||||
}[titleSpace] || 'mb-2.875'
|
}[titleSpace] || 'mb-2.875'
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="mb-12.25 lg:hidden">
|
<header class="mb-10.625 lg:hidden">
|
||||||
<h3 class={`${marginBottom} mt-2.9375 text-5.375 c-secondary font-bold font-title`}>
|
<h3 class={`${marginBottom} mt-2.9375 text-5.375 c-secondary font-bold font-title`}>
|
||||||
<!-- Fix text cut issue on ios by adding a div tag -->
|
<!-- Fix text cut issue on ios by adding a div tag -->
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -4,4 +4,4 @@ published: 2024-01-25
|
||||||
tags: ["Astro", "Markdown"]
|
tags: ["Astro", "Markdown"]
|
||||||
---
|
---
|
||||||
|
|
||||||
一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题,最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范,对原主题的所有页面进行重新编排,尽力还原传统印刷的阅读体验,同时不失现代设计的简约感受。所见皆为细节,方寸尽显优雅。
|
一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题,最初灵感来主题介绍自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范,对原主题的所有页面进行重新编排,尽力还原传统印刷的阅读体验,同时不失现代设计的简约感受。所见皆为细节,方寸尽显优雅。
|
||||||
|
|
|
@ -51,7 +51,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
|
||||||
<main class="col-start-1 row-start-1">
|
<main class="col-start-1 row-start-1">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
<Footer class="mt-12 block lg:hidden" />
|
<Footer class="mt-13 block lg:hidden" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- fix position issue on ios -->
|
<!-- fix position issue on ios -->
|
||||||
|
|
|
@ -3,7 +3,7 @@ import Layout from '@/layouts/Layout.astro'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<div class="h-0.125 w-10 bg-secondary opacity-25"></div>
|
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
|
||||||
<div class="heti mt-4.375">
|
<div class="heti mt-4.375">
|
||||||
<p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题,最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范,对原主题的所有页面进行重新编排,尽力还原传统印刷的阅读体验,同时不失现代设计的简约感受。所见皆为细节,方寸尽显优雅。</p>
|
<p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题,最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题通过建立统一的视觉规范,对原主题的所有页面进行重新编排,尽力还原传统印刷的阅读体验,同时不失现代设计的简约感受。所见皆为细节,方寸尽显优雅。</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -30,7 +30,7 @@ const postsByYear = await getPostsByYear()
|
||||||
// Year Group
|
// Year Group
|
||||||
<section class="mb-7.5">
|
<section class="mb-7.5">
|
||||||
{/* Decorative Line */}
|
{/* Decorative Line */}
|
||||||
<div class="h-0.125 w-10 bg-secondary opacity-25"></div>
|
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
|
||||||
{/* Posts List */}
|
{/* Posts List */}
|
||||||
<ul>
|
<ul>
|
||||||
{posts.map(post => (
|
{posts.map(post => (
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
---
|
---
|
||||||
import BackButton from '@/components/BackButton.astro'
|
|
||||||
import Layout from '@/layouts/Layout.astro'
|
import Layout from '@/layouts/Layout.astro'
|
||||||
import { checkSlugDuplication } from '@/utils/content'
|
import { checkSlugDuplication } from '@/utils/content'
|
||||||
import { generatePostPaths } from '@/utils/i18n'
|
import { generatePostPaths } from '@/utils/i18n'
|
||||||
|
@ -26,7 +25,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
||||||
postImage={post.data.image}
|
postImage={post.data.image}
|
||||||
>
|
>
|
||||||
<article class="heti">
|
<article class="heti">
|
||||||
<BackButton />
|
|
||||||
<h1 class="post-title">
|
<h1 class="post-title">
|
||||||
<span
|
<span
|
||||||
transition:name={`post-${post.data.slug || post.slug}`}
|
transition:name={`post-${post.data.slug || post.slug}`}
|
||||||
|
@ -37,7 +35,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mb-11.75 block c-primary font-time"
|
class="mb-15.5 block c-primary font-time"
|
||||||
transition:name={`time-${post.data.slug || post.slug}`}
|
transition:name={`time-${post.data.slug || post.slug}`}
|
||||||
data-disable-transition-on-theme
|
data-disable-transition-on-theme
|
||||||
>
|
>
|
||||||
|
@ -51,8 +49,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
||||||
<Content />
|
<Content />
|
||||||
|
|
||||||
{post.data.tags && post.data.tags.length > 0 && (
|
{post.data.tags && post.data.tags.length > 0 && (
|
||||||
<div class="mt-11.75">
|
<div class="mt-11.125">
|
||||||
<div class="h-0.125 w-10 bg-secondary opacity-25"></div>
|
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
|
||||||
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
||||||
{post.data.tags.map(tag => (
|
{post.data.tags.map(tag => (
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -16,7 +16,7 @@ const allTags = await getAllTags()
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<div class="h-0.125 w-10 bg-secondary opacity-25"></div>
|
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
|
||||||
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
||||||
{allTags.map(tag => (
|
{allTags.map(tag => (
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -6,7 +6,7 @@ const allTags = await getAllTags()
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<div class="h-0.125 w-10 bg-secondary opacity-25"></div>
|
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
|
||||||
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
|
||||||
{allTags.map(tag => (
|
{allTags.map(tag => (
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -115,7 +115,7 @@
|
||||||
font-weight:600
|
font-weight:600
|
||||||
}
|
}
|
||||||
.heti .post-title {
|
.heti .post-title {
|
||||||
--at-apply: 'mt-2 c-primary mb-2 font-bold text-9 leading-12';
|
--at-apply: 'c-primary mb-2 font-bold text-9 leading-12';
|
||||||
line-height:48px
|
line-height:48px
|
||||||
}
|
}
|
||||||
.heti h1 {
|
.heti h1 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue