mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
docs: bring over springloaded fonts
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { NuxtLink } from '#components'
|
||||
import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
|
||||
import { useWindowScroll } from '@vueuse/core'
|
||||
import SpringloadedLogo from '~/assets/svg/springloaded-logo.svg'
|
||||
|
||||
const { y } = useWindowScroll()
|
||||
|
||||
@@ -58,26 +59,29 @@ const isScrolled = computed(() => y.value !== 0)
|
||||
viewBox="0 0 87 68"
|
||||
>
|
||||
<path
|
||||
class="fill-current fill-[#0EE2FF] dark:fill-sky-900"
|
||||
class="fill-[#0EE2FF] dark:fill-sky-900"
|
||||
fill-rule="evenodd"
|
||||
d="M62.1429 6.1818H24.8571c-10.2961 0-18.6428 8.3031-18.6428 18.5455v18.5454c0 10.2424 8.3467 18.5455 18.6428 18.5455h37.2858c10.2961 0 18.6428-8.3031 18.6428-18.5455V24.7273c0-10.2424-8.3467-18.5455-18.6428-18.5455ZM24.8571 0C11.1289 0 0 11.0708 0 24.7273v18.5454C0 56.9292 11.1289 68 24.8571 68h37.2858C75.8711 68 87 56.9292 87 43.2727V24.7273C87 11.0708 75.8711 0 62.1429 0H24.8571Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-current fill-[#111112] dark:fill-[#0EE2FF]"
|
||||
class="fill-[#111112] dark:fill-[#0EE2FF]"
|
||||
fill-rule="evenodd"
|
||||
d="M60.1875 9.125h-33.375c-9.2163 0-16.6875 7.4712-16.6875 16.6875V42.5c0 9.2162 7.4712 16.6875 16.6875 16.6875h33.375c9.2162 0 16.6875-7.4713 16.6875-16.6875V25.8125c0-9.2163-7.4713-16.6875-16.6875-16.6875Zm-33.375-5.5625c-12.2883 0-22.25 9.9617-22.25 22.25V42.5c0 12.2883 9.9617 22.25 22.25 22.25h33.375c12.2883 0 22.25-9.9617 22.25-22.25V25.8125c0-12.2883-9.9617-22.25-22.25-22.25h-33.375Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-current fill-[#000] dark:fill-sky-50"
|
||||
class="fill-[#000] dark:fill-sky-50"
|
||||
fill-rule="evenodd"
|
||||
d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="font-bold text-sky-900 dark:text-sky-50">Vue Select</span>
|
||||
<span
|
||||
class="font-bold font-display tracking-tight text-sky-900 dark:text-sky-50"
|
||||
>Vue Select</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
||||
@@ -112,6 +116,7 @@ const isScrolled = computed(() => y.value !== 0)
|
||||
<a
|
||||
class="group"
|
||||
aria-label="GitHub"
|
||||
target="_blank"
|
||||
href="https://github.com/sagalbot/vue-select"
|
||||
>
|
||||
<svg
|
||||
@@ -124,6 +129,16 @@ const isScrolled = computed(() => y.value !== 0)
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="group"
|
||||
aria-label="Springloaded"
|
||||
target="_blank"
|
||||
href="https://springloaded.co"
|
||||
>
|
||||
<SpringloadedLogo
|
||||
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -29,7 +29,7 @@ import {
|
||||
/>
|
||||
<div class="relative">
|
||||
<p
|
||||
class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
|
||||
class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
|
||||
>
|
||||
The complete Vue.js combobox solution.
|
||||
</p>
|
||||
|
||||
@@ -14,7 +14,7 @@ import PageTableOfContents from '~/components/PageTableOfContents.vue'
|
||||
:class="[
|
||||
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
|
||||
// headings
|
||||
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
|
||||
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
|
||||
// lead
|
||||
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
|
||||
// links
|
||||
|
||||
@@ -6,14 +6,11 @@ const { page } = useContent()
|
||||
|
||||
<template>
|
||||
<header class="mb-9 space-y-1">
|
||||
<p
|
||||
v-if="page?.section"
|
||||
class="font-display text-sm font-medium text-sky-500"
|
||||
>
|
||||
<p v-if="page?.section" class="font-display text-sm font-bold text-sky-500">
|
||||
{{ page?.section }}
|
||||
</p>
|
||||
<h1
|
||||
class="font-display text-3xl tracking-tight text-slate-900 dark:text-white"
|
||||
class="font-display font-bold text-3xl tracking-tight text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ page?.title }}
|
||||
</h1>
|
||||
|
||||
@@ -80,7 +80,7 @@ const router = { pathname: '' }
|
||||
></div>
|
||||
<nav class="w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
|
||||
<ul role="list" class="space-y-9">
|
||||
<li v-for="section in navigation" key="section.title">
|
||||
<li v-for="section in navigation" :key="section.title">
|
||||
<h2 class="font-display font-medium text-slate-900 dark:text-white">
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
@@ -90,7 +90,7 @@ const router = { pathname: '' }
|
||||
>
|
||||
<li
|
||||
v-for="link in section?.links"
|
||||
key="link.href"
|
||||
:key="link.href"
|
||||
class="relative"
|
||||
>
|
||||
<NuxtLink
|
||||
|
||||
@@ -8,7 +8,7 @@ const props = withDefaults(
|
||||
}>(),
|
||||
{
|
||||
type: 'note',
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const styles = computed(() => {
|
||||
@@ -33,7 +33,7 @@ const styles = computed(() => {
|
||||
<div :class="['my-8 flex rounded-3xl p-6', styles.container]">
|
||||
<!-- <IconComponent class="h-8 w-8 flex-none" />-->
|
||||
<div class="ml-4 flex-auto">
|
||||
<p :class="['m-0 font-display text-xl', styles.title]">
|
||||
<p :class="['m-0 font-display font-bold text-xl', styles.title]">
|
||||
{{ title }}
|
||||
</p>
|
||||
<div :class="['prose mt-2.5', styles.body]">
|
||||
|
||||
@@ -15,7 +15,9 @@ defineProps<{
|
||||
/>
|
||||
<div class="relative overflow-hidden rounded-xl p-6">
|
||||
<slot name="icon" />
|
||||
<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
|
||||
<h2
|
||||
class="mt-4 font-display font-bold text-base text-slate-900 dark:text-white"
|
||||
>
|
||||
<NuxtLink :to="href">
|
||||
<span class="absolute -inset-px rounded-xl" />
|
||||
{{ title }}
|
||||
|
||||
Reference in New Issue
Block a user