Work on responsive CSS.

doc/site/functions.markdown

@@ -93,7 +93,7 @@ It's an error to call a function with fewer or more arguments than its parameter
 
 ## Returning values
 
-Function bodies return values just like methods. If the body is a single expression—more precisely if there is no newline after the `{` or parameter list—then the function implicitly returns the value of the expression.
+The body of a function is a [block](syntax.html#blocks). If it is a single expression—more precisely if there is no newline after the `{` or parameter list—then the function implicitly returns the value of the expression.
 
 Otherwise, the body returns `null` by default. You can explicitly return a value using a `return` statement. In other words, these two functions do the same thing:
 
@@ -104,8 +104,6 @@ Otherwise, the body returns `null` by default. You can explicitly return a value
       return "return value"
     }
 
-**TODO: Non-local returns?**
-
 ## Closures
 
 As you expect, functions are closures: they can access variables defined outside of their scope. They will hold onto closed-over variables even after leaving the scope where the function is defined:

doc/site/style.scss

@@ -53,7 +53,8 @@ body {
 .page {
   position: relative;
   margin: 0 auto;
-  width: 800px;
+  padding: 0 20px;
+  width: 840px;
 
   // Clear contents.
   &:after {
@@ -63,10 +64,14 @@ body {
   }
 }
 
-.left-1 { float: left; width: 240px; }
-.left-2 { float: left; width: 520px; }
-.right-1 { float: right; width: 240px; }
-.right-2 { float: right; width: 520px; }
+.nav-column {
+  float: left;
+  width: 240px;
+}
+
+.main-column {
+  margin-left: 280px;
+}
 
 header {
   .page {
@@ -77,7 +82,7 @@ header {
 
   h1 {
     position: absolute;
-    left: 0;
+    left: 20px;
     bottom: 0;
     padding: 0;
     font: 64px $header;
@@ -87,7 +92,7 @@ header {
 
   h2 {
     position: absolute;
-    right: 0;
+    right: 20px;
     bottom: 11px;
     padding: 0;
     font: 18px $header;
@@ -104,26 +109,6 @@ header {
     color: $blue-hover;
     text-shadow: 0 0 6px $blue-glow;
   }
-
-  ul {
-    position: absolute;
-    display: inline-block;
-    right: 0;
-    bottom: 8px;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    display: inline-block;
-    position: relative;
-    margin: 0 5px;
-
-    font: 18px $header;
-    font-weight: 300;
-    letter-spacing: 1px;
-    text-align: center;
-  }
 }
 
 .header-bar {
@@ -147,6 +132,8 @@ header {
 }
 
 nav {
+  @extend .nav-column;
+
   padding-top: 20px;
 
   h2 {
@@ -190,6 +177,7 @@ a {
 }
 
 main {
+  @extend .main-column;
   padding-top: 12px;
 }
 
@@ -335,45 +323,47 @@ table.chart {
   }
 }
 
-/*
-@media only screen and (max-width: 639px) {
-  // Shrink the window padding.
-  body {
-    padding: 0 20px;
-  }
-
-  // Make the nav gutter narrower.
-  main {
-    margin-left: 140px;
-  }
+@media only screen and (max-width: 839px) {
+  // 36 pixel columns.
+  .page { width: 760px; }
+  .nav-column { width: 216px; }
+  .main-column { margin-left: 252px; }
 }
 
-@media only screen and (max-width: 479px) {
-  // Make the header centered.
-  header {
-    height: auto;
+@media only screen and (max-width: 759px) {
+  // 32 pixel columns.
+  .page { width: 680px; }
+  .nav-column { width: 192px; }
+  .main-column { margin-left: 224px; }
+}
 
+@media only screen and (max-width: 639px) {
+  .page {
+    width: 100%;
+  }
+  .nav-column { display: none; }
+  .main-column { margin-left: 0; }
+
+  header {
     h1 {
       position: relative;
+      left: 0;
       text-align: center;
-      margin-top: 20px;
     }
 
     h2 {
       position: relative;
+      right: 0;
       text-align: center;
-      margin-bottom: 20px;
     }
   }
 
   nav {
-    position: relative;
-    width: auto;
-    margin: 0;
+    display: none;
   }
 
   main {
-    margin-left: 0;
+    float: none;
+    width: 100%;
   }
 }
-*/

doc/site/template.html

@@ -18,16 +18,16 @@
 </header>
 <div class="header-bar">
   <div class="page">
-    <div class="{nav-col}">
+    <div class="nav-column">
       <h1><small>{category}</small></h1>
     </div>
-    <div class="{main-col}">
+    <div class="main-column">
       <h1>{title}</h1>
     </div>
   </div>
 </div>
 <div class="page">
-  <nav class="{nav-col}">
+  <nav>
     <ul>
       <li><a href="getting-started.html">Getting Started</a></li>
     </ul>
@@ -58,7 +58,7 @@
       <li><a href="qa.html">Q &amp; A</a></li>
     </ul>
   </nav>
-  <main class="{main-col}">
+  <main>
     {html}
   </main>
 </div>

script/generate_docs.py

@@ -70,15 +70,11 @@ def format_file(path, skip_up_to_date):
   modified = datetime.fromtimestamp(os.path.getmtime(path))
   mod_str = modified.strftime('%B %d, %Y')
 
-  nav_col = 'left-1'
-  main_col = 'right-2'
   fields = {
     'title': title,
     'html': html,
     'mod': mod_str,
-    'category': category,
-    'nav-col': nav_col,
-    'main-col': main_col
+    'category': category
   }
 
   with open("doc/site/template.html") as f: