2 files changed, 298 insertions, 4 deletions
diff --git a/client/components/main/editor.jade b/client/components/main/editor.jade
index c910b052..f10d64a1 100644
--- a/client/components/main/editor.jade
+++ b/client/components/main/editor.jade
@@ -7,7 +7,8 @@ template(name="editor")
     +Template.contentBlock
 
 template(name="viewer")
-  +mentions
-    +emoji
-      +markdown
-        {{> UI.contentBlock }}
+  .viewer
+    +mentions
+      +emoji
+        +markdown
+          {{> UI.contentBlock }}
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
new file mode 100644
index 00000000..105709cf
--- /dev/null
+++ b/client/components/main/layouts.styl
@@ -0,0 +1,293 @@
+@import 'nib'
+
+global-reset()
+
+html, body, input, select, textarea, button
+  font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif
+  line-height: 18px
+  color: #4d4d4d
+
+html
+  font-size: 100%
+  max-height: 100%
+  -webkit-text-size-adjust: 100%
+
+body
+  background: darken(white, 13%)
+  margin: 0
+  position: relative
+  z-index: 0
+  overflow-y: auto
+
+#surface
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+  overflow: hidden
+
+#content
+  position: relative
+  flex: 1
+
+div::selection
+  background: transparent
+
+h1
+  font-size: 22px
+  line-height: 1.2em
+  margin: 0 0 10px
+
+h2
+  font-size: 18px
+  line-height: 1.2em
+  margin: 0 0 9px
+
+h3, h4, h5, h6
+  font-size: 16px
+  line-height: 1.25em
+  margin: 0 0 6px
+
+.quiet, .quiet a
+  color: #8c8c8c
+
+.error, .error a
+  color: #eb3800
+
+.no-items-message
+  color: darken(white, 60%)
+  margin: 30px 0
+  text-align: center
+
+.warning
+  background: #f0ecdb
+  border-radius: 3px
+  color: #aa8f09
+  padding: 6px 8px
+
+  a
+    color: #aa8f09
+
+a
+  color: inherit
+  cursor: pointer
+  text-decoration: none
+
+  &.is-disabled,
+  &.is-disabled:hover
+    cursor: default
+    text-decoration: none
+
+strong
+  font-weight: bold
+
+p
+  a
+    text-decoration: underline
+
+table, p
+  margin-bottom: 8px
+
+pre
+  margin: 15px 0
+  white-space: pre
+  max-height: 516px
+
+pre,
+code,
+tt
+  font-family: lucida console, monospace
+  line-height: 1.25em
+
+blockquote
+  margin: 8px 0 8px 8px
+  border-left: 1px solid #ccc
+  color: #666
+  padding: 0 0 0 8px
+
+hr
+  height: 1px
+  border: 0
+  border: none
+  width: 100%
+  background: #dbdbdb
+  color: #dbdbdb
+  margin: 15px 0
+  padding: 0
+
+table, td, th
+  vertical-align: top
+  border-top: 1px solid #ccc
+  border-left: 1px solid #ccc
+
+td, th
+  padding: 5px
+  border-right: 1px solid #ccc
+  border-bottom: 1px solid #ccc
+
+th
+  font-weight: 700
+
+thead
+  background: #fff
+  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
+
+tbody
+  background-color: #fff
+
+dl, dt
+  margin-bottom: 8px
+
+dd
+  margin: 0 0 16px 24px
+
+.clear
+  clear: both
+
+.clearfix
+  clearfix()
+
+.hide
+  display: none
+
+.show
+  display: block
+
+.bold
+  font-weight: 700
+
+.center
+  text-align: center
+
+.left
+  float: left
+
+.right
+  float: right
+
+.first
+  margin-left: 0
+  padding-left: 0
+
+.last
+  margin-right: 0
+  padding-right: 0
+
+.top
+  margin-top: 0
+  padding-top: 0
+
+.bottom
+  margin-bottom: 0
+  padding-bottom: 0
+
+.relative
+  position: relative
+
+.block
+  display: block
+
+.inline
+  display: inline
+
+.inline-block
+  display: inline-block
+
+.pointer
+  cursor: pointer
+
+.ellip
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+.underline
+  text-decoration: underline
+
+.lowercase
+  text-transform: lowercase
+
+.invisible
+  visibility: hidden
+
+.wrapword
+  word-wrap: break-word
+
+.grab
+  cursor: grab
+
+.grabbing
+  cursor: grabbing
+
+.emoji
+  height: 18px
+  width: 18px
+  vertical-align: text-bottom
+
+// Implement a thiner close icon as suggested in
+// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
+.fa.fa-times-thin:before
+  content: '\00d7';
+
+.fa.fa-globe.colorful
+  color: #4caf50
+
+.fa.fa-lock.colorful
+  color: #f44336
+
+.pop-over .pop-over-list li a:hover
+  .fa, .fa.colorful
+    color: white
+
+    &:hover
+      color: white
+
+a
+  &.fa, i.fa
+    color: darken(white, 35%)
+
+  &:hover, &.is-active
+    &.fa, i.fa
+      color: darken(white, 60%)
+
+.ui-draggable-dragging
+  z-index: 200
+
+.atMention
+  background: #dbdbdb
+  border-radius: 3px
+  padding: 1px 4px
+  margin: -1px 0
+  display: inline-block
+
+  &.me
+    background: #cfdfe8
+
+.big-message
+  display: block
+  margin: 75px auto
+  text-align: center
+  max-width: 600px
+
+  h1
+    font-size: 26px
+    margin-bottom: 24px
+
+  p
+    font-size: 18px
+    line-height: 22px
+
+.gutter
+  margin-left: 38px
+
+.viewer
+  ul
+    list-style-type: initial
+    padding-left: 20px
+
+@keyframes fadeIn
+  from
+    opacity: 0
+
+@keyframes flexGrowIn
+  from
+    flex-basis: 0