From a4240a520e4d9537cf9f15094387b3add6139d24 Mon Sep 17 00:00:00 2001 From: Dania Rifki Date: Thu, 5 Feb 2026 18:20:08 +0800 Subject: [Docs] Updated light and dark themes. Use Merriweather for the font and fix minor typos --- doc/docs/.vitepress/config.mts | 24 +++-- .../.vitepress/theme/components/YueCompiler.vue | 3 +- doc/docs/.vitepress/theme/custom.css | 101 ++++++++++++++++++++- doc/docs/doc/licence-mit.md | 2 +- doc/docs/index.md | 2 +- doc/docs/zh/index.md | 2 +- 6 files changed, 117 insertions(+), 17 deletions(-) (limited to 'doc/docs') diff --git a/doc/docs/.vitepress/config.mts b/doc/docs/.vitepress/config.mts index 103dfc9..c672c7a 100644 --- a/doc/docs/.vitepress/config.mts +++ b/doc/docs/.vitepress/config.mts @@ -1,9 +1,13 @@ -import { defineConfig } from 'vitepress' -import { resolve, dirname } from 'path' -import { readFileSync } from 'fs' -import { fileURLToPath } from 'url' -import lightPlus from '@shikijs/themes/light-plus' -import darkPlus from '@shikijs/themes/dark-plus' +import { readFileSync } from 'fs'; +import { + dirname, + resolve, +} from 'path'; +import { fileURLToPath } from 'url'; +import { defineConfig } from 'vitepress'; + +import darkPlus from '@shikijs/themes/dark-plus'; +import lightPlus from '@shikijs/themes/light-plus'; const __dirname = dirname(fileURLToPath(import.meta.url)) const moonscriptGrammarPath = resolve(__dirname, 'grammars/moonscript.tmLanguage.json') @@ -143,8 +147,8 @@ function createSidebar(basePath: string, zh: boolean) { link: `${basePath}/the-yuescript-library`, }, { - text: zh ? 'MIT 许可证' : 'Licence: MIT', - link: `${basePath}/licence-mit`, + text: zh ? 'MIT 许可证' : 'License: MIT', + link: `${basePath}/license-mit`, }, ] } @@ -217,7 +221,7 @@ export default defineConfig({ nav: [ { text: 'Document', link: '/doc/' }, { text: 'Try yue!', link: '/try/' }, - { text: 'Github', link: 'https://github.com/IppClub/Yuescript' } + { text: 'GitHub', link: 'https://github.com/IppClub/Yuescript' } ], sidebar: createSidebar('/doc', false), } @@ -230,7 +234,7 @@ export default defineConfig({ nav: [ { text: '文档', link: '/zh/doc/' }, { text: '试一试!', link: '/zh/try/' }, - { text: 'Github', link: 'https://github.com/IppClub/Yuescript' } + { text: 'GitHub', link: 'https://github.com/IppClub/Yuescript' } ], sidebar: createSidebar('/zh/doc', true), } diff --git a/doc/docs/.vitepress/theme/components/YueCompiler.vue b/doc/docs/.vitepress/theme/components/YueCompiler.vue index 13a5524..0b7a530 100755 --- a/doc/docs/.vitepress/theme/components/YueCompiler.vue +++ b/doc/docs/.vitepress/theme/components/YueCompiler.vue @@ -446,7 +446,8 @@ export default { .childTitle { width: 100%; font-size: 1.2em; - color: #b7ae8f; + color: var(--vp-c-text-2); + font-weight: bold; text-align: center; padding: 0.2em; height: 2.5em; diff --git a/doc/docs/.vitepress/theme/custom.css b/doc/docs/.vitepress/theme/custom.css index bd89528..f7c58dd 100644 --- a/doc/docs/.vitepress/theme/custom.css +++ b/doc/docs/.vitepress/theme/custom.css @@ -1,4 +1,19 @@ +@import '@fontsource/merriweather/300.css'; +@import '@fontsource/merriweather/400.css'; +@import '@fontsource/merriweather/700.css'; +@import '@fontsource/merriweather/900.css'; +@import '@fontsource/merriweather/300-italic.css'; +@import '@fontsource/merriweather/400-italic.css'; +@import '@fontsource/merriweather/700-italic.css'; +@import '@fontsource/merriweather/900-italic.css'; + :root { + /* --- TYPOGRAPHY --- */ + /* Keep standard sans-serif for body text for readability */ + --vp-font-family-base: system-ui, sans-serif; + --vp-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + + /* --- BRAND COLORS (Original Moon Gold) --- */ --vp-c-brand-1: #b4ac8f; --vp-button-brand-bg: #b4ac8f; --vp-button-brand-hover-bg: #b4ac8f; @@ -7,13 +22,87 @@ --vp-button-brand-hover-border: #b4ac8f; --vp-button-brand-active-border: #b4ac8f; --vp-button-brand-text: #fff; + + /* --- LIGHT MODE THEME --- */ + /* A warmer, "creamy" paper feel instead of harsh white */ + --vp-c-bg: #FDFBF7; + --vp-c-bg-soft: #F7F5F0; + /* Slightly darker for sidebars */ + --vp-c-bg-alt: #F0EDE5; + /* For code blocks/inputs */ + + /* Text Colors: Deep Navy instead of pure black for softer contrast */ + --vp-c-text-1: #1a202c; + --vp-c-text-2: #4a5568; +} + +/* Hero image - enlarge container to fit 450px image without overflow */ +@media (max-width: 960px) { + .VPHero .image-container { + max-width: 450px !important; + } + + .VPHero :deep(.image-src) { + max-width: 450px; + max-height: 450px; + } } -.VPHomeHero .image img { - width: 450px; - max-width: 450px !important; +/* --- DARK MODE THEME (Midnight Blue) --- */ +.dark { + /* Deep Midnight Blue background (replaces standard grey) */ + --vp-c-bg: #0B0E14; + --vp-c-bg-soft: #131722; + /* Sidebar/Nav */ + --vp-c-bg-alt: #1A1F2E; + /* Code blocks/inputs */ + + /* Text Colors: Moonlight Silver */ + --vp-c-text-1: #E2E8F0; + --vp-c-text-2: #94A3B8; + + /* Adjust border colors to blend with blue, not grey */ + --vp-c-border: #1E293B; + --vp-c-divider: #1E293B; + --vp-c-gutter: #1E293B; } +/* --- HEADINGS: Apply the Serif Font --- */ +h1, +h2, +h3, +h4, +h5, +h6, +.VPFeature .title, +.VPHero .name, +.VPNavBarTitle .title { + font-family: 'Merriweather', serif !important; + letter-spacing: -0.02em; + /* Tighter tracking looks more professional on serifs */ +} + +/* Make the Hero Title (YueScript) feel more "Editorial" */ +.VPHero .name { + font-weight: 900 !important; + color: var(--vp-c-brand-1); + /* Optional: Adds a subtle glow in dark mode */ + text-shadow: 0 0 20px rgba(180, 172, 143, 0.2); +} + +/* --- BUTTONS --- */ +/* Ensure the "Brand" buttons use our Gold color with white text for contrast */ +.VPButton.brand { + color: #fff !important; + background-color: var(--vp-c-brand-1) !important; + border-color: var(--vp-c-brand-1) !important; +} + +.VPButton.brand:hover { + background-color: var(--vp-c-brand-1) !important; +} + + /* Prism theme for YueCompiler output (shikijs/themes light-plus & dark-plus) */ .code-output, .code-output code { @@ -121,3 +210,9 @@ .dark .code-output .token.invalid { color: #f44747; } + +/* --- CODE BLOCKS --- */ +/* Slight adjustment to code block background to fit the midnight theme */ +.dark .vp-code-group .tabs label { + background-color: #1A1F2E; +} \ No newline at end of file diff --git a/doc/docs/doc/licence-mit.md b/doc/docs/doc/licence-mit.md index 253298f..f1d5d60 100644 --- a/doc/docs/doc/licence-mit.md +++ b/doc/docs/doc/licence-mit.md @@ -1,4 +1,4 @@ -# Licence: MIT +# License: MIT Copyright (c) 2017-2026 Li Jin \ diff --git a/doc/docs/index.md b/doc/docs/index.md index 03a33dd..6141caf 100644 --- a/doc/docs/index.md +++ b/doc/docs/index.md @@ -2,7 +2,7 @@ layout: home hero: name: YueScript - text: A language that compiles to Lua + tagline: A language that compiles to Lua image: src: /image/yuescript.svg alt: YueScript diff --git a/doc/docs/zh/index.md b/doc/docs/zh/index.md index ea42085..5f2dc20 100644 --- a/doc/docs/zh/index.md +++ b/doc/docs/zh/index.md @@ -2,7 +2,7 @@ layout: home hero: name: 月之脚本 - text: 一门编译到 Lua 的语言 + tagline: 一门编译到 Lua 的语言 image: src: /image/yuescript.svg alt: 月之脚本 -- cgit v1.2.3-55-g6feb