Skip to content

Commit

Permalink
improve docs readability (decaporg#1310)
Browse files Browse the repository at this point in the history
* improve docs readability

* update prism
  • Loading branch information
erquhart authored Apr 23, 2018
1 parent ea338ba commit 03faa28
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 156 deletions.
3 changes: 2 additions & 1 deletion website/config/variables.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,6 @@ module.exports = {
mobile: '480px',
tablet: '768px',
desktop: '960px',
display: '1200px'
display: '1200px',
xlarge: '1280px'
}
6 changes: 3 additions & 3 deletions website/site/content/docs/add-to-your-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ If your generator isn't listed here, you can check its documentation, or as a sh

Inside the `admin` folder, you'll create two files:

```
```x
admin
├ index.html
└ config.yml
Expand Down Expand Up @@ -57,13 +57,13 @@ The second file, `admin/config.yml`, is the heart of your Netlify CMS installati

You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it will automatically run, taking over the current page. Make sure the script that imports it is only run on your CMS page. First install the package and save it to your project:

```
```bash
npm install netlify-cms --save
```

Then import it (assuming your project has tooling for imports):

```
```js
import CMS from 'netlify-cms'

// Now the registry is available via the CMS object.
Expand Down
2 changes: 1 addition & 1 deletion website/site/content/docs/custom-widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);

Register a block level component for the Markdown editor:

```
```js
CMS.registerEditorComponent(definition)
```

Expand Down
32 changes: 18 additions & 14 deletions website/site/static/prism.js

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion website/src/css/imports/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ h3 > p {
}

p, ul {
font-size: $tiny;
font-size: 18px;
line-height: 26px;
margin-top: 0;
}
Expand Down Expand Up @@ -142,11 +142,13 @@ ul {

pre {
border-radius: $borderRadius;
line-height: 1 !important;
}

.code,
code {
font-family: 'Roboto Mono', monospace !important;
font-size: 14px;
text-transform: none;
line-height: 1 !important;
}
31 changes: 16 additions & 15 deletions website/src/css/imports/docs.css
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,10 @@
margin-top: $large;
}

p {
line-height: 1.7;
}

a {
text-decoration: none;
color: $darkGreen;
Expand Down Expand Up @@ -144,6 +148,16 @@
padding: initial;
white-space: inherit;
}

pre {
margin: 30px -16px !important;
}

@media (min-width: $xlarge) {
pre {
margin-right: -120px !important;
}
}
}

h1,
Expand All @@ -163,23 +177,10 @@

h3 {
color: $grey;
font-size: 12px;
font-weight: $semibold;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: $medium;
font-size: 20px;
margin-top: $large;
margin-bottom: $small;


&:after {
content: ' ';
width: $small;
height: 2px;
background: $darkGreen;
display: block;
margin-top: 5px;
}

&.inverse {
color: white;
}
Expand Down
185 changes: 64 additions & 121 deletions website/src/css/lib/prism.css
Original file line number Diff line number Diff line change
@@ -1,178 +1,121 @@
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+ruby+git+go+json+jsx+yaml&plugins=line-numbers */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/

code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1;
color: #ccc;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}

@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
padding: 1em;
margin: .5em 0;
overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
padding: .1em;
border-radius: .3em;
white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: #999;
}

.token.punctuation {
color: #999;
}

.namespace {
opacity: .7;
color: #ccc;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #905;
color: #e2777a;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
.token.function-name {
color: #6196cc;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0, 0%, 100%, .5);
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}

.token.function {
color: #DD4A68;
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}

.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.italic {
font-style: italic;
font-style: italic;
}

.token.entity {
cursor: help;
}

pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}

pre.line-numbers > code {
position: relative;
cursor: help;
}

.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

.token.inserted {
color: green;
}

.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}

0 comments on commit 03faa28

Please sign in to comment.