作者卡片新加样式，文章分享按钮可关闭

settings.yaml

@@ -464,7 +464,32 @@ spec:
             profileName:
             profileDesc:
             socialMedia:
+            profileStyle:
+            desc:
+            stickerImg:
           children:
+            - $formkit: select
+              name: profileStyle
+              id: profileStyle
+              key: profileStyle
+              label: 样式
+              value: default
+              options:
+                - value: default
+                  label: 默认
+                - value: one
+                  label: 样式一
+            - $formkit: attachment
+              name: stickerImg
+              if: $get(profileStyle).value == 'one'
+              label: 贴纸
+              value: https://0206.ink/upload/omxo3N22290781690363822143.png
+              placeholder: 请输入图片地址
+            - $formkit: text
+              if: $get(profileStyle).value == 'one'
+              name: desc
+              value: "分享设计与科技生活"
+              label: 卡片名称下面的描述
             - $formkit: text
               name: helloText
               label: 作者打招呼
@@ -1063,6 +1088,41 @@ spec:
               label: 运营模式与责任地址
               placeholder: 请输入运营模式与责任地址
               value: /rss
+        - $formkit: group
+          name: share_right
+          label: 分享按钮
+          value:
+            mobile_edit:
+            weibo_edit:
+            copyurl_edit:
+          children:
+            - $formkit: radio
+              name: mobile_edit
+              help: 启用分享手机访问二维码
+              value: true
+              options:
+                - label: 启用
+                  value: true
+                - label: 禁用
+                  value: false
+            - $formkit: radio
+              name: weibo_edit
+              help: 启用分享到微博
+              value: true
+              options:
+                - label: 启用
+                  value: true
+                - label: 禁用
+                  value: false
+            - $formkit: radio
+              name: copyurl_edit
+              help: 启用复制链接
+              value: true
+              options:
+                - label: 启用
+                  value: true
+                - label: 禁用
+                  value: false
         - $formkit: group
           name: copyrights
           label: 版权声明

templates/assets/css/post-copyright-one.css

@@ -305,3 +305,13 @@ img.post-copyright__author_img_front {
     background:var(--heo-card-bg);
 }
 
+.post-tools .post-tools-left .rewardLeftButton,.post-tools .post-tools-left .shareRight {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    margin: 10px
+}
+

templates/assets/zhheo/blogex.js

@@ -223,6 +223,8 @@ function showcopy() {
 // 早上好问好
 // 获取时间
 var getTimeState = () => {
+
+    if (GLOBAL_CONFIG.profileStyle == 'default') {
         // 获取当前时间
         var timeNow = new Date();
         // 获取当前小时
@@ -245,6 +247,16 @@ var getTimeState = () => {
         //    console.log(`text >>>>`, text);
         // 返回当前时间段对应的状态
         return text;
+
+    }
+
+    if (GLOBAL_CONFIG.profileStyle == 'one') {
+        var e = (new Date).getHours()
+            , t = "";
+        return e >= 0 && e <= 5 ? t = "睡个好觉，保证精力充沛" : e > 5 && e <= 10 ? t = "一日之计在于晨" : e > 10 && e <= 14 ? t = "吃饱了才有力气干活" : e > 14 && e <= 18 ? t = "集中精力，攻克难关" : e > 18 && e <= 24 && (t = "不要太劳累了，早睡更健康"),
+            t
+    }
+
 };
 
 function fly_to_top() {

templates/assets/zhheo/zhheoblog.css

@@ -2098,24 +2098,14 @@ blockquote footer cite::before {
     }
 }
 
-#aside-content .card-info img {
+
-    width: 28px;
-    right: 24px;
-    top: 20px;
-    border-radius: 500px;
-    transition: all 0.5s ease 0s;
-    position: absolute;
-}
 
 .author-info__top-group {
     display: flex;
     height: 28px;
 }
 
-#aside-content .card-info .author-info__name {
+
-    font-weight: 500;
-    font-size: 1.57em;
-}
 
 #aside-content .card-info .author-info__description {
     margin-top: -0.3rem;
@@ -10230,15 +10220,6 @@ div#author-info__sayhi:hover {
     color: var(--heo-fontcolor);
 }
 
-#aside-content .card-info .author-info__name {
-    text-align: left;
-    font-weight: bold;
-    color: var(--heo-white);
-    font-size: 28px;
-    line-height: 1.1;
-    margin-top: 0.8rem;
-    margin-bottom: 0.4rem;
-}
 
 /* 作者卡片背景 */
 #aside-content > .card-widget:first-child {
