rough pass at adding some style

docs/_layouts/default.html

@@ -21,6 +21,7 @@
   -->
 
   <link rel="stylesheet" href="public/css/style.css?v=2">
+  <link rel="stylesheet" href="public/css/fog.css?v=2">
   <script src="public/js/libs/modernizr-1.6.min.js"></script>
 
 </head>
@@ -29,8 +30,8 @@
 
   <div id="container">
     <header>
-      <img src="public/images/fog.png" title="fog" />
-      <h1>The Ruby cloud services library</h1>
+      <a href="/"><img src="public/images/fog.png" title="fog" /></a>
+      <h1>{{ page.title }}</h1>
       <dl>
         <dt>version</dt><dd>v0.7.1</dd>
         <dt>install</dt><dd><code>gem install fog</code></dd>

docs/index.md

@@ -3,9 +3,7 @@ layout: default
 title:  The Ruby cloud services library
 ---
 
-## The Ruby cloud services library
-
-Whether you need compute, dns, storage, or a multitude of other services, fog provides an accessible entry point and facilitates cross service compatibility.</p>
+Whether you need compute, dns, storage, or a multitude of other services, fog provides an accessible entry point and facilitates cross service compatibility.
 
 Just getting started working with cloud resources? You are not alone, and having so many complicated options makes it hard to know where to start. fog delivers the knowledge of cloud experts to you, helping you to bootstrap your cloud usage and guiding you as your own expertise develops.
 
@@ -45,15 +43,15 @@ You can see a list of available collections by calling `collections` on the conn
 
 Some collections are available across multiple providers:
 
-* compute providers have +flavors+, +images+ and +servers+
-* dns providers have +zones+ and +records+
-* storage providers have +directories+ and +files+
+* compute providers have `flavors`, `images` and `servers`
+* dns providers have `zones` and `records`
+* storage providers have `directories` and `files`
 
 Collections share basic CRUD type operations, such as:
-* +all+ - fetch every object of that type from the provider.
-* +create+ - initialize a new record locally and a remote resource with the provider.
-* +get+ - fetch a single object by it's identity from the provider.
-* +new+ - initialize a new record locally, but do not create a remote resource with the provider.
+* `all` - fetch every object of that type from the provider.
+* `create` - initialize a new record locally and a remote resource with the provider.
+* `get` - fetch a single object by it's identity from the provider.
+* `new` - initialize a new record locally, but do not create a remote resource with the provider.
 
 As an example, we'll try initializing and persisting a Rackspace Cloud server:
 
@@ -76,9 +74,9 @@ As an example, we'll try initializing and persisting a Rackspace Cloud server:
 ## Models
 
 Many of the collection methods return individual objects, which also provide common methods:
-* +destroy+ - will destroy the persisted object from the provider
-* +save+ - persist the object to the provider
-* +wait_for+ - takes a block and waits for either the block to return true for the object or for a timeout (defaults to 10 minutes)
+* `destroy` - will destroy the persisted object from the provider
+* `save` - persist the object to the provider
+* `wait_for` - takes a block and waits for either the block to return true for the object or for a timeout (defaults to 10 minutes)
 
 ## Mocks
 

docs/public/css/fog.css

@@ -0,0 +1,122 @@
+/* layout */
+body {
+  background-color: #EBF2F9;
+  line-height: 1.5em;
+  text-align: center;
+}
+
+#container {
+  margin: auto;
+  text-align: left;
+  width: 800px;
+}
+
+header {
+  background-color: #A0C0E1;
+  border-color: #70A1D2;
+  -moz-border-radius: 0 0 0.5em 0.5em;
+  border-radius: 0 0 0.5em 0.5em;
+  border-style: solid;
+  border-width: 0 1px 1px 1px;
+  color: #FFF;
+  height: 154px;
+  margin-bottom: 2em;
+  position: relative;
+  text-align: center;
+}
+
+header img {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+header h1 {
+  font-size: 2em;
+  line-height: 154px;
+}
+
+header dl {
+  position: absolute;
+  right: 1.5em;
+  text-align: left;
+  top: 1.5em;
+}
+
+#main {
+  background-color: #FFF;
+  color: #333;
+  border: 1px solid #70A1D2;
+  margin-bottom: 2em;
+}
+
+footer {
+  background-color: #A0C0E1;
+  border-color: #70A1D2;
+  -moz-border-radius: 0.5em 0.5em 0 0;
+  border-radius: 0.5em 0.5em 0 0;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
+  color: #FFF;
+  text-align: center;
+}
+
+footer img {
+  padding: 5px;
+  vertical-align: middle;
+}
+
+/* misc */
+
+h2 {
+  background-color: #EBF2F9;
+  border-color: #70A1D2;
+  border-style: solid;
+  border-width: 1px 0 1px 0;
+  margin: -1px;
+  color: #70A1D2;
+  font-size: 1.5em;
+  padding: 1.33333333333333em 0.75em 0.75em 0.75em;
+}
+
+code, pre {
+  background-color: #EBF2F9;
+  border: 1px solid #70A1D2;
+  color: #666;
+}
+
+code {
+  padding: 0 0.2em;
+}
+
+p, ul {
+  padding: 0 1em;
+}
+
+p {
+  margin: 1em 0;
+}
+
+pre {
+  -moz-border-radius: 0.5em;
+  border-radius: 0.5em;
+  margin: 1em 2em;
+}
+
+pre code {
+  border: none;
+}
+
+ul {
+  margin: 1em 0 1em 1.8em;
+}
+
+@media all and (orientation:portrait) {
+}
+
+@media all and (orientation:landscape) {
+}
+
+@media screen and (max-device-width: 480px) {
+  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}