mirror of https://github.com/YunYouJun/valaxy
feat: add new logo & press screen nav bar
This commit is contained in:
parent
ca6d6d14ee
commit
3a6b264e5f
|
|
@ -1,5 +1,33 @@
|
|||
<svg width="100" height="70" viewBox="0 0 100 70" fill="#0078e7" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M44 35L27.5 44.5263V25.4737L44 35Z" />
|
||||
<path d="M74 35C74 39.9706 69.9706 44 65 44C60.0294 44 56 39.9706 56 35C56 30.0294 60.0294 26 65 26C69.9706 26 74 30.0294 74 35Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M85 0H15V15H0V55H15V70H85V55H100V15H85V0ZM85 15H15V55H85V15Z" />
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="222" width="830" height="647">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint0_linear_757_102259)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint1_linear_757_102259)"/>
|
||||
<mask id="mask1_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="121" width="830" height="748">
|
||||
<g style="mix-blend-mode:darken">
|
||||
<ellipse cx="512" cy="766" rx="102.062" ry="102.062" transform="rotate(-15 512 766)" fill="#9038FF"/>
|
||||
</g>
|
||||
<rect x="-0.183013" y="-0.683013" width="579" height="159" transform="matrix(0.5 -0.866025 -0.866025 -0.5 635.881 702.112)" fill="#D9D9D9" stroke="black" stroke-linejoin="round"/>
|
||||
<rect x="387.183" y="702.612" width="579" height="159" transform="rotate(-120 387.183 702.612)" fill="#D9D9D9" stroke="black" stroke-linejoin="round"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_757_102259)">
|
||||
<rect x="-15" y="222" width="1071" height="979" fill="#D9D9D9"/>
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask0_757_102259)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1024 0H0V1024H1024V0ZM666 766C666 851.052 597.052 920 512 920C426.948 920 358 851.052 358 766C358 680.949 426.948 612 512 612C597.052 612 666 680.949 666 766ZM610.584 739.585C625.173 794.031 592.862 849.996 538.416 864.585C483.969 879.174 428.005 846.863 413.416 792.416C398.827 737.969 431.138 682.005 485.584 667.416C540.031 652.827 595.995 685.138 610.584 739.585Z" fill="url(#paint2_diamond_757_102259)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_757_102259" x1="472.734" y1="695.005" x2="499.213" y2="841.207" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9444FB"/>
|
||||
<stop offset="1" stop-color="#4D08A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_757_102259" x1="543.866" y1="836.077" x2="534.684" y2="776.831" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-opacity="0.19"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint2_diamond_757_102259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(510 767) rotate(-90) scale(1452.5)">
|
||||
<stop stop-color="#8300EF"/>
|
||||
<stop offset="1" stop-color="#3B82F6"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 4.3 KiB |
|
|
@ -15,6 +15,7 @@ export default defineValaxyConfig<PressTheme.Config>({
|
|||
|
||||
theme: 'press',
|
||||
themeConfig: {
|
||||
logo: '/favicon.svg',
|
||||
sidebar: ['Getting Started', 'Guide', 'Migration', 'built-ins', 'Third', 'Custom', 'Theme', 'Addon', 'Dev'],
|
||||
nav: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,21 +1,33 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="yun-logo" width="400" height="400" viewBox="40 40 320 320" stroke-width="16">
|
||||
<style>
|
||||
#yun-logo {
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#yun-logo {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
<line id="eye" x1="0" y1="-35" x2="0" y2="35" stroke-linecap="round">
|
||||
<animateTransform attributeName="transform" additive="sum" attributeType="XML" type="scale" from="1 1" to="1 0" dur="0.15s" repeatCount="2"/>
|
||||
</line>
|
||||
</defs>
|
||||
<polygon stroke-linejoin="round" fill="none" points="50,250 50,150 100,150 100,100 300,100 300,150 350,150 350,250 300,250 300,300 100,300 100,250 50,250"/>
|
||||
<use xlink:href="#eye" transform="translate(150,200)"/>
|
||||
<use xlink:href="#eye" transform="translate(250,200)"/>
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="222" width="830" height="647">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint0_linear_757_102259)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint1_linear_757_102259)"/>
|
||||
<mask id="mask1_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="121" width="830" height="748">
|
||||
<g style="mix-blend-mode:darken">
|
||||
<ellipse cx="512" cy="766" rx="102.062" ry="102.062" transform="rotate(-15 512 766)" fill="#9038FF"/>
|
||||
</g>
|
||||
<rect x="-0.183013" y="-0.683013" width="579" height="159" transform="matrix(0.5 -0.866025 -0.866025 -0.5 635.881 702.112)" fill="#D9D9D9" stroke="black" stroke-linejoin="round"/>
|
||||
<rect x="387.183" y="702.612" width="579" height="159" transform="rotate(-120 387.183 702.612)" fill="#D9D9D9" stroke="black" stroke-linejoin="round"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_757_102259)">
|
||||
<rect x="-15" y="222" width="1071" height="979" fill="#D9D9D9"/>
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask0_757_102259)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1024 0H0V1024H1024V0ZM666 766C666 851.052 597.052 920 512 920C426.948 920 358 851.052 358 766C358 680.949 426.948 612 512 612C597.052 612 666 680.949 666 766ZM610.584 739.585C625.173 794.031 592.862 849.996 538.416 864.585C483.969 879.174 428.005 846.863 413.416 792.416C398.827 737.969 431.138 682.005 485.584 667.416C540.031 652.827 595.995 685.138 610.584 739.585Z" fill="url(#paint2_diamond_757_102259)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_757_102259" x1="472.734" y1="695.005" x2="499.213" y2="841.207" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9444FB"/>
|
||||
<stop offset="1" stop-color="#4D08A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_757_102259" x1="543.866" y1="836.077" x2="534.684" y2="776.831" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-opacity="0.19"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint2_diamond_757_102259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(510 767) rotate(-90) scale(1452.5)">
|
||||
<stop stop-color="#8300EF"/>
|
||||
<stop offset="1" stop-color="#3B82F6"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 946 B After Width: | Height: | Size: 4.3 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="press-home" p="x-6">
|
||||
<div class="press-home" style="--va-code-mobile-margin-x: 0">
|
||||
<slot name="home-hero-before" />
|
||||
<PressHomeHero />
|
||||
<slot name="home-hero-after" />
|
||||
|
|
|
|||
|
|
@ -6,19 +6,18 @@ const fm = useFrontmatter()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<h1 m="md:t-24 t-10 md:t-20" text="center">
|
||||
<span text="5rem" font="black" class="gradient-text from-purple-800 to-blue-500" bg="gradient-to-r">
|
||||
<div text="center" m="md:t-24 t-10 md:t-20" flex="~ col" justify="center" items="center">
|
||||
<ValaxyLogo mb="2" />
|
||||
<h1 my="10" text="4xl md:8xl" font="black" class="gradient-text from-purple-800 to-blue-500" bg="gradient-to-r">
|
||||
{{ fm.hero.name }}
|
||||
</span>
|
||||
<br>
|
||||
<small opacity="75">LOGO NOT READY</small>
|
||||
</h1>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h1 m="y-10" text="center 6xl" font="black" leading="tight">
|
||||
<h2 m="b-10" text="center 6xl" font="black" leading="tight">
|
||||
Next Generation
|
||||
<br>
|
||||
Static <span class="gradient-text from-blue-500 to-purple-700" bg="gradient-to-r">Blog</span> Framework
|
||||
</h1>
|
||||
</h2>
|
||||
|
||||
<div p="2" text="center">
|
||||
<PressButton
|
||||
|
|
|
|||
|
|
@ -1,6 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, provide } from 'vue'
|
||||
import { useWindowScroll } from '@vueuse/core'
|
||||
import { useSidebar } from 'valaxy/client'
|
||||
import { useNav } from '../composables/nav'
|
||||
|
||||
const { y } = useWindowScroll()
|
||||
|
||||
const { isScreenOpen, closeScreen, toggleScreen } = useNav()
|
||||
const { hasSidebar } = useSidebar()
|
||||
|
||||
provide('close-screen', closeScreen)
|
||||
|
||||
const classes = computed(() => ({
|
||||
'no-sidebar': !hasSidebar.value,
|
||||
'fill-bg': y.value > 0,
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav w="full" class="press-nav relative md:fixed md:z-99 font-bold">
|
||||
<PressNavBar />
|
||||
<nav w="full" class="press-nav relative md:fixed md:z-99 font-bold" :class="classes">
|
||||
<PressNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
|
||||
|
||||
<PressNavScreen :open="isScreenOpen" />
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,6 +32,10 @@
|
|||
z-index: var(--pr-z-index-nav);
|
||||
}
|
||||
|
||||
.pr-Nav.fill-bg {
|
||||
background-color: var(--pr-nav-bg-color);
|
||||
}
|
||||
|
||||
@include media('md') {
|
||||
.press-nav {
|
||||
-webkit-backdrop-filter: saturate(50%) blur(8px);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
import { useConfig, useSidebar } from 'valaxy'
|
||||
import { useThemeConfig } from '../../composables'
|
||||
import PressSwitchAppearance from './PressSwitchAppearance.vue'
|
||||
import PressNavItemLink from './PressNavItemLink.vue'
|
||||
import PressNavItemGroup from './PressNavItemGroup.vue'
|
||||
|
||||
defineProps<{
|
||||
isScreenOpen?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'toggle-screen'): void
|
||||
(e: 'toggleScreen'): void
|
||||
}>()
|
||||
|
||||
const { hasSidebar } = useSidebar()
|
||||
|
|
@ -20,17 +17,17 @@ const themeConfig = useThemeConfig()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="press-navbar flex justify-between items-center px-6 py-4" :class="{ 'has-sidebar': hasSidebar }">
|
||||
<router-link class="text-xl" to="/" :aria-label="config.title">
|
||||
<span class="md:inline">{{ config.title }}</span>
|
||||
<div class="pr-navbar flex justify-between items-center pl-4 pr-2" :class="{ 'has-sidebar': hasSidebar }">
|
||||
<router-link class="text-xl flex justify-center items-center" to="/" :aria-label="config.title">
|
||||
<img v-if="themeConfig.logo" class="logo" :src="themeConfig.logo" alt="LOGO">
|
||||
<span class="inline-flex">{{ config.title }}</span>
|
||||
</router-link>
|
||||
<div class="self-stretch flex justify-center items-center text-sm leading-5">
|
||||
<template v-for="item in themeConfig.nav" :key="item.text">
|
||||
<PressNavItemLink v-if="'link' in item" class="px-2" :item="item" />
|
||||
<PressNavItemGroup v-else class="px-2" :item="item" />
|
||||
</template>
|
||||
<PressToggleLocale p="x-2" />
|
||||
<PressSwitchAppearance m="l-2" />
|
||||
<PressNavBarMenu p="x-2" />
|
||||
<PressNavBarTranslations p="x-2" />
|
||||
<PressNavBarAppearance p="x-2" />
|
||||
|
||||
<PressNavBarHamburger :active="isScreenOpen" @click="$emit('toggleScreen')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -42,11 +39,17 @@ const themeConfig = useThemeConfig()
|
|||
--pr-navbar-c-bg: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--pr-navbar-c-bg: rgba(24, 24, 24, 0.8);
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.press-navbar {
|
||||
.dark {
|
||||
--pr-navbar-c-bg: rgba(24, 24, 24, 0.3);
|
||||
}
|
||||
|
||||
.pr-navbar {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--pr-c-divider-light);
|
||||
padding: 0 8px 0 24px;
|
||||
|
|
@ -56,13 +59,13 @@ const themeConfig = useThemeConfig()
|
|||
}
|
||||
|
||||
@include media('md') {
|
||||
.press-navbar {
|
||||
.pr-navbar {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media('md') {
|
||||
.press-navbar.has-sidebar .content {
|
||||
.pr-navbar.has-sidebar .content {
|
||||
margin-right: -32px;
|
||||
padding-right: 32px;
|
||||
-webkit-backdrop-filter: saturate(50%) blur(8px);
|
||||
|
|
@ -70,11 +73,11 @@ const themeConfig = useThemeConfig()
|
|||
}
|
||||
|
||||
@supports not (backdrop-filter: saturate(50%) blur(8px)) {
|
||||
.press-navbar.has-sidebar .content {
|
||||
.pr-navbar.has-sidebar .content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.dark .press-navbar.has-sidebar .content {
|
||||
.dark .pr-navbar.has-sidebar .content {
|
||||
background: rgba(36, 36, 36, 0.95);
|
||||
}
|
||||
}
|
||||
|
|
@ -86,26 +89,4 @@ const themeConfig = useThemeConfig()
|
|||
margin: 0 auto;
|
||||
max-width: calc(var(--pr-layout-max-width) - 64px);
|
||||
}
|
||||
|
||||
.menu + .translations::before,
|
||||
.menu + .appearance::before,
|
||||
.menu + .social-links::before,
|
||||
.translations + .appearance::before,
|
||||
.appearance + .social-links::before {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background-color: var(--pr-c-divider-light);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.menu + .appearance::before,
|
||||
.translations + .appearance::before {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.appearance + .social-links::before {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="inline-flex items-center lt-lg:hidden">
|
||||
<PressSwitchAppearance />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
active: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'click'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="pr-NavBarHamburger"
|
||||
:class="{ active }"
|
||||
aria-label="mobile navigation"
|
||||
:aria-expanded="active"
|
||||
aria-controls="pr-NavScreen"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<span class="container">
|
||||
<span class="top" />
|
||||
<span class="middle" />
|
||||
<span class="bottom" />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pr-NavBarHamburger {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 48px;
|
||||
height: var(--pr-nav-height);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pr-NavBarHamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pr-NavBarHamburger:hover .top { top: 0; left: 0; transform: translateX(4px); }
|
||||
.pr-NavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
|
||||
.pr-NavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
|
||||
|
||||
.pr-NavBarHamburger.active .top { top: 6px; transform: translateX(0) rotate(225deg); }
|
||||
.pr-NavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
|
||||
.pr-NavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
|
||||
|
||||
.pr-NavBarHamburger.active:hover .top,
|
||||
.pr-NavBarHamburger.active:hover .middle,
|
||||
.pr-NavBarHamburger.active:hover .bottom {
|
||||
background-color: var(--pr-c-text-2);
|
||||
transition: top .25s, background-color .25s, transform .25s;
|
||||
}
|
||||
|
||||
.top,
|
||||
.middle,
|
||||
.bottom {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--pr-c-text-1);
|
||||
transition: top .25s, background-color .5s, transform .25s;
|
||||
}
|
||||
|
||||
.top { top: 0; left: 0; transform: translateX(0); }
|
||||
.middle { top: 6px; left: 0; transform: translateX(8px); }
|
||||
.bottom { top: 12px; left: 0; transform: translateX(4px); }
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts" setup>
|
||||
import { useThemeConfig } from '../../composables'
|
||||
|
||||
const themeConfig = useThemeConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex lt-md:hidden">
|
||||
<template v-for="item in themeConfig.nav" :key="item.text">
|
||||
<PressNavItemLink v-if="'link' in item" class="px-2" :item="item" />
|
||||
<PressNavItemGroup v-else class="px-2" :item="item" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="flex items-center lt-lg:hidden">
|
||||
<PressToggleLocale />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
|
||||
// import VPNavScreenMenu from './VPNavScreenMenu.vue'
|
||||
// import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
|
||||
// import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
|
||||
// import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
|
||||
|
||||
defineProps<{
|
||||
open: boolean
|
||||
}>()
|
||||
|
||||
const screen = ref<HTMLElement | null>(null)
|
||||
|
||||
function lockBodyScroll() {
|
||||
disableBodyScroll(screen.value!, { reserveScrollBarGap: true })
|
||||
}
|
||||
|
||||
function unlockBodyScroll() {
|
||||
clearAllBodyScrollLocks()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition
|
||||
name="fade"
|
||||
@enter="lockBodyScroll"
|
||||
@after-leave="unlockBodyScroll"
|
||||
>
|
||||
<div v-if="open" ref="screen" class="pr-NavScreen">
|
||||
<div class="container" flex="~ col">
|
||||
<slot name="nav-screen-content-before" />
|
||||
<!-- <VPNavScreenMenu class="menu" /> -->
|
||||
<PressNavScreenTranslations class="translations" />
|
||||
<PressNavScreenAppearance class="appearance" />
|
||||
<!-- <VPNavScreenSocialLinks class="social-links" /> -->
|
||||
<slot name="nav-screen-content-after" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pr-NavScreen {
|
||||
position: fixed;
|
||||
top: calc(var(--pr-nav-height) + var(--pr-layout-top-height, 0px) + 1px);
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
background-color: var(--pr-nav-screen-bg-color);
|
||||
overflow-y: auto;
|
||||
transition: background-color 0.5s;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.pr-NavScreen.fade-enter-active,
|
||||
.pr-NavScreen.fade-leave-active {
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.pr-NavScreen.fade-enter-active .container,
|
||||
.pr-NavScreen.fade-leave-active .container {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.pr-NavScreen.fade-enter-from,
|
||||
.pr-NavScreen.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pr-NavScreen.fade-enter-from .container,
|
||||
.pr-NavScreen.fade-leave-to .container {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pr-NavScreen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 96px;
|
||||
max-width: 288px;
|
||||
}
|
||||
|
||||
.menu + .translations,
|
||||
.menu + .appearance,
|
||||
.translations + .appearance {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.menu + .social-links {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.appearance + .social-links {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts" setup>
|
||||
import { useThemeConfig } from '../../composables/config'
|
||||
const themeConfig = useThemeConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pr-nav-screen-appearance" flex="~ 1">
|
||||
<p class="text">
|
||||
{{ themeConfig.darkModeSwitchLabel || 'Appearance' }}
|
||||
</p>
|
||||
<PressSwitchAppearance />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pr-nav-screen-appearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px 12px 16px;
|
||||
background-color: var(--va-c-bg-soft);
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--va-c-text-2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import { useThemeConfig } from '../../composables'
|
||||
|
||||
const themeConfig = useThemeConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="themeConfig.nav" class="pr-nav-screen-menu">
|
||||
<template v-for="item in themeConfig.nav" :key="item.text">
|
||||
<PressNavScreenMenuLink
|
||||
v-if="'link' in item"
|
||||
:text="item.text"
|
||||
:link="item.link"
|
||||
/>
|
||||
<PressNavScreenMenuGroup
|
||||
v-else
|
||||
:text="item.text || ''"
|
||||
:items="item.items"
|
||||
/>
|
||||
</template>
|
||||
</nav>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import VPIconPlus from './icons/VPIconPlus.vue'
|
||||
import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
|
||||
import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
text: string
|
||||
items: any[]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
|
||||
const groupId = computed(() =>
|
||||
`NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`,
|
||||
)
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
|
||||
<button
|
||||
class="button"
|
||||
:aria-controls="groupId"
|
||||
:aria-expanded="isOpen"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="button-text">{{ text }}</span>
|
||||
<div i-ri-add-line class="button-icon" />
|
||||
</button>
|
||||
|
||||
<div :id="groupId" class="items">
|
||||
<template v-for="item in items" :key="item.text">
|
||||
<div v-if="'link' in item" :key="item.text" class="item">
|
||||
<VPNavScreenMenuGroupLink
|
||||
:text="item.text"
|
||||
:link="item.link"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="group">
|
||||
<VPNavScreenMenuGroupSection
|
||||
:text="item.text"
|
||||
:items="item.items"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroup {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup .items {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .items {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open {
|
||||
padding-bottom: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button {
|
||||
padding-bottom: 6px;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 4px 11px 0;
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--vp-c-text-2);
|
||||
transition: fill 0.5s, transform 0.25s;
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.group + .group,
|
||||
.group + .item {
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
defineProps<{
|
||||
text: string
|
||||
link: string
|
||||
}>()
|
||||
|
||||
const closeScreen = inject('close-screen') as () => void
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPLink class="VPNavScreenMenuGroupLink" :href="link" @click="closeScreen">
|
||||
{{ text }}
|
||||
</VPLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroupLink {
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroupLink:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts" setup>
|
||||
import type { NavItemLink } from '../../types'
|
||||
defineProps<{
|
||||
text?: string
|
||||
// todo
|
||||
items: NavItemLink[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPNavScreenMenuGroupSection">
|
||||
<p v-if="text" class="title">
|
||||
{{ text }}
|
||||
</p>
|
||||
<PressNavScreenMenuGroupLink
|
||||
v-for="item in items"
|
||||
:key="item.text"
|
||||
:text="item.text"
|
||||
:link="item.link"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroupSection {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
text: string
|
||||
link: string
|
||||
}>()
|
||||
|
||||
const closeScreen = inject('close-screen') as () => void
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLink class="VPNavScreenMenuLink" :href="link" @click="closeScreen">
|
||||
{{ text }}
|
||||
</AppLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuLink {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 0 11px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: border-color 0.25s, color 0.25s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuLink:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import PressToggleLocale from 'components/PressToggleLocale.vue';
|
||||
|
||||
<template>
|
||||
<div flex justify="center">
|
||||
<PressToggleLocale />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export function useNav() {
|
||||
const isScreenOpen = ref(false)
|
||||
|
||||
function openScreen() {
|
||||
isScreenOpen.value = true
|
||||
window.addEventListener('resize', closeScreenOnTabletWindow)
|
||||
}
|
||||
|
||||
function closeScreen() {
|
||||
isScreenOpen.value = false
|
||||
window.removeEventListener('resize', closeScreenOnTabletWindow)
|
||||
}
|
||||
|
||||
function toggleScreen() {
|
||||
isScreenOpen.value ? closeScreen() : openScreen()
|
||||
}
|
||||
|
||||
/**
|
||||
* Close screen when the user resizes the window wider than tablet size.
|
||||
*/
|
||||
function closeScreenOnTabletWindow() {
|
||||
window.outerWidth >= 768 && closeScreen()
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
watch(() => route.path, closeScreen)
|
||||
|
||||
return {
|
||||
isScreenOpen,
|
||||
openScreen,
|
||||
closeScreen,
|
||||
toggleScreen,
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,11 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--pr-c-bg: var(--va-c-bg);
|
||||
|
||||
--pr-c-text-code: #374562;
|
||||
--pr-c-text-1: #213547;
|
||||
--pr-c-text-2: rgba(60, 60, 60, .7);
|
||||
|
||||
// aside
|
||||
--pr-aside-text-1: var(--pr-c-text-1);
|
||||
|
|
@ -18,6 +21,7 @@
|
|||
--pr-nav-height: var(--pr-nav-height-mobile);
|
||||
--pr-nav-height-mobile: 60px;
|
||||
--pr-nav-text: var(--pr-c-text-1);
|
||||
--pr-nav-screen-bg-color: var(--pr-c-bg);
|
||||
|
||||
// z-index
|
||||
--va-z-overlay: var(--pr-z-index-backdrop);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@use "valaxy/client/styles/mixins" as *;
|
||||
|
||||
:root {
|
||||
--va-code-mobile-margin-x: -1.5rem;
|
||||
}
|
||||
|
||||
.prose {
|
||||
--un-prose-body: var(--va-c-text);
|
||||
--un-prose-hr: var(--va-c-text);
|
||||
|
|
@ -39,11 +43,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.markdown-body {
|
||||
div[class*="language-"] {
|
||||
margin: 0 -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,8 @@ export namespace PressTheme {
|
|||
}
|
||||
|
||||
export interface Config {
|
||||
logo: string
|
||||
|
||||
/**
|
||||
* toc title
|
||||
* @default 'On this page'
|
||||
|
|
@ -39,6 +41,7 @@ export namespace PressTheme {
|
|||
*/
|
||||
primary: string
|
||||
}
|
||||
|
||||
|
||||
nav: Array<NavItem>
|
||||
sidebar: string[]
|
||||
|
|
@ -46,6 +49,12 @@ export namespace PressTheme {
|
|||
editLink: EditLink
|
||||
|
||||
footer: Footer
|
||||
|
||||
// label
|
||||
/**
|
||||
* Toggle dark label
|
||||
*/
|
||||
darkModeSwitchLabel: string
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<script lang="ts" setup>
|
||||
import valaxyLogoPng from '../assets/images/valaxy-logo.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="valaxy-logo-container" relative inline-flex justify="center" items="center">
|
||||
<div class="absolute bg-image" />
|
||||
<img max-w="50" m="auto" :src="valaxyLogoPng" alt="Valaxy Logo" z="1">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.valaxy-logo-container {
|
||||
&:hover {
|
||||
.bg-image {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-image {
|
||||
border-radius: 50%;
|
||||
filter: blur(72px);
|
||||
max-width: 350px;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background-image: linear-gradient(-45deg, rgb(108, 34, 236) 50%, rgba(59,130,246,var(--un-to-opacity, 1)) 50%);
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="222" width="830" height="647">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint0_linear_757_102259)" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M729.48 756.469C729.478 756.471 729.475 756.473 729.472 756.475C729.606 756.361 729.625 756.36 729.48 756.469ZM690.046 767.723C685.618 766.845 680.868 765.982 675.803 765.143C634.63 758.32 576.843 753.701 512.383 753.12C447.923 752.538 390.063 756.114 348.774 762.193C343.694 762.941 338.929 763.717 334.486 764.515C338.914 765.394 343.664 766.256 348.729 767.095C389.902 773.918 447.689 778.537 512.149 779.119C576.609 779.7 634.469 776.124 675.758 770.045C680.838 769.298 685.603 768.521 690.046 767.723ZM295.261 752.552C295.118 752.441 295.137 752.442 295.269 752.558C295.266 752.556 295.264 752.554 295.261 752.552ZM295.052 775.769C295.054 775.768 295.057 775.766 295.06 775.764C294.926 775.877 294.907 775.878 295.052 775.769ZM729.263 779.68C729.266 779.682 729.268 779.684 729.271 779.686C729.413 779.798 729.395 779.796 729.263 779.68ZM511.932 803.118C642.542 804.296 748.572 788.686 748.756 768.252C748.941 747.819 643.21 730.299 512.6 729.121C381.99 727.942 275.96 743.552 275.776 763.986C275.591 784.42 381.322 801.939 511.932 803.118Z" fill="url(#paint1_linear_757_102259)" />
|
||||
<mask id="mask1_757_102259" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="97" y="121" width="830" height="748">
|
||||
<g style="mix-blend-mode:darken">
|
||||
<ellipse cx="512" cy="766" rx="102.062" ry="102.062" transform="rotate(-15 512 766)" fill="#9038FF" />
|
||||
</g>
|
||||
<rect x="-0.183013" y="-0.683013" width="579" height="159" transform="matrix(0.5 -0.866025 -0.866025 -0.5 635.881 702.112)" fill="#D9D9D9" stroke="black" stroke-linejoin="round" />
|
||||
<rect x="387.183" y="702.612" width="579" height="159" transform="rotate(-120 387.183 702.612)" fill="#D9D9D9" stroke="black" stroke-linejoin="round" />
|
||||
</mask>
|
||||
<g mask="url(#mask1_757_102259)">
|
||||
<rect x="-15" y="222" width="1071" height="979" fill="#D9D9D9" />
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask0_757_102259)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1024 0H0V1024H1024V0ZM666 766C666 851.052 597.052 920 512 920C426.948 920 358 851.052 358 766C358 680.949 426.948 612 512 612C597.052 612 666 680.949 666 766ZM610.584 739.585C625.173 794.031 592.862 849.996 538.416 864.585C483.969 879.174 428.005 846.863 413.416 792.416C398.827 737.969 431.138 682.005 485.584 667.416C540.031 652.827 595.995 685.138 610.584 739.585Z" fill="url(#paint2_diamond_757_102259)" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_757_102259" x1="472.734" y1="695.005" x2="499.213" y2="841.207" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9444FB" />
|
||||
<stop offset="1" stop-color="#4D08A4" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_757_102259" x1="543.866" y1="836.077" x2="534.684" y2="776.831" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-opacity="0.19" />
|
||||
<stop offset="1" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<radialGradient id="paint2_diamond_757_102259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(510 767) rotate(-90) scale(1452.5)">
|
||||
<stop stop-color="#8300EF" />
|
||||
<stop offset="1" stop-color="#3B82F6" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
@include mobile {
|
||||
.markdown-body {
|
||||
div[class*="language-"] {
|
||||
margin: 0 -1rem;
|
||||
margin: 0 var(--va-code-mobile-margin-x, -1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ $palette: map.merge(
|
|||
$colors: () !default;
|
||||
$colors: map.merge(
|
||||
(
|
||||
"primary": #0078e7,
|
||||
"primary": #5718BC,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
|
|
|
|||
|
|
@ -63,9 +63,11 @@
|
|||
"@iconify-json/carbon": "^1.1.13",
|
||||
"@iconify-json/ri": "^1.1.4",
|
||||
"@intlify/unplugin-vue-i18n": "^0.8.1",
|
||||
"@types/body-scroll-lock": "^3.1.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vueuse/core": "^9.10.0",
|
||||
"@vueuse/head": "^1.0.22",
|
||||
"body-scroll-lock": "4.0.0-beta.0",
|
||||
"consola": "^2.15.3",
|
||||
"critters": "^0.0.16",
|
||||
"cross-spawn": "^7.0.3",
|
||||
|
|
|
|||
1066
pnpm-lock.yaml
1066
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue