From 53dcd98e3e02dfdb8c2fb37b0154877ccb4b3b23 Mon Sep 17 00:00:00 2001
From: claudiopro <claudio.procida@gmail.com>
Date: Sun, 8 Jan 2017 19:33:47 +0100
Subject: [PATCH] Spits out guide styles to own stylesheet, adds editorconfig

---
 .editorconfig                                 |  20 ++++
 .../markup_table_template.html.erb            |   2 +
 doc_assets/_header.html                       |  91 +--------------
 sass/aoi_guide.scss                           | 107 ++++++++++++++++++
 4 files changed, 130 insertions(+), 90 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 sass/aoi_guide.scss

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..259cf3d
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/code_example_templates/markup_table_template.html.erb b/code_example_templates/markup_table_template.html.erb
index 2fe78b1..12ead08 100644
--- a/code_example_templates/markup_table_template.html.erb
+++ b/code_example_templates/markup_table_template.html.erb
@@ -8,6 +8,8 @@
               <%= example.rendered_example %>
             </div>
           </th>
+        </tr>
+        <tr>
           <td>
             <div class="codeBlock">
               <div class="highlight">
diff --git a/doc_assets/_header.html b/doc_assets/_header.html
index 98db41a..e8623b0 100644
--- a/doc_assets/_header.html
+++ b/doc_assets/_header.html
@@ -7,98 +7,9 @@
     <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i" />
     <link type="text/css" rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" href="../css/aoi.css" />
+    <link type="text/css" rel="stylesheet" href="../css/aoi_guide.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/zenburn.min.css">
     <link type="image/png" rel="icon" href="../favicon.png" />
-    <style type="text/css">
-/*      .exampleOutput {
-        border: 1px solid #eee;
-        border-radius: 4px;
-        float: left;
-        padding: 10px;
-      }
-      .codeBlock {
-        background-color: #eee;
-        border-radius: 4px;
-        clear: left;
-        padding: 10px;
-      }*/
-      html, body {
-        min-height: 100%;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        background: #79bccb url('../aoi_bg.jpg') no-repeat 0 100%;
-        background-size: cover;
-      }
-      a {
-        color: #298597;
-      }
-      nav {
-        border-bottom: 1px solid #eee;
-        background: linear-gradient(90deg, #29acb7 0%, #298597 100%);
-        display: flex;
-      }
-      nav ul {
-        display: inline-flex;
-        margin: 0;
-        padding: 0;
-        vertical-align: middle;
-        flex: 1 auto;
-      }
-      nav li {
-        display: inline-block;
-      }
-      nav li a {
-        display: block;
-        box-sizing: border-box;
-        height: 100%;
-        padding: 23px 20px;
-        color: #fff;
-        text-decoration: none;
-        text-transform: capitalize;
-      }
-      nav li a:focus,
-      nav li a:hover {
-        background-color: #298597;
-      }
-      #logo {
-        font-family: Menlo, sans-serif;
-        color: #fff;
-        border-radius: 1000px;
-        border: 5px solid #fff;
-        width: 48px;
-        height: 48px;
-        display: inline-block;
-        box-sizing: border-box;
-        padding: 10px 0;
-        text-align: center;
-        margin: 10px;
-      }
-      main {
-        background-color: #fff;
-        padding: 20px;
-      }
-      pre.hljs {
-        border-radius: 4px;
-        padding: .8em;
-      }
-      h1 {
-        text-transform: capitalize;
-      }
-      footer {
-        padding-bottom: 20px;
-      }
-      footer a {
-        color: #fff;
-      }
-      footer p {
-        margin: 0;
-        padding: 10px;
-        background-color: #79bccb;
-        text-align: center;
-      }
-    </style>
   </head>
   <body>
     <!-- generated with Fork me on GitHub [animated corner style generator] http://codepen.io/Rplus/pen/wKZOBo -->
diff --git a/sass/aoi_guide.scss b/sass/aoi_guide.scss
new file mode 100644
index 0000000..39c22f2
--- /dev/null
+++ b/sass/aoi_guide.scss
@@ -0,0 +1,107 @@
+$lightest-aoi: #79bccb;
+$light-aoi: #29acb7;
+$dark-aoi: #298597;
+
+$white: #fff;
+
+html, body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: $lightest-aoi url('../aoi_bg.jpg') no-repeat 0 100%;
+  background-size: cover;
+}
+
+a {
+  color: $dark-aoi;
+}
+
+nav {
+  border-bottom: 1px solid $dark-aoi;
+  background: linear-gradient(90deg, $light-aoi 0%, $dark-aoi 100%);
+  display: flex;
+
+  ul {
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    flex: 1 auto;
+  }
+
+  li {
+    display: inline-block;
+    
+    a {
+      display: block;
+      box-sizing: border-box;
+      height: 100%;
+      padding: 23px 20px;
+      color: $white;
+      text-decoration: none;
+      text-transform: capitalize;
+
+      &:focus,
+      &:hover {
+        background-color: $dark-aoi;
+      }
+    }
+  }
+}
+
+#logo {
+  font-family: Menlo, sans-serif;
+  color: $white;
+  border-radius: 1000px;
+  border: 5px solid $white;
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 10px 0;
+  text-align: center;
+  margin: 10px;
+}
+
+main {
+  background-color: $white;
+  padding: 10px;
+}
+
+pre.hljs {
+  border-radius: 4px;
+  padding: .8em;
+  white-space: pre-wrap;
+}
+
+h1 {
+  text-transform: capitalize;
+}
+
+footer {
+  padding-bottom: 20px;
+
+  a {
+    color: $white;
+  }
+  
+  p {
+   margin: 0;
+   padding: 10px;
+   background-color: $lightest-aoi;
+   text-align: center;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  main {
+    padding: 20px;
+  }
+
+  pre.hljs {
+  	white-space: pre;
+  }
+}