mirror of
https://github.com/coollabsio/coolify-docs.git
synced 2026-06-19 07:35:55 +00:00
feat: Experimental designs
This commit is contained in:
h+
@@ -376,6 +376,12 @@ export default defineConfig({
|
||||
new URL('./theme/components/VPFeatures.vue', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: /^.*\/VPFeature\.vue$/,
|
||||
replacement: fileURLToPath(
|
||||
new URL('./theme/components/VPFeature.vue', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: /^.*\/VPLocalNav\.vue$/,
|
||||
replacement: fileURLToPath(
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="max-w-6xl h-[500px] mx-auto">
|
||||
<!-- Add wrapper for glow effect -->
|
||||
<div class="relative group glow-wrapper">
|
||||
<!-- Glow effect overlay -->
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-brand-alt/50 to-purple-600/50 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-500"></div>
|
||||
|
||||
<div class="relative bg-[#1C1C1C] rounded-lg">
|
||||
<!-- Toolbars -->
|
||||
<div class="w-full">
|
||||
<div class="bg-[#1C1C1C] border border-[#2D2D2D] rounded-t-lg flex items-stretch relative z-10">
|
||||
<!-- Window controls -->
|
||||
<div class="px-4 pt-4 pb-3 mr-4 text-sm flex-0 text-[#4D4D4D] whitespace-no-wrap">
|
||||
<i class="mx-1 rounded-full w-3 h-3 bg-[#4D4D4D] inline-block"></i>
|
||||
<i class="mx-1 rounded-full w-3 h-3 bg-[#4D4D4D] inline-block"></i>
|
||||
<i class="mx-1 rounded-full w-3 h-3 bg-[#4D4D4D] inline-block"></i>
|
||||
</div>
|
||||
<!-- Active tab -->
|
||||
<div class="relative px-4 py-2 mt-2 -mb-px flex-0 border-t border-[#2D2D2D] bg-[#161616] rounded-t-lg">
|
||||
<!-- Left side of tab -->
|
||||
<div class="absolute bottom-0 w-4 h-8 border-b border-r border-[#2D2D2D] bg-[#1C1C1C] rounded-br-lg" style="right:100%;"></div>
|
||||
<!-- Tab text -->
|
||||
<div class="text-sm overflow-hidden pt-1 w-56 whitespace-no-wrap text-[#E5E5E5]">
|
||||
Documentation Browser Preview
|
||||
</div>
|
||||
<!-- Tab text fade -->
|
||||
<span class="absolute h-full rounded-tr-lg top-0 right-0 m-px w-1/2"
|
||||
style="background: linear-gradient(to right, rgba(22, 22, 22, 0.0) 0%, rgb(22, 22, 22) 80%);"></span>
|
||||
<!-- Tab close button -->
|
||||
<div class="text-[#4D4D4D] absolute top-0 right-0 pt-3 pr-2 text-xs hover:text-[#E5E5E5] transition-colors">
|
||||
<svg class="mx-px w-4 h-4 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Right side of tab -->
|
||||
<div class="absolute bottom-0 w-4 h-8 border-b border-l border-[#2D2D2D] bg-[#1C1C1C] rounded-bl-lg" style="left:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URL bar and controls -->
|
||||
<div class="bg-[#161616] border-l border-r border-b border-[#2D2D2D] flex flex-row py-2">
|
||||
<!-- Navigation controls -->
|
||||
<div class="px-4 py-2 flex-0 text-[#4D4D4D] whitespace-no-wrap">
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- URL input -->
|
||||
<div class="px-4 py-2 my-auto flex-1 border border-[#2D2D2D] bg-[#1C1C1C] rounded-md whitespace-no-wrap overflow-hidden text-[#E5E5E5]">
|
||||
https://docs.example.com/getting-started
|
||||
</div>
|
||||
<!-- Action buttons -->
|
||||
<div class="px-4 py-2 flex-0 text-[#4D4D4D] whitespace-no-wrap">
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<svg class="mx-px w-6 h-6 inline-block hover:text-[#E5E5E5] transition-colors" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Faux Sides -->
|
||||
<div class="absolute left-0 border-l border-r border-[#2D2D2D] h-16 w-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="w-full bg-[#161616] p-8 rounded-b-lg relative z-10">
|
||||
<!-- <div class="container text-center">
|
||||
<svg class="inline-block m-4" width="300px" viewBox="0 0 218 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M16.5760536,0.474354511 C16.5760536,0.474354511 25.4090458,11.3491047 21.6422669,22.163638 C19.338752,28.7734916 12.6340898,29.776027 7.97799644,29.6376923 C8.38527124,25.9331271 9.40986583,22.7792677 11.0508657,20.176385 C12.3684857,20.3998224 14.3457354,19.9312857 16.9826148,18.7707747 C14.4868724,19.3547151 12.6790865,19.4905083 11.5592573,19.1781542 L11.5592573,19.1781542 L11.7028099,19.2136718 C13.2608089,17.076071 15.2822942,15.3514936 17.7672658,14.0399398 C14.6535818,14.7584678 12.0929072,16.2289107 10.0864045,18.4537674 C9.30581083,17.927787 8.44168374,17.1512382 7.49402322,16.124121 C8.03119669,17.5633575 8.65794495,18.6224628 9.37397416,19.2997098 C7.39789448,21.8389372 6.03769452,25.215563 5.2933743,29.4295873 C5.22285537,29.4223962 5.15327768,29.4136267 5.08521332,29.4048249 C4.20764183,29.3150292 3.49492575,28.8333342 2.77883163,28.0154909 C-2.87631569,20.2248285 1.82807546,13.3221315 7.94518385,11.0202862 C19.2027606,6.78287572 16.5760536,0.474354511 16.5760536,0.474354511 Z"
|
||||
fill="#0ED3CF"/>
|
||||
</g>
|
||||
</svg>
|
||||
<p class="text-[#E5E5E5] mt-4">
|
||||
Welcome to Documentation Browser Preview
|
||||
</p>
|
||||
<p class="text-[#4D4D4D] italic m-3">
|
||||
Modern documentation made simple
|
||||
</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glow-wrapper {
|
||||
--glow-size: 200px;
|
||||
--glow-offset: -100px;
|
||||
}
|
||||
|
||||
.glow-wrapper::before,
|
||||
.glow-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glow-wrapper::before {
|
||||
z-index: -2;
|
||||
filter: blur(24px);
|
||||
}
|
||||
|
||||
.glow-wrapper::after {
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
var(--glow-size) var(--glow-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
|
||||
var(--brand-alt),
|
||||
transparent 50%
|
||||
);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.glow-wrapper:hover::after {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* Add mouse move effect */
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
const wrapper = document.querySelector('.glow-wrapper') as HTMLElement
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const rect = wrapper.getBoundingClientRect()
|
||||
const x = e.clientX - rect.left
|
||||
const y = e.clientY - rect.top
|
||||
|
||||
wrapper.style.setProperty('--x', x.toString())
|
||||
wrapper.style.setProperty('--y', y.toString())
|
||||
}
|
||||
|
||||
wrapper.addEventListener('mousemove', handleMouseMove)
|
||||
|
||||
onUnmounted(() => {
|
||||
wrapper.removeEventListener('mousemove', handleMouseMove)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||
|
||||
defineProps<{
|
||||
icon?: DefaultTheme.FeatureIcon
|
||||
title: string
|
||||
details?: string
|
||||
link?: string
|
||||
linkText?: string
|
||||
rel?: string
|
||||
target?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPLink
|
||||
class="VPFeature"
|
||||
:href="link"
|
||||
:rel="rel"
|
||||
:target="target"
|
||||
:no-icon="true"
|
||||
:tag="link ? 'a' : 'div'"
|
||||
>
|
||||
<article class="box">
|
||||
<div v-if="typeof icon === 'object' && icon.wrap" class="icon">
|
||||
<VPImage
|
||||
:image="icon"
|
||||
:alt="icon.alt"
|
||||
:height="icon.height || 48"
|
||||
:width="icon.width || 48"
|
||||
/>
|
||||
</div>
|
||||
<VPImage
|
||||
v-else-if="typeof icon === 'object'"
|
||||
:image="icon"
|
||||
:alt="icon.alt"
|
||||
:height="icon.height || 48"
|
||||
:width="icon.width || 48"
|
||||
/>
|
||||
<div v-else-if="icon" class="icon" v-html="icon"></div>
|
||||
<h2 class="title" v-html="title"></h2>
|
||||
<p v-if="details" class="details" v-html="details"></p>
|
||||
|
||||
<div v-if="linkText" class="link-text">
|
||||
<p class="link-text-value">
|
||||
{{ linkText }} <span class="vpi-arrow-right link-text-icon" />
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</VPLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPFeature {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
height: 100%;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: border-color 0.25s, background-color 0.25s;
|
||||
}
|
||||
|
||||
.VPFeature.link:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box > :deep(.VPImage) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--vp-c-default-soft);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex-grow: 1;
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.link-text-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.link-text-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { computed } from 'vue'
|
||||
import VPFeature from 'vitepress/dist/client/theme-default/components/VPFeature.vue'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
|
||||
export interface Feature {
|
||||
icon?: DefaultTheme.FeatureIcon
|
||||
export type FeatureIcon = {
|
||||
src?: string
|
||||
alt?: string
|
||||
width?: number
|
||||
height?: number
|
||||
wrap?: boolean
|
||||
}
|
||||
|
||||
export type Feature = {
|
||||
icon?: FeatureIcon | string
|
||||
title: string
|
||||
details: string
|
||||
link?: string
|
||||
@@ -19,40 +25,89 @@ const props = defineProps<{
|
||||
|
||||
const grid = computed(() => {
|
||||
const length = props.features.length
|
||||
if (!length) return
|
||||
if (length === 2) return 'grid-2'
|
||||
if (length === 3) return 'grid-3'
|
||||
if (length % 3 === 0) return 'grid-6'
|
||||
if (length > 3) return 'grid-4'
|
||||
})
|
||||
|
||||
if (!length) {
|
||||
return
|
||||
} else if (length === 2) {
|
||||
return 'grid-2'
|
||||
} else if (length === 3) {
|
||||
return 'grid-3'
|
||||
} else if (length % 3 === 0) {
|
||||
return 'grid-6'
|
||||
} else if (length > 3) {
|
||||
return 'grid-4'
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
const isVisible = ref(false)
|
||||
const getTransitionDelay = (index: number) => `${index * 0.1}s`
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
isVisible.value = true
|
||||
observer.disconnect() // Optional: stop observing once triggered
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
threshold: 0.1, // Trigger when 10% of the container is visible
|
||||
rootMargin: '50px' // Start animation slightly before the element comes into view
|
||||
}
|
||||
)
|
||||
|
||||
if (container.value) {
|
||||
observer.observe(container.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="features" class="VPFeatures">
|
||||
<div v-if="features" class="VPFeatures" ref="container">
|
||||
<div class="container">
|
||||
<div class="items">
|
||||
<div
|
||||
v-for="feature in features"
|
||||
:key="feature.title"
|
||||
class="item"
|
||||
:class="[grid]"
|
||||
>
|
||||
<VPFeature
|
||||
:icon="feature.icon"
|
||||
:title="feature.title"
|
||||
:details="feature.details"
|
||||
:link="feature.link"
|
||||
:link-text="feature.linkText"
|
||||
:rel="feature.rel"
|
||||
:target="feature.target"
|
||||
/>
|
||||
<div class="transition-wrapper">
|
||||
<div
|
||||
v-for="(feature, index) in features"
|
||||
:key="feature.title"
|
||||
class="item"
|
||||
:class="[grid, { 'is-visible': isVisible }]"
|
||||
:style="{ '--delay': getTransitionDelay(index) }"
|
||||
>
|
||||
<component
|
||||
:is="feature.link ? 'a' : 'div'"
|
||||
class="feature-box"
|
||||
:href="feature.link"
|
||||
:rel="feature.rel"
|
||||
:target="feature.target"
|
||||
>
|
||||
<article class="box">
|
||||
<div class="flex flex-col">
|
||||
<div v-if="typeof feature.icon === 'object' && feature.icon.wrap" class="icon mb-4">
|
||||
<img
|
||||
:src="feature.icon.src"
|
||||
:alt="feature.icon.alt"
|
||||
:height="feature.icon.height || 48"
|
||||
:width="feature.icon.width || 48"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
v-else-if="typeof feature.icon === 'object'"
|
||||
:src="feature.icon.src"
|
||||
:alt="feature.icon.alt"
|
||||
:height="feature.icon.height || 48"
|
||||
:width="feature.icon.width || 48"
|
||||
class="icon-img mb-4"
|
||||
/>
|
||||
<div v-else-if="feature.icon" class="icon mb-4" v-html="feature.icon" />
|
||||
<h2 class="title" v-html="feature.title" />
|
||||
</div>
|
||||
<p v-if="feature.details" class="details" v-html="feature.details" />
|
||||
<div v-if="feature.linkText" class="link-text">
|
||||
<p class="link-text-value">
|
||||
{{ feature.linkText }}
|
||||
<span class="i-heroicons-arrow-right link-text-icon" />
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,6 +146,16 @@ const grid = computed(() => {
|
||||
.item {
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-delay: var(--delay, 0s);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.item.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.item :deep(.VPFeature) {
|
||||
@@ -127,4 +192,69 @@ const grid = computed(() => {
|
||||
width: calc(100% / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
height: 100%;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: border-color 0.25s, background-color 0.25s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.feature-box:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.icon-img {
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex-grow: 1;
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.link-text {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.link-text-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.link-text-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.transition-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -8px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -15,6 +15,7 @@ import Callout from './components/Callout.vue'
|
||||
import TabBlock from './components/TabBlock.vue'
|
||||
import ZoomableImage from './components/ZoomableImage.vue'
|
||||
import Globe from './components/Landing/Globe.vue'
|
||||
import Browser from './components/Landing/Browser.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
@@ -31,5 +32,6 @@ export default {
|
||||
app.component('TabBlock', TabBlock)
|
||||
app.component('ZoomableImage', ZoomableImage)
|
||||
app.component('Globe', Globe)
|
||||
app.component('Browser', Browser)
|
||||
}
|
||||
} satisfies Theme
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<template #home-features-before>
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user