Spits out guide styles to own stylesheet, adds editorconfig

emeraldion · Jan 8, 2017 · 53dcd98 · 53dcd98
1 parent fb3e41e
commit 53dcd98
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 90 deletions.
diff --git a/.editorconfig 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
@@ -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
@@ -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
@@ -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;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,8 @@ @@
                   <%= example.rendered_example %>
                 </div>
               </th>
+            </tr>
+            <tr>
               <td>
                 <div class="codeBlock">
                   <div class="highlight">
@@ Expand Down @@