@@ -10417,62 +10398,7 @@ div#author-info__sayhi:hover {
     }
 }
 
-/* 社交按钮 */
-#aside-content .card-info #card-info-btn {
-    display: none;
-}
 
-#aside-content .card-info .card-info-social-icons {
-    margin: 0;
-    padding-top: 10px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
-    cursor: pointer;
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-}
-
-#aside-content .card-info .card-info-social-icons .social-icon {
-    margin: 0;
-    margin-right: 8px;
-}
-
-#aside-content .card-info .card-info-social-icons i {
-    background: var(--heo-white-op);
-    color: var(--heo-white);
-    font-size: 1.2rem;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-}
-
-#aside-content .card-info .card-info-social-icons i:hover {
-    background: var(--heo-secondbg);
-    transform: scale(0.97);
-    color: var(--heo-main);
-    box-shadow: none;
-}
-
-#aside-content .card-info .banner-button {
-    height: 40px;
-    width: 124px;
-    border-radius: 20px;
-    justify-content: center;
-}
-
-@media screen and (min-width: 1300px) {
-    #aside-content .card-info .card-info-social-icons i {
-        color: var(--heo-white);
-    }
-
-    [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
-        color: var(--heo-white);
-    }
-}
 
 #aside-content .card-info .card-info-data > .card-info-data-item:hover {
     background: var(--heo-post-blockquote-bg);

templates/modules/head.html

@@ -201,6 +201,7 @@
             isMusic: [[${ htmlType == 'music'}]],
             helloText: [[${#strings.listSplit(theme.config.sidebar.profile.helloText, ',')}]],
             assetsLink: [[${assets_link}]],
+            profileStyle: [[${theme.config.sidebar.profile.profileStyle}]],
             source: {
                 links:{
                     randomfriendurl: [[${theme.config.link.randomfriendurl}]],

templates/modules/post/copyright/copyright-default.html

@@ -42,7 +42,7 @@
             </div>
 
             <!-- 分享 -->
-            <div class="share-link mobile">
+            <div class="share-link mobile" th:if="${theme.config.post.share_right.mobile_edit}">
                 <div class="share-qrcode">
                     <div class="share-button" title="使用手机访问这篇文章"><i class="iconfont icon-qrcode"></i>
                     </div>
@@ -54,12 +54,12 @@
                     </div>
                 </div>
             </div>
-            <div class="share-link weibo">
+            <div class="share-link weibo" th:if="${theme.config.post.share_right.weibo_edit}">
                 <a class="share-button" rel="noopener external nofollow noreferrer noopener" target="_blank"
                    th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}" title="分享到微博">
                     <i class="iconfont icon-weibo" style="font-size:22px"></i></a>
             </div>
-            <div class="share-link copyurl">
+            <div class="share-link copyurl" th:if="${theme.config.post.share_right.copyurl_edit}">
                 <div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
                         class="iconfont icon-link"></i></div>
             </div>

templates/modules/post/copyright/copyright-one.html

@@ -7,36 +7,33 @@
         <div class="post-copyright__author_group"><a class="post-copyright__author_img" href="/about"
                                                      data-pjax-state="">
             <img class="post-copyright__author_img_back entered loading"
-                 th:src="@{${#strings.isEmpty(site.logo) ?  assets_link + '/images/hao-logo.jpg' : site.logo}}"
+                 th:src="@{${#strings.isEmpty(site.logo) ?  assets_link + '/images/hao-logo.jpg' : site.logo}}"></a>
-            ></a>
             <div class="post-copyright__author_name">[[${site.title}]]</div>
             <div class="post-copyright__author_desc">[[${theme.config.post.desc}]]</div>
         </div>
         <div class="post-tools" id="post-tools">
             <div class="post-tools-left">
+                <div class="rewardLeftButton" th:if="${theme.config.aboutReward.reward.enable_reward_wz || theme.config.post.post_edit.enable_post_edit}">
                     <div th:if="${theme.config.aboutReward.reward.enable_reward_wz}" class="post-reward"
                          onclick="AddRewardMask()">
-                    <div class="reward-button button--animated" title="打赏作者"><i
+                        <div class="reward-button button--animated" title="打赏作者"><i class="fas fa-hamburger"></i> 打赏作者
-                            class="fas fa-hamburger"></i> 打赏作者</div>
+                        </div>
                         <div class="reward-main">
                             <ul class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span>
                                 <ul class="reward-group">
-                                <li class="reward-item"><a
+                                    <li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.wxPay}}"
-                                        th:href="@{${theme.config.aboutReward.reward.wxPay}}"
                                                                target="_blank">
                                         <img alt="微信" class="post-qr-code-img"
                                              th:src="${theme.config.aboutReward.reward.wxPay}"></a>
                                         <div class="post-qr-code-desc">微信</div>
                                     </li>
-                                <li class="reward-item"><a
+                                    <li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.alipay}}"
-                                        th:href="@{${theme.config.aboutReward.reward.alipay}}"
                                                                target="_blank"><img alt="支付宝" class="post-qr-code-img"
                                                                                     th:src="${theme.config.aboutReward.reward.alipay}"></a>
                                         <div class="post-qr-code-desc">支付宝</div>
                                     </li>
                                 </ul>
