References #24 - Added fonts used in the new paper font. Created enti…

…re paper theme. Still need some works on the colors, but it's mostly there.

app/assets/stylesheets/_variables.sass

@@ -2,10 +2,16 @@ $dark-theme-light-grey: #ebebeb
 $dark-theme-dark-grey:  #1b1b1b
 $dark-theme-dim-grey: #222
 $dark-theme-medium-grey: #424242
-
 $dark-theme-color-links: #FF9729
 $dark-theme-color-links-hover: #E3CF57
 
+$paper-theme-light-grey: #efefef
+$paper-theme-dark-grey: #030C22
+$paper-theme-mellow-grey: #ddd
+$paper-theme-yellowed: #e0e0e0
+$paper-theme-color-links: #008C9E
+$paper-theme-color-links-hover: #00B4CC
+
 $size-big:    26px
 $size-medium: 14px
 $size-small:  12px
@@ -17,7 +23,15 @@ $layer-overlay: 20
   font-family: PTMono
   src: url(/assets/PTM55FT.ttf)
 
+  font-family: Andada
+  src: url(/assets/Andada.ttf)
+
+  font-family: Trocchi
+  src: url(/assets/Trocchi.ttf)
+
 $font-dark: PTMono, sans-serif
+$font-paper-copy: Andada
+$font-paper-headline: Trocchi
 
 .size-big
   font-size: $size-big

app/assets/stylesheets/layout-standard.sass

@@ -151,7 +151,6 @@ body.layout-standard
     border: none
   #thought-form textarea
     @extend input
-    font-family: $font-dark
     width: 210px
     height: 225px
     overflow: auto

app/assets/stylesheets/theme-dark.sass

@@ -61,6 +61,7 @@ body.theme-dark
   #update_thought_wall_spinner
   #thought-form
     @extend .thought-box
+    font-family: $font-dark
   .new-thought-box
   #thought-new-remaining-characters
 

app/assets/stylesheets/theme-paper.sass

@@ -0,0 +1,111 @@
+@import "variables"
+
+body.theme-paper
+  color: $paper-theme-dark-grey
+  font-family: $font-paper-copy
+  background-color: $paper-theme-light-grey
+  background-image: url('brain-light.jpg')
+  background-position: top center
+  background-repeat: no-repeat
+
+  a
+    color: $paper-theme-color-links
+    &:hover
+      color: $paper-theme-color-links-hover
+
+  #nav-bar
+    #nav-links
+    #recent-thought-walls
+      border: solid 1px $paper-theme-dark-grey
+      background-color: $paper-theme-light-grey
+
+  #content
+
+  #overlay
+    background-color: $paper-theme-light-grey
+  #overlay-close
+    background-color: $paper-theme-light-grey
+    border-color: $paper-theme-dark-grey
+  #overlay-content
+
+  .collaboration-div
+  .thought-box-overlay-background
+    background-color: $paper-theme-light-grey
+  .thought-box-overlay
+  .thought-overlay
+  .thought-box
+    border: 1px solid $paper-theme-dark-grey
+  .thought
+  .thought-bottom-section-standard
+    background-color: $paper-theme-yellowed
+  .thought-top-section-overlay
+    background-color: $paper-theme-yellowed
+  .thought-controls
+  .thought-controls-overlay
+  .thought-votes-overlay
+  .thought-votes
+  .thought-histories-box
+    border: 1px solid #1b1b1b
+    background-color: $paper-theme-yellowed
+  .thought-history-entry
+    border: 1px solid $paper-theme-dark-grey
+  .thought-history-text
+    @extend .thought
+    margin-top: 0px
+  .thought-history-controls
+    @extend .thought-controls
+  .thought-history-bottom-section
+    background-color: $paper-theme-yellowed
+
+  #thought-wall-form
+  #update_thought_wall_spinner
+  #thought-form
+    @extend .thought-box
+    font-family: $font-paper-copy
+  .new-thought-box
+  #thought-new-remaining-characters
+
+  .positive
+    border: 1px double $paper-theme-dark-grey
+    background: rgba(209, 255, 11, 0.5)
+  .neutral
+    border: 1px dashed $paper-theme-dark-grey
+  .negative
+    border: 1px dotted $paper-theme-dark-grey
+    background: rgba(179, 66, 66, 0.5)
+
+  input
+    border: 1px solid 
+    font-family: $font-paper-headline
+    color: $paper-theme-dark-grey
+    background-color: $paper-theme-light-grey
+  #thought-form textarea
+    @extend input
+    background-color: $paper-theme-mellow-grey
+    font-family: $font-paper-copy
+    width: 210px
+    height: 225px
+    overflow: auto
+    resize: none
+  #thought-edit textarea
+    @extend input
+    background-color: $paper-theme-mellow-grey
+    font-family: $font-paper-copy
+    width: 210px
+    height: 95px
+  #thought-edit-overlay
+    height: 100%
+  #thought-edit-overlay form
+    height: 100%
+  #thought-edit-overlay textarea
+    @extend input
+    background-color: $paper-theme-mellow-grey
+    font-family: $font-paper-copy
+    font-size: $size-medium
+    width: 95%
+    height: 85%
+  .thought-add-button
+    float: right
+  .title-entry
+    font-size: $size-big
+    width: 95%

app/views/layouts/application.html.erb

@@ -7,7 +7,7 @@
   <%= csrf_meta_tags %>
   <%= yield :head %>
 </head>
-<body class="theme-dark layout-standard">
+<body class="theme-paper layout-standard">
   <div id="render_timestamp"  class="hidden"><%= @render_timestamp  if defined?(@render_timestamp) %></div>
   <div id="next_refresh"      class="hidden"><%= @next_refresh      if defined?(@next_refresh) %></div>
   <div id="thought-wall-code" class="hidden"><%= @thought_wall.code if defined?(@thought_wall) %></div>