1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00

many readability improvements

* tweak visual hierarchy & spacing
* tweak TOC
* tweak code styles
* new default syntax theme
This commit is contained in:
Matthias Kretschmann 2017-11-17 14:12:30 +01:00
parent 4fe14e94fd
commit 0d4fb77be5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 32 additions and 308 deletions

View File

@ -16,16 +16,21 @@
}
h1 {
font-size: $font-size-h2;
font-size: $font-size-h3;
}
h2 {
font-size: $font-size-h3;
margin-left: -1.25rem;
font-size: $font-size-h4;
margin-bottom: ($spacer * 2);
margin-top: ($spacer * 2);
}
h3 {
font-size: $font-size-h4;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: #fff;
margin-bottom: $spacer;
margin-top: ($spacer * 2);
}
}
}
@ -76,34 +81,29 @@ h1.guide__title {
border-radius: $border-radius;
}
.toc-entry {
}
li.toc-h1 {
margin-bottom: $spacer / 2;
// custom numbers
&:before {
font-size: $font-size-h5;
opacity: .5;
font-size: $font-size-base;
opacity: .6;
color: $brand-primary;
}
a {
@extend .h5;
font-size: $font-size-base;
margin: 0;
box-shadow: none;
color: $brand-primary;
}
ul {
padding-left: $spacer * 3;
padding-left: $spacer * 2.6;
}
}
li.toc-h2 {
a {
font-size: $font-size-base;
font-size: $font-size-sm;
color: $text-color;
}
}

View File

@ -8,7 +8,7 @@ kbd,
pre,
samp {
font-family: $font-family-monospace;
font-size: .75rem;
font-size: .7rem;
hyphens: none;
}
@ -39,7 +39,7 @@ kbd {
// Blocks of code
pre {
display: block;
padding: 1em;
padding: $spacer / 1.5;
margin: 0 0 $spacer;
line-height: $line-height;
word-break: break-all;

View File

@ -10,10 +10,11 @@
> h1,
h2,
.faq__question {
border-bottom: 1px solid $brand-main-blue-light;
border-bottom: 2px solid $brand-main-blue-light;
padding-bottom: $spacer;
margin-bottom: ($spacer * 2);
text-align: center;
margin-top: ($spacer * 3);
position: relative;
&:hover {
.header-link {
@ -26,10 +27,13 @@
.header-link {
box-shadow: none;
transition-timing-function: $timing-bounce;
display: inline-block;
display: block;
padding: 0 .25rem;
opacity: 0;
transform: translate3d(20px, 0, 0) scale(0);
position: absolute;
left: -1.15rem;
top: 0;
&,
.header-icon {

View File

@ -1,295 +1,12 @@
// https://github.com/richleland/pygments-css/blob/master/zenburn.css
// https://github.com/mgyongyosi/OneDarkJekyll/blob/master/syntax-one-dark.css
/* stylelint-disable */
.highlight pre {
color: #fdce93;
color: $code-color;
background-color: $code-bg;
}
.highlight .hll {
background-color: #222;
}
.highlight .c {
color: #7f9f7f;
}
.highlight .err {
color: #e37170;
background-color: #3d3535;
}
.highlight .g {
color: #7f9f7f;
}
.highlight .k {
color: #f0dfaf;
}
.highlight .l {
color: $code-color;
}
.highlight .n {
color: #dcdccc;
}
.highlight .o {
color: #f0efd0;
}
.highlight .x {
color: $code-color;
}
.highlight .p {
color: #41706f;
}
.highlight .cm {
color: #7f9f7f;
}
.highlight .cp {
color: #7f9f7f;
}
.highlight .c1 {
color: #7f9f7f;
}
.highlight .cs {
color: #cd0000;
font-weight: bold;
}
.highlight .gd {
color: #cd0000;
}
.highlight .ge {
color: $code-color;
font-style: italic;
}
.highlight .gr {
color: red;
}
.highlight .gh {
color: #dcdccc;
font-weight: bold;
}
.highlight .gi {
color: #00cd00;
}
.highlight .go {
color: gray;
}
.highlight .gp {
color: #dcdccc;
font-weight: bold;
}
.highlight .gs {
color: $code-color;
font-weight: bold;
}
.highlight .gu {
color: purple;
font-weight: bold;
}
.highlight .gt {
color: #0040D0;
}
.highlight .kc {
color: #dca3a3;
}
.highlight .kd {
color: #ffff86;
}
.highlight .kn {
color: #dfaf8f;
font-weight: bold;
}
.highlight .kp {
color: #cdcf99;
}
.highlight .kr {
color: #cdcd00;
}
.highlight .kt {
color: #00cd00;
}
.highlight .ld {
color: #cc9393;
}
.highlight .m {
color: #8cd0d3;
}
.highlight .s {
color: #cc9393;
}
.highlight .na {
color: #9ac39f;
}
.highlight .nb {
color: #efef8f;
}
.highlight .nc {
color: #efef8f;
}
.highlight .no {
color: $code-color;
}
.highlight .nd {
color: $code-color;
}
.highlight .ni {
color: #c28182;
}
.highlight .ne {
color: #c3bf9f;
font-weight: bold;
}
.highlight .nf {
color: #efef8f;
}
.highlight .nl {
color: $code-color;
}
.highlight .nn {
color: #8fbede;
}
.highlight .nx {
color: $code-color;
}
.highlight .py {
color: $code-color;
}
.highlight .nt {
color: #9ac39f;
}
.highlight .nv {
color: #dcdccc;
}
.highlight .ow {
color: #f0efd0;
}
.highlight .w {
color: $code-color;
}
.highlight .mf {
color: #8cd0d3;
}
.highlight .mh {
color: #8cd0d3;
}
.highlight .mi {
color: #8cd0d3;
}
.highlight .mo {
color: #8cd0d3;
}
.highlight .sb {
color: #cc9393;
}
.highlight .sc {
color: #cc9393;
}
.highlight .sd {
color: #cc9393;
}
.highlight .s2 {
color: #cc9393;
}
.highlight .se {
color: #cc9393;
}
.highlight .sh {
color: #cc9393;
}
.highlight .si {
color: #cc9393;
}
.highlight .sx {
color: #cc9393;
}
.highlight .sr {
color: #cc9393;
}
.highlight .s1 {
color: #cc9393;
}
.highlight .ss {
color: #cc9393;
}
.highlight .bp {
color: #efef8f;
}
.highlight .vc {
color: #efef8f;
}
.highlight .vg {
color: #dcdccc;
}
.highlight .vi {
color: #ffffc7;
}
.highlight .il {
color: #8cd0d3;
}
.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
/* stylelint-enable */

View File

@ -9,6 +9,7 @@
&:before {
@extend .h5;
content: 'Contents';
font-size: $font-size-base;
display: block;
margin-top: 0;
}
@ -28,6 +29,8 @@
counter-increment: item;
margin-right: $spacer / 4;
color: $brand-main-gray-light;
width: 1rem;
display: inline-block;
}
}
}

View File

@ -113,8 +113,8 @@ $gutter-space: ($spacer * 2) !default;
//
// Code
//
$code-color: $text-color !default;
$code-bg: $gray-dark !default;
$code-color: $brand-main-gray-lighter !default;
$code-bg: darken($gray-dark, 5%) !default;
$kbd-color: $code-color !default;
$kbd-bg: $code-bg !default;