mirror of
https://github.com/wahyd4/docsify.git
synced 2026-08-09 13:26:34 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 qingwei.li
|
a74cf6ceaf | ||
|
qingwei.li
|
0f966e2eb1 | ||
 cinwell.liandGitHub
|
d07ddaa85d |
+2
-6
@@ -3,14 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<link rel="stylesheet" href="/themes/buble.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">En</a>
|
||||
<a href="/zh-cn">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify"></script>
|
||||
<script src="/lib/docsify.js" data-repo="https://qingwei-li/docsify" data-sidebar-toggle></script>
|
||||
</html>
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
## 0.6.0
|
||||
### Features
|
||||
- Navbar support dropdown list, #6
|
||||
- Sidebar with toggle
|
||||
|
||||
### Bug fixes
|
||||
- Fix ineffective option, fixed #10
|
||||
|
||||
## 0.5.0
|
||||
### Features
|
||||
- Custom sidebars and navbars by markdown file
|
||||
|
||||
+5
-1
@@ -14,5 +14,9 @@
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js" data-repo="qingwei-li/docsify" data-max-level="3"></script>
|
||||
<script
|
||||
src="//unpkg.com/docsify/lib/docsify.min.js"
|
||||
data-repo="qingwei-li/docsify"
|
||||
data-max-level="3"
|
||||
data-sidebar-toggle></script>
|
||||
</html>
|
||||
|
||||
@@ -121,6 +121,14 @@ Root element.
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
#### sidebar-toggle
|
||||
|
||||
Sidebar with toggle
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
#### sidebar
|
||||
|
||||
Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.
|
||||
@@ -196,6 +204,15 @@ The contents of the file can be:
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
If you write a sub level list, it will generate a dropdown list.
|
||||
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why use `404.html` instead of `index.html`
|
||||
|
||||
@@ -119,6 +119,14 @@ docsify serve docs
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
#### sidebar-toggle
|
||||
|
||||
Sidebar 开关按钮
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
#### sidebar
|
||||
|
||||
设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
|
||||
@@ -193,6 +201,15 @@ docsify serve docs
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
当然也支持二级列表，将生成一个下拉列表
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为什么是 `404.html` 而不用 `index.html`
|
||||
|
||||
+28
-6
@@ -2178,6 +2178,7 @@ Prism.languages.js = Prism.languages.javascript;
|
||||
function corner (data) {
|
||||
if (!data) { return '' }
|
||||
if (!/\/\//.test(data)) { data = 'https://github.com/' + data; }
|
||||
data = data.replace(/^git\+/, '');
|
||||
|
||||
return ("\n <a href=\"" + data + "\" class=\"github-corner\" aria-label=\"View source on Github\">\n <svg viewBox=\"0 0 250 250\" aria-hidden=\"true\">\n <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n <path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path>\n <path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path>\n </svg>\n </a>")
|
||||
}
|
||||
@@ -2190,6 +2191,11 @@ function main () {
|
||||
return "<main>\n <aside class=\"sidebar\"></aside>\n <section class=\"content\">\n <article class=\"markdown-section\"></article>\n </section>\n </main>"
|
||||
}
|
||||
|
||||
function toggle (bool) {
|
||||
if (!bool) { return '' }
|
||||
return "<button class=\"sidebar-toggle\">\n <span></span><span></span><span></span>\n </button>"
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tree
|
||||
* @param {Array} tree
|
||||
@@ -2283,6 +2289,17 @@ function activeLink (dom, activeParent) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
if (!dom) { return }
|
||||
var main = document.querySelector('main');
|
||||
|
||||
dom.addEventListener('click', function () { return main.classList.toggle('close'); });
|
||||
}
|
||||
|
||||
var renderTo = function (dom, content) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
dom.innerHTML = content;
|
||||
@@ -2319,19 +2336,22 @@ marked.setOptions({ renderer: renderer });
|
||||
function renderApp (dom, replace, opts) {
|
||||
var nav = document.querySelector('nav') || document.createElement('nav');
|
||||
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = corner(opts.repo) + main();
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = toggle(opts.sidebarToggle) + corner(opts.repo) + main();
|
||||
document.body.insertBefore(nav, document.body.children[0]);
|
||||
|
||||
// bind toggle
|
||||
bindToggle('button.sidebar-toggle');
|
||||
}
|
||||
|
||||
/**
|
||||
* article
|
||||
*/
|
||||
function renderArticle (content) {
|
||||
function renderArticle (content, OPTIONS) {
|
||||
if ( content === void 0 ) content = 'not found';
|
||||
|
||||
renderTo('article', marked(content));
|
||||
if (!renderSidebar.rendered) { renderSidebar(null); }
|
||||
if (!renderNavbar.rendered) { renderNavbar(null); }
|
||||
if (!renderSidebar.rendered) { renderSidebar(null, OPTIONS); }
|
||||
if (!renderNavbar.rendered) { renderNavbar(null, OPTIONS); }
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2374,6 +2394,7 @@ var OPTIONS = {
|
||||
repo: '',
|
||||
maxLevel: 6,
|
||||
sidebar: '',
|
||||
sidebarToggle: false,
|
||||
loadSidebar: null,
|
||||
loadNavbar: null
|
||||
};
|
||||
@@ -2383,7 +2404,7 @@ var script = document.currentScript || [].slice.call(document.getElementsByTagNa
|
||||
if (script) {
|
||||
for (var prop in OPTIONS) {
|
||||
var val = script.getAttribute('data-' + camel2kebab(prop));
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true;
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true);
|
||||
}
|
||||
if (OPTIONS.loadSidebar === true) { OPTIONS.loadSidebar = '_sidebar.md'; }
|
||||
if (OPTIONS.loadNavbar === true) { OPTIONS.loadNavbar = '_navbar.md'; }
|
||||
@@ -2402,7 +2423,8 @@ var Docsify = function () {
|
||||
|
||||
// Render markdown file
|
||||
load((loc + ".md"))
|
||||
.then(renderArticle, function (_) { return renderArticle(); });
|
||||
.then(function (content) { return renderArticle(content, OPTIONS); },
|
||||
function (_) { return renderArticle(null, OPTIONS); });
|
||||
|
||||
// Render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
@@ -1 +1 @@
|
||||
*{box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}nav{position:absolute;right:0;left:0;z-index:2;margin:25px 60px 0 0;text-align:right}nav a{margin:0 1em;padding:5px 0;font-size:16px;text-decoration:none;color:inherit;transition:color .3s}.github-corner{position:absolute;top:0;right:0;z-index:2}.github-corner svg{color:#fff;height:80px;width:80px}.github-corner:hover .octo-arm{animation:a .56s ease-in-out}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:a .56s ease-in-out}}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0}main{height:100%;position:relative;width:100%}.sidebar{border-right:1px solid rgba(0,0,0,.07);bottom:0;overflow-y:auto;position:absolute;top:0;width:300px;z-index:1;padding-top:40px}.sidebar ul{margin:0;padding:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{display:block;border-bottom:none}.sidebar ul li ul{padding-left:20px}.content{bottom:0;left:300px;overflow-y:auto;position:absolute;right:0;top:0;overflow-x:hidden;padding-top:20px}@media screen and (max-width:600px){.sidebar{left:-300px}.content{left:0}}.markdown-section{position:relative;margin:0 auto;max-width:800px;padding:20px 15px 40px}.markdown-section *{box-sizing:border-box;-webkit-box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}
|
||||
*{box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}nav{position:absolute;right:0;left:0;z-index:2;margin:25px 60px 0 0;text-align:right}nav li,nav ul{list-style:none;display:inline-block}nav li{position:relative}nav li ul{padding:0;max-height:0;position:absolute;top:24px;background-color:hsla(0,0%,100%,.6);border:1px solid #000;right:0;overflow:hidden;opacity:0;overflow-y:auto;transition:opacity .3s ease,max-height .5s ease}nav li:hover ul{opacity:1;max-height:100px}nav li ul a,nav li ul li{display:block}nav li ul a{font-size:14px;margin:0;padding:4px 10px;white-space:nowrap}nav li ul a.active{border-bottom:0}nav a{margin:0 1em;padding:5px 0;font-size:16px;text-decoration:none;color:inherit;transition:color .3s}.github-corner{position:absolute;top:0;right:0;z-index:2}.github-corner svg{color:#fff;height:80px;width:80px}.github-corner:hover .octo-arm{animation:a .56s ease-in-out}@keyframes a{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:a .56s ease-in-out}}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0}main{height:100%;position:relative;width:100%}.sidebar{border-right:1px solid rgba(0,0,0,.07);bottom:0;overflow-y:auto;position:absolute;top:0;width:300px;z-index:1;padding-top:40px;left:0;transition:left .25s ease-out}.sidebar ul{margin:0;padding:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{display:block;border-bottom:none}.sidebar ul li ul{padding-left:20px}.sidebar-toggle{background-color:transparent;border:0;bottom:10px;left:10px;position:absolute;text-align:center;transition:opacity .3s;width:30px;z-index:2;outline:none}.sidebar-toggle:hover{opacity:.4}.sidebar-toggle span{background-color:#000;display:block;height:2px;margin-bottom:4px;width:16px}.content{bottom:0;left:300px;overflow-y:auto;position:absolute;right:0;top:0;overflow-x:hidden;padding-top:20px;transition:left .25s ease}main.close .sidebar{left:-300px}main.close .content{left:0}@media screen and (max-width:600px){nav{margin-top:16px}nav li ul{top:30px}.sidebar{left:-300px;transition:left .25s ease}.content{left:0;min-width:100vw;transition:left .25s ease-out}main.close .sidebar{left:0}main.close .content{left:300px}}.markdown-section{position:relative;margin:0 auto;max-width:800px;padding:20px 15px 40px}.markdown-section *{box-sizing:border-box;-webkit-box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docsify",
|
||||
"version": "0.5.0",
|
||||
"version": "0.6.0",
|
||||
"description": "A magical documentation generator.",
|
||||
"main": "lib/docsify.js",
|
||||
"files": [
|
||||
|
||||
@@ -70,3 +70,14 @@ export function activeLink (dom, activeParent) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
export function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
if (!dom) return
|
||||
const main = document.querySelector('main')
|
||||
|
||||
dom.addEventListener('click', () => main.classList.toggle('close'))
|
||||
}
|
||||
|
||||
+4
-2
@@ -6,6 +6,7 @@ const OPTIONS = {
|
||||
repo: '',
|
||||
maxLevel: 6,
|
||||
sidebar: '',
|
||||
sidebarToggle: false,
|
||||
loadSidebar: null,
|
||||
loadNavbar: null
|
||||
}
|
||||
@@ -15,7 +16,7 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
|
||||
if (script) {
|
||||
for (const prop in OPTIONS) {
|
||||
const val = script.getAttribute('data-' + camel2kebab(prop))
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
|
||||
}
|
||||
if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
|
||||
if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
|
||||
@@ -34,7 +35,8 @@ const Docsify = function () {
|
||||
|
||||
// Render markdown file
|
||||
load(`${loc}.md`)
|
||||
.then(render.renderArticle, _ => render.renderArticle())
|
||||
.then(content => render.renderArticle(content, OPTIONS),
|
||||
_ => render.renderArticle(null, OPTIONS))
|
||||
|
||||
// Render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
|
||||
+8
-5
@@ -1,7 +1,7 @@
|
||||
import marked from 'marked'
|
||||
import Prism from 'prismjs'
|
||||
import * as tpl from './tpl'
|
||||
import { activeLink, scrollActiveSidebar } from './event'
|
||||
import { activeLink, scrollActiveSidebar, bindToggle } from './event'
|
||||
import { genTree } from './util'
|
||||
|
||||
const renderTo = function (dom, content) {
|
||||
@@ -38,17 +38,20 @@ marked.setOptions({ renderer })
|
||||
export function renderApp (dom, replace, opts) {
|
||||
const nav = document.querySelector('nav') || document.createElement('nav')
|
||||
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(opts.sidebarToggle) + tpl.corner(opts.repo) + tpl.main()
|
||||
document.body.insertBefore(nav, document.body.children[0])
|
||||
|
||||
// bind toggle
|
||||
bindToggle('button.sidebar-toggle')
|
||||
}
|
||||
|
||||
/**
|
||||
* article
|
||||
*/
|
||||
export function renderArticle (content = 'not found') {
|
||||
export function renderArticle (content = 'not found', OPTIONS) {
|
||||
renderTo('article', marked(content))
|
||||
if (!renderSidebar.rendered) renderSidebar(null)
|
||||
if (!renderNavbar.rendered) renderNavbar(null)
|
||||
if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
|
||||
if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
export function corner (data) {
|
||||
if (!data) return ''
|
||||
if (!/\/\//.test(data)) data = 'https://github.com/' + data
|
||||
data = data.replace(/^git\+/, '')
|
||||
|
||||
return `
|
||||
<a href="${data}" class="github-corner" aria-label="View source on Github">
|
||||
@@ -31,6 +32,13 @@ export function main () {
|
||||
</main>`
|
||||
}
|
||||
|
||||
export function toggle (bool) {
|
||||
if (!bool) return ''
|
||||
return `<button class="sidebar-toggle">
|
||||
<span></span><span></span><span></span>
|
||||
</button>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tree
|
||||
* @param {Array} tree
|
||||
|
||||
@@ -21,6 +21,51 @@ nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul, nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #0074D9;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@@ -108,6 +153,8 @@ main {
|
||||
width: 16em;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@@ -138,6 +185,32 @@ main {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #0074D9;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@@ -148,15 +221,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -16em;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -16em;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 16em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+101
@@ -19,6 +19,51 @@ nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul, nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #000;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@@ -91,6 +136,8 @@ main {
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@@ -111,6 +158,32 @@ main {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #000;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@@ -121,15 +194,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+98
-10
@@ -26,6 +26,46 @@ nav ul, nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #42b983;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@@ -112,6 +152,8 @@ main {
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@@ -124,7 +166,7 @@ main {
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin: 12px 15px;
|
||||
margin: 6px 15px;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
@@ -146,6 +188,32 @@ main {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #42b983;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@@ -156,15 +224,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -402,6 +498,7 @@ main {
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
overflow-x: auto;
|
||||
padding: 3px 5px;
|
||||
white-space: inherit;
|
||||
}
|
||||
@@ -416,15 +513,6 @@ code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
|
||||
pre code {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.8em 0.8em 0.4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre::after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
|
||||
Reference in New Issue
Block a user