hexo-theme-solitude 1.4.2 → 1.4.4

package/source/css/_page/share.styl

@@ -0,0 +1,318 @@
+// banner
+
+div#banners
+  display none
+  +minWidth1200()
+    display flex
+    width 100%
+    height 76%
+    background var(--sco-card-bg)
+    margin-bottom .5rem
+    border var(--style-border)
+    border-radius 12px
+    overflow hidden
+    position relative
+    box-shadow var(--sco-shadow-border)
+    flex-direction column
+    transition .3s
+    will-change transform
+    animation slide-in .6s .1s backwards
+
+    :not(.flink)&:hover
+      box-shadow var(--sco-shadow-main)
+
+    .banner-button-group
+      position absolute
+      right 2rem
+      top 2rem
+      display flex
+
+    .banner-button
+      padding 8px 12px
+      background var(--sco-fontcolor)
+      border-radius 12px
+      color var(--sco-card-bg)
+      display flex
+      align-items center
+      z-index 1
+      transition .3s
+      cursor pointer
+      box-shadow var(--sco-shadow-black)
+
+      &.secondary
+        background var(--sco-secondbg)
+        border var(--style-border-always)
+        color var(--sco-lighttext)
+        margin-right 1rem
+        box-shadow var(--sco-shadow-border)
+
+      &:hover
+        background var(--sco-theme)
+        color var(--sco-white)
+
+      i
+        margin-right 8px
+        font-size 1rem
+
+    .banners-title
+      top 2rem
+      left 1.5rem
+      position absolute
+      display flex
+      flex-direction column
+
+      &-big
+        font-size 36px
+        line-height 1
+        font-weight 700
+        margin-bottom 8px
+
+      &-small
+        font-size 12px
+        line-height 1
+        color var(--sco-secondtext)
+        margin-top 8px
+        margin-bottom .5rem
+
+    #banner-hover
+      position absolute
+      width 100%
+      height 100%
+      top 0
+      left 0
+      border-radius 12px
+      background var(--sco-theme)
+      color var(--sco-card-bg)
+      padding-left .5rem
+      display flex
+      flex-direction column
+      justify-content center
+      opacity 0
+      transition cubic-bezier(.71, .15, .16, 1.15) .6s
+
+      i
+        font-size 80px
+        opacity .4
+
+    &:hover
+      #banner-hover
+        opacity 1
+        padding-left 2rem
+        background var(--sco-theme-op-deep)
+        backdrop-filter blur(15px)
+        transform translateZ(0)
+        transition .3s
+        background-size 200%
+        cursor pointer
+
+    .flink
+      .banners-title
+        top 1.5rem
+
+    .bannerText
+      font-size 4rem
+      line-height 4rem
+      font-weight 700
+
+  .tags-group-all
+    display flex
+    transform rotate(-30deg)
+
+    &.nowrapMove
+      transform rotate(0)
+      padding-bottom 2rem
+
+      .tags-group-wrapper
+        margin-top: 7rem
+        animation: rowup 120s linear infinite
+
+      .tags-group-icon
+        border-radius 50%
+
+        img
+          min-width 100%
+          min-height 100%
+          border-radius 50%
+          object-fit cover
+
+    .tags-group-wrapper
+      margin-top: 5rem
+      display: flex
+      flex-wrap: nowrap
+      animation: rowup 60s linear infinite
+
+      /.tags-group-icon-pair
+        margin-left 1rem
+        user-select none
+
+        a img
+          border-radius 50%
+
+        .tags-group-icon
+          width 120px
+          height 120px
+          display flex
+          align-items center
+          justify-content center
+          color #fff
+          font-size 66px
+          font-weight 700
+          box-shadow var(--sco-shadow-blackdeep)
+
+          &:nth-child(even)
+            margin-top 1rem
+            transform translate(-60px)
+
+          img
+            width 60%
+
+.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
+  color var(--sco-white)
+  overflow hidden
+  margin-top 0
+
+.author-content-item
+  width 49%
+  border-radius 12px
+  background var(--sco-card-bg)
+  border var(--style-border-always)
+  box-shadow var(--sco-shadow-border)
+  position relative
+  overflow hidden
+  padding 1rem 2rem
+
+  +maxWidth768()
+    width 100%
+    margin-top 1rem
+    padding 1rem
+
+  &.single
+    width 100%
+
+  .author-content-item-title
+    font-size 36px
+    font-weight 700
+    line-height 1
+
+  .author-content-item-tips
+    opacity .8
+    font-size .6rem
+    margin-bottom .5rem
+
+  .content-bottom
+    margin-top auto
+    display flex
+    align-items center
+    justify-content space-between
+
+    .icon-group
+      display flex
+
+      i
+        display inline-block
+        width 22px
+        height 18px
+        margin-right .5rem
+
+  .card-content
+    position absolute
+    width 100%
+    height 100%
+    top 0
+    left 0
+    display flex
+    flex-direction column
+    padding 1rem 2rem
+
+    +maxWidth768()
+      padding 1rem
+
+    .author-content-item-title
+      margin-bottom .5rem
+
+    .banner-button-group
+      position absolute
+      bottom 1.5rem
+      right 2rem
+
+      .banner-button
+        height 40px
+        width 118px
+        border-radius 20px
+        justify-content center
+        background var(--sco-black-op)
+        color var(--sco-white)
+        display flex
+        align-items center
+        z-index 1
+        transition .3s
+        cursor pointer
+        backdrop-filter saturate(180%) blur(20px)
+        -webkit-backdrop-filter blur(20px)
+        transform translateZ(0)
+
+        &:hover
+          background var(--sco-main)
+          color var(--sco-card-bg)
+
+        i
+          margin-right 8px
+          font-size 22px
+
++maxWidth900()
+  .author-content-item
+    .card-content
+      .banner-button-group
+        right 1rem
+        bottom 1rem
+
+      .banner-button-group
+        .banner-button
+          background 0 0
+          color var(--sco-white)
+          padding 0
+          width 30px
+          height 30px
+
+          i
+            margin-right 0
+            font-size 1.5rem
+
+      .banner-button-text
+        display none
+
+#page
+  p
+    a
+      &:not(.headerlink)
+        text-decoration none
+        border-bottom 2px dotted var(--sco-lighttext)
+        color var(--sco-fontcolor)
+        font-weight 700
+        padding 0 4px
+        border-radius 4px 4px 0 0
+
+      &:hover
+        color var(--sco-white)
+        border-radius 4px
+        background var(--sco-main)

