From ab69876c846954f5e8c30343cab4abc0f120cfe3 Mon Sep 17 00:00:00 2001
From: Jeff Lunt <jefflunt@gmail.com>
Date: Tue, 12 Jun 2012 20:22:42 -0500
Subject: [PATCH] References #24 - Beginning of refactoring for paper layout.

---
 app/assets/stylesheets/_variables.sass |  26 +++
 app/assets/stylesheets/dark.sass       | 207 ++++++++++++++++++++++
 app/assets/stylesheets/main.sass       | 232 -------------------------
 app/assets/stylesheets/paper.sass      | 207 ++++++++++++++++++++++
 app/views/layouts/application.html.erb |   2 +-
 5 files changed, 441 insertions(+), 233 deletions(-)
 create mode 100644 app/assets/stylesheets/_variables.sass
 create mode 100644 app/assets/stylesheets/dark.sass
 delete mode 100644 app/assets/stylesheets/main.sass
 create mode 100644 app/assets/stylesheets/paper.sass

diff --git a/app/assets/stylesheets/_variables.sass b/app/assets/stylesheets/_variables.sass
new file mode 100644
index 0000000..f1571bf
--- /dev/null
+++ b/app/assets/stylesheets/_variables.sass
@@ -0,0 +1,26 @@
+$color-light-grey: #ebebeb
+$color-dark-grey:  #1b1b1b
+$color-medium-grey: #777
+$color-dim-grey: #222
+
+$color-links: #FF9729
+$color-links-hover: #E3CF57
+
+$size-big:    26px
+$size-medium: 14px
+$size-small:  12px
+
+@font-face
+  font-family: PTMono
+  src: url(/assets/PTM55FT.ttf)
+
+$font-main: PTMono, sans-serif
+
+.size-big
+  font-size: $size-big
+.size-medium
+  font-size: $size-medium
+.size-small
+  font-size: $size-small
+.hidden
+  display: none
\ No newline at end of file
diff --git a/app/assets/stylesheets/dark.sass b/app/assets/stylesheets/dark.sass
new file mode 100644
index 0000000..2411db2
--- /dev/null
+++ b/app/assets/stylesheets/dark.sass
@@ -0,0 +1,207 @@
+@import "variables"
+
+body.dark
+  pre
+    font-size: $size-small
+    
+  position: relative
+  color: $color-light-grey
+  font-family: $font-main
+  background-color: $color-dark-grey
+  background-image: url('brain-dark.jpg')
+  background-position: top center
+  background-repeat: no-repeat
+  
+  a
+    color: $color-links
+    text-decoration: none
+    &:hover
+      color: $color-links-hover
+
+  #nav-bar
+    position: relative
+    height: 25px
+    border-bottom: 1px solid
+    #nav-links
+      position: absolute
+      left: 20px
+    #recent-thought-walls
+      border: solid 1px $color-light-grey
+      background-color: $color-dark-grey
+      opacity: 0.0
+      position: absolute
+      left: 20px
+      top: 25px
+      padding: 10px
+      z-index: 10
+
+  #content
+    position: absolute
+    left: 20px
+    top: 60px
+    width: 98%
+    height: 300px
+
+  #overlay
+    display: none
+    opacity: 0.0
+    position: fixed
+    top: 0px
+    left: 0px
+    width: 100%
+    height: 100%
+    background-color: $color-dark-grey
+  #overlay-close
+    background-color: $color-dark-grey
+    border-color: $color-light-grey
+    font-size: $size-big
+    border: 1px solid
+    width: 100%
+    height: 25px
+    text-align: center
+  #overlay-content
+    width: 100%
+    height: 100%
+
+  .collaboration-div
+    position: absolute
+    width: 30%
+    right: 0px
+  .thought-box-overlay-background
+    position: relative
+    background-color: $color-dark-grey
+    width: 100%
+    height: 100%
+  .thought-box-overlay
+    height: 100%
+    width: auto
+    overflow-y: auto
+    overflow-x: hidden
+  .thought-overlay
+    padding-left: 15px
+    padding-right: 15px
+  .thought-box
+    width: 215px
+    height: 125px
+    float: left
+    position: relative
+    border: 1px solid #424242
+    border-radius: 5px
+    margin-top: 5px
+    margin-right: 5px
+  .thought
+    overflow: hidden
+    border: none
+    margin-top: -10px
+    font-size: $size-medium
+    word-wrap: break-word
+    padding: 5px 5px 23px 5px
+    height: 83px
+  .thought-bottom-section-standard
+    background-color: #000
+    border-bottom-left-radius: 5px
+    border-bottom-right-radius: 5px
+    height: 24px
+    bottom: 0px
+  .thought-top-section-overlay
+    background-color: black
+    width: 100%
+    height: 37px
+  .thought-controls
+    position: absolute
+    bottom: 3px
+    right: 5px
+  .thought-controls-overlay
+    position: absolute
+    top: 5px
+    right: 25px
+  .thought-votes-overlay
+    position: relative
+    top: 5px
+    left: 15px
+  .thought-votes
+    position: absolute
+    bottom: 3px
+    left: 5px
+  .thought-histories-box
+    position: relative
+    z-index: 100
+    margin-top: 5px
+    border: 1px solid #ebebeb
+    border-radius: 5px
+    background-color: black
+    padding: 5px
+  .thought-history-entry
+    position: relative
+    border: 1px solid #424242
+    border-radius: 5px
+    margin-bottom: 5px
+  .thought-history-text
+    @extend .thought
+    margin-top: 0px
+  .thought-history-controls
+    @extend .thought-controls
+  .thought-history-bottom-section
+    background-color: #000
+    border-bottom-left-radius: 5px
+    border-bottom-right-radius: 5px
+    height: 24px
+    bottom: 0px
+  
+  #thought-wall-form
+    width: 70%
+    position: relative
+  #update_thought_wall_spinner
+    display: none
+    position: absolute
+    top: 0px
+    right: 20px
+  #thought-form
+    @extend .thought-box
+    height: 257px
+  .new-thought-box
+    opacity: 0.0
+    width: 0px
+  #thought-new-remaining-characters
+    float: left
+
+  .positive
+    background: rgba(128, 255, 128, 0.1)
+  .neutral
+  .negative
+    background: rgba(130, 32, 32, 0.2)
+  
+  input
+    color: $color-light-grey
+    background-color: $color-dark-grey
+    border: none
+  #thought-form textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    width: 210px
+    height: 225px
+    overflow: auto
+    resize: none
+  #thought-edit textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    width: 210px
+    height: 95px
+  #thought-edit-overlay
+    height: 100%
+  #thought-edit-overlay form
+    height: 100%
+  #thought-edit-overlay textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    font-size: $size-medium
+    width: 95%
+    height: 85%
+  .thought-add-button
+    float: right
+  .title-entry
+    font-size: $size-big
+    width: 95%
diff --git a/app/assets/stylesheets/main.sass b/app/assets/stylesheets/main.sass
deleted file mode 100644
index 3b2ffc8..0000000
--- a/app/assets/stylesheets/main.sass
+++ /dev/null
@@ -1,232 +0,0 @@
-$color-light-grey: #ebebeb
-$color-dark-grey:  #1b1b1b
-$color-medium-grey: #777
-$color-dim-grey: #222
-
-$color-links: #FF9729
-$color-links-hover: #E3CF57
-
-$size-big:    26px
-$size-medium: 14px
-$size-small:  12px
-
-@font-face
-  font-family: PTMono
-  src: url(/assets/PTM55FT.ttf)
-
-$font-main: PTMono, sans-serif
-
-.size-big
-  font-size: $size-big
-.size-medium
-  font-size: $size-medium
-.size-small
-  font-size: $size-small
-.hidden
-  display: none
-  
-pre
-  font-size: $size-small
-
-body
-  position: relative
-  color: $color-light-grey
-  font-family: $font-main
-  background-color: $color-dark-grey
-  background-image: url('brain-dark.jpg')
-  background-position: top center
-  background-repeat: no-repeat
-  
-a
-  color: $color-links
-  text-decoration: none
-  &:hover
-    color: $color-links-hover
-
-#nav-bar
-  position: relative
-  height: 25px
-  border-bottom: 1px solid
-  #nav-links
-    position: absolute
-    left: 20px
-  #recent-thought-walls
-    border: solid 1px $color-light-grey
-    background-color: $color-dark-grey
-    opacity: 0.0
-    position: absolute
-    left: 20px
-    top: 25px
-    padding: 10px
-    z-index: 10
-
-#content
-  position: absolute
-  left: 20px
-  top: 60px
-  width: 98%
-  height: 300px
-
-#overlay
-  display: none
-  opacity: 0.0
-  position: fixed
-  top: 0px
-  left: 0px
-  width: 100%
-  height: 100%
-  background-color: $color-dark-grey
-#overlay-close
-  background-color: $color-dark-grey
-  border-color: $color-light-grey
-  font-size: $size-big
-  border: 1px solid
-  width: 100%
-  height: 25px
-  text-align: center
-#overlay-content
-  width: 100%
-  height: 100%
-
-.collaboration-div
-  position: absolute
-  width: 30%
-  right: 0px
-.thought-box-overlay-background
-  position: relative
-  background-color: $color-dark-grey
-  width: 100%
-  height: 100%
-.thought-box-overlay
-  height: 100%
-  width: auto
-  overflow-y: auto
-  overflow-x: hidden
-.thought-overlay
-  padding-left: 15px
-  padding-right: 15px
-.thought-box
-  width: 215px
-  height: 125px
-  float: left
-  position: relative
-  border: 1px solid #424242
-  border-radius: 5px
-  margin-top: 5px
-  margin-right: 5px
-.thought
-  overflow: hidden
-  border: none
-  margin-top: -10px
-  font-size: $size-medium
-  word-wrap: break-word
-  padding: 5px 5px 23px 5px
-  height: 83px
-.thought-bottom-section-standard
-  background-color: #000
-  border-bottom-left-radius: 5px
-  border-bottom-right-radius: 5px
-  height: 24px
-  bottom: 0px
-.thought-top-section-overlay
-  background-color: black
-  width: 100%
-  height: 37px
-.thought-controls
-  position: absolute
-  bottom: 3px
-  right: 5px
-.thought-controls-overlay
-  position: absolute
-  top: 5px
-  right: 25px
-.thought-votes-overlay
-  position: relative
-  top: 5px
-  left: 15px
-.thought-votes
-  position: absolute
-  bottom: 3px
-  left: 5px
-.thought-histories-box
-  position: relative
-  z-index: 100
-  margin-top: 5px
-  border: 1px solid #ebebeb
-  border-radius: 5px
-  background-color: black
-  padding: 5px
-.thought-history-entry
-  position: relative
-  border: 1px solid #424242
-  border-radius: 5px
-  margin-bottom: 5px
-.thought-history-text
-  @extend .thought
-  margin-top: 0px
-.thought-history-controls
-  @extend .thought-controls
-.thought-history-bottom-section
-  background-color: #000
-  border-bottom-left-radius: 5px
-  border-bottom-right-radius: 5px
-  height: 24px
-  bottom: 0px
-  
-#thought-wall-form
-  width: 70%
-  position: relative
-#update_thought_wall_spinner
-  display: none
-  position: absolute
-  top: 0px
-  right: 20px
-#thought-form
-  @extend .thought-box
-  height: 257px
-.new-thought-box
-  opacity: 0.0
-  width: 0px
-#thought-new-remaining-characters
-  float: left
-
-.positive
-  background: rgba(128, 255, 128, 0.1)
-.neutral
-.negative
-  background: rgba(130, 32, 32, 0.2)
-  
-input
-  color: $color-light-grey
-  background-color: $color-dark-grey
-  border: none
-#thought-form textarea
-  @extend input
-  background-color: $color-dim-grey
-  font-family: $font-main
-  width: 210px
-  height: 225px
-  overflow: auto
-  resize: none
-#thought-edit textarea
-  @extend input
-  background-color: $color-dim-grey
-  font-family: $font-main
-  width: 210px
-  height: 95px
-#thought-edit-overlay
-  height: 100%
-#thought-edit-overlay form
-  height: 100%
-#thought-edit-overlay textarea
-  @extend input
-  background-color: $color-dim-grey
-  font-family: $font-main
-  font-size: $size-medium
-  width: 95%
-  height: 85%
-.thought-add-button
-  float: right
-.title-entry
-  font-size: $size-big
-  width: 95%
diff --git a/app/assets/stylesheets/paper.sass b/app/assets/stylesheets/paper.sass
new file mode 100644
index 0000000..8003efb
--- /dev/null
+++ b/app/assets/stylesheets/paper.sass
@@ -0,0 +1,207 @@
+@import "variables"
+
+body.paper
+  pre
+    font-size: $size-small
+    
+  position: relative
+  color: $color-light-grey
+  font-family: $font-main
+  background-color: $color-dark-grey
+  background-image: url('brain-dark.jpg')
+  background-position: top center
+  background-repeat: no-repeat
+  
+  a
+    color: $color-links
+    text-decoration: none
+    &:hover
+      color: $color-links-hover
+
+  #nav-bar
+    position: relative
+    height: 25px
+    border-bottom: 1px solid
+    #nav-links
+      position: absolute
+      left: 20px
+    #recent-thought-walls
+      border: solid 1px $color-light-grey
+      background-color: $color-dark-grey
+      opacity: 0.0
+      position: absolute
+      left: 20px
+      top: 25px
+      padding: 10px
+      z-index: 10
+
+  #content
+    position: absolute
+    left: 20px
+    top: 60px
+    width: 98%
+    height: 300px
+
+  #overlay
+    display: none
+    opacity: 0.0
+    position: fixed
+    top: 0px
+    left: 0px
+    width: 100%
+    height: 100%
+    background-color: $color-dark-grey
+  #overlay-close
+    background-color: $color-dark-grey
+    border-color: $color-light-grey
+    font-size: $size-big
+    border: 1px solid
+    width: 100%
+    height: 25px
+    text-align: center
+  #overlay-content
+    width: 100%
+    height: 100%
+
+  .collaboration-div
+    position: absolute
+    width: 30%
+    right: 0px
+  .thought-box-overlay-background
+    position: relative
+    background-color: $color-dark-grey
+    width: 100%
+    height: 100%
+  .thought-box-overlay
+    height: 100%
+    width: auto
+    overflow-y: auto
+    overflow-x: hidden
+  .thought-overlay
+    padding-left: 15px
+    padding-right: 15px
+  .thought-box
+    width: 215px
+    height: 125px
+    float: left
+    position: relative
+    border: 1px solid #424242
+    border-radius: 5px
+    margin-top: 5px
+    margin-right: 5px
+  .thought
+    overflow: hidden
+    border: none
+    margin-top: -10px
+    font-size: $size-medium
+    word-wrap: break-word
+    padding: 5px 5px 23px 5px
+    height: 83px
+  .thought-bottom-section-standard
+    background-color: #000
+    border-bottom-left-radius: 5px
+    border-bottom-right-radius: 5px
+    height: 24px
+    bottom: 0px
+  .thought-top-section-overlay
+    background-color: black
+    width: 100%
+    height: 37px
+  .thought-controls
+    position: absolute
+    bottom: 3px
+    right: 5px
+  .thought-controls-overlay
+    position: absolute
+    top: 5px
+    right: 25px
+  .thought-votes-overlay
+    position: relative
+    top: 5px
+    left: 15px
+  .thought-votes
+    position: absolute
+    bottom: 3px
+    left: 5px
+  .thought-histories-box
+    position: relative
+    z-index: 100
+    margin-top: 5px
+    border: 1px solid #ebebeb
+    border-radius: 5px
+    background-color: black
+    padding: 5px
+  .thought-history-entry
+    position: relative
+    border: 1px solid #424242
+    border-radius: 5px
+    margin-bottom: 5px
+  .thought-history-text
+    @extend .thought
+    margin-top: 0px
+  .thought-history-controls
+    @extend .thought-controls
+  .thought-history-bottom-section
+    background-color: #000
+    border-bottom-left-radius: 5px
+    border-bottom-right-radius: 5px
+    height: 24px
+    bottom: 0px
+  
+  #thought-wall-form
+    width: 70%
+    position: relative
+  #update_thought_wall_spinner
+    display: none
+    position: absolute
+    top: 0px
+    right: 20px
+  #thought-form
+    @extend .thought-box
+    height: 257px
+  .new-thought-box
+    opacity: 0.0
+    width: 0px
+  #thought-new-remaining-characters
+    float: left
+
+  .positive
+    background: rgba(128, 255, 128, 0.1)
+  .neutral
+  .negative
+    background: rgba(130, 32, 32, 0.2)
+  
+  input
+    color: $color-light-grey
+    background-color: $color-dark-grey
+    border: none
+  #thought-form textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    width: 210px
+    height: 225px
+    overflow: auto
+    resize: none
+  #thought-edit textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    width: 210px
+    height: 95px
+  #thought-edit-overlay
+    height: 100%
+  #thought-edit-overlay form
+    height: 100%
+  #thought-edit-overlay textarea
+    @extend input
+    background-color: $color-dim-grey
+    font-family: $font-main
+    font-size: $size-medium
+    width: 95%
+    height: 85%
+  .thought-add-button
+    float: right
+  .title-entry
+    font-size: $size-big
+    width: 95%
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index c4ec325..5268f4f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -7,7 +7,7 @@
   <%= csrf_meta_tags %>
   <%= yield :head %>
 </head>
-<body>
+<body class="paper">
   <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>