Browse Source

Create gh-pages branch via GitHub

agapple 12 years ago
parent
commit
18ca866689
12 changed files with 605 additions and 194 deletions
  1. BIN
      images/bkg.png
  2. BIN
      images/blacktocat.png
  3. BIN
      images/code.png
  4. BIN
      images/pattern.png
  5. BIN
      images/tar.png
  6. BIN
      images/top.png
  7. BIN
      images/zip.png
  8. 53 28
      index.html
  9. 0 1
      javascripts/main.js
  10. 52 0
      javascripts/script.js
  11. 2 1
      stylesheets/pygment_trac.css
  12. 498 164
      stylesheets/stylesheet.css

BIN
images/bkg.png


BIN
images/blacktocat.png


BIN
images/code.png


BIN
images/pattern.png


BIN
images/tar.png


BIN
images/top.png


BIN
images/zip.png


+ 53 - 28
index.html

@@ -1,34 +1,42 @@
-<!DOCTYPE html>
+<!doctype html>
+<!-- The Time Machine GitHub pages theme was designed and developed by Jon Rohan, on Feb 7, 2012. -->
+<!-- Follow him for fun. http://twitter.com/jonrohan. Tail his code on http://github.com/jonrohan -->
 <html>
-  <head>
-    <meta charset='utf-8'>
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
-    <link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
-    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
+  <link rel="stylesheet" href="stylesheets/stylesheet.css" media="screen"/>
+  <link rel="stylesheet" href="stylesheets/pygment_trac.css"/>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script type="text/javascript" src="javascripts/script.js"></script>
 
-    <title>Canal by otter-projects</title>
-  </head>
+  <title>Canal</title>
+  <meta name="description" content="阿里巴巴mysql数据库binlog的增量订阅&amp;消费组件">
 
-  <body>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
+</head>
+
+<body>
+
+  <div class="wrapper">
     <header>
-      <div class="container">
-        <h1>Canal</h1>
-        <h2>阿里巴巴mysql数据库binlog的增量订阅&amp;消费组件</h2>
-
-        <section id="downloads">
-          <a href="https://github.com/otter-projects/canal/zipball/master" class="btn">Download as .zip</a>
-          <a href="https://github.com/otter-projects/canal/tarball/master" class="btn">Download as .tar.gz</a>
-          <a href="https://github.com/otter-projects/canal" class="btn btn-github"><span class="icon"></span>View on GitHub</a>
-        </section>
-      </div>
+      <h1 class="title">Canal</h1>
     </header>
-
-    <div class="container">
-      <section id="main_content">
-        <div>
+    <div id="container">
+      <p class="tagline">阿里巴巴mysql数据库binlog的增量订阅&amp;消费组件</p>
+      <div id="main" role="main">
+        <div class="download-bar">
+        <div class="inner">
+          <a href="https://github.com/otter-projects/canal/tarball/master" class="download-button tar"><span>Download</span></a>
+          <a href="https://github.com/otter-projects/canal/zipball/master" class="download-button zip"><span>Download</span></a>
+          <a href="https://github.com/otter-projects/canal" class="code">View Canal on GitHub</a>
+        </div>
+        <span class="blc"></span><span class="trc"></span>
+        </div>
+        <article class="markdown-body">
+          <div>
     <div>
 <p>  </p>
 <h1>背景</h1>
@@ -423,10 +431,27 @@ X : 2013-02-05 23:29:46    update=true</pre>
 <p></p><div>
 <a href="http://dl.iteye.com/topics/download/7a893f19-bafb-313a-8a7a-e371a4265ad9">canal.sample.tar.gz</a> (2.2 KB)
   </div>
-      </section>
+        </article>
+      </div>
     </div>
+    <footer>
+      <div class="owner">
+      <p><a href="https://github.com/otter-projects" class="avatar"><img src="https://secure.gravatar.com/avatar/c43c6a524c0265e6d2b30568664c00fb?s=30&amp;d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" width="48" height="48"/></a> <a href="https://github.com/otter-projects">otter-projects</a> maintains <a href="https://github.com/otter-projects/canal">Canal</a></p>
+
+
+      </div>
+      <div class="creds">
+        <small>This page generated using <a href="https://pages.github.com/">GitHub Pages</a><br/>theme by <a href="http://twitter.com/jonrohan/">Jon Rohan</a></small>
+      </div>
+    </footer>
+  </div>
+  <div class="current-section">
+    <a href="#top">Scroll to top</a>
+    <a href="https://github.com/otter-projects/canal/tarball/master" class="tar">tar</a><a href="https://github.com/otter-projects/canal/zipball/master" class="zip">zip</a><a href="" class="code">source code</a>
+    <p class="name"></p>
+  </div>
 