-                            <a class="reward-main-btn"
+                                <a class="reward-main-btn" th:href="@{${theme.config.aboutReward.reward.reward_md_url}}"
-                               th:href="@{${theme.config.aboutReward.reward.reward_md_url}}"
                                    target="_blank">
                                     <div class="reward-text">赞赏者名单</div>
                                     <div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div>
@@ -48,10 +45,34 @@
                             class="reward-link-button" th:href="@{${theme.config.post.post_edit.post_edit_url}}"
                             data-pjax-state=""><i class="fas fa-seedling"></i>订阅</a></div>
                 </div>
+                <div class="shareRight"
+                     th:if="${theme.config.post.share_right.mobile_edit  || theme.config.post.share_right.weibo_edit || theme.config.post.share_right.copyurl_edit}">
+                    <div class="share-link mobile" th:if="${theme.config.post.share_right.mobile_edit}">
+                        <div class="share-qrcode">
+                            <div class="share-button" title="使用手机访问这篇文章"><i class="iconfont icon-qrcode"></i>
                             </div>
-        <div
+                            <div class="share-main">
-                th:if="${theme.config.post.copyrights.enable}"
+                                <div class="share-main-all">
-                class="post-copyright__notice">
+                                    <div id="qrcode"></div>
+                                    <div class="reward-dec">使用手机访问这篇文章</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="share-link weibo" th:if="${theme.config.post.share_right.weibo_edit}">
+                        <a class="share-button" rel="noopener external nofollow noreferrer noopener" target="_blank"
+                           th:href="'https://service.weibo.com/share/share.php?title=' + ${post.spec.title}"
+                           title="分享到微博">
+                            <i class="iconfont icon-weibo" style="font-size:22px"></i></a>
+                    </div>
+                    <div class="share-link copyurl" th:if="${theme.config.post.share_right.copyurl_edit}">
+                        <div class="share-button" id="post-share-url" onclick="rm.copyPageUrl()" title="复制链接"><i
+                                class="iconfont icon-link"></i></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div th:if="${theme.config.post.copyrights.enable}" class="post-copyright__notice">
             <span class="post-copyright-info" th:utext="${theme.config.post.copyrights.content}"></span>
         </div>
 

templates/modules/widgets/aside/friend-link.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<!-- 最新评论 -->
+<!-- 通讯录 -->
 <div class="card-widget card-friend-link" th:fragment="friend-link">
     <div class="item-headline"><i class="haofont hao-icon-tongxunlu07"
                                   style="font-size: 0.9rem;font-weight: 700;"></i><span>通讯录</span></div>

templates/modules/widgets/aside/profile.html

@@ -3,19 +3,21 @@
 <!-- 侧边栏自我介绍 -->
 
 <div class="card-widget card-info" th:fragment="profile">
+
+    <!-- 默认 -->
+    <th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'default')}">
         <!-- 描述信息 -->
         <div class="card-content">
             <div class="card-info-avatar is-center">
                 <div class="author-info__top-group">
-                <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是</div>
+                    <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
+                    </div>
                     <img class="avatar-img entered loaded"
                          th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
                 </div>
-            <div class="author-info__name"
+                <div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
-                 th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                      th:text="${site.title}"></div>
-            <div class="author-info__name"
+                <div class="author-info__name" th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
-                 th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                      th:text="${theme.config.sidebar.profile.profileName}"></div>
                 <div class="author-info__description" th:utext="${theme.config.sidebar.profile.profileDesc}">
 
@@ -35,13 +37,377 @@
              th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
              th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">
 
