feature(mode): add light and dark mode for blog
This commit is contained in:
parent
b80acf799b
commit
6fbfbb2ab6
@ -12,13 +12,6 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
${journal.content!}
|
${journal.content!}
|
||||||
</div>
|
</div>
|
||||||
<#-- <div class="option">
|
|
||||||
|
|
||||||
<i class="ri-thumb-up-line"></i>
|
|
||||||
<i class="ri-chat-3-line"></i>
|
|
||||||
<i class="ri-share-forward-line"></i>
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<#-- ${user.nickname!} -->
|
<#-- ${user.nickname!} -->
|
||||||
<#assign timeago = (.now?long - journal.createTime?long)>
|
<#assign timeago = (.now?long - journal.createTime?long)>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<#macro layout title>
|
<#macro layout title>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh">
|
<html lang="zh-CN" data-font="sans" data-mode="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
@ -10,13 +10,12 @@
|
|||||||
<@global.head />
|
<@global.head />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<#-- 公共样式表 -->
|
<#-- 公共样式表 -->
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/plugins/normalize.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/plugins/normalize.css"/>
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/plugins/animate.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/plugins/animate.css"/>
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/plugins/remixicon/remixicon.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/plugins/remixicon/remixicon.css"/>
|
||||||
<#-- <link rel="stylesheet" href="${theme_base!}/source/plugins/typo.css"/> -->
|
<link rel="stylesheet" href="${theme_base!}/source/css/font.css"/>
|
||||||
<#-- <link rel="stylesheet" href="${theme_base!}/source/plugins/han.css"/> -->
|
|
||||||
<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
|
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/css/color.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/css/color.css"/>
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/css/markdown.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/css/markdown.css"/>
|
||||||
<link rel="stylesheet" href="${theme_base!}/source/css/redemption.css"/>
|
<link rel="stylesheet" href="${theme_base!}/source/css/redemption.css"/>
|
||||||
@ -47,7 +46,7 @@
|
|||||||
<script src="${theme_base!}/source/js/redemption.js"></script>
|
<script src="${theme_base!}/source/js/redemption.js"></script>
|
||||||
|
|
||||||
<#-- 公共JS代码 -->
|
<#-- 公共JS代码 -->
|
||||||
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
|
<script src="${theme_base!}/source/plugins/heti/heti-addon.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const heti = new Heti('.heti');
|
const heti = new Heti('.heti');
|
||||||
heti.autoSpacing();
|
heti.autoSpacing();
|
||||||
|
|||||||
@ -1,11 +1,3 @@
|
|||||||
html {
|
|
||||||
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar {
|
html::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
@ -306,3 +298,6 @@ footer .copyright a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*animation ends*/
|
/*animation ends*/
|
||||||
|
.heti > img {
|
||||||
|
width: 97% !important;
|
||||||
|
}
|
||||||
@ -1,16 +1,5 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
|
||||||
// 全局 HTML 配置
|
|
||||||
html {
|
|
||||||
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
||||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
||||||
'Noto Color Emoji';
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动条
|
// 滚动条
|
||||||
html::-webkit-scrollbar {
|
html::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
@ -22,7 +11,7 @@ html::-webkit-scrollbar-thumb {
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Body 主体
|
// container 主体
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
@ -326,12 +315,6 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .menu{
|
|
||||||
// position: fixed;
|
|
||||||
// right: 0.5rem;
|
|
||||||
// bottom: 10rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 评论组件
|
// 评论组件
|
||||||
.comment
|
.comment
|
||||||
{
|
{
|
||||||
@ -404,3 +387,14 @@ footer {
|
|||||||
|
|
||||||
|
|
||||||
/*animation ends*/
|
/*animation ends*/
|
||||||
|
|
||||||
|
// .menu{
|
||||||
|
// position: fixed;
|
||||||
|
// right: 0.5rem;
|
||||||
|
// bottom: 10rem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// heti
|
||||||
|
.heti > img{
|
||||||
|
width: 97%!important;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,119 +1,293 @@
|
|||||||
html {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #1f1f1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb {
|
html::-webkit-scrollbar-thumb {
|
||||||
background-color: #0000000d;
|
background-color: rgba(0, 0, 0, 0.051);
|
||||||
}
|
}
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb:hover {
|
html::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: #00000026;
|
background-color: rgba(0, 0, 0, 0.249);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
[data-mode=light] body {
|
||||||
background: #0095ff1a;
|
background-color: #f0f0f0;
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
|
[data-mode=light] .header > .title > a > span {
|
||||||
.header > .title > a > span {
|
color: #141414;
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
.header > .title > a > span:hover {
|
[data-mode=light] .header > .title > a > span:hover {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #595959;
|
||||||
}
|
}
|
||||||
.header > .description {
|
[data-mode=light] .header > .description {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #595959;
|
||||||
}
|
}
|
||||||
.header > .description > .socials > a {
|
[data-mode=light] .header > .description > .socials > a {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #595959;
|
||||||
}
|
}
|
||||||
.header > .description > .socials > a:hover {
|
[data-mode=light] .header > .description > .socials > a:hover {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: #141414;
|
||||||
}
|
}
|
||||||
|
[data-mode=light] main {
|
||||||
main {
|
background: #fafafa;
|
||||||
background: #ffffff;
|
box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
|
||||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
}
|
||||||
main .index > h1 > a {
|
[data-mode=light] main .index > h1 > a {
|
||||||
color: black;
|
color: #1f1f1f;
|
||||||
}
|
}
|
||||||
main .index > p {
|
[data-mode=light] main .index > h1 > a:hover {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: #595959;
|
||||||
}
|
}
|
||||||
main .index > .info {
|
[data-mode=light] main .index > p {
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
[data-mode=light] main .index > .info {
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid #f3f3f3;
|
||||||
}
|
}
|
||||||
main .index > .info .date span,
|
[data-mode=light] main .index > .info .date span,
|
||||||
main .index > .info .tag span {
|
[data-mode=light] main .index > .info .tag span {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .index > .info .date a,
|
[data-mode=light] main .index > .info .date a,
|
||||||
main .index > .info .tag a {
|
[data-mode=light] main .index > .info .tag a {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .index > .info .date i,
|
[data-mode=light] main .index > .info .date i,
|
||||||
main .index > .info .tag i {
|
[data-mode=light] main .index > .info .tag i {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .archives > ul > .year, main .archives > ul .name, main .archives > ul .friend, main .categories > ul > .year, main .categories > ul .name, main .categories > ul .friend, main .category > ul > .year, main .category > ul .name, main .category > ul .friend, main .tag > ul > .year, main .tag > ul .name, main .tag > ul .friend, main .tags > ul > .year, main .tags > ul .name, main .tags > ul .friend, main .links > ul > .year, main .links > ul .name, main .links > ul .friend {
|
[data-mode=light] main .archives > ul > .year,
|
||||||
color: #000001;
|
[data-mode=light] main .archives > ul .name,
|
||||||
|
[data-mode=light] main .archives > ul .friend,
|
||||||
|
[data-mode=light] main .categories > ul > .year,
|
||||||
|
[data-mode=light] main .categories > ul .name,
|
||||||
|
[data-mode=light] main .categories > ul .friend,
|
||||||
|
[data-mode=light] main .category > ul > .year,
|
||||||
|
[data-mode=light] main .category > ul .name,
|
||||||
|
[data-mode=light] main .category > ul .friend,
|
||||||
|
[data-mode=light] main .tag > ul > .year,
|
||||||
|
[data-mode=light] main .tag > ul .name,
|
||||||
|
[data-mode=light] main .tag > ul .friend,
|
||||||
|
[data-mode=light] main .tags > ul > .year,
|
||||||
|
[data-mode=light] main .tags > ul .name,
|
||||||
|
[data-mode=light] main .tags > ul .friend,
|
||||||
|
[data-mode=light] main .links > ul > .year,
|
||||||
|
[data-mode=light] main .links > ul .name,
|
||||||
|
[data-mode=light] main .links > ul .friend {
|
||||||
|
color: #1f1f1f;
|
||||||
}
|
}
|
||||||
main .archives > ul > li > a, main .categories > ul > li > a, main .category > ul > li > a, main .tag > ul > li > a, main .tags > ul > li > a, main .links > ul > li > a {
|
[data-mode=light] main .archives > ul > li > a,
|
||||||
color: #000001;
|
[data-mode=light] main .categories > ul > li > a,
|
||||||
|
[data-mode=light] main .category > ul > li > a,
|
||||||
|
[data-mode=light] main .tag > ul > li > a,
|
||||||
|
[data-mode=light] main .tags > ul > li > a,
|
||||||
|
[data-mode=light] main .links > ul > li > a {
|
||||||
|
color: #262626;
|
||||||
}
|
}
|
||||||
main .archives > ul > li > a:hover, main .categories > ul > li > a:hover, main .category > ul > li > a:hover, main .tag > ul > li > a:hover, main .tags > ul > li > a:hover, main .links > ul > li > a:hover {
|
[data-mode=light] main .archives > ul > li > a:hover,
|
||||||
color: rgba(0, 0, 0, 0.65);
|
[data-mode=light] main .categories > ul > li > a:hover,
|
||||||
|
[data-mode=light] main .category > ul > li > a:hover,
|
||||||
|
[data-mode=light] main .tag > ul > li > a:hover,
|
||||||
|
[data-mode=light] main .tags > ul > li > a:hover,
|
||||||
|
[data-mode=light] main .links > ul > li > a:hover {
|
||||||
|
color: #595959;
|
||||||
}
|
}
|
||||||
main .archives > ul > li > a > span, main .categories > ul > li > a > span, main .category > ul > li > a > span, main .tag > ul > li > a > span, main .tags > ul > li > a > span, main .links > ul > li > a > span {
|
[data-mode=light] main .archives > ul > li > a > span,
|
||||||
color: #c5c5c5;
|
[data-mode=light] main .categories > ul > li > a > span,
|
||||||
|
[data-mode=light] main .category > ul > li > a > span,
|
||||||
|
[data-mode=light] main .tag > ul > li > a > span,
|
||||||
|
[data-mode=light] main .tags > ul > li > a > span,
|
||||||
|
[data-mode=light] main .links > ul > li > a > span {
|
||||||
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .archives > ul > li > span, main .categories > ul > li > span, main .category > ul > li > span, main .tag > ul > li > span, main .tags > ul > li > span, main .links > ul > li > span {
|
[data-mode=light] main .archives > ul > li > span,
|
||||||
color: #c5c5c5;
|
[data-mode=light] main .categories > ul > li > span,
|
||||||
|
[data-mode=light] main .category > ul > li > span,
|
||||||
|
[data-mode=light] main .tag > ul > li > span,
|
||||||
|
[data-mode=light] main .tags > ul > li > span,
|
||||||
|
[data-mode=light] main .links > ul > li > span {
|
||||||
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .pagenav a {
|
[data-mode=light] main .pagenav a {
|
||||||
color: black;
|
color: #262626;
|
||||||
}
|
}
|
||||||
main .pagenav a:hover {
|
[data-mode=light] main .pagenav a:hover {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #595959;
|
||||||
}
|
}
|
||||||
main .post > .title > h1 {
|
[data-mode=light] main .post > .title > h1 {
|
||||||
color: black;
|
color: #1f1f1f;
|
||||||
}
|
}
|
||||||
main .post > .title > h1 > a {
|
[data-mode=light] main .post > .title > h1 > a {
|
||||||
color: black;
|
color: #1f1f1f;
|
||||||
}
|
}
|
||||||
main .post > .title > .info {
|
[data-mode=light] main .post > .title > .info {
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid #f5f5f5;
|
||||||
}
|
}
|
||||||
main .post > .title > .info > span {
|
[data-mode=light] main .post > .title > .info > span {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .post > .title > .info > span i {
|
[data-mode=light] main .post > .title > .info > span i {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .journals > ul > li > .option {
|
[data-mode=light] main .journals > ul > li > .info {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: #8c8c8c;
|
||||||
}
|
}
|
||||||
main .journals > ul > li > .info {
|
[data-mode=light] footer .copyright a {
|
||||||
color: #c5c5c5;
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
[data-mode=light] footer .copyright a:hover {
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
[data-mode=light] .comment {
|
||||||
|
background: #fafafa;
|
||||||
|
box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
|
||||||
|
}
|
||||||
|
[data-mode=light] .post-bottom-menu {
|
||||||
|
border-top: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
[data-mode=light] .post-bottom-menu > a {
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
[data-mode=light] .post-bottom-menu > a:hover {
|
||||||
|
color: #595959;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .copyright a {
|
[data-mode=dark] body {
|
||||||
color: rgba(0, 0, 0, 0.25);
|
background-color: #383838;
|
||||||
|
color: #b6b6b6;
|
||||||
}
|
}
|
||||||
footer .copyright a:hover {
|
[data-mode=dark] .header > .title > a > span {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: #bfbfbf;
|
||||||
}
|
}
|
||||||
|
[data-mode=dark] .header > .title > a > span:hover {
|
||||||
.comment {
|
color: #434343;
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
}
|
||||||
|
[data-mode=dark] .header > .description {
|
||||||
.post-bottom-menu {
|
color: #8c8c8c;
|
||||||
border-top: 1px solid #f3f3f3;
|
|
||||||
}
|
}
|
||||||
.post-bottom-menu > a {
|
[data-mode=dark] .header > .description > .socials > a {
|
||||||
color: black;
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] .header > .description > .socials > a:hover {
|
||||||
|
color: #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main {
|
||||||
|
background: #292929;
|
||||||
|
box-shadow: 0 0.375rem 1rem -0.5rem #262626;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > h1 > a {
|
||||||
|
color: #b8b8b8;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > h1 > a:hover {
|
||||||
|
color: #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > p {
|
||||||
|
color: #b6b6b6;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > .info {
|
||||||
|
border-bottom: 1px solid #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > .info .date span,
|
||||||
|
[data-mode=dark] main .index > .info .tag span {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > .info .date a,
|
||||||
|
[data-mode=dark] main .index > .info .tag a {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .index > .info .date i,
|
||||||
|
[data-mode=dark] main .index > .info .tag i {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .archives > ul > .year,
|
||||||
|
[data-mode=dark] main .archives > ul .name,
|
||||||
|
[data-mode=dark] main .archives > ul .friend,
|
||||||
|
[data-mode=dark] main .categories > ul > .year,
|
||||||
|
[data-mode=dark] main .categories > ul .name,
|
||||||
|
[data-mode=dark] main .categories > ul .friend,
|
||||||
|
[data-mode=dark] main .category > ul > .year,
|
||||||
|
[data-mode=dark] main .category > ul .name,
|
||||||
|
[data-mode=dark] main .category > ul .friend,
|
||||||
|
[data-mode=dark] main .tag > ul > .year,
|
||||||
|
[data-mode=dark] main .tag > ul .name,
|
||||||
|
[data-mode=dark] main .tag > ul .friend,
|
||||||
|
[data-mode=dark] main .tags > ul > .year,
|
||||||
|
[data-mode=dark] main .tags > ul .name,
|
||||||
|
[data-mode=dark] main .tags > ul .friend,
|
||||||
|
[data-mode=dark] main .links > ul > .year,
|
||||||
|
[data-mode=dark] main .links > ul .name,
|
||||||
|
[data-mode=dark] main .links > ul .friend {
|
||||||
|
color: #b8b8b8;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .archives > ul > li > a,
|
||||||
|
[data-mode=dark] main .categories > ul > li > a,
|
||||||
|
[data-mode=dark] main .category > ul > li > a,
|
||||||
|
[data-mode=dark] main .tag > ul > li > a,
|
||||||
|
[data-mode=dark] main .tags > ul > li > a,
|
||||||
|
[data-mode=dark] main .links > ul > li > a {
|
||||||
|
color: #b6b6b6;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .archives > ul > li > a:hover,
|
||||||
|
[data-mode=dark] main .categories > ul > li > a:hover,
|
||||||
|
[data-mode=dark] main .category > ul > li > a:hover,
|
||||||
|
[data-mode=dark] main .tag > ul > li > a:hover,
|
||||||
|
[data-mode=dark] main .tags > ul > li > a:hover,
|
||||||
|
[data-mode=dark] main .links > ul > li > a:hover {
|
||||||
|
color: #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .archives > ul > li > a > span,
|
||||||
|
[data-mode=dark] main .categories > ul > li > a > span,
|
||||||
|
[data-mode=dark] main .category > ul > li > a > span,
|
||||||
|
[data-mode=dark] main .tag > ul > li > a > span,
|
||||||
|
[data-mode=dark] main .tags > ul > li > a > span,
|
||||||
|
[data-mode=dark] main .links > ul > li > a > span {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .archives > ul > li > span,
|
||||||
|
[data-mode=dark] main .categories > ul > li > span,
|
||||||
|
[data-mode=dark] main .category > ul > li > span,
|
||||||
|
[data-mode=dark] main .tag > ul > li > span,
|
||||||
|
[data-mode=dark] main .tags > ul > li > span,
|
||||||
|
[data-mode=dark] main .links > ul > li > span {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .pagenav a {
|
||||||
|
color: #b6b6b6;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .pagenav a:hover {
|
||||||
|
color: #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .post > .title > h1 {
|
||||||
|
color: #b8b8b8;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .post > .title > h1 > a {
|
||||||
|
color: #b8b8b8;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .post > .title > .info {
|
||||||
|
border-bottom: 1px solid #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .post > .title > .info > span {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .post > .title > .info > span i {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] main .journals > ul > li > .info {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
[data-mode=dark] footer .copyright a {
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
[data-mode=dark] footer .copyright a:hover {
|
||||||
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
[data-mode=dark] .comment {
|
||||||
|
background: #292929;
|
||||||
|
box-shadow: 0 0.375rem 1rem -0.5rem #262626;
|
||||||
|
}
|
||||||
|
[data-mode=dark] .post-bottom-menu {
|
||||||
|
border-top: 1px solid #434343;
|
||||||
|
}
|
||||||
|
[data-mode=dark] .post-bottom-menu > a {
|
||||||
|
color: #b6b6b6;
|
||||||
|
}
|
||||||
|
[data-mode=dark] .post-bottom-menu > a:hover {
|
||||||
|
color: #434343;
|
||||||
}
|
}
|
||||||
@ -1,31 +1,91 @@
|
|||||||
// HTML
|
@charset "UTF-8";
|
||||||
html {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #1f1f1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动条
|
|
||||||
html::-webkit-scrollbar-thumb {
|
html::-webkit-scrollbar-thumb {
|
||||||
background-color: #0000000d;
|
background-color: rgba(0, 0, 0, 0.051);
|
||||||
}
|
}
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb:hover {
|
html::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: #00000026;
|
background-color: rgba(0, 0, 0, 0.249);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: #0095ff1a;
|
// 主体
|
||||||
|
$light-background: #f0f0f0;
|
||||||
|
$light-color:#262626;
|
||||||
|
|
||||||
|
// 头部
|
||||||
|
$light-header-title:#141414;
|
||||||
|
$light-header-title-hover:#595959;
|
||||||
|
$light-header-description:#595959;
|
||||||
|
$light-header-description-hover:#141414;
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
$light-main-background:#fafafa;
|
||||||
|
$light-main-box-shadow:#bfbfbf;
|
||||||
|
|
||||||
|
// 首页
|
||||||
|
$light-main-index-h1:#1f1f1f;
|
||||||
|
$light-main-index-h1-hover:#595959;
|
||||||
|
$light-main-index-p:#262626;
|
||||||
|
$light-main-index-info:#8c8c8c;
|
||||||
|
$light-main-index-info-border:#f3f3f3;
|
||||||
|
|
||||||
|
// 归档 分类目录 分类 标签目录 标签 友链
|
||||||
|
$light-main-pages-title:#1f1f1f;
|
||||||
|
$light-main-pages-li-title:#262626;
|
||||||
|
$light-main-pages-li-title-hover:#595959;
|
||||||
|
$light-main-pages-li-span:#8c8c8c;
|
||||||
|
|
||||||
|
// 文章分页
|
||||||
|
$light-pagenav-a:#262626;
|
||||||
|
$light-pagenav-a-hover:#595959;
|
||||||
|
|
||||||
|
// 文章
|
||||||
|
$light-main-post-title:#1f1f1f;
|
||||||
|
$light-main-post-title-info-border:#f5f5f5;
|
||||||
|
$light-main-post-title-info-span:#8c8c8c;
|
||||||
|
$light-main-post-title-info-i:#8c8c8c;
|
||||||
|
|
||||||
|
// 日志
|
||||||
|
$light-main-journals-info:#8c8c8c;
|
||||||
|
|
||||||
|
// 脚注
|
||||||
|
$light-footer-copyright:#bfbfbf;
|
||||||
|
$light-footer-copyright-hover:#262626;
|
||||||
|
|
||||||
|
// 评论
|
||||||
|
$light-comment-background:#fafafa;
|
||||||
|
$light-comment-background-box-shadow:#bfbfbf;
|
||||||
|
$light-comment-post-bottom-menu-border:#f5f5f5;
|
||||||
|
$light-comment-post-bottom-menu-a:#262626;
|
||||||
|
$light-comment-post-bottom-menu-a-hover:#595959;
|
||||||
|
|
||||||
|
// 日间模式
|
||||||
|
|
||||||
|
[data-mode="light"] {
|
||||||
|
// 滚动条
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
body {
|
||||||
|
background-color: $light-background;
|
||||||
|
color: $light-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Header 头部
|
// Header 头部
|
||||||
.header {
|
.header {
|
||||||
|
|
||||||
// 站点标题
|
// 站点标题
|
||||||
>.title {
|
>.title {
|
||||||
>a {
|
>a {
|
||||||
>span {
|
>span {
|
||||||
color: rgb(0, 0, 0);
|
color: $light-header-title;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: $light-header-title-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -33,12 +93,14 @@ html::-webkit-scrollbar-thumb:hover {
|
|||||||
|
|
||||||
// 二级标题
|
// 二级标题
|
||||||
>.description {
|
>.description {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: $light-header-description;
|
||||||
|
|
||||||
>.socials {
|
>.socials {
|
||||||
>a {
|
>a {
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: $light-header-description;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: $light-header-description-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -48,34 +110,39 @@ html::-webkit-scrollbar-thumb:hover {
|
|||||||
|
|
||||||
// main 主体
|
// main 主体
|
||||||
main {
|
main {
|
||||||
background: #ffffff;
|
background: $light-main-background;
|
||||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
box-shadow: 0 0.375rem 1rem -0.5rem $light-main-box-shadow;
|
||||||
|
|
||||||
// 首页
|
// 首页
|
||||||
.index {
|
.index {
|
||||||
>h1 {
|
>h1 {
|
||||||
>a {
|
>a {
|
||||||
color: rgba(0, 0, 0, 1);
|
color: $light-main-index-h1;
|
||||||
|
&:hover{
|
||||||
|
color: $light-main-index-h1-hover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>p {
|
>p {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
color: $light-main-index-p;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.info {
|
>.info {
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid $light-main-index-info-border;
|
||||||
|
|
||||||
.date,
|
.date,
|
||||||
.tag {
|
.tag {
|
||||||
span {
|
span {
|
||||||
color: rgb(0, 0, 0, 0.65);
|
color: $light-main-index-info;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: rgb(0, 0, 0, 0.65);
|
color: $light-main-index-info;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: rgb(0, 0, 0, 0.85);
|
color: $light-main-index-info;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -83,23 +150,35 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 归档 分类目录 分类 标签目录 标签 友链
|
// 归档 分类目录 分类 标签目录 标签 友链
|
||||||
.archives,.categories,.category,.tag,.tags,.links{
|
.archives,
|
||||||
|
.categories,
|
||||||
|
.category,
|
||||||
|
.tag,
|
||||||
|
.tags,
|
||||||
|
.links {
|
||||||
>ul {
|
>ul {
|
||||||
> .year,.name,.friend{
|
|
||||||
color: rgb(0, 0, 0.85);
|
>.year,
|
||||||
|
.name,
|
||||||
|
.friend {
|
||||||
|
color: $light-main-pages-title;
|
||||||
}
|
}
|
||||||
|
|
||||||
>li {
|
>li {
|
||||||
>a {
|
>a {
|
||||||
color: rgb(0, 0, 0.85);
|
color: $light-main-pages-li-title;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgb(0, 0, 0, 0.65);
|
color: $light-main-pages-li-title-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
>span {
|
>span {
|
||||||
color: #c5c5c5;
|
color: $light-main-pages-li-span;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>span {
|
>span {
|
||||||
color: #c5c5c5;
|
color: $light-main-pages-li-span;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -108,10 +187,10 @@ main {
|
|||||||
// 文章分页
|
// 文章分页
|
||||||
.pagenav {
|
.pagenav {
|
||||||
a {
|
a {
|
||||||
color: rgb(0, 0, 0);
|
color: $light-pagenav-a;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgb(0, 0, 0, 0.65);
|
color: $light-pagenav-a-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -120,19 +199,22 @@ main {
|
|||||||
.post {
|
.post {
|
||||||
>.title {
|
>.title {
|
||||||
>h1 {
|
>h1 {
|
||||||
color: rgba(0, 0, 0, 1);
|
color: $light-main-post-title;
|
||||||
|
|
||||||
>a {
|
>a {
|
||||||
color: rgba(0, 0, 0, 1);
|
color: $light-main-post-title;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>.info {
|
>.info {
|
||||||
border-bottom: 1px solid #f3f3f3;
|
border-bottom: 1px solid $light-main-post-title-info-border;
|
||||||
|
|
||||||
>span {
|
>span {
|
||||||
color: rgb(0, 0, 0, 0.65);
|
color: $light-main-post-title-info-span;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
|
||||||
color: rgb(0, 0, 0, 0.85);
|
color: $light-main-post-title-info-i;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -143,11 +225,8 @@ main {
|
|||||||
.journals {
|
.journals {
|
||||||
>ul {
|
>ul {
|
||||||
>li {
|
>li {
|
||||||
> .option{
|
|
||||||
color: rgb(0, 0, 0, 0.65);
|
|
||||||
}
|
|
||||||
>.info {
|
>.info {
|
||||||
color: #c5c5c5;
|
color: $light-main-journals-info;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -159,24 +238,285 @@ main {
|
|||||||
footer {
|
footer {
|
||||||
.copyright {
|
.copyright {
|
||||||
a {
|
a {
|
||||||
color: rgb(0, 0, 0, 0.25);
|
color: $light-footer-copyright;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgb(0, 0, 0, 0.85);
|
color: $light-footer-copyright-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment
|
.comment {
|
||||||
{
|
background: $light-comment-background;
|
||||||
background: #ffffff;
|
box-shadow: 0 0.375rem 1rem -0.5rem $light-comment-background-box-shadow;
|
||||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-bottom-menu {
|
.post-bottom-menu {
|
||||||
border-top: 1px solid #f3f3f3;
|
border-top: 1px solid $light-comment-post-bottom-menu-border;
|
||||||
|
|
||||||
>a {
|
>a {
|
||||||
color: rgba(0, 0, 0, 1);
|
color: $light-comment-post-bottom-menu-a;
|
||||||
|
&:hover{
|
||||||
|
color: $light-comment-post-bottom-menu-a-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =======================================================================
|
||||||
|
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
$dark-background: #383838;
|
||||||
|
$dark-color:#b6b6b6;
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
$dark-main-background:#292929;
|
||||||
|
$dark-main-box-shadow:#262626;
|
||||||
|
|
||||||
|
// 头部
|
||||||
|
$dark-header-title:#bfbfbf;
|
||||||
|
$dark-header-title-hover:#434343;
|
||||||
|
$dark-header-description:#8c8c8c;
|
||||||
|
$dark-header-description-hover:#434343;
|
||||||
|
|
||||||
|
// 首页
|
||||||
|
$dark-main-index-h1:#b8b8b8;
|
||||||
|
$dark-main-index-h1-hover:#434343;
|
||||||
|
$dark-main-index-p:#b6b6b6;
|
||||||
|
$dark-main-index-info:#8c8c8c;
|
||||||
|
$dark-main-index-info-border:#434343;
|
||||||
|
|
||||||
|
// 归档 分类目录 分类 标签目录 标签 友链
|
||||||
|
$dark-main-pages-title:#b8b8b8;
|
||||||
|
$dark-main-pages-li-title:#b6b6b6;
|
||||||
|
$dark-main-pages-li-title-hover:#434343;
|
||||||
|
$dark-main-pages-li-span:#8c8c8c;
|
||||||
|
|
||||||
|
// 文章分页
|
||||||
|
$dark-pagenav-a:#b6b6b6;
|
||||||
|
$dark-pagenav-a-hover:#434343;
|
||||||
|
|
||||||
|
// 文章
|
||||||
|
$dark-main-post-title:#b8b8b8;
|
||||||
|
$dark-main-post-title-info-border:#434343;
|
||||||
|
$dark-main-post-title-info-span:#8c8c8c;
|
||||||
|
$dark-main-post-title-info-i:#8c8c8c;
|
||||||
|
|
||||||
|
// 日志
|
||||||
|
$dark-main-journals-info:#8c8c8c;
|
||||||
|
|
||||||
|
// 脚注
|
||||||
|
$dark-footer-copyright:#262626;
|
||||||
|
$dark-footer-copyright-hover:#bfbfbf;
|
||||||
|
|
||||||
|
// 评论
|
||||||
|
$dark-comment-background:#292929;
|
||||||
|
$dark-comment-background-box-shadow:#262626;
|
||||||
|
$dark-comment-post-bottom-menu-border:#434343;
|
||||||
|
$dark-comment-post-bottom-menu-a:#b6b6b6;
|
||||||
|
$dark-comment-post-bottom-menu-a-hover:#434343;
|
||||||
|
|
||||||
|
// 日间模式
|
||||||
|
[data-mode="dark"] {
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
body {
|
||||||
|
background-color: $dark-background;
|
||||||
|
color: $dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header 头部
|
||||||
|
.header {
|
||||||
|
|
||||||
|
// 站点标题
|
||||||
|
>.title {
|
||||||
|
>a {
|
||||||
|
>span {
|
||||||
|
color: $dark-header-title;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-header-title-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 二级标题
|
||||||
|
>.description {
|
||||||
|
color: $dark-header-description;
|
||||||
|
|
||||||
|
>.socials {
|
||||||
|
>a {
|
||||||
|
color: $dark-header-description;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-header-description-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// main 主体
|
||||||
|
main {
|
||||||
|
background: $dark-main-background;
|
||||||
|
box-shadow: 0 0.375rem 1rem -0.5rem $dark-main-box-shadow;
|
||||||
|
|
||||||
|
// 首页
|
||||||
|
.index {
|
||||||
|
>h1 {
|
||||||
|
>a {
|
||||||
|
color: $dark-main-index-h1;
|
||||||
|
&:hover{
|
||||||
|
color: $dark-main-index-h1-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>p {
|
||||||
|
color: $dark-main-index-p;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.info {
|
||||||
|
border-bottom: 1px solid $dark-main-index-info-border;
|
||||||
|
|
||||||
|
.date,
|
||||||
|
.tag {
|
||||||
|
span {
|
||||||
|
color: $dark-main-index-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $dark-main-index-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: $dark-main-index-info;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 归档 分类目录 分类 标签目录 标签 友链
|
||||||
|
.archives,
|
||||||
|
.categories,
|
||||||
|
.category,
|
||||||
|
.tag,
|
||||||
|
.tags,
|
||||||
|
.links {
|
||||||
|
>ul {
|
||||||
|
|
||||||
|
>.year,
|
||||||
|
.name,
|
||||||
|
.friend {
|
||||||
|
color: $dark-main-pages-title;
|
||||||
|
}
|
||||||
|
|
||||||
|
>li {
|
||||||
|
>a {
|
||||||
|
color: $dark-main-pages-li-title;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-main-pages-li-title-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
>span {
|
||||||
|
color: $dark-main-pages-li-span;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>span {
|
||||||
|
color: $dark-main-pages-li-span;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文章分页
|
||||||
|
.pagenav {
|
||||||
|
a {
|
||||||
|
color: $dark-pagenav-a;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-pagenav-a-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文章
|
||||||
|
.post {
|
||||||
|
>.title {
|
||||||
|
>h1 {
|
||||||
|
color: $dark-main-post-title;
|
||||||
|
|
||||||
|
>a {
|
||||||
|
color: $dark-main-post-title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>.info {
|
||||||
|
border-bottom: 1px solid $dark-main-post-title-info-border;
|
||||||
|
|
||||||
|
>span {
|
||||||
|
color: $dark-main-post-title-info-span;
|
||||||
|
|
||||||
|
i {
|
||||||
|
|
||||||
|
color: $dark-main-post-title-info-i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 日志
|
||||||
|
.journals {
|
||||||
|
>ul {
|
||||||
|
>li {
|
||||||
|
>.info {
|
||||||
|
color: $dark-main-journals-info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚注
|
||||||
|
footer {
|
||||||
|
.copyright {
|
||||||
|
a {
|
||||||
|
color: $dark-footer-copyright;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-footer-copyright-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
background: $dark-comment-background;
|
||||||
|
box-shadow: 0 0.375rem 1rem -0.5rem $dark-comment-background-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-bottom-menu {
|
||||||
|
border-top: 1px solid $dark-comment-post-bottom-menu-border;
|
||||||
|
|
||||||
|
>a {
|
||||||
|
color: $dark-comment-post-bottom-menu-a;
|
||||||
|
&:hover{
|
||||||
|
color: $dark-comment-post-bottom-menu-a-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user