Adjust sidebar navigation list and syntax highlighting styles
This commit is contained in:
Michael Rose
parent
7d93083b91
commit
d04308520f
8 changed files with 100 additions and 195 deletions
|
|
@ -147,6 +147,7 @@ figcaption > code {
|
|||
background: $code-background-color;
|
||||
border: 1px solid $lighter-gray;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:before, &:after {
|
||||
letter-spacing: -0.2em;
|
||||
|
|
|
|||
|
|
@ -308,6 +308,10 @@
|
|||
.nav__list {
|
||||
font-size: 1.25rem;
|
||||
|
||||
ul {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.125em 0;
|
||||
|
|
@ -318,8 +322,17 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
color: $primary-color;
|
||||
margin-left: -0.5em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background: $primary-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -337,8 +350,9 @@
|
|||
margin: 0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
font-family: $sans-serif-narrow;
|
||||
font-size: $type-size-5;
|
||||
font-size: $type-size-6;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
|
|
@ -355,6 +369,7 @@
|
|||
background-color: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.toc__menu {
|
||||
|
|
@ -378,6 +393,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
> li:last-child {
|
||||
a {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
li ul > li a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
text-indent: initial; // override
|
||||
background-color: mix(#fff, $notice-color, 90%);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
h4 {
|
||||
margin-top: 0 !important; // override
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@
|
|||
}
|
||||
|
||||
.page__inner-wrap {
|
||||
@include full();
|
||||
|
||||
.page__content,
|
||||
.page__meta,
|
||||
.page__share {
|
||||
|
|
|
|||
|
|
@ -7,203 +7,81 @@ div.highlighter-rouge, figure.highlight {
|
|||
padding: 1em;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
background-color: $code-background-color-dark;
|
||||
background-color: $code-background-color;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.highlight {
|
||||
margin: 0;
|
||||
font-family: $monospace;
|
||||
font-size: $type-size-6;
|
||||
line-height: 1.5;
|
||||
font-size: $type-size-7;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight table td { padding: 5px; }
|
||||
.highlight table pre { margin: 0; }
|
||||
|
||||
/* Monokai Sublime color theme */
|
||||
/* GitHub style */
|
||||
|
||||
.highlight .gh {
|
||||
color: #999999;
|
||||
}
|
||||
.highlight .sr {
|
||||
color: #f6aa11;
|
||||
}
|
||||
.highlight .go {
|
||||
color: #888888;
|
||||
}
|
||||
.highlight .gp {
|
||||
color: #555555;
|
||||
}
|
||||
.highlight .gs {
|
||||
}
|
||||
.highlight .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.highlight .nb {
|
||||
color: #f6aa11;
|
||||
}
|
||||
.highlight .cm {
|
||||
color: #75715e;
|
||||
}
|
||||
.highlight .cp {
|
||||
color: #75715e;
|
||||
}
|
||||
.highlight .c1 {
|
||||
color: #75715e;
|
||||
}
|
||||
.highlight .cs {
|
||||
color: #75715e;
|
||||
}
|
||||
.highlight .c, .highlight .cd {
|
||||
color: #75715e;
|
||||
}
|
||||
.highlight .err {
|
||||
color: #960050;
|
||||
}
|
||||
.highlight .gr {
|
||||
color: #960050;
|
||||
}
|
||||
.highlight .gt {
|
||||
color: #960050;
|
||||
}
|
||||
.highlight .gd {
|
||||
color: #49483e;
|
||||
}
|
||||
.highlight .gi {
|
||||
color: #49483e;
|
||||
}
|
||||
.highlight .ge {
|
||||
color: #49483e;
|
||||
}
|
||||
.highlight .kc {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.highlight .kd {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.highlight .kr {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.highlight .no {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.highlight .kt {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.highlight .mf {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .mh {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .il {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .mi {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .mo {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .m, .highlight .mb, .highlight .mx {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .sc {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .se {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .ss {
|
||||
color: #ae81ff;
|
||||
}
|
||||
.highlight .sd {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .s2 {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .sb {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .sh {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .si {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .sx {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .s1 {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .s {
|
||||
color: #e6db74;
|
||||
}
|
||||
.highlight .na {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.highlight .nc {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.highlight .nd {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.highlight .ne {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.highlight .nf {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.highlight .vc {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .nn {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .nl {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .ni {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .bp {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .vg {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .vi {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .nv {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .w {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .n, .highlight .py, .highlight .nx {
|
||||
color: #ffffff;
|
||||
}
|
||||
.highlight .ow {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .nt {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .k, .highlight .kv {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .kn {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .kp {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .o {
|
||||
color: #f92672;
|
||||
}
|
||||
.highlight .c { color: #999988; font-style: italic; }
|
||||
.highlight .err { color: #a61717; background-color: #e3d2d2; }
|
||||
.highlight .k { font-weight: bold; }
|
||||
.highlight .o { font-weight: bold; }
|
||||
.highlight .cm { color: #999988; font-style: italic; }
|
||||
.highlight .cp { color: #999999; font-weight: bold; }
|
||||
.highlight .c1 { color: #999988; font-style: italic; }
|
||||
.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
|
||||
.highlight .gd { color: #000000; background-color: #ffdddd; }
|
||||
.highlight .gd .x { color: #000000; background-color: #ffaaaa; }
|
||||
.highlight .ge { font-style: italic; }
|
||||
.highlight .gr { color: #aa0000; }
|
||||
.highlight .gh { color: #999999; }
|
||||
.highlight .gi { color: #000000; background-color: #ddffdd; }
|
||||
.highlight .gi .x { color: #000000; background-color: #aaffaa; }
|
||||
.highlight .go { color: #888888; }
|
||||
.highlight .gp { color: #555555; }
|
||||
.highlight .gs { font-weight: bold; }
|
||||
.highlight .gu { color: #800080; font-weight: bold; }
|
||||
.highlight .gt { color: #aa0000; }
|
||||
.highlight .kc { font-weight: bold; }
|
||||
.highlight .kd { font-weight: bold; }
|
||||
.highlight .kn { font-weight: bold; }
|
||||
.highlight .kp { font-weight: bold; }
|
||||
.highlight .kr { font-weight: bold; }
|
||||
.highlight .kt { color: #445588; font-weight: bold; }
|
||||
.highlight .m { color: #009999; }
|
||||
.highlight .s { color: #dd1144; }
|
||||
.highlight .n { color: #333333; }
|
||||
.highlight .na { color: teal; }
|
||||
.highlight .nb { color: #0086b3; }
|
||||
.highlight .nc { color: #445588; font-weight: bold; }
|
||||
.highlight .no { color: teal; }
|
||||
.highlight .ni { color: purple; }
|
||||
.highlight .ne { color: #990000; font-weight: bold; }
|
||||
.highlight .nf { color: #990000; font-weight: bold; }
|
||||
.highlight .nn { color: #555555; }
|
||||
.highlight .nt { color: navy; }
|
||||
.highlight .nv { color: teal; }
|
||||
.highlight .ow { font-weight: bold; }
|
||||
.highlight .w { color: #bbbbbb; }
|
||||
.highlight .mf { color: #009999; }
|
||||
.highlight .mh { color: #009999; }
|
||||
.highlight .mi { color: #009999; }
|
||||
.highlight .mo { color: #009999; }
|
||||
.highlight .sb { color: #dd1144; }
|
||||
.highlight .sc { color: #dd1144; }
|
||||
.highlight .sd { color: #dd1144; }
|
||||
.highlight .s2 { color: #dd1144; }
|
||||
.highlight .se { color: #dd1144; }
|
||||
.highlight .sh { color: #dd1144; }
|
||||
.highlight .si { color: #dd1144; }
|
||||
.highlight .sx { color: #dd1144; }
|
||||
.highlight .sr { color: #009926; }
|
||||
.highlight .s1 { color: #dd1144; }
|
||||
.highlight .ss { color: #990073; }
|
||||
.highlight .bp { color: #999999; }
|
||||
.highlight .vc { color: teal; }
|
||||
.highlight .vg { color: teal; }
|
||||
.highlight .vi { color: teal; }
|
||||
.highlight .il { color: #009999; }
|
||||
.highlight .gc { color: #999; background-color: #eaf2f5; }
|
||||
|
|
@ -138,7 +138,7 @@ body:hover .visually-hidden button {
|
|||
|
||||
.full {
|
||||
@include breakpoint($large){
|
||||
margin-right: -1 * $right-sidebar-width;
|
||||
margin-right: -1 * span(2.5 of 12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $type-size-3 : 1.563em;
|
|||
$type-size-4 : 1.25em;
|
||||
$type-size-5 : 1em;
|
||||
$type-size-6 : 0.8em;
|
||||
$type-size-7 : 0.7em;
|
||||
$type-size-7 : 0.75em;
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -48,7 +48,7 @@ $light-gray : mix(#fff, $gray, 70%);
|
|||
$lighter-gray : mix(#fff, $gray, 90%);
|
||||
|
||||
$body-color : #fff;
|
||||
$background-color : #f5f5f5;
|
||||
$background-color : #f8f8f8;
|
||||
$code-background-color : #fff;
|
||||
$code-background-color-dark : #1b1a24;
|
||||
$text-color : #333332;
|
||||
|
|
@ -95,6 +95,8 @@ $link-color-focus : darken($link-color-visited, 10);
|
|||
|
||||
$border-radius : 4px;
|
||||
|
||||
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
|
||||
|
||||
|
||||
/*
|
||||
Breakpoints
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue