2
0
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:
Jeff Sagal
2024-03-24 12:24:47 -07:00
parent 0ad175d762
commit 3c1d0d0dcd
39 changed files with 91 additions and 129 deletions
+19 -4
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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
+2 -5
View File
@@ -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>
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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]">
+3 -1
View File
@@ -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 }}