mirror of https://github.com/IoTcat/docsify.git
refactor: build config (#408)
* refactor: build config * chore: fix conflict * fix: 404 page pathfix/351
cinwell.li
6 years ago
committed by
GitHub
parent
9b3b4454de
commit
8352a1e489
64 changed files with 4353 additions and 5619 deletions
@ -1,3 +1,5 @@ |
||||
.git/ |
||||
.git |
||||
packages/docsify-server-renderer/build.js |
||||
node_modules |
||||
node_modules |
||||
build |
||||
server.js |
||||
@ -1,15 +1,20 @@ |
||||
{ |
||||
"extends": [ |
||||
"vue" |
||||
], |
||||
"parserOptions": { |
||||
"ecmaVersion": 8 |
||||
}, |
||||
"env": { |
||||
"browser": true |
||||
"extends": "xo-space/browser", |
||||
"rules": { |
||||
"semi": [2, "never"], |
||||
"no-return-assign": "off", |
||||
"no-unused-expressions": "off", |
||||
"no-new-func": "off", |
||||
"no-multi-assign": "off", |
||||
"no-mixed-operators": "off", |
||||
"max-params": "off", |
||||
"no-script-url": "off", |
||||
"camelcase": "off", |
||||
"no-warning-comments": "off" |
||||
}, |
||||
"globals": { |
||||
"Docsify": true, |
||||
"$docsify": true |
||||
"$docsify": true, |
||||
"process": true |
||||
} |
||||
} |
||||
|
||||
@ -1,53 +0,0 @@ |
||||
var serveStatic = require('serve-static') |
||||
var http = require('http') |
||||
var fs = require('fs') |
||||
var Renderer = require('./packages/docsify-server-renderer/build.js') |
||||
|
||||
var renderer = new Renderer({ |
||||
template: ` |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>docsify</title> |
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
||||
<link rel="stylesheet" href="/themes/vue.css" title="vue"> |
||||
</head> |
||||
<body> |
||||
<!--inject-app--> |
||||
<!--inject-config--> |
||||
<script src="/lib/docsify.js"></script> |
||||
</body> |
||||
</html>`, |
||||
config: { |
||||
name: 'docsify', |
||||
repo: 'qingwei-li/docsify', |
||||
basePath: 'https://docsify.js.org/', |
||||
loadNavbar: true, |
||||
loadSidebar: true, |
||||
subMaxLevel: 3, |
||||
auto2top: true, |
||||
alias: { |
||||
'/de-de/changelog': '/changelog', |
||||
'/zh-cn/changelog': '/changelog', |
||||
'/changelog': |
||||
'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG' |
||||
} |
||||
}, |
||||
path: './' |
||||
}) |
||||
|
||||
http |
||||
.createServer(function (req, res) { |
||||
serveStatic('.')(req, res, function () { |
||||
// TEST SSR
|
||||
// renderer.renderToString(req.url)
|
||||
// .then(html => res.end(html))
|
||||
|
||||
res.writeHead(404, { 'Content-Type': 'text/html' }) |
||||
res.end(fs.readFileSync('dev.html')) |
||||
}) |
||||
}) |
||||
.listen(3000, '0.0.0.0') |
||||
|
||||
console.log(`\nListening at http://0.0.0.0:3000\n`) |
||||
@ -1,50 +0,0 @@ |
||||
var fs = require('fs') |
||||
var cssnano = require('cssnano').process |
||||
var resolve = require('path').resolve |
||||
var postcss = require('postcss') |
||||
var isProd = process.argv[process.argv.length - 1] !== '--dev' |
||||
|
||||
var processor = postcss([ |
||||
require('postcss-salad')({ |
||||
features: { |
||||
precss: { |
||||
properties: { |
||||
preserve: true |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
]) |
||||
|
||||
var saveMin = function (file, content) { |
||||
fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content) |
||||
} |
||||
var save = function (file, content) { |
||||
fs.writeFileSync(resolve(__dirname, '../themes/', file), content) |
||||
} |
||||
var load = function (file) { |
||||
return fs.readFileSync(resolve(__dirname, '../src/themes/', file)).toString() |
||||
} |
||||
var loadLib = function (file) { |
||||
return fs.readFileSync(resolve(__dirname, '../themes/', file)).toString() |
||||
} |
||||
|
||||
var list = fs.readdirSync(resolve(__dirname, '../src/themes')) |
||||
|
||||
list.forEach(function (file) { |
||||
if (!/\.css$/.test(file)) return |
||||
processor |
||||
.process(load(file), { from: resolve(__dirname, '../src/themes/', file) }) |
||||
.then(function (result) { |
||||
save(file, result.css) |
||||
console.log('salad - ' + file) |
||||
isProd && |
||||
cssnano(loadLib(file)).then(function (result) { |
||||
saveMin(file, result.css) |
||||
console.log('cssnao - ' + file) |
||||
}) |
||||
}) |
||||
.catch(function (err) { |
||||
console.log(err) |
||||
}) |
||||
}) |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,55 @@ |
||||
const liveServer = require('live-server') |
||||
const isSSR = !!process.env.SSR |
||||
const middleware = [] |
||||
|
||||
if (isSSR) { |
||||
const Renderer = require('./packages/docsify-server-renderer/build.js') |
||||
const renderer = new Renderer({ |
||||
template: ` |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>docsify</title> |
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
||||
<link rel="stylesheet" href="/themes/vue.css" title="vue"> |
||||
</head> |
||||
<body> |
||||
<!--inject-app--> |
||||
<!--inject-config--> |
||||
<script src="/lib/docsify.js"></script> |
||||
</body> |
||||
</html>`, |
||||
config: { |
||||
name: 'docsify', |
||||
repo: 'qingwei-li/docsify', |
||||
basePath: 'https://docsify.js.org/', |
||||
loadNavbar: true, |
||||
loadSidebar: true, |
||||
subMaxLevel: 3, |
||||
auto2top: true, |
||||
alias: { |
||||
'/de-de/changelog': '/changelog', |
||||
'/zh-cn/changelog': '/changelog', |
||||
'/changelog': |
||||
'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG' |
||||
} |
||||
}, |
||||
path: './' |
||||
}) |
||||
|
||||
middleware.push(function(req, res, next) { |
||||
if (/\.(css|js)$/.test(req.url)) { |
||||
return next() |
||||
} |
||||
renderer.renderToString(req.url).then(html => res.end(html)) |
||||
}) |
||||
} |
||||
|
||||
const params = { |
||||
port: 3000, |
||||
watch: ['lib', 'docs', 'themes'], |
||||
middleware |
||||
} |
||||
|
||||
liveServer.start(params) |
||||
@ -1,112 +0,0 @@ |
||||
section.cover { |
||||
align-items: center; |
||||
background-position: center center; |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
height: 100vh; |
||||
display: none; |
||||
|
||||
&.show { |
||||
display: flex; |
||||
} |
||||
|
||||
&.has-mask .mask { |
||||
background-color: $color-bg; |
||||
opacity: 0.8; |
||||
position: absolute; |
||||
top: 0; |
||||
size: 100%; |
||||
} |
||||
|
||||
.cover-main { |
||||
flex: 1; |
||||
margin: -20px 16px 0; |
||||
text-align: center; |
||||
z-index: 1; |
||||
} |
||||
|
||||
a { |
||||
color: inherit; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
line-height: 1.5rem; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
h1 { |
||||
color: inherit; |
||||
font-size: 2.5rem; |
||||
font-weight: 300; |
||||
margin: 0.625rem 0 2.5rem; |
||||
position: relative; |
||||
text-align: center; |
||||
|
||||
a { |
||||
display: block; |
||||
} |
||||
|
||||
small { |
||||
bottom: -0.4375rem; |
||||
font-size: 1rem; |
||||
position: absolute; |
||||
} |
||||
} |
||||
|
||||
blockquote { |
||||
font-size: 1.5rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
ul { |
||||
line-height: 1.8; |
||||
list-style-type: none; |
||||
margin: 1em auto; |
||||
max-width: 500px; |
||||
padding: 0; |
||||
} |
||||
|
||||
.cover-main > p:last-child a { |
||||
border-color: var(--theme-color, $color-primary); |
||||
border-radius: 2rem; |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
box-sizing: border-box; |
||||
color: var(--theme-color, $color-primary); |
||||
display: inline-block; |
||||
font-size: 1.05rem; |
||||
letter-spacing: 0.1rem; |
||||
margin: 0.5rem 1rem; |
||||
padding: 0.75em 2rem; |
||||
text-decoration: none; |
||||
transition: all 0.15s ease; |
||||
|
||||
&:last-child { |
||||
background-color: var(--theme-color, $color-primary); |
||||
color: #fff; |
||||
|
||||
&:hover { |
||||
color: inherit; |
||||
opacity: 0.8; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
color: inherit; |
||||
} |
||||
} |
||||
|
||||
blockquote > p > a { |
||||
border-bottom: 2px solid var(--theme-color, $color-primary); |
||||
transition: color 0.3s; |
||||
|
||||
&:hover { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@ |
||||
section.cover |
||||
align-items center |
||||
background-position center center |
||||
background-repeat no-repeat |
||||
background-size cover |
||||
height 100vh |
||||
display none |
||||
|
||||
&.show |
||||
display flex |
||||
|
||||
&.has-mask .mask |
||||
background-color $color-bg |
||||
opacity 0.8 |
||||
position absolute |
||||
top 0 |
||||
height 100% |
||||
width 100% |
||||
|
||||
.cover-main |
||||
flex 1 |
||||
margin -20px 16px 0 |
||||
text-align center |
||||
z-index 1 |
||||
|
||||
a |
||||
color inherit |
||||
text-decoration none |
||||
|
||||
&:hover |
||||
text-decoration none |
||||
|
||||
p |
||||
line-height 1.5rem |
||||
margin 1em 0 |
||||
|
||||
h1 |
||||
color inherit |
||||
font-size 2.5rem |
||||
font-weight 300 |
||||
margin 0.625rem 0 2.5rem |
||||
position relative |
||||
text-align center |
||||
|
||||
a |
||||
display block |
||||
|
||||
small |
||||
bottom -0.4375rem |
||||
font-size 1rem |
||||
position absolute |
||||
|
||||
blockquote |
||||
font-size 1.5rem |
||||
text-align center |
||||
|
||||
ul |
||||
line-height 1.8 |
||||
list-style-type none |
||||
margin 1em auto |
||||
max-width 500px |
||||
padding 0 |
||||
|
||||
.cover-main > p:last-child a |
||||
border-color var(--theme-color, $color-primary) |
||||
border-radius 2rem |
||||
border-style solid |
||||
border-width 1px |
||||
box-sizing border-box |
||||
color var(--theme-color, $color-primary) |
||||
display inline-block |
||||
font-size 1.05rem |
||||
letter-spacing 0.1rem |
||||
margin 0.5rem 1rem |
||||
padding 0.75em 2rem |
||||
text-decoration none |
||||
transition all 0.15s ease |
||||
|
||||
&:last-child |
||||
background-color var(--theme-color, $color-primary) |
||||
color #fff |
||||
|
||||
&:hover |
||||
color inherit |
||||
opacity 0.8 |
||||
|
||||
&:hover |
||||
color inherit |
||||
|
||||
blockquote > p > a |
||||
border-bottom 2px solid var(--theme-color, $color-primary) |
||||
transition color 0.3s |
||||
|
||||
&:hover |
||||
color var(--theme-color, $color-primary) |
||||
@ -1,571 +0,0 @@ |
||||
* { |
||||
-webkit-font-smoothing: antialiased; |
||||
-webkit-overflow-scrolling: touch; |
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
-webkit-text-size-adjust: none; |
||||
-webkit-touch-callout: none; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body:not(.ready) { |
||||
overflow: hidden; |
||||
|
||||
[data-cloak], |
||||
.app-nav, |
||||
> nav { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
div#app { |
||||
font-size: 30px; |
||||
font-weight: lighter; |
||||
margin: 40vh auto; |
||||
text-align: center; |
||||
|
||||
&:empty::before { |
||||
content: 'Loading...'; |
||||
} |
||||
} |
||||
|
||||
.emoji { |
||||
height: 1.2rem; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.progress { |
||||
background-color: var(--theme-color, $color-primary); |
||||
height: 2px; |
||||
left: 0px; |
||||
position: fixed; |
||||
right: 0px; |
||||
top: 0px; |
||||
transition: width 0.2s, opacity 0.4s; |
||||
width: 0%; |
||||
z-index: 999999; |
||||
} |
||||
|
||||
.search a:hover { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
.search .search-keyword { |
||||
color: var(--theme-color, $color-primary); |
||||
font-style: normal; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
html, |
||||
body { |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
-moz-osx-font-smoothing: grayscale; |
||||
-webkit-font-smoothing: antialiased; |
||||
color: $color-text; |
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; |
||||
font-size: 15px; |
||||
letter-spacing: 0; |
||||
margin: 0; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
a[disabled] { |
||||
cursor: not-allowed; |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
kbd { |
||||
border: solid 1px #ccc; |
||||
border-radius: 3px; |
||||
display: inline-block; |
||||
font-size: 12px !important; |
||||
line-height: 12px; |
||||
margin-bottom: 3px; |
||||
padding: 3px 5px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.task-list-item { |
||||
list-style-type: none; |
||||
} |
||||
|
||||
li input[type='checkbox'] { |
||||
margin: 0 0.2em 0.25em -1.6em; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
/* navbar */ |
||||
.app-nav { |
||||
margin: 25px 60px 0 0; |
||||
position: absolute; |
||||
right: 0; |
||||
text-align: right; |
||||
z-index: 10; |
||||
|
||||
&.no-badge { |
||||
margin-right: 25px; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
|
||||
> a { |
||||
margin: 0 1rem; |
||||
padding: 5px 0; |
||||
} |
||||
|
||||
ul, |
||||
li { |
||||
display: inline-block; |
||||
list-style: none; |
||||
margin: 0; |
||||
} |
||||
|
||||
a { |
||||
color: inherit; |
||||
font-size: 16px; |
||||
text-decoration: none; |
||||
transition: color 0.3s; |
||||
|
||||
&:hover { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
&.active { |
||||
border-bottom: 2px solid var(--theme-color, $color-primary); |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
} |
||||
|
||||
/* navbar dropdown */ |
||||
li { |
||||
display: inline-block; |
||||
margin: 0 1rem; |
||||
padding: 5px 0; |
||||
position: relative; |
||||
|
||||
ul { |
||||
background-color: #fff; |
||||
border: 1px solid #ddd; |
||||
border-bottom-color: #ccc; |
||||
border-radius: 4px; |
||||
box-sizing: border-box; |
||||
display: none; |
||||
max-height: calc(100vh - 61px); |
||||
overflow-y: auto; |
||||
padding: 10px 0; |
||||
position: absolute; |
||||
right: -15px; |
||||
text-align: left; |
||||
top: 100%; |
||||
white-space: nowrap; |
||||
|
||||
li { |
||||
display: block; |
||||
font-size: 14px; |
||||
line-height: 1rem; |
||||
margin: 0; |
||||
margin: 8px 14px; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
a { |
||||
display: block; |
||||
font-size: inherit; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
&.active { |
||||
border-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover ul { |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* github corner */ |
||||
.github-corner { |
||||
border-bottom: 0; |
||||
position: fixed; |
||||
right: 0; |
||||
text-decoration: none; |
||||
top: 0; |
||||
z-index: 1; |
||||
|
||||
&:hover .octo-arm { |
||||
animation: octocat-wave 560ms ease-in-out; |
||||
} |
||||
|
||||
svg { |
||||
color: $color-bg; |
||||
fill: var(--theme-color, $color-primary); |
||||
height: 80px; |
||||
width: 80px; |
||||
} |
||||
} |
||||
|
||||
/* main */ |
||||
main { |
||||
display: block; |
||||
position: relative; |
||||
size: 100vw 100%; |
||||
z-index: 0; |
||||
} |
||||
|
||||
main.hidden { |
||||
display: none; |
||||
} |
||||
|
||||
.anchor { |
||||
display: inline-block; |
||||
text-decoration: none; |
||||
transition: all 0.3s; |
||||
|
||||
span { |
||||
color: $color-text; |
||||
} |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
/* sidebar */ |
||||
.sidebar { |
||||
border-right: 1px solid rgba(0, 0, 0, 0.07); |
||||
overflow-y: auto; |
||||
padding: 40px 0 0; |
||||
position: absolute 0 * 0 0; |
||||
transition: transform 250ms ease-out; |
||||
width: $sidebar-width; |
||||
z-index: 20; |
||||
|
||||
> h1 { |
||||
margin: 0 auto 1rem; |
||||
font-size: 1.5rem; |
||||
font-weight: 300; |
||||
text-align: center; |
||||
|
||||
a { |
||||
color: inherit; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.app-nav { |
||||
display: block; |
||||
position: static; |
||||
} |
||||
} |
||||
|
||||
.sidebar-nav { |
||||
line-height: 2em; |
||||
padding-bottom: 40px; |
||||
} |
||||
|
||||
li.collapse { |
||||
.app-sub-sidebar { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
li > p { |
||||
font-weight: 700; |
||||
margin: 0; |
||||
} |
||||
|
||||
ul, |
||||
ul li { |
||||
list-style: none; |
||||
} |
||||
|
||||
ul li a { |
||||
border-bottom: none; |
||||
display: block; |
||||
} |
||||
|
||||
ul li ul { |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: 4px; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background: transparent; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
&:hover::-webkit-scrollbar-thumb { |
||||
background: rgba(136, 136, 136, 0.4); |
||||
} |
||||
|
||||
&:hover::-webkit-scrollbar-track { |
||||
background: rgba(136, 136, 136, 0.1); |
||||
} |
||||
} |
||||
|
||||
/* sidebar toggle */ |
||||
.sidebar-toggle { |
||||
background-color: transparent; |
||||
background-color: rgba($color-bg, 0.8); |
||||
border: 0; |
||||
outline: none; |
||||
outline: none; |
||||
padding: 10px; |
||||
position: absolute * * 0 0; |
||||
text-align: center; |
||||
transition: opacity 0.3s; |
||||
width: 30px; |
||||
width: calc($sidebar-width - 16px); |
||||
z-index: 30; |
||||
|
||||
.sidebar-toggle-button:hover { |
||||
opacity: 0.4; |
||||
} |
||||
|
||||
span { |
||||
background-color: var(--theme-color, $color-primary); |
||||
display: block; |
||||
margin-bottom: 4px; |
||||
size: 16px 2px; |
||||
} |
||||
} |
||||
|
||||
body.sticky { |
||||
.sidebar, |
||||
.sidebar-toggle { |
||||
position: fixed; |
||||
} |
||||
} |
||||
|
||||
/* main content */ |
||||
.content { |
||||
padding-top: 60px; |
||||
position: absolute 0 0 0 $sidebar-width; |
||||
transition: left 250ms ease; |
||||
} |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section { |
||||
margin: 0 auto; |
||||
max-width: 800px; |
||||
padding: 30px 15px 40px 15px; |
||||
position: relative; |
||||
|
||||
> * { |
||||
box-sizing: border-box; |
||||
font-size: inherit; |
||||
} |
||||
|
||||
> :first-child { |
||||
margin-top: 0 !important; |
||||
} |
||||
} |
||||
|
||||
.markdown-section hr { |
||||
border: none; |
||||
border-bottom: 1px solid #eee; |
||||
margin: 2em 0; |
||||
} |
||||
|
||||
.markdown-section iframe { |
||||
border: 1px solid #eee; |
||||
} |
||||
|
||||
.markdown-section table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
display: block; |
||||
margin-bottom: 1rem; |
||||
overflow: auto; |
||||
width: 100%; |
||||
} |
||||
|
||||
.markdown-section th { |
||||
border: 1px solid #ddd; |
||||
font-weight: bold; |
||||
padding: 6px 13px; |
||||
} |
||||
|
||||
.markdown-section td { |
||||
border: 1px solid #ddd; |
||||
padding: 6px 13px; |
||||
} |
||||
|
||||
.markdown-section tr { |
||||
border-top: 1px solid #ccc; |
||||
&:nth-child(2n) { |
||||
background-color: #f8f8f8; |
||||
} |
||||
} |
||||
|
||||
.markdown-section p.tip { |
||||
background-color: #f8f8f8; |
||||
border-bottom-right-radius: 2px; |
||||
border-left: 4px solid #f66; |
||||
border-top-right-radius: 2px; |
||||
margin: 2em 0; |
||||
padding: 12px 24px 12px 30px; |
||||
position: relative; |
||||
|
||||
&:before { |
||||
background-color: #f66; |
||||
border-radius: 100%; |
||||
color: $color-bg; |
||||
content: '!'; |
||||
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
left: -12px; |
||||
line-height: 20px; |
||||
position: absolute; |
||||
size: 20px; |
||||
text-align: center; |
||||
top: 14px; |
||||
} |
||||
|
||||
code { |
||||
background-color: #efefef; |
||||
} |
||||
|
||||
em { |
||||
color: $color-text; |
||||
} |
||||
} |
||||
|
||||
.markdown-section p.warn { |
||||
background: rgba($color-primary, 0.1); |
||||
border-radius: 2px; |
||||
padding: 1rem; |
||||
} |
||||
|
||||
body.close { |
||||
.sidebar { |
||||
transform: translateX(-$sidebar-width); |
||||
} |
||||
|
||||
.sidebar-toggle { |
||||
width: auto; |
||||
} |
||||
|
||||
.content { |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
@media print { |
||||
.github-corner, |
||||
.sidebar-toggle, |
||||
.sidebar, |
||||
.app-nav { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 768px) { |
||||
.github-corner, |
||||
.sidebar-toggle, |
||||
.sidebar { |
||||
position: fixed; |
||||
} |
||||
|
||||
.app-nav { |
||||
margin-top: 16px; |
||||
} |
||||
|
||||
.app-nav li ul { |
||||
top: 30px; |
||||
} |
||||
|
||||
main { |
||||
height: auto; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
.sidebar { |
||||
left: -$sidebar-width; |
||||
transition: transform 250ms ease-out; |
||||
} |
||||
|
||||
.content { |
||||
left: 0; |
||||
max-width: 100vw; |
||||
position: static; |
||||
padding-top: 20px; |
||||
transition: transform 250ms ease; |
||||
} |
||||
|
||||
.app-nav, |
||||
.github-corner { |
||||
transition: transform 250ms ease-out; |
||||
} |
||||
|
||||
.sidebar-toggle { |
||||
background-color: transparent; |
||||
width: auto; |
||||
padding: 30px 30px 10px 10px; |
||||
} |
||||
|
||||
body.close { |
||||
.sidebar { |
||||
transform: translateX($sidebar-width); |
||||
} |
||||
|
||||
.sidebar-toggle { |
||||
background-color: rgba($color-bg, 0.8); |
||||
transition: 1s background-color; |
||||
width: calc($sidebar-width - 16px); |
||||
padding: 10px; |
||||
} |
||||
|
||||
.content { |
||||
transform: translateX($sidebar-width); |
||||
} |
||||
|
||||
.app-nav, |
||||
.github-corner { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.github-corner { |
||||
&:hover .octo-arm { |
||||
animation: none; |
||||
} |
||||
.octo-arm { |
||||
animation: octocat-wave 560ms ease-in-out; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@keyframes octocat-wave { |
||||
0%, |
||||
100% { |
||||
transform: rotate(0); |
||||
} |
||||
20%, |
||||
60% { |
||||
transform: rotate(-25deg); |
||||
} |
||||
40%, |
||||
80% { |
||||
transform: rotate(10deg); |
||||
} |
||||
} |
||||
@ -0,0 +1,467 @@ |
||||
* |
||||
-webkit-font-smoothing antialiased |
||||
-webkit-overflow-scrolling touch |
||||
-webkit-tap-highlight-color rgba(0, 0, 0, 0) |
||||
-webkit-text-size-adjust none |
||||
-webkit-touch-callout none |
||||
box-sizing border-box |
||||
|
||||
body:not(.ready) |
||||
overflow hidden |
||||
|
||||
[data-cloak], .app-nav, > nav |
||||
display none |
||||
|
||||
div#app |
||||
font-size 30px |
||||
font-weight lighter |
||||
margin 40vh auto |
||||
text-align center |
||||
|
||||
&:empty::before |
||||
content 'Loading...' |
||||
|
||||
.emoji |
||||
height 1.2rem |
||||
vertical-align middle |
||||
|
||||
.progress |
||||
background-color var(--theme-color, $color-primary) |
||||
height 2px |
||||
left 0px |
||||
position fixed |
||||
right 0px |
||||
top 0px |
||||
transition width 0.2s, opacity 0.4s |
||||
width 0% |
||||
z-index 999999 |
||||
|
||||
.search a:hover |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
.search .search-keyword |
||||
color var(--theme-color, $color-primary) |
||||
font-style normal |
||||
font-weight bold |
||||
|
||||
html, body |
||||
height 100% |
||||
|
||||
body |
||||
-moz-osx-font-smoothing grayscale |
||||
-webkit-font-smoothing antialiased |
||||
color $color-text |
||||
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif |
||||
font-size 15px |
||||
letter-spacing 0 |
||||
margin 0 |
||||
overflow-x hidden |
||||
|
||||
img |
||||
max-width 100% |
||||
|
||||
a[disabled] |
||||
cursor not-allowed |
||||
opacity 0.6 |
||||
|
||||
kbd |
||||
border solid 1px #ccc |
||||
border-radius 3px |
||||
display inline-block |
||||
font-size 12px !important |
||||
line-height 12px |
||||
margin-bottom 3px |
||||
padding 3px 5px |
||||
vertical-align middle |
||||
|
||||
.task-list-item |
||||
list-style-type none |
||||
|
||||
li input[type='checkbox'] |
||||
margin 0 0.2em 0.25em -1.6em |
||||
vertical-align middle |
||||
|
||||
/* navbar */ |
||||
.app-nav |
||||
margin 25px 60px 0 0 |
||||
position absolute |
||||
right 0 |
||||
text-align right |
||||
z-index 10 |
||||
|
||||
&.no-badge |
||||
margin-right 25px |
||||
|
||||
p |
||||
margin 0 |
||||
|
||||
> a |
||||
margin 0 1rem |
||||
padding 5px 0 |
||||
|
||||
ul, li |
||||
display inline-block |
||||
list-style none |
||||
margin 0 |
||||
|
||||
a |
||||
color inherit |
||||
font-size 16px |
||||
text-decoration none |
||||
transition color 0.3s |
||||
|
||||
&:hover |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
&.active |
||||
border-bottom 2px solid var(--theme-color, $color-primary) |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
/* navbar dropdown */ |
||||
li |
||||
display inline-block |
||||
margin 0 1rem |
||||
padding 5px 0 |
||||
position relative |
||||
|
||||
ul |
||||
background-color #fff |
||||
border 1px solid #ddd |
||||
border-bottom-color #ccc |
||||
border-radius 4px |
||||
box-sizing border-box |
||||
display none |
||||
max-height calc(100vh - 61px) |
||||
overflow-y auto |
||||
padding 10px 0 |
||||
position absolute |
||||
right -15px |
||||
text-align left |
||||
top 100% |
||||
white-space nowrap |
||||
|
||||
li |
||||
display block |
||||
font-size 14px |
||||
line-height 1rem |
||||
margin 0 |
||||
margin 8px 14px |
||||
white-space nowrap |
||||
|
||||
a |
||||
display block |
||||
font-size inherit |
||||
margin 0 |
||||
padding 0 |
||||
|
||||
&.active |
||||
border-bottom 0 |
||||
|
||||
&:hover ul |
||||
display block |
||||
|
||||
/* github corner */ |
||||
.github-corner |
||||
border-bottom 0 |
||||
position fixed |
||||
right 0 |
||||
text-decoration none |
||||
top 0 |
||||
z-index 1 |
||||
|
||||
&:hover .octo-arm |
||||
animation octocat-wave 560ms ease-in-out |
||||
|
||||
svg |
||||
color $color-bg |
||||
fill var(--theme-color, $color-primary) |
||||
height 80px |
||||
width 80px |
||||
|
||||
/* main */ |
||||
main |
||||
display block |
||||
position relative |
||||
width 100vw |
||||
height 100% |
||||
z-index 0 |
||||
|
||||
main.hidden |
||||
display none |
||||
|
||||
.anchor |
||||
display inline-block |
||||
text-decoration none |
||||
transition all 0.3s |
||||
|
||||
span |
||||
color $color-text |
||||
|
||||
&:hover |
||||
text-decoration underline |
||||
|
||||
/* sidebar */ |
||||
.sidebar |
||||
border-right 1px solid rgba(0, 0, 0, 0.07) |
||||
overflow-y auto |
||||
padding 40px 0 0 |
||||
position absolute |
||||
top 0 |
||||
bottom 0 |
||||
left 0 |
||||
transition transform 250ms ease-out |
||||
width $sidebar-width |
||||
z-index 20 |
||||
|
||||
> h1 |
||||
margin 0 auto 1rem |
||||
font-size 1.5rem |
||||
font-weight 300 |
||||
text-align center |
||||
|
||||
a |
||||
color inherit |
||||
text-decoration none |
||||
|
||||
.app-nav |
||||
display block |
||||
position static |
||||
|
||||
.sidebar-nav |
||||
line-height 2em |
||||
padding-bottom 40px |
||||
|
||||
li.collapse |
||||
.app-sub-sidebar |
||||
display none |
||||
|
||||
ul |
||||
margin 0 |
||||
padding 0 |
||||
|
||||
li > p |
||||
font-weight 700 |
||||
margin 0 |
||||
|
||||
ul, ul li |
||||
list-style none |
||||
|
||||
ul li a |
||||
border-bottom none |
||||
display block |
||||
|
||||
ul li ul |
||||
padding-left 20px |
||||
|
||||
&::-webkit-scrollbar |
||||
width 4px |
||||
|
||||
&::-webkit-scrollbar-thumb |
||||
background transparent |
||||
border-radius 4px |
||||
|
||||
&:hover::-webkit-scrollbar-thumb |
||||
background rgba(136, 136, 136, 0.4) |
||||
|
||||
&:hover::-webkit-scrollbar-track |
||||
background rgba(136, 136, 136, 0.1) |
||||
|
||||
/* sidebar toggle */ |
||||
.sidebar-toggle |
||||
background-color transparent |
||||
background-color rgba($color-bg, 0.8) |
||||
border 0 |
||||
outline none |
||||
padding 10px |
||||
position absolute |
||||
bottom 0 |
||||
left 0 |
||||
text-align center |
||||
transition opacity 0.3s |
||||
width $sidebar-width - 16px |
||||
z-index 30 |
||||
|
||||
.sidebar-toggle-button:hover |
||||
opacity 0.4 |
||||
|
||||
span |
||||
background-color var(--theme-color, $color-primary) |
||||
display block |
||||
margin-bottom 4px |
||||
width 16px |
||||
height 2px |
||||
|
||||
body.sticky |
||||
.sidebar, .sidebar-toggle |
||||
position fixed |
||||
|
||||
/* main content */ |
||||
.content |
||||
padding-top 60px |
||||
position absolute |
||||
top 0 |
||||
right 0 |
||||
bottom 0 |
||||
left $sidebar-width |
||||
transition left 250ms ease |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section |
||||
margin 0 auto |
||||
max-width 800px |
||||
padding 30px 15px 40px 15px |
||||
position relative |
||||
|
||||
> * |
||||
box-sizing border-box |
||||
font-size inherit |
||||
|
||||
> :first-child |
||||
margin-top 0 !important |
||||
|
||||
.markdown-section hr |
||||
border none |
||||
border-bottom 1px solid #eee |
||||
margin 2em 0 |
||||
|
||||
.markdown-section iframe |
||||
border 1px solid #eee |
||||
|
||||
.markdown-section table |
||||
border-collapse collapse |
||||
border-spacing 0 |
||||
display block |
||||
margin-bottom 1rem |
||||
overflow auto |
||||
width 100% |
||||
|
||||
.markdown-section th |
||||
border 1px solid #ddd |
||||
font-weight bold |
||||
padding 6px 13px |
||||
|
||||
.markdown-section td |
||||
border 1px solid #ddd |
||||
padding 6px 13px |
||||
|
||||
.markdown-section tr |
||||
border-top 1px solid #ccc |
||||
|
||||
&:nth-child(2n) |
||||
background-color #f8f8f8 |
||||
|
||||
.markdown-section p.tip |
||||
background-color #f8f8f8 |
||||
border-bottom-right-radius 2px |
||||
border-left 4px solid #f66 |
||||
border-top-right-radius 2px |
||||
margin 2em 0 |
||||
padding 12px 24px 12px 30px |
||||
position relative |
||||
|
||||
&:before |
||||
background-color #f66 |
||||
border-radius 100% |
||||
color $color-bg |
||||
content '!' |
||||
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif |
||||
font-size 14px |
||||
font-weight bold |
||||
left -12px |
||||
line-height 20px |
||||
position absolute |
||||
height 20px |
||||
width 20px |
||||
text-align center |
||||
top 14px |
||||
|
||||
code |
||||
background-color #efefef |
||||
|
||||
em |
||||
color $color-text |
||||
|
||||
.markdown-section p.warn |
||||
background rgba($color-primary, 0.1) |
||||
border-radius 2px |
||||
padding 1rem |
||||
|
||||
body.close |
||||
.sidebar |
||||
transform translateX(-$sidebar-width) |
||||
|
||||
.sidebar-toggle |
||||
width auto |
||||
|
||||
.content |
||||
left 0 |
||||
|
||||
@media print |
||||
.github-corner, .sidebar-toggle, .sidebar, .app-nav |
||||
display none |
||||
|
||||
@media screen and (max-width: 768px) |
||||
.github-corner, .sidebar-toggle, .sidebar |
||||
position fixed |
||||
|
||||
.app-nav |
||||
margin-top 16px |
||||
|
||||
.app-nav li ul |
||||
top 30px |
||||
|
||||
main |
||||
height auto |
||||
overflow-x hidden |
||||
|
||||
.sidebar |
||||
left -$sidebar-width |
||||
transition transform 250ms ease-out |
||||
|
||||
.content |
||||
left 0 |
||||
max-width 100vw |
||||
position static |
||||
padding-top 20px |
||||
transition transform 250ms ease |
||||
|
||||
.app-nav, .github-corner |
||||
transition transform 250ms ease-out |
||||
|
||||
.sidebar-toggle |
||||
background-color transparent |
||||
width auto |
||||
padding 30px 30px 10px 10px |
||||
|
||||
body.close |
||||
.sidebar |
||||
transform translateX($sidebar-width) |
||||
|
||||
.sidebar-toggle |
||||
background-color rgba($color-bg, 0.8) |
||||
transition 1s background-color |
||||
width $sidebar-width - 16px |
||||
padding 10px |
||||
|
||||
.content |
||||
transform translateX($sidebar-width) |
||||
|
||||
.app-nav, .github-corner |
||||
display none |
||||
|
||||
.github-corner |
||||
&:hover .octo-arm |
||||
animation none |
||||
|
||||
.octo-arm |
||||
animation octocat-wave 560ms ease-in-out |
||||
|
||||
@keyframes octocat-wave |
||||
0%, 100% |
||||
transform rotate(0) |
||||
|
||||
20%, 60% |
||||
transform rotate(-25deg) |
||||
|
||||
40%, 80% |
||||
transform rotate(10deg) |
||||
@ -1,241 +0,0 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold'); |
||||
|
||||
$color-primary: #0074d9; |
||||
$color-bg: #fff; |
||||
$color-text: #34495e; |
||||
$sidebar-width: 16rem; |
||||
|
||||
@import 'basic/layout'; |
||||
@import 'basic/coverpage'; |
||||
|
||||
/* sidebar */ |
||||
.sidebar { |
||||
color: #364149; |
||||
background-color: $color-bg; |
||||
|
||||
a { |
||||
color: #666; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
li { |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0.2em 0 0.2em 1rem; |
||||
} |
||||
|
||||
ul li ul { |
||||
padding: 0; |
||||
} |
||||
|
||||
li.active { |
||||
a { |
||||
color: #333; |
||||
} |
||||
|
||||
background-color: #eee; |
||||
} |
||||
} |
||||
|
||||
.markdown-section h1, |
||||
.markdown-section h2, |
||||
.markdown-section h3, |
||||
.markdown-section h4, |
||||
.markdown-section strong { |
||||
color: #333; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.markdown-section a { |
||||
color: var(--theme-color, $color-primary); |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.markdown-section p, |
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
line-height: 1.6rem; |
||||
margin: 0 0 1em 0; |
||||
word-spacing: 0.05rem; |
||||
} |
||||
|
||||
.markdown-section h1 { |
||||
font-size: 2rem; |
||||
font-weight: 500; |
||||
margin: 0 0 1rem; |
||||
} |
||||
|
||||
.markdown-section h2 { |
||||
font-size: 1.8rem; |
||||
font-weight: 400; |
||||
margin: 0 0 1rem 0; |
||||
padding: 1rem 0 0 0; |
||||
} |
||||
|
||||
.markdown-section h3 { |
||||
font-size: 1.5rem; |
||||
margin: 52px 0 1.2rem; |
||||
} |
||||
|
||||
.markdown-section h4 { |
||||
font-size: 1.25rem; |
||||
} |
||||
|
||||
.markdown-section h5 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section h6 { |
||||
color: #777; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section figure, |
||||
.markdown-section p, |
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
margin: 1.2em 0; |
||||
} |
||||
|
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
padding-left: 1.5rem; |
||||
} |
||||
|
||||
.markdown-section li { |
||||
line-height: 1.5; |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown-section blockquote { |
||||
border-left: 4px solid var(--theme-color, $color-primary); |
||||
color: #858585; |
||||
margin: 2em 0; |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
.markdown-section blockquote p { |
||||
font-weight: 600; |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.markdown-section iframe { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown-section em { |
||||
color: #7f8c8d; |
||||
} |
||||
|
||||
.markdown-section code { |
||||
background-color: #f9f9f9; |
||||
border-radius: 3px; |
||||
font-family: Inconsolata; |
||||
padding: 0.2em 0.4rem; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.markdown-section pre { |
||||
background-color: #f9f9f9; |
||||
border-left: 2px solid #eee; |
||||
font-family: Inconsolata; |
||||
font-size: 16px; |
||||
margin: 0 0 1em 0; |
||||
padding: 8px; |
||||
padding: 0 10px 12px 0; |
||||
overflow: auto; |
||||
word-wrap: normal; |
||||
} |
||||
|
||||
/* code highlight */ |
||||
.token.cdata, |
||||
.token.comment, |
||||
.token.doctype, |
||||
.token.prolog { |
||||
color: #93a1a1; /* base1 */ |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #586e75; /* base01 */ |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #268bd2; /* blue */ |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.url, |
||||
.token.inserted { |
||||
color: #2aa198; /* cyan */ |
||||
} |
||||
|
||||
.token.entity { |
||||
color: #657b83; /* base00 */ |
||||
background: #eee8d5; /* base2 */ |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #a11; /* green */ |
||||
} |
||||
|
||||
.token.function { |
||||
color: #b58900; /* yellow */ |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #cb4b16; /* orange */ |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
|
||||
.markdown-section pre > code { |
||||
background-color: #f8f8f8; |
||||
border-radius: 2px; |
||||
display: block; |
||||
font-family: Inconsolata; |
||||
line-height: 1.1rem; |
||||
max-width: inherit; |
||||
overflow: inherit; |
||||
padding: 20px 0.8em 20px; |
||||
position: relative; |
||||
white-space: inherit; |
||||
} |
||||
|
||||
.markdown-section code::after, |
||||
.markdown-section code::before { |
||||
letter-spacing: 0.05rem; |
||||
} |
||||
|
||||
code .token { |
||||
-webkit-font-smoothing: initial; |
||||
-moz-osx-font-smoothing: initial; |
||||
min-height: 1.5rem; |
||||
} |
||||
@ -0,0 +1,172 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold') |
||||
|
||||
$color-primary = #0074d9 |
||||
$color-bg = #fff |
||||
$color-text = #34495e |
||||
$sidebar-width = 16rem |
||||
|
||||
@import 'basic/_layout' |
||||
@import 'basic/_coverpage' |
||||
|
||||
/* sidebar */ |
||||
.sidebar |
||||
color #364149 |
||||
background-color $color-bg |
||||
|
||||
a |
||||
color #666 |
||||
text-decoration none |
||||
|
||||
li |
||||
list-style none |
||||
margin 0 |
||||
padding 0.2em 0 0.2em 1rem |
||||
|
||||
ul li ul |
||||
padding 0 |
||||
|
||||
li.active |
||||
a |
||||
color #333 |
||||
|
||||
background-color #eee |
||||
|
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong |
||||
color #333 |
||||
font-weight 400 |
||||
|
||||
.markdown-section a |
||||
color var(--theme-color, $color-primary) |
||||
font-weight 400 |
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol |
||||
line-height 1.6rem |
||||
margin 0 0 1em 0 |
||||
word-spacing 0.05rem |
||||
|
||||
.markdown-section h1 |
||||
font-size 2rem |
||||
font-weight 500 |
||||
margin 0 0 1rem |
||||
|
||||
.markdown-section h2 |
||||
font-size 1.8rem |
||||
font-weight 400 |
||||
margin 0 0 1rem 0 |
||||
padding 1rem 0 0 0 |
||||
|
||||
.markdown-section h3 |
||||
font-size 1.5rem |
||||
margin 52px 0 1.2rem |
||||
|
||||
.markdown-section h4 |
||||
font-size 1.25rem |
||||
|
||||
.markdown-section h5 |
||||
font-size 1rem |
||||
|
||||
.markdown-section h6 |
||||
color #777 |
||||
font-size 1rem |
||||
|
||||
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol |
||||
margin 1.2em 0 |
||||
|
||||
.markdown-section ul, .markdown-section ol |
||||
padding-left 1.5rem |
||||
|
||||
.markdown-section li |
||||
line-height 1.5 |
||||
margin 0 |
||||
|
||||
.markdown-section blockquote |
||||
border-left 4px solid var(--theme-color, $color-primary) |
||||
color #858585 |
||||
margin 2em 0 |
||||
padding-left 20px |
||||
|
||||
.markdown-section blockquote p |
||||
font-weight 600 |
||||
margin-left 0 |
||||
|
||||
.markdown-section iframe |
||||
margin 1em 0 |
||||
|
||||
.markdown-section em |
||||
color #7f8c8d |
||||
|
||||
.markdown-section code |
||||
background-color #f9f9f9 |
||||
border-radius 3px |
||||
font-family Inconsolata |
||||
padding 0.2em 0.4rem |
||||
white-space nowrap |
||||
|
||||
.markdown-section pre |
||||
background-color #f9f9f9 |
||||
border-left 2px solid #eee |
||||
font-family Inconsolata |
||||
font-size 16px |
||||
margin 0 0 1em 0 |
||||
padding 8px |
||||
padding 0 10px 12px 0 |
||||
overflow auto |
||||
word-wrap normal |
||||
|
||||
/* code highlight */ |
||||
.token.cdata, .token.comment, .token.doctype, .token.prolog |
||||
color #93a1a1 /* base1 */ |
||||
|
||||
.token.punctuation |
||||
color #586e75 /* base01 */ |
||||
|
||||
.namespace |
||||
opacity 0.7 |
||||
|
||||
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted |
||||
color #268bd2 /* blue */ |
||||
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.url, .token.inserted |
||||
color #2aa198 /* cyan */ |
||||
|
||||
.token.entity |
||||
color #657b83 /* base00 */ |
||||
background #eee8d5 /* base2 */ |
||||
|
||||
.token.atrule, .token.attr-value, .token.keyword |
||||
color #a11 /* green */ |
||||
|
||||
.token.function |
||||
color #b58900 /* yellow */ |
||||
|
||||
.token.regex, .token.important, .token.variable |
||||
color #cb4b16 /* orange */ |
||||
|
||||
.token.important, .token.bold |
||||
font-weight bold |
||||
|
||||
.token.italic |
||||
font-style italic |
||||
|
||||
.token.entity |
||||
cursor help |
||||
|
||||
.markdown-section pre > code |
||||
background-color #f8f8f8 |
||||
border-radius 2px |
||||
display block |
||||
font-family Inconsolata |
||||
line-height 1.1rem |
||||
max-width inherit |
||||
overflow inherit |
||||
padding 20px 0.8em 20px |
||||
position relative |
||||
white-space inherit |
||||
|
||||
.markdown-section code::after, .markdown-section code::before |
||||
letter-spacing 0.05rem |
||||
|
||||
code .token |
||||
-webkit-font-smoothing initial |
||||
-moz-osx-font-smoothing initial |
||||
min-height 1.5rem |
||||
@ -1,300 +0,0 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); |
||||
|
||||
$color-primary: #ea6f5a; |
||||
$color-bg: #3f3f3f; |
||||
$color-text: #c8c8c8; |
||||
$sidebar-width: 300px; |
||||
|
||||
@import 'basic/layout'; |
||||
@import 'basic/coverpage'; |
||||
|
||||
body { |
||||
background-color: $color-bg; |
||||
} |
||||
|
||||
/* sidebar */ |
||||
.sidebar { |
||||
background-color: $color-bg; |
||||
color: #c8c8c8; |
||||
|
||||
li { |
||||
margin: 6px 15px; |
||||
} |
||||
|
||||
ul li a { |
||||
color: #c8c8c8; |
||||
font-size: 14px; |
||||
overflow: hidden; |
||||
text-decoration: none; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
ul li ul { |
||||
padding: 0; |
||||
} |
||||
|
||||
ul li.active > a { |
||||
color: var(--theme-color, $color-primary); |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section h1, |
||||
.markdown-section h2, |
||||
.markdown-section h3, |
||||
.markdown-section h4, |
||||
.markdown-section strong { |
||||
color: #657b83; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown-section a { |
||||
color: var(--theme-color, $color-primary); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown-section h1 { |
||||
font-size: 2rem; |
||||
margin: 0 0 1rem; |
||||
} |
||||
|
||||
.markdown-section h2 { |
||||
font-size: 1.75rem; |
||||
margin: 45px 0 0.8rem; |
||||
} |
||||
|
||||
.markdown-section h3 { |
||||
font-size: 1.5rem; |
||||
margin: 40px 0 0.6rem; |
||||
} |
||||
|
||||
.markdown-section h4 { |
||||
font-size: 1.25rem; |
||||
} |
||||
|
||||
.markdown-section h5 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section h6 { |
||||
color: #777; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section figure, |
||||
.markdown-section p, |
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
margin: 1.2em 0; |
||||
} |
||||
|
||||
.markdown-section p, |
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
line-height: 1.6rem; |
||||
word-spacing: 0.05rem; |
||||
} |
||||
|
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
padding-left: 1.5rem; |
||||
} |
||||
|
||||
.markdown-section blockquote { |
||||
border-left: 4px solid var(--theme-color, $color-primary); |
||||
color: #858585; |
||||
margin: 2em 0; |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
.markdown-section blockquote p { |
||||
font-weight: 600; |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.markdown-section iframe { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown-section em { |
||||
color: #7f8c8d; |
||||
} |
||||
|
||||
.markdown-section code { |
||||
background-color: #282828; |
||||
border-radius: 2px; |
||||
color: #657b83; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
font-size: 0.8rem; |
||||
margin: 0 2px; |
||||
padding: 3px 5px; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.markdown-section pre { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
background-color: #282828; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
line-height: 1.5rem; |
||||
margin: 1.2em 0; |
||||
overflow: auto; |
||||
padding: 0 1.4rem; |
||||
position: relative; |
||||
word-wrap: normal; |
||||
} |
||||
|
||||
/* code highlight */ |
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: #8e908c; |
||||
} |
||||
|
||||
.token.namespace { |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.token.boolean, |
||||
.token.number { |
||||
color: #c76b29; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #525252; |
||||
} |
||||
|
||||
.token.property { |
||||
color: #c08b30; |
||||
} |
||||
|
||||
.token.tag { |
||||
color: #2973b7; |
||||
} |
||||
|
||||
.token.string { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
.token.selector { |
||||
color: #6679cc; |
||||
} |
||||
|
||||
.token.attr-name { |
||||
color: #2973b7; |
||||
} |
||||
|
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #22a2c9; |
||||
} |
||||
|
||||
.token.attr-value, |
||||
.token.control, |
||||
.token.directive, |
||||
.token.unit { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
.token.keyword { |
||||
color: #e96900; |
||||
} |
||||
|
||||
.token.statement, |
||||
.token.regex, |
||||
.token.atrule { |
||||
color: #22a2c9; |
||||
} |
||||
|
||||
.token.placeholder, |
||||
.token.variable { |
||||
color: #3d8fd1; |
||||
} |
||||
|
||||
.token.deleted { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
.token.inserted { |
||||
border-bottom: 1px dotted #202746; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.important { |
||||
color: #c94922; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
|
||||
.markdown-section pre > code { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
background-color: #282828; |
||||
border-radius: 2px; |
||||
color: #657b83; |
||||
display: block; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
font-size: 0.8rem; |
||||
line-height: inherit; |
||||
margin: 0 2px; |
||||
max-width: inherit; |
||||
overflow: inherit; |
||||
padding: 2.2em 5px; |
||||
white-space: inherit; |
||||
} |
||||
|
||||
.markdown-section code::after, |
||||
.markdown-section code::before { |
||||
letter-spacing: 0.05rem; |
||||
} |
||||
|
||||
code .token { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
min-height: 1.5rem; |
||||
} |
||||
|
||||
pre::after { |
||||
color: #ccc; |
||||
content: attr(data-lang); |
||||
font-size: 0.6rem; |
||||
font-weight: 600; |
||||
height: 15px; |
||||
line-height: 15px; |
||||
padding: 5px 10px 0; |
||||
position: absolute; |
||||
right: 0; |
||||
text-align: right; |
||||
top: 0; |
||||
} |
||||
|
||||
.markdown-section p.tip { |
||||
background-color: #282828; |
||||
color: #657b83; |
||||
} |
||||
|
||||
input[type='search'] { |
||||
background: #4f4f4f; |
||||
border-color: #4f4f4f; |
||||
color: #c8c8c8; |
||||
} |
||||
@ -0,0 +1,225 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600') |
||||
|
||||
$color-primary = #ea6f5a |
||||
$color-bg = #3f3f3f |
||||
$color-text = #c8c8c8 |
||||
$sidebar-width = 300px |
||||
|
||||
@import 'basic/_layout' |
||||
@import 'basic/_coverpage' |
||||
|
||||
body |
||||
background-color $color-bg |
||||
|
||||
/* sidebar */ |
||||
.sidebar |
||||
background-color $color-bg |
||||
color #c8c8c8 |
||||
|
||||
li |
||||
margin 6px 15px |
||||
|
||||
ul li a |
||||
color #c8c8c8 |
||||
font-size 14px |
||||
overflow hidden |
||||
text-decoration none |
||||
text-overflow ellipsis |
||||
white-space nowrap |
||||
|
||||
&:hover |
||||
text-decoration underline |
||||
|
||||
ul li ul |
||||
padding 0 |
||||
|
||||
ul li.active > a |
||||
color var(--theme-color, $color-primary) |
||||
font-weight 600 |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong |
||||
color #657b83 |
||||
font-weight 600 |
||||
|
||||
.markdown-section a |
||||
color var(--theme-color, $color-primary) |
||||
font-weight 600 |
||||
|
||||
.markdown-section h1 |
||||
font-size 2rem |
||||
margin 0 0 1rem |
||||
|
||||
.markdown-section h2 |
||||
font-size 1.75rem |
||||
margin 45px 0 0.8rem |
||||
|
||||
.markdown-section h3 |
||||
font-size 1.5rem |
||||
margin 40px 0 0.6rem |
||||
|
||||
.markdown-section h4 |
||||
font-size 1.25rem |
||||
|
||||
.markdown-section h5 |
||||
font-size 1rem |
||||
|
||||
.markdown-section h6 |
||||
color #777 |
||||
font-size 1rem |
||||
|
||||
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol |
||||
margin 1.2em 0 |
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol |
||||
line-height 1.6rem |
||||
word-spacing 0.05rem |
||||
|
||||
.markdown-section ul, .markdown-section ol |
||||
padding-left 1.5rem |
||||
|
||||
.markdown-section blockquote |
||||
border-left 4px solid var(--theme-color, $color-primary) |
||||
color #858585 |
||||
margin 2em 0 |
||||
padding-left 20px |
||||
|
||||
.markdown-section blockquote p |
||||
font-weight 600 |
||||
margin-left 0 |
||||
|
||||
.markdown-section iframe |
||||
margin 1em 0 |
||||
|
||||
.markdown-section em |
||||
color #7f8c8d |
||||
|
||||
.markdown-section code |
||||
background-color #282828 |
||||
border-radius 2px |
||||
color #657b83 |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
font-size 0.8rem |
||||
margin 0 2px |
||||
padding 3px 5px |
||||
white-space pre-wrap |
||||
|
||||
.markdown-section pre |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
background-color #282828 |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
line-height 1.5rem |
||||
margin 1.2em 0 |
||||
overflow auto |
||||
padding 0 1.4rem |
||||
position relative |
||||
word-wrap normal |
||||
|
||||
/* code highlight */ |
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata |
||||
color #8e908c |
||||
|
||||
.token.namespace |
||||
opacity 0.7 |
||||
|
||||
.token.boolean, .token.number |
||||
color #c76b29 |
||||
|
||||
.token.punctuation |
||||
color #525252 |
||||
|
||||
.token.property |
||||
color #c08b30 |
||||
|
||||
.token.tag |
||||
color #2973b7 |
||||
|
||||
.token.string |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
.token.selector |
||||
color #6679cc |
||||
|
||||
.token.attr-name |
||||
color #2973b7 |
||||
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string |
||||
color #22a2c9 |
||||
|
||||
.token.attr-value, .token.control, .token.directive, .token.unit |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
.token.keyword |
||||
color #e96900 |
||||
|
||||
.token.statement, .token.regex, .token.atrule |
||||
color #22a2c9 |
||||
|
||||
.token.placeholder, .token.variable |
||||
color #3d8fd1 |
||||
|
||||
.token.deleted |
||||
text-decoration line-through |
||||
|
||||
.token.inserted |
||||
border-bottom 1px dotted #202746 |
||||
text-decoration none |
||||
|
||||
.token.italic |
||||
font-style italic |
||||
|
||||
.token.important, .token.bold |
||||
font-weight bold |
||||
|
||||
.token.important |
||||
color #c94922 |
||||
|
||||
.token.entity |
||||
cursor help |
||||
|
||||
.markdown-section pre > code |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
background-color #282828 |
||||
border-radius 2px |
||||
color #657b83 |
||||
display block |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
font-size 0.8rem |
||||
line-height inherit |
||||
margin 0 2px |
||||
max-width inherit |
||||
overflow inherit |
||||
padding 2.2em 5px |
||||
white-space inherit |
||||
|
||||
.markdown-section code::after, .markdown-section code::before |
||||
letter-spacing 0.05rem |
||||
|
||||
code .token |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
min-height 1.5rem |
||||
|
||||
pre::after |
||||
color #ccc |
||||
content attr(data-lang) |
||||
font-size 0.6rem |
||||
font-weight 600 |
||||
height 15px |
||||
line-height 15px |
||||
padding 5px 10px 0 |
||||
position absolute |
||||
right 0 |
||||
text-align right |
||||
top 0 |
||||
|
||||
.markdown-section p.tip |
||||
background-color #282828 |
||||
color #657b83 |
||||
|
||||
input[type='search'] |
||||
background #4f4f4f |
||||
border-color #4f4f4f |
||||
color #c8c8c8 |
||||
@ -1,6 +0,0 @@ |
||||
$color-primary: #000; |
||||
$color-bg: #fff; |
||||
$color-text: #000; |
||||
$sidebar-width: 300px; |
||||
@import 'basic/layout'; |
||||
@import 'basic/coverpage'; |
||||
@ -0,0 +1,7 @@ |
||||
$color-primary = #000 |
||||
$color-bg = #fff |
||||
$color-text = #000 |
||||
$sidebar-width = 300px |
||||
|
||||
@import 'basic/_layout' |
||||
@import 'basic/_coverpage' |
||||
@ -1,299 +0,0 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600'); |
||||
|
||||
$color-primary: #42b983; |
||||
$color-bg: #fff; |
||||
$color-text: #34495e; |
||||
$sidebar-width: 300px; |
||||
|
||||
@import 'basic/layout'; |
||||
@import 'basic/coverpage'; |
||||
|
||||
body { |
||||
background-color: $color-bg; |
||||
} |
||||
|
||||
/* sidebar */ |
||||
.sidebar { |
||||
background-color: $color-bg; |
||||
color: #364149; |
||||
|
||||
li { |
||||
margin: 6px 0 6px 15px; |
||||
} |
||||
|
||||
ul li a { |
||||
color: #505d6b; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
overflow: hidden; |
||||
text-decoration: none; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
|
||||
ul li ul { |
||||
padding: 0; |
||||
} |
||||
|
||||
ul li.active > a { |
||||
border-right: 2px solid; |
||||
color: var(--theme-color, $color-primary); |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
|
||||
.app-sub-sidebar { |
||||
li { |
||||
&::before { |
||||
content: '-'; |
||||
padding-right: 4px; |
||||
float: left; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section h1, |
||||
.markdown-section h2, |
||||
.markdown-section h3, |
||||
.markdown-section h4, |
||||
.markdown-section strong { |
||||
color: #2c3e50; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown-section a { |
||||
color: var(--theme-color, $color-primary); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown-section h1 { |
||||
font-size: 2rem; |
||||
margin: 0 0 1rem; |
||||
} |
||||
|
||||
.markdown-section h2 { |
||||
font-size: 1.75rem; |
||||
margin: 45px 0 0.8rem; |
||||
} |
||||
|
||||
.markdown-section h3 { |
||||
font-size: 1.5rem; |
||||
margin: 40px 0 0.6rem; |
||||
} |
||||
|
||||
.markdown-section h4 { |
||||
font-size: 1.25rem; |
||||
} |
||||
|
||||
.markdown-section h5 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section h6 { |
||||
color: #777; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.markdown-section figure, |
||||
.markdown-section p { |
||||
margin: 1.2em 0; |
||||
} |
||||
|
||||
.markdown-section p, |
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
line-height: 1.6rem; |
||||
word-spacing: 0.05rem; |
||||
} |
||||
|
||||
.markdown-section ul, |
||||
.markdown-section ol { |
||||
padding-left: 1.5rem; |
||||
} |
||||
|
||||
.markdown-section blockquote { |
||||
border-left: 4px solid var(--theme-color, $color-primary); |
||||
color: #858585; |
||||
margin: 2em 0; |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
.markdown-section blockquote p { |
||||
font-weight: 600; |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.markdown-section iframe { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown-section em { |
||||
color: #7f8c8d; |
||||
} |
||||
|
||||
.markdown-section code { |
||||
background-color: #f8f8f8; |
||||
border-radius: 2px; |
||||
color: #e96900; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
font-size: 0.8rem; |
||||
margin: 0 2px; |
||||
padding: 3px 5px; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.markdown-section pre { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
background-color: #f8f8f8; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
line-height: 1.5rem; |
||||
margin: 1.2em 0; |
||||
overflow: auto; |
||||
padding: 0 1.4rem; |
||||
position: relative; |
||||
word-wrap: normal; |
||||
} |
||||
|
||||
/* code highlight */ |
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: #8e908c; |
||||
} |
||||
|
||||
.token.namespace { |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
.token.boolean, |
||||
.token.number { |
||||
color: #c76b29; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #525252; |
||||
} |
||||
|
||||
.token.property { |
||||
color: #c08b30; |
||||
} |
||||
|
||||
.token.tag { |
||||
color: #2973b7; |
||||
} |
||||
|
||||
.token.string { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
.token.selector { |
||||
color: #6679cc; |
||||
} |
||||
|
||||
.token.attr-name { |
||||
color: #2973b7; |
||||
} |
||||
|
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #22a2c9; |
||||
} |
||||
|
||||
.token.attr-value, |
||||
.token.control, |
||||
.token.directive, |
||||
.token.unit { |
||||
color: var(--theme-color, $color-primary); |
||||
} |
||||
|
||||
.token.keyword { |
||||
color: #e96900; |
||||
} |
||||
|
||||
.token.statement, |
||||
.token.regex, |
||||
.token.atrule { |
||||
color: #22a2c9; |
||||
} |
||||
|
||||
.token.placeholder, |
||||
.token.variable { |
||||
color: #3d8fd1; |
||||
} |
||||
|
||||
.token.deleted { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
.token.inserted { |
||||
border-bottom: 1px dotted #202746; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.important { |
||||
color: #c94922; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
|
||||
.markdown-section pre > code { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
background-color: #f8f8f8; |
||||
border-radius: 2px; |
||||
color: #525252; |
||||
display: block; |
||||
font-family: 'Roboto Mono', Monaco, courier, monospace; |
||||
font-size: 0.8rem; |
||||
line-height: inherit; |
||||
margin: 0 2px; |
||||
max-width: inherit; |
||||
overflow: inherit; |
||||
padding: 2.2em 5px; |
||||
white-space: inherit; |
||||
} |
||||
|
||||
.markdown-section code::after, |
||||
.markdown-section code::before { |
||||
letter-spacing: 0.05rem; |
||||
} |
||||
|
||||
code .token { |
||||
-moz-osx-font-smoothing: initial; |
||||
-webkit-font-smoothing: initial; |
||||
min-height: 1.5rem; |
||||
} |
||||
|
||||
pre::after { |
||||
color: #ccc; |
||||
content: attr(data-lang); |
||||
font-size: 0.6rem; |
||||
font-weight: 600; |
||||
height: 15px; |
||||
line-height: 15px; |
||||
padding: 5px 10px 0; |
||||
position: absolute; |
||||
right: 0; |
||||
text-align: right; |
||||
top: 0; |
||||
} |
||||
@ -0,0 +1,225 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600') |
||||
|
||||
$color-primary = #42b983 |
||||
$color-bg = #fff |
||||
$color-text = #34495e |
||||
$sidebar-width = 300px |
||||
|
||||
@import 'basic/_layout' |
||||
@import 'basic/_coverpage' |
||||
|
||||
body |
||||
background-color $color-bg |
||||
|
||||
/* sidebar */ |
||||
.sidebar |
||||
background-color $color-bg |
||||
color #364149 |
||||
|
||||
li |
||||
margin 6px 0 6px 15px |
||||
|
||||
ul li a |
||||
color #505d6b |
||||
font-size 14px |
||||
font-weight normal |
||||
overflow hidden |
||||
text-decoration none |
||||
text-overflow ellipsis |
||||
white-space nowrap |
||||
|
||||
&:hover |
||||
text-decoration underline |
||||
|
||||
ul li ul |
||||
padding 0 |
||||
|
||||
ul li.active > a |
||||
border-right 2px solid |
||||
color var(--theme-color, $color-primary) |
||||
font-weight 600 |
||||
|
||||
.app-sub-sidebar |
||||
li |
||||
&::before |
||||
content '-' |
||||
padding-right 4px |
||||
float left |
||||
|
||||
/* markdown content found on pages */ |
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong |
||||
color #2c3e50 |
||||
font-weight 600 |
||||
|
||||
.markdown-section a |
||||
color var(--theme-color, $color-primary) |
||||
font-weight 600 |
||||
|
||||
.markdown-section h1 |
||||
font-size 2rem |
||||
margin 0 0 1rem |
||||
|
||||
.markdown-section h2 |
||||
font-size 1.75rem |
||||
margin 45px 0 0.8rem |
||||
|
||||
.markdown-section h3 |
||||
font-size 1.5rem |
||||
margin 40px 0 0.6rem |
||||
|
||||
.markdown-section h4 |
||||
font-size 1.25rem |
||||
|
||||
.markdown-section h5 |
||||
font-size 1rem |
||||
|
||||
.markdown-section h6 |
||||
color #777 |
||||
font-size 1rem |
||||
|
||||
.markdown-section figure, .markdown-section p |
||||
margin 1.2em 0 |
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol |
||||
line-height 1.6rem |
||||
word-spacing 0.05rem |
||||
|
||||
.markdown-section ul, .markdown-section ol |
||||
padding-left 1.5rem |
||||
|
||||
.markdown-section blockquote |
||||
border-left 4px solid var(--theme-color, $color-primary) |
||||
color #858585 |
||||
margin 2em 0 |
||||
padding-left 20px |
||||
|
||||
.markdown-section blockquote p |
||||
font-weight 600 |
||||
margin-left 0 |
||||
|
||||
.markdown-section iframe |
||||
margin 1em 0 |
||||
|
||||
.markdown-section em |
||||
color #7f8c8d |
||||
|
||||
.markdown-section code |
||||
background-color #f8f8f8 |
||||
border-radius 2px |
||||
color #e96900 |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
font-size 0.8rem |
||||
margin 0 2px |
||||
padding 3px 5px |
||||
white-space pre-wrap |
||||
|
||||
.markdown-section pre |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
background-color #f8f8f8 |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
line-height 1.5rem |
||||
margin 1.2em 0 |
||||
overflow auto |
||||
padding 0 1.4rem |
||||
position relative |
||||
word-wrap normal |
||||
|
||||
/* code highlight */ |
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata |
||||
color #8e908c |
||||
|
||||
.token.namespace |
||||
opacity 0.7 |
||||
|
||||
.token.boolean, .token.number |
||||
color #c76b29 |
||||
|
||||
.token.punctuation |
||||
color #525252 |
||||
|
||||
.token.property |
||||
color #c08b30 |
||||
|
||||
.token.tag |
||||
color #2973b7 |
||||
|
||||
.token.string |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
.token.selector |
||||
color #6679cc |
||||
|
||||
.token.attr-name |
||||
color #2973b7 |
||||
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string |
||||
color #22a2c9 |
||||
|
||||
.token.attr-value, .token.control, .token.directive, .token.unit |
||||
color var(--theme-color, $color-primary) |
||||
|
||||
.token.keyword |
||||
color #e96900 |
||||
|
||||
.token.statement, .token.regex, .token.atrule |
||||
color #22a2c9 |
||||
|
||||
.token.placeholder, .token.variable |
||||
color #3d8fd1 |
||||
|
||||
.token.deleted |
||||
text-decoration line-through |
||||
|
||||
.token.inserted |
||||
border-bottom 1px dotted #202746 |
||||
text-decoration none |
||||
|
||||
.token.italic |
||||
font-style italic |
||||
|
||||
.token.important, .token.bold |
||||
font-weight bold |
||||
|
||||
.token.important |
||||
color #c94922 |
||||
|
||||
.token.entity |
||||
cursor help |
||||
|
||||
.markdown-section pre > code |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
background-color #f8f8f8 |
||||
border-radius 2px |
||||
color #525252 |
||||
display block |
||||
font-family 'Roboto Mono', Monaco, courier, monospace |
||||
font-size 0.8rem |
||||
line-height inherit |
||||
margin 0 2px |
||||
max-width inherit |
||||
overflow inherit |
||||
padding 2.2em 5px |
||||
white-space inherit |
||||
|
||||
.markdown-section code::after, .markdown-section code::before |
||||
letter-spacing 0.05rem |
||||
|
||||
code .token |
||||
-moz-osx-font-smoothing initial |
||||
-webkit-font-smoothing initial |
||||
min-height 1.5rem |
||||
|
||||
pre::after |
||||
color #ccc |
||||
content attr(data-lang) |
||||
font-size 0.6rem |
||||
font-weight 600 |
||||
height 15px |
||||
line-height 15px |
||||
padding 5px 10px 0 |
||||
position absolute |
||||
right 0 |
||||
text-align right |
||||
top 0 |
||||
Loading…
Reference in new issue