lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: refactor theme style

This commit is contained in:
XPoet 2020-11-13 14:43:22 +08:00
parent fa3b64f818
commit eeff077bc1
27 changed files with 190 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_config.yml
View File

@ -14,6 +14,10 @@ style:
# Theme primary color # Theme primary color
primary_color: "#0066CC" primary_color: "#0066CC"
hover:
scale: false # scale effect when the mouse hover
shadow: true # shadow effect when the mouse hover
# favicon # favicon
favicon: images/favicon.png favicon: images/favicon.png
@ -154,12 +158,3 @@ toc:
# If true, all level of TOC in a post will be displayed, rather than the activated part of it. # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: true expand_all: true
# ---------------------------------------------------------------------------------------
# Magic
# ---------------------------------------------------------------------------------------
magic:
enable: true
scale: false # scale effect when the mouse hover
shadow: false # shadow effect when the mouse hover

3
layout/_partial/first-screen.ejs Normal file
View File

@ -0,0 +1,3 @@
<div class="first-screen-container">
黄色的森林分出两条路，我选择人迹更少的那一条，从此决定我一生的道路。
</div>

3
layout/_partial/scripts.ejs
View File

@ -12,7 +12,8 @@
<% } %> <% } %>
<% } %> <% } %>
<% if (theme.local_search.enable && config.search) { %> <!-- theme.local_search.enable && config.search -->
<% if (theme.local_search.enable) { %>
<%- js('js/local-search.js') %> <%- js('js/local-search.js') %>
<% } %> <% } %>

16
layout/home-content.ejs
View File

@ -24,9 +24,8 @@
<div class="home-article-meta-info-container"> <div class="home-article-meta-info-container">
<div class="home-article-meta-info"> <div class="home-article-meta-info">
<span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span> <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
<% if (theme.magic.enable === true) { %> <% if (post.categories.length && theme.home_article.category.enable === true) { %>
<% if (post.categories.length && theme.home_article.category.enable === true) { %> <span class="home-article-category"><i class="fa fa-folder"></i>
<span class="home-article-category"><i class="fa fa-folder"></i>
<ul> <ul>
<% post.categories.forEach((category, i) => { <% post.categories.forEach((category, i) => {
if (theme.home_article.category.limit === 0 || i + 1 <= theme.home_article.category.limit) { %> if (theme.home_article.category.limit === 0 || i + 1 <= theme.home_article.category.limit) { %>
@ -38,9 +37,9 @@
<% }); %> <% }); %>
</ul> </ul>
</span> </span>
<% } %> <% } %>
<% if (post.tags.length && theme.home_article.tag.enable === true) { %> <% if (post.tags.length && theme.home_article.tag.enable === true) { %>
<span class="home-article-tag"> <span class="home-article-tag">
<i class="fa fa-tags"></i> <i class="fa fa-tags"></i>
<ul> <ul>
<% post.tags.forEach((tag, i) => { <% post.tags.forEach((tag, i) => {
@ -52,12 +51,9 @@
<% }}); %> <% }}); %>
</ul> </ul>
</span> </span>
<% } %>
<% } %> <% } %>
</div> </div>
<% if (theme.magic.enable === false) { %>
<hr>
<% } %>
<a href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fa fa-angle-right"></i></a> <a href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fa fa-angle-right"></i></a>
</div> </div>
</li> </li>

4
layout/page.ejs
View File

@ -1,5 +1,9 @@
<div class="page-container"> <div class="page-container">
<% if (is_home()) { %>
<%- partial('_partial/first-screen.ejs') %>
<% } %>
<header class="page-header"> <header class="page-header">
<div class="header-progress"></div> <div class="header-progress"></div>
</header> </header>

4
source/css/layout/_partial/comment/gitalk.styl
View File

@ -174,7 +174,7 @@ $gt-size-avatar-mobi := em(32px)
background-color: var(--background-color) background-color: var(--background-color)
color: $gt-color-main color: $gt-color-main
&:hover &:hover
background-color: var(--magic-background-color) background-color: var(--second-background-color)
&-public &-public
&:hover &:hover
background-color: lighten($gt-color-main, 20%) background-color: lighten($gt-color-main, 20%)
@ -372,7 +372,7 @@ $gt-size-avatar-mobi := em(32px)
flex: 1 flex: 1
margin-left: em(20px) margin-left: em(20px)
padding: em(12px) em(16px) padding: em(12px) em(16px)
background-color: var(--magic-background-color) background-color: var(--second-background-color)
overflow: auto overflow: auto
transition: all ease 0.25s transition: all ease 0.25s
+mobile() +mobile()

