l/wrath
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: optimize the comment area style

Browse source
This commit is contained in:
Guoqi Sun 2024-12-23 07:16:03 +08:00
parent 7aa4f33167
commit 18cfd0d7dd
7 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore
View file

@ -1,2 +0,0 @@
# tailwind
tailwind.config.ts

1
src/components/astro/nav.astro
View file

@ -10,6 +10,7 @@ const { home, archive, custom, links, about } =
--- ---
<div <div
transition:persist
class="mb-10 mt-4 flex gap-4 overflow-x-auto whitespace-nowrap text-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" class="mb-10 mt-4 flex gap-4 overflow-x-auto whitespace-nowrap text-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
> >
{ {

3
src/config/index.ts
View file

@ -39,7 +39,8 @@ export const common = {
enabled: true, enabled: true,
twikoo: { twikoo: {
enabled: true, enabled: true,
envId: "https://astro-air-twikoo.netlify.app/.netlify/functions/twikoo", // replace with your own envId
envId: import.meta.env.PUBLIC_TWIKOO_ENV_ID ?? "",
}, },
}, },
} }

3
src/layouts/base.astro
View file

@ -4,6 +4,7 @@ import { NoiseBackground } from "~/components/react/noise-background"
import { getLangFromUrl } from "~/i18n/utils" import { getLangFromUrl } from "~/i18n/utils"
import { GoogleAnalytics } from "astro-google-analytics" import { GoogleAnalytics } from "astro-google-analytics"
import { en, zh } from "~/config" import { en, zh } from "~/config"
import { ClientRouter } from "astro:transitions"
const lang = getLangFromUrl(Astro.url) const lang = getLangFromUrl(Astro.url)
@ -88,6 +89,8 @@ const config = lang === "zh" ? zh : en
<GoogleAnalytics id={config.googleAnalyticsId} /> <GoogleAnalytics id={config.googleAnalyticsId} />
) )
} }
<ClientRouter />
</head> </head>
<body <body
class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0" class="flex min-h-screen w-full justify-center px-6 dark:bg-[#121212] dark:text-white md:px-0"

2
src/layouts/main.astro
View file

@ -19,7 +19,7 @@ const openGraphImage = !ogImage ? `/og/${filename}.png` : ogImage
<Header /> <Header />
<Navigation /> <Navigation />
<slot /> <slot />
<div class="my-20"> <div class="mt-20">
{needComment && <Comments />} {needComment && <Comments />}
</div> </div>
</main> </main>

2
src/pages/[lang]/posts/[...slug].astro
View file

@ -52,9 +52,9 @@ const { Content } = await render(post)
)) ))
} }
</div> </div>
</article>
<div class="my-10"> <div class="my-10">
<Comments /> <Comments />
</div> </div>
</article>
</MainLayout> </MainLayout>

17
src/styles/comment.css
View file

@ -1,13 +1,13 @@
/* loading spinner */
.el-loading-spinner {
left: 50% !important;
}
/* admin container height */ /* admin container height */
.tk-admin-container { .tk-admin-container {
height: 150% !important; height: 150% !important;
} }
/* comments container */
.tk-comments-container {
margin-top: 50px !important;
}
/* avatar*/ /* avatar*/
.tk-avatar { .tk-avatar {
background-color: transparent !important; background-color: transparent !important;
@ -27,9 +27,14 @@
border-radius: 10px !important; border-radius: 10px !important;
padding: 10px !important; padding: 10px !important;
background-color: rgba(144, 147, 153, 0.1) !important; background-color: rgba(144, 147, 153, 0.1) !important;
width: auto !important; }
/* PC 端宽度调整 */
@media screen and (min-width: 768px) {
.tk-main .tk-content {
max-width: 60% !important; max-width: 60% !important;
} }
}
/* comment content image */ /* comment content image */