mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
update: optimize theme color scheme and waline style
This commit is contained in:
radishzzz
parent
755bb4a233
commit
eb3781bb6b
6 changed files with 117 additions and 21 deletions
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
|
@ -101,6 +101,7 @@
|
|||
"unpic",
|
||||
"vite",
|
||||
"waline",
|
||||
"walinejs",
|
||||
"weibo",
|
||||
"Посты",
|
||||
"себе",
|
||||
|
|
|
|||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
|
|
@ -1699,8 +1699,8 @@ packages:
|
|||
peerDependencies:
|
||||
eslint: '*'
|
||||
|
||||
eslint-plugin-antfu@3.1.0:
|
||||
resolution: {integrity: sha512-BKlJcpIG8OGyU5JwQCdyTGaLuRgItheEYinhNroCx3bcuz2bCSYK0eNzJvPy2TY8yyz0uSSRxr5KHuQ1WOdOKg==}
|
||||
eslint-plugin-antfu@3.1.1:
|
||||
resolution: {integrity: sha512-7Q+NhwLfHJFvopI2HBZbSxWXngTwBLKxW1AGXLr2lEGxcEIK/AsDs8pn8fvIizl5aZjBbVbVK5ujmMpBe4Tvdg==}
|
||||
peerDependencies:
|
||||
eslint: '*'
|
||||
|
||||
|
|
@ -3821,7 +3821,7 @@ snapshots:
|
|||
eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
|
||||
eslint-flat-config-utils: 2.0.1
|
||||
eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.4.2))
|
||||
eslint-plugin-antfu: 3.1.0(eslint@9.21.0(jiti@2.4.2))
|
||||
eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@2.4.2))
|
||||
eslint-plugin-command: 3.1.0(eslint@9.21.0(jiti@2.4.2))
|
||||
eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
|
||||
eslint-plugin-jsdoc: 50.6.3(eslint@9.21.0(jiti@2.4.2))
|
||||
|
|
@ -5615,7 +5615,7 @@ snapshots:
|
|||
dependencies:
|
||||
eslint: 9.21.0(jiti@2.4.2)
|
||||
|
||||
eslint-plugin-antfu@3.1.0(eslint@9.21.0(jiti@2.4.2)):
|
||||
eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@2.4.2)):
|
||||
dependencies:
|
||||
eslint: 9.21.0(jiti@2.4.2)
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ function initWaline() {
|
|||
requiredMeta: ['nick', 'mail'],
|
||||
highlighter: false,
|
||||
texRenderer: false,
|
||||
noCopyright: true,
|
||||
reaction: [],
|
||||
...walineConfig,
|
||||
})
|
||||
|
|
@ -53,12 +54,105 @@ document.addEventListener('astro:after-swap', initWaline)
|
|||
</script>
|
||||
|
||||
<style is:global>
|
||||
#waline .wl-panel {
|
||||
--at-apply: 'm-0 rounded-2';
|
||||
}
|
||||
#waline .wl-editor::placeholder {
|
||||
color: var(--waline-light-grey);
|
||||
}
|
||||
#waline {
|
||||
.wl-panel {
|
||||
--at-apply: 'm-0 rounded-2';
|
||||
}
|
||||
.wl-editor::placeholder {
|
||||
color: var(--waline-light-grey);
|
||||
}
|
||||
/* .wl-btn.primary {
|
||||
border-color: var(--waline-light-grey);
|
||||
color: var(--waline-color);
|
||||
background: none;
|
||||
} */
|
||||
.wl-text-number {
|
||||
display: none;
|
||||
}
|
||||
.wl-action[title="Markdown Guide"] {
|
||||
display: none;
|
||||
}
|
||||
.wl-emoji-popup {
|
||||
inset-inline-start: 0;
|
||||
.wl-tab-wrapper {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* .wl-editor {
|
||||
min-height: 6rem;
|
||||
} */
|
||||
/* .wl-card-item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
} */
|
||||
.wl-meta-head {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.wl-sort {
|
||||
display: none;
|
||||
}
|
||||
.wl-card {
|
||||
border-bottom: none;
|
||||
}
|
||||
.wl-footer {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
/* .wl-comment {
|
||||
margin-bottom: 2rem;
|
||||
} */
|
||||
.wl-header {
|
||||
padding: 0;
|
||||
}
|
||||
/* .wl-nick,
|
||||
.wl-mail,
|
||||
.wl-link {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
} */
|
||||
.wl-header.item3 {
|
||||
border-bottom: none;
|
||||
}
|
||||
.wl-user {
|
||||
margin-inline-end: 0.9rem;
|
||||
}
|
||||
.wl-like {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.wl-content p {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
/* .wl-power{
|
||||
color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
|
||||
}
|
||||
a[href*="walinejs"] {
|
||||
color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
|
||||
} */
|
||||
/* .wl-user-avatar {
|
||||
color: var(--waline-light-grey);
|
||||
} */
|
||||
.wl-time {
|
||||
color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
|
||||
}
|
||||
.wl-header-item {
|
||||
border-bottom: 1px solid var(--waline-border-color);
|
||||
}
|
||||
.wl-header label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.wl-header input {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.wl-editor {
|
||||
min-height: 6rem;
|
||||
}
|
||||
.wl-nick {
|
||||
margin-inline-end: 0.6rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style
|
||||
|
|
@ -112,8 +206,7 @@ document.addEventListener('astro:after-swap', initWaline)
|
|||
|
||||
/* 渲染选择 */
|
||||
--waline-border: 1px solid var(--waline-border-color);
|
||||
--waline-avatar-radius: 50%;
|
||||
--waline-box-shadow: none;
|
||||
--waline-avatar-radius: 20%;
|
||||
}
|
||||
|
||||
/* 暗色模式 */
|
||||
|
|
@ -158,7 +251,5 @@ html.dark #waline {
|
|||
|
||||
/* 渲染选择 */
|
||||
--waline-border: 1px solid var(--waline-border-color);
|
||||
--waline-avatar-radius: 50%;
|
||||
--waline-box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@ export const themeConfig: ThemeConfig = {
|
|||
mode: 'light', // light, dark
|
||||
light: {
|
||||
// title color
|
||||
primary: 'oklch(20% 0 0)',
|
||||
primary: 'oklch(20% 0.02 60)',
|
||||
// text color
|
||||
secondary: 'oklch(40% 0 0)',
|
||||
secondary: 'oklch(40% 0.02 60)',
|
||||
// background color
|
||||
background: 'oklch(95% 0.018 57)',
|
||||
background: 'oklch(95% 0.02 60)',
|
||||
// code block theme
|
||||
codeTheme: 'github-light',
|
||||
},
|
||||
dark: {
|
||||
// title color
|
||||
primary: 'oklch(80% 0 0)',
|
||||
primary: 'oklch(90% 0 0)',
|
||||
// text color
|
||||
secondary: 'oklch(70% 0 0)',
|
||||
secondary: 'oklch(75% 0 0)',
|
||||
// background color
|
||||
background: 'oklch(20% 0 0)',
|
||||
// code block theme
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@ interface Props {
|
|||
const { postTitle, postDescription, postImage } = Astro.props
|
||||
const { isHome, isPost } = getPagePath(Astro.url.pathname)
|
||||
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
|
||||
|
||||
const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
|
||||
? 'mt-8'
|
||||
: 'mt-12'
|
||||
---
|
||||
|
||||
<html
|
||||
|
|
@ -50,7 +54,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
|
|||
<main class="col-start-1 row-start-1">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer class="mt-13 block lg:hidden" />
|
||||
<Footer class={`block lg:hidden ${footerMarginClass}`} />
|
||||
</div>
|
||||
|
||||
<!-- fix position issue on ios -->
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
|||
postDescription={post.data.description}
|
||||
postImage={post.data.image}
|
||||
>
|
||||
<article class="heti mb-16">
|
||||
<article class="heti mb-15">
|
||||
<h1 class="post-title">
|
||||
<span
|
||||
transition:name={`post-${post.data.slug || post.slug}`}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue