valaxy-theme-yun 0.20.6 → 0.21.0

package/components/YunBackToTop.vue

@@ -50,7 +50,7 @@ const strokeOffset = computed(() => {
   transition: all var(--va-transition-duration), opacity var(--va-transition-duration-fast) !important;
 
   &.show {
-    transform: translateX(-32px) rotate(360deg);
+    transform: translateX(-40px) rotate(360deg);
     opacity: 1;
     pointer-events: fill;
   }

package/components/YunBanner.vue

@@ -67,7 +67,6 @@ onMounted(async () => {
         :title="themeConfig.banner.title"
         :chars="chars"
       />
-      <YunPrologueSquare v-else class="z-1" />
     </template>
     <template v-if="yun.isStrato">
       <YunBannerCharContainer

package/components/YunPrologue.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="grid-bg">
-    <YunAEFrame />
-    <YunAERect />
-
-    <div
-      flex="~ col"
-      class="justify-center items-center absolute bottom-$rect-margin left-0 right-0"
-    >
-      <PrologueSocialLinks />
-    </div>
+    <!-- <YunAEFrame /> -->
+    <!-- <YunAERect /> -->
   </div>
 </template>
 

package/components/author/YunAuthorAvatar.vue

@@ -6,8 +6,9 @@ const siteConfig = useSiteConfig()
 
 <template>
   <div class="relative yun-author-avatar">
+    <div class="absolute size-full avatar-bg bg-image-$yun-home-hero-image-background-image filter-blur-2xl op-30" />
     <img
-      class="rounded-full size-full bg-white dark:bg-white/20 p-1 m-0"
+      class="rounded-full size-full bg-white dark:bg-white/20 p-1 m-0 absolute"
       :src="siteConfig.author.avatar"
       alt="avatar"
     >

package/components/layout/YunLayoutRight.vue

@@ -10,7 +10,7 @@ const yun = useYunAppStore()
   <button
     v-if="fm.aside !== false"
     class="xl:hidden toc-btn shadow-md fixed yun-icon-btn z-350 bg-$va-c-bg-soft"
-    opacity="75" right="2" bottom="19"
+    opacity="75" right="4" bottom="19"
     @click="yun.rightSidebar.toggle()"
   >
     <div i-ri-file-list-line />

package/components/layout/YunLayoutWrapper.vue

@@ -7,7 +7,7 @@ import { useYunAppStore } from '../../stores'
 const yun = useYunAppStore()
 const classes = computed(() => {
   if (yun.isNimbo)
-    return 'mt-24 md:mt-36'
+    return 'mt-12 md:mt-24'
   return 'mt-12'
 })
 </script>

package/components/prologue/YunPrologueSquare.vue

@@ -10,7 +10,7 @@ const showContent = ref(false)
 <template>
   <div
     flex="~ col"
-    class="yun-square-container items-center justify-center text-center size-$total-char-height"
+    class="yun-square-container items-center justify-center text-center max-w-2xl"
   >
     <slot />
 
@@ -29,7 +29,7 @@ const showContent = ref(false)
       >
         <div
           flex="~ col"
-          class="absolute yun-square square-rotate z-1 bg-white/80"
+          class="yun-square square-rotate z-1 bg-white/80"
         >
           <LineBurstEffects
             class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
@@ -68,10 +68,11 @@ const showContent = ref(false)
           <YunSiteDescription />
         </div>
 
+        <YunSocialLinks />
+
         <div
-          class="mt-4 flex-center w-64 md:w-100 m-auto gap-2"
+          class="mt-4 flex-center w-72 md:w-150 m-auto gap-2"
           flex="~ wrap"
-          p="x-$rect-margin"
         >
           <YunSiteLinkItem
             :page="{
@@ -106,8 +107,8 @@ const showContent = ref(false)
 
   &.enter-from {
     border-radius: 0%;
-    width: var(--total-char-height);
-    height: var(--total-char-height);
+    // width: var(--total-char-height);
+    // height: var(--total-char-height);
     transform: rotate(135deg) translateY(0%);
     box-shadow: none;
   }
@@ -120,7 +121,7 @@ const showContent = ref(false)
     position: relative;
 
     &.show {
-      transform: translateY(-50%);
+      // transform: translateY(-50%);
     }
   }
 
@@ -132,7 +133,7 @@ const showContent = ref(false)
 
     &.show {
       opacity: 1;
-      transform: translateY(calc(50% + var(--avatar-size) / 2));
+      // transform: translateY(calc(50% + var(--avatar-size) / 2));
     }
   }
 }

package/components/site/YunSiteLinkItem.vue

@@ -11,7 +11,8 @@ const yunApp = useYunAppStore()
 
 <template>
   <AppLink
-    class="link-item inline-flex-center gap-2 transition rounded text-base p-1 md:(text-base p-2) lg:(text-xl p-3) text-$va-c-text"
+    class="link-item inline-flex-center gap-2 transition rounded-lg text-xl p-2 md:(text-lg p-2) lg:(text-xl p-3) text-$va-c-text"
+    bg="white/5 dark:black/5"
     inline-flex
     :to="page.url" :title="page.name"
     :style="`color:${page.color}`"

package/components/site/YunSiteSubtitle.vue

@@ -7,7 +7,7 @@ const siteConfig = useSiteConfig()
 <template>
   <h4
     v-if="siteConfig.subtitle"
-    class="site-subtitle block text-$va-c-text op-80" text="sm"
+    class="site-subtitle block text-$va-c-text op-80 font-medium" text="sm"
   >
     {{ siteConfig.subtitle }}
   </h4>

package/components/site/YunSiteTitle.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { useSiteConfig } from 'valaxy'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const siteConfig = useSiteConfig()
+
+const classes = ref('site-name clip text-lg leading-loose bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)')
 </script>
 
 <template>
   <RouterLink
     v-if="router.hasRoute('/about/site')" to="/about/site"
-    class="site-name"
+    :class="classes"
   >
     {{ siteConfig.title }}
   </RouterLink>
-  <span v-else class="site-name">{{ siteConfig.title }}</span>
+  <span v-else :class="classes">{{ siteConfig.title }}</span>
 </template>
 
 <style lang="scss">

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -2,13 +2,13 @@
 import { useAppStore, useSiteConfig } from 'valaxy'
 import { onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { useThemeConfig } from '../../../composables'
 import { useYunAppStore } from '../../../stores'
-// import { useThemeConfig } from '../composables'
 
 // const app = useAppStore()
 const yunApp = useYunAppStore()
 const siteConfig = useSiteConfig()
-// const themeConfig = useThemeConfig()
+const themeConfig = useThemeConfig()
 
 const showMenu = ref(false)
 const route = useRoute()
@@ -41,7 +41,6 @@ const app = useAppStore()
     <div
       v-if="showMenu"
       class="yun-nav-menu z-$yun-z-nav-menu fixed bg-transparent"
-      border="~ solid $va-c-text"
       :class="{
         play: playAnimation,
       }"
@@ -49,6 +48,7 @@ const app = useAppStore()
       <!--  -->
       <div class="inline-flex justify-start items-center flex-1">
         <ValaxyHamburger
+          v-if="!yunApp.size.isMd"
           :active="yunApp.fullscreenMenu.isOpen"
           class="menu-btn sidebar-toggle leading-4 size-12"
           inline-flex cursor="pointer"
@@ -57,6 +57,20 @@ const app = useAppStore()
           @click="yunApp.fullscreenMenu.toggle()"
         />
         <YunNavMenuItem icon="i-ri-home-4-line" to="/" />
+        <template v-if="yunApp.size.isMd">
+          <YunNavMenuItem
+            icon="i-ri-article-line" to="/posts/"
+            title="博客文章"
+          />
+
+          <YunNavMenuItem
+            v-for="item, i in themeConfig.pages"
+            :key="i"
+            :icon="item.icon"
+            :to="item.url"
+            :title="item.name"
+          />
+        </template>
       </div>
 
       <div class="flex flex-1 flex-center">
@@ -102,9 +116,14 @@ const app = useAppStore()
   // animation-range: 0 calc(30vh), exit;
   box-shadow: none;
   display: flex;
-  top: var(--rect-margin);
-  left: var(--rect-margin);
-  right: var(--rect-margin);
+  // top: var(--rect-margin);
+  // left: var(--rect-margin);
+  // right: var(--rect-margin);
+
+  top: 0;
+  left: 0;
+  right: 0;
+
   align-items: center;
   justify-content: space-between;
   height: 50px;

package/layouts/home.vue

@@ -26,6 +26,24 @@ const showNotice = computed(() => {
   >
     <template v-if="!isPage">
       <YunBanner />
+      <Transition
+        enter-from-class="scale-60"
+        enter-to-class="scale-100"
+        enter-active-class="transition-300 transition-cubic-bezier-ease-in-out delay-1000"
+        appear
+      >
+        <div class="absolute top-0 left-5 right-5 bottom-0 flex-center">
+          <Transition
+            enter-from-class="op-0"
+            enter-to-class="op-100"
+            enter-active-class="transition-800 delay-1000"
+            appear
+          >
+            <YunPrologueSquare class="z-1" />
+          </Transition>
+        </div>
+      </Transition>
+
       <YunSay v-if="themeConfig.say.enable" w="full" />
       <YunPrologue v-if="yun.isNimbo" class="absolute left-0 top-0 right-0 bottom-0" />
     </template>

package/layouts/posts.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="pt-36">
+  <div class="pt-16 md:pt-24">
     <YunPostList />
   </div>
   <YunFooter />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.6",
+  "version": "0.21.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -23,20 +23,19 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
-    "@iconify-json/ant-design": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.13",
+    "@iconify-json/ant-design": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.15",
     "@vueuse/motion": "^2.2.6",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
-    "primevue": "^4.2.4",
-    "radix-vue": "^1.9.10"
+    "primevue": "^4.2.5"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.20.6",
-    "valaxy-addon-waline": "0.2.0"
+    "valaxy-addon-waline": "0.2.0",
+    "valaxy": "0.21.0"
   },
   "scripts": {
-    "release": "bumpp && npm publish"
+    "release": "bumpp && pnpm publish"
   }
 }

package/setup/main.ts

@@ -6,6 +6,8 @@ import { defineAppSetup } from 'valaxy'
 import { useYunAppStore } from '../stores'
 
 import primeStyles from '../styles/primevue'
+
+import 'valaxy/client/styles/common/index.scss'
 import '../styles/global.scss'
 import '../styles/primevue/tooltip.scss'
 

package/styles/common/scrollbar.scss

@@ -0,0 +1,30 @@
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(122, 122, 122, 0.3);
+
+  // transition not work
+
+  &:window-inactive {
+    background-color: rgba(122, 122, 122, 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(122, 122, 122, 0.7);
+  }
+
+  &:active {
+    background-color: rgba(122, 122, 122, 0.9);
+  }
+}

package/styles/css-vars.scss

@@ -5,6 +5,10 @@
 :root {
   // yun
   --yun-margin-top: 68px;
+
+  --yun-home-hero-image-filter: blur(48px);
+  --yun-home-hero-name-background: -webkit-linear-gradient(120deg, var(--va-c-text) 30%, black);
+  --yun-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
 }
 
 :root {
@@ -26,6 +30,8 @@ html.dark {
   // gradient
   --va-c-bg: #1a1a1d;
   --va-c-bg-soft: #121215;
+
+  --yun-home-hero-name-background: -webkit-linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);
 }
 
 // animation

package/styles/global.scss

@@ -6,3 +6,16 @@
 html {
   transition: background-color 0.6s;
 }
+
+.clip {
+  background: var(--yun-home-hero-name-background);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--yun-home-hero-name-color, transparent);
+}
+
+.gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/styles/widgets/banner.scss

@@ -48,10 +48,6 @@ $char-animation-duration: 0.4s;
   &-bottom {
     flex-direction: column-reverse;
   }
-
-
-
-
 }
 
 .banner-line {