Merge pull request #750 from sunny0826/docs

Toc adapts to narrow screens
This commit is contained in:
Jianbo Sun
2020-12-09 13:41:19 +08:00
committed by GitHub
3 changed files with 115 additions and 9 deletions
+8 -7
View File
@@ -69,13 +69,15 @@ Here are three ways to get KubeVela Cli:
<!-- tabs:start -->
#### **Homebrew**
[comment]: <> (#### **Homebrew**)
**macOS/Linux**
[comment]: <> (**macOS/Linux**)
```console
$ brew install kubevela
```
[comment]: <> (```console)
[comment]: <> ($ brew install kubevela)
[comment]: <> (```)
#### **Script**
@@ -100,14 +102,13 @@ $ powershell -Command "iwr -useb https://kubevela.io/install.ps1 | iex"
$ sudo mv ./vela /usr/local/bin/vela
```
<!-- tabs:end -->
> Known Issue(https://github.com/oam-dev/kubevela/issues/625):
> If you're using mac, it will report that “vela” cannot be opened because the developer cannot be verified.
>
> The new version of MacOS is stricter about running software you've downloaded that isn't signed with an Apple developer key. And we haven't supported that for KubeVela yet.
> You can open your 'System Preference' -> 'Security & Privacy' -> General, click the 'Allow Anyway' to temporarily fix it.
<!-- tabs:end -->
## 3. Initialize KubeVela
+3 -2
View File
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-top-banner-plugin@latest/dist/style.css" />
<link rel="stylesheet" href="https://unpkg.com/docsify-toc@1.0.0/dist/toc.css">
<link rel="stylesheet" href="static/toc.css">
</head>
<body>
@@ -26,6 +26,7 @@
coverpage: true,
autoHeader: true,
loadSidebar: true,
topMargin: 90,
themeColor: '#296fff',
auto2top: true,
loadNavbar: true,
@@ -41,7 +42,7 @@
placeholder: {
'/': 'Type to search',
'/zh/': '搜索',
'/en-us/': 'Type to search'
'/en/': 'Type to search'
},
noData: {
'/': 'No Results',
+104
View File
@@ -0,0 +1,104 @@
.content {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.markdown-section {
flex: 1 1 0%;
margin: 0 48px;
}
.nav {
width: var(--toc-width, 200px);
align-self: flex-start;
flex: 0 0 auto;
}
aside.nav.nothing {
width: 0;
}
.page_toc {
position: fixed;
border-left-style: solid;
border-left-width: 1px;
border-left-color: rgba(0, 0, 0, 0.07);
border-image-slice: 1;
padding-left: 5px;
}
.page_toc 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;
}
.page_toc p.title {
margin: 0px 0 0px 9px;
padding-bottom: 5px;
font-weight: 600;
font-size: 1.2em;
}
.page_toc .anchor:hover:after {
content: "";
}
.page_toc ul {
list-style-type: none;
margin-top: 0px;
padding-left: 10px;
color: var(--text-color-base, black);
text-decoration: none;
font-weight: 300;
line-height: 1.6em;
}
.page_toc ul a:hover span {
color: var(--text-color-tertiary, #42b983);
border-bottom: none !important;
text-decoration:none !important;
}
.page_toc ul a {
color: var(--text-color-base, black);
text-decoration: none;
font-weight: 300;
line-height: 1.6em;
}
@media screen and (max-width: 2100px) {
.page_toc {
position: relative;
left: 0;
top: -20px;
padding: 10px 0;
border: none;
border-bottom: 1px solid #ddd;
font-size: 1.0em;
}
.page_toc a:before {
content: "- ";
}
.nav {
margin: 0 auto;
width: 800px;
}
.page_toc p.title {
font-weight: 300;
font-size: 1.8em;
}
.content {
display: block;
}
.markdown-section {
margin: 0 auto;
}
}
.page_toc .active {
border-left: 5px solid;
color: var(--theme-color, #42b983);
padding-left: 10px;
}