Commit 04216562 authored by Cassandra Gould van Praag's avatar Cassandra Gould van Praag
Browse files

update README

parent 3b2e3e82
......@@ -11,6 +11,10 @@
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
# Cass just-the-docs theme
test.
## Installation
Add this line to your Jekyll site's Gemfile:
......
---
layout: default
---
{{ content }}
---
layout: vendor/compress
---
{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
{{ content_ }}
//
// Buttons and things that look like buttons
//
// stylelint-disable color-named
.btn {
display: inline-block;
box-sizing: border-box;
padding-top: 0.3em;
padding-right: 1em;
padding-bottom: 0.3em;
padding-left: 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
&:focus {
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:hover,
&.zeroclipboard-is-hover {
color: darken($link-color, 2%);
}
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken(#dcdcdc, 5%);
}
&:disabled,
&.disabled {
&,
&:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
box-shadow: none;
}
}
}
.btn-outline {
color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: inset 0 0 0 2px $grey-dk-100;
}
}
.btn-primary {
@include btn-color($white, $btn-primary-color);
}
.btn-purple {
@include btn-color($white, $purple-100);
}
.btn-blue {
@include btn-color($white, $blue-000);
}
.btn-green {
@include btn-color($white, $green-100);
}
//
// Code and syntax highlighting
//
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
code {
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $code-background-color;
border: $border $border-color;
border-radius: $border-radius;
}
// Avoid appearance of dark border around visited code links in Safari
a:visited code {
border-color: $border-color;
}
// Content structure for highlighted code blocks using fences or Liquid
//
// ```[LANG]...```, no kramdown line_numbers:
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
//
// ```[LANG]...```, kramdown line_numbers = true:
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
// > div.table-wrapper > table.rouge-table > tbody > tr
// > td.rouge-gutter.gl > pre.lineno
// | td.rouge-code > pre
//
// {% highlight LANG %}...{% endhighlight %}:
// figure.highlight > pre > code.language-LANG
//
// {% highlight LANG linenos %}...{% endhighlight %}:
// figure.highlight > pre > code.language-LANG
// > div.table-wrapper > table.rouge-table > tbody > tr
// > td.gutter.gl > pre.lineno
// | td.code > pre
//
// fix_linenos removes the outermost pre when it encloses table.rouge-table
//
// See docs/index-test.md for some tests.
//
// No kramdown line_numbers: fences and Liquid highlighting look the same.
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
// ```[LANG]...```
div.highlighter-rouge {
padding: $sp-3;
margin-top: 0;
margin-bottom: $sp-3;
overflow-x: auto;
background-color: $code-background-color;
border-radius: $border-radius;
box-shadow: none;
-webkit-overflow-scrolling: touch;
div.highlight,
pre.highlight,
code {
padding: 0;
margin: 0;
border: 0;
}
}
// {% highlight LANG %}...{% endhighlight %},
// {% highlight LANG linenos %}...{% endhighlight %}:
figure.highlight {
padding: $sp-3;
margin-top: 0;
margin-bottom: $sp-3;
background-color: $code-background-color;
border-radius: $border-radius;
box-shadow: none;
-webkit-overflow-scrolling: touch;
pre,
code {
padding: 0;
margin: 0;
border: 0;
}
}
// ```[LANG]...```, kramdown line_numbers = true,
// {% highlight LANG linenos %}...{% endhighlight %}:
.highlight .table-wrapper {
padding: 0;
margin: 0;
border: 0;
box-shadow: none;
td,
pre {
@include fs-2;
min-width: 0;
padding: 0;
background-color: $code-background-color;
border: 0;
}
td.gl {
padding-right: $sp-3;
}
pre {
margin: 0;
line-height: 2;
}
}
.highlight .c {
color: #586e75;
} // comment //
.highlight .err {
color: #93a1a1;
} // error //
.highlight .g {
color: #93a1a1;
} // generic //
.highlight .k {
color: #859900;
} // keyword //
.highlight .l {
color: #93a1a1;
} // literal //
.highlight .n {
color: #93a1a1;
} // name //
.highlight .o {
color: #859900;
} // operator //
.highlight .x {
color: #cb4b16;
} // other //
.highlight .p {
color: #93a1a1;
} // punctuation //
.highlight .cm {
color: #586e75;
} // comment.multiline //
.highlight .cp {
color: #859900;
} // comment.preproc //
.highlight .c1 {
color: #586e75;
} // comment.single //
.highlight .cs {
color: #859900;
} // comment.special //
.highlight .gd {
color: #2aa198;
} // generic.deleted //
.highlight .ge {
font-style: italic;
color: #93a1a1;
} // generic.emph //
.highlight .gr {
color: #dc322f;
} // generic.error //
.highlight .gh {
color: #cb4b16;
} // generic.heading //
.highlight .gi {
color: #859900;
} // generic.inserted //
.highlight .go {
color: #93a1a1;
} // generic.output //
.highlight .gp {
color: #93a1a1;
} // generic.prompt //
.highlight .gs {
font-weight: bold;
color: #93a1a1;
} // generic.strong //
.highlight .gu {
color: #cb4b16;
} // generic.subheading //
.highlight .gt {
color: #93a1a1;
} // generic.traceback //
.highlight .kc {
color: #cb4b16;
} // keyword.constant //
.highlight .kd {
color: #268bd2;
} // keyword.declaration //
.highlight .kn {
color: #859900;
} // keyword.namespace //
.highlight .kp {
color: #859900;
} // keyword.pseudo //
.highlight .kr {
color: #268bd2;
} // keyword.reserved //
.highlight .kt {
color: #dc322f;
} // keyword.type //
.highlight .ld {
color: #93a1a1;
} // literal.date //
.highlight .m {
color: #2aa198;
} // literal.number //
.highlight .s {
color: #2aa198;
} // literal.string //
.highlight .na {
color: #555;
} // name.attribute //
.highlight .nb {
color: #b58900;
} // name.builtin //
.highlight .nc {
color: #268bd2;
} // name.class //
.highlight .no {
color: #cb4b16;
} // name.constant //
.highlight .nd {
color: #268bd2;
} // name.decorator //
.highlight .ni {
color: #cb4b16;
} // name.entity //
.highlight .ne {
color: #cb4b16;
} // name.exception //
.highlight .nf {
color: #268bd2;
} // name.function //
.highlight .nl {
color: #555;
} // name.label //
.highlight .nn {
color: #93a1a1;
} // name.namespace //
.highlight .nx {
color: #555;
} // name.other //
.highlight .py {
color: #93a1a1;
} // name.property //
.highlight .nt {
color: #268bd2;
} // name.tag //
.highlight .nv {
color: #268bd2;
} // name.variable //
.highlight .ow {
color: #859900;
} // operator.word //
.highlight .w {
color: #93a1a1;
} // text.whitespace //
.highlight .mf {
color: #2aa198;
} // literal.number.float //
.highlight .mh {
color: #2aa198;
} // literal.number.hex //
.highlight .mi {
color: #2aa198;
} // literal.number.integer //
.highlight .mo {
color: #2aa198;
} // literal.number.oct //
.highlight .sb {
color: #586e75;
} // literal.string.backtick //
.highlight .sc {
color: #2aa198;
} // literal.string.char //
.highlight .sd {
color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
color: #2aa198;
} // literal.string.double //
.highlight .se {
color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
color: #2aa198;
} // literal.string.other //
.highlight .sr {
color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
color: #2aa198;
} // literal.string.single //
.highlight .ss {
color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
color: #268bd2;
} // name.variable.class //
.highlight .vg {
color: #268bd2;
} // name.variable.global //
.highlight .vi {
color: #268bd2;
} // name.variable.instance //
.highlight .il {
color: #2aa198;
} // literal.number.integer.long //
//
// Code examples (rendered)
//
.code-example {
padding: $sp-3;
margin-bottom: $sp-3;
overflow: auto;
border: 1px solid $border-color;
border-radius: $border-radius;
+ .highlighter-rouge,
+ figure.highlight {
position: relative;
margin-top: -$sp-4;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-left: 1px solid $border-color;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
@charset "UTF-8";
//
// Styles for rendered markdown in the .main-content container
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.main-content {
line-height: $content-line-height;
ol,
ul,
dl,
pre,
address,
blockquote,
.table-wrapper {
margin-top: 0.5em;
}
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul,
ol {
padding-left: 1.5em;
}
li {
.highlight {
margin-top: $sp-1;
}
}
ol {
list-style-type: none;
counter-reset: step-counter;
> li {
position: relative;
&::before {
position: absolute;
top: 0.2em;
left: -1.6em;
color: $grey-dk-000;
content: counter(step-counter);
counter-increment: step-counter;
@include fs-3;
@include mq(sm) {
top: 0.11em;
}
}
ol {
counter-reset: sub-counter;
li {
&::before {
content: counter(sub-counter, lower-alpha);
counter-increment: sub-counter;
}
}
}
}
}
ul {
list-style: none;
> li {
&::before {
position: absolute;
margin-left: -1.4em;
color: $grey-dk-000;
content: "•";
}
}
}
.task-list {
padding-left: 0;
}
.task-list-item {
display: flex;
align-items: center;
&::before {
content: "";
}
}
.task-list-item-checkbox {
margin-right: 0.6em;
}
hr + * {
margin-top: 0;
}
h1:first-of-type {
margin-top: 0.5em;
}
dl {
display: grid;
grid-template: auto / 10em 1fr;
}
dt,
dd {
margin: 0.25em 0;
}
dt {
grid-column: 1;
font-weight: 500;
text-align: right;
&::after {
content: ":";
}
}
dd {