+            <a class="social-icon" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
+               th:href="${socialMedia.url}" th:title="${socialMedia.name}">
+                <i class="iconfont " th:classappend="${socialMedia.icon}"></i>
+            </a>
+        </div>
+
+        <style>
+            /* 社交按钮 */
+            #aside-content .card-info #card-info-btn {
+                display: none;
+            }
+
+            #aside-content .card-info .card-info-social-icons {
+                margin: 0;
+                padding-top: 10px;
+                display: flex;
+                justify-content: flex-start;
+                flex-direction: row;
+                flex-wrap: wrap;
+                cursor: pointer;
+                position: absolute;
+                bottom: 1rem;
+                left: 1rem;
+            }
+
+            #aside-content .card-info .card-info-social-icons .social-icon {
+                margin: 0;
+                margin-right: 8px;
+            }
+
+            #aside-content .card-info .card-info-social-icons i {
+                background: var(--heo-white-op);
+                color: var(--heo-white);
+                font-size: 1.2rem;
+                width: 40px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+            }
+
+            #aside-content .card-info .card-info-social-icons i:hover {
+                background: var(--heo-secondbg);
+                transform: scale(0.97);
+                color: var(--heo-main);
+                box-shadow: none;
+            }
+
+            #aside-content .card-info .banner-button {
+                height: 40px;
+                width: 124px;
+                border-radius: 20px;
+                justify-content: center;
+            }
+
+            @media screen and (min-width: 1300px) {
+                #aside-content .card-info .card-info-social-icons i {
+                    color: var(--heo-white);
+                }
+
+                [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
+                    color: var(--heo-white);
+                }
+            }
+
+            #aside-content .card-info img {
+                width: 28px;
+                right: 24px;
+                top: 20px;
+                border-radius: 500px;
+                transition: all 0.5s ease 0s;
+                position: absolute;
+            }
+
+            #aside-content .card-info .author-info__name {
+                font-weight: 500;
+                font-size: 1.57em;
+            }
+
+            #aside-content .card-info .author-info__name {
+                text-align: left;
+                font-weight: bold;
+                color: var(--heo-white);
+                font-size: 28px;
+                line-height: 1.1;
+                margin-top: 0.8rem;
+                margin-bottom: 0.4rem;
+            }
+        </style>
+
+    </th:block>
+
+
+    <!-- 样式一 -->
+    <th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'one')}">
+
+
+        <div class="card-content">
+            <div class="card-info-avatar is-center">
+                <div class="author-info__top-group">
+                    <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！
+                    </div>
+                </div>
+            </div>
+            <div class="avatar-img-group"><img class="avatar-img" alt="avatar"
+                                               th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
+                <div class="avatar-sticker"><img class="avatar-sticker-img" alt="avatar"
+                                                 th:src="@{${theme.config.sidebar.profile.stickerImg}}"></div>
+            </div>
+            <div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
+            </div>
+            <div class="author-info__bottom-group">
+                <a th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
+                   class="author-info__bottom-group-left" href="/about" data-pjax-state="">
+                    <div class="author-info__name">[[${theme.config.sidebar.profile.profileName}]]</div>
+                    <div class="author-info__desc">[[${theme.config.sidebar.profile.desc}]]</div>
+                </a>
+                <div class="card-info-social-icons is-center"
+                     th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
+                     th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">
                     <a class="social-icon" rel="external nofollow" target="_blank"
-           th:each="socialMedia : ${socialMedias}"
+                       th:each="socialMedia : ${socialMedias}" th:href="${socialMedia.url}"
-           th:href="${socialMedia.url}"
                        th:title="${socialMedia.name}">
                         <i class="iconfont " th:classappend="${socialMedia.icon}"></i>
                     </a>
                 </div>