-              <script type="text/javascript">
+            <script type="text/javascript">
             var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
             document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
           </script>
@@ -437,5 +462,5 @@ X : 2013-02-05 23:29:46    update=true</pre>
             } catch(err) {}
           </script>
 
-  </body>
-</html>
+</body>
+</html>

+ 0 - 1
javascripts/main.js

@@ -1 +0,0 @@
-console.log('This would be the main JS file.');

+ 52 - 0
javascripts/script.js

@@ -0,0 +1,52 @@
+(function($) {
+$(document).ready(function(){
+
+  // putting lines by the pre blocks
+  $("pre").each(function(){
+    var pre = $(this).text().split("\n");
+    var lines = new Array(pre.length+1);
+    for(var i = 0; i < pre.length; i++) {
+      var wrap = Math.floor(pre[i].split("").length / 70)
+      if (pre[i]==""&&i==pre.length-1) {
+        lines.splice(i, 1);
+      } else {
+        lines[i] = i+1;
+        for(var j = 0; j < wrap; j++) {
+          lines[i] += "\n";
+        }
+      }
+    }
+    $(this).before("<pre class='lines'>" + lines.join("\n") + "</pre>");
+  });
+
+  var headings = [];
+
+  var collectHeaders = function(){
+    headings.push({"top":$(this).offset().top - 15,"text":$(this).text()});
+  }
+
+  if($(".markdown-body h1").length > 1) $(".markdown-body h1").each(collectHeaders)
+  else if($(".markdown-body h2").length > 1) $(".markdown-body h2").each(collectHeaders)
+  else if($(".markdown-body h3").length > 1) $(".markdown-body h3").each(collectHeaders)
+
+  $(window).scroll(function(){
+    if(headings.length==0) return true;
+    var scrolltop = $(window).scrollTop() || 0;
+    if(headings[0] && scrolltop < headings[0].top) {
+      $(".current-section").css({"opacity":0,"visibility":"hidden"});
+      return false;
+    }
+    $(".current-section").css({"opacity":1,"visibility":"visible"});
+    for(var i in headings) {
+      if(scrolltop >= headings[i].top) {
+        $(".current-section .name").text(headings[i].text);
+      }
+    }
+  });
+
+  $(".current-section a").click(function(){
+    $(window).scrollTop(0);
+    return false;
+  })
+});
+})(jQuery)

+ 2 - 1
stylesheets/pygment_trac.css

@@ -1,3 +1,4 @@
+.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 */
@@ -34,7 +35,7 @@
 .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: #CBDFFF } /* Name.Tag */
+.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 */

+ 498 - 164
stylesheets/stylesheet.css

