wren/doc/site/style.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);

$module-link:        hsl(150, 70%, 40%);
$module-link-hover:  hsl(130, 70%, 70%);
$module-link-dark:   hsl(160, 60%, 25%);
$module-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: 109px;

  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: 15px $body;
    color: $gray-30;
    list-style-type: none;
    margin: 0 0 4px 0;
  }
}

nav.small {
  // Only show the mobile navigation on small screens.
  display: none;

  float: none;
  width: 100%;

  padding: 16px 0 0 0;
  margin: 0;
  background: $gray-10;

  table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 16px 0;
  }

  h2 {
    margin: 16px 0 0 0;
    padding: 0 0 1px 0;
    border-bottom: solid 1px $gray-20;
  }
}

h1 {
  padding-top: 30px;
  font: 500 36px/60px $header;
  color: $link;
}

h2 {
  font: 500 24px $header;
  margin: 24px 0 0 0;
  color: $link;

  code {
    border: none;
    background: inherit;
    color: inherit;
    font-size: 24px;
  }
}

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;
  float: left;
}

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: 20px;
  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;
  }
}

.right {
  float: right;
}

// Syntax highlighting.
.codehilite pre {
  // Comments.
  span.c1, span.cm { color: mix($code-color, $code-bg, 60%); }

  // Keywords.
  span.k, span.kd, span.kc, span.nb  { color: hsl(200, 60%, 50%); }

  // Names.
  span.vg { color: hsl(180, 70%, 35%); }
  span.vi { color: hsl(90, 80%, 35%); }
  span.vc { color: hsl(130, 60%, 40%); }

  // Numbers.
  span.m, span.mi, span.mf { color: hsl(30, 80%, 45%); }

  // Strings.
  span.s, span.s2  { color: hsl(40, 80%, 45%); }
  span.se          { color: hsl(45, 80%, 50%); }

  // Operators and punctuation.
  span.o           { color: hsl(200, 40%, 50%); }
  span.p           { color: mix($code-color, $code-bg, 80%); }

  // Preprocessor directives.
  span.cp          { color: hsl(270, 40%, 60%); }

  span.output {
    float: right;
    color: hsl(150, 50%, 45%);

    &::before, &::after {
      color: hsl(150, 50%, 80%);
    }

    // Tall angle brackets.
    &::before { content: "\276c  "; }
    &::after { content: ' \276d'; }
  }

  span.error {
    float: right;
    color: hsl(350, 50%, 60%);

    &::before {
      color: hsl(350, 50%, 75%);
      content: "Error: ";
    }
  }
}

// Have a different primary color for the module docs.
body.module {
  header {
    a {
      color: $gray-20;
    }

    a:hover {
      color: $module-link-hover;
      text-shadow: 0 0 6px $module-link-glow;
    }
  }

  a {
    color: $module-link;
  }

  a:hover {
    color: $module-link-dark;
  }

  .header-anchor {
    color: $light;
  }

  main {
    h1, h2, h3 {
      color: $module-link;
    }

    h2:hover > .header-anchor:hover,
    h3:hover > .header-anchor:hover {
      color: $module-link-dark;
    }
  }

  footer {
    a {
      color: $module-link-hover;
    }

    a:hover {
      color: $module-link;
    }
  }
}

table {
  width: 100%;
  border-collapse: collapse;

  tr {
    margin: 0;
    padding: 0;
    vertical-align: top;
  }

  th, td {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }
}

// Bar charts on the performance page.
table.chart {
  margin: 4px 0 0 0;
  padding: 5px 0 5px 25px;

  td, th {
    line-height: 14px;
    margin: 0;
    padding: 1px 0;
  }

  th {
    font-size: 14px;
    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;
  }
}

// Precedence table on expressions page.
table.precedence {
  th {
    font: 500 11px $subheader;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: $gray-60;

    padding: 6px 0;
    border-bottom: solid 1px $gray-10;
  }

  td {
    padding: 3px 0;
    border-bottom: solid 1px $gray-10;
  }
}

@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%; }

  // Switch to the mobile navigation.
  nav.big { display: none; }
  nav.small { display: block; }

  .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;
  }
}