valaxy-theme-yun 0.13.7 → 0.13.8

package/components/ValaxyMain.vue

@@ -70,7 +70,7 @@ const aside = computed(() => props.frontmatter.aside !== false)
 <style lang="scss">
 @use 'valaxy/client/styles/mixins' as *;
 
-@include media('md') {
+@include screen('md') {
   .yun-main {
     &.has-sidebar {
       padding-left: var(--va-sidebar-width);
@@ -78,7 +78,7 @@ const aside = computed(() => props.frontmatter.aside !== false)
   }
 }
 
-@include media('xl') {
+@include screen('xl') {
   .content{
     // 8px scrollbar width
     max-width: calc(100vw - 2 * var(--va-sidebar-width) - 1rem - 8px);

package/components/YunAside.vue

@@ -69,7 +69,7 @@ const app = useAppStore()
   }
 }
 
-@include media('xl') {
+@include screen('xl') {
   .aside {
     transform: translateX(0);
   }

package/components/YunBanner.vue

@@ -22,16 +22,16 @@ const chars = computed(() => {
 // height of top/bottom line
 const lineH = computed(() => chars.value.reduce((a, b) => a + b, 0) / 2)
 
-const lintStyle = computed(() => (
+const lineStyle = computed(() => (
   {
-    '--banner-line-height': `calc(50vh - ${lineH.value}rem)`,
+    '--banner-line-height': `calc(var(--app-height, 100vh) / 2 - ${lineH.value}rem)`,
   } as CSSProperties
 ))
 </script>
 
 <template>
-  <div id="banner">
-    <div class="banner-line vertical-line-top" :style="lintStyle" />
+  <div id="banner" :style="lineStyle">
+    <div class="banner-line vertical-line-top" :style="lineStyle" />
     <div class="banner-char-container">
       <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
         <span
@@ -45,10 +45,11 @@ const lintStyle = computed(() => (
         </span>
       </div>
     </div>
-    <div class="banner-line vertical-line-bottom" :style="lintStyle" />
+    <div class="banner-line vertical-line-bottom" :style="lineStyle" />
   </div>
 
   <YunGoDown />
+  <YunCloud v-if="themeConfig.banner.cloud?.enable" />
 </template>
 
 <style lang="scss">

package/components/YunBg.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useThemeConfig } from 'valaxy-theme-yun/composables'
 import { useCssVar } from '@vueuse/core'
 import { isDark } from 'valaxy'
@@ -10,37 +10,50 @@ const bgImgOpacity = useCssVar('--va-bg-img-opacity')
 if (themeConfig.value.bg_image.opacity)
   bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
 
-const styles = computed(() => {
-  return {
-    backgroundImage: `url('${isDark.value
-      ? themeConfig.value.bg_image.dark
-      : themeConfig.value.bg_image.url
-      }')`,
-  }
+const bgImgUrl = computed(() => {
+  return isDark.value
+    ? themeConfig.value.bg_image.dark
+    : themeConfig.value.bg_image.url
 })
+
+const bgImgCssVar = useCssVar('--va-bg-img')
+
+watch(() => bgImgUrl.value, () => {
+  bgImgCssVar.value = `url('${bgImgUrl.value}')`
+}, { immediate: true })
 </script>
 
 <template>
-  <div class="va-bg" :style="styles" />
+  <div class="va-bg" />
 </template>
 
 <style lang="scss">
+@use 'valaxy/client/styles/mixins' as *;
+
 .va-bg {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: -1;
-  background-image: var(--va-bg-image);
+
+  background-image: var(--va-bg-img);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  // avoid flicker
+  // avoid scroll flicker but not compatible with ios
   background-attachment: fixed;
   animation-name: bgFadeIn;
   animation-duration: 2s;
   opacity: var(--va-bg-img-opacity, 1);
 }
 
+// for ios
+@include ios {
+  .va-bg {
+    background-attachment: scroll;
+  }
+}
+
 @keyframes bgFadeIn {
   from {
     opacity: 0;

package/components/YunCloud.vue

@@ -34,7 +34,7 @@
     width: 100%;
     height: 100px;
 
-    @include media('md') {
+    @include screen('md') {
       height: 40px;
     }
   }

package/components/YunFooter.vue

@@ -47,7 +47,7 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.repository.url" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
     </div>
 
     <slot />

package/layouts/home.vue

@@ -17,7 +17,6 @@ const themeConfig = useThemeConfig()
 
     <YunBanner />
     <YunSay v-if="themeConfig.say.enable" w="full" />
-    <YunCloud v-if="themeConfig.banner.cloud?.enable" />
     <YunNotice
       v-if="themeConfig.notice.enable"
       :content="themeConfig.notice.content" mt="4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.13.7",
+  "version": "0.13.8",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -22,6 +22,6 @@
     "valaxy-addon-waline": "0.0.9"
   },
   "devDependencies": {
-    "valaxy": "0.13.7"
+    "valaxy": "0.13.8"
   }
 }

package/styles/common/markdown.scss

@@ -36,4 +36,8 @@ html.dark {
       list-style: decimal;
     }
   }
+
+  img {
+    margin: auto;
+  }
 }

package/styles/vars.scss

@@ -4,10 +4,10 @@
 $light: () !default;
 $light: map.merge(
   (
-    "bg-image":
+    "bg-img":
       url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg"),
     "sidebar-bg-color": var(--va-c-bg-light),
-    "sidebar-bg-image":
+    "sidebar-bg-img":
       url("https://cdn.yunyoujun.cn/img/bg/alpha-stars-timing-1.webp"),
   ),
   $light
@@ -16,8 +16,8 @@ $light: map.merge(
 $dark: () !default;
 $dark: map.merge(
   (
-    "bg-image": none,
-    "sidebar-bg-image": none,
+    "bg-img": none,
+    "sidebar-bg-img": none,
   ),
   $dark
 );