package/source/css/_widgets/_aside/info.styl

@@ -177,6 +177,9 @@
       bottom 0
       align-items center
 
+      a.author-info__bottom-group-left:hover
+        opacity .8
+
     .card-info-data
       display table
       margin .7rem 0 .2rem

package/source/css/_widgets/_comment/twikoo.styl

@@ -151,7 +151,7 @@
       top -132px
 
   .tk-row-actions-start
-    top -210px
+    top -170px
 
 .tk-comments-title
   position absolute

package/source/js/covercolor/local.js

@@ -3,10 +3,10 @@ const coverColor = () => {
     if (path) {
         localColor(path);
     } else {
-        document.documentElement.style.setProperty('--sco-main', 'let(--sco-theme)');
-        document.documentElement.style.setProperty('--sco-main-op', 'let(--sco-theme-op)');
-        document.documentElement.style.setProperty('--sco-main-op-deep', 'let(--sco-theme-op-deep)');
-        document.documentElement.style.setProperty('--sco-main-none', 'let(--sco-theme-none)');
+        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()
     }
 }
@@ -119,22 +119,22 @@ function setThemeColors(value, r = null, g = null, b = null) {
         if (r && g && b) {
             let 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', 'let(--sco-white)');
+                cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
             }
 
             for (let i = 0; i < authorInfo.length; i++) {
-                authorInfo[i].style.setProperty('background', 'let(--sco-white-op)');
-                authorInfo[i].style.setProperty('color', 'let(--sco-white)');
+                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', 'let(--sco-theme)');
-        document.documentElement.style.setProperty('--sco-main-op', 'let(--sco-theme-op)');
-        document.documentElement.style.setProperty('--sco-main-op-deep', 'let(--sco-theme-op-deep)');
-        document.documentElement.style.setProperty('--sco-main-none', 'let(--sco-theme-none)');
+        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();
     }
 }

