diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index a78cacbb..d68986a9 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -77,10 +77,10 @@ export default defineConfig({ ] }, - docFooter: { - prev: false, - next: false, - }, + //docFooter: { + // prev: false, + // next: false, + //}, socialLinks: [ { icon: 'github', link: 'https://github.com/aldeacomputer' } diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css new file mode 100644 index 00000000..9f90fd5a --- /dev/null +++ b/docs/.vitepress/theme/custom.css @@ -0,0 +1,176 @@ +/** + * Some customisations and tweaks to the default VitePress theme to Aldearize it. + */ + +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); + +/** + * Typography + */ + +:root { + --vp-font-family-base: 'IBM Plex Sans', sans-serif; + --vp-font-family-mono: 'IBM Plex Mono', monospace; +} + +/* +.VPDocAside .content, +.VPDocAside .outline-title { + font-size: 14px; +} +*/ + +/** + * Colors + */ + +:root { + --aldea-blue-1: #8fc2d7; /* aldea blue 40 */ + --aldea-blue-2: #5592ac; /* aldea blue 70 */ + --aldea-blue-3: #2c799b; /* aldea blue 60 */ + + --aldea-gray-1: #a8a8a8; /* aldea gray 40 */ + --aldea-gray-2: #636363; /* aldea gray 70 hover */ + --aldea-gray-3: #525252; /* aldea gray 70 */ + + --support-info: var(--aldea-blue-3); + --support-info-bg: rgba(44, 121, 155, 0.1); + --support-tip: var(--aldea-blue-1); + --support-tip-bg: rgba(44, 121, 155, 0.1); /* aldea blue 60 @ 10% */ + --support-warning: #f1c21b; /* aldea yellow 30 */ + --support-warning-bg: rgba(241, 194, 27, 0.05); /* aldea yellow 60 @ 5% */ + --support-danger: #fa4d56; /* aldea red 50 */ + --support-danger-bg: rgba(250, 77, 86, 0.05); /* aldea red 50 @ 5% */ + + /* Changed colors on Light Theme */ + --vp-c-bg: #fffcf8; + --vp-c-bg-alt: #fdf8f0; + --vp-c-bg-elv: #faf1e2; + --vp-c-bg-soft: #fdf8f0; + + /*--vp-custom-block-details-bg: var(--vp-c-bg-alt);*/ + --vp-code-line-highlight-color: var(--vp-c-bg-elv); + + --vp-c-default-1: var(--aldea-gray-1); + --vp-c-default-2: var(--aldea-gray-2); + --vp-c-default-3: var(--aldea-gray-3); + --vp-c-default-soft: var(--vp-c-gray-soft); + + --vp-c-brand-1: var(--aldea-blue-3); + --vp-c-brand-2: var(--aldea-blue-2); + --vp-c-brand-3: var(--aldea-blue-3); + --vp-c-brand-soft: var(--vp-c-gray-soft); +} + +.dark { + --vp-c-bg: #202020; + --vp-c-bg-alt: #161616; + --vp-c-bg-elv: #262626; + --vp-c-bg-soft: var(--vp-c-bg-alt); + --vp-c-brand-1: var(--aldea-blue-1); + --vxp-code-line-highlight-color: rgba(255,255,255,0.1); +} + +/** + * Layout: Home + */ + +:root { + --vp-home-hero-name-color: black; +} + +.dark { + --vp-home-hero-name-color: white; +} + +.VPHome .name, +.VPHome .text { + font-weight: 300; +} + +.VPHome .VPButton { + width: 11rem; + text-align: left; + padding: 4px 16px 4px 16px; + font-weight: 400; +} + +.VPHome .VPButton.brand, +.VPHome .VPButton.alt { + border-radius: 0; +} + +.VPHome .VPButton.alt, +.VPHome .VPButton.alt:hover { + color: white; +} + +.VPHome .VPFeature { + border-radius: 0; +} + +@media (min-width: 640px) { + .VPHome .name, + .VPHome .text { + max-width: 576px; + } +} + +/** + * Layout: Docs + */ + +.VPDoc .custom-block { + margin: 16px 0; + border-left-style: solid; + border-radius: 4px; + border-left-width: 4px; +} + +.VPDoc .custom-block.tip { + border-left-color: var(--support-tip); + background-color: var(--support-tip-bg); +} + +.VPDoc .custom-block.info { + border-left-color: var(--support-info); + background-color: var(--support-info-bg); +} + +.VPDoc .custom-block.warning { + border-left-color: var(--support-warning); + background-color: var(--support-warning-bg); +} + +.VPDoc .custom-block.danger { + border-left-color: var(--support-danger); + background-color: var(--support-danger-bg); +} + +@media (min-width: 640px) { + .VPDoc div[class*='language-'], + .VPDoc .vp-block { + border-radius: 2px; + } +} + +/** + * Component: Prev/Next links + */ + +.prev-next .pager-link { + border-radius: 0; +} + +.VPNavBar .VPMenu { + border-radius: 4px; + background-color: var(--vp-c-bg-alt); +} + +.VPMenu .link { + border-radius: 2px; +} + +.VPMenu .link:hover { + background-color: transparent; +} \ No newline at end of file diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index bdd506d9..80a0fc27 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,7 +1,7 @@ // https://vitepress.dev/guide/custom-theme import { h } from 'vue' import Theme from 'vitepress/theme' -import './style.css' +import './custom.css' export default { extends: Theme, diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css deleted file mode 100644 index 6b01c953..00000000 --- a/docs/.vitepress/theme/style.css +++ /dev/null @@ -1,139 +0,0 @@ -/** - * Customize default theme styling by overriding CSS variables: - * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css - */ - -/** - * Colors - * - * Each colors have exact same color scale system with 3 levels of solid - * colors with different brightness, and 1 soft color. - * - * - `XXX-1`: The most solid color used mainly for colored text. It must - * satisfy the contrast ratio against when used on top of `XXX-soft`. - * - * - `XXX-2`: The color used mainly for hover state of the button. - * - * - `XXX-3`: The color for solid background, such as bg color of the button. - * It must satisfy the contrast ratio with pure white (#ffffff) text on - * top of it. - * - * - `XXX-soft`: The color used for subtle background such as custom container - * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors - * on top of it. - * - * The soft color must be semi transparent alpha channel. This is crucial - * because it allows adding multiple "soft" colors on top of each other - * to create a accent, such as when having inline code block inside - * custom containers. - * - * - `default`: The color used purely for subtle indication without any - * special meanings attched to it such as bg color for menu hover state. - * - * - `brand`: Used for primary brand colors, such as link text, button with - * brand theme, etc. - * - * - `tip`: Used to indicate useful information. The default theme uses the - * brand color for this by default. - * - * - `warning`: Used to indicate warning to the users. Used in custom - * container, badges, etc. - * - * - `danger`: Used to show error, or dangerous message to the users. Used - * in custom container, badges, etc. - * -------------------------------------------------------------------------- */ - - :root { - --vp-c-default-1: var(--vp-c-gray-1); - --vp-c-default-2: var(--vp-c-gray-2); - --vp-c-default-3: var(--vp-c-gray-3); - --vp-c-default-soft: var(--vp-c-gray-soft); - - --vp-c-brand-1: var(--vp-c-indigo-1); - --vp-c-brand-2: var(--vp-c-indigo-2); - --vp-c-brand-3: var(--vp-c-indigo-3); - --vp-c-brand-soft: var(--vp-c-indigo-soft); - - --vp-c-tip-1: var(--vp-c-brand-1); - --vp-c-tip-2: var(--vp-c-brand-2); - --vp-c-tip-3: var(--vp-c-brand-3); - --vp-c-tip-soft: var(--vp-c-brand-soft); - - --vp-c-warning-1: var(--vp-c-yellow-1); - --vp-c-warning-2: var(--vp-c-yellow-2); - --vp-c-warning-3: var(--vp-c-yellow-3); - --vp-c-warning-soft: var(--vp-c-yellow-soft); - - --vp-c-danger-1: var(--vp-c-red-1); - --vp-c-danger-2: var(--vp-c-red-2); - --vp-c-danger-3: var(--vp-c-red-3); - --vp-c-danger-soft: var(--vp-c-red-soft); -} - -/** - * Component: Button - * -------------------------------------------------------------------------- */ - -:root { - --vp-button-brand-border: transparent; - --vp-button-brand-text: var(--vp-c-white); - --vp-button-brand-bg: var(--vp-c-brand-3); - --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-2); - --vp-button-brand-active-border: transparent; - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-c-brand-1); -} - -/** - * Component: Home - * -------------------------------------------------------------------------- */ - -:root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient( - 120deg, - #bd34fe 30%, - #41d1ff - ); - - --vp-home-hero-image-background-image: linear-gradient( - -45deg, - #bd34fe 50%, - #47caff 50% - ); - --vp-home-hero-image-filter: blur(40px); -} - -@media (min-width: 640px) { - :root { - --vp-home-hero-image-filter: blur(56px); - } -} - -@media (min-width: 960px) { - :root { - --vp-home-hero-image-filter: blur(72px); - } -} - -/** - * Component: Custom Block - * -------------------------------------------------------------------------- */ - -:root { - --vp-custom-block-tip-border: transparent; - --vp-custom-block-tip-text: var(--vp-c-text-1); - --vp-custom-block-tip-bg: var(--vp-c-brand-soft); - --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); -} - -/** - * Component: Algolia - * -------------------------------------------------------------------------- */ - -.DocSearch { - --docsearch-primary-color: var(--vp-c-brand-1) !important; -} - diff --git a/docs/examples/markdown.md b/docs/examples/markdown.md index 8e55eb8a..cb8f1d7e 100644 --- a/docs/examples/markdown.md +++ b/docs/examples/markdown.md @@ -37,14 +37,14 @@ export default { **Input** ```md -::: info -This is an info box. -::: - ::: tip This is a tip. ::: +::: info +This is an info box. +::: + ::: warning This is a warning. ::: @@ -60,14 +60,14 @@ This is a details block. **Output** -::: info -This is an info box. -::: - ::: tip This is a tip. ::: +::: info +This is an info box. +::: + ::: warning This is a warning. :::