pref: optimize fade-in-down-animation

This commit is contained in:
XPoet 2020-04-30 00:34:31 +08:00
parent 2406efdc5d
commit f23ac2d795
7 changed files with 73 additions and 59 deletions

View File

@ -1,10 +1,12 @@
<div class="about-container fade-in-down-animation"> <div class="fade-in-down-animation">
<div class="about-content markdown-body"> <div class="about-container">
<%- page.content %> <div class="about-content markdown-body">
</div> <%- page.content %>
<div class="about-comments"> </div>
<% if (page.comments) { %> <div class="about-comments">
<%- partial('_partial/comments/comment') %> <% if (page.comments) { %>
<% } %> <%- partial('_partial/comments/comment') %>
<% } %>
</div>
</div> </div>
</div> </div>

View File

@ -1,3 +1,5 @@
<div class="archive-container fade-in-down-animation"> <div class="fade-in-down-animation">
<%- partial('_partial/archive-list', {posts_new: site.posts}) %> <div class="archive-container ">
<%- partial('_partial/archive-list', {posts_new: site.posts}) %>
</div>
</div> </div>

View File

@ -1,41 +1,44 @@
<div class="article-content-container"> <div class="fade-in-down-animation">
<div class="article-content-container">
<div class="article-title"> <div class="article-title">
<h3><a class="title-hover-animation"><%= page.title %></a></h3> <h3><a class="title-hover-animation"><%= page.title %></a></h3>
</div> </div>
<div class="meta-info"> <div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %> <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div> </div>
<div class="article-content markdown-body"> <div class="article-content markdown-body">
<%- page.content %> <%- page.content %>
</div> </div>
<div class="article-nav"> <div class="article-nav">
<% if (page.prev) { %> <% if (page.prev) { %>
<div class="article-prev"> <div class="article-prev">
<a class="prev btn" rel="prev" <a class="prev btn" rel="prev"
href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %> href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
</a> </a>
</div> </div>
<% } %> <% } %>
<% if (page.next) { %> <% if (page.next) { %>
<div class="article-next"> <div class="article-next">
<a class="next btn" rel="next" <a class="next btn" rel="next"
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i> href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
</a> </a>
</div> </div>
<% } %> <% } %>
</div> </div>
<div class="comment-container"> <div class="comment-container">
<%- partial('_partial/comments/comment') %> <%- partial('_partial/comments/comment') %>
</div>
</div> </div>
</div> </div>
<% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %> <% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %>
<div class="article-toc-container fade-in-down-animation"> <div class="article-toc-container fade-in-down-animation">
<%- partial('_partial/sidebar-toc') %> <div class="article-toc">
<%- partial('_partial/sidebar-toc') %>
</div>
</div> </div>
<% } %> <% } %>

View File

@ -1,6 +1,8 @@
<div class="category-container fade-in-down-animation"> <div class="fade-in-down-animation">
<div class="category-name"> <div class="category-container">
<i class="fa fa-folder"></i> <%- __('category') %><%= page.category %> [<%= page.posts.length %>] <div class="category-name">
<i class="fa fa-folder"></i> <%- __('category') %><%= page.category %> [<%= page.posts.length %>]
</div>
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
</div> </div>
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
</div> </div>

View File

@ -1,4 +1,7 @@
<div class="tag-container fade-in-down-animation"> <div class="fade-in-down-animation">
<div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %><%= page.tag %> [<%= page.posts.length %>]</div> <div class="tag-container">
<%- partial('_partial/archive-list', {posts_new: page.posts}) %> <div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %><%= page.tag %> [<%= page.posts.length %>]
</div> </div>
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
</div>
</div>

View File

@ -43,7 +43,7 @@ $icon-size = 1.2em;
} }
.search-header { .search-header {
background: var(--border-color); background: var(--fourth-text-color);
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
display: flex; display: flex;

View File

@ -58,9 +58,6 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo
.article-toc-container { .article-toc-container {
position: fixed; position: fixed;
top: $header-height + $component-interspace; top: $header-height + $component-interspace;
background: var(--background-color);
max-width: 200px;
max-height: 600px;
if (hexo-config('side-tools.position') == left) { if (hexo-config('side-tools.position') == left) {
right: 30px; right: 30px;
@ -68,14 +65,19 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo
left: 30px; left: 30px;
} }
if (hexo-config('magic.enable') == true) { .article-toc {
magic-container(1.02, 1.02, 20px); max-width: 200px;
} else { max-height: 600px;
transition(); background: var(--background-color);
border: 1px solid var(--border-color);
padding: 20px;
}
if (hexo-config('magic.enable') == true) {
magic-container(1.02, 1.02, 20px);
} else {
transition();
border: 1px solid var(--border-color);
padding: 20px;
}
}
} }