hexo-theme-solitude 1.4.0 → 1.4.1

package/source/css/_page/about/oneself.styl

@@ -0,0 +1,91 @@
+#about-page
+  .author-content-item-group
+    &.column
+      display flex
+      flex-direction column
+      width 49%
+      justify-content space-between
+
+      +maxWidth768()
+        width 100% !important
+
+    &.mapAndInfo
+      width 59%
+
+  .author-content-item
+    +minWidth1300()
+      animation slide-in .6s 0s backwards
+
+    &.map
+      background var(--site-about-oneself-map--light) no-repeat center
+      min-height 160px
+      max-height 400px
+      position relative
+      overflow hidden
+      margin-bottom 0.5rem
+      height 60%
+      background-size 100%
+      transition 1s ease-in-out
+
+      .map-title
+        position absolute
+        bottom 0
+        left 0
+        width 100%
+        background var(--sco-maskbg)
+        padding 0.5rem 2rem
+        backdrop-filter saturate(180%) blur(20px)
+        transition 1s ease-in-out
+        font-size 20px
+        transform translateZ(0)
+
+        +maxWidth768()
+          padding 1rem
+
+        b
+          color var(--sco-fontcolor)
+
+      +maxWidth768()
+        margin-bottom 0
+
+      [data-theme=dark] &
+        background var(--site-about-oneself-map--dark) no-repeat center
+        background-size 100%
+
+      &:hover
+        background-size 120%
+        transition 4s ease-in-out
+        background-position-x 0
+        background-position-y 36%
+
+        .map-title
+          bottom -100%
+
+  .author-content-item.selfInfo
+    display flex
+    min-height 100px
+    max-height 400px
+    justify-content space-between
+    align-items center
+    flex-wrap wrap
+    height -webkit-fill-available
+    height 40%
+
+    +maxWidth1300()
+      height 70%
+
+    div
+      display flex
+      flex-direction column
+      margin .5rem 2rem .5rem 0
+
+    .selfInfo-title
+      opacity .8
+      font-size .6rem
+      line-height 1
+      margin-bottom 8px
+
+    .selfInfo-content
+      font-weight 700
+      font-size 34px
+      line-height 1

package/source/css/_page/about/personalities.styl

@@ -0,0 +1,25 @@
+.author-content-item.personalities
+  overflow hidden
+  position relative
+  width 59%
+  +maxWidth768()
+    min-height 360px
+
+  .title2
+    font-size 36px
+    font-weight 700
+    line-height 1.1
+
+  .image
+    position absolute
+    right -40px
+    bottom -10rem
+    transition transform 2s cubic-bezier(.13, .45, .21, 1.02)
+    user-select none
+
+    +maxWidth768()
+      right -70px
+
+  &:hover
+    .image
+      transform rotate(-10deg)

package/source/css/_page/about/reward.styl

@@ -0,0 +1,113 @@
+#about-page
+  .author-content-item
+    &.single.reward
+      .author-content-item
+        .author-content-item-title
+          color var(--sco-red)
+
+      .reward-list-updateDate
+        color var(--sco-gray)
+        font-size 14px
+
+      .author-content-item-description
+        font-size 16px
+        margin-top .5rem
+
+      .reward-list-all
+        display flex
+        flex-wrap wrap
+        flex-direction row
+        margin 1rem -.25rem .5rem
+
+        .post-reward
+          position absolute
+          right 2rem
+          top 2rem
+
+          .reward-main
+            top 60px
+            right 0
+            left auto
+            bottom auto
+            width fit-content
+            box-shadow var(--sco-shadow-border)
+
+            .reward-all::before
+              bottom auto
+              top -16px
+
+          .reward-button
+            padding 8px 12px
+            background var(--sco-red)
+            border-radius 12px
+            color var(--sco-white)
+            display flex
+            align-items center
+            z-index 1
+            transition .3s
+            cursor pointer
+            box-shadow none
+            width fit-content
+            height fit-content
+            line-height 2
+            user-select none
+
+            +maxWidth768()
+              display none
+
+          &:hover
+            .reward-button
+              filter brightness(1.1)
+
+        .reward-list-item
+          padding 1rem
+          border-radius 12px
+          border var(--style-border-always)
+          width calc((100% / 6) - .5rem)
+          margin 0 .25rem .5rem .25rem
+          box-shadow var(--sco-shadow-border)
+          flex-direction column
+          justify-content space-between
+
+          +maxWidth1200()
+            width calc((100% / 4) - .5rem)
+
+          +maxWidth900()
+            width calc((100% / 2) - .5rem)
+
+          +maxWidth768()
+            width 100%
+
+          .reward-list-item-name
+            font-size 1rem
+            font-weight 700
+            line-height 1
+            margin-bottom .5rem
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+
+          .reward-list-bottom-group
+            display flex
+            align-items center
+            justify-content space-between
+
+          .reward-list-item-money
+            padding 4px
+            background var(--sco-fontcolor)
+            color var(--sco-card-bg)
+            font-size 12px
+            line-height 1
+            border-radius 4px
+            margin-right 4px
+            white-space nowrap
+
+          .reward-list-item-time
+            font-size 12px
+            color var(--sco-secondtext)
+            white-space nowrap
+
+    .reward-list-tips
+      p
+        font-size 12px
+        color var(--sco-secondtext)

package/source/css/_page/about/skills.styl

@@ -0,0 +1,75 @@
+#about-page
+  .author-content-item.skills
+    display flex
+    justify-content center
+    align-items flex-start
+    flex-direction column
+    width 49%
+    min-height 450px
+
+    .tags-group-all
+      display flex
+      transform rotate(0)
+      transition .3s
+
+    .tags-group-wrapper
+      margin-top 20px
+      display flex
+      flex-wrap nowrap
+      animation rowup 60s linear infinite
+
+    .skills-style-group
+      position relative
+
+    .skills-list
+      display flex
+      opacity 0
+      transition .3s
+      position absolute
+      width 100%
+      top 0
+      left 0
+      flex-wrap wrap
+      flex-direction row
+      margin-top 10px
+
+    &:hover
+      .skills-style-group
+        .tags-group-all
+          opacity 0
+
+        .skills-list
+          opacity 1
+
+    .skill-info
+      display flex
+      align-items center
+      margin-right 10px
+      margin-top 10px
+      background var(--sco-background)
+      border-radius 40px
+      padding 4px 12px 4px 8px
+      border var(--style-border)
+      box-shadow var(--sco-shadow-border)
+
+    .etc
+      margin-right 10px
+      margin-top 10px
+
+    .skill-icon
+      width 32px
+      height 32px
+      border-radius 32px
+      display flex
+      align-items center
+      justify-content center
+      margin-right 8px
+      user-select none
+
+      img
+        width 18px
+        height 18px
+
+    .skill-name
+      font-weight 700
+      line-height 1

package/source/css/_page/about/statistic.styl

@@ -0,0 +1,55 @@
+#about-page
+  .author-content-item
+    .card-content
+      z-index 2
+
+  .about-statistic
+    min-height 380px
+    width 39%
+    background-size cover
+    color var(--sco-white)
+    overflow hidden
+
+    &::after
+      box-shadow 0 -159px 173px 71px #0f1114 inset
+      position absolute
+      content ''
+      width 100%
+      height 100%
+      top 0
+      left 0
+
+    #statistic
+      font-size 16px
+      border-radius 15px
+      width 100%
+      color var(--sco-white)
+      display flex
+      justify-content space-between
+      flex-direction row
+      flex-wrap wrap
+      margin-top 1rem
+      margin-bottom 2rem
+
+      div
+        display flex
+        justify-content space-between
+        flex-direction column
+        width 50%
+        margin-bottom .5rem
+
+        span:first-child
+          opacity .8
+          font-size .6rem
+
+        span:last-child
+          font-weight 700
+          font-size 34px
+          line-height 1
+          white-space nowrap
+
+    .banner-button
+      background var(--sco-white-op)
+
+    .banner-button:hover
+      background var(--sco-theme)

package/source/css/_page/index.styl

@@ -21,13 +21,29 @@ if hexo-config('says.enable')
 
 @import "links.styl"
 
-if hexo-config('about')
-  @import "about.styl"
-  @import "about/index.styl"
+@import "about/index.styl"
 
 if hexo-config('music.enable')
   @import "music.styl"
 
+.author-content
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  width 100%
+  margin-top 1rem
+
+  +maxWidth768()
+    margin-top 0
+
+  .author-content-item
+    +maxWidth1300()
+      animation slide-in .6s 0s backwards
+    +maxWidth768()
+      width 100% !important
+      margin-top 1rem
+      padding 1rem
+
 .author-content.author-content-item.sharePage
   height 19rem
   background-size cover

package/source/js/covercolor/api.js

