wren/style.css

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body, code, h1, h2, h3, p, pre, html {
  margin: 0;
  padding: 0; }

html {
  height: 100%;
  min-height: 100%; }

body {
  background: white;
  color: #333333;
  font: 16px/25px "Source Sans Pro", georgia, serif;
  height: 100%;
  min-height: 100%; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid whitesmoke;
  margin: 1em 0;
  padding: 0; }

blockquote {
  color: #9c9fa2;
  margin: 0;
  max-width: 24em;
  margin-left: 0.5em; }

date {
  color: #60666a; }

.page {
  margin: 0 auto;
  width: 800px;
  min-height: calc(100% - 16.75em); }
  .page:after {
    content: "";
    display: table;
    clear: both; }

.main-column, main {
  position: relative;
  width: 560px; }

.logo {
  height: 7em;
  position: relative;
  margin: auto;
  display: block;
  left: -1em;
  margin-bottom: 2em; }

header {
  background: white;
  border-bottom: solid 1px #ebebec; }
  header .page {
    height: 8em; }
  header h1 {
    position: absolute;
    left: -8px;
    top: 1.51667em;
    padding: 0;
    font: 400 48px "Sanchez", helvetica, arial, sans-serif;
    letter-spacing: 2px; }
  header h2 {
    position: absolute;
    left: 0;
    top: 8.5em;
    padding: 0;
    font: 500 13px "Lato", helvetica, arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9c9fa2; }
  header a {
    color: #60666a; }
  header a:hover {
    color: #99ccff;
    /*text-shadow: 0 0 6px $link-glow;*/ }

nav {
  float: right;
  width: 160px;
  margin-top: 2em; }
  nav h2 {
    color: #60666a;
    font: 500 13px "Lato", helvetica, arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0; }
  nav ul {
    padding: 0;
    margin: 6px 0 20px 0; }
  nav li {
    font: 17px "Source Sans Pro", georgia, serif;
    color: #c3c5c7;
    list-style-type: none;
    margin: 0 0 4px 0; }

nav.small {
  display: none;
  float: none;
  width: 100%;
  padding: 16px 0 0 0;
  margin: 0;
  background: #ebebec; }
  nav.small table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 16px 0; }
  nav.small h2 {
    margin: 16px 0 0 0;
    padding: 0 0 1px 0;
    border-bottom: solid 1px #d7d8da; }

h1 {
  padding-top: 30px;
  font: 500 36px/60px "Sanchez", helvetica, arial, sans-serif;
  color: #3399cc; }

h2 {
  font: 500 24px "Sanchez", helvetica, arial, sans-serif;
  margin: 24px 0 0 0;
  color: #3399cc; }
  h2 code {
    border: none;
    background: inherit;
    color: inherit;
    font-size: 24px; }

h3 {
  font: 20px "Source Sans Pro", georgia, serif;
  margin: 24px 0 0 0;
  color: #3399cc; }
  h3 code {
    border: none;
    background: inherit;
    color: inherit;
    font-size: 20px; }

a {
  color: #3399cc;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
  outline: none; }

main {
  margin-top: 2em;
  float: left; }
  main .intro {
    border-bottom: solid 1px #ebebec;
    margin-bottom: -0.5em; }
  main h2 {
    display: block;
    position: relative;
    max-width: 16em; }

a:hover {
  color: #143352; }

.header-anchor {
  color: white; }

h2:hover > .header-anchor,
h3:hover > .header-anchor {
  color: #ebebec; }

h2:hover > .header-anchor:hover,
h3:hover > .header-anchor:hover {
  color: #143352; }

p {
  margin: 10px 0; }

p + p {
  margin-top: 20px; }

code, pre {
  color: #3d4c5c;
  font: 13px "Source Code Pro", Menlo, Monaco, Consolas, monospace;
  background: #fcfcfc;
  border-radius: 2px;
  border: solid 1px #dae2e7; }

code {
  padding: 1px 2px;
  white-space: nowrap; }

pre {
  margin: 10px 0;
  line-height: 20px;
  padding: 10px;
  overflow: auto;
  white-space: pre-wrap; }

footer {
  margin-top: 4em;
  padding: 20px 0 40px 0;
  font: 14px "Source Sans Pro", georgia, serif;
  background: #394046;
  color: #d7d8da;
  border-top: solid 1px #14191f;
  text-align: center;
  text-shadow: 0 1px 1px #14191f; }
  footer a {
    color: #99ccff; }
  footer a:hover {
    color: #3399cc; }

.right {
  float: right; }

.codehilite pre span.c1, .codehilite pre span.cm {
  color: #89929c; }
.codehilite pre span.k, .codehilite pre span.kd, .codehilite pre span.kc, .codehilite pre span.kt, .codehilite pre span.nb {
  color: #269dd9; }
.codehilite pre span.vg {
  color: #1b9898; }
.codehilite pre span.vi {
  color: #59a112; }
.codehilite pre span.vc {
  color: #29a33d; }
.codehilite pre span.nf {
  color: #29a3a3; }
.codehilite pre span.m, .codehilite pre span.mi, .codehilite pre span.mf {
  color: #80b34d; }
.codehilite pre span.s, .codehilite pre span.s2 {
  color: #c2850a; }
.codehilite pre span.se {
  color: #dab80b; }
.codehilite pre span.si {
  color: #c2a30a;
  background: #fef6e7; }
.codehilite pre span.o {
  color: #4d90b3; }
.codehilite pre span.p {
  color: #636f7c; }
.codehilite pre span.cp {
  color: #9970c2; }
.codehilite pre span.output {
  float: right;
  color: #39ac73; }
  .codehilite pre span.output::before, .codehilite pre span.output::after {
    color: #b3e6cc; }
  .codehilite pre span.output::before {
    content: "\276c  "; }
  .codehilite pre span.output::after {
    content: ' \276d'; }
.codehilite pre span.error {
  float: right;
  color: #cc6677; }
  .codehilite pre span.error::before {
    color: #df9faa;
    content: "Error: "; }

body.module header a {
  color: #60666a; }
body.module header a:hover {
  color: #7de88f; }
body.module a {
  color: #1fad66; }
body.module a:hover {
  color: #19664d; }
body.module .header-anchor {
  color: white; }
body.module main h1, body.module main h2, body.module main h3 {
  color: #1fad66; }
body.module main h2:hover > .header-anchor:hover,
body.module main h3:hover > .header-anchor:hover {
  color: #19664d; }
body.module footer a {
  color: #7de88f; }
body.module footer a:hover {
  color: #1fad66; }

table {
  width: 100%;
  border-collapse: collapse; }
  table tr {
    margin: 0;
    padding: 0;
    vertical-align: top; }
  table th, table td {
    font-size: 14px;
    line-height: 20px;
    text-align: left; }

table.chart {
  margin: 4px 0 0 0;
  padding: 5px 0 5px 25px; }
  table.chart td, table.chart th {
    line-height: 14px;
    margin: 0;
    padding: 1px 0; }
  table.chart th {
    font-size: 14px;
    width: 100px; }
  table.chart .chart-bar {
    display: inline-block;
    font: 13px "Source Sans Pro", georgia, serif;
    color: white;
    background: #3399cc;
    border-bottom: solid 1px #143352;
    text-align: right;
    border-radius: 2px; }
  table.chart .chart-bar.wren {
    background: #1d5176;
    border-bottom: solid 1px #143352; }

table.precedence th {
  font: 500 11px "Lato", helvetica, arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888c90;
  padding: 6px 0;
  border-bottom: solid 1px #ebebec; }
table.precedence td {
  padding: 3px 0;
  border-bottom: solid 1px #ebebec; }

@media only screen and (max-width: 839px) {
  .page {
    width: 720px; }

  nav {
    width: 144px; }

  .main-column, main {
    width: 504px; } }
@media only screen and (max-width: 759px) {
  .page {
    width: 640px; }

  nav {
    width: 128px; }

  .main-column, main {
    width: 448px; } }
@media only screen and (max-width: 679px) {
  .page {
    width: 560px; }

  nav {
    width: 112px; }

  .main-column, main {
    width: 392px; }

  header h2 {
    font-size: 12px;
    letter-spacing: 1px; } }
@media only screen and (max-width: 639px) {
  .page {
    width: 100%; }

  nav.big {
    display: none; }

  nav.small {
    display: block; }

  .main-column, main {
    padding: 0 20px;
    width: 100%; }

  header h1 {
    position: relative;
    top: 10px;
    left: 0;
    text-align: center; }
  header 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; } }