mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
feat(v2): style appearance
This commit is contained in:
Yangshun Tay
parent
58d60b5650
commit
2ce6ca5854
11 changed files with 435 additions and 24 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ class MarkdownBlock extends React.Component {
|
|||
{},
|
||||
{
|
||||
version: '9.12.0',
|
||||
theme: 'default',
|
||||
theme: 'atom-one-dark',
|
||||
},
|
||||
siteConfig.highlight,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function Navbar() {
|
|||
<NavLink
|
||||
activeClassName={styles.navLinkActive}
|
||||
className={styles.navLink}
|
||||
to="/docs/site-config">
|
||||
to="/docs/installation">
|
||||
Docs
|
||||
</NavLink>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -59,14 +59,26 @@
|
|||
.headerLink {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2em;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
color: #25c2a0;
|
||||
font-size: 1em;
|
||||
margin-right: 24px;
|
||||
padding: 1em 2.4em;
|
||||
text-decoration: none;
|
||||
transition: color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||
}
|
||||
|
||||
.headerLink:hover {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gitHubLink {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gitHubLink:hover {
|
||||
background-color: #fff;
|
||||
color: #25c2a0;
|
||||
}
|
||||
|
|
@ -87,7 +99,7 @@
|
|||
font-weight: bold;
|
||||
padding: 0.5em 1.2em;
|
||||
text-decoration: none;
|
||||
transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||
transition: background-color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||
}
|
||||
|
||||
.featureListLink:hover {
|
||||
|
|
|
|||
396
v2/website/static/css/main.css
Normal file
396
v2/website/static/css/main.css
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/* Reset */
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Base scaffolding taken from Markswatch theme */
|
||||
body {
|
||||
color: #24292e;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #25c2a0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #25c2a0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 13.6px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul ul ol,
|
||||
ul ol ol,
|
||||
ol ul ol,
|
||||
ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
li {
|
||||
word-wrap: break-all;
|
||||
}
|
||||
li > p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: #fff;
|
||||
border-style: none;
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img[align='right'] {
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
img[align='left'] {
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
table tr {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid #dfe2e5;
|
||||
}
|
||||
table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #dfe2e5;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
table th {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
table td {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #6a737d;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 3px;
|
||||
color: inherit;
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
font-size: 85%;
|
||||
margin: 0;
|
||||
padding: 3.2px 6.4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: inline;
|
||||
font-size: 85%;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
max-width: auto;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #d1d5da;
|
||||
border-bottom-color: #c6cbd1;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||
color: #444d56;
|
||||
display: inline-block;
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
font-size: 68.75%;
|
||||
line-height: 10px;
|
||||
padding: 3px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #dfe2e5;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: content-box;
|
||||
margin: 1.5em 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
hr:before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
hr:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* GitHub Markdown theme styles */
|
||||
h1,
|
||||
h2 {
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: rgb(37, 194, 160, 0.1);
|
||||
border-left: 0.5em solid #25c2a0;
|
||||
color: #000;
|
||||
padding: 1em 2em 1em 1em;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #e1e4e8;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dfe2e5;
|
||||
border-bottom-color: #eee;
|
||||
height: 0.25em;
|
||||
}
|
||||
|
||||
/* Docusaurus v2 styles */
|
||||
h1 .hash-link,
|
||||
h2 .hash-link,
|
||||
h3 .hash-link,
|
||||
h4 .hash-link,
|
||||
h5 .hash-link,
|
||||
h6 .hash-link {
|
||||
display: none;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
h1:hover .hash-link,
|
||||
h2:hover .hash-link,
|
||||
h3:hover .hash-link,
|
||||
h4:hover .hash-link,
|
||||
h5:hover .hash-link,
|
||||
h6:hover .hash-link {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hljs.hljs {
|
||||
/* Specificity hack */
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue