Merge pull request #5 from vim-tw/style

Add some style

- status bar.
- modify some css.

Author: chusiang

_includes/footer.html

@@ -1,4 +1,5 @@
         <p>Copyleft (ɔ) from 2015-2016 Vim Taiwan CC BY-NC 2.5 TW.</p>
+        <img src="images/status_bar.png" class="status_bar">
     </div>
 </body>
 </html>

_sass/variable.scss

@@ -1,4 +1,7 @@
 $font-size: 18px;
 $title-color: #70b950;
+$link-color: #80a0ff;
+$normal-color: #e8e8d3;
+$linenum-color: #605958;
 $pound: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='13px'><text x='0' y='17' fill='%2370b950' font-size='18' font-weight='600'>%23</text></svg>";
 $pound-offset: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='28px'><text x='0' y='17' fill='%2370b950' font-size='18' font-weight='600'>%23</text></svg>";

images/status_bar.png

@@ -8,25 +8,34 @@
   text-align: right;
   counter-increment: ln;
   content: counter(ln);
-  color: #605958;
+  color: $linenum-color;
   background-color: #151515;
   font-weight: 400;
 }
 
+::selection {
+  background: $normal-color;
+  color: #000;
+}
+::-moz-selection {
+  background: $normal-color;
+  color: #000;
+}
+
 body {
   counter-reset: ln;
   margin: 0;
   padding: 0;
   font-family: monospace;
-  color: #e8e8d3;
+  color: $normal-color;
   background-color: #151515;
   font-size: $font-size;
 }
 
 #main {
   padding: 1rem 0;
   font-family: monospace;
-  color: #e8e8d3;
+  color: $normal-color;
   background-color: #151515;
 
   h1::before {
@@ -59,6 +68,16 @@ body {
       display: block;
       @include lineNum-style;
     }
+
+    &::selection {
+      background: $title-color;
+      color: #000;
+    }
+
+    &::-moz-selection {
+      background: $title-color;
+      color: #000;
+    }
   }
 
   p {
@@ -106,11 +125,27 @@ body {
   }
 
   a {
-    color: #80a0ff;
+    color: $link-color;
     text-decoration: underline;
 
     &:hover {
       color: $title-color;
     }
+
+    &::selection {
+      background: $link-color;
+      color: #000;
+    }
+
+    &::-moz-selection {
+      background: $link-color;
+      color: #000;
+    }
+  }
+
+  .status_bar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
   }
 }