added "fork me on github" ribbon

index.html

@@ -15,8 +15,8 @@
     <!-- Optional theme -->
     <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">-->
 
-    <link rel="stylesheet" href="playground/libs/codemirror-4.8/lib/codemirror.css" />
+    <link rel="stylesheet" href="playground/libs/codemirror-4.8/lib/codemirror.css"/>
-    <link rel="stylesheet" href="playground/libs/codemirror-4.8/theme/solarized.css" />
+    <link rel="stylesheet" href="playground/libs/codemirror-4.8/theme/solarized.css"/>
     <link rel="stylesheet" href="playground/libs/codemirror-4.8/addon/hint/show-hint.css">
     <link rel="stylesheet" href="playground/libs/codemirror-4.8/addon/lint/lint.css">
 
@@ -30,7 +30,8 @@
     <div class="nav-main">
         <div class="wrap">
             <a class="nav-home" href="index.html">
-                <img class="nav-logo" src="https://wix.github.io/react-templates/img/logo-rt.svg" width="56" height="24">
+                <img class="nav-logo" src="https://wix.github.io/react-templates/img/logo-rt.svg" width="56"
+                     height="24">
                 <span>React Templates</span>
             </a>
             <ul class="nav-site">
@@ -41,6 +42,10 @@
             </ul>
         </div>
     </div>
+    <a href="https://github.com/wix/react-templates">
+        <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 101" src="img/github-fork-me.png"
+             alt="Fork me on GitHub">
+    </a>
 
     <div class="hero">
         <div class="wrap">
@@ -56,9 +61,11 @@
 
     <section class="content wrap">
         <section class="love-list">
-            <ul >
+            <ul>
                 <li>No runtime libraries. No magic. Just simple pre-compilation to a clear React code</li>
-                <li>Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic</li>
+                <li>Super easy to write panels. By panels we mean components that have a lot of HTML code and
+                    non-reusable logic
+                </li>
                 <li>Very good separation of presentation and logic. Almost no HTML within the component file</li>
                 <li>Declarative coding for presentation. HTML that you write and inspect look similar</li>
                 <li>Easy syntax. Similar to HTML. All IDEs recognize this format</li>
@@ -68,7 +75,7 @@
         <section id="home-section" class="home-section">
         </section>
         <div id="loading">Loading...</div>
-        <hr class="home-divider" />
+        <hr class="home-divider"/>
     </section>
 
     <footer class="footer">
@@ -83,7 +90,8 @@
 <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
 <!--http://requirejs.org/docs/release/2.1.15/minified/require.js-->
 
-<script data-main="playground/home-main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
+<script data-main="playground/home-main.js"
+        src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
 <!--<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>-->
 <!--<script src="playground/dist/home.min.js"></script>-->
 </body>

playground/css/home.css

@@ -10,10 +10,10 @@ p {
 }
 
 /*.subHeader {*/
-    /*font-size: 21px;*/
+/*font-size: 21px;*/
-    /*font-weight: 200;*/
+/*font-weight: 200;*/
-    /*line-height: 30px;*/
+/*line-height: 30px;*/
-    /*margin-bottom: 10px*/
+/*margin-bottom: 10px*/
 /*}*/
 
 em {
@@ -450,7 +450,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 .nav-main .nav-logo {
     vertical-align: middle;
     display: inline-block;
-    margin-bottom:5px;
+    margin-bottom: 5px;
 }
 
 .nav-main ul {
@@ -462,7 +462,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 .hero {
-    padding-bottom:60px;
+    padding-bottom: 60px;
     background: #fff;
     padding-top: 40px;
 }
@@ -479,33 +479,34 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
     text-align: center;
     color: #444;
     margin-top: 15px;
-    font-weight:300;
+    font-weight: 300;
 }
 
-.love-list{
+.love-list {
     padding: 40px 0;
     border: 1px solid #ddd;
     border-width: 1px 0 1px 0;
 }
-.love-list ul{
+
-    margin:0;
+.love-list ul {
-    padding:0;
+    margin: 0;
+    padding: 0;
 }
 
-.love-list li{
+.love-list li {
     font-size: 18px;
-    line-height:1.7;
+    line-height: 1.7;
     list-style-type: none;
 }
 
-.love-list li::before{
+.love-list li::before {
     content: '';
-    display:inline-block;
+    display: inline-block;
-    width:14px;
+    width: 14px;
-    height:14px;
+    height: 14px;
-    border-radius:9px;
+    border-radius: 9px;
     background: #3899EC;
-    margin-right:12px;
+    margin-right: 12px;
 }
 
 .buttons-unit {
@@ -903,27 +904,27 @@ h1:after {
 }
 
 /*div.CodeMirror pre, div.CodeMirror-linenumber, code {*/
-    /*font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;*/
+/*font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;*/
-    /*font-size: 0.8em;*/
+/*font-size: 0.8em;*/
-    /*line-height: 1.5*/
+/*line-height: 1.5*/
 /*}*/
 
 /*div.CodeMirror-linenumber:after {*/
-    /*content: '.'*/
+/*content: '.'*/
 /*}*/
 
 /*.CodeMirror, div.CodeMirror-gutters, div.highlight {*/
-    /*border: none*/
+/*border: none*/
 /*}*/
 
 /*.CodeMirror-readonly div.CodeMirror-cursor {*/
-    /*visibility: hidden*/
+/*visibility: hidden*/
 /*}*/
 
 /*small code, li code, p code {*/
-    /*color: #555;*/
+/*color: #555;*/
-    /*background-color: rgba(0, 0, 0, 0.04);*/
+/*background-color: rgba(0, 0, 0, 0.04);*/
-    /*padding: 1px 3px*/
+/*padding: 1px 3px*/
 /*}*/
 
 .cm-s-default span.cm-string-2 {
@@ -1061,17 +1062,17 @@ h1:after {
 }
 
 /*.post {*/
-    /*margin-bottom: 30px*/
+/*margin-bottom: 30px*/
 /*}*/
 
 /*.pagination {*/
-    /*margin-bottom: 30px;*/
+/*margin-bottom: 30px;*/
-    /*width: 100%;*/
+/*width: 100%;*/
-    /*overflow: hidden;*/
+/*overflow: hidden;*/
 /*}*/
 
 /*.pagination .next {*/
-    /*float: right*/
+/*float: right*/
 /*}*/
 
 div[data-twttr-id] iframe {
@@ -1167,13 +1168,13 @@ div[data-twttr-id] iframe {
 }
 
 .sample-view {
-    border:1px solid #ddd;
+    border: 1px solid #ddd;
     border-radius: 4px;
     background-color: #f8f8f5;
     padding: 20px 30px;
-    margin-left:30px;
+    margin-left: 30px;
     height: 301px;
-    max-height:308px;
+    max-height: 308px;
     overflow: auto;
 }
 
@@ -1194,8 +1195,8 @@ footer {
 
 footer span {
     display: inline-block;
-    line-height:1.5;
+    line-height: 1.5;
-    vertical-align:text-bottom;
+    vertical-align: text-bottom;
 }
 
 .wf-white-logo {
@@ -1207,5 +1208,10 @@ footer span {
     background-position: 0 -188px;
 }
 
-
+.img-fork-github {
-
+    position: fixed;
+    top: 0;
+    right: 0;
+    border: 0;
+    z-index: 101
+}