fix(vitepress): implement vitepress dark farris theme
This commit is contained in:
Sagi
parent
3293d1496a
commit
6f7976a3cc
|
|
@ -1,85 +1,85 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute, useData } from "vitepress";
|
||||
import { useCopyCode } from "../composables/copy-code.js";
|
||||
import { useSidebar } from "../composables/sidebar.js";
|
||||
import Theme from "@theme/index";
|
||||
import VPPage from "./VPPage.vue";
|
||||
import VPHome from "./VPHome.vue";
|
||||
import VPDoc from "./VPDoc.vue";
|
||||
import { useRoute, useData } from 'vitepress';
|
||||
import { useCopyCode } from '../composables/copy-code.js';
|
||||
import { useSidebar } from '../composables/sidebar.js';
|
||||
import Theme from '@theme/index';
|
||||
import VPPage from './VPPage.vue';
|
||||
import VPHome from './VPHome.vue';
|
||||
import VPDoc from './VPDoc.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { frontmatter } = useData();
|
||||
const { hasSidebar } = useSidebar();
|
||||
|
||||
const NotFound = Theme.NotFound || (() => "404 Not Found");
|
||||
const NotFound = Theme.NotFound || (() => '404 Not Found');
|
||||
|
||||
useCopyCode();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="VPContent"
|
||||
id="VPContent"
|
||||
:class="{
|
||||
'has-sidebar': hasSidebar,
|
||||
'is-home': frontmatter.layout === 'home',
|
||||
}"
|
||||
>
|
||||
<NotFound v-if="route.component === NotFound" />
|
||||
<div
|
||||
class="VPContent"
|
||||
id="VPContent"
|
||||
:class="{
|
||||
'has-sidebar': hasSidebar,
|
||||
'is-home': frontmatter.layout === 'home'
|
||||
}"
|
||||
>
|
||||
<NotFound v-if="route.component === NotFound" />
|
||||
|
||||
<VPPage v-else-if="frontmatter.layout === 'page'" />
|
||||
<VPPage v-else-if="frontmatter.layout === 'page'" />
|
||||
|
||||
<VPHome v-else-if="frontmatter.layout === 'home'">
|
||||
<template #home-hero-before><slot name="home-hero-before" /></template>
|
||||
<template #home-hero-after><slot name="home-hero-after" /></template>
|
||||
<template #home-features-before><slot name="home-features-before" /></template>
|
||||
<template #home-features-after><slot name="home-features-after" /></template>
|
||||
</VPHome>
|
||||
<VPHome v-else-if="frontmatter.layout === 'home'">
|
||||
<template #home-hero-before><slot name="home-hero-before" /></template>
|
||||
<template #home-hero-after><slot name="home-hero-after" /></template>
|
||||
<template #home-features-before><slot name="home-features-before" /></template>
|
||||
<template #home-features-after><slot name="home-features-after" /></template>
|
||||
</VPHome>
|
||||
|
||||
<VPDoc v-else>
|
||||
<template #doc-footer-before><slot name="doc-footer-before" /></template>
|
||||
<template #doc-before><slot name="doc-before" /></template>
|
||||
<template #doc-after><slot name="doc-after" /></template>
|
||||
<VPDoc v-else>
|
||||
<template #doc-footer-before><slot name="doc-footer-before" /></template>
|
||||
<template #doc-before><slot name="doc-before" /></template>
|
||||
<template #doc-after><slot name="doc-after" /></template>
|
||||
|
||||
<template #aside-top><slot name="aside-top" /></template>
|
||||
<template #aside-outline-before><slot name="aside-outline-before" /></template>
|
||||
<template #aside-outline-after><slot name="aside-outline-after" /></template>
|
||||
<template #aside-ads-before><slot name="aside-ads-before" /></template>
|
||||
<template #aside-ads-after><slot name="aside-ads-after" /></template>
|
||||
<template #aside-bottom><slot name="aside-bottom" /></template>
|
||||
</VPDoc>
|
||||
</div>
|
||||
<template #aside-top><slot name="aside-top" /></template>
|
||||
<template #aside-outline-before><slot name="aside-outline-before" /></template>
|
||||
<template #aside-outline-after><slot name="aside-outline-after" /></template>
|
||||
<template #aside-ads-before><slot name="aside-ads-before" /></template>
|
||||
<template #aside-ads-after><slot name="aside-ads-after" /></template>
|
||||
<template #aside-bottom><slot name="aside-bottom" /></template>
|
||||
</VPDoc>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPContent {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.VPContent.is-home {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.VPContent {
|
||||
padding-top: var(--vp-nav-height);
|
||||
}
|
||||
.VPContent {
|
||||
padding-top: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
.VPContent.has-sidebar {
|
||||
margin: 0;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.VPContent.has-sidebar {
|
||||
margin: 0;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
/* background-color: rgba(255, 255, 255, 0.7); */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.VPContent.has-sidebar {
|
||||
/* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
|
||||
.VPContent.has-sidebar {
|
||||
/* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
|
||||
padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)); */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,293 +1,293 @@
|
|||
<script setup lang="ts">
|
||||
import { useData } from "vitepress";
|
||||
import VPFeatures from "./VPFeatures.vue";
|
||||
import { useData } from 'vitepress';
|
||||
import VPFeatures from './VPFeatures.vue';
|
||||
|
||||
const { frontmatter: fm } = useData();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="f-feature">
|
||||
<div class="f-feature-subtitle">快速上手</div>
|
||||
<div class="f-feature-title">灵活丰富的生态平台</div>
|
||||
<div class="f-feature-container">
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/efficiency.png" />
|
||||
<div class="f-feature">
|
||||
<div class="f-feature-subtitle">快速上手</div>
|
||||
<div class="f-feature-title">灵活丰富的生态平台</div>
|
||||
<div class="f-feature-container">
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/efficiency.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
|
||||
<div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/clarity.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>c</span>larity 清晰</div>
|
||||
<div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/consistency.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
|
||||
<div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/beauty.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>b</span>eauty 美观</div>
|
||||
<div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
|
||||
<div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/clarity.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>c</span>larity 清晰</div>
|
||||
<div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/consistency.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
|
||||
<div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-feature-item">
|
||||
<div class="f-feature-item-icon">
|
||||
<img src="/assets/beauty.png" />
|
||||
</div>
|
||||
<div class="f-feature-item-content">
|
||||
<div class="f-feature-item-title"><span>b</span>eauty 美观</div>
|
||||
<div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news">
|
||||
<div class="f-news-container">
|
||||
<div class="f-news-container-row">
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-01">
|
||||
<img src="/assets/Pro.svg" />
|
||||
<div class="f-news">
|
||||
<div class="f-news-container">
|
||||
<div class="f-news-container-row">
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-01">
|
||||
<img src="/assets/Pro.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/components/">Farris UI 通用组件</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-02">
|
||||
<img src="/assets/Mobile.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/mobiles/">Farris UI Mobile 组件</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">移动端应用组件库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-03">
|
||||
<img src="/assets/Pro.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/advance-components/">Farris UI 业务组件库</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">为筛选数据、选取数据、社交等场景设计的业务组件库</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/components/">Farris UI 通用组件</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-02">
|
||||
<img src="/assets/Mobile.svg" />
|
||||
<div class="f-news-container-row">
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-04">
|
||||
<img src="/assets/Dashboard.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/patterns/">Farris UI 页面模式</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-05">
|
||||
<img src="/assets/Portal.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/mobile-patterns/">Farris UI Mobile 页面模式</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">使用 Farris UI Mobile 搭建的页面模板库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-06">
|
||||
<img src="/assets/Pix.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/resources/">Farris UI Resources</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">设计资源和图标库</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/mobiles/">Farris UI Mobile 组件</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">移动端应用组件库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-03">
|
||||
<img src="/assets/Pro.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/advance-components/">Farris UI 业务组件库</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">
|
||||
为筛选数据、选取数据、社交等场景设计的业务组件库
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-container-row">
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-04">
|
||||
<img src="/assets/Dashboard.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/patterns/">Farris UI 页面模式</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-05">
|
||||
<img src="/assets/Portal.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/mobile-patterns/">Farris UI Mobile 页面模式</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">使用 Farris UI Mobile 搭建的页面模板库</div>
|
||||
</div>
|
||||
<div class="f-news-card">
|
||||
<div class="f-news-card-hero">
|
||||
<div id="f-card-06">
|
||||
<img src="/assets/Pix.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-news-card-title">
|
||||
<a href="/resources/">Farris UI Resources</a>
|
||||
</div>
|
||||
<div class="f-news-card-content">设计资源和图标库</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
|
||||
<VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.f-feature {
|
||||
padding-top: 80px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.f-feature-title {
|
||||
font-size: 32px;
|
||||
color: #1d2129;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
font-size: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.f-feature-subtitle {
|
||||
font-size: 16px;
|
||||
color: #86909c;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin-bottom: 6px;
|
||||
font-size: 16px;
|
||||
color: var(--vp-c-text-2);
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.f-feature-container {
|
||||
display: flex;
|
||||
margin: 10px auto;
|
||||
width: 1220px;
|
||||
box-shadow: 0 4px 20px rgb(230 230 230 / 50%);
|
||||
padding: 48px 32px;
|
||||
display: flex;
|
||||
margin: 10px auto;
|
||||
width: 1220px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
.f-feature-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.f-feature-item-icon img {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.f-feature-item-content {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.f-feature-item-title {
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.f-feature-item-title span {
|
||||
color: #3661ff;
|
||||
color: #3661ff;
|
||||
}
|
||||
|
||||
.f-feature-item-subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(94, 109, 130, 0.8);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.f-news {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 120px;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.f-news-container {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 1220px;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 1220px;
|
||||
}
|
||||
|
||||
.f-news-container-row {
|
||||
display: flex;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.f-news-container-row > .f-news-card {
|
||||
margin-right: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.f-news-container-row > .f-news-card:last-child {
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.f-news-card {
|
||||
flex: 1;
|
||||
/* margin-right: 40px; */
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
/* margin-right: 40px; */
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.f-news-card-hero > div {
|
||||
height: 190px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
height: 190px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.f-news-card-hero img {
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.f-news-card-title {
|
||||
font-size: 20px;
|
||||
color: #1f2f3d;
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: 400;
|
||||
margin: 12px 16px 6px;
|
||||
font-size: 20px;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: -0.5px;
|
||||
font-weight: 400;
|
||||
margin: 12px 16px 6px;
|
||||
}
|
||||
|
||||
.f-news-card-title a {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.f-news-card-title a:hover {
|
||||
color: #529dff;
|
||||
color: #529dff;
|
||||
}
|
||||
|
||||
.f-news-card-content {
|
||||
font-size: 14px;
|
||||
color: rgba(94, 109, 130, 0.8);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
margin: 0 16px 12px;
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
margin: 0 16px 12px;
|
||||
}
|
||||
|
||||
.f-news-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 20px 0px rgba(230, 230, 230, 0.6);
|
||||
border-radius: 16px;
|
||||
flex: 1;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#f-card-01 {
|
||||
background-image: url(/assets/General_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/General_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#f-card-02 {
|
||||
background-image: url(/assets/Mobile_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/Mobile_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#f-card-03 {
|
||||
background-image: url(/assets/Pro_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/Pro_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#f-card-04 {
|
||||
background-image: url(/assets/Dashboard_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/Dashboard_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#f-card-05 {
|
||||
background-image: url(/assets/Portal_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/Portal_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#f-card-06 {
|
||||
background-image: url(/assets/Pix_bg.png);
|
||||
background-size: cover;
|
||||
background-image: url(/assets/Pix_bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ provide("close-screen", closeScreen);
|
|||
}
|
||||
|
||||
.dark .VPNav.no-sidebar {
|
||||
background: rgba(36, 36, 36, 0.7);
|
||||
background: rgba(36, 36, 36, 0);
|
||||
}
|
||||
|
||||
@supports not (backdrop-filter: saturate(50%) blur(8px)) {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const { hasSidebar } = useSidebar();
|
|||
/* background-color: var(--vp-c-bg-alt); */
|
||||
padding-left: 32px;
|
||||
margin-right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
background-color: var(--vp-c-bg);
|
||||
width: var(--vp-sidebar-width);
|
||||
backdrop-filter: saturate(50%) blur(8px);
|
||||
padding-right: 32px;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
import './styles/fonts.css'
|
||||
import './styles/vars.css'
|
||||
import './styles/base.css'
|
||||
import './styles/utils.css'
|
||||
import './styles/components/custom-block.css'
|
||||
import './styles/components/vp-code.css'
|
||||
import './styles/components/vp-doc.css'
|
||||
import './styles/components/vp-sponsor.css'
|
||||
import './styles/fonts.css';
|
||||
import './styles/vars.css';
|
||||
import './styles/base.css';
|
||||
import './styles/utils.css';
|
||||
import './styles/components/custom-block.css';
|
||||
import './styles/components/vp-code.css';
|
||||
import './styles/components/vp-doc.css';
|
||||
import './styles/components/vp-sponsor.css';
|
||||
import './styles/lib-override/demoblock.css';
|
||||
|
||||
import { Theme } from 'vitepress'
|
||||
import Layout from './Layout.vue'
|
||||
import NotFound from './NotFound.vue'
|
||||
import { Theme } from 'vitepress';
|
||||
import Layout from './Layout.vue';
|
||||
import NotFound from './NotFound.vue';
|
||||
|
||||
export { default as VPHomeHero } from './components/VPHomeHero.vue'
|
||||
export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
|
||||
export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
|
||||
export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
|
||||
export { default as VPTeamPage } from './components/VPTeamPage.vue'
|
||||
export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
|
||||
export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
|
||||
export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
|
||||
export { default as VPHomeHero } from './components/VPHomeHero.vue';
|
||||
export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
|
||||
export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
|
||||
export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';
|
||||
export { default as VPTeamPage } from './components/VPTeamPage.vue';
|
||||
export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';
|
||||
export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';
|
||||
export { default as VPTeamMembers } from './components/VPTeamMembers.vue';
|
||||
|
||||
const theme: Theme = {
|
||||
Layout,
|
||||
NotFound
|
||||
}
|
||||
Layout,
|
||||
NotFound
|
||||
};
|
||||
|
||||
export default theme
|
||||
export default theme;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ body {
|
|||
font-family: var(--vp-font-family-base);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-1);
|
||||
color: var(--vp-c-text-1) !important;
|
||||
background-color: var(--vp-c-bg) !important;
|
||||
direction: ltr;
|
||||
font-synthesis: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.demo-block > .source {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
#nprogress .bar {
|
||||
background: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
border-top-color: var(--vp-c-brand);
|
||||
border-left-color: var(--vp-c-brand);
|
||||
border-top-color: var(--vp-c-brand);
|
||||
border-left-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
#nprogress .peg {
|
||||
box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
|
||||
box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue