refactor: build config (#408)
* refactor: build config * chore: fix conflict * fix: 404 page path
This commit is contained in:
cinwell.li
GitHub
parent
9b3b4454de
commit
8352a1e489
64 changed files with 4246 additions and 5512 deletions
|
|
@ -1,3 +1,5 @@
|
|||
.git/
|
||||
.git
|
||||
packages/docsify-server-renderer/build.js
|
||||
node_modules
|
||||
build
|
||||
server.js
|
||||
23
.eslintrc
23
.eslintrc
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@ Move to [awesome-docsify](https://github.com/QingWei-Li/awesome-docsify)
|
|||
|
||||
```bash
|
||||
npm run bootstrap && npm run dev
|
||||
open http://localhost:3000
|
||||
```
|
||||
|
||||
## Backers
|
||||
|
|
|
|||
53
app.js
53
app.js
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
101
build/build.js
101
build/build.js
|
|
@ -1,19 +1,19 @@
|
|||
var rollup = require('rollup')
|
||||
var buble = require('rollup-plugin-buble')
|
||||
var commonjs = require('rollup-plugin-commonjs')
|
||||
var nodeResolve = require('rollup-plugin-node-resolve')
|
||||
var string = require('rollup-plugin-string')
|
||||
var uglify = require('rollup-plugin-uglify')
|
||||
var replace = require('rollup-plugin-replace')
|
||||
var isProd = process.argv[process.argv.length - 1] !== '--dev'
|
||||
var version = process.env.VERSION || require('../package.json').version
|
||||
const rollup = require('rollup')
|
||||
const buble = require('rollup-plugin-buble')
|
||||
const commonjs = require('rollup-plugin-commonjs')
|
||||
const nodeResolve = require('rollup-plugin-node-resolve')
|
||||
const uglify = require('rollup-plugin-uglify')
|
||||
const replace = require('rollup-plugin-replace')
|
||||
const isProd = process.env.NODE_ENV === 'production'
|
||||
const version = process.env.VERSION || require('../package.json').version
|
||||
const chokidar = require('chokidar')
|
||||
const path = require('path')
|
||||
|
||||
var build = function (opts) {
|
||||
const build = function(opts) {
|
||||
rollup
|
||||
.rollup({
|
||||
input: 'src/' + opts.entry,
|
||||
input: opts.input,
|
||||
plugins: (opts.plugins || []).concat([
|
||||
string({ include: '**/*.css' }),
|
||||
buble(),
|
||||
commonjs(),
|
||||
nodeResolve(),
|
||||
|
|
@ -24,7 +24,7 @@ var build = function (opts) {
|
|||
])
|
||||
})
|
||||
.then(function(bundle) {
|
||||
var dest = 'lib/' + (opts.output || opts.entry)
|
||||
var dest = 'lib/' + (opts.output || opts.input)
|
||||
|
||||
console.log(dest)
|
||||
bundle.write({
|
||||
|
|
@ -37,41 +37,82 @@ var build = function (opts) {
|
|||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
const buildCore = function() {
|
||||
build({
|
||||
entry: 'core/index.js',
|
||||
input: 'src/core/index.js',
|
||||
output: 'docsify.js'
|
||||
})
|
||||
|
||||
if (isProd) {
|
||||
build({
|
||||
input: 'src/core/index.js',
|
||||
output: 'docsify.min.js',
|
||||
plugins: [uglify()]
|
||||
})
|
||||
}
|
||||
}
|
||||
const buildAllPlugin = function() {
|
||||
var plugins = [
|
||||
{ name: 'search', entry: 'search/index.js' },
|
||||
{ name: 'ga', entry: 'ga.js' },
|
||||
{ name: 'emoji', entry: 'emoji.js' },
|
||||
{ name: 'external-script', entry: 'external-script.js' },
|
||||
{ name: 'front-matter', entry: 'front-matter/index.js' },
|
||||
{ name: 'zoom-image', entry: 'zoom-image.js' },
|
||||
{ name: 'disqus', entry: 'disqus.js' },
|
||||
{ name: 'gitalk', entry: 'gitalk.js' }
|
||||
{name: 'search', input: 'search/index.js'},
|
||||
{name: 'ga', input: 'ga.js'},
|
||||
{name: 'emoji', input: 'emoji.js'},
|
||||
{name: 'external-script', input: 'external-script.js'},
|
||||
{name: 'front-matter', input: 'front-matter/index.js'},
|
||||
{name: 'zoom-image', input: 'zoom-image.js'},
|
||||
{name: 'disqus', input: 'disqus.js'},
|
||||
{name: 'gitalk', input: 'gitalk.js'}
|
||||
]
|
||||
|
||||
plugins.forEach(item => {
|
||||
build({
|
||||
entry: 'plugins/' + item.entry,
|
||||
input: 'src/plugins/' + item.input,
|
||||
output: 'plugins/' + item.name + '.js'
|
||||
})
|
||||
})
|
||||
|
||||
if (isProd) {
|
||||
build({
|
||||
entry: 'core/index.js',
|
||||
output: 'docsify.min.js',
|
||||
plugins: [uglify()]
|
||||
})
|
||||
plugins.forEach(item => {
|
||||
build({
|
||||
entry: 'plugins/' + item.entry,
|
||||
input: 'src/plugins/' + item.input,
|
||||
output: 'plugins/' + item.name + '.min.js',
|
||||
plugins: [uglify()]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!isProd) {
|
||||
chokidar
|
||||
.watch(['src/core', 'src/plugins'], {
|
||||
atomic: true,
|
||||
awaitWriteFinish: {
|
||||
stabilityThreshold: 1000,
|
||||
pollInterval: 100
|
||||
}
|
||||
})
|
||||
.on('change', p => {
|
||||
console.log('[watch] ', p)
|
||||
const dirs = p.split(path.sep)
|
||||
if (dirs[1] === 'core') {
|
||||
buildCore()
|
||||
} else if (dirs[2]) {
|
||||
const name = path.basename(dirs[2], '.js')
|
||||
const input = `src/plugins/${name}${
|
||||
/\.js/.test(dirs[2]) ? '' : '/index'
|
||||
}.js`
|
||||
|
||||
build({
|
||||
input,
|
||||
output: 'plugins/' + name + '.js'
|
||||
})
|
||||
}
|
||||
})
|
||||
.on('ready', () => {
|
||||
console.log('[start]')
|
||||
buildCore()
|
||||
buildAllPlugin()
|
||||
})
|
||||
} else {
|
||||
buildCore()
|
||||
buildAllPlugin()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>docsify</title>
|
||||
|
|
@ -14,6 +15,7 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
|
|
@ -22,6 +24,7 @@
|
|||
'.*?/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
|
||||
'/.*/_navbar.md': '/_navbar.md'
|
||||
},
|
||||
notFoundPage: '_404.html',
|
||||
auto2top: true,
|
||||
basePath: '/docs/',
|
||||
executeScript: true,
|
||||
|
|
@ -50,4 +53,5 @@
|
|||
</script>
|
||||
<script src="/lib/docsify.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
5743
package-lock.json
generated
5743
package-lock.json
generated
File diff suppressed because it is too large
Load diff
56
package.json
56
package.json
|
|
@ -14,20 +14,27 @@
|
|||
"url": "git+https://github.com/QingWei-Li/docsify.git"
|
||||
},
|
||||
"main": "lib/docsify.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"src",
|
||||
"themes"
|
||||
],
|
||||
"files": ["lib", "src", "themes"],
|
||||
"scripts": {
|
||||
"bootstrap": "npm i && lerna bootstrap && npm run build:ssr",
|
||||
"build": "rimraf lib themes && node build/build && mkdir lib/themes && mkdir themes && node build/build-css && npm run build:ssr && node build/build-cover",
|
||||
"dev:build": "rimraf lib themes && mkdir themes && node build/build --dev && node build/build-css --dev",
|
||||
"dev:watch": "nodemon -w ./src/ -e js,css --exec \"npm run dev:build\"",
|
||||
"dev": "concurrently \"node app\" \"npm run dev:watch\"",
|
||||
"build:ssr": "node build/build-ssr",
|
||||
"test": "eslint {src,packages} --fix",
|
||||
"pub:next": "RELEASE_TAG=next sh build/release.sh",
|
||||
"serve": "node server",
|
||||
"serve:ssr": "cross-env SSR=1 node server",
|
||||
"dev": "run-p serve watch:*",
|
||||
"dev:ssr": "run-p serve:ssr watch:*",
|
||||
"lint": "eslint {src,packages} --fix",
|
||||
"test": "run-p lint",
|
||||
"css": "stylus src/themes/*.styl -u autoprefixer-stylus",
|
||||
"watch:css": "run-p 'css -- -o themes -w'",
|
||||
"watch:js": "node build/build.js",
|
||||
"build:css:min":
|
||||
"mkdir lib/themes && run-p 'css -- -o lib/themes' && cssnano lib/themes/*",
|
||||
"build:css": "mkdir themes && run-p 'css -- -o themes'",
|
||||
"build:js": "cross-env NODE_ENV=production node build/build.js",
|
||||
"build:ssr": "node build/ssr.js",
|
||||
"build:cover": "node build/cover.js",
|
||||
"build":
|
||||
"rimraf lib themes && run-s build:js build:css build:css:min build:ssr build:cover",
|
||||
"pub:next": "cross-env RELEASE_TAG=next sh build/release.sh",
|
||||
"pub": "sh build/release.sh",
|
||||
"postinstall": "opencollective postinstall"
|
||||
},
|
||||
|
|
@ -40,16 +47,16 @@
|
|||
"tweezer.js": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^3.5.1",
|
||||
"autoprefixer-stylus": "^0.14.0",
|
||||
"chokidar": "^2.0.2",
|
||||
"conventional-changelog-cli": "^1.3.5",
|
||||
"cssnano": "^3.10.0",
|
||||
"cross-env": "^5.1.3",
|
||||
"cssnano-cli": "^1.0.5",
|
||||
"eslint": "^4.14.0",
|
||||
"eslint-config-vue": "^2.0.2",
|
||||
"eslint-plugin-vue": "^4.0.1",
|
||||
"eslint-config-xo-space": "^0.18.0",
|
||||
"lerna": "^2.5.1",
|
||||
"nodemon": "^1.14.7",
|
||||
"postcss": "^5.2.16",
|
||||
"postcss-salad": "^1.0.8",
|
||||
"live-server": "^1.2.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"rimraf": "^2.6.2",
|
||||
"rollup": "^0.53.3",
|
||||
"rollup-plugin-async": "^1.2.0",
|
||||
|
|
@ -57,17 +64,10 @@
|
|||
"rollup-plugin-commonjs": "^8.2.6",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-string": "^2.0.2",
|
||||
"rollup-plugin-uglify": "^2.0.1",
|
||||
"serve-static": "^1.13.1"
|
||||
"stylus": "^0.54.5"
|
||||
},
|
||||
"keywords": [
|
||||
"doc",
|
||||
"docs",
|
||||
"documentation",
|
||||
"creator",
|
||||
"generator"
|
||||
],
|
||||
"keywords": ["doc", "docs", "documentation", "creator", "generator"],
|
||||
"collective": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/docsify",
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ export default class Renderer {
|
|||
async _render(path, type) {
|
||||
let html = await this._loadFile(path)
|
||||
const {subMaxLevel, maxLevel} = this.config
|
||||
let tokens
|
||||
|
||||
switch (type) {
|
||||
case 'sidebar':
|
||||
|
|
@ -122,7 +123,7 @@ export default class Renderer {
|
|||
html = this.compiler.cover(html)
|
||||
break
|
||||
case 'main':
|
||||
const tokens = await new Promise(r => {
|
||||
tokens = await new Promise(r => {
|
||||
prerenderEmbed(
|
||||
{
|
||||
fetch: url => this._loadFile(this._getPath(url)),
|
||||
|
|
@ -150,7 +151,9 @@ export default class Renderer {
|
|||
try {
|
||||
if (isAbsolutePath(filePath)) {
|
||||
const res = await fetch(filePath)
|
||||
if (!res.ok) throw Error()
|
||||
if (!res.ok) {
|
||||
throw Error()
|
||||
}
|
||||
content = await res.text()
|
||||
this.lock = 0
|
||||
} else {
|
||||
|
|
@ -166,8 +169,11 @@ export default class Renderer {
|
|||
}
|
||||
|
||||
const fileName = basename(filePath)
|
||||
const result = await this._loadFile(
|
||||
resolvePathname(`../${fileName}`, filePath)
|
||||
)
|
||||
|
||||
return await this._loadFile(resolvePathname(`../${fileName}`, filePath))
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
55
server.js
Normal file
55
server.js
Normal file
|
|
@ -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,4 +1,4 @@
|
|||
import { merge, hyphenate, isPrimitive } from './util/core'
|
||||
import {merge, hyphenate, isPrimitive, hasOwn} from './util/core'
|
||||
|
||||
const config = merge(
|
||||
{
|
||||
|
|
@ -37,18 +37,30 @@ const script =
|
|||
|
||||
if (script) {
|
||||
for (const prop in config) {
|
||||
if (hasOwn.call(config, prop)) {
|
||||
const val = script.getAttribute('data-' + hyphenate(prop))
|
||||
|
||||
if (isPrimitive(val)) {
|
||||
config[prop] = val === '' ? true : val
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (config.loadSidebar === true) config.loadSidebar = '_sidebar' + config.ext
|
||||
if (config.loadNavbar === true) config.loadNavbar = '_navbar' + config.ext
|
||||
if (config.coverpage === true) config.coverpage = '_coverpage' + config.ext
|
||||
if (config.repo === true) config.repo = ''
|
||||
if (config.name === true) config.name = ''
|
||||
if (config.loadSidebar === true) {
|
||||
config.loadSidebar = '_sidebar' + config.ext
|
||||
}
|
||||
if (config.loadNavbar === true) {
|
||||
config.loadNavbar = '_navbar' + config.ext
|
||||
}
|
||||
if (config.coverpage === true) {
|
||||
config.coverpage = '_coverpage' + config.ext
|
||||
}
|
||||
if (config.repo === true) {
|
||||
config.repo = ''
|
||||
}
|
||||
if (config.name === true) {
|
||||
config.name = ''
|
||||
}
|
||||
}
|
||||
|
||||
window.$docsify = config
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ let enableScrollEvent = true
|
|||
let coverHeight = 0
|
||||
|
||||
function scrollTo(el) {
|
||||
if (scroller) scroller.stop()
|
||||
if (scroller) {
|
||||
scroller.stop()
|
||||
}
|
||||
enableScrollEvent = false
|
||||
scroller = new Tweezer({
|
||||
start: window.pageYOffset,
|
||||
|
|
@ -25,7 +27,9 @@ function scrollTo (el) {
|
|||
}
|
||||
|
||||
function highlight(path) {
|
||||
if (!enableScrollEvent) return
|
||||
if (!enableScrollEvent) {
|
||||
return
|
||||
}
|
||||
const sidebar = dom.getNode('.sidebar')
|
||||
const anchors = dom.findAll('.anchor')
|
||||
const wrap = dom.find(sidebar, '.sidebar-nav')
|
||||
|
|
@ -38,22 +42,28 @@ function highlight (path) {
|
|||
const node = anchors[i]
|
||||
|
||||
if (node.offsetTop > top) {
|
||||
if (!last) last = node
|
||||
if (!last) {
|
||||
last = node
|
||||
}
|
||||
break
|
||||
} else {
|
||||
last = node
|
||||
}
|
||||
}
|
||||
if (!last) return
|
||||
if (!last) {
|
||||
return
|
||||
}
|
||||
const li = nav[getNavKey(path, last.getAttribute('data-id'))]
|
||||
|
||||
if (!li || li === active) return
|
||||
if (!li || li === active) {
|
||||
return
|
||||
}
|
||||
|
||||
active && active.classList.remove('active')
|
||||
li.classList.add('active')
|
||||
active = li
|
||||
|
||||
// scroll into view
|
||||
// Scroll into view
|
||||
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
|
||||
if (!hoverOver && dom.body.classList.contains('sticky')) {
|
||||
const height = sidebar.clientHeight
|
||||
|
|
@ -82,18 +92,26 @@ export function scrollActiveSidebar (router) {
|
|||
for (let i = 0, len = lis.length; i < len; i += 1) {
|
||||
const li = lis[i]
|
||||
const a = li.querySelector('a')
|
||||
if (!a) continue
|
||||
if (!a) {
|
||||
continue
|
||||
}
|
||||
let href = a.getAttribute('href')
|
||||
|
||||
if (href !== '/') {
|
||||
const {query: {id}, path} = router.parse(href)
|
||||
if (id) href = getNavKey(path, id)
|
||||
if (id) {
|
||||
href = getNavKey(path, id)
|
||||
}
|
||||
}
|
||||
|
||||
if (href) nav[decodeURIComponent(href)] = li
|
||||
if (href) {
|
||||
nav[decodeURIComponent(href)] = li
|
||||
}
|
||||
}
|
||||
|
||||
if (isMobile) return
|
||||
if (isMobile) {
|
||||
return
|
||||
}
|
||||
const path = router.getCurrentPath()
|
||||
dom.off('scroll', () => highlight(path))
|
||||
dom.on('scroll', () => highlight(path))
|
||||
|
|
@ -106,7 +124,9 @@ export function scrollActiveSidebar (router) {
|
|||
}
|
||||
|
||||
export function scrollIntoView(path, id) {
|
||||
if (!id) return
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
|
||||
const section = dom.find('#' + id)
|
||||
section && scrollTo(section)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const title = dom.$.title
|
|||
/**
|
||||
* Toggle button
|
||||
*/
|
||||
export function btn (el, router) {
|
||||
export function btn(el) {
|
||||
const toggle = _ => dom.body.classList.toggle('close')
|
||||
|
||||
el = dom.getNode(el)
|
||||
|
|
@ -22,7 +22,7 @@ export function btn (el, router) {
|
|||
)
|
||||
}
|
||||
|
||||
export function collapse (el, router) {
|
||||
export function collapse(el) {
|
||||
el = dom.getNode(el)
|
||||
|
||||
dom.on(el, 'click', ({target}) => {
|
||||
|
|
@ -38,7 +38,9 @@ export function collapse (el, router) {
|
|||
|
||||
export function sticky() {
|
||||
const cover = dom.getNode('section.cover')
|
||||
if (!cover) return
|
||||
if (!cover) {
|
||||
return
|
||||
}
|
||||
const coverHeight = cover.getBoundingClientRect().height
|
||||
|
||||
if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import progressbar from '../render/progressbar'
|
||||
import { noop } from '../util/core'
|
||||
import {noop, hasOwn} from '../util/core'
|
||||
|
||||
const cache = {}
|
||||
|
||||
|
|
@ -22,8 +22,10 @@ export function get (url, hasBar = false, headers = {}) {
|
|||
|
||||
xhr.open('GET', url)
|
||||
for (const i in headers) {
|
||||
if (hasOwn.call(headers, i)) {
|
||||
xhr.setRequestHeader(i, headers[i])
|
||||
}
|
||||
}
|
||||
xhr.send()
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ function loadNested (path, qs, file, next, vm, first) {
|
|||
path = first ? path : path.replace(/\/$/, '')
|
||||
path = getParentPath(path)
|
||||
|
||||
if (!path) return
|
||||
if (!path) {
|
||||
return
|
||||
}
|
||||
|
||||
get(
|
||||
vm.router.getFile(path + file) + qs,
|
||||
|
|
@ -30,25 +32,37 @@ export function fetchMixin (proto) {
|
|||
const get404Path = (path, config) => {
|
||||
const {notFoundPage, ext} = config
|
||||
const defaultPath = '_404' + (ext || '.md')
|
||||
let key
|
||||
let path404
|
||||
|
||||
switch (typeof notFoundPage) {
|
||||
case 'boolean':
|
||||
return defaultPath
|
||||
path404 = defaultPath
|
||||
break
|
||||
case 'string':
|
||||
return notFoundPage
|
||||
case 'object':
|
||||
const key = Object
|
||||
.keys(notFoundPage)
|
||||
.sort((a, b) => b.length - a.length)
|
||||
.find((key) => path.match(new RegExp('^' + key)))
|
||||
path404 = notFoundPage
|
||||
break
|
||||
|
||||
return key && notFoundPage[key] || defaultPath
|
||||
case 'object':
|
||||
key = Object.keys(notFoundPage)
|
||||
.sort((a, b) => b.length - a.length)
|
||||
.find(key => path.match(new RegExp('^' + key)))
|
||||
|
||||
path404 = (key && notFoundPage[key]) || defaultPath
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return path404
|
||||
}
|
||||
|
||||
proto._loadSideAndNav = function (path, qs, loadSidebar, cb) {
|
||||
return () => {
|
||||
if (!loadSidebar) return cb()
|
||||
if (!loadSidebar) {
|
||||
return cb()
|
||||
}
|
||||
|
||||
const fn = result => {
|
||||
this._renderSidebar(result)
|
||||
|
|
@ -73,9 +87,13 @@ export function fetchMixin (proto) {
|
|||
this.isHTML = /\.html$/g.test(file)
|
||||
|
||||
// Load main content
|
||||
req
|
||||
.then(
|
||||
(text, opt) => this._renderMain(text, opt, this._loadSideAndNav(path, qs, loadSidebar, cb)),
|
||||
req.then(
|
||||
(text, opt) =>
|
||||
this._renderMain(
|
||||
text,
|
||||
opt,
|
||||
this._loadSideAndNav(path, qs, loadSidebar, cb)
|
||||
),
|
||||
_ => {
|
||||
this._fetchFallbackPage(file, qs, cb) || this._fetch404(file, qs, cb)
|
||||
}
|
||||
|
|
@ -112,7 +130,7 @@ export function fetchMixin (proto) {
|
|||
path = cover === true ? '_coverpage' : cover
|
||||
}
|
||||
|
||||
const coverOnly = !!path && this.config.onlyCover
|
||||
const coverOnly = Boolean(path) && this.config.onlyCover
|
||||
if (path) {
|
||||
path = this.router.getFile(root + path)
|
||||
this.coverIsHTML = /\.html$/g.test(path)
|
||||
|
|
@ -137,7 +155,7 @@ export function fetchMixin (proto) {
|
|||
if (onlyCover) {
|
||||
done()
|
||||
} else {
|
||||
this._fetch(result => {
|
||||
this._fetch(() => {
|
||||
this.$resetEvents()
|
||||
done()
|
||||
})
|
||||
|
|
@ -160,7 +178,12 @@ export function fetchMixin (proto) {
|
|||
const req = request(newPath + qs, true, requestHeaders)
|
||||
|
||||
req.then(
|
||||
(text, opt) => this._renderMain(text, opt, this._loadSideAndNav(path, qs, loadSidebar, cb)),
|
||||
(text, opt) =>
|
||||
this._renderMain(
|
||||
text,
|
||||
opt,
|
||||
this._loadSideAndNav(path, qs, loadSidebar, cb)
|
||||
),
|
||||
() => this._fetch404(path, qs, cb)
|
||||
)
|
||||
|
||||
|
|
@ -178,10 +201,10 @@ export function fetchMixin (proto) {
|
|||
const {loadSidebar, requestHeaders, notFoundPage} = this.config
|
||||
|
||||
const fnLoadSideAndNav = this._loadSideAndNav(path, qs, loadSidebar, cb)
|
||||
|
||||
if (notFoundPage) {
|
||||
request(get404Path(path, this.config), true, requestHeaders)
|
||||
.then(
|
||||
const path404 = get404Path(path, this.config)
|
||||
|
||||
request(this.router.getFile(path404), true, requestHeaders).then(
|
||||
(text, opt) => this._renderMain(text, opt, fnLoadSideAndNav),
|
||||
() => this._renderMain(null, {}, fnLoadSideAndNav)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -25,8 +25,7 @@ export function callHook (vm, hook, data, next = noop) {
|
|||
const hook = queue[index]
|
||||
if (index >= queue.length) {
|
||||
next(data)
|
||||
} else {
|
||||
if (typeof hook === 'function') {
|
||||
} else if (typeof hook === 'function') {
|
||||
if (hook.length === 2) {
|
||||
hook(data, result => {
|
||||
data = result
|
||||
|
|
@ -34,14 +33,13 @@ export function callHook (vm, hook, data, next = noop) {
|
|||
})
|
||||
} else {
|
||||
const result = hook(data)
|
||||
data = result !== undefined ? result : data
|
||||
data = result === undefined ? data : result
|
||||
step(index + 1)
|
||||
}
|
||||
} else {
|
||||
step(index + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
step(0)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@ const compileMedia = {
|
|||
let lang = url.match(/\.(\w+)$/)
|
||||
|
||||
lang = title || (lang && lang[1])
|
||||
if (lang === 'md') lang = 'markdown'
|
||||
if (lang === 'md') {
|
||||
lang = 'markdown'
|
||||
}
|
||||
|
||||
return {
|
||||
url,
|
||||
|
|
@ -86,7 +88,9 @@ export class Compiler {
|
|||
this.compile = cached(text => {
|
||||
let html = ''
|
||||
|
||||
if (!text) return text
|
||||
if (!text) {
|
||||
return text
|
||||
}
|
||||
|
||||
if (isPrimitive(text)) {
|
||||
html = compile(text)
|
||||
|
|
@ -154,7 +158,7 @@ export class Compiler {
|
|||
const origin = {}
|
||||
|
||||
/**
|
||||
* render anchor tag
|
||||
* Render anchor tag
|
||||
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
||||
*/
|
||||
origin.heading = renderer.heading = function (text, level) {
|
||||
|
|
@ -179,7 +183,7 @@ export class Compiler {
|
|||
|
||||
return `<h${level} id="${slug}"><a href="${url}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
|
||||
}
|
||||
// highlight code
|
||||
// Highlight code
|
||||
origin.code = renderer.code = function (code, lang = '') {
|
||||
code = code.replace(/@DOCSIFY_QM@/g, '`')
|
||||
const hl = Prism.highlight(
|
||||
|
|
@ -200,7 +204,9 @@ export class Compiler {
|
|||
!_self._matchNotCompileLink(href) &&
|
||||
!config.ignore
|
||||
) {
|
||||
if (href === _self.config.homepage) href = 'README'
|
||||
if (href === _self.config.homepage) {
|
||||
href = 'README'
|
||||
}
|
||||
href = router.toURL(href, null, router.getCurrentPath())
|
||||
} else {
|
||||
attrs += ` target="${linkTarget}"`
|
||||
|
|
@ -222,12 +228,15 @@ export class Compiler {
|
|||
return `<a href="${href}"${attrs}>${text}</a>`
|
||||
}
|
||||
origin.paragraph = renderer.paragraph = function (text) {
|
||||
let result
|
||||
if (/^!>/.test(text)) {
|
||||
return helperTpl('tip', text)
|
||||
result = helperTpl('tip', text)
|
||||
} else if (/^\?>/.test(text)) {
|
||||
return helperTpl('warn', text)
|
||||
result = helperTpl('warn', text)
|
||||
} else {
|
||||
result = `<p>${text}</p>`
|
||||
}
|
||||
return `<p>${text}</p>`
|
||||
return result
|
||||
}
|
||||
origin.image = renderer.image = function (href, title, text) {
|
||||
let url = href
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* gen toc tree
|
||||
* Gen toc tree
|
||||
* @link https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
|
||||
* @param {Array} toc
|
||||
* @param {Number} maxLevel
|
||||
|
|
@ -13,7 +13,9 @@ export function genTree (toc, maxLevel) {
|
|||
const level = headline.level || 1
|
||||
const len = level - 1
|
||||
|
||||
if (level > maxLevel) return
|
||||
if (level > maxLevel) {
|
||||
return
|
||||
}
|
||||
if (last[len]) {
|
||||
last[len].children = (last[len].children || []).concat(headline)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,13 @@ function executeScript () {
|
|||
const script = dom
|
||||
.findAll('.markdown-section>script')
|
||||
.filter(s => !/template/.test(s.type))[0]
|
||||
if (!script) return false
|
||||
if (!script) {
|
||||
return false
|
||||
}
|
||||
const code = script.innerText.trim()
|
||||
if (!code) return false
|
||||
if (!code) {
|
||||
return false
|
||||
}
|
||||
|
||||
setTimeout(_ => {
|
||||
window.__EXECUTE_RESULT__ = new Function(code)()
|
||||
|
|
@ -26,9 +30,9 @@ function executeScript () {
|
|||
|
||||
function formatUpdated(html, updated, fn) {
|
||||
updated =
|
||||
typeof fn === 'function'
|
||||
? fn(updated)
|
||||
: typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated
|
||||
typeof fn === 'function' ?
|
||||
fn(updated) :
|
||||
typeof fn === 'string' ? tinydate(fn)(new Date(updated)) : updated
|
||||
|
||||
return html.replace(/{docsify-updated}/g, updated)
|
||||
}
|
||||
|
|
@ -42,7 +46,7 @@ function renderMain (html) {
|
|||
// Render sidebar with the TOC
|
||||
!this.config.loadSidebar && this._renderSidebar()
|
||||
|
||||
// execute script
|
||||
// Execute script
|
||||
if (
|
||||
this.config.executeScript !== false &&
|
||||
typeof window.Vue !== 'undefined' &&
|
||||
|
|
@ -63,7 +67,9 @@ function renderNameLink (vm) {
|
|||
const nameLink = vm.config.nameLink
|
||||
const path = vm.route.path
|
||||
|
||||
if (!el) return
|
||||
if (!el) {
|
||||
return
|
||||
}
|
||||
|
||||
if (isPrimitive(vm.config.nameLink)) {
|
||||
el.setAttribute('href', nameLink)
|
||||
|
|
@ -77,7 +83,9 @@ function renderNameLink (vm) {
|
|||
export function renderMixin(proto) {
|
||||
proto._renderTo = function (el, content, replace) {
|
||||
const node = dom.getNode(el)
|
||||
if (node) node[replace ? 'outerHTML' : 'innerHTML'] = content
|
||||
if (node) {
|
||||
node[replace ? 'outerHTML' : 'innerHTML'] = content
|
||||
}
|
||||
}
|
||||
|
||||
proto._renderSidebar = function (text) {
|
||||
|
|
@ -89,10 +97,10 @@ export function renderMixin (proto) {
|
|||
activeEl.parentNode.innerHTML +=
|
||||
this.compiler.subSidebar(subMaxLevel) || ''
|
||||
} else {
|
||||
// reset toc
|
||||
// Reset toc
|
||||
this.compiler.subSidebar()
|
||||
}
|
||||
// bind event
|
||||
// Bind event
|
||||
this._bindEventOnRendered(activeEl)
|
||||
}
|
||||
|
||||
|
|
@ -192,7 +200,7 @@ export function renderMixin (proto) {
|
|||
}
|
||||
|
||||
proto._updateRender = function () {
|
||||
// render name link
|
||||
// Render name link
|
||||
renderNameLink(this)
|
||||
}
|
||||
}
|
||||
|
|
@ -203,7 +211,7 @@ export function initRender (vm) {
|
|||
// Init markdown compiler
|
||||
vm.compiler = new Compiler(config, vm.router)
|
||||
if (inBrowser) {
|
||||
window['__current_docsify_compiler__'] = vm.compiler
|
||||
window.__current_docsify_compiler__ = vm.compiler
|
||||
}
|
||||
|
||||
const id = config.el || '#app'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import {hasOwn} from '../util/core'
|
||||
|
||||
let cache = {}
|
||||
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
|
||||
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g
|
||||
|
||||
function lower(string) {
|
||||
return string.toLowerCase()
|
||||
}
|
||||
|
||||
export function slugify(str) {
|
||||
if (typeof str !== 'string') return ''
|
||||
if (typeof str !== 'string') {
|
||||
return ''
|
||||
}
|
||||
|
||||
let slug = str
|
||||
.trim()
|
||||
|
|
@ -18,7 +22,7 @@ export function slugify (str) {
|
|||
.replace(/^(\d)/, '_$1')
|
||||
let count = cache[slug]
|
||||
|
||||
count = cache.hasOwnProperty(slug) ? count + 1 : 0
|
||||
count = hasOwn.call(cache, slug) ? count + 1 : 0
|
||||
cache[slug] = count
|
||||
|
||||
if (count) {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,12 @@ import { isMobile } from '../util/env'
|
|||
* @return {String}
|
||||
*/
|
||||
export function corner(data) {
|
||||
if (!data) return ''
|
||||
if (!/\/\//.test(data)) data = 'https://github.com/' + data
|
||||
if (!data) {
|
||||
return ''
|
||||
}
|
||||
if (!/\/\//.test(data)) {
|
||||
data = 'https://github.com/' + data
|
||||
}
|
||||
data = data.replace(/^git\+/, '')
|
||||
|
||||
return (
|
||||
|
|
@ -31,9 +35,9 @@ export function main (config) {
|
|||
'</div>' +
|
||||
'</button>' +
|
||||
'<aside class="sidebar">' +
|
||||
(config.name
|
||||
? `<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>`
|
||||
: '') +
|
||||
(config.name ?
|
||||
`<h1><a class="app-name-link" data-nosearch>${config.name}</a></h1>` :
|
||||
'') +
|
||||
'<div class="sidebar-nav"><!--sidebar--></div>' +
|
||||
'</aside>'
|
||||
|
||||
|
|
@ -71,7 +75,9 @@ export function cover () {
|
|||
* @return {String}
|
||||
*/
|
||||
export function tree(toc, tpl = '') {
|
||||
if (!toc || !toc.length) return ''
|
||||
if (!toc || !toc.length) {
|
||||
return ''
|
||||
}
|
||||
|
||||
toc.forEach(node => {
|
||||
tpl += `<li><a class="section-link" href="${node.slug}">${
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@ function getAlias (path, alias, last) {
|
|||
return re.test(path) && path !== last
|
||||
})[0]
|
||||
|
||||
return match
|
||||
? getAlias(path.replace(cached[match], alias[match]), alias, path)
|
||||
: path
|
||||
return match ?
|
||||
getAlias(path.replace(cached[match], alias[match]), alias, path) :
|
||||
path
|
||||
}
|
||||
|
||||
function getFileName(path, ext) {
|
||||
return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path)
|
||||
? path
|
||||
: /\/$/g.test(path) ? `${path}README${ext}` : `${path}${ext}`
|
||||
return new RegExp(`\\.(${ext.replace(/^\./, '')}|html)$`, 'g').test(path) ?
|
||||
path :
|
||||
/\/$/g.test(path) ? `${path}README${ext}` : `${path}${ext}`
|
||||
}
|
||||
|
||||
export class History {
|
||||
|
|
@ -38,7 +38,7 @@ export class History {
|
|||
getFile(path = this.getCurrentPath(), isRelative) {
|
||||
const {config} = this
|
||||
const base = this.getBasePath()
|
||||
const ext = typeof config.ext !== 'string' ? '.md' : config.ext
|
||||
const ext = typeof config.ext === 'string' ? config.ext : '.md'
|
||||
|
||||
path = config.alias ? getAlias(path, config.alias) : path
|
||||
path = getFileName(path, ext)
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ export class HashHistory extends History {
|
|||
|
||||
path = replaceSlug(path)
|
||||
|
||||
if (path.charAt(0) === '/') return replaceHash(path)
|
||||
if (path.charAt(0) === '/') {
|
||||
return replaceHash(path)
|
||||
}
|
||||
replaceHash('/' + path)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,35 +26,37 @@ export function stringifyQuery (obj, ignores = []) {
|
|||
const qs = []
|
||||
|
||||
for (const key in obj) {
|
||||
if (ignores.indexOf(key) > -1) continue
|
||||
if (ignores.indexOf(key) > -1) {
|
||||
continue
|
||||
}
|
||||
qs.push(
|
||||
obj[key]
|
||||
? `${encode(key)}=${encode(obj[key])}`.toLowerCase()
|
||||
: encode(key)
|
||||
obj[key] ?
|
||||
`${encode(key)}=${encode(obj[key])}`.toLowerCase() :
|
||||
encode(key)
|
||||
)
|
||||
}
|
||||
|
||||
return qs.length ? `?${qs.join('&')}` : ''
|
||||
}
|
||||
|
||||
export function getPath (...args) {
|
||||
return cleanPath(args.join('/'))
|
||||
}
|
||||
|
||||
export const isAbsolutePath = cached(path => {
|
||||
return /(:|(\/{2}))/g.test(path)
|
||||
})
|
||||
|
||||
export const getParentPath = cached(path => {
|
||||
return /\/$/g.test(path)
|
||||
? path
|
||||
: (path = path.match(/(\S*\/)[^\/]+$/)) ? path[1] : ''
|
||||
return /\/$/g.test(path) ?
|
||||
path :
|
||||
(path = path.match(/(\S*\/)[^/]+$/)) ? path[1] : ''
|
||||
})
|
||||
|
||||
export const cleanPath = cached(path => {
|
||||
return path.replace(/^\/+/, '/').replace(/([^:])\/{2,}/g, '$1/')
|
||||
})
|
||||
|
||||
export function getPath(...args) {
|
||||
return cleanPath(args.join('/'))
|
||||
}
|
||||
|
||||
export const replaceSlug = cached(path => {
|
||||
return path.replace('#', '?id=')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
export function cached(fn) {
|
||||
const cache = Object.create(null)
|
||||
return function cachedFn (str) {
|
||||
return function (str) {
|
||||
const key = isPrimitive(str) ? str : JSON.stringify(str)
|
||||
const hit = cache[key]
|
||||
return hit || (cache[key] = fn(str))
|
||||
|
|
@ -17,14 +17,14 @@ export const hyphenate = cached(str => {
|
|||
return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase())
|
||||
})
|
||||
|
||||
export const hasOwn = Object.prototype.hasOwnProperty
|
||||
|
||||
/**
|
||||
* Simple Object.assign polyfill
|
||||
*/
|
||||
export const merge =
|
||||
Object.assign ||
|
||||
function (to) {
|
||||
const hasOwn = Object.prototype.hasOwnProperty
|
||||
|
||||
for (let i = 1; i < arguments.length; i++) {
|
||||
const from = Object(arguments[i])
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,9 @@ export function findAll (el, node) {
|
|||
|
||||
export function create(node, tpl) {
|
||||
node = $.createElement(node)
|
||||
if (tpl) node.innerHTML = tpl
|
||||
if (tpl) {
|
||||
node.innerHTML = tpl
|
||||
}
|
||||
return node
|
||||
}
|
||||
|
||||
|
|
@ -63,15 +65,15 @@ export function before (target, el) {
|
|||
}
|
||||
|
||||
export function on(el, type, handler) {
|
||||
isFn(type)
|
||||
? window.addEventListener(el, type)
|
||||
: el.addEventListener(type, handler)
|
||||
isFn(type) ?
|
||||
window.addEventListener(el, type) :
|
||||
el.addEventListener(type, handler)
|
||||
}
|
||||
|
||||
export function off(el, type, handler) {
|
||||
isFn(type)
|
||||
? window.removeEventListener(el, type)
|
||||
: el.removeEventListener(type, handler)
|
||||
isFn(type) ?
|
||||
window.removeEventListener(el, type) :
|
||||
el.removeEventListener(type, handler)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const supportsPushState =
|
|||
window.history &&
|
||||
window.history.pushState &&
|
||||
window.history.replaceState &&
|
||||
// pushState isn’t reliable on iOS until 5.
|
||||
// PushState isn’t reliable on iOS until 5.
|
||||
!navigator.userAgent.match(
|
||||
/((iPod|iPhone|iPad).+\bOS\s+[1-4]\D|WebApps\/.+CFNetwork)/
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,16 +10,20 @@ function replaceVar (block, color) {
|
|||
|
||||
export default function (color) {
|
||||
// Variable support
|
||||
if (window.CSS && window.CSS.supports && window.CSS.supports('(--v:red)')) { return }
|
||||
if (window.CSS && window.CSS.supports && window.CSS.supports('(--v:red)')) {
|
||||
return
|
||||
}
|
||||
|
||||
const styleBlocks = dom.findAll('style:not(.inserted),link')
|
||||
;[].forEach.call(styleBlocks, block => {
|
||||
const styleBlocks = dom.findAll('style:not(.inserted),link');
|
||||
[].forEach.call(styleBlocks, block => {
|
||||
if (block.nodeName === 'STYLE') {
|
||||
replaceVar(block, color)
|
||||
} else if (block.nodeName === 'LINK') {
|
||||
const href = block.getAttribute('href')
|
||||
|
||||
if (!/\.css$/.test(href)) return
|
||||
if (!/\.css$/.test(href)) {
|
||||
return
|
||||
}
|
||||
|
||||
get(href).then(res => {
|
||||
const style = dom.create('style', res)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function install (hook, vm) {
|
|||
|
||||
script.async = true
|
||||
script.src = `https://${disqus}.disqus.com/embed.js`
|
||||
script.setAttribute('data-timestamp', +new Date())
|
||||
script.setAttribute('data-timestamp', Number(new Date()))
|
||||
dom.appendTo(dom.body, script)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -887,12 +887,12 @@ const AllGithubEmoji = [
|
|||
'zzz'
|
||||
]
|
||||
|
||||
// emoji from All-Github-Emoji-Icons
|
||||
// Emoji from All-Github-Emoji-Icons
|
||||
// https://github.com/scotch-io/All-Github-Emoji-Icons
|
||||
window.emojify = function (match, $1) {
|
||||
return AllGithubEmoji.indexOf($1) === -1
|
||||
? match
|
||||
: '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' +
|
||||
return AllGithubEmoji.indexOf($1) === -1 ?
|
||||
match :
|
||||
'<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/' +
|
||||
$1 +
|
||||
'.png" alt="' +
|
||||
$1 +
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function init (id) {
|
|||
window.ga =
|
||||
window.ga ||
|
||||
function () {
|
||||
;(window.ga.q = window.ga.q || []).push(arguments)
|
||||
(window.ga.q = window.ga.q || []).push(arguments)
|
||||
}
|
||||
window.ga.l = Number(new Date())
|
||||
window.ga('create', id, 'auto')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
function install (hook, vm) {
|
||||
function install(hook) {
|
||||
const dom = Docsify.dom
|
||||
|
||||
hook.mounted(_ => {
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ function bindEvents () {
|
|||
timeId = setTimeout(_ => doSearch(e.target.value.trim()), 100)
|
||||
})
|
||||
Docsify.dom.on($inputWrap, 'click', e => {
|
||||
// click input outside
|
||||
// Click input outside
|
||||
if (e.target.tagName !== 'INPUT') {
|
||||
$input.value = ''
|
||||
doSearch()
|
||||
|
|
@ -168,7 +168,9 @@ function bindEvents () {
|
|||
function updatePlaceholder(text, path) {
|
||||
const $input = Docsify.dom.getNode('.search input[type="search"]')
|
||||
|
||||
if (!$input) return
|
||||
if (!$input) {
|
||||
return
|
||||
}
|
||||
if (typeof text === 'string') {
|
||||
$input.placeholder = text
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@ function escapeHtml (string) {
|
|||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
'\'': ''',
|
||||
'/': '/'
|
||||
}
|
||||
|
||||
return String(string).replace(/[&<>"'\/]/g, s => entityMap[s])
|
||||
return String(string).replace(/[&<>"'/]/g, s => entityMap[s])
|
||||
}
|
||||
|
||||
function getAllPaths(router) {
|
||||
const paths = []
|
||||
|
||||
helper.dom.findAll('a:not([data-nosearch])').map(node => {
|
||||
helper.dom.findAll('a:not([data-nosearch])').forEach(node => {
|
||||
const href = node.href
|
||||
const originHref = node.getAttribute('href')
|
||||
const path = router.parse(href).path
|
||||
|
|
@ -50,17 +50,17 @@ export function genIndex (path, content = '', router, depth) {
|
|||
slug = router.toURL(path, {id: slugify(token.text)})
|
||||
index[slug] = {slug, title: token.text, body: ''}
|
||||
} else {
|
||||
if (!slug) return
|
||||
if (!slug) {
|
||||
return
|
||||
}
|
||||
if (!index[slug]) {
|
||||
index[slug] = {slug, title: '', body: ''}
|
||||
} else {
|
||||
if (index[slug].body) {
|
||||
} else if (index[slug].body) {
|
||||
index[slug].body += '\n' + (token.text || '')
|
||||
} else {
|
||||
index[slug].body = token.text
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
slugify.clear()
|
||||
return index
|
||||
|
|
@ -78,7 +78,7 @@ export function search (query) {
|
|||
})
|
||||
|
||||
query = query.trim()
|
||||
let keywords = query.split(/[\s\-\，\\/]+/)
|
||||
let keywords = query.split(/[\s\-，\\/]+/)
|
||||
if (keywords.length !== 1) {
|
||||
keywords = [].concat(query, keywords)
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ export function search (query) {
|
|||
const postUrl = post.slug || ''
|
||||
|
||||
if (postTitle && postContent) {
|
||||
keywords.forEach((keyword, i) => {
|
||||
keywords.forEach(keyword => {
|
||||
// From https://github.com/sindresorhus/escape-string-regexp
|
||||
const regEx = new RegExp(
|
||||
keyword.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'),
|
||||
|
|
@ -108,7 +108,9 @@ export function search (query) {
|
|||
isMatch = false
|
||||
} else {
|
||||
isMatch = true
|
||||
if (indexContent < 0) indexContent = 0
|
||||
if (indexContent < 0) {
|
||||
indexContent = 0
|
||||
}
|
||||
|
||||
let start = 0
|
||||
let end = 0
|
||||
|
|
@ -116,7 +118,9 @@ export function search (query) {
|
|||
start = indexContent < 11 ? 0 : indexContent - 10
|
||||
end = start === 0 ? 70 : indexContent + keyword.length + 60
|
||||
|
||||
if (end > postContent.length) end = postContent.length
|
||||
if (end > postContent.length) {
|
||||
end = postContent.length
|
||||
}
|
||||
|
||||
const matchContent =
|
||||
'...' +
|
||||
|
|
@ -163,7 +167,9 @@ export function init (config, vm) {
|
|||
let count = 0
|
||||
|
||||
paths.forEach(path => {
|
||||
if (INDEXS[path]) return count++
|
||||
if (INDEXS[path]) {
|
||||
return count++
|
||||
}
|
||||
|
||||
helper
|
||||
.get(vm.router.getFile(path), false, vm.config.requestHeaders)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
95
src/themes/basic/_coverpage.styl
Normal file
95
src/themes/basic/_coverpage.styl
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
467
src/themes/basic/_layout.styl
Normal file
467
src/themes/basic/_layout.styl
Normal file
|
|
@ -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;
|
||||
}
|
||||
172
src/themes/buble.styl
Normal file
172
src/themes/buble.styl
Normal file
|
|
@ -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;
|
||||
}
|
||||
225
src/themes/dark.styl
Normal file
225
src/themes/dark.styl
Normal file
|
|
@ -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';
|
||||
7
src/themes/pure.styl
Normal file
7
src/themes/pure.styl
Normal file
|
|
@ -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;
|
||||
}
|
||||
225
src/themes/vue.styl
Normal file
225
src/themes/vue.styl
Normal file
|
|
@ -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…
Add table
Add a link
Reference in a new issue