Create gh-pages branch via GitHub

2025-07-31 13:40:16 +02:00 · 2014-10-06 16:03:56 +02:00
commit 6fdf4d2ac6
5 changed files with 528 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,186 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>Altorouter by dannyvankooten</title>
+
+    <link rel="stylesheet" href="stylesheets/styles.css">
+    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <h1>Altorouter</h1>
+        <p>PHP5.3+ Routing Class. Supports REST, dynamic and reversed routing. </p>
+
+        <p class="view"><a href="https://github.com/dannyvankooten/AltoRouter">View the Project on GitHub <small>dannyvankooten/AltoRouter</small></a></p>
+
+
+        <ul>
+          <li><a href="https://github.com/dannyvankooten/AltoRouter/zipball/master">Download <strong>ZIP File</strong></a></li>
+          <li><a href="https://github.com/dannyvankooten/AltoRouter/tarball/master">Download <strong>TAR Ball</strong></a></li>
+          <li><a href="https://github.com/dannyvankooten/AltoRouter">View On <strong>GitHub</strong></a></li>
+        </ul>
+      </header>
+      <section>
+        <h1>
+<a name="altorouter-" class="anchor" href="#altorouter-"><span class="octicon octicon-link"></span></a>AltoRouter <a href="http://travis-ci.org/dannyvankooten/AltoRouter"><img src="https://api.travis-ci.org/dannyvankooten/AltoRouter.png" alt="Build Status"></a>
+</h1>
+
+<p>AltoRouter is a small but powerful routing class for PHP 5.3+, heavily inspired by <a href="https://github.com/chriso/klein.php/">klein.php</a>.</p>
+
+<ul>
+<li>Dynamic routing with named parameters</li>
+<li>Reversed routing</li>
+<li>Flexible regular expression routing (inspired by <a href="http://www.sinatrarb.com/">Sinatra</a>)</li>
+<li>Custom regexes</li>
+</ul><h2>
+<a name="getting-started" class="anchor" href="#getting-started"><span class="octicon octicon-link"></span></a>Getting started</h2>
+
+<ol>
+<li>PHP 5.3.x is required</li>
+<li>Install AltoRouter using Composer or manually</li>
+<li>Setup URL rewriting so that all requests are handled by <strong>index.php</strong>
+</li>
+<li>Create an instance of AltoRouter, map your routes and match a request.</li>
+<li>Have a look at the basic example in the <code>examples</code> directory for a better understanding on how to use AltoRouter.</li>
+</ol><h2>
+<a name="routing" class="anchor" href="#routing"><span class="octicon octicon-link"></span></a>Routing</h2>
+
+<div class="highlight highlight-php"><pre><span class="nv">$router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AltoRouter</span><span class="p">();</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">setBasePath</span><span class="p">(</span><span class="s1">'/AltoRouter'</span><span class="p">);</span> <span class="c1">// (optional) the subdir AltoRouter lives in</span>
+
+<span class="c1">// mapping routes</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">map</span><span class="p">(</span><span class="s1">'GET|POST'</span><span class="p">,</span><span class="s1">'/'</span><span class="p">,</span> <span class="s1">'home#index'</span><span class="p">,</span> <span class="s1">'home'</span><span class="p">);</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">map</span><span class="p">(</span><span class="s1">'GET'</span><span class="p">,</span><span class="s1">'/users'</span><span class="p">,</span> <span class="k">array</span><span class="p">(</span><span class="s1">'c'</span> <span class="o">=&gt;</span> <span class="s1">'UserController'</span><span class="p">,</span> <span class="s1">'a'</span> <span class="o">=&gt;</span> <span class="s1">'ListAction'</span><span class="p">));</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">map</span><span class="p">(</span><span class="s1">'GET'</span><span class="p">,</span><span class="s1">'/users/[i:id]'</span><span class="p">,</span> <span class="s1">'users#show'</span><span class="p">,</span> <span class="s1">'users_show'</span><span class="p">);</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">map</span><span class="p">(</span><span class="s1">'POST'</span><span class="p">,</span><span class="s1">'/users/[i:id]/[delete|update:action]'</span><span class="p">,</span> <span class="s1">'usersController#doAction'</span><span class="p">,</span> <span class="s1">'users_do'</span><span class="p">);</span>
+
+<span class="c1">// reversed routing</span>
+<span class="nv">$router</span><span class="o">-&gt;</span><span class="na">generate</span><span class="p">(</span><span class="s1">'users_show'</span><span class="p">,</span> <span class="k">array</span><span class="p">(</span><span class="s1">'id'</span> <span class="o">=&gt;</span> <span class="mi">5</span><span class="p">));</span>
+
+
+</pre></div>
+
+<p><strong>You can use the following limits on your named parameters. AltoRouter will create the correct regexes for you.</strong></p>
+
+<div class="highlight highlight-php"><pre><span class="o">*</span>                    <span class="c1">// Match all request URIs</span>
+<span class="p">[</span><span class="nx">i</span><span class="p">]</span>                  <span class="c1">// Match an integer</span>
+<span class="p">[</span><span class="nx">i</span><span class="o">:</span><span class="nx">id</span><span class="p">]</span>               <span class="c1">// Match an integer as 'id'</span>
+<span class="p">[</span><span class="nx">a</span><span class="o">:</span><span class="nx">action</span><span class="p">]</span>           <span class="c1">// Match alphanumeric characters as 'action'</span>
+<span class="p">[</span><span class="nx">h</span><span class="o">:</span><span class="nb">key</span><span class="p">]</span>              <span class="c1">// Match hexadecimal characters as 'key'</span>
+<span class="p">[</span><span class="o">:</span><span class="nx">action</span><span class="p">]</span>            <span class="c1">// Match anything up to the next / or end of the URI as 'action'</span>
+<span class="p">[</span><span class="nx">create</span><span class="o">|</span><span class="nx">edit</span><span class="o">:</span><span class="nx">action</span><span class="p">]</span> <span class="c1">// Match either 'create' or 'edit' as 'action'</span>
+<span class="p">[</span><span class="o">*</span><span class="p">]</span>                  <span class="c1">// Catch all (lazy, stops at the next trailing slash)</span>
+<span class="p">[</span><span class="o">*:</span><span class="nx">trailing</span><span class="p">]</span>         <span class="c1">// Catch all as 'trailing' (lazy)</span>
+<span class="p">[</span><span class="o">**:</span><span class="nx">trailing</span><span class="p">]</span>        <span class="c1">// Catch all (possessive - will match the rest of the URI)</span>
+<span class="o">.</span><span class="p">[</span><span class="o">:</span><span class="nx">format</span><span class="p">]</span><span class="o">?</span>          <span class="c1">// Match an optional parameter 'format' - a / or . before the block is also optional</span>
+</pre></div>
+
+<p><strong>Some more complicated examples</strong></p>
+
+<div class="highlight highlight-php"><pre><span class="o">@/</span><span class="p">(</span><span class="o">?</span><span class="p">[</span><span class="nx">A</span><span class="o">-</span><span class="nx">Za</span><span class="o">-</span><span class="nx">z</span><span class="p">]{</span><span class="mi">2</span><span class="p">}</span><span class="nx">_</span><span class="p">[</span><span class="nx">A</span><span class="o">-</span><span class="nx">Za</span><span class="o">-</span><span class="nx">z</span><span class="p">]{</span><span class="mi">2</span><span class="p">})</span><span class="err">$</span> <span class="c1">// custom regex, matches language codes like "en_us" etc.</span>
+<span class="o">/</span><span class="nx">posts</span><span class="o">/</span><span class="p">[</span><span class="o">*:</span><span class="nx">title</span><span class="p">][</span><span class="nx">i</span><span class="o">:</span><span class="nx">id</span><span class="p">]</span>        <span class="c1">// Matches "/posts/this-is-a-title-123"</span>
+<span class="o">/</span><span class="nx">output</span><span class="o">.</span><span class="p">[</span><span class="nx">xml</span><span class="o">|</span><span class="nx">json</span><span class="o">:</span><span class="nx">format</span><span class="p">]</span><span class="o">?</span>    <span class="c1">// Matches "/output", "output.xml", "output.json"</span>
+<span class="o">/</span><span class="p">[</span><span class="o">:</span><span class="nx">controller</span><span class="p">]</span><span class="o">?/</span><span class="p">[</span><span class="o">:</span><span class="nx">action</span><span class="p">]</span><span class="o">?</span>    <span class="c1">// Matches the typical /controller/action format</span>
+</pre></div>
+
+<p><strong>The character before the colon (the 'match type') is a shortcut for one of the following regular expressions</strong></p>
+
+<div class="highlight highlight-php"><pre><span class="s1">'i'</span>  <span class="o">=&gt;</span> <span class="s1">'[0-9]++'</span>
+<span class="s1">'a'</span>  <span class="o">=&gt;</span> <span class="s1">'[0-9A-Za-z]++'</span>
+<span class="s1">'h'</span>  <span class="o">=&gt;</span> <span class="s1">'[0-9A-Fa-f]++'</span>
+<span class="s1">'*'</span>  <span class="o">=&gt;</span> <span class="s1">'.+?'</span>
+<span class="s1">'**'</span> <span class="o">=&gt;</span> <span class="s1">'.++'</span>
+<span class="s1">''</span>   <span class="o">=&gt;</span> <span class="s1">'[^/\.]++'</span>
+</pre></div>
+
+<p><strong>New match types can be added using the <code>addMatchTypes()</code> method</strong></p>
+
+<div class="highlight highlight-php"><pre><span class="nv">$router</span><span class="o">-&gt;</span><span class="na">addMatchTypes</span><span class="p">(</span><span class="k">array</span><span class="p">(</span><span class="s1">'cId'</span> <span class="o">=&gt;</span> <span class="s1">'[a-zA-Z]{2}[0-9](?:_[0-9]++)?'</span><span class="p">));</span>
+</pre></div>
+
+<h2>
+<a name="matching" class="anchor" href="#matching"><span class="octicon octicon-link"></span></a>Matching</h2>
+
+<p>Simply call the match() method like this :</p>
+
+<div class="highlight highlight-php"><pre>
+<span class="c1">// perform a match against the current request url</span>
+<span class="nv">$match</span> <span class="o">=</span> <span class="nv">$router</span><span class="o">-&gt;</span><span class="na">match</span><span class="p">();</span>
+
+<span class="c1">// perform a match against a given url</span>
+<span class="nv">$match</span> <span class="o">=</span> <span class="nv">$router</span><span class="o">-&gt;</span><span class="na">match</span><span class="p">(</span><span class="nv">$url</span><span class="p">);</span>
+
+</pre></div>
+
+<h3>
+<a name="structure" class="anchor" href="#structure"><span class="octicon octicon-link"></span></a>Structure</h3>
+
+<p>Match return an associative array containing :</p>
+
+<ul>
+<li>target : the value of the third argument of the map() call</li>
+<li>params : if you have params in your match pattern, an associative array with param name as key </li>
+<li>name : the name of the matched route</li>
+</ul><h3>
+<a name="example" class="anchor" href="#example"><span class="octicon octicon-link"></span></a>Example</h3>
+
+<ul>
+<li>Map :  'GET', '/user/[i:id]/', array('c' =&gt; 'UserController', 'a' =&gt; 'Profile'), 'userProfile'</li>
+<li>Url : /users/group/list/123/</li>
+</ul><p>will give :</p>
+
+<pre><code>Array
+(
+    [target] =&gt; Array
+        (
+            [c] =&gt; UserController
+            [a] =&gt; Profile
+        )
+
+    [params] =&gt; Array
+        (
+            [id] =&gt; 123
+        )
+
+    [name] =&gt; userProfile
+)
+
+</code></pre>
+
+<h2>
+<a name="contributors" class="anchor" href="#contributors"><span class="octicon octicon-link"></span></a>Contributors</h2>
+
+<ul>
+<li><a href="https://github.com/dannyvankooten">Danny van Kooten</a></li>
+<li><a href="https://github.com/koenpunt">Koen Punt</a></li>
+<li><a href="https://github.com/adduc">John Long</a></li>
+<li><a href="https://github.com/niahoo">Niahoo Osef</a></li>
+</ul><h2>
+<a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>
+
+<p>(MIT License)</p>
+
+<p>Copyright (c) 2012-2013 Danny van Kooten <a href="mailto:hi@dannyvankooten.com">hi@dannyvankooten.com</a></p>
+
+<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
+
+<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
+
+<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
+      </section>
+      <footer>
+        <p>This project is maintained by <a href="https://github.com/dannyvankooten">dannyvankooten</a></p>
+        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+      </footer>
+    </div>
+    <script src="javascripts/scale.fix.js"></script>
+    
+  </body>
+</html>
--- a/javascripts/scale.fix.js
+++ b/javascripts/scale.fix.js
@@ -0,0 +1,17 @@
+var metas = document.getElementsByTagName('meta');
+var i;
+if (navigator.userAgent.match(/iPhone/i)) {
+  for (i=0; i<metas.length; i++) {
+    if (metas[i].name == "viewport") {
+      metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
+    }
+  }
+  document.addEventListener("gesturestart", gestureStart, false);
+}
+function gestureStart() {
+  for (i=0; i<metas.length; i++) {
+    if (metas[i].name == "viewport") {
+      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
+    }
+  }
+}
--- a/params.json
+++ b/params.json
--- a/stylesheets/pygment_trac.css
+++ b/stylesheets/pygment_trac.css
@@ -0,0 +1,69 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+.type-csharp .highlight .k { color: #0000FF }
+.type-csharp .highlight .kt { color: #0000FF }
+.type-csharp .highlight .nf { color: #000000; font-weight: normal }
+.type-csharp .highlight .nc { color: #2B91AF }
+.type-csharp .highlight .nn { color: #000000 }
+.type-csharp .highlight .s { color: #A31515 }
+.type-csharp .highlight .sc { color: #A31515 }
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -0,0 +1,255 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
+
+body {
+  padding:50px;
+  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color:#777;
+  font-weight:300;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color:#222;
+  margin:0 0 20px;
+}
+
+p, ul, ol, table, pre, dl {
+  margin:0 0 20px;
+}
+
+h1, h2, h3 {
+  line-height:1.1;
+}
+
+h1 {
+  font-size:28px;
+}
+
+h2 {
+  color:#393939;
+}
+
+h3, h4, h5, h6 {
+  color:#494949;
+}
+
+a {
+  color:#39c;
+  font-weight:400;
+  text-decoration:none;
+}
+
+a small {
+  font-size:11px;
+  color:#777;
+  margin-top:-0.6em;
+  display:block;
+}
+
+.wrapper {
+  width:860px;
+  margin:0 auto;
+}
+
+blockquote {
+  border-left:1px solid #e5e5e5;
+  margin:0;
+  padding:0 0 0 20px;
+  font-style:italic;
+}
+
+code, pre {
+  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+  color:#333;
+  font-size:12px;
+}
+
+pre {
+  padding:8px 15px;
+  background: #f8f8f8;  
+  border-radius:5px;
+  border:1px solid #e5e5e5;
+  overflow-x: auto;
+}
+
+table {
+  width:100%;
+  border-collapse:collapse;
+}
+
+th, td {
+  text-align:left;
+  padding:5px 10px;
+  border-bottom:1px solid #e5e5e5;
+}
+
+dt {
+  color:#444;
+  font-weight:700;
+}
+
+th {
+  color:#444;
+}
+
+img {
+  max-width:100%;
+}
+
+header {
+  width:270px;
+  float:left;
+  position:fixed;
+}
+
+header ul {
+  list-style:none;
+  height:40px;
+  
+  padding:0;
+  
+  background: #eee;
+  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
+  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  
+  border-radius:5px;
+  border:1px solid #d2d2d2;
+  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
+  width:270px;
+}
+
+header li {
+  width:89px;
+  float:left;
+  border-right:1px solid #d2d2d2;
+  height:40px;
+}
+
+header ul a {
+  line-height:1;
+  font-size:11px;
+  color:#999;
+  display:block;
+  text-align:center;
+  padding-top:6px;
+  height:40px;
+}
+
+strong {
+  color:#222;
+  font-weight:700;
+}
+
+header ul li + li {
+  width:88px;
+  border-left:1px solid #fff;
+}
+
+header ul li + li + li {
+  border-right:none;
+  width:89px;
+}
+
+header ul a strong {
+  font-size:14px;
+  display:block;
+  color:#222;
+}
+
+section {
+  width:500px;
+  float:right;
+  padding-bottom:50px;
+}
+
+small {
+  font-size:11px;
+}
+
+hr {
+  border:0;
+  background:#e5e5e5;
+  height:1px;
+  margin:0 0 20px;
+}
+
+footer {
+  width:270px;
+  float:left;
+  position:fixed;
+  bottom:50px;
+}
+
+@media print, screen and (max-width: 960px) {
+  
+  div.wrapper {
+    width:auto;
+    margin:0;
+  }
+  
+  header, section, footer {
+    float:none;
+    position:static;
+    width:auto;
+  }
+  
+  header {
+    padding-right:320px;
+  }
+  
+  section {
+    border:1px solid #e5e5e5;
+    border-width:1px 0;
+    padding:20px 0;
+    margin:0 0 20px;
+  }
+  
+  header a small {
+    display:inline;
+  }
+  
+  header ul {
+    position:absolute;
+    right:50px;
+    top:52px;
+  }
+}
+
+@media print, screen and (max-width: 720px) {
+  body {
+    word-wrap:break-word;
+  }
+  
+  header {
+    padding:0;
+  }
+  
+  header ul, header p.view {
+    position:static;
+  }
+  
+  pre, code {
+    word-wrap:normal;
+  }
+}
+
+@media print, screen and (max-width: 480px) {
+  body {
+    padding:15px;
+  }
+  
+  header ul {
+    display:none;
+  }
+}
+
+@media print {
+  body {
+    padding:0.4in;
+    font-size:12pt;
+    color:#444;
+  }
+}