forked from Mirror/wren
407 lines
6.3 KiB
SCSS
407 lines
6.3 KiB
SCSS
$header: "Sanchez", helvetica, arial, sans-serif;
|
|
$subheader: "Lato", helvetica, arial, sans-serif;
|
|
$body: "Source Sans Pro", georgia, serif;
|
|
$code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
|
|
|
|
$dark: hsl(210, 10%, 25%);
|
|
$darker: hsl(210, 20%, 10%);
|
|
$light: hsl(0, 0%, 100%);
|
|
$gray-10: mix($dark, $light, 10%);
|
|
$gray-20: mix($dark, $light, 20%);
|
|
$gray-30: mix($dark, $light, 30%);
|
|
$gray-40: mix($dark, $light, 40%);
|
|
$gray-50: mix($dark, $light, 50%);
|
|
$gray-60: mix($dark, $light, 60%);
|
|
$gray-80: mix($dark, $light, 80%);
|
|
|
|
$text: mix($light, #000, 20%);
|
|
|
|
$code-color: hsl(210, 20%, 40%);
|
|
$code-bg: hsl(210, 20%, 98%);
|
|
|
|
$link: hsl(200, 60%, 50%);
|
|
$link-hover: hsl(210, 100%, 80%);
|
|
$link-dark: hsl(210, 60%, 20%);
|
|
$link-glow: hsla(210, 100%, 50%, 0.4);
|
|
|
|
$core-link: hsl(150, 70%, 40%);
|
|
$core-link-hover: hsl(130, 70%, 70%);
|
|
$core-link-dark: hsl(160, 60%, 25%);
|
|
$core-link-glow: hsla(130, 90%, 50%, 0.4);
|
|
|
|
* {
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body, code, h1, h2, h3, p, pre {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: $light;
|
|
color: $text;
|
|
font: 16px/25px $body;
|
|
}
|
|
|
|
.page {
|
|
margin: 0 auto;
|
|
width: 800px;
|
|
|
|
// Clear contents.
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.main-column {
|
|
position: relative;
|
|
width: 560px;
|
|
}
|
|
|
|
header {
|
|
text-shadow: 0 1px 1px $darker;
|
|
|
|
.page {
|
|
height: 120px;
|
|
}
|
|
|
|
background: $dark;
|
|
border-bottom: solid 1px $darker;
|
|
|
|
h1 {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 63px;
|
|
padding: 0;
|
|
font: 400 48px $header;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
h2 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 72px;
|
|
padding: 0;
|
|
font: 500 13px $subheader;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: $gray-50;
|
|
}
|
|
|
|
a {
|
|
color: $gray-20;
|
|
}
|
|
|
|
a:hover {
|
|
color: $link-hover;
|
|
text-shadow: 0 0 6px $link-glow;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
float: right;
|
|
width: 160px;
|
|
padding-top: 110px;
|
|
|
|
h2 {
|
|
color: $gray-30;
|
|
font: 500 11px $subheader;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 6px 0 20px 0;
|
|
}
|
|
|
|
li {
|
|
font: 16px $body;
|
|
color: $gray-30;
|
|
list-style-type: none;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
padding-top: 30px;
|
|
font: 500 36px/60px $header;
|
|
color: $link;
|
|
}
|
|
|
|
h2 {
|
|
font: 500 24px $header;
|
|
margin: 24px 0 0 0;
|
|
color: $link;
|
|
}
|
|
|
|
h3 {
|
|
font: 20px $body;
|
|
margin: 24px 0 0 0;
|
|
color: $link;
|
|
}
|
|
|
|
a {
|
|
color: $link;
|
|
text-decoration: none;
|
|
transition: color 0.2s, text-shadow 0.2s;
|
|
outline: none;
|
|
}
|
|
|
|
main {
|
|
@extend .main-column;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
a:hover {
|
|
color: $link-dark;
|
|
}
|
|
|
|
.header-anchor {
|
|
color: $light;
|
|
}
|
|
|
|
h2:hover > .header-anchor,
|
|
h3:hover > .header-anchor {
|
|
color: $gray-10;
|
|
}
|
|
|
|
h2:hover > .header-anchor:hover,
|
|
h3:hover > .header-anchor:hover {
|
|
color: $link-dark;
|
|
}
|
|
|
|
p, li {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
code, pre {
|
|
color: $code-color;
|
|
font: 13px $code;
|
|
background: $code-bg;
|
|
border-radius: 2px;
|
|
border: solid 1px hsl(200, 20%, 95%);
|
|
border-bottom: solid 1px hsl(200, 20%, 90%);
|
|
}
|
|
|
|
code {
|
|
padding: 1px 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
pre {
|
|
margin: 10px 0;
|
|
line-height: 18px;
|
|
padding: 10px;
|
|
|
|
// Scroll horizontally if not wide enough.
|
|
overflow: auto;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 40px;
|
|
padding: 20px 0 40px 0;
|
|
font: 14px $body;
|
|
background: $dark;
|
|
color: $gray-20;
|
|
border-top: solid 1px $darker;
|
|
text-align: center;
|
|
|
|
text-shadow: 0 1px 1px $darker;
|
|
|
|
a {
|
|
color: $link-hover;
|
|
}
|
|
|
|
a:hover {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
// Syntax highlighting.
|
|
.codehilite pre {
|
|
// Comments.
|
|
span.c1, span.cm { color: mix($code-color, $code-bg, 60%); }
|
|
|
|
// Keywords.
|
|
span.k, span.kd, span.kc { color: hsl(210, 80%, 60%); }
|
|
|
|
// Numbers.
|
|
span.m, span.mi { color: hsl(90, 80%, 35%); }
|
|
|
|
// Strings.
|
|
span.s, span.s2 { color: hsl(40, 80%, 50%); }
|
|
span.se { color: hsl(30, 80%, 50%); }
|
|
}
|
|
|
|
// Have a different primary color for the core library docs.
|
|
body.core {
|
|
header {
|
|
a {
|
|
color: $gray-20;
|
|
}
|
|
|
|
a:hover {
|
|
color: $core-link-hover;
|
|
text-shadow: 0 0 6px $core-link-glow;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $core-link;
|
|
}
|
|
|
|
a:hover {
|
|
color: $core-link-dark;
|
|
}
|
|
|
|
.header-anchor {
|
|
color: $light;
|
|
}
|
|
|
|
main {
|
|
h1, h2, h3 {
|
|
color: $core-link;
|
|
}
|
|
|
|
h2:hover > .header-anchor:hover,
|
|
h3:hover > .header-anchor:hover {
|
|
color: $core-link-dark;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
a {
|
|
color: $core-link-hover;
|
|
}
|
|
|
|
a:hover {
|
|
color: $core-link;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bar charts on the performance page.
|
|
table.chart {
|
|
width: 100%;
|
|
padding-left: 25px;
|
|
|
|
td, th {
|
|
line-height: 14px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
th {
|
|
font-size: 14px;
|
|
text-align: left;
|
|
width: 100px;
|
|
}
|
|
|
|
.chart-bar {
|
|
display: inline-block;
|
|
font: 13px $body;
|
|
color: $light;
|
|
background: $link;
|
|
border-bottom: solid 1px $link-dark;
|
|
text-align: right;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.chart-bar.wren {
|
|
background: mix($link, $link-dark, 30%);
|
|
border-bottom: solid 1px $link-dark;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 839px) {
|
|
// 36 pixel columns.
|
|
.page { width: 720px; }
|
|
nav { width: 144px; }
|
|
.main-column { width: 504px; }
|
|
}
|
|
|
|
@media only screen and (max-width: 759px) {
|
|
// 32 pixel columns.
|
|
.page { width: 640px; }
|
|
nav { width: 128px; }
|
|
.main-column { width: 448px; }
|
|
}
|
|
|
|
@media only screen and (max-width: 679px) {
|
|
// 28 pixel columns.
|
|
.page { width: 560px; }
|
|
nav { width: 112px; }
|
|
.main-column { width: 392px; }
|
|
|
|
header h2 {
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 639px) {
|
|
.page { width: 100%; }
|
|
|
|
nav {
|
|
float: none;
|
|
width: 100%;
|
|
padding: 10px 10px;
|
|
margin: 0;
|
|
background: $gray-10;
|
|
text-align: center;
|
|
|
|
section {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
.main-column {
|
|
padding: 0 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
h1 {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
main {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
pre {
|
|
font-size: 13px;
|
|
}
|
|
|
|
footer {
|
|
padding: 20px 20px 40px 20px;
|
|
}
|
|
}
|