Styles! First attempt. Also logo

styles/colors.sass

@@ -1,17 +1,18 @@
 // Descriptive colors
-$black:      #151515
-$eerie_black:#212121
-$gray:       #424242
-$light_gray: #f2f2f2
-$white:      #FEFEFE
+$eggshell: #F8F8F8
+$space_gray: #393939
+$deep_black: #101010
+$dry_green: #54B59A
+
 
 // Functional colors
-$body_background: $white
-$body_text:       $black
+$background: $eggshell
+$text: $space_gray
+
+$outline: $dry_green
 
-$search_background: $black
-$search_text:       $white
+$button_background: $dry_green
+$button_text: $eggshell
 
-$page_code_background: $light_gray
-$page_code_text:       $eerie_black
-$page_description:     $gray
+$debug_background: $space_gray
+$debug_text: $eggshell

styles/index.sass

@@ -1,17 +1,25 @@
+@import "utils"
 @import "colors"
+@import "fonts"
 
-* 
-  font-family: Helvetica Neue, Helvetica 
+*
+  font-family: Avenir Next
   font-size: 1em
 
-body
-  margin: 0
-  background: $body_background
-  color: $body_text
+h1, h2, h3
+  +reset
 
-@import "octocat"
+h1
+  font-size: 2em
 
-#tldr 
-  @import "search-bar"
-  @import "page"
+h2
+  font-size: 1.4em
 
+body
+  +reset
+  background: $background
+  color: $text
+
+#tldr
+  @import "navigation"
+  @import "page"

styles/navigation.sass

@@ -0,0 +1,37 @@
+@import "utils"
+@import "colors"
+
+=image($path, $width, $heigth)
+  background: url($path)
+  background-size: $width $heigth
+  width: $width
+  height: $heigth
+
+.brand
+  +image("assets/tldr.svg", 105px, 30px)
+
+nav
+  +reset
+  height: 64px
+  border-bottom: 1px solid $outline
+
+  a.brand
+    display: inline-block
+    margin-left: 60px
+    margin-top: 16px
+
+  input
+    display: inline-block
+    position: absolute
+    margin-top: 12px
+    margin-left: 30px
+
+    height: 38px
+
+    border: 1px solid $outline
+
+    font-size: 16pt
+    padding: 0px 12px
+
+    &:focus
+      outline-color: $outline

styles/page.sass

@@ -1,7 +1,21 @@
+@import "utils"
 @import "colors"
 
-#suggestion
-  margin: 1em 0.5em
+.debug
+  font-family: Source Code Pro, Courier New, Courier, monospace
+  background-color: $debug_background
+  color: $debug_text
+  position: absolute
+  bottom: 0
+  left: 0
+  margin: 0
+  width: 100%
+  padding: 2em
+
+.content
+  +reset
+  margin-top:  60px
+  margin-left: 60px
 
 #page-container
   font-size: 1.25em
@@ -19,8 +33,6 @@
 
   code
     font-family: 'Source Code Pro', courier new, courier
-    background-color: $page_code_background
-    color: $page_code_text
     display: block
     padding: 0.55em 1.25em
     margin: 0

styles/utils.sass

@@ -0,0 +1,3 @@
+=reset()
+  margin: 0
+  padding: 0