优化random-banner

anzhiyu-c · Aug 24, 2023 · 2545fd8 · 2545fd8
1 parent 833eb0b
commit 2545fd8
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 75 deletions.
diff --git a/layout/includes/top/top.pug b/layout/includes/top/top.pug
@@ -12,9 +12,9 @@ if home_top_config.enable
           include ../anzhiyu/tags-group-all.pug
 
           a#random-hover(href='javascript:toRandomPost()')
-            i.anzhiyufont.anzhiyu-icon-paper-plane(style='margin-left:10px')
-            div(style='margin-left:10px') 随便逛逛
-              i.anzhiyufont.anzhiyu-icon-arrow-right(style='margin-left:10px')
+            i.anzhiyufont.anzhiyu-icon-paper-plane
+            .bannerText 随便逛逛
+              i.anzhiyufont.anzhiyu-icon-arrow-right
         .categoryGroup
           each item in home_top_config.category
             .categoryItem(style=`box-shadow:${item.shadow}`)

diff --git a/source/css/_extra/home_top/random-banner.css b/source/css/_extra/home_top/random-banner.css
@@ -1,67 +0,0 @@
-#random-banner {
-  display: none;
-}
-@media screen and (min-width: 1200px) {
-  #random-banner:hover {
-    box-shadow: var(--anzhiyu-shadow-main);
-  }
-
-  #random-banner {
-    display: flex;
-    width: 100%;
-    height: 76%;
-    background: var(--heo-card-bg);
-    margin-bottom: 0.5rem;
-    border: var(--style-border);
-    border-radius: 12px;
-    overflow: hidden;
-    position: relative;
-    box-shadow: var(--heo-shadow-border);
-    flex-direction: column;
-    overflow: hidden;
-    transition: 0.3s;
-    will-change: transform;
-    animation: slide-in 0.6s 0.1s backwards;
-  }
-
-  #random-hover i {
-    font-size: 60px;
-  }
-
-  #random-hover {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background: var(--anzhiyu-theme);
-    color: var(--anzhiyu-white);
-    padding-left: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    opacity: 0;
-    transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
-    font-size: 60px;
-  }
-  #random-banner #skills-tags-group-all .tags-group-wrapper {
-    margin-top: 7rem;
-  }
-  #random-banner #skills-tags-group-all {
-    transform: rotate(-30deg);
-  }
-
-  #random-banner:hover #random-hover {
-    opacity: 1;
-    padding-left: 2rem;
-    background: var(--anzhiyu-theme-op-deep);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    transform: translateZ(0);
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    transition: 0.3s;
-    background-size: 200%;
-    cursor: pointer;
-  }
-}

diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
@@ -82,6 +82,8 @@
 
     .author-info-avatar 
       user-select: none
+      img
+        filter: blur(0) brightness(1);
       .author-status
         position: absolute;
         bottom: 2px;

diff --git a/source/css/_layout/home_top.styl b/source/css/_layout/home_top.styl
@@ -0,0 +1,59 @@
+#random-banner
+  display: none;
+  +minWidth1200()
+    display: flex;
+    width: 100%;
+    height: 76%;
+    background: var(--heo-card-bg);
+    margin-bottom: 0.5rem;
+    border: var(--style-border);
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: var(--heo-shadow-border);
+    flex-direction: column;
+    overflow: hidden;
+    transition: 0.3s;
+    will-change: transform;
+    animation: slide-in 0.6s 0.1s backwards;
+    &:hover
+      box-shadow: var(--anzhiyu-shadow-main);
+      #random-hover
+        opacity: 1;
+        padding-left: 2rem;
+        background: var(--anzhiyu-theme-op-deep);
+        backdrop-filter: blur(15px);
+        -webkit-backdrop-filter: blur(15px);
+        transform: translateZ(0);
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+        transition: 0.3s;
+        background-size: 200%;
+        cursor: pointer;
+    #skills-tags-group-all .tags-group-wrapper
+      margin-top: 7rem;
+    #skills-tags-group-all
+      transform: rotate(-30deg);
+    #random-hover
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background: var(--anzhiyu-theme);
+      color: var(--anzhiyu-white);
+      padding-left: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      opacity: 0;
+      transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
+      font-size: 60px;
+      .bannerText
+        display: flex
+        align-items: center
+      i
+        font-size: 80px;
+        margin-left: 10px;
+        line-height: 1;
+
diff --git a/source/js/main.js b/source/js/main.js
@@ -1670,6 +1670,10 @@ document.addEventListener("DOMContentLoaded", function () {
 
   window.refreshFn = function () {
     initAdjust();
+    themeColorMeta = document.querySelector('meta[name="theme-color"]');
+    pageHeaderEl = document.getElementById("page-header");
+    navMusicEl = document.getElementById("nav-music");
+    consoleEl = document.getElementById("console");
 
     if (GLOBAL_CONFIG_SITE.isPost) {
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice();
@@ -1741,11 +1745,6 @@ document.addEventListener("DOMContentLoaded", function () {
         addFriendLinksInFooter();
       }
     }, 200);
-
-    themeColorMeta = document.querySelector('meta[name="theme-color"]');
-    pageHeaderEl = document.getElementById("page-header");
-    navMusicEl = document.getElementById("nav-music");
-    consoleEl = document.getElementById("console");
   };
 
   refreshFn();