style:redesign nav style

bigfa · Jan 1, 2025 · 2bea10b · 2bea10b
1 parent 81c17f9
commit 2bea10b
Show file tree

Hide file tree

Showing 15 changed files with 240 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -4,10 +4,18 @@
 
 Hera is a simple single column wordpress theme with perfect performace and elegance design.
 
-latest version : `0.0.14`
+latest version : `0.0.16`
 
 ## Changelog
 
+### 0.0.16
+
+- add mobile menu support
+
+### 0.0.15
+
+- redesign nav style
+
 ### 0.0.14
 
 - add image cdn support

diff --git a/README_CN.md b/README_CN.md
@@ -4,10 +4,18 @@
 
 本主题禁止各种修改作者链接打包重新发布的行为。
 
-最新版本 : `0.0.14`
+最新版本 : `0.0.16`
 
 ## 更新日志
 
+### 0.0.16
+
+- 增加移动端菜单
+
+### 0.0.15
+
+- 重新设计导航样式
+
 ### 0.0.14
 
 - 图片 CDN 支持

diff --git a/author.php b/author.php
@@ -28,7 +28,7 @@
     <?php endif; ?>
     <?php rewind_posts(); ?>
     <?php if (have_posts()) : ?>
-        <div class="posts">
+        <div class="block--list">
             <?php while (have_posts()) : the_post();
                 get_template_part('template-parts/content', get_post_format());
             endwhile; ?>

diff --git a/build/css/misc.css b/build/css/misc.css
diff --git a/build/js/ts.js b/build/js/ts.js
@@ -50,6 +50,18 @@ var heraBase = /** @class */ (function () {
                 });
             }
         }
+        if (document.querySelector('.menu--icon')) {
+            document.querySelector('.menu--icon').addEventListener('click', function () {
+                document.querySelector('.site--nav').classList.add('is-active');
+                document.querySelector('body').classList.add('menu--actived');
+            });
+        }
+        if (document.querySelector('.mask')) {
+            document.querySelector('.mask').addEventListener('touchstart', function () {
+                document.querySelector('.site--nav').classList.remove('is-active');
+                document.querySelector('body').classList.remove('menu--actived');
+            });
+        }
     }
     heraBase.prototype.getCookie = function (t) {
         if (0 < document.cookie.length) {

diff --git a/category.php b/category.php
@@ -22,7 +22,7 @@
         </div>
     </header>
     <?php if (have_posts()) : ?>
-        <div class="posts">
+        <div class="block--list">
             <?php while (have_posts()) : the_post();
                 get_template_part('template-parts/content', get_post_format());
             endwhile; ?>

diff --git a/header.php b/header.php
@@ -25,25 +25,38 @@
     <main class="layout">
         <div class="navbar">
             <div class="js-contentFixed">
-                <a href="<?php echo home_url(); ?>" class="avatar--wrapper">
-                    <img src="<?php echo ($heraSetting->get_setting('logo') ? $heraSetting->get_setting('logo') :  get_template_directory_uri() . '/build/images/logo.png'); ?>" alt="<?php bloginfo('name'); ?>" class="avatar">
-                </a>
-                <h1 class="site--title"><?php if ($heraSetting->get_setting('sitename')) {
-                                            echo $heraSetting->get_setting('sitename');
-                                        } else {
-                                            bloginfo('name');
-                                        } ?></h1>
-                <div class="site--description"><?php if ($heraSetting->get_setting('sitedescription')) {
-                                                    echo $heraSetting->get_setting('sitedescription');
+                <svg class="menu--icon" width="1em" height="1em" viewBox="0 0 24 14" fill="currentColor" aria-hidden="true">
+                    <line x1="24" y1="1" y2="1" stroke="currentColor" stroke-width="2"></line>
+                    <line x1="24" y1="7" x2="4" y2="7" stroke="currentColor" stroke-width="2"></line>
+                    <line x1="24" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2"></line>
+                </svg>
+                <div class="site--info">
+                    <a href="<?php echo home_url(); ?>" class="avatar--wrapper">
+                        <img src="<?php echo ($heraSetting->get_setting('logo') ? $heraSetting->get_setting('logo') :  get_template_directory_uri() . '/build/images/logo.png'); ?>" alt="<?php bloginfo('name'); ?>" class="avatar">
+                    </a>
+                    <div class="site--info__content">
+                        <h1 class="site--title"><?php if ($heraSetting->get_setting('sitename')) {
+                                                    echo $heraSetting->get_setting('sitename');
                                                 } else {
-                                                    bloginfo('description');
-                                                } ?></div>
-                <?php wp_nav_menu(array('theme_location' => 'hera', 'menu_class' => 'widget--links', 'container' => 'ul', 'fallback_cb' => 'link_to_menu_editor')); ?>
+                                                    bloginfo('name');
+                                                } ?></h1>
+                        <div class="site--description"><?php if ($heraSetting->get_setting('sitedescription')) {
+                                                            echo $heraSetting->get_setting('sitedescription');
+                                                        } else {
+                                                            bloginfo('description');
+                                                        } ?></div>
+                    </div>
+                </div>
+                <nav class="site--nav">
+                    <?php wp_nav_menu(array('theme_location' => 'hera', 'menu_class' => 'widget--links', 'container' => 'ul', 'fallback_cb' => 'link_to_menu_editor')); ?>
+                </nav>
+
                 <?php if ($heraSetting->get_setting('footer_sns')) : ?>
                     <div class="site--footer__sns">
                         <?php get_template_part('template-parts/sns'); ?>
                     </div>
                 <?php endif; ?>
             </div>
         </div>
+        <div class="mask"></div>
         <div class="content">
diff --git a/scss/base/_layout.scss b/scss/base/_layout.scss
@@ -16,7 +16,8 @@
     background-color: #fff;
     margin: 18px;
     border-radius: 12px;
-    box-shadow: -1px 0 1px -2px rgba(0, 0, 0, 0.9);
+    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.02);
+    // border: 1px solid var(--hera-border-color-light);
 }
 
 .post--list {

diff --git a/scss/components/_footer.scss b/scss/components/_footer.scss
@@ -58,36 +58,6 @@
     }
 }
 
