website: add dark theme.
This commit is contained in:
jaywcjlove
parent
2c3e9f08c6
commit
0802e9695c
|
|
@ -24,7 +24,9 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
|
|||
await FS.ensureDir(path.resolve(deployDir, 'c'));
|
||||
await FS.copySync(faviconPath, path.resolve(deployDir, 'img', 'favicon.ico'));
|
||||
|
||||
await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'))
|
||||
await FS.copyFile(path.resolve(process.cwd(), 'template', 'js', 'copy-to-clipboard.js'), path.resolve(deployDir, 'js', 'copy-to-clipboard.js'));
|
||||
await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@wcj/dark-mode/main.js'), path.resolve(deployDir, 'js', 'dark-mode.min.js'));
|
||||
await FS.copyFile(path.resolve(process.cwd(), 'node_modules/@uiw/github-corners/lib/index.js'), path.resolve(deployDir, 'js', 'github-corners.js'));
|
||||
|
||||
const jsData = await FS.readFileSync(rootIndexJSPath);
|
||||
await FS.outputFile(path.resolve(deployDir, 'js', 'index.js'), UglifyJS.minify(jsData.toString()).code)
|
||||
|
|
@ -214,7 +216,7 @@ const contributorsPath = path.resolve(process.cwd(), 'CONTRIBUTORS.svg');
|
|||
}
|
||||
|
||||
function markdownToHTML(str) {
|
||||
return create({ markdown: str, document: undefined });
|
||||
return create({ markdown: str, document: undefined, 'dark-mode': false });
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -226,13 +228,12 @@ function markdownToHTML(str) {
|
|||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const stylStr = FS.readFileSync(stylPath, 'utf8');
|
||||
const stylMD = FS.readFileSync(path.resolve('node_modules/markdown-to-html-cli/github.css'), 'utf8');
|
||||
stylus(stylStr.toString())
|
||||
.set('filename', stylPath)
|
||||
.set('compress', true)
|
||||
.render((err, css) => {
|
||||
if (err) throw err;
|
||||
resolve(`${stylMD.replace(/\n/, '')}\n${css}`);
|
||||
resolve(`${css}`);
|
||||
});
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
|
|
|
|||
|
|
@ -25,11 +25,13 @@
|
|||
"url": "git+https://github.com/jaywcjlove/linux-command.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@uiw/github-corners": "~1.5.11",
|
||||
"@wcj/dark-mode": "~1.0.14",
|
||||
"archiver": "~5.3.0",
|
||||
"colors-cli": "~1.0.28",
|
||||
"ejs": "~3.1.6",
|
||||
"fs-extra": "~10.0.1",
|
||||
"markdown-to-html-cli": "~3.2.5",
|
||||
"markdown-to-html-cli": "~3.4.1",
|
||||
"sitemap-generator": "~8.5.1",
|
||||
"sqlite3": "~5.0.2",
|
||||
"stylus": "~0.56.0",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<h1>Contributors</h1>
|
||||
<div><%-describe.contributors ? describe.contributors : '' %></div>
|
||||
<p>
|
||||
数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">github-action-contributors</a>创建。
|
||||
数据来源于 <a href="https://github.com/jaywcjlove/linux-command/graphs/contributors">GitHub Contributors</a>，使用<a href="https://github.com/jaywcjlove/github-action-contributors">action-contributors</a>创建。
|
||||
</p>
|
||||
</div>
|
||||
<%- include('widget/footer',{type: "list"}); %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<%- include('partial/header'); %>
|
||||
<%- include('widget/search',{type: "list"}); %>
|
||||
|
||||
<div class="search_list">
|
||||
<ul id="search_list_result">
|
||||
<!-- <li>
|
||||
|
|
|
|||
|
|
@ -10,5 +10,8 @@
|
|||
<title><%=describe.n?describe.n+'':''%> 命令，Linux <%=describe.n?describe.n+'':''%> 命令详解：<%=describe.d?describe.d+' - ':''%> Linux 命令搜索引擎</title>
|
||||
<link rel="shortcut icon" href="<%=relative_path%>img/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="<%=relative_path%>css/index.css?v=<%=new Date().getTime()%>">
|
||||
<script type="module" src="<%=relative_path%>js/dark-mode.min.js"></script>
|
||||
<script type="module" src="<%=relative_path%>js/github-corners.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<dark-mode permanent dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px; z-index: 999;"></dark-mode>
|
||||
|
|
@ -1,43 +1,19 @@
|
|||
@import('mixins/reset.styl')
|
||||
@import('mixins/css.styl')
|
||||
@import('mixins/markdown.styl')
|
||||
|
||||
mq-mobile = "screen and (max-width: 479px)"
|
||||
|
||||
a.github-corner {
|
||||
position: fixed
|
||||
z-index: 9999
|
||||
top: 0
|
||||
right: 0
|
||||
&:hover {
|
||||
.octo-arm{
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
svg {
|
||||
fill #f1f1f1
|
||||
color #000
|
||||
position absolute
|
||||
top 0
|
||||
border 0
|
||||
right 0
|
||||
z-index 99
|
||||
width 70px
|
||||
height 70px
|
||||
@media mq-mobile {
|
||||
width 46px
|
||||
height 46px
|
||||
}
|
||||
}
|
||||
[data-color-mode*='dark'], [data-color-mode*='dark'] body {
|
||||
color-scheme: dark;
|
||||
--color-header-bg: #3a3a3a8f;
|
||||
--color-header-border: #323232;
|
||||
--color-hover: #ffffff30;
|
||||
}
|
||||
a {
|
||||
transition: all .2s ease-in
|
||||
}
|
||||
|
||||
@keyframes octocat-wave{
|
||||
0%,100%{-webkit-transform:rotate(0);transform:rotate(0)}
|
||||
20%,60%{-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
|
||||
40%,80%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}
|
||||
[data-color-mode*='light'], [data-color-mode*='light'] body {
|
||||
color-scheme: light;
|
||||
--color-header-bg: #ffffff52;
|
||||
--color-header-border: #d3d3d3;
|
||||
--color-hover: #f2f2f2;
|
||||
}
|
||||
|
||||
.warpper {
|
||||
|
|
@ -56,6 +32,7 @@ a {
|
|||
padding 0 10px
|
||||
.logo a {
|
||||
display flex
|
||||
color: currentColor;
|
||||
}
|
||||
.box {
|
||||
position relative
|
||||
|
|
@ -77,9 +54,9 @@ a {
|
|||
position absolute
|
||||
display none
|
||||
z-index 999
|
||||
box-shadow 1px 1px 3px #ededed
|
||||
border 1px solid #d5d5d5
|
||||
background #fff
|
||||
box-shadow 1px 1px 3px var(--color-theme-bg)
|
||||
border 1px solid var(--color-header-border)
|
||||
background var(--color-theme-bg)
|
||||
min-width 100px
|
||||
top 39px
|
||||
width 100%
|
||||
|
|
@ -95,9 +72,8 @@ a {
|
|||
a {
|
||||
display block
|
||||
padding 2px 6px 2px 6px
|
||||
color #555555
|
||||
&:hover {
|
||||
background-color #f2f2f2
|
||||
background-color var(--color-hover)
|
||||
}
|
||||
.kw {
|
||||
color #f00
|
||||
|
|
@ -120,8 +96,7 @@ a {
|
|||
font-size 14px
|
||||
font-weight bold
|
||||
line-height 1.42857143
|
||||
color #555
|
||||
background-color #fff
|
||||
background-color: transparent;
|
||||
background-image none
|
||||
border 1px solid $border-color
|
||||
border-radius 5px 0 0 5px
|
||||
|
|
@ -153,12 +128,10 @@ a {
|
|||
cursor pointer
|
||||
user-select none
|
||||
background-image none
|
||||
background-color #fff
|
||||
border 1px solid transparent
|
||||
border-collapse separate
|
||||
border-radius 0 5px 5px 0
|
||||
border-color $border-color
|
||||
color #333
|
||||
&:focus,&:active:focus {
|
||||
outline thin dotted
|
||||
outline 5px auto -webkit-focus-ring-color
|
||||
|
|
@ -190,10 +163,9 @@ a {
|
|||
.footer {
|
||||
text-align center
|
||||
padding-top 31px
|
||||
color #616161
|
||||
font-size 14px
|
||||
font-weight 300
|
||||
border-top 1px solid #efefef
|
||||
border-top 1px solid var(--color-header-border)
|
||||
padding-bottom 50px;
|
||||
padding 31px 6px 50px 6px
|
||||
&.home {
|
||||
|
|
@ -221,15 +193,15 @@ a {
|
|||
width auto
|
||||
position fixed
|
||||
width 100%
|
||||
background #fff
|
||||
background var(--color-theme-bg)
|
||||
backdrop-filter saturate(180%) blur(0.4rem)
|
||||
background-color hsla(0, 0%, 100%, .55)
|
||||
background-color var(--color-header-bg)
|
||||
z-index 99
|
||||
}
|
||||
|
||||
.header_list {
|
||||
padding 10px 10px 10px 13px
|
||||
border-bottom 1px solid #EEEEEE
|
||||
border-bottom 1px solid var(--color-header-border)
|
||||
.logo {
|
||||
padding-right 24px
|
||||
text-align left
|
||||
|
|
@ -303,8 +275,6 @@ a {
|
|||
.contributors {
|
||||
padding 79px 27px
|
||||
max-width: 960px;
|
||||
color: #24292f;
|
||||
background-color: #ffffff;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
.language-css,
|
||||
.language-styl,
|
||||
.language-less,
|
||||
.language-scss,
|
||||
.language-sass {
|
||||
color: #005cc5;
|
||||
.punctuation {
|
||||
color: #24292e;
|
||||
}
|
||||
.selector {
|
||||
color: #6749BA;
|
||||
}
|
||||
.property {
|
||||
color: #005cc5;
|
||||
}
|
||||
.atrule {
|
||||
color: #d73a49;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,6 @@ mq-mobile = "screen and (max-width: 479px)"
|
|||
height 13px
|
||||
vertical-align middle
|
||||
width 1px
|
||||
border-left 1px solid #dfdfdf
|
||||
margin -1px 0 0 0
|
||||
}
|
||||
a {
|
||||
|
|
@ -38,6 +37,7 @@ mq-mobile = "screen and (max-width: 479px)"
|
|||
}
|
||||
|
||||
.markdown-body {
|
||||
margin: 0 auto 0 auto;
|
||||
margin-top: 0 !important;
|
||||
padding 90px 35px 30px 35px
|
||||
max-width 980px
|
||||
|
|
|
|||
|
|
@ -11,12 +11,9 @@ html {
|
|||
}
|
||||
a {
|
||||
text-decoration none
|
||||
&:hover {
|
||||
color #333
|
||||
}
|
||||
}
|
||||
* {
|
||||
box-sizing border-box
|
||||
}
|
||||
|
||||
$border-color = #D5D5D5
|
||||
$border-color = #8f8f8f7a
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue