mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
pengzhanbo
GitHub
commit
1b7f810133
3
.npmrc
Normal file
3
.npmrc
Normal file
@ -0,0 +1,3 @@
|
||||
strict-peer-dependencies=false
|
||||
shamefully-hoist=true
|
||||
shell-emulator=true
|
||||
7
.stylelintignore
Normal file
7
.stylelintignore
Normal file
@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
|
||||
.cache
|
||||
.temp
|
||||
|
||||
lib
|
||||
dist
|
||||
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -10,8 +10,10 @@
|
||||
},
|
||||
"css.validate": false,
|
||||
"scss.validate": false,
|
||||
"less.validate": false,
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
"stylelint.packageManager": "pnpm",
|
||||
"eslint.rules.customizations": [
|
||||
{ "rule": "style/*", "severity": "off" },
|
||||
{ "rule": "*-indent", "severity": "off" },
|
||||
@ -27,6 +29,7 @@
|
||||
"source.fixAll": "explicit",
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
// "source.fixAll.stylelint": "explicit"
|
||||
},
|
||||
"editor.formatOnPaste": true,
|
||||
"eslint.validate": [
|
||||
@ -41,6 +44,12 @@
|
||||
"jsonc",
|
||||
"yaml"
|
||||
],
|
||||
"stylelint.validate": [
|
||||
"css",
|
||||
"scss",
|
||||
"postcss",
|
||||
"vue"
|
||||
],
|
||||
"cSpell.words": [
|
||||
"bumpp",
|
||||
"caniuse",
|
||||
|
||||
@ -30,6 +30,6 @@ export const theme = themePlume({
|
||||
// apiKey: '111',
|
||||
// appId: '111',
|
||||
// indexName: '1234',
|
||||
// },
|
||||
// }
|
||||
},
|
||||
})
|
||||
|
||||
@ -86,9 +86,8 @@ H~2~O
|
||||
|
||||
[外部链接](https://github.com/pengzhanbo)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Badge**
|
||||
|
||||
@ -220,6 +219,25 @@ const c = a + b
|
||||
```
|
||||
:::
|
||||
|
||||
**GFM alert**
|
||||
|
||||
> [!note]
|
||||
> note
|
||||
|
||||
> [!info]
|
||||
> info
|
||||
|
||||
> [!tip]
|
||||
> tip
|
||||
|
||||
> [!warning]
|
||||
> warning
|
||||
|
||||
> [!caution]
|
||||
> caution
|
||||
|
||||
> [!important]
|
||||
> important
|
||||
|
||||
**代码演示**
|
||||
|
||||
@ -243,3 +261,39 @@ span {
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
**选项卡**
|
||||
|
||||
::: tabs
|
||||
@tab 标题1
|
||||
内容区块
|
||||
|
||||
@tab 标题2
|
||||
内容区块
|
||||
:::
|
||||
|
||||
:::: warning
|
||||
::: tabs
|
||||
@tab 标题1
|
||||
内容区块
|
||||
|
||||
@tab 标题2
|
||||
内容区块
|
||||
:::
|
||||
::::
|
||||
|
||||
**脚注**
|
||||
|
||||
脚注 1 链接[^first]。
|
||||
|
||||
脚注 2 链接[^second]。
|
||||
|
||||
行内的脚注^[行内脚注文本] 定义。
|
||||
|
||||
重复的页脚定义[^second]。
|
||||
|
||||
[^first]: 脚注 **可以包含特殊标记**
|
||||
|
||||
也可以由多个段落组成
|
||||
|
||||
[^second]: 脚注文字。
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import config from '@pengzhanbo/eslint-config-vue'
|
||||
|
||||
export default config({
|
||||
formatters: {
|
||||
css: true,
|
||||
},
|
||||
ignores: ['lib', 'docs/**/*.md'],
|
||||
globals: {
|
||||
__VUEPRESS_VERSION__: 'readonly',
|
||||
|
||||
39
package.json
39
package.json
@ -4,7 +4,7 @@
|
||||
"version": "1.0.0-rc.15",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@8.14.0",
|
||||
"author": "pengzhanbo",
|
||||
"author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"vuepress",
|
||||
@ -20,7 +20,6 @@
|
||||
"scripts": {
|
||||
"build": "pnpm run build:package",
|
||||
"build:package": "pnpm --filter=!vuepress-theme-plume-monorepo --filter=!docs --filter=!plugin-page-collection run -r --stream build",
|
||||
"commit": "cz",
|
||||
"dev": "concurrently \"pnpm run dev:package\" \"pnpm run docs\"",
|
||||
"dev:package": "pnpm --filter=!vuepress-theme-plume-monorepo --filter=!docs --parallel dev",
|
||||
"dev:theme": "concurrently \"pnpm --filter=vuepress-theme-plume dev\" \"pnpm run docs\"",
|
||||
@ -28,12 +27,13 @@
|
||||
"docs:build": "pnpm --filter=docs docs:build",
|
||||
"docs:clean": "pnpm --filter=docs docs:clean",
|
||||
"docs:serve": "pnpm --filter=docs docs:serve",
|
||||
"commit": "cz",
|
||||
"lint": "eslint .",
|
||||
"pkg": "node scripts/create/index.js",
|
||||
"lint:css": "stylelint **/*.{css,scss,vue}",
|
||||
"prepare": "husky install",
|
||||
"release": "pnpm release:check && pnpm release:version && pnpm release:publish",
|
||||
"release:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
|
||||
"release:check": "pnpm lint && pnpm build",
|
||||
"release:check": "pnpm lint && pnpm lint:css && pnpm build",
|
||||
"release:publish": "pnpm -r publish",
|
||||
"release:version": "bumpp package.json plugins/*/package.json theme/package.json --execute=\"pnpm release:changelog\" --commit \"build: publish v%s\" --all --tag --push"
|
||||
},
|
||||
@ -41,50 +41,25 @@
|
||||
"@commitlint/cli": "^18.4.4",
|
||||
"@commitlint/config-conventional": "^18.4.4",
|
||||
"@pengzhanbo/eslint-config-vue": "^1.5.1",
|
||||
"@types/minimist": "^1.2.5",
|
||||
"@pengzhanbo/stylelint-config": "^1.5.1",
|
||||
"@types/lodash.merge": "^4.6.9",
|
||||
"@types/node": "20.9.1",
|
||||
"@types/webpack-env": "^1.18.4",
|
||||
"bumpp": "^9.2.1",
|
||||
"chalk": "^5.3.0",
|
||||
"commitizen": "^4.3.0",
|
||||
"concurrently": "^8.2.2",
|
||||
"conventional-changelog-cli": "^4.1.0",
|
||||
"cpx2": "^7.0.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-format": "^0.1.0",
|
||||
"execa": "^8.0.1",
|
||||
"handlebars": "^4.7.8",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^15.2.0",
|
||||
"minimist": "^1.2.8",
|
||||
"ora": "^8.0.1",
|
||||
"pnpm": "^8.14.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"sort-package-json": "^2.6.0",
|
||||
"taze": "^0.13.1",
|
||||
"stylelint": "^16.1.0",
|
||||
"tsconfig-vuepress": "^4.5.0",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.11"
|
||||
},
|
||||
"pnpm": {
|
||||
"peerDependencyRules": {
|
||||
"ignoreMissing": [
|
||||
"@algolia/client-search",
|
||||
"@types/react",
|
||||
"eslint-plugin-import",
|
||||
"eslint-plugin-n",
|
||||
"eslint-plugin-promise",
|
||||
"react",
|
||||
"react-dom",
|
||||
"webpack",
|
||||
"cypress",
|
||||
"postcss",
|
||||
"jest"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*": "eslint --fix"
|
||||
},
|
||||
|
||||
@ -8,15 +8,27 @@ export default defineClientConfig({
|
||||
enhance({ app }) {
|
||||
const blogPostData = useBlogPostData()
|
||||
|
||||
Object.defineProperties(app.config.globalProperties, {
|
||||
$blogPostData: {
|
||||
get() {
|
||||
return blogPostData.value
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// setup devtools in dev mode
|
||||
if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
|
||||
const PLUGIN_ID = 'org.vuejs.vuepress'
|
||||
const PLUGIN_LABEL = 'VuePress'
|
||||
const INSPECTOR_ID = PLUGIN_ID
|
||||
|
||||
setupDevtoolsPlugin(
|
||||
{
|
||||
// fix recursive reference
|
||||
app: app as any,
|
||||
id: 'org.vuepress-plume.plugin-blog-data',
|
||||
label: 'VuePress Blog Data Plugin',
|
||||
packageName: '@vuepress/plugin-blog-data',
|
||||
id: PLUGIN_ID,
|
||||
label: PLUGIN_LABEL,
|
||||
packageName: '@vuepress-plume/plugin-blog-data',
|
||||
homepage: 'https://pengzhanbo.cn',
|
||||
logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
|
||||
componentStateTypes: ['VuePress'],
|
||||
@ -30,6 +42,26 @@ export default defineClientConfig({
|
||||
value: blogPostData.value,
|
||||
})
|
||||
})
|
||||
api.on.getInspectorTree((payload) => {
|
||||
if (payload.inspectorId !== INSPECTOR_ID)
|
||||
return
|
||||
payload.rootNodes.push({
|
||||
id: 'blog_post_data',
|
||||
label: 'Blog Post Data',
|
||||
})
|
||||
})
|
||||
api.on.getInspectorState((payload) => {
|
||||
if (payload.inspectorId !== INSPECTOR_ID)
|
||||
return
|
||||
if (payload.nodeId === 'blog_post_data') {
|
||||
payload.state = {
|
||||
BlogPostData: [{
|
||||
key: 'blogPostData',
|
||||
value: blogPostData.value,
|
||||
}],
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
--vp-code-copy-code-hover-border-color: #e2e2e3;
|
||||
--vp-code-copy-code-hover-bg: #fff;
|
||||
--vp-code-copy-code-active-text: rgba(60, 60, 67, 0.78);
|
||||
--vp-code-copy-copied-text-content: 'Copied';
|
||||
--vp-code-copy-copied-text-content: "Copied";
|
||||
}
|
||||
|
||||
html[lang='zh-CN'] {
|
||||
--vp-code-copy-copied-text-content: '已复制';
|
||||
html[lang="zh-CN"] {
|
||||
--vp-code-copy-copied-text-content: "已复制";
|
||||
}
|
||||
|
||||
.dark {
|
||||
@ -25,71 +25,76 @@ html[lang='zh-CN'] {
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
border: 1px solid var(--vp-code-copy-code-border-color);
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--vp-code-copy-code-bg);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-code-copy-code-bg);
|
||||
background-image: var(--vp-icon-copy);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid var(--vp-code-copy-code-border-color);
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
background-color 0.25s,
|
||||
opacity 0.25s;
|
||||
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
[class*='language-']:hover > .copy-code-button,
|
||||
[class*='language-'] > .copy-code-button:focus,
|
||||
[class*='language-'] > .copy-code-button.copied {
|
||||
[class*="language-"]:hover > .copy-code-button,
|
||||
[class*="language-"] > .copy-code-button:focus,
|
||||
[class*="language-"] > .copy-code-button.copied {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button:hover,
|
||||
[class*='language-'] > .copy-code-button.copied {
|
||||
border-color: var(--vp-code-copy-code-hover-border-color);
|
||||
[class*="language-"] > .copy-code-button:hover,
|
||||
[class*="language-"] > .copy-code-button.copied {
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
border-color: var(--vp-code-copy-code-hover-border-color);
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button.copied,
|
||||
[class*='language-'] > .copy-code-button:hover.copied {
|
||||
/*rtl:ignore*/
|
||||
border-radius: 0 4px 4px 0;
|
||||
[class*="language-"] > .copy-code-button.copied,
|
||||
[class*="language-"] > .copy-code-button:hover.copied {
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
background-image: var(--vp-icon-copied);
|
||||
|
||||
/* rtl:ignore */
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button.copied::before,
|
||||
[class*='language-'] > .copy-code-button:hover.copied::before {
|
||||
[class*="language-"] > .copy-code-button.copied::before,
|
||||
[class*="language-"] > .copy-code-button:hover.copied::before {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--vp-code-copy-code-hover-border-color);
|
||||
/*rtl:ignore*/
|
||||
border-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 0 10px;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-copy-code-active-text);
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
content: var(--vp-code-copy-copied-text-content);
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
border: 1px solid var(--vp-code-copy-code-hover-border-color);
|
||||
|
||||
/* rtl:ignore */
|
||||
border-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
/* rtl:ignore */
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
}
|
||||
|
||||
@ -8,15 +8,27 @@ export default defineClientConfig({
|
||||
enhance({ app }) {
|
||||
const notesData = useNotesData()
|
||||
|
||||
Object.defineProperties(app.config.globalProperties, {
|
||||
$notesData: {
|
||||
get() {
|
||||
return notesData.value
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// setup devtools in dev mode
|
||||
if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
|
||||
const PLUGIN_ID = 'org.vuejs.vuepress'
|
||||
const PLUGIN_LABEL = 'VuePress'
|
||||
const INSPECTOR_ID = PLUGIN_ID
|
||||
|
||||
setupDevtoolsPlugin(
|
||||
{
|
||||
// fix recursive reference
|
||||
app: app as any,
|
||||
id: 'org.vuepress-plume.plugin-notes-data',
|
||||
label: 'VuePress Notes Data Plugin',
|
||||
packageName: '@vuepress/plugin-notes-data',
|
||||
id: PLUGIN_ID,
|
||||
label: PLUGIN_LABEL,
|
||||
packageName: '@vuepress-plume/plugin-notes-data',
|
||||
homepage: 'https://pengzhanbo.cn',
|
||||
logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
|
||||
componentStateTypes: ['VuePress'],
|
||||
@ -30,6 +42,26 @@ export default defineClientConfig({
|
||||
value: notesData.value,
|
||||
})
|
||||
})
|
||||
api.on.getInspectorTree((payload) => {
|
||||
if (payload.inspectorId !== INSPECTOR_ID)
|
||||
return
|
||||
payload.rootNodes.push({
|
||||
id: 'notes_data',
|
||||
label: 'Notes Data',
|
||||
})
|
||||
})
|
||||
api.on.getInspectorState((payload) => {
|
||||
if (payload.inspectorId !== INSPECTOR_ID)
|
||||
return
|
||||
if (payload.nodeId === 'notes_data') {
|
||||
payload.state = {
|
||||
NotesData: [{
|
||||
key: 'notesData',
|
||||
value: notesData.value,
|
||||
}],
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
1651
pnpm-lock.yaml
generated
1651
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,16 +0,0 @@
|
||||
## scripts/create
|
||||
|
||||
在 `packages/` 目录下生成一个新的 插件包
|
||||
|
||||
``` sh
|
||||
pnpm pkg <package-name> [--option]
|
||||
```
|
||||
|
||||
- `package-name` 插件名称
|
||||
|
||||
### Option
|
||||
|
||||
- `--client,-c` 是否生成 `client` 目录及其文件，默认不生成
|
||||
- `--shared,-s` 是否生成 `shared` 目录及其文件，默认不生成
|
||||
|
||||
- `--help,-h` 显示帮助信息
|
||||
@ -1,97 +0,0 @@
|
||||
import path from 'node:path'
|
||||
import fs from 'node:fs'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import handlebars from 'handlebars'
|
||||
import chalk from 'chalk'
|
||||
import ora from 'ora'
|
||||
import { execa } from 'execa'
|
||||
import { readTemplateList } from './readTpl.js'
|
||||
import { lowerCase, packageName, upperCase } from './utils.js'
|
||||
import { writeFile } from './writeFile.js'
|
||||
|
||||
const compile = handlebars.compile
|
||||
|
||||
const _dirname
|
||||
= typeof __dirname !== 'undefined'
|
||||
? __dirname
|
||||
: path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const packagesRoot = path.join(_dirname, '../../packages')
|
||||
const spinner = ora()
|
||||
|
||||
const pkg = JSON.parse(
|
||||
fs.readFileSync(path.join(_dirname, '../../package.json'), 'utf-8'),
|
||||
)
|
||||
|
||||
async function generatorFile(config) {
|
||||
const templateList = readTemplateList(path.join(_dirname, './template'))
|
||||
|
||||
const { name, client, shared } = config
|
||||
const pkgName = packageName(name)
|
||||
const targetDir = path.join(packagesRoot, pkgName)
|
||||
const data = {
|
||||
pkgName,
|
||||
upperName: upperCase(name),
|
||||
lowerName: lowerCase(name),
|
||||
client,
|
||||
shared,
|
||||
version: pkg.version,
|
||||
}
|
||||
const include = [
|
||||
!client && 'client',
|
||||
!shared && 'shared',
|
||||
!shared && 'client/index.js',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('|')
|
||||
const filterRE = new RegExp(`/(${include})/`)
|
||||
const templates = templateList
|
||||
.filter(({ file }) => {
|
||||
return !filterRE.test(file)
|
||||
})
|
||||
.map(({ file, content }) => {
|
||||
return {
|
||||
file,
|
||||
template: compile(content),
|
||||
}
|
||||
})
|
||||
spinner.start(`${chalk.cyan(pkgName)} generating....`)
|
||||
templates.forEach(async ({ file, template }) => {
|
||||
try {
|
||||
const filepath = path.join(targetDir, file)
|
||||
await writeFile(filepath, template(data))
|
||||
}
|
||||
catch (e) {
|
||||
spinner.fail(`Failed to generate ${chalk.cyan(pkgName)}`)
|
||||
throw e
|
||||
}
|
||||
})
|
||||
spinner.succeed(`${chalk.cyan(pkgName)} generated !`)
|
||||
}
|
||||
|
||||
async function initPackage(config) {
|
||||
const { name, client } = config
|
||||
const pkgName = packageName(name)
|
||||
const targetDir = path.join(packagesRoot, pkgName)
|
||||
const dependencies = [
|
||||
'@vuepress/core@next',
|
||||
'@vuepress/utils@next',
|
||||
'@vuepress/shared@next',
|
||||
]
|
||||
client && dependencies.push('@vuepress/client@next')
|
||||
|
||||
spinner.start(chalk.cyan('Installing...'))
|
||||
try {
|
||||
await execa('pnpm', ['add', ...dependencies], { cwd: targetDir })
|
||||
spinner.succeed('Installed.')
|
||||
}
|
||||
catch (e) {
|
||||
spinner.fail('Failed to Installed')
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
export async function generator(config) {
|
||||
await generatorFile(config)
|
||||
await initPackage(config)
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import process from 'node:process'
|
||||
import minimist from 'minimist'
|
||||
|
||||
const defaultOptions = {
|
||||
s: false,
|
||||
shared: false,
|
||||
c: false,
|
||||
client: false,
|
||||
h: false,
|
||||
help: false,
|
||||
}
|
||||
|
||||
function normalizeArgv(argv) {
|
||||
return {
|
||||
name: argv._[0] || '',
|
||||
client: argv.client || argv.c,
|
||||
shared: argv.shared || argv.s,
|
||||
help: argv.h || argv.help,
|
||||
}
|
||||
}
|
||||
|
||||
export function getConfig() {
|
||||
const argv = Object.assign(
|
||||
{},
|
||||
defaultOptions,
|
||||
minimist(process.argv.slice(2)),
|
||||
)
|
||||
return normalizeArgv(argv)
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import chalk from 'chalk'
|
||||
|
||||
export function getHelp() {
|
||||
console.log(` this command will generator a package to ${chalk.cyan('packages')}.
|
||||
command: ${chalk.green('pnpm pkg <package-name> [--options]')}
|
||||
|
||||
${chalk.green('package-name')}: 包名
|
||||
|
||||
options:
|
||||
${chalk.green('--client, -c')}: 是否生成 ${chalk.cyan('client/')} 目录
|
||||
${chalk.green('--shared, -s')}: 是否生成 ${chalk.cyan('shared/')} 目录
|
||||
|
||||
${chalk.green('--help, -h')}: show help message.
|
||||
|
||||
exp: ${chalk.green('pnpm pkg caniuse -c -s')}
|
||||
It will generator to ${chalk.cyan('packages/plugin-caniuse')}
|
||||
`)
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import process from 'node:process'
|
||||
import { getConfig } from './getConfig.js'
|
||||
import { getHelp } from './getHelp.js'
|
||||
import { generator } from './generator.js'
|
||||
|
||||
const config = getConfig()
|
||||
|
||||
if (config.help) {
|
||||
getHelp()
|
||||
process.exit(0)
|
||||
}
|
||||
else {
|
||||
generator(config).catch((err) => {
|
||||
console.error(err)
|
||||
process.exit(1)
|
||||
})
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
const tplRE = /\.tpl$/
|
||||
function readFileList(dir, fileList = {}) {
|
||||
const files = fs.readdirSync(dir)
|
||||
files.forEach((file) => {
|
||||
const filepath = path.join(dir, file)
|
||||
const stat = fs.statSync(filepath)
|
||||
if (stat.isDirectory()) {
|
||||
readFileList(filepath, fileList)
|
||||
}
|
||||
else {
|
||||
const extname = path.extname(filepath)
|
||||
if (tplRE.test(extname))
|
||||
fileList[filepath.replace(tplRE, '')] = fs.readFileSync(filepath, 'utf-8')
|
||||
}
|
||||
})
|
||||
return fileList
|
||||
}
|
||||
|
||||
export function readTemplateList(dir) {
|
||||
const templateMap = readFileList(dir)
|
||||
const result = []
|
||||
Object.keys(templateMap).forEach((key) => {
|
||||
const file = path.relative(dir, key)
|
||||
result.push({
|
||||
file,
|
||||
content: templateMap[key],
|
||||
})
|
||||
})
|
||||
return result
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (C) 2021 - PRESENT by pengzhanbo
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@ -1,18 +0,0 @@
|
||||
# `@vuepress-plume/{{ pkgName }}`
|
||||
|
||||
## Install
|
||||
```
|
||||
yarn add @vuepress-plume/{{ pkgName }}
|
||||
```
|
||||
## Usage
|
||||
``` js
|
||||
// .vuepress/config.js
|
||||
const {{ lowerName }}Plugin = require('@vuepress-plume/{{ pkgName }}')
|
||||
module.exports = {
|
||||
//...
|
||||
plugins: [
|
||||
{{ lowerName }}Plugin()
|
||||
]
|
||||
// ...
|
||||
}
|
||||
```
|
||||
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "@vuepress-plume/{{ pkgName }}",
|
||||
"version": "{{ version }}",
|
||||
"description": "The Plugin for VuePres 2",
|
||||
"keyword": [
|
||||
"VuePress",
|
||||
"vuepress plugin",
|
||||
"{{ lowerName }}",
|
||||
"vuepress-plugin-{{ pkgName }}"
|
||||
],
|
||||
"homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "pengzhanbo <volodymyr@foxmail.com>",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./lib/node/index.js",
|
||||
{{#if shared }}
|
||||
"./client": "./lib/client/index.js",
|
||||
{{/if}}
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "lib/node/index.js",
|
||||
"types": "./lib/node/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run copy && pnpm run ts",
|
||||
"clean": "rimraf lib *.tsbuildinfo",
|
||||
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
|
||||
"copy:watch": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib -w",
|
||||
"dev": "concurrently \"pnpm copy:watch\" \"pnpm ts:watch\"",
|
||||
"ts": "tsc -b tsconfig.build.json",
|
||||
"ts:watch": "tsc -b tsconfig.build.json --watch"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import { defineClientConfig } from '@vuepress/client'
|
||||
|
||||
|
||||
export default defineClientConfig({
|
||||
setup() {
|
||||
// do something
|
||||
},
|
||||
})
|
||||
@ -1 +0,0 @@
|
||||
export * from '../shared/index.js'
|
||||
@ -1,8 +0,0 @@
|
||||
import { {{ lowerName }}Plugin } from './plugin.js'
|
||||
|
||||
export * from './plugin.js'
|
||||
{{#if shared }}
|
||||
export * from '../shared/index.js'
|
||||
{{/if}}
|
||||
|
||||
export default {{ lowerName }}Plugin
|
||||
@ -1,23 +0,0 @@
|
||||
import type { App, Plugin } from '@vuepress/core'
|
||||
{{#if client}}
|
||||
import { path } from '@vuepress/utils'
|
||||
{{/if}}
|
||||
{{#if shared}}
|
||||
import type { {{ upperName }}Options } from '../shared/index.js'
|
||||
{{else}}
|
||||
|
||||
export interface {{ upperName }}Options {
|
||||
a?: string
|
||||
}
|
||||
{{/if}}
|
||||
|
||||
export const {{ lowerName }}Plugin = (options: {{ upperName }}Options): Plugin => {
|
||||
return (app: App) => {
|
||||
return {
|
||||
name: '@vuepress-plume/{{ pkgName }}',
|
||||
{{#if client}}
|
||||
clientConfigFile: path.resolve(__dirname, '../client/clientConfig.js'),
|
||||
{{/if}}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export interface {{ upperName }}Options {
|
||||
a?: string
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.build.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib"
|
||||
},
|
||||
"include": ["./src"]
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
export function upperCase(str) {
|
||||
return str.split(/-|\s+/).filter(Boolean).map((s) => {
|
||||
return s[0].toUpperCase() + s.slice(1)
|
||||
}).join('')
|
||||
}
|
||||
|
||||
export function lowerCase(str) {
|
||||
str = upperCase(str)
|
||||
return str[0].toLowerCase() + str.slice(1)
|
||||
}
|
||||
|
||||
export function packageName(name) {
|
||||
return `plugin-${name.trim().split(/-|\s+/).filter(Boolean).join('-')}`
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import path from 'node:path'
|
||||
import fs from 'node:fs'
|
||||
|
||||
export async function writeFile(filepath, content) {
|
||||
const dirname = path.dirname(filepath)
|
||||
if (!fs.existsSync(dirname))
|
||||
fs.mkdirSync(dirname, { recursive: true })
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
fs.writeFile(filepath, content, 'utf-8', (err) => {
|
||||
if (err)
|
||||
reject(err)
|
||||
else
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
19
stylelint.config.js
Normal file
19
stylelint.config.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { stylelintConfig } from '@pengzhanbo/stylelint-config'
|
||||
|
||||
export default stylelintConfig({
|
||||
rules: {
|
||||
'selector-pseudo-element-no-unknown': [true, {
|
||||
ignorePseudoElements: ['input-placeholder'],
|
||||
}],
|
||||
'no-descending-specificity': null,
|
||||
'custom-property-empty-line-before': null,
|
||||
'property-no-vendor-prefix': null,
|
||||
'selector-no-vendor-prefix': null,
|
||||
'property-no-unknown': [true, {
|
||||
ignoreProperties: ['r', 'font-named-instance'],
|
||||
}],
|
||||
'declaration-block-no-redundant-longhand-properties': [true, {
|
||||
ignoreShorthands: ['inset'],
|
||||
}],
|
||||
},
|
||||
})
|
||||
@ -89,8 +89,5 @@
|
||||
"vuepress-plugin-reading-time2": "2.0.0-rc.10",
|
||||
"vuepress-plugin-seo2": "2.0.0-rc.10",
|
||||
"vuepress-plugin-sitemap2": "2.0.0-rc.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash.merge": "^4.6.9"
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,18 +28,19 @@ const { archives } = useArchives()
|
||||
|
||||
<style scoped>
|
||||
.archives-wrapper {
|
||||
padding: 32px 24px;
|
||||
flex: 1;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.archives-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.archives-title .icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -56,8 +57,8 @@ const { archives } = useArchives()
|
||||
}
|
||||
|
||||
.archive-title {
|
||||
margin-top: 2rem;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,10 +46,10 @@ function linkTo(e: Event) {
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
margin-left: 4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-top: -1px;
|
||||
margin-left: 4px;
|
||||
fill: var(--vp-c-text-3);
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
@ -38,7 +38,6 @@ const show = computed(() => {
|
||||
return y.value > windowHeight.value / 2
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
let timer: NodeJS.Timeout | null = null
|
||||
function resetScrolling() {
|
||||
timer && clearTimeout(timer)
|
||||
@ -77,15 +76,15 @@ function handleClick() {
|
||||
<style scoped>
|
||||
.back-to-top-button {
|
||||
position: fixed;
|
||||
inset-inline-end: 1rem;
|
||||
right: 20px;
|
||||
bottom: 64px;
|
||||
z-index: var(--vp-z-index-back-to-top);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
background-color: var(--vp-c-bg);
|
||||
inset-inline-end: 1rem;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
@ -96,8 +95,8 @@ function handleClick() {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.back-to-top-button .percent.show,
|
||||
@ -108,19 +107,19 @@ function handleClick() {
|
||||
.back-to-top-button .percent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
font-size: 10px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.back-to-top-button .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--vp-c-text-3);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.back-to-top-button svg {
|
||||
@ -131,23 +130,24 @@ function handleClick() {
|
||||
.back-to-top-button svg circle {
|
||||
fill: none;
|
||||
stroke: var(--vp-c-brand-2);
|
||||
stroke-dasharray: 0% 314.1593%;
|
||||
stroke-width: 4px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
r: 16;
|
||||
stroke-dasharray: 0% 314.1593%;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.back-to-top-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.back-to-top-button .percent {
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.back-to-top-button .icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@ -14,10 +14,12 @@ defineProps<{
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-backdrop);
|
||||
background: var(--vp-backdrop-bg-color);
|
||||
@ -33,7 +35,7 @@ defineProps<{
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -26,18 +26,18 @@ const page = usePageData<PlumeThemePageData>()
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--vp-nav-height);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.blog-wrapper {
|
||||
max-width: 784px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.blog-wrapper {
|
||||
max-width: 1104px;
|
||||
}
|
||||
|
||||
@ -40,12 +40,12 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
position: sticky;
|
||||
top: calc(var(--vp-nav-height) + 2rem);
|
||||
width: 270px;
|
||||
margin-left: 2rem;
|
||||
padding: 1rem 0;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 12rem;
|
||||
border-left: solid 1px var(--vp-c-divider);
|
||||
margin-left: 2rem;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
border-left: solid 1px var(--vp-c-divider);
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
@ -53,24 +53,24 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.blog-aside-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
padding: 10px 12px 0;
|
||||
margin: 24px 24px 0;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -79,18 +79,19 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.nav-link .icon {
|
||||
margin-right: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,19 +85,19 @@ const showBlogExtract = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.blog-extract {
|
||||
display: block;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 30%;
|
||||
z-index: calc(var(--vp-z-index-nav) - 1);
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
border-top-left-radius: 99px;
|
||||
border-bottom-left-radius: 99px;
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
border-right: none;
|
||||
border-top-left-radius: 99px;
|
||||
border-bottom-left-radius: 99px;
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
z-index: calc(var(--vp-z-index-nav) - 1);
|
||||
background-color: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blog-extract .icon {
|
||||
@ -105,7 +105,7 @@ const showBlogExtract = computed(() => {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.blog-extract {
|
||||
display: none;
|
||||
}
|
||||
@ -124,8 +124,8 @@ const showBlogExtract = computed(() => {
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-overlay);
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.blog-modal.fade-enter-from,
|
||||
@ -149,8 +149,8 @@ const showBlogExtract = computed(() => {
|
||||
box-shadow:
|
||||
0 -3px 12px rgba(0, 0, 0, 0.1),
|
||||
0 -1px 4px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.dark .blog-modal-container {
|
||||
@ -182,11 +182,11 @@ const showBlogExtract = computed(() => {
|
||||
}
|
||||
|
||||
.blog-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 10px 0 0;
|
||||
margin: 24px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -194,15 +194,15 @@ const showBlogExtract = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.nav-link .icon {
|
||||
margin-right: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,13 +36,13 @@ function onClick({ target: el }: Event) {
|
||||
|
||||
.outline-link {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.outline-link:hover,
|
||||
|
||||
@ -23,15 +23,15 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.menu-group {
|
||||
padding: 12px 12px 0;
|
||||
margin: 12px -12px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.menu-group:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.menu-group + .menu-group {
|
||||
@ -41,9 +41,9 @@ defineProps<{
|
||||
|
||||
.title {
|
||||
padding: 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -30,20 +30,20 @@ const page = usePageData()
|
||||
|
||||
<style scoped>
|
||||
.menu-group + .menu-link {
|
||||
padding: 12px 12px 0;
|
||||
margin: 12px -12px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
white-space: nowrap;
|
||||
border-radius: 6px;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
color 0.25s;
|
||||
|
||||
@ -27,25 +27,25 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.menu-wrapper {
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
min-width: 128px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
max-height: calc(100vh - var(--vp-nav-height));
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--vp-c-bg-elv);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
transition: background-color 0.5s;
|
||||
max-height: calc(100vh - var(--vp-nav-height));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group) {
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px 12px;
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group + .group) {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 11px 12px 12px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group:last-child) {
|
||||
@ -53,8 +53,8 @@ defineProps<{
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group + .item) {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 11px 16px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.item) {
|
||||
@ -64,9 +64,9 @@ defineProps<{
|
||||
|
||||
.menu-wrapper :deep(.label) {
|
||||
flex-grow: 1;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
@ -90,17 +90,17 @@ export default {
|
||||
}
|
||||
|
||||
.flyout-wrapper:hover .menu,
|
||||
.button[aria-expanded='true'] + .menu {
|
||||
opacity: 1;
|
||||
.button[aria-expanded="true"] + .menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
height: var(--vp-nav-height);
|
||||
padding: 0 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -108,32 +108,33 @@ export default {
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* line-height: var(--vp-nav-height); */
|
||||
line-height: normal;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
/* line-height: var(--vp-nav-height); */
|
||||
line-height: normal;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
margin-right: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
margin-right: 0;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.text-icon {
|
||||
margin-left: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-left: 4px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
@ -141,8 +142,8 @@ export default {
|
||||
position: absolute;
|
||||
top: calc(var(--vp-nav-height) / 2 + 20px);
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
visibility 0.25s,
|
||||
|
||||
@ -37,66 +37,69 @@ const list = computed(() => matter.value.list || [])
|
||||
<style scoped>
|
||||
.friends-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--vp-nav-height);
|
||||
padding-bottom: 5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.friends-wrapper .title {
|
||||
padding-top: 3rem;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
padding-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.friends-wrapper .description {
|
||||
color: var(--vp-c-text-1);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 16px;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 64px;
|
||||
padding: 0 16px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.edit-link {
|
||||
margin-top: 64px;
|
||||
padding-left: 1rem;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.friends-wrapper .title,
|
||||
.friends-wrapper .description,
|
||||
.edit-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.friends-wrapper {
|
||||
max-width: 784px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.friends-wrapper {
|
||||
max-width: 1104px;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
@ -105,11 +108,11 @@ const list = computed(() => matter.value.list || [])
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 0;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -118,9 +121,9 @@ const list = computed(() => matter.value.list || [])
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,12 +28,12 @@ defineProps<{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-friends-border-color);
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.25s;
|
||||
background-color: var(--vp-friends-bg-color);
|
||||
border: 1px solid var(--vp-friends-border-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.friend:hover {
|
||||
@ -48,35 +48,36 @@ defineProps<{
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 100%;
|
||||
background-size: cover;
|
||||
background-color: var(--vp-c-default-soft);
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content .title {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--vp-friends-link-color);
|
||||
padding-left: 16px;
|
||||
padding-bottom: 8px;
|
||||
margin-left: -16px;
|
||||
padding-left: 16px;
|
||||
margin-bottom: 8px;
|
||||
margin-left: -16px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-friends-link-color);
|
||||
border-bottom: 1px dashed var(--vp-friends-border-color);
|
||||
}
|
||||
|
||||
.content p {
|
||||
display: -webkit-box;
|
||||
padding-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
padding-top: 8px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: var(--vp-friends-text-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
color: var(--vp-friends-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -75,11 +75,11 @@ const actions = computed(() => {
|
||||
<style scoped>
|
||||
.plume-home {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-height: calc(100vh - var(--vp-nav-height));
|
||||
filter: var(--vp-home-hero-image-filter);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
@ -88,13 +88,13 @@ const actions = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.plume-home .content {
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.plume-home .content .hero-name {
|
||||
@ -107,34 +107,36 @@ const actions = computed(() => {
|
||||
.plume-home .content .hero-tagline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-top: 1rem;
|
||||
color: var(--vp-c-text-hero-tagline);
|
||||
line-height: 1.25;
|
||||
color: var(--vp-c-text-hero-tagline);
|
||||
}
|
||||
|
||||
.plume-home .content .hero-tagline .line {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 0;
|
||||
border-top: solid 1px var(--vp-c-text-hero-tagline);
|
||||
margin-right: 1rem;
|
||||
border-top: solid 1px var(--vp-c-text-hero-tagline);
|
||||
}
|
||||
|
||||
.plume-home .content .hero-text {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--vp-c-text-hero-text);
|
||||
|
||||
/* padding: 6px 20px; */
|
||||
border-radius: 5px;
|
||||
|
||||
/* background-color: rgba(0, 0, 0, 0.25); */
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.plume-home .container {
|
||||
max-width: 768px;
|
||||
padding-top: 8rem;
|
||||
@ -145,7 +147,7 @@ const actions = computed(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.plume-home .container {
|
||||
max-width: 1104px;
|
||||
padding-top: 8rem;
|
||||
@ -159,8 +161,8 @@ const actions = computed(() => {
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -6px;
|
||||
padding-top: 24px;
|
||||
margin: -6px;
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
@ -22,8 +22,8 @@ const { hasSidebar } = useSidebar()
|
||||
.layout-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin: var(--vp-layout-top-height, 0px) auto 0;
|
||||
width: 100%;
|
||||
margin: var(--vp-layout-top-height, 0) auto 0;
|
||||
}
|
||||
|
||||
.layout-content.is-home {
|
||||
@ -35,23 +35,24 @@ const { hasSidebar } = useSidebar()
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.layout-content {
|
||||
padding-top: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
.layout-content.has-sidebar {
|
||||
margin: var(--vp-layout-top-height, 0px) 0 0;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
margin: var(--vp-layout-top-height, 0) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.layout-content.has-sidebar {
|
||||
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
|
||||
padding-left: calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
padding-left:
|
||||
calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,17 +71,18 @@ const showLocalNav = computed(() => {
|
||||
.local-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-local-nav);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-top: var(--vp-layout-top-height, 0);
|
||||
background-color: var(--vp-local-nav-bg-color);
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
border-bottom: 1px solid var(--vp-c-gutter);
|
||||
padding-top: var(--vp-layout-top-height, 0px);
|
||||
width: 100%;
|
||||
background-color: var(--vp-local-nav-bg-color);
|
||||
transition:
|
||||
border-color 0.5s,
|
||||
background-color 0.5s;
|
||||
@ -95,7 +96,7 @@ const showLocalNav = computed(() => {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.local-nav {
|
||||
display: none;
|
||||
}
|
||||
@ -111,9 +112,9 @@ const showLocalNav = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 24px 11px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -127,25 +128,25 @@ const showLocalNav = computed(() => {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.menu {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.top-link {
|
||||
display: block;
|
||||
padding: 12px 24px 11px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -155,7 +156,7 @@ const showLocalNav = computed(() => {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.top-link {
|
||||
padding: 12px 32px 11px;
|
||||
}
|
||||
|
||||
@ -78,13 +78,13 @@ function scrollToTop() {
|
||||
}
|
||||
|
||||
.local-nav-outline-dropdown button {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.local-nav-outline-dropdown button:hover {
|
||||
@ -98,16 +98,16 @@ function scrollToTop() {
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
:deep(.outline-link) {
|
||||
font-size: 14px;
|
||||
padding: 2px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.open > .icon {
|
||||
@ -121,11 +121,11 @@ function scrollToTop() {
|
||||
left: 16px;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
background-color: var(--vp-c-gutter);
|
||||
max-height: calc(var(--vp-vh, 100vh) - 86px);
|
||||
overflow: hidden auto;
|
||||
background-color: var(--vp-c-gutter);
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
@ -136,9 +136,9 @@ function scrollToTop() {
|
||||
.top-link {
|
||||
display: block;
|
||||
padding: 0 16px;
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 48px;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
|
||||
@ -61,36 +61,36 @@ watchPostEffect(() => {
|
||||
<style scoped>
|
||||
.navbar-wrapper {
|
||||
position: relative;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 0 8px 0 24px;
|
||||
height: var(--vp-nav-height);
|
||||
pointer-events: none;
|
||||
padding: 0 8px 0 24px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-wrapper {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-wrapper:not(.has-sidebar):not(.top) {
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
.navbar-wrapper:not(.has-sidebar, .top) {
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
max-width: calc(var(--vp-layout-max-width) - 64px);
|
||||
height: var(--vp-nav-height);
|
||||
margin: 0 auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ watchPostEffect(() => {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -110,29 +110,31 @@ watchPostEffect(() => {
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 0 32px;
|
||||
width: var(--vp-sidebar-width);
|
||||
height: var(--vp-nav-height);
|
||||
padding: 0 32px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .title {
|
||||
padding-left: max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
width: calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
width:
|
||||
calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
32px
|
||||
);
|
||||
);
|
||||
padding-left:
|
||||
max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,7 +142,7 @@ watchPostEffect(() => {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -149,31 +151,32 @@ watchPostEffect(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .content {
|
||||
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
|
||||
padding-left: calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
padding-left:
|
||||
calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: calc(var(--vp-nav-height) - 1px);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper:not(.top) .content-body {
|
||||
position: relative;
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (width <= 767px) {
|
||||
.content-body {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
@ -184,12 +187,12 @@ watchPostEffect(() => {
|
||||
.menu + .social-links::before,
|
||||
.translations + .appearance::before,
|
||||
.appearance + .social-links::before {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
background-color: var(--vp-c-divider);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.menu + .appearance::before,
|
||||
@ -205,7 +208,7 @@ watchPostEffect(() => {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .curtain {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -218,17 +221,18 @@ watchPostEffect(() => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
content: "";
|
||||
background: linear-gradient(var(--vp-c-bg), transparent 70%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .curtain {
|
||||
width: calc(
|
||||
100% -
|
||||
width:
|
||||
calc(
|
||||
100% -
|
||||
((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-appearance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -55,13 +55,13 @@ const hasExtraContent = computed(
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-extra {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-extra {
|
||||
display: none;
|
||||
}
|
||||
@ -69,9 +69,9 @@ const hasExtraContent = computed(
|
||||
|
||||
.trans-title {
|
||||
padding: 0 24px 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
|
||||
@ -27,13 +27,13 @@ defineEmits<(e: 'click') => void>()
|
||||
<style scoped>
|
||||
.navbar-hamburger {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -33,9 +33,9 @@ const page = usePageData()
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
line-height: var(--vp-nav-height);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: var(--vp-nav-height);
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -5,19 +5,14 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-search {
|
||||
flex-grow: 1;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-search {
|
||||
padding-left: 32px;
|
||||
}
|
||||
@ -29,6 +24,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.navbar-search .DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 10px 0 12px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand-1);
|
||||
@ -55,12 +95,12 @@
|
||||
|
||||
.navbar-search .DocSearch-Button {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--docsearch-searchbox-background);
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
@ -82,23 +122,6 @@
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search .DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0 10px 0 12px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -109,7 +132,7 @@
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
@ -117,20 +140,10 @@
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
padding: 0 16px 0 0;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -141,67 +154,58 @@
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
margin: 2px 0 0 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding-left: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding-left: 6px;
|
||||
margin: 2px 0 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition:
|
||||
color 0.5s,
|
||||
border-color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
||||
/*rtl:begin:ignore*/
|
||||
padding-right: 6px;
|
||||
padding-left: 2px;
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding-left: 2px;
|
||||
padding-right: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
/* rtl:end:ignore */
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 1px;
|
||||
letter-spacing: -12px;
|
||||
color: transparent;
|
||||
letter-spacing: -12px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child::after {
|
||||
font-size: 12px;
|
||||
letter-spacing: normal;
|
||||
color: var(--docsearch-muted-color);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
@ -213,8 +217,8 @@
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
background-color: var(--vp-c-white);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Form {
|
||||
@ -228,5 +232,6 @@
|
||||
padding: 0 0.4rem 0 1.555rem;
|
||||
background-position: 0.5rem 0.4rem;
|
||||
}
|
||||
|
||||
/* plugin-search */
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-social-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -27,12 +27,12 @@ const { hasSidebar } = useSidebar()
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid transparent;
|
||||
width: 100%;
|
||||
height: var(--vp-nav-height);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ const { hasSidebar } = useSidebar()
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -51,7 +51,7 @@ const { hasSidebar } = useSidebar()
|
||||
}
|
||||
|
||||
:deep(.logo) {
|
||||
margin-right: 8px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,7 +33,7 @@ const { currentLang, localeLinks } = useLangs()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-translations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -42,9 +42,9 @@ const { currentLang, localeLinks } = useLangs()
|
||||
|
||||
.title {
|
||||
padding: 0 24px 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,19 +33,18 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
<style scoped>
|
||||
.nav-screen {
|
||||
position: fixed;
|
||||
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
padding: 0 32px;
|
||||
inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0 0;
|
||||
|
||||
/* rtl:ignore */
|
||||
|
||||
/* rtl:ignore */
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
background-color: var(--vp-nav-screen-bg-color);
|
||||
padding: 0 32px;
|
||||
overflow-y: auto;
|
||||
transition: background-color 0.5s;
|
||||
pointer-events: auto;
|
||||
background-color: var(--vp-nav-screen-bg-color);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-active,
|
||||
@ -68,16 +67,16 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.nav-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 96px;
|
||||
max-width: 288px;
|
||||
padding: 24px 0 96px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu + .translations,
|
||||
|
||||
@ -17,19 +17,19 @@ const theme = useThemeLocaleData()
|
||||
<style scoped>
|
||||
.nav-screen-appearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px 12px 16px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
transition: var(--t-color);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -60,9 +60,9 @@ function toggle() {
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-group {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
@ -75,8 +75,8 @@ function toggle() {
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open {
|
||||
padding-bottom: 10px;
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button {
|
||||
@ -85,19 +85,19 @@ function toggle() {
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 4px 11px 0;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
padding: 12px 4px 11px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
@ -120,7 +120,7 @@ function toggle() {
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.group + .group,
|
||||
|
||||
@ -26,9 +26,9 @@ const closeScreen = inject('close-screen') as () => void
|
||||
.nav-screen-menu-group-link {
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -31,9 +31,9 @@ defineProps<{
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -21,12 +21,12 @@ const closeScreen = inject('close-screen') as () => void
|
||||
<style scoped>
|
||||
.nav-screen-menu-link {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 0 11px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-1);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
color 0.25s;
|
||||
|
||||
@ -56,7 +56,7 @@ function toggle() {
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon.lang {
|
||||
@ -72,8 +72,8 @@ function toggle() {
|
||||
}
|
||||
|
||||
.link {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,8 +29,9 @@ provide('close-screen', closeScreen)
|
||||
<style scoped>
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
top: var(--vp-layout-top-height, 0px);
|
||||
/*rtl:ignore*/
|
||||
top: var(--vp-layout-top-height, 0);
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-nav);
|
||||
width: 100%;
|
||||
@ -43,11 +44,11 @@ provide('close-screen', closeScreen)
|
||||
}
|
||||
|
||||
.nav-wrapper.fixed :deep(.navbar-wrapper) {
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@ -55,26 +55,17 @@ onContentUpdated(() => zoom?.refresh())
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.plume-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.plume-page {
|
||||
padding: 32px 24px 96px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .plume-page.is-blog {
|
||||
padding-top: calc(var(--vp-nav-height) + 32px);
|
||||
} */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-page {
|
||||
padding: 48px 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.plume-page,
|
||||
.plume-page.is-blog {
|
||||
padding: 32px 32px 0;
|
||||
@ -91,7 +82,7 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.plume-page .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -102,7 +93,7 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 784px;
|
||||
}
|
||||
@ -112,33 +103,58 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
@media (width >= 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
min-width: 640px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.plume-page {
|
||||
width: 100%;
|
||||
padding: 32px 24px 96px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.aside {
|
||||
position: relative;
|
||||
display: none;
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
padding-left: 32px;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
max-width: 256px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin-top: calc(
|
||||
(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
|
||||
);
|
||||
padding-top: calc(
|
||||
var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
|
||||
);
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top:
|
||||
calc(
|
||||
var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
|
||||
);
|
||||
margin-top:
|
||||
calc(
|
||||
(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
|
||||
);
|
||||
overflow: hidden auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@ -158,30 +174,17 @@ onContentUpdated(() => zoom?.refresh())
|
||||
.aside-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(
|
||||
100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
|
||||
);
|
||||
min-height:
|
||||
calc(
|
||||
100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
|
||||
);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
min-width: 640px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
|
||||
@ -81,10 +81,10 @@ function handlePrint() {
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.outline-marker {
|
||||
@ -92,10 +92,10 @@ function handlePrint() {
|
||||
top: 32px;
|
||||
left: -1px;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
width: 2px;
|
||||
height: 18px;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
opacity: 0;
|
||||
transition:
|
||||
top 0.25s cubic-bezier(0, 1, 0.5, 1),
|
||||
background-color 0.5s,
|
||||
@ -105,15 +105,16 @@ function handlePrint() {
|
||||
.outline-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 28px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.outline-title .icon {
|
||||
margin-left: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 4px;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@ defineProps<{
|
||||
|
||||
.outline-link {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
|
||||
@ -76,11 +76,11 @@ const showFooter = computed(() => {
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.edit-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
@ -88,11 +88,11 @@ const showFooter = computed(() => {
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 0;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -107,36 +107,36 @@ const showFooter = computed(() => {
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.last-updated-text {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.last-updated-text {
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.contributors {
|
||||
margin-top: -10px;
|
||||
padding-bottom: 6px;
|
||||
line-height: 32px;
|
||||
margin-top: -10px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.contributors {
|
||||
text-align: right;
|
||||
}
|
||||
@ -150,20 +150,21 @@ const showFooter = computed(() => {
|
||||
|
||||
.contributors-info {
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
.contributor {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
margin-top: 10px;
|
||||
padding-top: 24px;
|
||||
display: grid;
|
||||
grid-row-gap: 8px;
|
||||
padding-top: 24px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.prev-next {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 16px;
|
||||
@ -172,11 +173,11 @@ const showFooter = computed(() => {
|
||||
|
||||
.pager-link {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 11px 16px 13px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 11px 16px 13px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
@ -191,17 +192,17 @@ const showFooter = computed(() => {
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -72,11 +72,11 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
<style scoped>
|
||||
.page-category-wrapper {
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2rem;
|
||||
border-left: solid 4px var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.page-category-wrapper .category {
|
||||
@ -94,23 +94,24 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-title.padding {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.page-meta-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 0 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text-3);
|
||||
border-bottom: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -128,8 +129,8 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
.page-meta-wrapper .tag {
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
line-height: 1;
|
||||
padding: 3px 3px;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-mute);
|
||||
border-radius: 4px;
|
||||
@ -149,9 +150,9 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
.page-meta-wrapper .create-time {
|
||||
flex: 1;
|
||||
min-width: 110px;
|
||||
justify-content: right;
|
||||
text-align: right;
|
||||
min-width: 110px;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,6 +65,12 @@ const createTime = computed(() => {
|
||||
.post-item {
|
||||
padding-top: 1rem;
|
||||
margin: 0 1.75rem 2rem;
|
||||
|
||||
@media (width >= 960px) {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
// border-bottom: solid 1px var(--vp-c-divider);
|
||||
|
||||
&:last-of-type {
|
||||
@ -74,10 +80,10 @@ const createTime = computed(() => {
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: color var(--t-color);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
h3:hover {
|
||||
@ -88,34 +94,28 @@ const createTime = computed(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding: 3px 6px;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
@ -148,9 +148,11 @@ const createTime = computed(() => {
|
||||
.plume-content :deep(p) {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.plume-content :deep(p:first-of-type) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.plume-content :deep(p:last-of-type) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@ const {
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
padding-top: 2rem;
|
||||
flex: 1;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@ -43,10 +43,10 @@ const {
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
padding: 0 4px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
border-radius: 4px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
@ -56,16 +56,17 @@ const {
|
||||
background-color: var(--vp-c-brand-2);
|
||||
border-color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.btn[disabled],
|
||||
.btn[disabled]:hover {
|
||||
color: var(--vp-c-gray-1);
|
||||
border-color: var(--vp-c-divider);
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: var(--vp-c-text-3);
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,8 +25,8 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
margin-top: 32px;
|
||||
padding: 0 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.post-list li {
|
||||
@ -38,12 +38,12 @@ defineProps<{
|
||||
}
|
||||
|
||||
.post-list .post-title {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
margin-right: 14px;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
transition: all var(--t-color);
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
@ -57,6 +57,7 @@ defineProps<{
|
||||
.post-list li:hover .post-title {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.post-list li:hover .post-time {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@ -58,74 +58,75 @@ watch(
|
||||
<style scoped>
|
||||
.sidebar-wrapper {
|
||||
position: fixed;
|
||||
top: var(--vp-layout-top-height, 0px);
|
||||
top: var(--vp-layout-top-height, 0);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-sidebar);
|
||||
padding: 32px 32px 96px;
|
||||
width: calc(100vw - 64px);
|
||||
max-width: 320px;
|
||||
padding: 32px 32px 96px;
|
||||
overflow: hidden auto;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 0;
|
||||
box-shadow: var(--vp-c-shadow-3);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.5s,
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar-wrapper.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.dark .sidebar-wrapper {
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.sidebar-wrapper {
|
||||
z-index: 1;
|
||||
padding-top: var(--vp-nav-height);
|
||||
width: var(--vp-sidebar-width);
|
||||
max-width: 100%;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 1;
|
||||
padding-top: var(--vp-nav-height);
|
||||
visibility: visible;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.sidebar-wrapper {
|
||||
padding-left: max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
width: calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
width:
|
||||
calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
32px
|
||||
);
|
||||
);
|
||||
padding-left:
|
||||
max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.curtain {
|
||||
position: sticky;
|
||||
top: -64px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: var(--vp-nav-height);
|
||||
margin-top: calc(var(--vp-nav-height) * -1);
|
||||
margin-right: -32px;
|
||||
margin-left: -32px;
|
||||
height: var(--vp-nav-height);
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
}
|
||||
}
|
||||
@ -135,14 +136,14 @@ watch(
|
||||
}
|
||||
|
||||
.group + .group {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.group {
|
||||
padding-top: 10px;
|
||||
width: calc(var(--vp-sidebar-width) - 64px);
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -147,8 +147,8 @@ function onCaretClick() {
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
padding: 4px 0;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -195,11 +195,11 @@ function onCaretClick() {
|
||||
|
||||
.caret {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: -7px;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: -7px;
|
||||
color: var(--vp-c-text-3);
|
||||
cursor: pointer;
|
||||
transition: color 0.25s;
|
||||
@ -216,9 +216,9 @@ function onCaretClick() {
|
||||
.caret-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
transform: rotate(90deg);
|
||||
fill: currentcolor;
|
||||
transition: transform 0.25s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sidebar-item.collapsed .caret-icon {
|
||||
@ -230,8 +230,8 @@ function onCaretClick() {
|
||||
.sidebar-item.level-3 .items,
|
||||
.sidebar-item.level-4 .items,
|
||||
.sidebar-item.level-5 .items {
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sidebar-item.collapsed .items {
|
||||
|
||||
@ -44,25 +44,25 @@ function focusOnTargetAnchor({ target }: Event) {
|
||||
.skip-link {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 8px 16px;
|
||||
z-index: 999;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--vp-c-brand-1);
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
text-decoration: none;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.skip-link {
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
|
||||
@ -29,8 +29,8 @@ const svg = computed(() => {
|
||||
<style scoped>
|
||||
.social-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -45,6 +45,6 @@ const svg = computed(() => {
|
||||
.social-link > :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
<style scoped>
|
||||
.switch-wrapper {
|
||||
position: relative;
|
||||
border-radius: 11px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--vp-input-border-color);
|
||||
background-color: var(--vp-input-switch-bg-color);
|
||||
border: 1px solid var(--vp-input-border-color);
|
||||
border-radius: 11px;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
@ -30,12 +30,13 @@
|
||||
.check {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--vp-c-neutral-inverse);
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
@ -45,8 +46,8 @@
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon :deep(svg) {
|
||||
|
||||
@ -69,7 +69,6 @@ function useAppearance() {
|
||||
checked.value = dark
|
||||
classList[dark ? 'add' : 'remove']('dark')
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const _ = window.getComputedStyle(css).opacity
|
||||
document.head.removeChild(css)
|
||||
}
|
||||
@ -112,7 +111,7 @@ watch(checked, (newIsDark) => {
|
||||
}
|
||||
|
||||
.dark .switch-appearance :deep(.check) {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
transform: translateX(18px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,69 +37,75 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
|
||||
<style scoped>
|
||||
.tags-wrapper {
|
||||
padding: 32px 24px 168px;
|
||||
flex: 1;
|
||||
padding: 32px 24px 168px;
|
||||
}
|
||||
|
||||
.tags-wrapper.has-list {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tags-title .icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tags .tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
margin: 8px;
|
||||
padding: 6px 6px 6px 10px;
|
||||
margin: 8px;
|
||||
line-height: 1;
|
||||
|
||||
/* background-color: var(--vp-c-default-soft); */
|
||||
|
||||
/* color: var(--vp-c-text-2); */
|
||||
color: var(--vp-tag-color);
|
||||
border: solid 1px var(--vp-tag-color);
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
border: solid 1px var(--vp-tag-color);
|
||||
border-radius: 4px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
padding-bottom: 8px;
|
||||
margin: 20px 12px -10px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding-bottom: 8px;
|
||||
margin: 20px 12px -10px 12px;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
display: inline-block;
|
||||
border-left: 1px solid var(--vp-tag-color);
|
||||
padding-left: 6px;
|
||||
margin-left: 4px;
|
||||
color: var(--vp-tag-color);
|
||||
border-left: 1px solid var(--vp-tag-color);
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.tags .tag:hover,
|
||||
.tags .tag.active {
|
||||
background-color: var(--vp-tag-color);
|
||||
color: var(--vp-c-bg);
|
||||
background-color: var(--vp-tag-color);
|
||||
}
|
||||
|
||||
.tags .tag:hover .tag-count,
|
||||
|
||||
@ -52,10 +52,10 @@ function linkTo(e: Event) {
|
||||
<style scoped>
|
||||
.VPButton {
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
color 0.25s,
|
||||
border-color 0.25s,
|
||||
@ -70,70 +70,70 @@ function linkTo(e: Event) {
|
||||
}
|
||||
|
||||
.VPButton.medium {
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.VPButton.big {
|
||||
border-radius: 24px;
|
||||
padding: 0 24px;
|
||||
line-height: 46px;
|
||||
font-size: 16px;
|
||||
line-height: 46px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.VPButton.brand {
|
||||
border-color: var(--vp-button-brand-border);
|
||||
color: var(--vp-button-brand-text);
|
||||
background-color: var(--vp-button-brand-bg);
|
||||
border-color: var(--vp-button-brand-border);
|
||||
}
|
||||
|
||||
.VPButton.brand:hover {
|
||||
border-color: var(--vp-button-brand-hover-border);
|
||||
color: var(--vp-button-brand-hover-text);
|
||||
background-color: var(--vp-button-brand-hover-bg);
|
||||
border-color: var(--vp-button-brand-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.brand:active {
|
||||
border-color: var(--vp-button-brand-active-border);
|
||||
color: var(--vp-button-brand-active-text);
|
||||
background-color: var(--vp-button-brand-active-bg);
|
||||
border-color: var(--vp-button-brand-active-border);
|
||||
}
|
||||
|
||||
.VPButton.alt {
|
||||
border-color: var(--vp-button-alt-border);
|
||||
color: var(--vp-button-alt-text);
|
||||
background-color: var(--vp-button-alt-bg);
|
||||
border-color: var(--vp-button-alt-border);
|
||||
}
|
||||
|
||||
.VPButton.alt:hover {
|
||||
border-color: var(--vp-button-alt-hover-border);
|
||||
color: var(--vp-button-alt-hover-text);
|
||||
background-color: var(--vp-button-alt-hover-bg);
|
||||
border-color: var(--vp-button-alt-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.alt:active {
|
||||
border-color: var(--vp-button-alt-active-border);
|
||||
color: var(--vp-button-alt-active-text);
|
||||
background-color: var(--vp-button-alt-active-bg);
|
||||
border-color: var(--vp-button-alt-active-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor {
|
||||
border-color: var(--vp-button-sponsor-border);
|
||||
color: var(--vp-button-sponsor-text);
|
||||
background-color: var(--vp-button-sponsor-bg);
|
||||
border-color: var(--vp-button-sponsor-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor:hover {
|
||||
border-color: var(--vp-button-sponsor-hover-border);
|
||||
color: var(--vp-button-sponsor-hover-text);
|
||||
background-color: var(--vp-button-sponsor-hover-bg);
|
||||
border-color: var(--vp-button-sponsor-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor:active {
|
||||
border-color: var(--vp-button-sponsor-active-border);
|
||||
color: var(--vp-button-sponsor-active-text);
|
||||
background-color: var(--vp-button-sponsor-active-bg);
|
||||
border-color: var(--vp-button-sponsor-active-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,9 +31,9 @@ const { hasSidebar } = useSidebar()
|
||||
.plume-footer {
|
||||
position: relative;
|
||||
z-index: var(--vp-z-index-footer);
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
padding: 32px 24px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
@ -54,23 +54,23 @@ const { hasSidebar } = useSidebar()
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-footer {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: var(--vp-layout-max-width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message,
|
||||
.copyright {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@ withDefaults(defineProps<Props>(), {
|
||||
<style scoped>
|
||||
.badge-view {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 0 10px;
|
||||
line-height: 22px;
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@ -32,11 +32,13 @@ h1 .badge-view {
|
||||
margin-top: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h2 .badge-view {
|
||||
margin-top: 3px;
|
||||
padding: 0 8px;
|
||||
margin-top: 3px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h3 .badge-view {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -44,31 +46,31 @@ h3 .badge-view {
|
||||
h4 .badge-view,
|
||||
h5 .badge-view,
|
||||
h6 .badge-view {
|
||||
vertical-align: middle;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.badge-view.info {
|
||||
border-color: var(--vp-badge-info-border);
|
||||
color: var(--vp-badge-info-text);
|
||||
background-color: var(--vp-badge-info-bg);
|
||||
border-color: var(--vp-badge-info-border);
|
||||
}
|
||||
|
||||
.badge-view.tip {
|
||||
border-color: var(--vp-badge-tip-border);
|
||||
color: var(--vp-badge-tip-text);
|
||||
background-color: var(--vp-badge-tip-bg);
|
||||
border-color: var(--vp-badge-tip-border);
|
||||
}
|
||||
|
||||
.badge-view.warning {
|
||||
border-color: var(--vp-badge-warning-border);
|
||||
color: var(--vp-badge-warning-text);
|
||||
background-color: var(--vp-badge-warning-bg);
|
||||
border-color: var(--vp-badge-warning-border);
|
||||
}
|
||||
|
||||
.badge-view.danger {
|
||||
border-color: var(--vp-badge-danger-border);
|
||||
color: var(--vp-badge-danger-text);
|
||||
background-color: var(--vp-badge-danger-bg);
|
||||
border-color: var(--vp-badge-danger-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,11 +9,11 @@ import IconExternalLink from '../icons/IconExternalLink.vue'
|
||||
<style scoped>
|
||||
.external-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--vp-c-text-3);
|
||||
vertical-align: middle;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
color: var(--vp-c-text-3);
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { usePageLang } from '@vuepress/client'
|
||||
import { useBlogPostData } from '@vuepress-plume/plugin-blog-data/client'
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { PlumeThemeBlogPostItem } from '../../shared/index.js'
|
||||
import { useLocaleLink, useThemeLocaleData } from '../composables/index.js'
|
||||
import { useLocaleLink, useRouteQuery, useThemeLocaleData } from '../composables/index.js'
|
||||
import { getRandomColor, toArray } from '../utils/index.js'
|
||||
|
||||
export function useLocalePostList() {
|
||||
@ -33,10 +33,18 @@ export function usePostListControl() {
|
||||
return next.sticky > prev.sticky ? 1 : -1
|
||||
}),
|
||||
...otherList,
|
||||
]
|
||||
] as PlumeThemeBlogPostItem[]
|
||||
})
|
||||
|
||||
const page = ref(1)
|
||||
const page = useRouteQuery('p', 1, {
|
||||
mode: 'push',
|
||||
transform(val) {
|
||||
const page = Number(val)
|
||||
if (!Number.isNaN(page) && page > 0)
|
||||
return page
|
||||
return 1
|
||||
},
|
||||
})
|
||||
|
||||
const totalPage = computed(() => {
|
||||
if (blog.value.pagination === false)
|
||||
@ -133,14 +141,15 @@ export function useTags() {
|
||||
}))
|
||||
})
|
||||
|
||||
const postList = ref<ShortPostItem[]>([])
|
||||
const currentTag = ref<string>()
|
||||
const currentTag = useRouteQuery<string>('tag')
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
currentTag.value = tag
|
||||
postList.value = list.value.filter((item) => {
|
||||
const postList = computed<ShortPostItem[]>(() => {
|
||||
if (!currentTag.value)
|
||||
return []
|
||||
|
||||
return list.value.filter((item) => {
|
||||
if (item.tags)
|
||||
return toArray(item.tags).includes(tag)
|
||||
return toArray(item.tags).includes(currentTag.value)
|
||||
|
||||
return false
|
||||
}).map(item => ({
|
||||
@ -148,6 +157,10 @@ export function useTags() {
|
||||
path: item.path,
|
||||
createTime: item.createTime.split(' ')[0].replace(/\//g, '-'),
|
||||
}))
|
||||
})
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
currentTag.value = tag
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -8,3 +8,4 @@ export * from './page.js'
|
||||
export * from './readingTime.js'
|
||||
export * from './blog.js'
|
||||
export * from './locale.js'
|
||||
export * from './useRouteQuery.js'
|
||||
|
||||
126
theme/src/client/composables/useRouteQuery.ts
Normal file
126
theme/src/client/composables/useRouteQuery.ts
Normal file
@ -0,0 +1,126 @@
|
||||
import { customRef, nextTick, toValue, watch } from 'vue'
|
||||
import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import type { RouteParamValueRaw, Router } from 'vue-router'
|
||||
import { tryOnScopeDispose } from '@vueuse/core'
|
||||
|
||||
export type RouteQueryValueRaw = RouteParamValueRaw | string[]
|
||||
|
||||
export interface ReactiveRouteOptions {
|
||||
/**
|
||||
* Mode to update the router query, ref is also acceptable
|
||||
*
|
||||
* @default 'replace'
|
||||
*/
|
||||
mode?: MaybeRef<'replace' | 'push'>
|
||||
|
||||
/**
|
||||
* Route instance, use `useRoute()` if not given
|
||||
*/
|
||||
route?: ReturnType<typeof useRoute>
|
||||
|
||||
/**
|
||||
* Router instance, use `useRouter()` if not given
|
||||
*/
|
||||
router?: ReturnType<typeof useRouter>
|
||||
}
|
||||
|
||||
export interface ReactiveRouteOptionsWithTransform<V, R> extends ReactiveRouteOptions {
|
||||
/**
|
||||
* Function to transform data before return
|
||||
*/
|
||||
transform?: (val: V) => R
|
||||
}
|
||||
|
||||
const _queue = new WeakMap<Router, Map<string, any>>()
|
||||
|
||||
export function useRouteQuery(
|
||||
name: string
|
||||
): Ref<null | string | string[]>
|
||||
|
||||
export function useRouteQuery<
|
||||
T extends RouteQueryValueRaw = RouteQueryValueRaw,
|
||||
K = T,
|
||||
>(
|
||||
name: string,
|
||||
defaultValue?: MaybeRefOrGetter<T>,
|
||||
options?: ReactiveRouteOptionsWithTransform<T, K>
|
||||
): Ref<K>
|
||||
|
||||
export function useRouteQuery<
|
||||
T extends RouteQueryValueRaw = RouteQueryValueRaw,
|
||||
K = T,
|
||||
>(
|
||||
name: string,
|
||||
defaultValue?: MaybeRefOrGetter<T>,
|
||||
options: ReactiveRouteOptionsWithTransform<T, K> = {},
|
||||
): Ref<K> {
|
||||
const {
|
||||
mode = 'replace',
|
||||
route = useRoute(),
|
||||
router = useRouter(),
|
||||
transform = value => value as any as K,
|
||||
} = options
|
||||
|
||||
if (!_queue.has(router))
|
||||
_queue.set(router, new Map())
|
||||
|
||||
const _queriesQueue = _queue.get(router)!
|
||||
|
||||
let query = route.query[name] as any
|
||||
|
||||
tryOnScopeDispose(() => {
|
||||
query = undefined
|
||||
})
|
||||
|
||||
let _trigger: () => void
|
||||
|
||||
const proxy = customRef<any>((track, trigger) => {
|
||||
_trigger = trigger
|
||||
|
||||
return {
|
||||
get() {
|
||||
track()
|
||||
|
||||
return transform(query !== undefined ? query : toValue(defaultValue))
|
||||
},
|
||||
set(v) {
|
||||
if (query === v)
|
||||
return
|
||||
|
||||
query = v
|
||||
_queriesQueue.set(name, v)
|
||||
|
||||
trigger()
|
||||
|
||||
nextTick(() => {
|
||||
if (_queriesQueue.size === 0)
|
||||
return
|
||||
|
||||
const newQueries = Object.fromEntries(_queriesQueue.entries())
|
||||
_queriesQueue.clear()
|
||||
|
||||
const { params, query, hash } = route
|
||||
|
||||
router[toValue(mode)]({
|
||||
params,
|
||||
query: { ...query, ...newQueries },
|
||||
hash,
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.query[name],
|
||||
(v) => {
|
||||
query = v
|
||||
|
||||
_trigger()
|
||||
},
|
||||
{ flush: 'sync' },
|
||||
)
|
||||
|
||||
return proxy as any as Ref<K>
|
||||
}
|
||||
@ -46,36 +46,36 @@ const themeData = useThemeLocaleData()
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.not-found {
|
||||
padding: 96px 32px 168px;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
line-height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 12px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 24px auto 18px;
|
||||
width: 64px;
|
||||
height: 1px;
|
||||
margin: 24px auto 18px;
|
||||
background-color: var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0 auto;
|
||||
max-width: 256px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -87,19 +87,19 @@ const themeData = useThemeLocaleData()
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
padding: 3px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
color 0.25s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-dark);
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,19 +9,19 @@ html:not(.dark) .vp-code span {
|
||||
.plume-content {
|
||||
pre {
|
||||
padding: 1.3rem 1.5rem;
|
||||
margin: 0 0 0.85rem 0;
|
||||
border-radius: 6px;
|
||||
margin: 0 0 0.85rem;
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
overflow-wrap: unset;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
overflow-wrap: unset;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
@ -32,26 +32,26 @@ html:not(.dark) .vp-code span {
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
.div[class*='language-'] {
|
||||
.div[class*="language-"] {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
position: relative;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
border-radius: 6px;
|
||||
|
||||
&::before {
|
||||
content: attr(data-ext);
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0.8em;
|
||||
right: 1em;
|
||||
z-index: 3;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-code-line-number-color);
|
||||
content: attr(data-ext);
|
||||
}
|
||||
|
||||
code {
|
||||
@ -60,20 +60,21 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
pre {
|
||||
// force override the background color to be compatible with shiki
|
||||
background: transparent !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// force override the background color to be compatible with shiki
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.highlight-lines {
|
||||
user-select: none;
|
||||
padding-top: 1.3rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 1.3rem;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
|
||||
.highlight-line {
|
||||
background-color: var(--vp-c-default-soft);
|
||||
@ -91,19 +92,19 @@ div[class*='language-'] {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
height: 100%;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-left: 2rem;
|
||||
padding-left: 1rem;
|
||||
margin-left: 2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -111,40 +112,40 @@ div[class*='language-'] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 2rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
color: var(--vp-code-line-number-color);
|
||||
padding-top: 1.25rem;
|
||||
line-height: var(--vp-code-line-height);
|
||||
color: var(--vp-code-line-number-color);
|
||||
text-align: center;
|
||||
counter-reset: line-number;
|
||||
border-right: var(--vp-code-block-divider-color) 1px solid;
|
||||
|
||||
.line-number {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
height: 1.5rem;
|
||||
user-select: none;
|
||||
|
||||
&::before {
|
||||
counter-increment: line-number;
|
||||
content: counter(line-number);
|
||||
font-size: 0.85em;
|
||||
content: counter(line-number);
|
||||
counter-increment: line-number;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted {
|
||||
.plume-content [class*="language-"] code .highlighted {
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
width: calc(100% + 2 * 24px);
|
||||
padding: 0 24px;
|
||||
margin: 0 -24px;
|
||||
background-color: var(--vp-code-line-highlight-color);
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
z-index: 2;
|
||||
|
||||
&.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
@ -155,12 +156,12 @@ div[class*='language-'] {
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff {
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
.plume-content [class*="language-"] code .diff {
|
||||
display: inline-block;
|
||||
width: calc(100% + 2 * 24px);
|
||||
padding: 0 24px;
|
||||
margin: 0 -24px;
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -173,8 +174,8 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
&.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
content: "-";
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
@ -183,13 +184,13 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
&.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
content: "+";
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
.plume-content [class*="language-"] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
@ -197,27 +198,24 @@ div[class*='language-'] {
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.plume-content
|
||||
[class*='language-']:hover
|
||||
.has-focused-lines
|
||||
.line:not(.has-focus) {
|
||||
.plume-content [class*="language-"]:hover .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-tabs-nav {
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// narrow mobile
|
||||
@media (max-width: 419px) {
|
||||
@media (width <= 419px) {
|
||||
.plume-content {
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
margin: 0.85rem -1.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hint-container div[class*='language-'] {
|
||||
.hint-container div[class*="language-"] {
|
||||
margin: 0.85rem -1rem 0.85rem -1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,18 +14,18 @@
|
||||
}
|
||||
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.plume-content h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 32px;
|
||||
margin: 48px 0 16px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
letter-spacing: -0.02em;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.plume-content h2:first-of-type {
|
||||
@ -34,15 +34,15 @@
|
||||
|
||||
.plume-content h3 {
|
||||
margin: 32px 0 0;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.plume-content .header-anchor {
|
||||
float: left;
|
||||
margin-left: -0.87em;
|
||||
padding-right: 0.23em;
|
||||
margin-left: -0.87em;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
@ -66,11 +66,11 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,9 +100,9 @@
|
||||
}
|
||||
|
||||
.plume-content blockquote {
|
||||
padding-left: 16px;
|
||||
margin: 16px 0;
|
||||
border-left: 2px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
@ -166,9 +166,9 @@
|
||||
|
||||
.plume-content table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.plume-content tr {
|
||||
@ -183,15 +183,15 @@
|
||||
|
||||
.plume-content th,
|
||||
.plume-content td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.plume-content th {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: left;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
@ -263,9 +263,9 @@
|
||||
}
|
||||
|
||||
.plume-content :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
background-color: var(--vp-code-bg);
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.25s,
|
||||
background-color 0.5s;
|
||||
|
||||
@ -1,165 +1,239 @@
|
||||
/* webfont-marker-begin */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||||
@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";
|
||||
|
||||
html body {
|
||||
font-synthesis: style;
|
||||
}
|
||||
|
||||
/* webfont-marker-end */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-cyrillic.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-cyrillic-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0460-052F,
|
||||
U+1C80-1C88,
|
||||
U+20B4,
|
||||
U+2DE0-2DFF,
|
||||
U+A640-A69F,
|
||||
U+FE2E-FE2F;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-greek.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-greek.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-03FF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-greek-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||
U+FEFF, U+FFFD;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-latin.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0000-00FF,
|
||||
U+0131,
|
||||
U+0152-0153,
|
||||
U+02BB-02BC,
|
||||
U+02C6,
|
||||
U+02DA,
|
||||
U+02DC,
|
||||
U+2000-206F,
|
||||
U+2074,
|
||||
U+20AC,
|
||||
U+2122,
|
||||
U+2191,
|
||||
U+2193,
|
||||
U+2212,
|
||||
U+2215,
|
||||
U+FEFF,
|
||||
U+FFFD;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-latin-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0100-024F,
|
||||
U+0259,
|
||||
U+1E00-1EFF,
|
||||
U+2020,
|
||||
U+20A0-20AB,
|
||||
U+20AD-20CF,
|
||||
U+2113,
|
||||
U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-vietnamese.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0102-0103,
|
||||
U+0110-0111,
|
||||
U+0128-0129,
|
||||
U+0168-0169,
|
||||
U+01A0-01A1,
|
||||
U+01AF-01B0,
|
||||
U+1EA0-1EF9,
|
||||
U+20AB;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-cyrillic.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-cyrillic-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0460-052F,
|
||||
U+1C80-1C88,
|
||||
U+20B4,
|
||||
U+2DE0-2DFF,
|
||||
U+A640-A69F,
|
||||
U+FE2E-FE2F;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-greek.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-greek.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-03FF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-greek-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||
U+FEFF, U+FFFD;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-latin.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0000-00FF,
|
||||
U+0131,
|
||||
U+0152-0153,
|
||||
U+02BB-02BC,
|
||||
U+02C6,
|
||||
U+02DA,
|
||||
U+02DC,
|
||||
U+2000-206F,
|
||||
U+2074,
|
||||
U+20AC,
|
||||
U+2122,
|
||||
U+2191,
|
||||
U+2193,
|
||||
U+2212,
|
||||
U+2215,
|
||||
U+FEFF,
|
||||
U+FFFD;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0100-024F,
|
||||
U+0259,
|
||||
U+1E00-1EFF,
|
||||
U+2020,
|
||||
U+20A0-20AB,
|
||||
U+20AD-20CF,
|
||||
U+2113,
|
||||
U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-vietnamese.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0102-0103,
|
||||
U+0110-0111,
|
||||
U+0128-0129,
|
||||
U+0168-0169,
|
||||
U+01A0-01A1,
|
||||
U+01AF-01B0,
|
||||
U+1EA0-1EF9,
|
||||
U+20AB;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
/* Chinese quotes rendering fix. 中英文弯引号共享 Unicode 码位，确保引号使用中文字体渲染 */
|
||||
@font-face {
|
||||
font-family: 'Chinese Quotes';
|
||||
src: local('PingFang SC Regular'), local('PingFang SC'), local('SimHei'),
|
||||
local('Source Han Sans SC');
|
||||
font-family: "Chinese Quotes";
|
||||
src:
|
||||
local("PingFang SC Regular"),
|
||||
local("PingFang SC"),
|
||||
local("SimHei"),
|
||||
local("Source Han Sans SC");
|
||||
unicode-range: U+2018, U+2019, U+201C, U+201D; /* 分别是 ‘’“” */
|
||||
}
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
@import '@vuepress/plugin-palette/palette';
|
||||
|
||||
@import 'vars';
|
||||
@import 'fonts';
|
||||
@import 'normalize';
|
||||
@import 'nprogress';
|
||||
@import 'utils';
|
||||
@import 'content';
|
||||
@import 'code';
|
||||
@import 'md-enhance';
|
||||
@import 'search';
|
||||
|
||||
@import '@vuepress/plugin-palette/style';
|
||||
@import "@vuepress/plugin-palette/palette";
|
||||
@import "vars";
|
||||
@import "fonts";
|
||||
@import "normalize";
|
||||
@import "nprogress";
|
||||
@import "utils";
|
||||
@import "content";
|
||||
@import "code";
|
||||
@import "md-enhance";
|
||||
@import "search";
|
||||
@import "@vuepress/plugin-palette/style";
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
.plume-content {
|
||||
@media (width <= 419px) {
|
||||
.vp-code-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hint-container {
|
||||
border-radius: 8px;
|
||||
padding: 16px 16px 8px;
|
||||
line-height: 24px;
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
border-radius: 8px;
|
||||
|
||||
.hint-container-title {
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p + p {
|
||||
@ -20,18 +26,18 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
div[class*='language-'] code {
|
||||
div[class*="language-"] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.note {
|
||||
border-radius: 0;
|
||||
color: var(--vp-c-text-3);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -56,8 +62,8 @@
|
||||
summary {
|
||||
margin: -1.5rem -1.5rem -1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary + p {
|
||||
@ -73,39 +79,46 @@
|
||||
code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
}
|
||||
|
||||
&.important {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-purple-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--vp-c-purple-2);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-warning-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--vp-c-warning-2);
|
||||
}
|
||||
}
|
||||
|
||||
&.caution {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--vp-c-danger-2);
|
||||
}
|
||||
}
|
||||
|
||||
[class*='language-'] .line-numbers {
|
||||
[class*="language-"] .line-numbers {
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
@ -117,8 +130,15 @@
|
||||
}
|
||||
|
||||
.vp-code-demo {
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
|
||||
@media (width <= 419px) {
|
||||
.vp-code-demo-codes div[class*="language-"] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
@ -155,38 +175,27 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-code-demo-codes div[class*='language-'] {
|
||||
.vp-code-demo-codes div[class*="language-"] {
|
||||
border-bottom: 2px dashed var(--vp-c-divider);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-code-demo-codes div[class*='language-'] pre {
|
||||
.vp-code-demo-codes div[class*="language-"] pre {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-code-demo-codes div[class*='language-'] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-code-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
padding-left: 0;
|
||||
|
||||
.task-list-item {
|
||||
input {
|
||||
width: 0;
|
||||
@ -194,30 +203,169 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
input::before,
|
||||
input::after {
|
||||
content: none;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
content: none;
|
||||
}
|
||||
|
||||
input::after {
|
||||
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23c2c2c4" d="M26 27.5H6A1.5 1.5 0 0 1 4.5 26V6c0-.83.67-1.5 1.5-1.5h20c.828 0 1.5.67 1.5 1.5v20a1.5 1.5 0 0 1-1.5 1.5m-18.5-3h17v-17h-17z"%2F%3E%3C%2Fsvg%3E');
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:checked[disabled]::after {
|
||||
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23299764" d="M29.548 3.043a2.5 2.5 0 0 0-3.513.4L16 16.067l-3.508-4.414a2.5 2.5 0 0 0-3.915 3.112l5.465 6.875c.474.597 1.195.943 1.957.943s1.482-.35 1.957-.944L29.95 6.555c.86-1.08.68-2.654-.402-3.513zM24.5 24.5h-17v-17h12.756l2.385-3H6c-.83 0-1.5.67-1.5 1.5v20c0 .828.67 1.5 1.5 1.5h20a1.5 1.5 0 0 0 1.5-1.5V12.85l-3 3.774z"%2F%3E%3C%2Fsvg%3E');
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-tabs {
|
||||
margin: 1.5rem -0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hint-container .vp-tabs {
|
||||
margin: 1rem -0.45rem 1rem -0.75rem;
|
||||
|
||||
.vp-tab {
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes-sep {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
position: relative;
|
||||
padding: 48px 0 12px 16px;
|
||||
margin-left: -16px;
|
||||
font-size: 14px;
|
||||
border-left: 4px solid var(--vp-c-default-soft);
|
||||
|
||||
@media (width >= 419px) {
|
||||
& {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
[lang="zh-CN"] & {
|
||||
content: "脚注:";
|
||||
}
|
||||
|
||||
[lang="en-US"] & {
|
||||
content: "Footnotes:";
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
li:first-of-type p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li:last-of-type p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-item {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-backref {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.4em;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 48 48"%3E%3Cg fill="none" stroke="%23c2c2c4" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"%3E%3Cpath d="m13 8l-7 6l7 7"%2F%3E%3Cpath d="M6 14h22.994c6.883 0 12.728 5.62 12.996 12.5c.284 7.27-5.723 13.5-12.996 13.5H11.998"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-anchor {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content {
|
||||
figure {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin: 1rem auto;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> a {
|
||||
&[href^="http://"],
|
||||
&[href^="https://"] {
|
||||
&::after {
|
||||
@media print {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: inline-block;
|
||||
margin: 6px auto;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
36
theme/src/client/styles/normalize.scss
vendored
36
theme/src/client/styles/normalize.scss
vendored
@ -2,13 +2,13 @@
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-delay: -1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
background-attachment: initial !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-delay: -1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ html {
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -38,13 +38,13 @@ html.dark {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@ html,
|
||||
body {
|
||||
color: var(--vp-c-text-1);
|
||||
background-color: var(--vp-c-bg);
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.25s;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
@ -68,9 +68,9 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -100,7 +100,7 @@ b {
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
@ -116,9 +116,9 @@ a {
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -158,10 +158,10 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -172,7 +172,7 @@ button {
|
||||
}
|
||||
|
||||
button:enabled,
|
||||
[role='button']:enabled {
|
||||
[role="button"]:enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -220,11 +220,11 @@ textarea::placeholder {
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
@ -239,8 +239,8 @@ select {
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.search-box .suggestions {
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
top: 2.5rem;
|
||||
right: -1rem;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@ -3,9 +3,8 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-white: #ffffff;
|
||||
--vp-c-black: #000000;
|
||||
|
||||
--vp-c-white: #fff;
|
||||
--vp-c-black: #000;
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
}
|
||||
@ -125,9 +124,9 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-bg: #ffffff;
|
||||
--vp-c-bg: #fff;
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-elv: #fff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
}
|
||||
|
||||
@ -160,7 +159,7 @@
|
||||
.dark {
|
||||
--vp-c-border: #3c3f44;
|
||||
--vp-c-divider: #2e2e32;
|
||||
--vp-c-gutter: #000000;
|
||||
--vp-c-gutter: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -245,12 +244,35 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
|
||||
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
|
||||
Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--vp-font-family-base:
|
||||
"Chinese Quotes",
|
||||
"Inter var",
|
||||
"Inter",
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
blinkmacsystemfont,
|
||||
"Segoe UI",
|
||||
roboto,
|
||||
"Helvetica Neue",
|
||||
helvetica,
|
||||
arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--vp-font-family-mono:
|
||||
ui-monospace,
|
||||
sfmono-regular,
|
||||
"SF Mono",
|
||||
menlo,
|
||||
monaco,
|
||||
consolas,
|
||||
"Liberation Mono",
|
||||
"Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -301,7 +323,7 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-header-anchor-symbol: '#';
|
||||
--vp-header-anchor-symbol: "#";
|
||||
}
|
||||
|
||||
/**
|
||||
@ -339,7 +361,7 @@
|
||||
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
|
||||
--vp-code-copy-code-hover-bg: var(--vp-c-bg);
|
||||
--vp-code-copy-code-active-text: var(--vp-c-text-2);
|
||||
--vp-code-copy-copied-text-content: 'Copied';
|
||||
--vp-code-copy-copied-text-content: "Copied";
|
||||
|
||||
// --vp-code-tab-divider: var(--vp-code-block-divider-color);
|
||||
// --vp-code-tab-text-color: var(--vp-c-text-2);
|
||||
@ -349,8 +371,8 @@
|
||||
// --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
html[lang='zh-CN'] {
|
||||
--vp-code-copy-copied-text-content: '已复制';
|
||||
html[lang="zh-CN"] {
|
||||
--vp-code-copy-copied-text-content: "已复制";
|
||||
}
|
||||
|
||||
/**
|
||||
@ -509,6 +531,7 @@ html[lang='zh-CN'] {
|
||||
--vp-friends-link-color: var(--vp-c-brand-1);
|
||||
--vp-friends-border-color: var(--vp-c-border);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Badge
|
||||
* -------------------------------------------------------------------------- */
|
||||
@ -631,6 +654,14 @@ html.dark {
|
||||
--code-demo-header-bg-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* md enhance tabs */
|
||||
:root {
|
||||
--tab-bg-color: var(--vp-c-bg);
|
||||
--tab-nav-bg-color: var(--vp-c-bg-soft);
|
||||
--tab-nav-hover-color: var(--vp-c-bg);
|
||||
--tab-nav-text-color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
:root {
|
||||
--t-color: 250ms ease;
|
||||
--code-bg-color: var(--vp-code-block-bg);
|
||||
|
||||
@ -18,9 +18,10 @@ const defaultLocales: NonNullable<PlumeThemeLocaleOptions['locales']> = {
|
||||
|
||||
blog: { pagination: { prevPageText: '上一页', nextPageText: '下一页' } },
|
||||
|
||||
outlineLabel: '内容大纲',
|
||||
outlineLabel: '此页内容',
|
||||
returnToTopLabel: '返回顶部',
|
||||
editLinkText: '编辑此页',
|
||||
contributorsText: '贡献者',
|
||||
lastUpdatedText: '上次更新',
|
||||
prevPageLabel: '上一页',
|
||||
nextPageLabel: '下一页',
|
||||
|
||||
@ -161,6 +161,7 @@ export function setupPlugins(
|
||||
{
|
||||
hint: true, // info note tip warning danger details
|
||||
codetabs: true,
|
||||
tabs: true,
|
||||
align: true,
|
||||
mark: true,
|
||||
tasklist: true,
|
||||
@ -168,6 +169,8 @@ export function setupPlugins(
|
||||
attrs: true,
|
||||
sup: true,
|
||||
sub: true,
|
||||
alert: true,
|
||||
footnote: true,
|
||||
katex: true,
|
||||
} as MarkdownEnhanceOptions,
|
||||
options.markdownEnhance || {},
|
||||
@ -175,8 +178,8 @@ export function setupPlugins(
|
||||
))
|
||||
}
|
||||
|
||||
if (options.comment !== false)
|
||||
plugins.push(commentPlugin(options.comment || {}))
|
||||
if (options.comment)
|
||||
plugins.push(commentPlugin(options.comment))
|
||||
|
||||
if (options.baiduTongji !== false && options.baiduTongji?.key)
|
||||
plugins.push(baiduTongjiPlugin(options.baiduTongji))
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user