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">
|
||||
${journal.content!}
|
||||
</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">
|
||||
<#-- ${user.nickname!} -->
|
||||
<#assign timeago = (.now?long - journal.createTime?long)>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<#macro layout title>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<html lang="zh-CN" data-font="sans" data-mode="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
@ -9,14 +9,13 @@
|
||||
<meta name="description" content="${meta_description!}" />
|
||||
<@global.head />
|
||||
|
||||
|
||||
|
||||
<#-- 公共样式表 -->
|
||||
<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/remixicon/remixicon.css"/>
|
||||
<#-- <link rel="stylesheet" href="${theme_base!}/source/plugins/typo.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/font.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/redemption.css"/>
|
||||
@ -26,7 +25,7 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container animate__animated animate__fadeInDown">
|
||||
<div class="container animate__animated animate__fadeInDown">
|
||||
|
||||
<#-- 主体 -->
|
||||
<#nested >
|
||||
@ -47,7 +46,7 @@
|
||||
<script src="${theme_base!}/source/js/redemption.js"></script>
|
||||
|
||||
<#-- 公共JS代码 -->
|
||||
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
|
||||
<script src="${theme_base!}/source/plugins/heti/heti-addon.js"></script>
|
||||
<script>
|
||||
const heti = new Heti('.heti');
|
||||
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 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -305,4 +297,7 @@ footer .copyright a {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/*animation ends*/
|
||||
/*animation ends*/
|
||||
.heti > img {
|
||||
width: 97% !important;
|
||||
}
|
||||
@ -1,16 +1,5 @@
|
||||
@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 {
|
||||
width: 10px;
|
||||
@ -22,7 +11,7 @@ html::-webkit-scrollbar-thumb {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
// Body 主体
|
||||
// container 主体
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@ -326,12 +315,6 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
// .menu{
|
||||
// position: fixed;
|
||||
// right: 0.5rem;
|
||||
// bottom: 10rem;
|
||||
// }
|
||||
|
||||
// 评论组件
|
||||
.comment
|
||||
{
|
||||
@ -403,4 +386,15 @@ 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 {
|
||||
background-color: #0000000d;
|
||||
background-color: rgba(0, 0, 0, 0.051);
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #00000026;
|
||||
background-color: rgba(0, 0, 0, 0.249);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #0095ff1a;
|
||||
[data-mode=light] body {
|
||||
background-color: #f0f0f0;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.header > .title > a > span {
|
||||
color: black;
|
||||
[data-mode=light] .header > .title > a > span {
|
||||
color: #141414;
|
||||
}
|
||||
.header > .title > a > span:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] .header > .title > a > span:hover {
|
||||
color: #595959;
|
||||
}
|
||||
.header > .description {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] .header > .description {
|
||||
color: #595959;
|
||||
}
|
||||
.header > .description > .socials > a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] .header > .description > .socials > a {
|
||||
color: #595959;
|
||||
}
|
||||
.header > .description > .socials > a:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
[data-mode=light] .header > .description > .socials > a:hover {
|
||||
color: #141414;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
||||
[data-mode=light] main {
|
||||
background: #fafafa;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
|
||||
}
|
||||
main .index > h1 > a {
|
||||
color: black;
|
||||
[data-mode=light] main .index > h1 > a {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
main .index > p {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
[data-mode=light] main .index > h1 > a:hover {
|
||||
color: #595959;
|
||||
}
|
||||
main .index > .info {
|
||||
[data-mode=light] main .index > p {
|
||||
color: #262626;
|
||||
}
|
||||
[data-mode=light] main .index > .info {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
main .index > .info .date span,
|
||||
main .index > .info .tag span {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .index > .info .date span,
|
||||
[data-mode=light] main .index > .info .tag span {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
main .index > .info .date a,
|
||||
main .index > .info .tag a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .index > .info .date a,
|
||||
[data-mode=light] main .index > .info .tag a {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
main .index > .info .date i,
|
||||
main .index > .info .tag i {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
[data-mode=light] main .index > .info .date i,
|
||||
[data-mode=light] main .index > .info .tag i {
|
||||
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 {
|
||||
color: #000001;
|
||||
[data-mode=light] main .archives > ul > .year,
|
||||
[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 {
|
||||
color: #000001;
|
||||
[data-mode=light] main .archives > ul > li > a,
|
||||
[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 {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .archives > ul > li > a:hover,
|
||||
[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 {
|
||||
color: #c5c5c5;
|
||||
[data-mode=light] main .archives > ul > li > a > span,
|
||||
[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 {
|
||||
color: #c5c5c5;
|
||||
[data-mode=light] main .archives > ul > li > span,
|
||||
[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 {
|
||||
color: black;
|
||||
[data-mode=light] main .pagenav a {
|
||||
color: #262626;
|
||||
}
|
||||
main .pagenav a:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .pagenav a:hover {
|
||||
color: #595959;
|
||||
}
|
||||
main .post > .title > h1 {
|
||||
color: black;
|
||||
[data-mode=light] main .post > .title > h1 {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
main .post > .title > h1 > a {
|
||||
color: black;
|
||||
[data-mode=light] main .post > .title > h1 > a {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
main .post > .title > .info {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
[data-mode=light] main .post > .title > .info {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
main .post > .title > .info > span {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .post > .title > .info > span {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
main .post > .title > .info > span i {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
[data-mode=light] main .post > .title > .info > span i {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
main .journals > ul > li > .option {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
[data-mode=light] main .journals > ul > li > .info {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
main .journals > ul > li > .info {
|
||||
color: #c5c5c5;
|
||||
[data-mode=light] footer .copyright a {
|
||||
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 {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
[data-mode=dark] body {
|
||||
background-color: #383838;
|
||||
color: #b6b6b6;
|
||||
}
|
||||
footer .copyright a:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
[data-mode=dark] .header > .title > a > span {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
||||
[data-mode=dark] .header > .title > a > span:hover {
|
||||
color: #434343;
|
||||
}
|
||||
|
||||
.post-bottom-menu {
|
||||
border-top: 1px solid #f3f3f3;
|
||||
[data-mode=dark] .header > .description {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.post-bottom-menu > a {
|
||||
color: black;
|
||||
[data-mode=dark] .header > .description > .socials > a {
|
||||
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,182 +1,522 @@
|
||||
// HTML
|
||||
html {
|
||||
background-color: #f5f5f5;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
@charset "UTF-8";
|
||||
|
||||
// 滚动条
|
||||
html::-webkit-scrollbar-thumb {
|
||||
background-color: #0000000d;
|
||||
background-color: rgba(0, 0, 0, 0.051);
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #00000026;
|
||||
background-color: rgba(0, 0, 0, 0.249);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #0095ff1a;
|
||||
}
|
||||
|
||||
// Header 头部
|
||||
.header {
|
||||
// 站点标题
|
||||
> .title {
|
||||
> a {
|
||||
> span {
|
||||
color: rgb(0, 0, 0);
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 主体
|
||||
$light-background: #f0f0f0;
|
||||
$light-color:#262626;
|
||||
|
||||
// 二级标题
|
||||
> .description {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
> .socials {
|
||||
> a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 头部
|
||||
$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;
|
||||
|
||||
// main 主体
|
||||
main {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
||||
// 首页
|
||||
.index {
|
||||
> h1 {
|
||||
> a {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
// 首页
|
||||
$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;
|
||||
|
||||
> p {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
// 文章分页
|
||||
$light-pagenav-a:#262626;
|
||||
$light-pagenav-a-hover:#595959;
|
||||
|
||||
> .info {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
.date,
|
||||
.tag {
|
||||
span {
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
}
|
||||
i {
|
||||
color: rgb(0, 0, 0, 0.85);
|
||||
}
|
||||
// 文章
|
||||
$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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 归档 分类目录 分类 标签目录 标签 友链
|
||||
.archives,.categories,.category,.tag,.tags,.links{
|
||||
> ul {
|
||||
> .year,.name,.friend{
|
||||
color: rgb(0, 0, 0.85);
|
||||
}
|
||||
> li{
|
||||
> a{
|
||||
color: rgb(0, 0, 0.85);
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
}
|
||||
> span{
|
||||
color: #c5c5c5;
|
||||
}
|
||||
}
|
||||
> span{
|
||||
color: #c5c5c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文章分页
|
||||
.pagenav {
|
||||
a {
|
||||
color: rgb(0, 0, 0);
|
||||
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文章
|
||||
.post{
|
||||
> .title{
|
||||
> h1 {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
> a {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
> span{
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
i {
|
||||
|
||||
color: rgb(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 日志
|
||||
.journals{
|
||||
> ul{
|
||||
> li{
|
||||
> .option{
|
||||
color: rgb(0, 0, 0, 0.65);
|
||||
}
|
||||
> .info{
|
||||
color: #c5c5c5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 日志
|
||||
$light-main-journals-info:#8c8c8c;
|
||||
|
||||
// 脚注
|
||||
footer {
|
||||
.copyright {
|
||||
a {
|
||||
color: rgb(0, 0, 0, 0.25);
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0, 0.85);
|
||||
$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 {
|
||||
|
||||
// 站点标题
|
||||
>.title {
|
||||
>a {
|
||||
>span {
|
||||
color: $light-header-title;
|
||||
|
||||
&:hover {
|
||||
color: $light-header-title-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 二级标题
|
||||
>.description {
|
||||
color: $light-header-description;
|
||||
|
||||
>.socials {
|
||||
>a {
|
||||
color: $light-header-description;
|
||||
|
||||
&:hover {
|
||||
color: $light-header-description-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// main 主体
|
||||
main {
|
||||
background: $light-main-background;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem $light-main-box-shadow;
|
||||
|
||||
// 首页
|
||||
.index {
|
||||
>h1 {
|
||||
>a {
|
||||
color: $light-main-index-h1;
|
||||
&:hover{
|
||||
color: $light-main-index-h1-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>p {
|
||||
color: $light-main-index-p;
|
||||
}
|
||||
|
||||
>.info {
|
||||
border-bottom: 1px solid $light-main-index-info-border;
|
||||
|
||||
.date,
|
||||
.tag {
|
||||
span {
|
||||
color: $light-main-index-info;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $light-main-index-info;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $light-main-index-info;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 归档 分类目录 分类 标签目录 标签 友链
|
||||
.archives,
|
||||
.categories,
|
||||
.category,
|
||||
.tag,
|
||||
.tags,
|
||||
.links {
|
||||
>ul {
|
||||
|
||||
>.year,
|
||||
.name,
|
||||
.friend {
|
||||
color: $light-main-pages-title;
|
||||
}
|
||||
|
||||
>li {
|
||||
>a {
|
||||
color: $light-main-pages-li-title;
|
||||
|
||||
&:hover {
|
||||
color: $light-main-pages-li-title-hover;
|
||||
}
|
||||
|
||||
>span {
|
||||
color: $light-main-pages-li-span;
|
||||
}
|
||||
}
|
||||
|
||||
>span {
|
||||
color: $light-main-pages-li-span;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文章分页
|
||||
.pagenav {
|
||||
a {
|
||||
color: $light-pagenav-a;
|
||||
|
||||
&:hover {
|
||||
color: $light-pagenav-a-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文章
|
||||
.post {
|
||||
>.title {
|
||||
>h1 {
|
||||
color: $light-main-post-title;
|
||||
|
||||
>a {
|
||||
color: $light-main-post-title;
|
||||
}
|
||||
}
|
||||
|
||||
>.info {
|
||||
border-bottom: 1px solid $light-main-post-title-info-border;
|
||||
|
||||
>span {
|
||||
color: $light-main-post-title-info-span;
|
||||
|
||||
i {
|
||||
|
||||
color: $light-main-post-title-info-i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 日志
|
||||
.journals {
|
||||
>ul {
|
||||
>li {
|
||||
>.info {
|
||||
color: $light-main-journals-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment
|
||||
{
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
// 脚注
|
||||
footer {
|
||||
.copyright {
|
||||
a {
|
||||
color: $light-footer-copyright;
|
||||
|
||||
.post-bottom-menu{
|
||||
border-top: 1px solid #f3f3f3;
|
||||
>a{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
&:hover {
|
||||
color: $light-footer-copyright-hover;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: $light-comment-background;
|
||||
box-shadow: 0 0.375rem 1rem -0.5rem $light-comment-background-box-shadow;
|
||||
}
|
||||
|
||||
.post-bottom-menu {
|
||||
border-top: 1px solid $light-comment-post-bottom-menu-border;
|
||||
|
||||
>a {
|
||||
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