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="about-content markdown-body">
<%- page.content %>
</div>
<div class="about-comments">
<% if (page.comments) { %>
<%- partial('_partial/comments/comment') %>
<% } %>
<div class="fade-in-down-animation">
<div class="about-container">
<div class="about-content markdown-body">
<%- page.content %>
</div>
<div class="about-comments">
<% if (page.comments) { %>
<%- partial('_partial/comments/comment') %>
<% } %>
</div>
</div>
</div>

View File

@ -1,3 +1,5 @@
<div class="archive-container fade-in-down-animation">
<%- partial('_partial/archive-list', {posts_new: site.posts}) %>
<div class="fade-in-down-animation">
<div class="archive-container ">
<%- partial('_partial/archive-list', {posts_new: site.posts}) %>
</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">
<h3><a class="title-hover-animation"><%= page.title %></a></h3>
</div>
<div class="article-title">
<h3><a class="title-hover-animation"><%= page.title %></a></h3>
</div>
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div>
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div>
<div class="article-content markdown-body">
<%- page.content %>
</div>
<div class="article-content markdown-body">
<%- page.content %>
</div>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev btn" rel="prev"
href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next btn" rel="next"
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
</a>
</div>
<% } %>
</div>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev btn" rel="prev"
href="<%= url_for(page.prev.path) %>"><i class="fa fa-chevron-left"></i> <%= page.prev.title %>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next btn" rel="next"
href="<%= url_for(page.next.path) %>"><%= page.next.title %> <i class="fa fa-chevron-right"></i>
</a>
</div>
<% } %>
</div>
<div class="comment-container">
<%- partial('_partial/comments/comment') %>
<div class="comment-container">
<%- partial('_partial/comments/comment') %>
</div>
</div>
</div>
<% 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">
<%- partial('_partial/sidebar-toc') %>
<div class="article-toc">
<%- partial('_partial/sidebar-toc') %>
</div>
</div>
<% } %>

View File

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

View File

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

View File

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

View File

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