style: format code with prettier

pull/261/head
Eduardo San Martin Morote 4 years ago
parent f8b4aa5baa
commit 9bc5c5c631

@ -4,7 +4,7 @@ The `themeConfig.algolia` option allows you to use [Algolia DocSearch](https://d
```js ```js
module.exports = { module.exports = {
themeConfig:{ themeConfig: {
algolia: { algolia: {
apiKey: 'your_api_key', apiKey: 'your_api_key',
indexName: 'index_name' indexName: 'index_name'

@ -12,12 +12,13 @@ tagline: Hero subtitle
actionText: Get Started actionText: Get Started
actionLink: /guide/ actionLink: /guide/
features: features:
- title: Simplicity First - title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing. details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered - title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant - title: Performant
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You footer: MIT Licensed | Copyright © 2019-present Evan You
--- ---
``` ```

@ -29,7 +29,7 @@ If your site is deployed to a non-root URL, you will need to set the `base` opti
With a base URL, to reference an image in `public`, you'd have to use URLs like `/bar/image.png`. But this is brittle if you ever decide to change the base. To help with that, VitePress provides a built-in helper `$withBase` (injected onto Vue's prototype) that generates the correct path: With a base URL, to reference an image in `public`, you'd have to use URLs like `/bar/image.png`. But this is brittle if you ever decide to change the base. To help with that, VitePress provides a built-in helper `$withBase` (injected onto Vue's prototype) that generates the correct path:
```html ```html
<img :src="$withBase('/foo.png')" alt="foo"> <img :src="$withBase('/foo.png')" alt="foo" />
``` ```
Note you can use the above syntax not only in theme components, but in your Markdown files as well. Note you can use the above syntax not only in theme components, but in your Markdown files as well.

@ -9,7 +9,7 @@ Without any configuration, the page is pretty minimal, and the user has no way t
│ │ └─ config.js │ │ └─ config.js
│ └─ index.md │ └─ index.md
└─ package.json └─ package.json
```` ```
The essential file for configuring a VitePress site is `.vitepress/config.js`, which should export a JavaScript object: The essential file for configuring a VitePress site is `.vitepress/config.js`, which should export a JavaScript object:

@ -11,7 +11,7 @@ You can develop your custom theme by adding the `.vitepress/theme/index.js` file
│ │ └─ config.js │ │ └─ config.js
│ └─ index.md │ └─ index.md
└─ package.json └─ package.json
```` ```
In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this. In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this.
@ -19,7 +19,7 @@ In `.vitepress/theme/index.js`, you must export theme object and register your o
<!-- .vitepress/theme/Layout.vue --> <!-- .vitepress/theme/Layout.vue -->
<template> <template>
<h1>Custom Layout!</h1> <h1>Custom Layout!</h1>
<Content/><!-- make sure to include markdown outlet --> <Content /><!-- make sure to include markdown outlet -->
</template> </template>
``` ```

@ -128,9 +128,9 @@ deploy:
1. Set the correct `base` in `docs/.vitepress/config.js`. 1. Set the correct `base` in `docs/.vitepress/config.js`.
If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/`, you can omit `base` as it defaults to `'/'`. If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/`, you can omit `base` as it defaults to `'/'`.
If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`. If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
2. Set `dest` in `.vitepress/config.js` to `public`. 2. Set `dest` in `.vitepress/config.js` to `public`.
@ -167,26 +167,26 @@ pages:
2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content: 2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content:
`firebase.json`: `firebase.json`:
```json ```json
{ {
"hosting": { "hosting": {
"public": "./docs/.vitepress/dist", "public": "./docs/.vitepress/dist",
"ignore": [] "ignore": []
}
} }
``` }
```
`.firebaserc`: `.firebaserc`:
```js ```js
{ {
"projects": { "projects": {
"default": "<YOUR_FIREBASE_ID>" "default": "<YOUR_FIREBASE_ID>"
} }
} }
``` ```
3. After running `yarn docs:build` or `npm run docs:build`, deploy using the command `firebase deploy`. 3. After running `yarn docs:build` or `npm run docs:build`, deploy using the command `firebase deploy`.

@ -63,6 +63,7 @@ head:
- name: keywords - name: keywords
content: super duper SEO content: super duper SEO
--- ---
``` ```
### navbar ### navbar

@ -85,5 +85,5 @@ The content value of the `<meta name= "description" content= "...">` for the cur
Helper method to generate correct path by prepending the `base` path configured in `.vitepress/config.js`. It's useful when you want to link to [public files with base path](./assets#public-files). Helper method to generate correct path by prepending the `base` path configured in `.vitepress/config.js`. It's useful when you want to link to [public files with base path](./assets#public-files).
```html ```html
<img :src="$withBase('/foo.png')" alt="foo"> <img :src="$withBase('/foo.png')" alt="foo" />
``` ```

@ -56,6 +56,7 @@ Outbound links automatically get `target="_blank" rel="noopener noreferrer"`:
title: Blogging Like a Hacker title: Blogging Like a Hacker
lang: en-US lang: en-US
--- ---
``` ```
This data will be available to the rest of the page, along with all custom and theming components. This data will be available to the rest of the page, along with all custom and theming components.
@ -202,9 +203,7 @@ export default {
```html ```html
<ul> <ul>
<li v-for="todo in todos" :key="todo.id"> <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
{{ todo.text }}
</li>
</ul> </ul>
``` ```

@ -24,7 +24,7 @@ There're couple of things that are improved from VuePress....
### It Uses Vue 3 ### It Uses Vue 3
Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code the JS payload is therefore *much* cheaper to parse, and hydration also becomes faster. Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code the JS payload is therefore _much_ cheaper to parse, and hydration also becomes faster.
Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content the compiler does the static/dynamic separation for you automatically and you never need to think about it. Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content the compiler does the static/dynamic separation for you automatically and you never need to think about it.

@ -6,7 +6,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, [link to Vue.js](https://vuejs.org) quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, [link to Vue.js](https://vuejs.org) quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur *and emphasize* adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur _and emphasize_ adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Lists ## Lists
@ -21,10 +21,10 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
1. Ordered item 1 1. Ordered item 1
1. Nested ordered item A 1. Nested ordered item A
2. Nested ordered item A 1. Nested ordered item A
2. Ordered item 2 1. Ordered item 2
3. Ordered item 3 1. Ordered item 3
## Code Block and Block Quote ## Code Block and Block Quote

@ -34,12 +34,12 @@ watch(open, (value) => {
color: #eeeeee; color: #eeeeee;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, .85); background-color: rgba(0, 0, 0, 0.85);
transition: all .15s ease; transition: all 0.15s ease;
} }
.debug:hover { .debug:hover {
background-color: rgba(0, 0, 0, .75); background-color: rgba(0, 0, 0, 0.75);
} }
.debug.open { .debug.open {
@ -60,7 +60,7 @@ watch(open, (value) => {
} }
.debug.open:hover { .debug.open:hover {
background-color: rgba(0, 0, 0, .85); background-color: rgba(0, 0, 0, 0.85);
} }
.title { .title {
@ -72,13 +72,13 @@ watch(open, (value) => {
.block { .block {
margin: 2px 0 0; margin: 2px 0 0;
border-top: 1px solid rgba(255, 255, 255, .16); border-top: 1px solid rgba(255, 255, 255, 0.16);
padding: 8px 16px; padding: 8px 16px;
font-family: Hack, monospace; font-family: Hack, monospace;
font-size: 13px; font-size: 13px;
} }
.block +.block { .block + .block {
margin-top: 8px; margin-top: 8px;
} }
</style> </style>

@ -86,15 +86,15 @@ const Home = defineAsyncComponent(() => import('./components/Home.vue'))
const NoopComponent = () => null const NoopComponent = () => null
const CarbonAds = __CARBON__ ? defineAsyncComponent( const CarbonAds = __CARBON__
() => import('./components/CarbonAds.vue') ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
) : NoopComponent : NoopComponent
const BuySellAds = __BSA__ ? defineAsyncComponent( const BuySellAds = __BSA__
() => import('./components/BuySellAds.vue') ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
) : NoopComponent : NoopComponent
const AlgoliaSearchBox = __ALGOLIA__ ? defineAsyncComponent( const AlgoliaSearchBox = __ALGOLIA__
() => import('./components/AlgoliaSearchBox.vue') ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
) : NoopComponent : NoopComponent
// generic state // generic state
const route = useRoute() const route = useRoute()

@ -41,7 +41,9 @@ onMounted(() => {
document.head.appendChild(s) document.head.appendChild(s)
s.onload = () => { load() } s.onload = () => {
load()
}
} else { } else {
load() load()
} }
@ -62,7 +64,7 @@ function load() {
.buy-sell-ads { .buy-sell-ads {
margin: 0 auto; margin: 0 auto;
padding-top: 2rem; padding-top: 2rem;
font-size: .85rem; font-size: 0.85rem;
} }
.bsa-cpc { .bsa-cpc {
@ -111,7 +113,7 @@ function load() {
margin-left: 36px; margin-left: 36px;
padding: 0 8px; padding: 0 8px;
line-height: 22px; line-height: 22px;
font-size: .85em; font-size: 0.85em;
font-weight: 500; font-weight: 500;
color: #1c90f3; color: #1c90f3;
content: 'Sponsored'; content: 'Sponsored';

@ -1,6 +1,12 @@
<template> <template>
<div class="edit-link"> <div class="edit-link">
<a v-if="url" class="link" :href="url" target="_blank" rel="noopener noreferrer"> <a
v-if="url"
class="link"
:href="url"
target="_blank"
rel="noopener noreferrer"
>
{{ text }} <OutboundLink class="icon" /> {{ text }} <OutboundLink class="icon" />
</a> </a>
</div> </div>

@ -3,7 +3,11 @@
<div class="wrapper"> <div class="wrapper">
<div class="container"> <div class="container">
<div class="features"> <div class="features">
<section v-for="(feature, index) in features" :key="index" class="feature"> <section
v-for="(feature, index) in features"
:key="index"
class="feature"
>
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2> <h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
<p class="details" v-if="feature.details">{{ feature.details }}</p> <p class="details" v-if="feature.details">{{ feature.details }}</p>
</section> </section>

@ -38,7 +38,7 @@
margin: 0; margin: 0;
text-align: center; text-align: center;
line-height: 1.4; line-height: 1.4;
font-size: .9rem; font-size: 0.9rem;
color: var(--c-text-light); color: var(--c-text-light);
} }
</style> </style>

@ -1,7 +1,11 @@
<template> <template>
<header v-if="showHero" class="home-hero"> <header v-if="showHero" class="home-hero">
<figure v-if="$frontmatter.heroImage" class="figure"> <figure v-if="$frontmatter.heroImage" class="figure">
<img class="image" :src="$withBase($frontmatter.heroImage)" :alt="$frontmatter.heroAlt" /> <img
class="image"
:src="$withBase($frontmatter.heroImage)"
:alt="$frontmatter.heroAlt"
/>
</figure> </figure>
<h1 v-if="hasHeroText" id="main-title" class="title">{{ heroText }}</h1> <h1 v-if="hasHeroText" id="main-title" class="title">{{ heroText }}</h1>
@ -30,10 +34,12 @@ const site = useSiteDataByRoute()
const data = useFrontmatter() const data = useFrontmatter()
const showHero = computed(() => { const showHero = computed(() => {
return data.value.heroImage return (
|| hasHeroText.value data.value.heroImage ||
|| hasTagline.value hasHeroText.value ||
|| hasAction.value hasTagline.value ||
hasAction.value
)
}) })
const hasHeroText = computed(() => data.value.heroText !== null) const hasHeroText = computed(() => data.value.heroText !== null)
@ -43,7 +49,9 @@ const hasTagline = computed(() => data.value.tagline !== null)
const tagline = computed(() => data.value.tagline || site.value.description) const tagline = computed(() => data.value.tagline || site.value.description)
const hasAction = computed(() => data.value.actionLink && data.value.actionText) const hasAction = computed(() => data.value.actionLink && data.value.actionText)
const hasAltAction = computed(() => data.value.altActionLink && data.value.altActionText) const hasAltAction = computed(
() => data.value.altActionLink && data.value.altActionText
)
</script> </script>
<style scoped> <style scoped>

@ -34,14 +34,14 @@ defineEmit(['toggle'])
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider);
padding: .7rem 1.5rem .7rem 4rem; padding: 0.7rem 1.5rem 0.7rem 4rem;
height: var(--header-height); height: var(--header-height);
background-color: #ffffff; background-color: #ffffff;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
.nav-bar { .nav-bar {
padding: .7rem 1.5rem; padding: 0.7rem 1.5rem;
} }
} }

@ -26,7 +26,7 @@
} }
.logo { .logo {
margin-right: .75rem; margin-right: 0.75rem;
height: 1.3rem; height: 1.3rem;
vertical-align: bottom; vertical-align: bottom;
} }

@ -27,7 +27,12 @@ const route = useRoute()
const open = ref(false) const open = ref(false)
watch(() => route.path, () => { open.value = false }) watch(
() => route.path,
() => {
open.value = false
}
)
function toggle() { function toggle() {
open.value = !open.value open.value = !open.value
@ -82,7 +87,7 @@ function toggle() {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
padding: 0; padding: 0;
line-height: 24px; line-height: 24px;
font-size: .9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }
} }

@ -13,7 +13,7 @@ import { useNavLink } from '../composables/navLink'
import OutboundLink from './icons/OutboundLink.vue' import OutboundLink from './icons/OutboundLink.vue'
const props = defineProps<{ const props = defineProps<{
item: DefaultTheme.NavItemWithLink, item: DefaultTheme.NavItemWithLink
}>() }>()
const propsRefs = toRefs(props) const propsRefs = toRefs(props)

@ -36,7 +36,7 @@ const links = computed(() => site.value.themeConfig.nav)
<style scoped> <style scoped>
.nav-links { .nav-links {
padding: .75rem 0; padding: 0.75rem 0;
border-bottom: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider);
} }

@ -1,5 +1,7 @@
<template functional> <template functional>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z" /> <path
d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
/>
</svg> </svg>
</template> </template>

@ -1,5 +1,7 @@
<template functional> <template functional>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z" /> <path
d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
/>
</svg> </svg>
</template> </template>

@ -1,9 +1,9 @@
code { code {
margin: 0; margin: 0;
border-radius: 3px; border-radius: 3px;
padding: .25rem .5rem; padding: 0.25rem 0.5rem;
font-family: var(--code-font-family); font-family: var(--code-font-family);
font-size: .85em; font-size: 0.85em;
color: var(--c-text-light); color: var(--c-text-light);
background-color: var(--code-inline-bg-color); background-color: var(--code-inline-bg-color);
} }
@ -89,7 +89,7 @@ li > div[class*='language-'] {
} }
.highlight-lines .highlighted { .highlight-lines .highlighted {
background-color: rgba(0, 0, 0, .66); background-color: rgba(0, 0, 0, 0.66);
} }
/* Line numbers mode */ /* Line numbers mode */
@ -104,7 +104,7 @@ div[class*='language-'].line-numbers-mode {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 3; z-index: 3;
border-right: 1px solid rgba(0, 0, 0, .5); border-right: 1px solid rgba(0, 0, 0, 0.5);
padding: 1.25rem 0; padding: 1.25rem 0;
width: 3.5rem; width: 3.5rem;
text-align: center; text-align: center;
@ -118,10 +118,10 @@ div[class*='language-'].line-numbers-mode {
[class*='language-']:before { [class*='language-']:before {
position: absolute; position: absolute;
top: .6em; top: 0.6em;
right: 1em; right: 1em;
z-index: 2; z-index: 2;
font-size: .8rem; font-size: 0.8rem;
color: #888; color: #888;
} }

@ -2,8 +2,8 @@
.custom-block.warning, .custom-block.warning,
.custom-block.danger { .custom-block.danger {
margin: 1rem 0; margin: 1rem 0;
border-left: .5rem solid; border-left: 0.5rem solid;
padding: .1rem 1.5rem; padding: 0.1rem 1.5rem;
overflow-x: auto; overflow-x: auto;
} }
@ -15,7 +15,7 @@
.custom-block.warning { .custom-block.warning {
border-color: #e7c000; border-color: #e7c000;
color: #6b5900; color: #6b5900;
background-color: rgba(255, 229, 100, .3); background-color: rgba(255, 229, 100, 0.3);
} }
.custom-block.warning .custom-block-title { .custom-block.warning .custom-block-title {
@ -65,6 +65,6 @@
} }
.custom-block-title { .custom-block-title {
margin-bottom: -.4rem; margin-bottom: -0.4rem;
font-weight: 600; font-weight: 600;
} }

@ -83,7 +83,7 @@ h2 {
margin-top: 2.25rem; margin-top: 2.25rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
border-bottom: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider);
padding-bottom: .3rem; padding-bottom: 0.3rem;
line-height: 1.25; line-height: 1.25;
font-size: 1.65rem; font-size: 1.65rem;
/* overflow-x: auto; */ /* overflow-x: auto; */
@ -112,7 +112,7 @@ ul {
a, a,
area, area,
button, button,
[role="button"], [role='button'],
input, input,
label, label,
select, select,
@ -132,10 +132,10 @@ a:hover {
a.header-anchor { a.header-anchor {
float: left; float: left;
margin-top: .125em; margin-top: 0.125em;
margin-left: -.87em; margin-left: -0.87em;
padding-right: .23em; padding-right: 0.23em;
font-size: .85em; font-size: 0.85em;
opacity: 0; opacity: 0;
} }

@ -7,7 +7,7 @@
.sidebar-link-item { .sidebar-link-item {
display: block; display: block;
margin: 0; margin: 0;
border-left: .25rem solid transparent; border-left: 0.25rem solid transparent;
color: var(--c-text); color: var(--c-text);
} }
@ -21,7 +21,7 @@ a.sidebar-link-item.active {
} }
.sidebar > .sidebar-links { .sidebar > .sidebar-links {
padding: .75rem 0 5rem; padding: 0.75rem 0 5rem;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
@ -31,7 +31,7 @@ a.sidebar-link-item.active {
} }
.sidebar > .sidebar-links > .sidebar-link + .sidebar-link { .sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
padding-top: .5rem; padding-top: 0.5rem;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
@ -41,7 +41,7 @@ a.sidebar-link-item.active {
} }
.sidebar > .sidebar-links > .sidebar-link > .sidebar-link-item { .sidebar > .sidebar-links > .sidebar-link > .sidebar-link-item {
padding: .35rem 1.5rem .35rem 1.25rem; padding: 0.35rem 1.5rem 0.35rem 1.25rem;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
} }
@ -51,47 +51,57 @@ a.sidebar-link-item.active {
font-weight: 600; font-weight: 600;
} }
.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > .sidebar-link-item { .sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-link-item {
display: block; display: block;
padding: .35rem 1.5rem .35rem 2rem; padding: 0.35rem 1.5rem 0.35rem 2rem;
line-height: 1.4; line-height: 1.4;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
} }
.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > a.sidebar-link-item.active { .sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> a.sidebar-link-item.active {
border-left-color: var(--c-brand); border-left-color: var(--c-brand);
font-weight: 600; font-weight: 600;
} }
.sidebar > .sidebar
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-link-item { > .sidebar-link-item {
display: block; display: block;
padding: .3rem 1.5rem .3rem 3rem; padding: 0.3rem 1.5rem 0.3rem 3rem;
line-height: 1.4; line-height: 1.4;
font-size: .9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
} }
.sidebar > .sidebar
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-links > > .sidebar-links
.sidebar-link > > .sidebar-link
.sidebar-link-item { > .sidebar-link-item {
display: block; display: block;
padding: .3rem 1.5rem .3rem 4rem; padding: 0.3rem 1.5rem 0.3rem 4rem;
line-height: 1.4; line-height: 1.4;
font-size: .9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
} }

@ -1,6 +1,5 @@
/** Base Styles */ /** Base Styles */
:root { :root {
/** /**
* Colors * Colors
* --------------------------------------------------------------------- */ * --------------------------------------------------------------------- */
@ -8,8 +7,8 @@
--c-white: #ffffff; --c-white: #ffffff;
--c-black: #000000; --c-black: #000000;
--c-divider-light: rgba(60, 60, 67, .12); --c-divider-light: rgba(60, 60, 67, 0.12);
--c-divider-dark: rgba(84, 84, 88, .48); --c-divider-dark: rgba(84, 84, 88, 0.48);
--c-text-light-1: #2c3e50; --c-text-light-1: #2c3e50;
--c-text-light-2: #476582; --c-text-light-2: #476582;
@ -22,8 +21,11 @@
* Typography * Typography
* --------------------------------------------------------------------- */ * --------------------------------------------------------------------- */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
/** /**
* Z Indexes * Z Indexes
@ -39,11 +41,11 @@
* Shadows * Shadows
* --------------------------------------------------------------------- */ * --------------------------------------------------------------------- */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07); --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
--shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
--shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12); --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
--shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16); --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
/** /**
* Sizes * Sizes
@ -54,7 +56,6 @@
/** Fallback Styles */ /** Fallback Styles */
:root { :root {
--c-divider: var(--c-divider-light); --c-divider: var(--c-divider-light);
--c-text: var(--c-text-light-1); --c-text: var(--c-text-light-1);
@ -66,7 +67,6 @@
--code-line-height: 24px; --code-line-height: 24px;
--code-font-family: var(--font-family-mono); --code-font-family: var(--font-family-mono);
--code-font-size: 14px; --code-font-size: 14px;
--code-inline-bg-color: rgba(27, 31, 35, .05); --code-inline-bg-color: rgba(27, 31, 35, 0.05);
--code-bg-color: #282c34; --code-bg-color: #282c34;
} }

@ -14,8 +14,5 @@
"vitepress": ["index.ts"] "vitepress": ["index.ts"]
} }
}, },
"include": [ "include": [".", "../../types/shared.d.ts"]
".",
"../../types/shared.d.ts",
]
} }

@ -11,8 +11,5 @@
"/@types/*": ["../../types/*"] "/@types/*": ["../../types/*"]
} }
}, },
"include": [ "include": [".", "../../types/shared.d.ts"]
".",
"../../types/shared.d.ts"
]
} }

@ -6,8 +6,5 @@
"/@types/*": ["../../types/*"] "/@types/*": ["../../types/*"]
} }
}, },
"include": [ "include": [".", "../../types/shared.d.ts"]
".",
"../../types/shared.d.ts"
]
} }

Loading…
Cancel
Save