修改一些样式

can-dy-jack · Apr 18, 2022 · ae82d29 · ae82d29
1 parent 82f7b27
commit ae82d29
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -193,11 +193,9 @@ More details Read：[kartjim.cn/delicate](https://kartjim.cn/delicate/2021/11/12
 
 ## 开发计划
 
-- collapse展开式按钮文字变化？！
 - 标题打字机效果
-- 优化黑暗模式
-- 404页面
-- 文章分享功能
 - 永久链接问题
+- 文章分享功能
+- 404页面
 - 优化评论系统
-- 搜索功能
+- 完善搜索功能
diff --git a/layout/_partial/article-full.ejs b/layout/_partial/article-full.ejs
@@ -33,14 +33,24 @@
     <div class="blog-post-change">
         <div class="blog-post-pre">
             <% if (item.prev){ %>
-                <span class="blog-post-pre-icon">&#60;</span>
+                <span class="blog-post-pre-icon">
+                  <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+                    <path d="M561.92 832a47.36 47.36 0 0 0 0-64l-256-256 256-256a47.36 47.36 0 1 0-64-64l-288.64 288.64A50.56 50.56 0 0 0 192 512a47.36 47.36 0 0 0 14.08 33.28L494.72 832a47.36 47.36 0 0 0 67.2 0z"></path>
+                    <path d="M817.92 832a47.36 47.36 0 0 0 0-64.00000001l-256-255.99999999 256-255.99999999a47.36 47.36 0 1 0-64.00000001-64.00000001l-291.83999999 286.08A50.56 50.56 0 0 0 447.99999999 512a47.36 47.36 0 0 0 14.08000001 33.28L750.72 831.99999999a47.36 47.36 0 0 0 67.2 1e-8z"></path>
+                  </svg>
+                </span>
                 <a href="<%- url_for(item.prev.path) %>"> <%- item.prev.title %></a>
             <% } %>
         </div>
         <div class="blog-post-next">
             <% if (item.next){ %>
                 <a href="<%- url_for(item.next.path) %>"> <%- item.next.title %></a>
-                <span class="blog-post-next-icon">&#62;</span>
+                <span class="blog-post-next-icon">
+                  <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+                    <path d="M462.08 192a47.36 47.36 0 0 0 0 64l256 256-256 256a47.36 47.36 0 1 0 64 64l288.64-288.64A50.56 50.56 0 0 0 832 512a47.36 47.36 0 0 0-14.08-33.28L529.28 192a47.36 47.36 0 0 0-67.2 0z"></path>
+                    <path d="M206.08 192a47.36 47.36 0 0 0 0 64l256 256-256 256a47.36 47.36 0 1 0 64 64l291.84-286.08A50.56 50.56 0 0 0 576 512a47.36 47.36 0 0 0-14.08-33.28L273.28 192a47.36 47.36 0 0 0-67.2 0z"></path>
+                  </svg>
+                </span>
             <% } %>
         </div>
     </div>

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -6,7 +6,7 @@
     <meta name="author" content="<%- config.author %>">
 
     <link rel="icon" href="<%- config.root %><%- theme.titleLogo %>">
-    <title><%- config.title %><%- page.title %></title>
+    <title><%- page.title || config.title %></title>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- fancybox -->

diff --git a/layout/page.ejs b/layout/page.ejs
@@ -1,4 +1,4 @@
-<div class="blog-post">
+<div class="blog-post shadow-sm">
     <h2 class="blog-post-title">
         <%- page.title %>
     </h2>

diff --git a/source/css/blog.css b/source/css/blog.css
@@ -47,27 +47,39 @@ nav.navbar .nav-item .nav-link{
     position: relative;
     text-transform: capitalize;
 }
-nav.navbar ul li {
-    position: relative;
-}
-nav.navbar ul li::before{
-    content: '';
-    width: 100%;
-    height: 4rem;
-    position: absolute;
-    bottom: -0.5rem;
-    transition: all 0.25s ease;
-    transform: scaleY(0);
-    transform-origin: bottom;
-    background-color: #fafafa;
-}
-nav.navbar ul li:hover::before{
-    transform: scaleY(1);
+@media (min-width: 1000px){
+    nav.navbar ul li {
+        position: relative;
+    }
+    nav.navbar ul li::before{
+        content: '';
+        width: 100%;
+        height: 4rem;
+        position: absolute;
+        bottom: -0.5rem;
+        transition: all 0.25s ease;
+        transform: scaleY(0);
+        transform-origin: bottom;
+        background-color: #fafafa;
+    }
+    nav.navbar ul li:hover::before{
+        transform: scaleY(1);
+    }
+    nav.navbar .nav-item .dropdown-menu{
+        box-shadow: 0 10px 20px 8px rgba(0,0,0,.04);
+    }
 }
-nav.navbar .nav-item .dropdown-menu{
-    box-shadow: 0 10px 20px 8px rgba(0,0,0,.04);
+@media (max-width: 999px){
+    nav.navbar ul li {
+        text-align: center;
+    }
+    nav.navbar ul li:hover{
+        background-color: #f5f5f5;
+    }
+    nav.navbar .nav-item .dropdown-menu{
+        box-shadow: 0 4px 10px 5px rgba(0,0,0,.04);
+    }
 }
-
 .blog-header {
     padding: 20px;
     margin-bottom: 20px;
@@ -78,6 +90,7 @@ nav.navbar .nav-item .dropdown-menu{
 .blog-main {
     font-size: 18px;
     line-height: 1.5;
+    margin-bottom: 50px;
 }
 .blog-title {
     margin-top: 30px;
@@ -340,34 +353,17 @@ nav.navbar .nav-item .dropdown-menu{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin: 10px 0;
 }
-.blog-post-change .blog-post-pre,
-.blog-post-change .blog-post-next{
-    margin: 5px 0;
-    transition: all 0.2s linear;
-    cursor: pointer;
+.blog-post-change svg {
+    fill: #0090FF;
 }
-.blog-post-change .blog-post-pre:hover a,
-.blog-post-change .blog-post-next:hover a{
+.blog-post-change a{
     text-decoration: none;
-    cursor: pointer;
 }
-.blog-post-change .blog-post-pre a
-,.blog-post-change .blog-post-next a{
-    color: #7dbcff;
-}
-.blog-post-pre-icon,.blog-post-next-icon{
-    font-size: 20px;
-    font-weight: 900;
-    color: #7dbcff;
-}
-.blog-post-next:hover,
-.blog-post-pre:hover{
-    transform: scale(1.02);
-}
-.blog-post-next:active,
-.blog-post-pre:active{
-    transform: scale(0.99);
+.blog-post-change .blog-post-pre,
+.blog-post-change .blog-post-next{
+    cursor: pointer;
 }
 .tag-box h3{
     text-align: center;