diff --git a/layout/_partial/first-screen.ejs b/layout/_partial/first-screen.ejs index 3d0772b..c9980e6 100644 --- a/layout/_partial/first-screen.ejs +++ b/layout/_partial/first-screen.ejs @@ -1,5 +1,5 @@ -
-
+
+
<%= theme.base_info.description || config.description %>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 7b41aa2..02dcdad 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -42,25 +42,29 @@
<% if (page.prev) { %>
-
<% } %> <% if (page.next) { %>
-
<% } %> diff --git a/layout/home-content.ejs b/layout/home-content.ejs index 82d498a..b492216 100644 --- a/layout/home-content.ejs +++ b/layout/home-content.ejs @@ -3,7 +3,7 @@ <% page.posts.forEach(post => { %>
  • - <% if (post.sticky && 0) { %> + <% if (post.sticky) { %> <% } %> diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index 0f91085..1c5d225 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/source/css/layout/_partial/archive-list.styl @@ -8,7 +8,7 @@ $article-date-font-size = 1em; .archive-list-container { .archive-item { - margin-bottom: 58px; + margin-bottom: $component-interspace; &:last-child { margin-bottom: 0; diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl index 56a127c..2ef7390 100644 --- a/source/css/layout/_partial/comment/comment.styl +++ b/source/css/layout/_partial/comment/comment.styl @@ -11,11 +11,11 @@ if (hexo-config('comment.valine.enable') && hexo-config('comment.gitalk.enable') } .comments-container { - + display: inline-block; margin-top: $component-interspace; #comment-anchor { width: 100%; - height: $component-interspace; + height: 10px; } } diff --git a/source/css/layout/_partial/empty-page.styl b/source/css/layout/_partial/empty-page.styl index 0b80c8f..28c9959 100644 --- a/source/css/layout/_partial/empty-page.styl +++ b/source/css/layout/_partial/empty-page.styl @@ -3,13 +3,7 @@ .empty-page-container { - background: var(--background-color); - - ils-container(1.005, 1.01, 30px); - - +ils-tablet() { - ils-container(1.001, 1.005, 20px); - } + ils-container(1.005, 1.01, 30px, true); .empty-page-content { @@ -20,15 +14,5 @@ } } - - margin-bottom: $component-interspace; - - +ils-tablet() { - margin-bottom: $component-interspace * 0.9; - } - - +ils-mobile() { - margin-bottom: $component-interspace * 0.8; - } } } diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl index 118af90..ec60e0c 100644 --- a/source/css/layout/_partial/first-screen.styl +++ b/source/css/layout/_partial/first-screen.styl @@ -2,14 +2,14 @@ position: relative; box-sizing: border-box; width: 100%; - display: flex; - justify-content: center; - align-items: center; overflow: hidden; background: url("/images/bg.svg") center center / cover no-repeat; .content { + position: relative; padding: 30px; + width: 80%; + height : 80%; .description { font-weight: bold; @@ -19,7 +19,7 @@ .social-icon-list { position: absolute; - bottom: $component-interspace + 10px; + bottom: $component-interspace; font-size: 26px; left: 50%; transform: translateX(-50%); diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl index 9a1886d..b225a17 100644 --- a/source/css/layout/_partial/tagcloud.styl +++ b/source/css/layout/_partial/tagcloud.styl @@ -2,9 +2,7 @@ .tagcloud-container { - background: var(--background-color); - - ils-container(1.005, 1.01, 30px); + ils-container(1.005, 1.01, 30px, true); .tagcloud-content { diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl index 3ae56f6..681edbb 100644 --- a/source/css/layout/_partial/toc.styl +++ b/source/css/layout/_partial/toc.styl @@ -4,10 +4,8 @@ .post-toc-wrap { width: 100%; - height: 100%; font-size: 0.92em; box-sizing: border-box; - background: var(--background-color); .post-toc { diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 1f031cb..ceb3d2e 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -2,12 +2,7 @@ @require "./common/magic-theme.styl"; .archive-container { - background: var(--background-color); - ils-container(1.005, 1.01, 30px); - - +ils-tablet() { - ils-container(1.001, 1.005, 20px); - } + ils-container(1.005, 1.01, 30px, true); } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index f9159ae..0986893 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -2,10 +2,12 @@ @require 'common/magic-theme.styl' $avatarWidth = 46px; +$arrow-icon-width = 18px; +$post-nav-max-width = 200px; .article-content-container { - ils-container(1.008, 1.002, 30px); + ils-container(1.008, 1.002, 30px, true); .article-title { color: var(--second-text-color); @@ -105,6 +107,51 @@ $avatarWidth = 46px; height: 40px; margin-top: $component-interspace; + .article-prev, .article-next { + max-width: $post-nav-max-width; + height: 100%; + box-sizing: border-box; + + ils-container(1.08, 1.08, 10px, false); + + a { + position: relative; + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + + &.prev { + padding-left: $arrow-icon-width; + } + + &.next { + padding-right: $arrow-icon-width; + } + + .arrow-icon { + position: absolute; + top: 0; + height: 100%; + width: $arrow-icon-width; + + &.left { + left: 0; + } + + &.right { + right: 0; + } + } + + .title { + width: 100%; + height: 100%; + } + } + + } + .article-prev { float: left; } @@ -122,8 +169,13 @@ $avatarWidth = 46px; } + .post-nav-title-item { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + +ils-tablet() { display: none; } diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index c83ad5b..4f03391 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -2,7 +2,7 @@ .category-container { - ils-container(1.02, 1.02, 30px); + ils-container(1.02, 1.02, 30px, true); .category-name { color: var(--second-text-color); diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl index 285d4c0..12c25d6 100644 --- a/source/css/layout/category-list.styl +++ b/source/css/layout/category-list.styl @@ -3,13 +3,7 @@ .category-list-container { - background: var(--background-color); - - ils-container(1.005, 1.01, 30px); - - +ils-tablet() { - ils-container(1.001, 1.005, 20px); - } + ils-container(1.005, 1.01, 30px, true); .category-list-content { diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl index b1b67cb..5c661db 100644 --- a/source/css/layout/common/basic.styl +++ b/source/css/layout/common/basic.styl @@ -109,3 +109,13 @@ button { background: var(--primary-color); } } + + +// ============================ +// flex center +// ============================ +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/source/css/layout/common/magic-theme.styl b/source/css/layout/common/magic-theme.styl index 476334b..e784236 100644 --- a/source/css/layout/common/magic-theme.styl +++ b/source/css/layout/common/magic-theme.styl @@ -22,26 +22,41 @@ hover-style(scaleX, scaleY) { } -ils-container(scaleX, scaleY, padding) { +ils-container(scaleX, scaleY, padding, isMarginBottom) { + position: relative; background: var(--background-color); padding: padding; border-radius: $ils-container-border-radius; - margin-bottom: $ils-container-margin-bottom; + box-sizing: border-box; + + if (isMarginBottom) { + margin-bottom: $ils-container-margin-bottom; + + +ils-tablet() { + margin-bottom: $ils-container-margin-bottom * 0.8; + } + + +ils-mobile() { + margin-bottom: $ils-container-margin-bottom * 0.6; + } + } hover-style(scaleX, scaleY); +ils-tablet() { padding: padding * 0.8; border-radius: $ils-container-border-radius * 0.8; - margin-bottom: $ils-container-margin-bottom * 0.8; + //margin-bottom: $ils-container-margin-bottom * 0.8; hover-style(scaleX * 0.8, scaleY * 0.8); } +ils-mobile() { padding: padding * 0.6; border-radius: $ils-container-border-radius * 0.6; - margin-bottom: $ils-container-margin-bottom * 0.6; + //margin-bottom: $ils-container-margin-bottom * 0.6; hover-style(scaleX * 0.6, scaleY * 0.6); } + + } diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 1e1d26c..892bbf9 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -6,23 +6,19 @@ .home-article-list { .home-article-item { - position: relative; - ils-container(1.02, 1.02, 38px); + ils-container(1.02, 1.02, 28px, true); .top-icon { position: absolute; - top: 6px; - right: 10px; - font-size: 1.8em; - transform: rotate(50deg); + top: 10px; + right: 12px; + font-size: 1.2em; + transform: rotate(45deg); + color : var(--third-text-color); +ils-tablet() { - display: 1.6em; - } - - +ils-mobile() { - font-size: 1.38em; + font-size: 1.16em; } } @@ -43,7 +39,6 @@ font-size: 1.2em; } - margin: 0; } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 6168bba..20cc1e4 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -3,7 +3,7 @@ $header-progress-height = 3px; $temp-width = hexo-config('style.left_side_width'); -$page-aside-width = $temp-width ? convert($temp-width) : 260px; +$page-aside-width = $temp-width ? convert($temp-width):260px; .page-container { @@ -124,13 +124,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px; bottom: 0; left: - $page-aside-width; width: $page-aside-width; + height: 100%; z-index: $z-index-6; - box-sizing: border-box; overflow-y: auto; border-radius: 0 !important; - margin-bottom: 0 !important; - ils-container(1.02, 1.02, 20px); + ils-container(1.02, 1.02, 18px, false); +ils-tablet() { left: 0 !important; diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index 44c3336..fb07e18 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -3,7 +3,7 @@ .tag-container { - ils-container(1.02, 1.02, 30px); + ils-container(1.02, 1.02, 30px, true); .tag-name { color: var(--second-text-color);