package/source/js/main.js

@@ -64,37 +64,45 @@ const scrollFn = function () {
     }
 }
 
+let ticking = false;
+
 const percent = () => {
-    let scrollTop = document.documentElement.scrollTop || window.pageYOffset
-    let totalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
-    let scrollPercent = Math.round(scrollTop / totalHeight * 100)
-    let percentElement = document.querySelector("#percent")
-    let viewportBottom = window.scrollY + document.documentElement.clientHeight
-    let remainingScroll = totalHeight - scrollTop
-
-    if ((document.getElementById("post-comment") || document.getElementById("footer")).offsetTop < viewportBottom || scrollPercent > 90) {
-        document.querySelector("#nav-totop").classList.add("long")
-        percentElement.innerHTML = "返回顶部"
-    } else {
-        document.querySelector("#nav-totop").classList.remove("long")
-        if (scrollPercent >= 0) {
-            percentElement.innerHTML = scrollPercent + ""
-        }
-    }
+    if (!ticking) {
+        window.requestAnimationFrame(() => {
+            let scrollTop = document.documentElement.scrollTop || window.pageYOffset;
+            let totalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight;
+            let scrollPercent = Math.round(scrollTop / totalHeight * 100);
+            let percentElement = document.querySelector("#percent");
+            let viewportBottom = window.scrollY + document.documentElement.clientHeight;
+            let remainingScroll = totalHeight - scrollTop;
+
+            if ((document.getElementById("post-comment") || document.getElementById("footer")).offsetTop < viewportBottom || scrollPercent > 90) {
+                document.querySelector("#nav-totop").classList.add("long");
+                percentElement.innerHTML = "返回顶部";
+            } else {
+                document.querySelector("#nav-totop").classList.remove("long");
+                if (scrollPercent >= 0) {
+                    percentElement.innerHTML = scrollPercent + "";
+                }
+            }
 
-    let elementsToHide = document.querySelectorAll(".needEndHide")
-    if (remainingScroll < 100) {
-        elementsToHide.forEach(function (element) {
-            element.classList.add("hide")
-        })
-    } else {
-        elementsToHide.forEach(function (element) {
-            element.classList.remove("hide")
-        })
+            let elementsToHide = document.querySelectorAll(".needEndHide");
+            if (remainingScroll < 100) {
+                elementsToHide.forEach(function (element) {
+                    element.classList.add("hide");
+                });
+            } else {
+                elementsToHide.forEach(function (element) {
+                    element.classList.remove("hide");
+                });
+            }
+            ticking = false;
+        });
+        ticking = true;
     }
+};
 
-    window.onscroll = percent
-}
+window.onscroll = percent;
 
 
 const showTodayCard = () => {
@@ -109,10 +117,15 @@ const showTodayCard = () => {
 }
 
 const changeTimeFormat = () => {
-    const timeElements = document.getElementsByTagName("time"), lang = GLOBAL_CONFIG.lang.time
-    for (let i = 0; i < timeElements.length; i++) {
-        const datetime = timeElements[i].getAttribute("datetime"), timeObj = new Date(datetime),
-            daysDiff = utils.timeDiff(timeObj, new Date())
+    const timeElements = Array.from(document.getElementsByTagName("time"));
+    const lang = GLOBAL_CONFIG.lang.time;
+    const currentDate = new Date();
+
+    timeElements.forEach(timeElement => {
+        const datetime = timeElement.getAttribute("datetime");
+        const timeObj = new Date(datetime);
+        const daysDiff = utils.timeDiff(timeObj, currentDate);
+
         let timeString;
         if (daysDiff === 0) {
             timeString = lang.recent;
@@ -121,16 +134,16 @@ const changeTimeFormat = () => {
         } else if (daysDiff === 2) {
             timeString = lang.berforeyesterday;
         } else if (daysDiff <= 7) {
-            timeString = daysDiff + lang.daybefore;
+            timeString = `${daysDiff}${lang.daybefore}`;
         } else {
-            if (timeObj.getFullYear() !== new Date().getFullYear()) {
-                timeString = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/" + timeObj.getDate();
+            if (timeObj.getFullYear() !== currentDate.getFullYear()) {
+                timeString = `${timeObj.getFullYear()}/${timeObj.getMonth() + 1}/${timeObj.getDate()}`;
             } else {
-                timeString = (timeObj.getMonth() + 1) + "/" + timeObj.getDate();
+                timeString = `${timeObj.getMonth() + 1}/${timeObj.getDate()}`;
             }
         }
-        timeElements[i].textContent = timeString;
-    }
+        timeElement.textContent = timeString;
+    });
 }
 
 const initObserver = () => {
@@ -281,7 +294,7 @@ let sco = {
         htmlClassList.toggle("hide-aside");
         htmlClassList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on");
     },
-    switchKeyboard: function() {
+    switchKeyboard: function () {
         sco_keyboards = !sco_keyboards;
         const consoleKeyboard = document.querySelector("#consoleKeyboard");
         if (sco_keyboards) {
@@ -323,37 +336,31 @@ let sco = {
             GLOBAL_CONFIG.rightside && (document.querySelector(".menu-darkmode-text").textContent = "深色模式");
         }
     },
-    hideTodayCard: function () {
-        document.getElementById('todayCard').classList.add('hide')
-    },
-    toTop: function () {
-        utils.scrollToDest(0)
-    },
+    hideTodayCard: () => document.getElementById('todayCard').classList.add('hide'),
+    toTop: () => utils.scrollToDest(0),
+
     showConsole: function () {
         let el = document.getElementById('console')
-        if (!el.classList.contains('show')) {
+        if (el && !el.classList.contains('show')) {
             el.classList.add('show')
         }
     },
     hideConsole: function () {
         const el = document.getElementById('console')
-        if (el.classList.contains('show')) {
-            el.classList.remove('show')
-        }
+        el && el.classList.remove('show')
     },
     reflashEssayWaterFall: function () {
-        if (document.getElementById('waterfall')) {
+        const el = document.getElementById('waterfall')
+        el && (() => {
             setTimeout(function () {
                 waterfall('#waterfall');
-                document.getElementById("waterfall").classList.add('show');
+                el.classList.add('show');
             }, 500);
-        }
+        })();
     },
     addRuntime: function () {
         let el = document.getElementById('runtimeshow')
-        if (el && GLOBAL_CONFIG.runtime) {
-            el.innerText = utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) + GLOBAL_CONFIG.lang.time.runtime
-        }
+        el && GLOBAL_CONFIG.runtime && (el.innerText = utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) + GLOBAL_CONFIG.lang.time.runtime)
     },
     toTalk: function (txt) {
         const inputs = ["#wl-edit", ".el-textarea__inner"]
@@ -832,5 +839,6 @@ document.addEventListener('DOMContentLoaded', function () {
 })
 
 window.onkeydown = function (e) {
-    123 === e.keyCode && utils.snackbarShow("开发者模式已打开，请遵循GPL协议", !1, 3e3)
+    (123 === e.keyCode || (17 === e.ctrlKey && 16 === e.shiftKey && 67 === e.keyCode)) && utils.snackbarShow("开发者模式已打开，请遵循GPL协议", !1, 3e3);
+    (27 === e.keyCode) && sco.hideConsole();
 }