docs; formatting and tidying

- quick clean up pass on layout and colors for clarity/legibility
- added logo to the sidebar
- fix various css things like a full height page when content is shorter, so the footer doesn't creep away from the bottom
- start using em instead of px for consistency across devices

doc/site/classes.markdown

@@ -554,5 +554,6 @@ base class constructor:
       }
     }
 
+<br><hr>
 <a class="right" href="concurrency.html">Concurrency &rarr;</a>
 <a href="functions.html">&larr; Functions</a>

doc/site/concurrency.markdown

@@ -181,5 +181,6 @@ functions, `transfer()` works more like an unstructured goto. It lets you freely
 switch control between a number of fibers, all of which act as peers to one
 another.
 
+<br><hr>
 <a class="right" href="error-handling.html">Error Handling &rarr;</a>
 <a href="classes.html">&larr; Classes</a>

doc/site/control-flow.markdown

@@ -240,5 +240,6 @@ The built-in [List](lists.html) and [Range](values.html#ranges) types implement
 `iterate()` and `iteratorValue()` to walk over their respective sequences. You
 can implement the same methods in your classes to make your own types iterable.
 
+<br><hr>
 <a class="right" href="variables.html">Variables &rarr;</a>
 <a href="method-calls.html">&larr; Method Calls</a>

doc/site/error-handling.markdown

@@ -168,5 +168,6 @@ For example, a method for parsing a number could return a number on success and
 `null` to indicate parsing failed. Since Wren is dynamically typed, it's easy
 and natural for a method to return different types of values.
 
+<br><hr>
 <a class="right" href="modularity.html">Modularity &rarr;</a>
 <a href="concurrency.html">&larr; Concurrency</a>

doc/site/functions.markdown

@@ -163,5 +163,6 @@ to`i`:
     System.print(counter.call()) //> 2
     System.print(counter.call()) //> 3
 
+<br><hr>
 <a class="right" href="classes.html">Classes &rarr;</a>
 <a href="variables.html">&larr; Variables</a>

doc/site/index.markdown

@@ -1,7 +1,9 @@
-^title Welcome
+^title
 
 ## Wren is a small, fast, class-based concurrent scripting language
 
+---
+
 Think Smalltalk in a Lua-sized package with a dash of Erlang and wrapped up in
 a familiar, modern [syntax][].
 
@@ -20,6 +22,7 @@ a familiar, modern [syntax][].
 
     while (!adjectives.isDone) System.print(adjectives.call())
 
+
  *  **Wren is small.** The VM implementation is under [4,000 semicolons][src].
     You can skim the whole thing in an afternoon. It's *small*, but not
     *dense*. It is readable and [lovingly-commented][nan].
@@ -41,6 +44,8 @@ a familiar, modern [syntax][].
     and [an easy-to-use C API][embedding]. It compiles cleanly as C99, C++98
     or anything later.
 
+---
+
 If you like the sound of this, [let's get started][started]. You can even try
 it [in your browser][browser]! Excited? Well, come on and [get
 involved][contribute]!

doc/site/maps.markdown

@@ -132,5 +132,6 @@ that they are printed isn't defined. Wren makes no promises about what order
 keys and values are iterated in when you use these methods. All it promises is
 that every entry will appear exactly once.
 
+<br><hr>
 <a class="right" href="method-calls.html">Method Calls &rarr;</a>
 <a href="lists.html">&larr; Lists</a>

doc/site/method-calls.markdown

@@ -177,5 +177,6 @@ These are equivalent to method calls whose signature is `[_]=(_)` and whose
 arguments are both the subscript (or subscripts) and the value on the right-hand
 side.
 
+<br><hr>
 <a class="right" href="control-flow.html">Control Flow &rarr;</a>
 <a href="maps.html">&larr; Maps</a>

doc/site/modularity.markdown

@@ -286,4 +286,5 @@ This sounds super hairy, but that's because cyclic dependencies are hairy in
 general. The key point here is that Wren *can* handle them in the rare cases
 where you need them.
 
+<br><hr>
 <a href="error-handling.html">&larr; Error Handling</a>

doc/site/modules/core/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">core</a></li>

doc/site/modules/io/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">io</a></li>

doc/site/modules/meta/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">meta</a></li>

doc/site/modules/os/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">os</a></li>

doc/site/modules/random/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">random</a></li>

doc/site/modules/scheduler/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">scheduler</a></li>

doc/site/modules/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../wren.svg" class="logo"></a>
     <section>
       <h2>core</h2>
       <ul>

doc/site/modules/timer/template.html

@@ -20,6 +20,7 @@
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="../../wren.svg" class="logo"></a>
     <ul>
       <li><a href="../">Modules</a></li>
       <li><a href="./">timer</a></li>

doc/site/style.scss

@@ -3,9 +3,11 @@ $subheader: "Lato", helvetica, arial, sans-serif;
 $body: "Source Sans Pro", georgia, serif;
 $code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
 
+$header_h: 8em;
 $dark: hsl(210, 10%, 25%);
 $darker: hsl(210, 20%, 10%);
 $light: hsl(0, 0%, 100%);
+$gray-5: mix($dark, $light, 5%);
 $gray-10: mix($dark, $light, 10%);
 $gray-20: mix($dark, $light, 20%);
 $gray-30: mix($dark, $light, 30%);
@@ -16,8 +18,8 @@ $gray-80: mix($dark, $light, 80%);
 
 $text: mix($light, #000, 20%);
 
-$code-color: hsl(210, 20%, 40%);
+$code-color: hsl(210, 20%, 30%);
-$code-bg:    hsl(210, 20%, 98%);
+$code-bg:    hsl(210, 0%, 99%);
 
 $link:        hsl(200, 60%, 50%);
 $link-hover:  hsl(210, 100%, 80%);
@@ -34,20 +36,48 @@ $module-link-glow:  hsla(130, 90%, 50%, 0.4);
   box-sizing: border-box;
 }
 
-body, code, h1, h2, h3, p, pre {
+body, code, h1, h2, h3, p, pre, html {
   margin: 0;
   padding: 0;
 }
 
+html {
+  height: 100%;
+  min-height: 100%;
+}
+
 body {
   background: $light;
   color: $text;
   font: 16px/25px $body;
+  height: 100%;
+  min-height: 100%;  
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid $gray-5;
+    margin: 1em 0;
+    padding: 0; 
+}
+
+blockquote {
+  color: $gray-50;
+  margin: 0;
+  max-width: 24em;
+  margin-left: 0.5em;
+}
+
+date {
+  color: $gray-80;
 }
 
 .page {
   margin: 0 auto;
   width: 800px;
+  min-height: calc(100% - 16.75em);
 
   // Clear contents.
   &:after {
@@ -62,20 +92,28 @@ body {
   width: 560px;
 }
 
+.logo {
+  height: 7em;
+  position: relative;
+  margin: auto;
+  display: block;
+  left: -1em;
+  margin-bottom: 2em;
+}
+
 header {
-  text-shadow: 0 1px 1px $darker;
 
   .page {
-    height: 120px;
+    height: $header_h;
   }
 
-  background: $dark;
+  background: $light;
-  border-bottom: solid 1px $darker;
+  border-bottom: solid 1px $gray-10;
 
   h1 {
     position: absolute;
-    left: 0;
+    left: -8px;
-    top: 63px;
+    top: ($header_h / 3) - 1.15em;
     padding: 0;
     font: 400 48px $header;
     letter-spacing: 2px;
@@ -83,8 +121,8 @@ header {
 
   h2 {
     position: absolute;
-    right: 0;
+    left: 0;
-    top: 72px;
+    top: $header_h + 0.5em;
     padding: 0;
     font: 500 13px $subheader;
     text-transform: uppercase;
@@ -93,23 +131,23 @@ header {
   }
 
   a {
-    color: $gray-20;
+    color: $gray-80;
   }
 
   a:hover {
     color: $link-hover;
-    text-shadow: 0 0 6px $link-glow;
+    /*text-shadow: 0 0 6px $link-glow;*/
   }
 }
 
 nav {
   float: right;
   width: 160px;
-  padding-top: 109px;
+  margin-top: 2em;
 
   h2 {
-    color: $gray-30;
+    color: $gray-80;
-    font: 500 11px $subheader;
+    font: 500 13px $subheader;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin: 0;
@@ -121,7 +159,7 @@ nav {
   }
 
   li {
-    font: 15px $body;
+    font: 17px $body;
     color: $gray-30;
     list-style-type: none;
     margin: 0 0 4px 0;
@@ -194,8 +232,20 @@ a {
 
 main {
   @extend .main-column;
-  padding-top: 12px;
+  margin-top: 2em;
   float: left;
+
+  .intro { 
+    border-bottom: solid 1px $gray-10;
+    margin-bottom: -0.5em;
+  }
+
+  h2 {
+    display: block;
+    position: relative;
+    max-width: 16em;    
+  }
+  
 }
 
 a:hover {
@@ -229,8 +279,7 @@ code, pre {
   font: 13px $code;
   background: $code-bg;
   border-radius: 2px;
-  border: solid 1px hsl(200, 20%, 95%);
+  border: solid 1px hsl(200, 20%, 88%);
-  border-bottom: solid 1px hsl(200, 20%, 90%);
 }
 
 code {
@@ -250,7 +299,7 @@ pre {
 }
 
 footer {
-  margin-top: 40px;
+  margin-top: 4em;
   padding: 20px 0 40px 0;
   font: 14px $body;
   background: $dark;
@@ -334,12 +383,11 @@ footer {
 body.module {
   header {
     a {
-      color: $gray-20;
+      color: $gray-80;
     }
 
     a:hover {
       color: $module-link-hover;
-      text-shadow: 0 0 6px $module-link-glow;
     }
   }
 

doc/site/syntax.markdown

@@ -265,5 +265,6 @@ tightest to loosest, is:
   </tbody>
 </table>
 
+<br><hr>
 <a class="right" href="values.html">Values &rarr;</a>
 <a href="getting-started.html">&larr; Getting Started</a>

doc/site/template.html

@@ -14,18 +14,20 @@
   <div class="page">
     <div class="main-column">
       <h1><a href="./">wren</a></h1>
-      <h2>a classy little scripting language</h2>
+      <h2>a classy little scripting language</h2>      
     </div>
   </div>
 </header>
 <div class="page">
   <nav class="big">
+    <a href="./"><img src="./wren.svg" class="logo"></a>
     <ul>
       <li><a href="getting-started.html">Getting Started</a></li>
       <li><a href="contributing.html">Contributing</a></li>
+      <li><a href="blog">Blog</a></li>
     </ul>
     <section>
-      <h2>language guide</h2>
+      <h2>guides</h2>
       <ul>
         <li><a href="syntax.html">Syntax</a></li>
         <li><a href="values.html">Values</a></li>
@@ -58,7 +60,7 @@
         <td><a href="contributing.html">Contributing</a></td>
       </tr>
       <tr>
-        <td colspan="2"><h2>language guide</h2></td>
+        <td colspan="2"><h2>guides</h2></td>
         <td><h2>reference</h2></td>
       </tr>
       <tr>
@@ -94,7 +96,7 @@
     </table>
   </nav>
   <main>
-    <h1>{title}</h1>
+    <h2>{title}</h2>
     {html}
   </main>
 </div>

doc/site/values.markdown

@@ -137,5 +137,6 @@ doesn't return anything and get its returned value, you get `null` back.
 
 [null]: modules/core/null.html
 
+<br><hr>
 <a class="right" href="lists.html">Lists &rarr;</a>
 <a href="syntax.html">&larr; Syntax</a>

doc/site/variables.markdown

@@ -71,5 +71,6 @@ then it isn't an assignment. Instead, it's calling a [setter method][].
 
 [setter method]: method-calls.html#setters
 
+<br><hr>
 <a class="right" href="functions.html">Functions &rarr;</a>
 <a href="control-flow.html">&larr; Control Flow</a>