docs: improve styling

vueuse · Apr 13, 2023 · d142af1 · d142af1
1 parent fe9ada1
commit d142af1
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 8 deletions.
diff --git a/meta/versions.ts b/meta/versions.ts
@@ -4,7 +4,7 @@ export const currentVersion = `v${version}`
 
 export const versions = [
   { version: currentVersion },
-  { version: 'v9.8.1', link: 'https://v9-8-1.vueuse.org/' },
+  { version: 'v9.13.0', link: 'https://v9-13-0.vueuse.org/' },
   { version: 'v8.9.4', link: 'https://v8-9-4.vueuse.org/' },
   { version: 'v7.7.1', link: 'https://v7-7-1.vueuse.org/' },
   { version: 'v6.7.6', link: 'https://v6-7-6.vueuse.org/' },

diff --git a/packages/.vitepress/theme/components/CourseLink.vue b/packages/.vitepress/theme/components/CourseLink.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <a :href="href" target="_blank" bg-green:10 px4 py3 rounded block mt2 flex items-center gap2>
+  <a :href="href" target="_blank" bg-green:10 px4 py3 rounded-md block mt2 flex items-center gap2>
     <div i-carbon:play-filled flex-none text-lg />
     <slot />
   </a>

diff --git a/packages/.vitepress/theme/index.ts b/packages/.vitepress/theme/index.ts
@@ -5,6 +5,7 @@ import './styles/main.css'
 import './styles/demo.css'
 import './styles/utils.css'
 import './styles/vars.css'
+import './styles/overrides.css'
 import 'uno.css'
 
 export default {

diff --git a/packages/.vitepress/theme/styles/overrides.css b/packages/.vitepress/theme/styles/overrides.css
@@ -0,0 +1,8 @@
+.custom-block-title {
+  opacity: 0.5;
+  font-size: 12px;
+  margin-top: -5px !important;
+  margin-bottom: -10px !important;
+  filter: saturate(0.6);
+  letter-spacing: 0.5px;
+}
diff --git a/packages/.vitepress/theme/styles/vars.css b/packages/.vitepress/theme/styles/vars.css
@@ -16,7 +16,16 @@
   --vp-c-text-light-2: rgba(56 56 56 / 70%);
   --vp-c-text-dark-2: rgba(56 56 56 / 70%);
 
+  --vp-custom-block-info-bg: transparent;
   --vp-custom-block-tip-bg: transparent;
+
+  --vp-custom-block-warning-bg: #d9a40605;
+  --vp-custom-block-warning-text: #d9a406;
+  --vp-custom-block-warning-border: #d9a40630;
+
+  --vp-custom-block-tip-bg: #44bd8705;
+  --vp-custom-block-tip-text: #44bd87;
+  --vp-custom-block-tip-border: #44bd8730;
 }
 
 .dark {

diff --git a/packages/core/createReusableTemplate/index.md b/packages/core/createReusableTemplate/index.md
@@ -148,7 +148,7 @@ const TemplateFoo = createReusableTemplate<{ msg: string }>()
 </template>
 ```
 
-::: info
+::: warning
 Dot notation is not supported in Vue 2.
 :::
 

diff --git a/packages/core/useVirtualList/index.md b/packages/core/useVirtualList/index.md
@@ -2,13 +2,12 @@
 category: Component
 ---
 
-::: info
-Please consider using [`vue-virtual-scroller`](https://github.com/Akryum/vue-virtual-scroller) if you are looking for more features.
-:::
-
-
 # useVirtualList
 
+::: warning
+Consider using [`vue-virtual-scroller`](https://github.com/Akryum/vue-virtual-scroller) instead, if you are looking for more features.
+:::
+
 Create virtual lists with ease. Virtual lists (sometimes called [*virtual scrollers*](https://akryum.github.io/vue-virtual-scroller/)) allow you to render a large number of items performantly. They only render the minimum number of DOM nodes necessary to show the items within the `container` element by using the `wrapper` element to emulate the container element's full height.
 
 ## Usage