Adjust sidebar navigation list and syntax highlighting styles

This commit is contained in:
Michael Rose 2016-03-31 21:41:00 -04:00
parent 7d93083b91
commit d04308520f
8 changed files with 100 additions and 195 deletions

View file

@ -147,6 +147,7 @@ figcaption > code {
background: $code-background-color; background: $code-background-color;
border: 1px solid $lighter-gray; border: 1px solid $lighter-gray;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow;
&:before, &:after { &:before, &:after {
letter-spacing: -0.2em; letter-spacing: -0.2em;

View file

@ -308,6 +308,10 @@
.nav__list { .nav__list {
font-size: 1.25rem; font-size: 1.25rem;
ul {
margin-bottom: 1em;
}
a { a {
display: block; display: block;
padding: 0.125em 0; padding: 0.125em 0;
@ -318,8 +322,17 @@
} }
.active { .active {
color: $primary-color; margin-left: -0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
color: #fff;
font-weight: bold; font-weight: bold;
background: $primary-color;
border-radius: $border-radius;
&:hover {
color: #fff;
}
} }
} }
@ -337,8 +350,9 @@
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em 0; padding: 0.5em 0;
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;
font-size: $type-size-5; font-size: $type-size-6;
font-weight: bold; font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
@ -355,6 +369,7 @@
background-color: #fff; background-color: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow;
} }
.toc__menu { .toc__menu {
@ -378,6 +393,12 @@
} }
} }
> li:last-child {
a {
border-bottom: none;
}
}
li ul > li a { li ul > li a {
font-weight: normal; font-weight: normal;
} }

View file

@ -18,6 +18,7 @@
text-indent: initial; // override text-indent: initial; // override
background-color: mix(#fff, $notice-color, 90%); background-color: mix(#fff, $notice-color, 90%);
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow;
h4 { h4 {
margin-top: 0 !important; // override margin-top: 0 !important; // override

View file

@ -32,6 +32,8 @@
} }
.page__inner-wrap { .page__inner-wrap {
@include full();
.page__content, .page__content,
.page__meta, .page__meta,
.page__share { .page__share {

View file

@ -7,203 +7,81 @@ div.highlighter-rouge, figure.highlight {
padding: 1em; padding: 1em;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;
background-color: $code-background-color-dark; background-color: $code-background-color;
box-shadow: $box-shadow;
.highlight { .highlight {
margin: 0; margin: 0;
font-family: $monospace; font-family: $monospace;
font-size: $type-size-6; font-size: $type-size-7;
line-height: 1.5; line-height: 1.8;
} }
} }
.highlight table td { padding: 5px; } .highlight table td { padding: 5px; }
.highlight table pre { margin: 0; } .highlight table pre { margin: 0; }
/* Monokai Sublime color theme */ /* GitHub style */
.highlight .gh { .highlight .c { color: #999988; font-style: italic; }
color: #999999; .highlight .err { color: #a61717; background-color: #e3d2d2; }
} .highlight .k { font-weight: bold; }
.highlight .sr { .highlight .o { font-weight: bold; }
color: #f6aa11; .highlight .cm { color: #999988; font-style: italic; }
} .highlight .cp { color: #999999; font-weight: bold; }
.highlight .go { .highlight .c1 { color: #999988; font-style: italic; }
color: #888888; .highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
} .highlight .gd { color: #000000; background-color: #ffdddd; }
.highlight .gp { .highlight .gd .x { color: #000000; background-color: #ffaaaa; }
color: #555555; .highlight .ge { font-style: italic; }
} .highlight .gr { color: #aa0000; }
.highlight .gs { .highlight .gh { color: #999999; }
} .highlight .gi { color: #000000; background-color: #ddffdd; }
.highlight .gu { .highlight .gi .x { color: #000000; background-color: #aaffaa; }
color: #aaaaaa; .highlight .go { color: #888888; }
} .highlight .gp { color: #555555; }
.highlight .nb { .highlight .gs { font-weight: bold; }
color: #f6aa11; .highlight .gu { color: #800080; font-weight: bold; }
} .highlight .gt { color: #aa0000; }
.highlight .cm { .highlight .kc { font-weight: bold; }
color: #75715e; .highlight .kd { font-weight: bold; }
} .highlight .kn { font-weight: bold; }
.highlight .cp { .highlight .kp { font-weight: bold; }
color: #75715e; .highlight .kr { font-weight: bold; }
} .highlight .kt { color: #445588; font-weight: bold; }
.highlight .c1 { .highlight .m { color: #009999; }
color: #75715e; .highlight .s { color: #dd1144; }
} .highlight .n { color: #333333; }
.highlight .cs { .highlight .na { color: teal; }
color: #75715e; .highlight .nb { color: #0086b3; }
} .highlight .nc { color: #445588; font-weight: bold; }
.highlight .c, .highlight .cd { .highlight .no { color: teal; }
color: #75715e; .highlight .ni { color: purple; }
} .highlight .ne { color: #990000; font-weight: bold; }
.highlight .err { .highlight .nf { color: #990000; font-weight: bold; }
color: #960050; .highlight .nn { color: #555555; }
} .highlight .nt { color: navy; }
.highlight .gr { .highlight .nv { color: teal; }
color: #960050; .highlight .ow { font-weight: bold; }
} .highlight .w { color: #bbbbbb; }
.highlight .gt { .highlight .mf { color: #009999; }
color: #960050; .highlight .mh { color: #009999; }
} .highlight .mi { color: #009999; }
.highlight .gd { .highlight .mo { color: #009999; }
color: #49483e; .highlight .sb { color: #dd1144; }
} .highlight .sc { color: #dd1144; }
.highlight .gi { .highlight .sd { color: #dd1144; }
color: #49483e; .highlight .s2 { color: #dd1144; }
} .highlight .se { color: #dd1144; }
.highlight .ge { .highlight .sh { color: #dd1144; }
color: #49483e; .highlight .si { color: #dd1144; }
} .highlight .sx { color: #dd1144; }
.highlight .kc { .highlight .sr { color: #009926; }
color: #66d9ef; .highlight .s1 { color: #dd1144; }
} .highlight .ss { color: #990073; }
.highlight .kd { .highlight .bp { color: #999999; }
color: #66d9ef; .highlight .vc { color: teal; }
} .highlight .vg { color: teal; }
.highlight .kr { .highlight .vi { color: teal; }
color: #66d9ef; .highlight .il { color: #009999; }
} .highlight .gc { color: #999; background-color: #eaf2f5; }
.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;
}

View file

@ -138,7 +138,7 @@ body:hover .visually-hidden button {
.full { .full {
@include breakpoint($large){ @include breakpoint($large){
margin-right: -1 * $right-sidebar-width; margin-right: -1 * span(2.5 of 12);
} }
} }

View file

@ -35,7 +35,7 @@ $type-size-3 : 1.563em;
$type-size-4 : 1.25em; $type-size-4 : 1.25em;
$type-size-5 : 1em; $type-size-5 : 1em;
$type-size-6 : 0.8em; $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%); $lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff; $body-color : #fff;
$background-color : #f5f5f5; $background-color : #f8f8f8;
$code-background-color : #fff; $code-background-color : #fff;
$code-background-color-dark : #1b1a24; $code-background-color-dark : #1b1a24;
$text-color : #333332; $text-color : #333332;
@ -95,6 +95,8 @@ $link-color-focus : darken($link-color-visited, 10);
$border-radius : 4px; $border-radius : 4px;
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
/* /*
Breakpoints Breakpoints

File diff suppressed because one or more lines are too long