cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-07-03 15:41:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update post nav format

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-04-18 21:46:01 +03:00
parent 804bfbd080
commit d9ae38197c
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Posts/PostNav.astro
View file

@ -43,7 +43,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
--- ---
<nav class="post-nav" aria-label="Post navigation"> <nav class="post-nav" aria-label="Post navigation">
<div class="post-nav-item post-nav-next"> <div class="post-nav-item post-nav-prev">
{ {
nextPost && nextSlug && ( nextPost && nextSlug && (
<a href={`/${lang}/posts/${nextSlug}/`}> <a href={`/${lang}/posts/${nextSlug}/`}>
@ -56,7 +56,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
} }
</div> </div>
<div class="post-nav-item post-nav-prev"> <div class="post-nav-item post-nav-next">
{ {
prevPost && prevSlug && ( prevPost && prevSlug && (
<a href={`/${lang}/posts/${prevSlug}/`}> <a href={`/${lang}/posts/${prevSlug}/`}>
@ -77,21 +77,23 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
gap: 1rem; gap: 1rem;
margin-top: 3rem; margin-top: 3rem;
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-top: 1px dashed rgba(128, 128, 128, 0.5); border-top: 1px dashed rgba(128, 128, 128, 0.5);
border-bottom: 1px dashed rgba(128, 128, 128, 0.5);
} }
.post-nav-item { .post-nav-item {
min-width: 0; min-width: 0;
} }
.post-nav-prev { .post-nav-next {
text-align: right; text-align: right;
} }
.post-nav a { .post-nav a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; /* color: inherit; */
} }
.post-nav-label { .post-nav-label {
@ -99,6 +101,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
font-size: 0.9rem; font-size: 0.9rem;
opacity: 0.65; opacity: 0.65;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
color: black;
} }
.post-nav-title { .post-nav-title {
@ -106,4 +109,14 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
} }
@media (max-width: 768px) {
.post-nav {
grid-template-columns: 1fr;
}
.post-nav-next {
text-align: right;
}
}
</style> </style>