@@ -7,6 +7,7 @@ const coverColor = () => {
 
 function handleApiColor(path) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
+    console.log(cacheGroup)
     if (cacheGroup.postcolor && cacheGroup.postcolor[path]) {
         const color = cacheGroup.postcolor[path].value;
         const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
@@ -18,30 +19,24 @@ function handleApiColor(path) {
 
 function img2color(src) {
     const apiUrl = coverColorConfig.api + encodeURIComponent(src);
-
     fetch(apiUrl)
         .then(response => response.json())
         .then(data => {
             const color = data.RGB;
             const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
             setThemeColors(color, r, g, b);
-            if (coverColorConfig.time !== 0) {
-                cacheColor(src, color);
-            }
+            const expirationTime = Date.now() + coverColorConfig.time;
+            const cacheGroup = saveToLocal.get('Solitude') || {};
+            cacheGroup.postcolor = cacheGroup.postcolor || {};
+            cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
+            localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
         })
         .catch(error => {
             console.error('请检查API是否正常！\n' + error);
+            setThemeColors();
         });
 }
 
-function cacheColor(src, color) {
-    const expirationTime = Date.now() + coverColorConfig.time;
-    const cacheGroup = saveToLocal.get('Solitude') || {};
-    cacheGroup.postcolor = cacheGroup.postcolor || {};
-    cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
-    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
-}
-
 function setThemeColors(value, r = null, g = null, b = null) {
     if (value) {
         document.documentElement.style.setProperty('--sco-main', value);
@@ -51,15 +46,17 @@ function setThemeColors(value, r = null, g = null, b = null) {
 
         if (r && g && b) {
             var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            var cardContents = document.getElementsByClassName('card-content');
-            var authorInfo = document.getElementsByClassName('author-info__sayhi');
-            for (let i = 0; i < cardContents.length; i++) {
-                cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
-            }
+            if (brightness < 125) {
+                var cardContents = document.getElementsByClassName('card-content');
+                for (let i = 0; i < cardContents.length; i++) {
+                    cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
+                }
 
-            for (let i = 0; i < authorInfo.length; i++) {
-                authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
-                authorInfo[i].style.setProperty('color', 'var(--sco-white)');
+                var authorInfo = document.getElementsByClassName('author-info__sayhi');
+                for (let i = 0; i < authorInfo.length; i++) {
+                    authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
+                    authorInfo[i].style.setProperty('color', 'var(--sco-white)');
+                }
             }
         }
 

package/source/js/covercolor/local.js

@@ -1,20 +1,21 @@
-const coverColor = () => {
+function coverColor() {
     const path = document.getElementById("post-cover")?.src;
+
     if (path) {
         localColor(path);
     }
 }
 
-const localColor = (path) => {
+function localColor(path) {
     const img = new Image();
     img.crossOrigin = "Anonymous";
     img.onload = function () {
         const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
+        canvas.width = this.width;
+        canvas.height = this.height;
         const ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0);
-        const data = ctx.getImageData(0, 0, img.width, img.height).data;
+        ctx.drawImage(this, 0, 0);
+        const data = ctx.getImageData(0, 0, this.width, this.height).data;
         const {r, g, b} = calculateRGB(data);
         let value = rgbToHex(r, g, b);
         if (getContrastYIQ(value) === "light") {
@@ -22,26 +23,9 @@ const localColor = (path) => {
         }
         setThemeColors(value, r, g, b);
     };
-    img.onerror = function() {
-        console.error('图片加载失败');
-    };
     img.src = path;
 }
 
-function calculateRGB(data) {
-    let r = 0, g = 0, b = 0;
-    const step = 5;
-    for (let i = 0; i < data.length; i += 4 * step) {
-        r += data[i];
-        g += data[i + 1];
-        b += data[i + 2];
-    }
-    r = Math.floor(r / (data.length / 4 / step));
-    g = Math.floor(g / (data.length / 4 / step));
-    b = Math.floor(b / (data.length / 4 / step));
-    return {r, g, b};
-}
-
 function rgbToHex(r, g, b) {
     return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
 }
@@ -98,57 +82,4 @@ function colorRgb(str) {
     } else {
         return sColor;
     }
-}
-
-function setThemeColors(value, r = null, g = null, b = null) {
-    const cardContents = document.getElementsByClassName('card-content');
-    const authorInfo = document.getElementsByClassName('author-info__sayhi');
-
-    if (value) {
-        document.documentElement.style.setProperty('--sco-main', value);
-        document.documentElement.style.setProperty('--sco-main-op', value + '23');
-        document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
-        document.documentElement.style.setProperty('--sco-main-none', value + '00');
-
-        if (r && g && b) {
-            var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            for (let i = 0; i < cardContents.length; i++) {
-                cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
-            }
-
-            for (let i = 0; i < authorInfo.length; i++) {
-                authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
-                authorInfo[i].style.setProperty('color', 'var(--sco-white)');
-            }
-        }
-
-        document.getElementById("coverdiv").classList.add("loaded");
-        initThemeColor();
-    } else {
-        document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
-        document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
-        document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
-        document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
-        initThemeColor();
-    }
-}
-
-function initThemeColor() {
-    const currentTop = window.scrollY || document.documentElement.scrollTop;
-    let themeColor;
-    if (currentTop > 0) {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
-    } else if (PAGE_CONFIG.is_post) {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
-    } else {
-        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
-    }
-    changeThemeColor(themeColor);
-}
-
-function changeThemeColor(color) {
-    const meta = document.querySelector('meta[name="theme-color"]');
-    if (meta) {
-        meta.setAttribute('content', color);
-    }
 }