@@ -1,247 +1,581 @@
-body {
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
   margin: 0;
   padding: 0;
-  background: #151515 url("../images/bkg.png") 0 0;
-  color: #eaeaea;
-  font: 16px;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Style */
+
+body {
+  font-size: 15px;
+  font-family: Arial, Arial, Helvetica, sans-serif;
   line-height: 1.5;
-  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+  background: #D1D1D1;
+}
+
+a {
+  color: #63a52a;
+  text-decoration: none;
+  -webkit-transition: color ease-in-out 0.3s;
 }
 
-/* General & 'Reset' Stuff */
+a:hover {
+  text-decoration: underline;
+  color: #90D355;
+}
 
-.container {
-  width: 90%;
-  max-width: 600px;
+h1.title {
+  margin: 30px 20px 10px;
+  font-size: 60px;
+  font-weight: bold;
+  font-style: italic;
+  font-family:Georgia, serif;
+  text-align: center;
+}
+
+.wrapper {
+  width: 675px;
   margin: 0 auto;
 }
 
-section {
-  display: block;
-  margin: 0 0 20px 0;
+#container {
+  border: 1px solid #2a2a2a;
+  background: #ddd url(../images/pattern.png);
+  box-shadow: 0 0 5px #b1b1b1;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin: 0 0 20px;
+p.tagline {
+  padding: 20px 20px 0;
+  color: #fff;
+  font-size: 17px;
 }
 
-li {
-  line-height: 1.4 ;
+#main {
+  margin-top: 20px;
+  padding: 0 20px 90px;
+  background-color: #fff;
 }
 
-/* Header, <header>
-   header   - container
-   h1       - project name
-   h2       - project description
-*/
+.download-bar {
+  background: #222;
+  border: 5px solid #444;
+  padding: 10px;
+  margin: 0 -35px 20px;
+  position: relative;
+}
 
-header {
-  background: rgba(0, 0, 0, 0.1);
-  width: 100%;
-  border-bottom: 1px dashed #b5e853;
-  padding: 20px 0;
-  margin: 0 0 40px 0;
+.download-bar .inner {
+  overflow: hidden;
 }
 
-header h1 {
-  font-size: 30px;
-  line-height: 1.5;
-  margin: 0 0 0 -40px;
-  font-weight: bold;
-  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-  color: #b5e853;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
-               0 0 5px rgba(181, 232, 83, 0.1),
-               0 0 10px rgba(181, 232, 83, 0.1);
-  letter-spacing: -1px;
-  -webkit-font-smoothing: antialiased;
+.download-bar .watch-fork iframe {
+  display: block;
+  float: left;
+  border-right: 1px solid #ddd;
+  padding-right: 5px;
+}
+.download-bar .watch-fork iframe.last {
+  border-right: 0 none;
+  padding-right: 0;
+  padding-left: 5px;
+  border-left: 1px solid #fff;
+}
+.download-bar .watch-fork {
+  overflow: hidden;
+  float: right;
+  background-color: #eee;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.download-bar .blc {
+  border: 10px solid black;
+  border-color: transparent transparent black;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+.download-bar .trc {
+  border: 10px solid black;
+  border-color:  black transparent transparent;
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  top: -15px;
+  right: 0;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+.download-bar .avatar {
+  border: 1px solid black;
+  display: block;
+  padding: 4px;
+  float: left;
 }
 
-header h1:before {
-  content: "./ ";
+.download-bar .avatar img {
+  display: block;
+}
+
+.download-bar a.code {
+  background: transparent url(../images/code.png) no-repeat 0 2px;
+  padding-left: 35px;
+  margin-top: 8px;
+  display: block;
+  float: left;
+  text-indent: 0;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  -moz-opacity: 1;
+  filter:alpha(opacity=1);
+}
+
+.current-section {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  width: 693px;
+  margin-left: -352px;
+  background: #222;
+  border: 5px solid #444;
+  color: #fff;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity ease-in-out 0.3s;
+}
+
+.current-section p {
+  padding: 5px 27px;
   font-size: 24px;
+  font-weight: bold;
 }
 
-header h2 {
-  font-size: 18px;
-  font-weight: 300;
-  color: #666;
+.current-section a {
+  float: right;
+  text-indent: -10000px;
+  background: transparent url(../images/top.png) no-repeat 0 0;
+  width: 20px;
+  height: 20px;
+  opacity: 0.8;
+  margin-right: 12px;
+  margin-top: 12px;
+  -moz-opacity: 0.8;
+  filter:alpha(opacity=8);
+  -webkit-transition: opacity ease-in-out 0.3s;
 }
 
-#downloads .btn {
-  display: inline-block;
-  text-align: center;
-  margin: 0;
+.current-section a:hover {
+  opacity: 1;
+  -moz-opacity: 1;
+  filter:alpha(opacity=1);
 }
 
-/* Main Content
-*/
+.current-section a.zip {
+  margin-right: 8px;
+}
+
+a.zip,
+a.zip span {
+  background: transparent url(../images/zip.png) no-repeat 0 0;
+  width: 30px;
+  height: 21px;
+  opacity: 0.8;
+  display: inline-block;
+  text-indent: -10000px;
+  -moz-opacity: 0.8;
+  filter:alpha(opacity=8);
+  -webkit-transition: opacity ease-in-out 0.3s;
+}
+
+a.tar,
+a.tar span {
+  background: transparent url(../images/tar.png) no-repeat 0 0;
+  width: 30px;
+  height: 21px;
+  opacity: 0.8;
+  display: inline-block;
+  text-indent: -10000px;
+  -moz-opacity: 0.8;
+  filter:alpha(opacity=8);
+  -webkit-transition: opacity ease-in-out 0.3s;
+}
 
-#main_content {
-  width: 100%;
-  -webkit-font-smoothing: antialiased;
+a.code {
+  background: transparent url(../images/code.png) no-repeat 0 2px;
+  width: 30px;
+  height: 21px;
+  display: block;
+  opacity: 0.8;
+  display: inline-block;
+  text-indent: -10000px;
+  -moz-opacity: 0.8;
+  filter:alpha(opacity=8);
+  -webkit-transition: opacity ease-in-out 0.3s;
 }
-section img {
-  max-width: 100%
+
+a.zip:hover,
+a.tar:hover,
+a.code:hover {
+  opacity: 1;
+  -moz-opacity: 1;
+  filter:alpha(opacity=1);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: normal;
-  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-  color: #b5e853;
-  letter-spacing: -0.03em;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
-               0 0 5px rgba(181, 232, 83, 0.1),
-               0 0 10px rgba(181, 232, 83, 0.1);
+a.download-button {
+  border: 1px solid black;
+  border-radius: 3px;
+  display: inline-block;
+  text-indent: 0!important;
+  width: auto;
+  float: right;
+  background: #999; /* for non-css3 browsers */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ADD4', endColorstr='#1B657E'); /* for IE */
+  background: -webkit-gradient(linear, left top, left bottom, from(#37ADD4), to(#1B657E)); /* for webkit browsers */
+  background: -moz-linear-gradient(top,  #37ADD4,  #1B657E); /* for firefox 3.6+ */
+  height: auto;
+  margin-left: 10px;
+}
+
+a.download-button span {
+  background-position: 10px 5px;
+  width: auto;
+  height: auto;
+  padding: 5px 10px;
+  padding-left: 45px;
+  display: inline-block;
+  text-indent: 0!important;
+  color: #fff;
 }
 
-#main_content h1 {
-  font-size: 30px;
+footer {
+  margin-bottom: 60px;
+  padding-bottom: 60px;
 }
 
-#main_content h2 {
-  font-size: 24px;
+footer .owner {
+  background: #222;
+  border: 5px solid #444;
+  padding: 5px 15px;
+  margin: -67px -10px 35px;
+  color: #d6d6d6;
 }
 
-#main_content h3 {
-  font-size: 18px;
+footer .creds small {
+  float: right;
+  font-size: 10px;
+  text-align: right;
+  margin-left: 15px;
 }
 
-#main_content h4 {
-  font-size: 14px;
+footer .owner .avatar {
+  background-color: #666;
+  display: block;
+  margin: -19px 10px 0 0;
+  width: 60px;
+  float: left;
 }
 
-#main_content h5 {
-  font-size: 12px;
-  text-transform: uppercase;
-  margin: 0 0 5px 0;
+footer .owner img {
+  display: block;
+  border: 1px solid #2a2a2a;
+  margin: 5px;
 }
 
-#main_content h6 {
-  font-size: 12px;
-  text-transform: uppercase;
-  color: #999;
-  margin: 0 0 5px 0;
+footer .owner p {
+  font-family:Georgia, serif;
 }
 
-dt {
+footer .owner p a {
+  font-size: 16px;
   font-style: italic;
+}
+
+/* Markdown */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body blockquote {
+  margin-bottom: 20px;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
   font-weight: bold;
 }
 
-ul li {
-  list-style: none;
+.markdown-body h1 {
+  font-size: 28px;
 }
 
-ul li:before {
-  content: ">>";
-  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-  font-size: 13px;
-  color: #b5e853;
-  margin-left: -37px;
-  margin-right: 21px;
-  line-height: 16px;
+.markdown-body h2 {
+  font-size: 24px;
+  color: #557398;
 }
 
-blockquote {
-  color: #aaa;
-  padding-left: 10px;
-  border-left: 1px dotted #666;
+.markdown-body h3 {
+  font-size: 20px;
 }
 
-pre {
-  background: rgba(0, 0, 0, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  padding: 10px;
-  font-size: 14px;
-  color: #b5e853;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  text-wrap: normal;
-  overflow: auto;
-  overflow-y: hidden;
+.markdown-body h4 {
+  font-size: 18px;
 }
 
-table {
-  width: 100%;
-  margin: 0 0 20px 0;
+.markdown-body h5 {
+  font-size: 16px;
 }
 
-th {
-  text-align: left;
-  border-bottom: 1px dashed #b5e853;
-  padding: 5px 10px;
+.markdown-body pre {
+  padding: 10px 70px 10px 0;
+  margin-left: -20px;
+  margin-right: -20px;
+  font-family: 'Monaco', 'Lucida Console', monospace;
+  font-size: 13px;
+  line-height: 20px;
+  box-shadow: inset 0 0 5px #000;
+  word-wrap: break-word;
+  background-color:#3b3b3b;
+  color: #d6d6d6;
 }
 
-td {
-  padding: 5px 10px;
+.markdown-body pre.lines {
+  font-size: 12px;
+  margin:0 10px 0 -20px;
+  padding: 10px;
+  float:  left;
+  display: block;
+  text-align: right;
+  box-shadow: none;
+  background-color:#2a2a2a;
+  color: #d6d6d6;
 }
 
-hr {
-  height: 0;
-  border: 0;
-  border-bottom: 1px dashed #b5e853;
-  color: #b5e853;
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 30px;
 }
 
-/* Buttons
-*/
+.markdown-body ul {
+  list-style-type: disc;
+}
 
-.btn {
-  display: inline-block;
-  background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3));
-  padding: 8px 18px;
-  border-radius: 50px;
-  border: 2px solid rgba(0, 0, 0, 0.7);
-  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
-  border-top: 2px solid rgba(0, 0, 0, 1);
-  color: rgba(255, 255, 255, 0.8);
-  font-family: Helvetica, Arial, sans-serif;
+.markdown-body li,
+.markdown-body li p,
+.markdown-body dd,
+.markdown-body dd p {
+  margin-bottom: 10px;
+}
+
+.markdown-body li pre,
+.markdown-body li pre.lines,
+.markdown-body dd pre,
+.markdown-body dd pre.lines {
+  margin-left: -35px;
+}
+
+.markdown-body dt {
   font-weight: bold;
-  font-size: 13px;
-  text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  font-style: italic;
 }
 
-.btn:hover {
-  background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8));
+.markdown-body dd {
+  margin-left: 15px;
 }
 
-.btn .icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin: 1px 8px 0 0;
-  float: left;
+.markdown-body table {
+  width: 673px;
+  margin-left: -20px;
+  margin-right: -20px;
 }
 
-.btn-github .icon {
-  opacity: 0.6;
-  background: url("../images/blacktocat.png") 0 0 no-repeat;
+.markdown-body tbody {
+  border-top: 2px solid #557398;
+  border-bottom: 2px solid #557398;
+  background-color: #EBEFF4;
 }
 
-/* Links
-   a, a:hover, a:visited
-*/
+.markdown-body table td * {
+  margin: 0;
+}
 
-a {
-  color: #63c0f5;
-  text-shadow: 0 0 5px rgba(104, 182, 255, 0.5);
+.markdown-body td {
+  border-right: 1px solid #557398;
+  border-bottom: 1px solid #557398;
+  padding: 5px;
+}
+
+.markdown-body td:first-child,
+.markdown-body th:first-child {
+  width: 30%;
+  padding-left: 20px;
 }
 
-/* Clearfix */
+.markdown-body td:last-child {
+  border-right: 0 none;
+}
 
-.cf:before, .cf:after {
-  content:"";
-  display:table;
+.markdown-body th {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: left;
+  padding: 5px;
 }
 
-.cf:after {
-  clear:both;
+.markdown-body tt {
+  background-color:#3b3b3b;
+  color: #d6d6d6;
+  padding: 2px 3px;
+}
+
+.markdown-body blockquote {
+  font-style: italic;
+  font-family:Georgia, serif;
+  font-size: 17px;
+  border-top: 3px solid #333;
+  border-bottom: 3px solid #333;
+  padding: 10px 20px;
+  padding-left: 50px;
+}
+
+.markdown-body blockquote:before {
+  font-style: italic;
+  font-family: Georgia, serif;
+  font-size: 90px;
+  height: 90px;
+  margin-left: -60px;
+  margin-top: -25px;
+  content: "‟";
+  display: block;
+  float: left;
 }
 
-.cf {
-  zoom:1;
-}
+.markdown-body img {
+  max-width: 100%;
+  @include box-sizing(border-box);
+}
+
+.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 */