4
source/css/layout/_partial/empty-page.styl
View File

@ -5,10 +5,10 @@
background: var(--background-color); background: var(--background-color);
magic-container(1.005, 1.01, 30px); ils-container(1.005, 1.01, 30px);
+ils-tablet() { +ils-tablet() {
magic-container(1.001, 1.005, 20px); ils-container(1.001, 1.005, 20px);
} }
.empty-page-content { .empty-page-content {

15
source/css/layout/_partial/first-screen.styl Normal file
View File

@ -0,0 +1,15 @@
.first-screen-container {
position: relative;
box-sizing: border-box;
width: 100%;
text-align: center;
padding: 30px;
line-height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
overflow: hidden;
background: url("/images/bg.svg") center center / cover no-repeat;
}

9
source/css/layout/_partial/header.styl
View File

@ -13,11 +13,8 @@ $header-progress-height = 2.8px;
justify-content: center; justify-content: center;
background: var(--background-color); background: var(--background-color);
padding-top: $header-progress-height; padding-top: $header-progress-height;
transition();
if (hexo-config('magic.enable') == true) { hover-style(1.02, 1.02);
magic-style(1.02, 1.02);
}
.header-content { .header-content {
width: $main-content-width; width: $main-content-width;
@ -257,10 +254,6 @@ $header-progress-height = 2.8px;
.header-wrapper-shrink { .header-wrapper-shrink {
if (hexo-config('magic.enable') == false) {
box-shadow: 0 1px 2px var(--border-color);
}
.header-content { .header-content {
.logo-title { .logo-title {

2
source/css/layout/_partial/tagcloud.styl
View File

@ -4,7 +4,7 @@
background: var(--background-color); background: var(--background-color);
magic-container(1.005, 1.01, 30px); ils-container(1.005, 1.01, 30px);
.tagcloud-content { .tagcloud-content {

6
source/css/layout/_partial/tools.styl
View File

@ -23,11 +23,7 @@ $li-margin-bottom = 12px;
margin-bottom: 0; margin-bottom: 0;
} }
if (hexo-config('magic.enable') == true) { hover-style(1.1, 1.1);
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover { &:hover {
transition(); transition();

12
source/css/layout/_partial/tools2.styl
View File

@ -21,11 +21,7 @@ $li-margin-bottom = 12px;
color: var(--second-text-color); color: var(--second-text-color);
z-index: 9999; z-index: 9999;
if (hexo-config('magic.enable') == true) { hover-style(1.1, 1.1);
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover { &:hover {
transition(); transition();
@ -62,11 +58,7 @@ $li-margin-bottom = 12px;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
if (hexo-config('magic.enable') == true) { hover-style(1.1, 1.1);
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover { &:hover {
transition(); transition();

4
source/css/layout/archive-content.styl
View File

@ -3,10 +3,10 @@
.archive-container { .archive-container {
background: var(--background-color); background: var(--background-color);
magic-container(1.005, 1.01, 30px); ils-container(1.005, 1.01, 30px);
+ils-tablet() { +ils-tablet() {
magic-container(1.001, 1.005, 20px); ils-container(1.001, 1.005, 20px);
} }
} }

11
source/css/layout/article-content.styl
View File

@ -5,11 +5,7 @@ $avatarWidth = 46px;
.article-content-container { .article-content-container {
background: var(--background-color); ils-container(1.008, 1.002, 30px);
if (hexo-config('magic.enable')) {
magic-container(1.008, 1.002, 30px);
}
.article-title { .article-title {
color: var(--second-text-color); color: var(--second-text-color);
@ -25,6 +21,7 @@ $avatarWidth = 46px;
} }
} }
.article-header { .article-header {
position: relative; position: relative;
padding-left: $avatarWidth; padding-left: $avatarWidth;
@ -83,8 +80,7 @@ $avatarWidth = 46px;
} }
.article-header, .article-header, .article-header-meta-info {
.article-header-meta-info {
margin-top: 16px; margin-top: 16px;
+ils-tablet() { +ils-tablet() {
transform: scale(0.88); transform: scale(0.88);
@ -92,6 +88,7 @@ $avatarWidth = 46px;
} }
} }
.article-content { .article-content {
margin-top: 30px; margin-top: 30px;
text-align: justify; text-align: justify;

12
source/css/layout/category-content.styl
View File

@ -2,15 +2,7 @@
.category-container { .category-container {
background: var(--background-color); ils-container(1.02, 1.02, 30px);
if (hexo-config('magic.enable')) {
magic-container(1.02, 1.02, 30px);
+ils-tablet() {
magic-container(1.01, 1.01, 20px);
}
}
.category-name { .category-name {
color: var(--second-text-color); color: var(--second-text-color);
@ -29,4 +21,4 @@
margin-bottom: $component-interspace; margin-bottom: $component-interspace;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
} }

4
source/css/layout/category-list.styl
View File

@ -5,10 +5,10 @@
background: var(--background-color); background: var(--background-color);
magic-container(1.005, 1.01, 30px); ils-container(1.005, 1.01, 30px);
+ils-tablet() { +ils-tablet() {
magic-container(1.001, 1.005, 20px); ils-container(1.001, 1.005, 20px);
} }
.category-list-content { .category-list-content {

28
source/css/layout/common/basic.styl
View File

@ -29,31 +29,30 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--normal-text-color); color: var(--normal-text-color);
if (hexo-config('magic.enable') == true) { background: var(--background-color);
background: var(--magic-background-color);
} else {
background: var(--background-color);
}
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
font-size: $default-font-size; font-size: $default-font-size;
line-height: $default-font-line-height; line-height: $default-font-line-height;
+ils-tablet() { +ils-tablet() {
font-size: 0.99em; //font-size: 0.99em;
line-height: $default-font-line-height - 2px; //line-height: $default-font-line-height - 2px;
font-size: $default-font-size * 0.95;
line-height: $default-font-line-height * 0.95;
} }
+ils-mobile() { +ils-mobile() {
font-size: 0.98em; //font-size: 0.98em;
line-height: $default-font-line-height - 4px; //line-height: $default-font-line-height - 4px;
font-size: $default-font-size * 0.9;
line-height: $default-font-line-height * 0.9;
} }
} }
// ============================ // ============================
// selection // selection
// ============================ // ============================
@ -106,12 +105,7 @@ button {
border-radius: 5px; border-radius: 5px;
padding: 0.5em 1em; padding: 0.5em 1em;
background: var(--background-color); background: var(--background-color);
hover-style(1.1, 1.1);
if (hexo-config('magic.enable') == true) {
magic-style(1.1, 1.1);
} else {
border: 1px solid var(--border-color);
}
&:hover { &:hover {
transition(); transition();

46
source/css/layout/common/magic-theme.styl
View File

@ -1,43 +1,49 @@
@require "animated.styl" @require "animated.styl"
magic-style(scaleX, scaleY) { $ils-container-margin-bottom = 30px;
$ils-container-border-radius = 5px;
if (hexo-config('magic.enable') == true) { hover-style(scaleX, scaleY) {
box-shadow: 0 0 2.8px var(--border-color); transition();
transition();
&:hover { box-shadow: 0 1px 8px var(--shadow-color);
transition(); &:hover {
if (hexo-config('magic.scale')) { if (hexo-config('style.hover.scale')) {
transform: scaleX(scaleX) scaleY(scaleY); transform: scaleX(scaleX) scaleY(scaleY);
}
if (hexo-config('magic.shadow')) {
box-shadow: 0 0 10px var(--border-color);
}
} }
if (hexo-config('style.hover.shadow')) {
box-shadow: 0 2px 16px var(--shadow-hover-color);
}
} }
} }
magic-container(scaleX, scaleY, padding) {
ils-container(scaleX, scaleY, padding) {
background: var(--background-color);
padding: padding; padding: padding;
border-radius: 4px; border-radius: $ils-container-border-radius;
magic-style(scaleX, scaleY); margin-bottom: $ils-container-margin-bottom;
hover-style(scaleX, scaleY);
+ils-tablet() { +ils-tablet() {
padding: padding - 2px; padding: padding * 0.8;
border-radius: 3px; border-radius: $ils-container-border-radius * 0.8;
margin-bottom: $ils-container-margin-bottom * 0.8;
hover-style(scaleX * 0.8, scaleY * 0.8);
} }
+ils-mobile() { +ils-mobile() {
padding: padding - 4px; padding: padding * 0.6;
border-radius: 2px; border-radius: $ils-container-border-radius * 0.6;
margin-bottom: $ils-container-margin-bottom * 0.6;
hover-style(scaleX * 0.6, scaleY * 0.6);
} }
} }

6
source/css/layout/common/markdown.styl
View File

@ -133,7 +133,7 @@
font-size: 1.2em; font-size: 1.2em;
font-weight: 500; font-weight: 500;
line-height: 1.12em; line-height: 1.12em;
+ils-tablet() { +ils-tablet() {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.02em; line-height: 1.02em;
@ -177,10 +177,8 @@
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: var(--magic-background-color); background-color: var(--second-background-color);
} }
} }
} }

63
source/css/layout/common/variables.styl
View File

@ -5,28 +5,22 @@
// ======================================================================== // ========================================================================
// layout // layout
// ======================================================================== // ========================================================================
if (hexo-config('magic.enable')) { $header-height = 72px; // 头部默认高度
$header-height = 72px; // magic 风格：头部默认高度 $main-content-width = 62%; // 中间内容区域宽度（PC）
} else { $main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
$header-height = 100px; // normal 风格：头部默认高度 $main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
} $header-shrink-height = 56px; // 头部收缩高度
$circle-button-width = 40px; // tools 圆形工具按钮宽度
$main-content-width = 62%; // 中间内容区域宽度（PC） $tools-button-width = 32px; // tools 方形工具按钮宽度
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板） $component-interspace = 40px; // 组件/模块的间隔值（PC）
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机） $component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）
$header-shrink-height = 56px; // 头部收缩高度
$circle-button-width = 40px; // tools 圆形工具按钮宽度
$tools-button-width = 32px; // tools 方形工具按钮宽度
$component-interspace = 40px; // 组件/模块的间隔值（PC）
$component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）
// ======================================================================== // ========================================================================
// 媒体查询 // 媒体查询
// ======================================================================== // ========================================================================
$media-max-width = 760px; // 媒体查询最大宽度 (平板) $media-max-width = 760px; // 媒体查询最大宽度 (平板)
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机） $media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
ils-tablet() ils-tablet()
@media (max-width: $media-max-width) @media (max-width: $media-max-width)
@ -54,10 +48,10 @@ $z-index-9 = 1009;
// ======================================================================== // ========================================================================
// color // color
// ======================================================================== // ========================================================================
// normal mode color // primary color
$primary-color = convert(hexo-config("style.primary_color")) || #0066CC; $primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
$background-color = #fff; // normal 风格 背景颜色 $background-color = #fff; // light background color
$magic-background-color = #fafafa; // magic 风格 背景颜色 $second-background-color = #f2f2f2; // second light background color
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色） $normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色 $first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色 $second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
@ -65,11 +59,13 @@ $third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee; // 第四文本颜色 $fourth-text-color = #eee; // 第四文本颜色
$border-color = darken($background-color, 30%); // 边框颜色 $border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色 $selection-color = lighten($primary-color, 10%); // 文字选中的颜色
$shadow-color = rgba(0, 0, 0, 0.1);
$shadow-hover-color = rgba(0, 0, 0, 0.2);
// dark mode color // dark mode color
$dark-primary-color = $primary-color; $dark-primary-color = $primary-color;
$dark-background-color = #38373a; $dark-background-color = #2f2e31;
$dark-magic-background-color = #2f2e31; $dark-second-background-color = #262628;
$dark-normal-text-color = #b9b5c2; $dark-normal-text-color = #b9b5c2;
$dark-first-text-color = lighten($dark-normal-text-color, 30%); $dark-first-text-color = lighten($dark-normal-text-color, 30%);
$dark-second-text-color = lighten($dark-normal-text-color, 20%); $dark-second-text-color = lighten($dark-normal-text-color, 20%);
@ -77,6 +73,8 @@ $dark-third-text-color = darken($dark-normal-text-color, 20%);
$dark-fourth-text-color = #2f2e31; $dark-fourth-text-color = #2f2e31;
$dark-border-color = lighten($dark-background-color, 20%); $dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color; $dark-selection-color = $selection-color;
$dark-shadow-color = rgba(200, 200, 200, 0.1);
$dark-shadow-hover-color = rgba(200, 200, 200, 0.2);
// ======================================================================== // ========================================================================
@ -85,7 +83,7 @@ $dark-selection-color = $selection-color;
$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; $default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
//$default-font-family = -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial; //$default-font-family = -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
$default-font-size = 15.2px; $default-font-size = 15.2px;
$default-font-line-height = 20px; $default-font-line-height = 22px;
$default-font-weight = 400; $default-font-weight = 400;
@ -94,7 +92,7 @@ $default-font-weight = 400;
// ======================================================================== // ========================================================================
:root { :root {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color; --second-background-color: $second-background-color;
--primary-color: $primary-color; --primary-color: $primary-color;
--first-text-color: $first-text-color; --first-text-color: $first-text-color;
--second-text-color: $second-text-color; --second-text-color: $second-text-color;
@ -103,12 +101,14 @@ $default-font-weight = 400;
--normal-text-color: $normal-text-color; --normal-text-color: $normal-text-color;
--border-color: $border-color; --border-color: $border-color;
--selection-color: $selection-color; --selection-color: $selection-color;
--shadow-color: $shadow-color;
--shadow-hover-color: $shadow-hover-color;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: $dark-background-color; --background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color; --second-background-color: $dark-second-background-color;
--primary-color: $dark-primary-color; --primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color; --first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
@ -117,13 +117,15 @@ $default-font-weight = 400;
--normal-text-color: $dark-normal-text-color; --normal-text-color: $dark-normal-text-color;
--border-color: $dark-border-color; --border-color: $dark-border-color;
--selection-color: $dark-selection-color; --selection-color: $dark-selection-color;
--shadow-color: $dark-shadow-color;
--shadow-hover-color: $dark-shadow-hover-color;
} }
} }
.dark-mode { .dark-mode {
--background-color: $dark-background-color; --background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color; --second-background-color: $dark-second-background-color;
--primary-color: $dark-primary-color; --primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color; --first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
@ -132,11 +134,14 @@ $default-font-weight = 400;
--normal-text-color: $dark-normal-text-color; --normal-text-color: $dark-normal-text-color;
--border-color: $dark-border-color; --border-color: $dark-border-color;
--selection-color: $dark-selection-color; --selection-color: $dark-selection-color;
--shadow-color: $dark-shadow-color;
--shadow-hover-color: $dark-shadow-hover-color;
} }
.light-mode { .light-mode {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color; --second-background-color: $second-background-color;
--primary-color: $primary-color; --primary-color: $primary-color;
--first-text-color: $first-text-color; --first-text-color: $first-text-color;
--second-text-color: $second-text-color; --second-text-color: $second-text-color;
@ -145,4 +150,6 @@ $default-font-weight = 400;
--normal-text-color: $normal-text-color; --normal-text-color: $normal-text-color;
--border-color: $border-color; --border-color: $border-color;
--selection-color: $selection-color; --selection-color: $selection-color;
--shadow-color: $shadow-color;
--shadow-hover-color: $shadow-hover-color;
} }

46
source/css/layout/home-content.styl
View File

@ -6,9 +6,10 @@
.home-article-list { .home-article-list {
.home-article-item { .home-article-item {
position: relative; position: relative;
ils-container(1.02, 1.02, 30px);
.top-icon { .top-icon {
position: absolute; position: absolute;
top: 6px; top: 6px;
@ -26,22 +27,6 @@
} }
background: var(--background-color);
if (hexo-config('magic.enable')) {
magic-container(1.02, 1.02, 30px);
margin-bottom: $component-interspace;
+ils-tablet() {
magic-container(1.01, 1.01, 20px);
margin-bottom: $component-interspace - 10px;
}
} else {
margin-bottom: 70px;
}
.home-article-title { .home-article-title {
position: relative; position: relative;
font-weight: 600; font-weight: 600;
@ -53,45 +38,31 @@
font-size: 1.3em; font-size: 1.3em;
} }
+ils-mobile() { +ils-mobile() {
font-size: 1.2em; font-size: 1.2em;
} }
margin: 0; margin: 0;
if (hexo-config('magic.enable')) {
//TODO: ....
} else {
a {
color: var(--second-text-color);
}
}
} }
.home-article-content { .home-article-content {
text-align: justify; text-align: justify;
margin: 20px 0;
if (hexo-config('magic.enable') == true) {
margin: 20px 0;
} else {
margin: 30px 0;
}
line-height: 2em; line-height: 2em;
} }
.home-article-meta-info-container { .home-article-meta-info-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: var(--third-text-color); color: var(--third-text-color);
font-size: 1em;
if (hexo-config('magic.enable') == true) {
font-size: 1em;
} else {
font-size: 0.9em;
}
.home-article-meta-info { .home-article-meta-info {
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -121,6 +92,7 @@
} }
} }
hr { hr {
border: none; border: none;
flex: 1; flex: 1;

14
source/css/layout/page.styl
View File

@ -126,22 +126,16 @@ $page-aside-width = 258px;
z-index: $z-index-6; z-index: $z-index-6;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
background: var(--background-color); border-radius: 0 !important;
margin-bottom: 0 !important;
ils-container(1.02, 1.02, 20px);
+ils-tablet() { +ils-tablet() {
left: 0 !important; left: 0 !important;
display: none !important; display: none !important;
} }
if (hexo-config('magic.enable')) {
magic-container(1.02, 1.02, 20px);
} else {
padding: 20px;
border-right: 1px solid var(--border-color);
}
border-radius: 0;
the-transition-ease-out(); the-transition-ease-out();
} }

12
source/css/layout/tag-content.styl
View File

@ -3,15 +3,7 @@
.tag-container { .tag-container {
background: var(--background-color); ils-container(1.02, 1.02, 30px);
if (hexo-config('magic.enable')) {
magic-container(1.02, 1.02, 30px);
+ils-tablet() {
magic-container(1.01, 1.01, 20px);
}
}
.tag-name { .tag-name {
color: var(--second-text-color); color: var(--second-text-color);
@ -30,4 +22,4 @@
margin-bottom: $component-interspace; margin-bottom: $component-interspace;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
} }

1
source/css/style.styl
View File

@ -12,6 +12,7 @@
@import "layout/_partial/footer.styl" @import "layout/_partial/footer.styl"
@import "layout/_partial/paginator.styl" @import "layout/_partial/paginator.styl"
@import "layout/_partial/empty-page.styl" @import "layout/_partial/empty-page.styl"
@import "layout/_partial/first-screen.styl"
@import "layout/category-list.styl" @import "layout/category-list.styl"
@import "layout/_partial/article-meta-info.styl" @import "layout/_partial/article-meta-info.styl"
@import "layout/home-content.styl" @import "layout/home-content.styl"

39
source/images/bg.svg Normal file
View File

@ -0,0 +1,39 @@
<svg
version="1.1"
baseProfile="full"
width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1400 800"
>
<rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite" />
</rect>
<path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
<animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite" />
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
</path>
<circle cx="200" cy="150" r="20" stroke="#1a73e8" fill="#1a73e8">
<animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite" />
</circle>
<!-- 三角形 -->
<path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite" />
</path>
<circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
<animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite" />
</circle>
<path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
<animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite" />
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
</path>
<rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite" />
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

3
source/js/main.js
View File

@ -13,4 +13,7 @@ window.addEventListener('DOMContentLoaded', () => {
// init page height handle // init page height handle
ILS.utils.initPageHeightHandle(); ILS.utils.initPageHeightHandle();
// init first screen height
ILS.utils.initFirstScreenHeight();
}); });

6
source/js/utils.js
View File

@ -131,7 +131,6 @@ ILS.utils = {
return dom ? dom.getBoundingClientRect().height : 0; return dom ? dom.getBoundingClientRect().height : 0;
}, },
initPageHeightHandle() { initPageHeightHandle() {
const h1 = this.getElementHeight('.header-progress'); const h1 = this.getElementHeight('.header-progress');
const h2 = this.getElementHeight('.page-main-content-top'); const h2 = this.getElementHeight('.page-main-content-top');
@ -144,4 +143,9 @@ ILS.utils = {
pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px'; pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px';
} }
}, },
initFirstScreenHeight() {
const firstScreenDom = document.querySelector('.first-screen-container');
firstScreenDom && (firstScreenDom.style.height = window.innerHeight + 'px');
},
} }