3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): style appearance

Browse source
This commit is contained in:
Yangshun Tay 2018-10-23 03:02:09 -04:00
parent 58d60b5650
commit 2ce6ca5854
11 changed files with 435 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
v2/lib/theme/Doc/index.js
View file

@ -29,6 +29,7 @@ class Doc extends React.Component {
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</Helmet>
<Navbar docsMetadatas={docsMetadatas} />
<Sidebar

6
v2/lib/theme/DocsPaginator/styles.css
View file

@ -10,13 +10,11 @@
.paginatorLink {
background-color: #f2f3f5;
color: #000;
border-radius: 30px;
display: inline-block;
height: 1.5em;
color: #000;
padding: 1.5em 1.5em 0.75em;
text-decoration: none;
transition: 0.3s all ease-in-out;
padding: 12px 24px;
}
.paginatorLink:hover {

5
v2/lib/theme/Layout/index.js
View file

@ -1,4 +1,6 @@
import React from 'react';
import Helmet from 'react-helmet';
import Footer from '@theme/Footer'; // eslint-disable-line
import Navbar from '@theme/Navbar'; // eslint-disable-line
@ -15,6 +17,9 @@ export default class Layout extends React.Component {
} = this.props;
return (
<div>
<Helmet>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</Helmet>
<Navbar docsMetadatas={docsMetadatas} />
{children}
<Footer

11
v2/lib/theme/Markdown/anchors.js
View file

@ -1,18 +1,19 @@
import toSlug from './toSlug';
export default function anchors(md) {
const originalRender = md.renderer.rules.heading_open;
const originalRender = md.renderer.rules.heading_close;
// eslint-disable-next-line
md.renderer.rules.heading_open = function(tokens, idx, options, env) {
const textToken = tokens[idx + 1];
md.renderer.rules.heading_close = function(tokens, idx, options, env) {
const textToken = tokens[idx - 1];
if (textToken.content) {
const anchor = toSlug(textToken.content, env);
return `<h${
return ` <a aria-hidden="true" id="${anchor}"></a><a aria-hidden="true" class="hash-link" href="#${anchor}">#</a></h${
tokens[idx].hLevel
}><a class="anchor" aria-hidden="true" id="${anchor}"></a><a href="#${anchor}" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>`;
}>
`;
}
return originalRender(tokens, idx, options, env);

2
v2/lib/theme/Markdown/index.js
View file

@ -95,7 +95,7 @@ class MarkdownBlock extends React.Component {
{},
{
version: '9.12.0',
theme: 'default',
theme: 'atom-one-dark',
},
siteConfig.highlight,
);

2
v2/lib/theme/Navbar/index.js
View file

@ -22,7 +22,7 @@ function Navbar() {
<NavLink
activeClassName={styles.navLinkActive}
className={styles.navLink}
to="/docs/site-config">
to="/docs/installation">
Docs
</NavLink>
</li>

13
v2/lib/theme/Navbar/styles.css
View file

@ -30,26 +30,23 @@
}
.navList {
height: inherit;
list-style-type: none;
margin: 0;
padding: 0;
}
.navListItem {
box-sizing: border-box;
display: inline-block;
margin-top: 0;
}
.navLink {
border-radius: 6px;
color: #1c1e21;
display: block;
padding: 1em 1.2em;
text-decoration: none;
transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}
.navLink:hover {
background-color: #f5f6f7;
}
.navLinkActive {
@ -58,7 +55,3 @@
color: #25c2a0;
margin-bottom: -4px;
}
.navLinkActive:hover {
background-color: inherit;
}

2
v2/lib/theme/Sidebar/index.js
View file

@ -23,7 +23,7 @@ function Sidebar(props) {
}
return (
<li key={linkID}>
<li className={styles.sidebarListItem} key={linkID}>
<NavLink
activeClassName={styles.sidebarLinkActive}
className={classnames(styles.sidebarLink, styles.sidebarItem)}

5
v2/lib/theme/Sidebar/styles.css
View file

@ -37,6 +37,10 @@
padding-left: 0;
}
.sidebarListItem {
margin-top: 0;
}
.sidebarLink {
border-radius: 6px;
color: #717171;
@ -48,6 +52,7 @@
.sidebarLink:hover {
background-color: #f5f6f7;
color: #717171;
}
.sidebarLinkActive,