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
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"
>
{

3
src/config/index.ts
View file

@ -39,7 +39,8 @@ export const common = {
enabled: true,
twikoo: {
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 { GoogleAnalytics } from "astro-google-analytics"
import { en, zh } from "~/config"
import { ClientRouter } from "astro:transitions"
const lang = getLangFromUrl(Astro.url)
@ -88,6 +89,8 @@ const config = lang === "zh" ? zh : en
<GoogleAnalytics id={config.googleAnalyticsId} />
)
}
<ClientRouter />
</head>
<body
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 />
<Navigation />
<slot />
<div class="my-20">
<div class="mt-20">
{needComment && <Comments />}
</div>
</main>

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

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

19
src/styles/comment.css
View file

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