-.footer--bar {
-    padding: 0 40px;
-    padding-top: 30px;
-
-    .widget-card-content {
-        font-size: 24px;
-        font-weight: bold;
-        line-height: 1.2;
-    }
-
-    .widget-card-description {
-        color: var(--hera-text-gray);
-        font-size: 18px;
-    }
-}
-
-@media (max-width: 414px) {
-    .footer--bar {
-        padding: 0 0px;
-
-        .widget-card-content {
-            font-size: 18px;
-        }
-
-        .widget-card-description {
-            font-size: 14px;
-        }
-    }
-}
-
 .back {
     display: flex;
     justify-content: center;
@@ -205,3 +175,12 @@
         }
     }
 }
+
+@media screen and (max-width: 720px) {
+    .site--footer {
+        &__sns {
+            padding-bottom: 20px;
+            margin-top: 5px;
+        }
+    }
+}
diff --git a/scss/components/_header.scss b/scss/components/_header.scss
@@ -277,6 +277,10 @@
     }
 }
 
+.menu--icon {
+    display: none;
+}
+
 .search--area {
     display: flex;
     align-items: center;
@@ -298,4 +302,88 @@
             // max-width: 100%;
         }
     }
+
+    .widget--links {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .js-contentFixed {
+        position: static;
+    }
+    .menu--actived {
+        overflow: hidden;
+        .mask {
+            position: fixed;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 500;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            top: 0;
+        }
+    }
+
+    .site--nav {
+        z-index: 1000;
+        display: flex;
+        box-sizing: border-box;
+        padding: 20px;
+        border-left: 1px solid var(--main-border-color);
+        flex-direction: column;
+        line-height: 1.3;
+        justify-content: flex-start;
+        align-items: flex-start;
+        font-size: 16px;
+        position: relative;
+        background-color: #fff;
+        transform: translate3d(105%, 0, 0);
+        &.is-active {
+            transition: 0.5s;
+            transform: translate3d(0, 0, 0);
+        }
+        a {
+            padding: 5px 0;
+            margin: 0 0 10px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .text {
+                align-self: flex-start;
+                display: flex;
+                width: 100%;
+                align-items: center;
+                svg {
+                    margin-left: auto;
+                }
+            }
+            //display: none;
+        }
+        //  display: none;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        width: 75%;
+        right: 0;
+        background-color: #fff;
+        overflow-y: auto;
+    }
+
+    .site--info {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding-top: 15px;
+    }
+
+    .site--description {
+        display: none;
+    }
+
+    .menu--icon {
+        position: fixed;
+        right: 20px;
+        top: 20px;
+        display: block;
+    }
 }
diff --git a/scss/components/_navigation.scss b/scss/components/_navigation.scss
@@ -1,12 +1,40 @@
 .nav-links {
-    padding: 20px 0;
+    padding: 25px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     .page-numbers {
-        font-size: 18px;
         color: var(--hera-text-gray);
-        margin-right: 5px;
+        margin: 0 5px;
+        height: 32px;
+        width: 32px;
+        border-radius: 100%;
+        border: 1px solid var(--hera-border-color);
+        text-align: center;
+        line-height: 32px;
+        font-size: 14px;
+        &.dots {
+            border: 0;
+            &:hover {
+                background-color: transparent;
+                color: var(--hera-text-gray);
+            }
+        }
         &.current,
         &:hover {
-            color: var(--hera-hover-color);
+            color: #fff;
+            background-color: #000;
+            border-color: #000;
+        }
+    }
+
+    &__comment {
+        .page-numbers {
+            font-size: 12px;
+            width: 28px;
+            height: 28px;
+            line-height: 28px;
         }
     }
 }

diff --git a/scss/templates/_article.scss b/scss/templates/_article.scss
@@ -32,7 +32,7 @@
 
     &--meta {
         font-size: 14px;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--hera-text-gray);
         line-height: 1.6;
         display: flex;
         align-items: center;
@@ -41,7 +41,7 @@
             display: flex;
             align-items: center;
             margin-right: 10px;
-            color: #242424;
+            color: var(--hera-text-color);
             &:hover {
                 text-decoration: underline;
             }

diff --git a/scss/templates/_term.scss b/scss/templates/_term.scss
@@ -214,11 +214,42 @@
         // padding-right: 3.5%;
 
         &--title {
-            font-size: 20px;
+            font-size: 18px;
         }
 
         &--description {
-            font-size: 16px;
+            font-size: 12px;
+            line-height: 1.5;
+        }
+
+        &--image {
+            height: 48px;
+            width: 48px;
+        }
+
+        &--header {
+            padding-bottom: 15px;
+
+            & + .block--list {
+                padding-top: 5px;
+            }
+
+            .author--avatar {
+                width: 48px;
+                height: 48px;
+                margin-right: 8px;
+            }
+
+            .author--bio {
+                h3 {
+                    font-size: 18px;
+                    margin-bottom: 3px;
+                }
+
+                p {
+                    font-size: 12px;
+                }
+            }
         }
     }
 }