refactor: refactor theme style
This commit is contained in:
XPoet
parent
fa3b64f818
commit
eeff077bc1
13
_config.yml
13
_config.yml
|
|
@ -14,6 +14,10 @@ style:
|
|||
# Theme primary color
|
||||
primary_color: "#0066CC"
|
||||
|
||||
hover:
|
||||
scale: false # scale effect when the mouse hover
|
||||
shadow: true # shadow effect when the mouse hover
|
||||
|
||||
# favicon
|
||||
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.
|
||||
expand_all: true
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Magic
|
||||
# ---------------------------------------------------------------------------------------
|
||||
magic:
|
||||
enable: true
|
||||
scale: false # scale effect when the mouse hover
|
||||
shadow: false # shadow effect when the mouse hover
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="first-screen-container">
|
||||
黄色的森林分出两条路，我选择人迹更少的那一条，从此决定我一生的道路。
|
||||
</div>
|
||||
|
|
@ -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') %>
|
||||
<% } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
<div class="home-article-meta-info-container">
|
||||
<div class="home-article-meta-info">
|
||||
<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) { %>
|
||||
<span class="home-article-category"><i class="fa fa-folder"></i>
|
||||
<ul>
|
||||
|
|
@ -53,11 +52,8 @@
|
|||
</ul>
|
||||
</span>
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (theme.magic.enable === false) { %>
|
||||
<hr>
|
||||
<% } %>
|
||||
|
||||
<a href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fa fa-angle-right"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<div class="page-container">
|
||||
|
||||
<% if (is_home()) { %>
|
||||
<%- partial('_partial/first-screen.ejs') %>
|
||||
<% } %>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="header-progress"></div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ $gt-size-avatar-mobi := em(32px)
|
|||
background-color: var(--background-color)
|
||||
color: $gt-color-main
|
||||
&:hover
|
||||
background-color: var(--magic-background-color)
|
||||
background-color: var(--second-background-color)
|
||||
&-public
|
||||
&:hover
|
||||
background-color: lighten($gt-color-main, 20%)
|
||||
|
|
@ -372,7 +372,7 @@ $gt-size-avatar-mobi := em(32px)
|
|||
flex: 1
|
||||
margin-left: em(20px)
|
||||
padding: em(12px) em(16px)
|
||||
background-color: var(--magic-background-color)
|
||||
background-color: var(--second-background-color)
|
||||
overflow: auto
|
||||
transition: all ease 0.25s
|
||||
+mobile()
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
|
||||
background: var(--background-color);
|
||||
|
||||
magic-container(1.005, 1.01, 30px);
|
||||
ils-container(1.005, 1.01, 30px);
|
||||
|
||||
+ils-tablet() {
|
||||
magic-container(1.001, 1.005, 20px);
|
||||
ils-container(1.001, 1.005, 20px);
|
||||
}
|
||||
|
||||
.empty-page-content {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -13,11 +13,8 @@ $header-progress-height = 2.8px;
|
|||
justify-content: center;
|
||||
background: var(--background-color);
|
||||
padding-top: $header-progress-height;
|
||||
transition();
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
magic-style(1.02, 1.02);
|
||||
}
|
||||
hover-style(1.02, 1.02);
|
||||
|
||||
.header-content {
|
||||
width: $main-content-width;
|
||||
|
|
@ -257,10 +254,6 @@ $header-progress-height = 2.8px;
|
|||
|
||||
.header-wrapper-shrink {
|
||||
|
||||
if (hexo-config('magic.enable') == false) {
|
||||
box-shadow: 0 1px 2px var(--border-color);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
||||
.logo-title {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
background: var(--background-color);
|
||||
|
||||
magic-container(1.005, 1.01, 30px);
|
||||
ils-container(1.005, 1.01, 30px);
|
||||
|
||||
.tagcloud-content {
|
||||
|
||||
|
|
|
|||
|
|
@ -23,11 +23,7 @@ $li-margin-bottom = 12px;
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
magic-style(1.1, 1.1);
|
||||
} else {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
hover-style(1.1, 1.1);
|
||||
|
||||
&:hover {
|
||||
transition();
|
||||
|
|
|
|||
|
|
@ -21,11 +21,7 @@ $li-margin-bottom = 12px;
|
|||
color: var(--second-text-color);
|
||||
z-index: 9999;
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
magic-style(1.1, 1.1);
|
||||
} else {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
hover-style(1.1, 1.1);
|
||||
|
||||
&:hover {
|
||||
transition();
|
||||
|
|
@ -62,11 +58,7 @@ $li-margin-bottom = 12px;
|
|||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
magic-style(1.1, 1.1);
|
||||
} else {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
hover-style(1.1, 1.1);
|
||||
|
||||
&:hover {
|
||||
transition();
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
|
||||
.archive-container {
|
||||
background: var(--background-color);
|
||||
magic-container(1.005, 1.01, 30px);
|
||||
ils-container(1.005, 1.01, 30px);
|
||||
|
||||
+ils-tablet() {
|
||||
magic-container(1.001, 1.005, 20px);
|
||||
ils-container(1.001, 1.005, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@ $avatarWidth = 46px;
|
|||
|
||||
.article-content-container {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable')) {
|
||||
magic-container(1.008, 1.002, 30px);
|
||||
}
|
||||
ils-container(1.008, 1.002, 30px);
|
||||
|
||||
.article-title {
|
||||
color: var(--second-text-color);
|
||||
|
|
@ -25,6 +21,7 @@ $avatarWidth = 46px;
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.article-header {
|
||||
position: relative;
|
||||
padding-left: $avatarWidth;
|
||||
|
|
@ -83,8 +80,7 @@ $avatarWidth = 46px;
|
|||
}
|
||||
|
||||
|
||||
.article-header,
|
||||
.article-header-meta-info {
|
||||
.article-header, .article-header-meta-info {
|
||||
margin-top: 16px;
|
||||
+ils-tablet() {
|
||||
transform: scale(0.88);
|
||||
|
|
@ -92,6 +88,7 @@ $avatarWidth = 46px;
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.article-content {
|
||||
margin-top: 30px;
|
||||
text-align: justify;
|
||||
|
|
|
|||
|
|
@ -2,15 +2,7 @@
|
|||
|
||||
.category-container {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable')) {
|
||||
magic-container(1.02, 1.02, 30px);
|
||||
|
||||
+ils-tablet() {
|
||||
magic-container(1.01, 1.01, 20px);
|
||||
}
|
||||
}
|
||||
ils-container(1.02, 1.02, 30px);
|
||||
|
||||
.category-name {
|
||||
color: var(--second-text-color);
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
|
||||
background: var(--background-color);
|
||||
|
||||
magic-container(1.005, 1.01, 30px);
|
||||
ils-container(1.005, 1.01, 30px);
|
||||
|
||||
+ils-tablet() {
|
||||
magic-container(1.001, 1.005, 20px);
|
||||
ils-container(1.001, 1.005, 20px);
|
||||
}
|
||||
|
||||
.category-list-content {
|
||||
|
|
|
|||
|
|
@ -29,31 +29,30 @@ html, body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--normal-text-color);
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
background: var(--magic-background-color);
|
||||
} else {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
font-family: $default-font-family;
|
||||
font-weight: $default-font-weight;
|
||||
font-size: $default-font-size;
|
||||
line-height: $default-font-line-height;
|
||||
|
||||
+ils-tablet() {
|
||||
font-size: 0.99em;
|
||||
line-height: $default-font-line-height - 2px;
|
||||
//font-size: 0.99em;
|
||||
//line-height: $default-font-line-height - 2px;
|
||||
font-size: $default-font-size * 0.95;
|
||||
line-height: $default-font-line-height * 0.95;
|
||||
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
font-size: 0.98em;
|
||||
line-height: $default-font-line-height - 4px;
|
||||
//font-size: 0.98em;
|
||||
//line-height: $default-font-line-height - 4px;
|
||||
font-size: $default-font-size * 0.9;
|
||||
line-height: $default-font-line-height * 0.9;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ============================
|
||||
// selection
|
||||
// ============================
|
||||
|
|
@ -106,12 +105,7 @@ button {
|
|||
border-radius: 5px;
|
||||
padding: 0.5em 1em;
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
magic-style(1.1, 1.1);
|
||||
} else {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
hover-style(1.1, 1.1);
|
||||
|
||||
&:hover {
|
||||
transition();
|
||||
|
|
|
|||
|
|
@ -1,43 +1,49 @@
|
|||
@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();
|
||||
|
||||
box-shadow: 0 1px 8px var(--shadow-color);
|
||||
|
||||
&:hover {
|
||||
|
||||
transition();
|
||||
|
||||
if (hexo-config('magic.scale')) {
|
||||
if (hexo-config('style.hover.scale')) {
|
||||
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;
|
||||
border-radius: 4px;
|
||||
magic-style(scaleX, scaleY);
|
||||
border-radius: $ils-container-border-radius;
|
||||
margin-bottom: $ils-container-margin-bottom;
|
||||
|
||||
hover-style(scaleX, scaleY);
|
||||
|
||||
+ils-tablet() {
|
||||
padding: padding - 2px;
|
||||
border-radius: 3px;
|
||||
padding: padding * 0.8;
|
||||
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() {
|
||||
padding: padding - 4px;
|
||||
border-radius: 2px;
|
||||
padding: padding * 0.6;
|
||||
border-radius: $ils-container-border-radius * 0.6;
|
||||
margin-bottom: $ils-container-margin-bottom * 0.6;
|
||||
hover-style(scaleX * 0.6, scaleY * 0.6);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,10 +177,8 @@
|
|||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: var(--magic-background-color);
|
||||
background-color: var(--second-background-color);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,16 +5,10 @@
|
|||
// ========================================================================
|
||||
// layout
|
||||
// ========================================================================
|
||||
if (hexo-config('magic.enable')) {
|
||||
$header-height = 72px; // magic 风格：头部默认高度
|
||||
} else {
|
||||
$header-height = 100px; // normal 风格：头部默认高度
|
||||
}
|
||||
|
||||
$header-height = 72px; // 头部默认高度
|
||||
$main-content-width = 62%; // 中间内容区域宽度（PC）
|
||||
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
|
||||
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
|
||||
|
||||
$header-shrink-height = 56px; // 头部收缩高度
|
||||
$circle-button-width = 40px; // tools 圆形工具按钮宽度
|
||||
$tools-button-width = 32px; // tools 方形工具按钮宽度
|
||||
|
|
@ -54,10 +48,10 @@ $z-index-9 = 1009;
|
|||
// ========================================================================
|
||||
// color
|
||||
// ========================================================================
|
||||
// normal mode color
|
||||
// primary color
|
||||
$primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
|
||||
$background-color = #fff; // normal 风格 背景颜色
|
||||
$magic-background-color = #fafafa; // magic 风格 背景颜色
|
||||
$background-color = #fff; // light background color
|
||||
$second-background-color = #f2f2f2; // second light background color
|
||||
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
|
||||
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
|
||||
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
|
||||
|
|
@ -65,11 +59,13 @@ $third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
|
|||
$fourth-text-color = #eee; // 第四文本颜色
|
||||
$border-color = darken($background-color, 30%); // 边框颜色
|
||||
$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-primary-color = $primary-color;
|
||||
$dark-background-color = #38373a;
|
||||
$dark-magic-background-color = #2f2e31;
|
||||
$dark-background-color = #2f2e31;
|
||||
$dark-second-background-color = #262628;
|
||||
$dark-normal-text-color = #b9b5c2;
|
||||
$dark-first-text-color = lighten($dark-normal-text-color, 30%);
|
||||
$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-border-color = lighten($dark-background-color, 20%);
|
||||
$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 = -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-line-height = 20px;
|
||||
$default-font-line-height = 22px;
|
||||
$default-font-weight = 400;
|
||||
|
||||
|
||||
|
|
@ -94,7 +92,7 @@ $default-font-weight = 400;
|
|||
// ========================================================================
|
||||
:root {
|
||||
--background-color: $background-color;
|
||||
--magic-background-color: $magic-background-color;
|
||||
--second-background-color: $second-background-color;
|
||||
--primary-color: $primary-color;
|
||||
--first-text-color: $first-text-color;
|
||||
--second-text-color: $second-text-color;
|
||||
|
|
@ -103,12 +101,14 @@ $default-font-weight = 400;
|
|||
--normal-text-color: $normal-text-color;
|
||||
--border-color: $border-color;
|
||||
--selection-color: $selection-color;
|
||||
--shadow-color: $shadow-color;
|
||||
--shadow-hover-color: $shadow-hover-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: $dark-background-color;
|
||||
--magic-background-color: $dark-magic-background-color;
|
||||
--second-background-color: $dark-second-background-color;
|
||||
--primary-color: $dark-primary-color;
|
||||
--first-text-color: $dark-first-text-color;
|
||||
--second-text-color: $dark-second-text-color;
|
||||
|
|
@ -117,13 +117,15 @@ $default-font-weight = 400;
|
|||
--normal-text-color: $dark-normal-text-color;
|
||||
--border-color: $dark-border-color;
|
||||
--selection-color: $dark-selection-color;
|
||||
--shadow-color: $dark-shadow-color;
|
||||
--shadow-hover-color: $dark-shadow-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dark-mode {
|
||||
--background-color: $dark-background-color;
|
||||
--magic-background-color: $dark-magic-background-color;
|
||||
--second-background-color: $dark-second-background-color;
|
||||
--primary-color: $dark-primary-color;
|
||||
--first-text-color: $dark-first-text-color;
|
||||
--second-text-color: $dark-second-text-color;
|
||||
|
|
@ -132,11 +134,14 @@ $default-font-weight = 400;
|
|||
--normal-text-color: $dark-normal-text-color;
|
||||
--border-color: $dark-border-color;
|
||||
--selection-color: $dark-selection-color;
|
||||
--shadow-color: $dark-shadow-color;
|
||||
--shadow-hover-color: $dark-shadow-hover-color;
|
||||
}
|
||||
|
||||
|
||||
.light-mode {
|
||||
--background-color: $background-color;
|
||||
--magic-background-color: $magic-background-color;
|
||||
--second-background-color: $second-background-color;
|
||||
--primary-color: $primary-color;
|
||||
--first-text-color: $first-text-color;
|
||||
--second-text-color: $second-text-color;
|
||||
|
|
@ -145,4 +150,6 @@ $default-font-weight = 400;
|
|||
--normal-text-color: $normal-text-color;
|
||||
--border-color: $border-color;
|
||||
--selection-color: $selection-color;
|
||||
--shadow-color: $shadow-color;
|
||||
--shadow-hover-color: $shadow-hover-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@
|
|||
.home-article-list {
|
||||
|
||||
.home-article-item {
|
||||
|
||||
position: relative;
|
||||
|
||||
ils-container(1.02, 1.02, 30px);
|
||||
|
||||
.top-icon {
|
||||
position: absolute;
|
||||
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 {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
|
|
@ -53,45 +38,31 @@
|
|||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
+ils-mobile() {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
margin: 0;
|
||||
|
||||
if (hexo-config('magic.enable')) {
|
||||
//TODO: ....
|
||||
}
|
||||
|
||||
} else {
|
||||
a {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-article-content {
|
||||
|
||||
text-align: justify;
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
margin: 20px 0;
|
||||
} else {
|
||||
margin: 30px 0;
|
||||
}
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
|
||||
.home-article-meta-info-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--third-text-color);
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
font-size: 1em;
|
||||
} else {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
.home-article-meta-info {
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -121,6 +92,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -126,22 +126,16 @@ $page-aside-width = 258px;
|
|||
z-index: $z-index-6;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
ils-container(1.02, 1.02, 20px);
|
||||
|
||||
+ils-tablet() {
|
||||
left: 0 !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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,15 +3,7 @@
|
|||
|
||||
.tag-container {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable')) {
|
||||
magic-container(1.02, 1.02, 30px);
|
||||
|
||||
+ils-tablet() {
|
||||
magic-container(1.01, 1.01, 20px);
|
||||
}
|
||||
}
|
||||
ils-container(1.02, 1.02, 30px);
|
||||
|
||||
.tag-name {
|
||||
color: var(--second-text-color);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
@import "layout/_partial/footer.styl"
|
||||
@import "layout/_partial/paginator.styl"
|
||||
@import "layout/_partial/empty-page.styl"
|
||||
@import "layout/_partial/first-screen.styl"
|
||||
@import "layout/category-list.styl"
|
||||
@import "layout/_partial/article-meta-info.styl"
|
||||
@import "layout/home-content.styl"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -13,4 +13,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
// init page height handle
|
||||
ILS.utils.initPageHeightHandle();
|
||||
|
||||
// init first screen height
|
||||
ILS.utils.initFirstScreenHeight();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -131,7 +131,6 @@ ILS.utils = {
|
|||
return dom ? dom.getBoundingClientRect().height : 0;
|
||||
},
|
||||
|
||||
|
||||
initPageHeightHandle() {
|
||||
const h1 = this.getElementHeight('.header-progress');
|
||||
const h2 = this.getElementHeight('.page-main-content-top');
|
||||
|
|
@ -144,4 +143,9 @@ ILS.utils = {
|
|||
pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
initFirstScreenHeight() {
|
||||
const firstScreenDom = document.querySelector('.first-screen-container');
|
||||
firstScreenDom && (firstScreenDom.style.height = window.innerHeight + 'px');
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue