diff --git a/app/assets/stylesheets/base.sass b/app/assets/stylesheets/base.sass
index 490dafe0c..9f084cd30 100644
--- a/app/assets/stylesheets/base.sass
+++ b/app/assets/stylesheets/base.sass
@@ -6,8 +6,9 @@ html
body
color: $text-color
- font-family: "Helvetica Neue",Arial,Helvetica,sans-serif
+ font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif
font-size: 16px
+ font-weight: 400
line-height: 1.5em
margin: 0
min-height: 100%
diff --git a/app/assets/stylesheets/screen.sass b/app/assets/stylesheets/screen.sass
index 5421cc690..901a26674 100644
--- a/app/assets/stylesheets/screen.sass
+++ b/app/assets/stylesheets/screen.sass
@@ -29,3 +29,16 @@
.modal
display: none
+
+// TODO: Move this to it's right place after finished prototyping
+.row
+ display: flex
+ margin: 0 -0.5rem
+
+ @include small
+ flex-direction: column
+
+ > .column
+ flex: 1 1 auto
+ padding: 0 0.5rem
+ width: 100%
diff --git a/app/views/shared/_comment_form.haml b/app/views/shared/_comment_form.haml
index 96214dbb8..af906abdd 100644
--- a/app/views/shared/_comment_form.haml
+++ b/app/views/shared/_comment_form.haml
@@ -8,4 +8,4 @@
= form.hidden_field :in_reply_to_id
= form.text_area :body, :placeholder => "type your comment here"
- %button Post Comment
+ %button.cta ✏️️ Post Comment
diff --git a/app/views/shared/_comments.haml b/app/views/shared/_comments.haml
index ed564b224..a44a2ce07 100644
--- a/app/views/shared/_comments.haml
+++ b/app/views/shared/_comments.haml
@@ -1,5 +1,4 @@
%comments
- %h2 Comments
- if current_user
= render :partial => "shared/comment_form", :locals => {:commentable => commentable}
- commentable.comments.each do |comment|
diff --git a/app/views/shared/_head.haml b/app/views/shared/_head.haml
index 3d03e0c13..480bdd3ed 100644
--- a/app/views/shared/_head.haml
+++ b/app/views/shared/_head.haml
@@ -13,3 +13,4 @@
= stylesheet_link_tag 'screen', :media => 'screen, projection'
+
diff --git a/app/views/sprites/show.haml b/app/views/sprites/show.haml
index e9aeeada5..8229cbf36 100644
--- a/app/views/sprites/show.haml
+++ b/app/views/sprites/show.haml
@@ -1,20 +1,28 @@
-%section.derivation
- = render :partial => sprite, :locals => {link_path: load_sprite_path(sprite)}
-
- %sprites
- - sprite.parents.each do |parent|
- = render partial: parent
-
-%tags
- - sprite.tag_list.each do |tag|
- = tag_link(tag)
- - sprite.source_list.each do |source|
- = tag_link(source)
- - sprite.dimension_list.each do |dimension|
- = tag_link(dimension)
- = form_tag add_tag_sprite_path do
- = text_field_tag :tag, nil, :placeholder => "Tag name"
- %button(type='submit') Add Tag
+%header
+ %h1= sprite.title
+
+%section.row
+ .column
+ %section
+ %card
+ .outline
+ = link_to image_tag(sprite.image_url, :alt => sprite.display_name), load_sprite_path(sprite)
+
+ .description= markdown sprite.description
+
+ %tags
+ - sprite.tag_list.each do |tag|
+ = tag_link(tag)
+ - sprite.source_list.each do |source|
+ = tag_link(source)
+ - sprite.dimension_list.each do |dimension|
+ = tag_link(dimension)
+ = form_tag add_tag_sprite_path do
+ = text_field_tag :tag, nil, :placeholder => "Tag name"
+ %button(type='submit') Add Tag
+
+ .column
+ = display_comments sprite
%actions
- if current_user
@@ -43,4 +51,3 @@
%sprites
= render :partial => sprite.children.limit(20)
-= display_comments sprite