+            </div>
+        </div>
+
+
+
+        <style>
+            .is-center {
+                text-align: center;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                flex-direction: row;
+                align-items: center
+            }
+
+            .card-info-avatar.is-center {
+                flex-direction: column;
+                display: flex;
+                align-items: flex-start
+            }
+
+            #aside-content .card-info img.avatar-img {
+                width: 118px;
+                right: 0;
+                top: 0;
+                border-radius: 500px;
+                position: absolute;
+                opacity: 1;
+                transition: .3s;
+                border: 5px solid var(--heo-white)
+            }
+
+            .author-info__top-group {
+                display: flex;
+                height: 28px;
+                width: 100%
+            }
+
+            .author-info__desc {
+                font-size: 12px;
+                color: var(--heo-white);
+                opacity: .6;
+                line-height: 1
+            }
+
+            .avatar-img-group {
+                width: 118px;
+                height: 118px;
+                right: calc(50% - 59px);
+                top: 90px;
+                border-radius: 500px;
+                position: absolute;
+                transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
+                transform-origin: bottom
+            }
+
+            #aside-content .card-info:hover .avatar-img-group {
+                opacity: 0;
+                transform: scale(0)
+            }
+
+            .author-info__bottom-group {
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                padding: 1.2rem;
+                width: 100%;
+                left: 0;
+                bottom: 0;
+                align-items: center
+            }
+
+            #aside-content .card-info .card-info-social-icons {
+                margin: 0;
+                display: flex;
+                justify-content: flex-start;
+                flex-direction: row;
+                flex-wrap: wrap;
+                cursor: pointer
+            }
+
+            #aside-content .card-info .card-info-social-icons i:hover {
+                transform: rotate(540deg);
+                background-color: #000;
+                cursor: pointer
+            }
+
+            #aside-content .card-info .card-info-social-icons .social-icon {
+                margin: 0;
+                margin-left: 8px
+            }
+
+            #aside-content .card-info .card-info-social-icons i {
+                background: var(--heo-white-op);
+                color: var(--heo-white);
+                font-size: 1rem;
+                width: 40px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center
+            }
+
+            #aside-content .card-info .card-info-social-icons i:hover {
+                background: var(--heo-secondbg);
+                transform: scale(1.1);
+                color: var(--heo-main);
+                box-shadow: none
+            }
+
+            #aside-content .card-info .banner-button {
+                height: 40px;
+                width: 118px;
+                border-radius: 20px;
+                justify-content: center
+            }
+
+            @media screen and (min-width: 1300px) {
+                #aside-content .card-info .card-info-social-icons i {
+                    color: var(--heo-white)
+                }
+
+                [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
+                    color: var(--heo-white)
+                }
+            }
+
+            .author-info__description_group {
+                position: absolute;
+                top: 50px;
+                width: 100%;
+                left: 0;
+                padding: 1.2rem;
+                opacity: 0;
+                transition: .3s
+            }
+
+            .card-widget:hover .author-info__description_group {
+                opacity: 1
+            }
+
+            .author-info__description2 {
+                line-height: 1.38;
+                margin: .3rem 0;
+                text-align: justify;
+                width: 100%;
+                z-index: 2;
+                color: rgba(255, 255, 255, .8)
+            }
+
+            .author-info__description2 b {
+                color: var(--heo-white)
+            }
+
+            div#author-info__sayhi {
+                text-align: center;
+                width: fit-content;
+                color: var(--heo-white);
+                background: var(--heo-white-op);
+                font-size: 12px;
+                margin-right: auto;
+                padding: 2px 8px;
+                border-radius: 12px;
+                cursor: pointer;
+                -webkit-user-select: none;
+                transition: .3s;
+                margin: auto;
+                min-width: 100px
+            }
+
+            div#author-info__sayhi:hover {
+                background: var(--heo-card-bg);
+                color: var(--heo-fontcolor);
+                transform: scale(1.1)
+            }
+
+            #aside-content .card-info .author-info__name {
+                text-align: left;
+                font-weight: 700;
+                color: var(--heo-white);
+                font-size: 20px;
+                line-height: 1;
+                margin-bottom: 5px
+            }
+
+            .author-info__desc {
+                font-size: 12px;
+                color: var(--heo-white);
+                opacity: .6;
+                line-height: 1
+            }
+
+            .author-info__description {
+                line-height: 1.38;
+                margin: .3rem 0;
+                text-align: justify;
+                color: rgba(255, 255, 255, .8)
+            }
+
+            .avatar-sticker {
+                position: absolute;
+                bottom: 2px;
+                right: 2px;
+                width: 33px;
+                height: 33px;
+                line-height: 34px;
+                z-index: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: .3s .2s;
+                transform: scale(1);
+                background: var(--heo-white);
+                border-radius: 50%
+            }
+
+            .avatar-sticker img {
+                width: 26px;
+                height: 26px
+            }
+
+            .card-widget:hover .avatar-sticker {
+                opacity: 0;
+                transform: scale(0)
+            }
+
+            .author-info__description b {
+                color: var(--heo-white);
+            }
+
+            #aside-content>.card-widget.card-info::before {
+                background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
+                background-size: 400%;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                content: '';
+                animation: gradient 15s ease infinite;
+            }
+        </style>
+
+
+    </th:block>
+
 </div>
 
 </html>