diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml
index e818657e8..5573fe020 100644
--- a/app/views/aspects/manage.html.haml
+++ b/app/views/aspects/manage.html.haml
@@ -7,7 +7,7 @@
= javascript_include_tag 'aspect-edit.js'
- content_for :left_pane do
- %h1=t('.requests')
+ %h3=t('.requests')
.requests
%ul.dropzone
@@ -19,7 +19,7 @@
= person_image_tag(request.person)
.name
= request.person.real_name
- %h1=t('.ignore_remove')
+ %h3=t('.ignore_remove')
%li.remove
%ul.dropzone
@@ -34,7 +34,7 @@
.aspect_name
%span.edit_name_field
- %h1{:contenteditable => true}= aspect.name
+ %h3{:contenteditable => true}= aspect.name
%span.tip click to edit
%ul.tools
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
index 3e927f723..3d8c551ca 100644
--- a/app/views/comments/_comment.html.haml
+++ b/app/views/comments/_comment.html.haml
@@ -6,6 +6,6 @@
= person_image_tag(post.person)
%span.from
= link_to post.person.real_name, post.person
- = post.text
+ = post.text
%div.time
= "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 99dec9e35..b8de1dd24 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -56,7 +56,7 @@
= render "shared/sub_header"
.container
- .span-5.last
+ .span-4.append-1.last
= yield :left_pane
.span-19.last
diff --git a/app/views/shared/_aspect_friends.haml b/app/views/shared/_aspect_friends.haml
index 03da4ee9b..78dd65a3a 100644
--- a/app/views/shared/_aspect_friends.haml
+++ b/app/views/shared/_aspect_friends.haml
@@ -3,6 +3,34 @@
-# the COPYRIGHT file.
#friend_pictures
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
+ = owner_image_link
= owner_image_link
- for friend in @friends
= person_image_link(friend)
diff --git a/app/views/shared/_sub_header.haml b/app/views/shared/_sub_header.haml
index 227b63d4e..e7dc4e79d 100644
--- a/app/views/shared/_sub_header.haml
+++ b/app/views/shared/_sub_header.haml
@@ -2,10 +2,10 @@
.container
.span-5.last
- if @person
- %h1
+ %h2
= @person.real_name
- else
- %h1
+ %h2
- if @aspect == :all
= link_to t('.all_aspects'), root_path
- elsif @aspect == :public
diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml
index d8c56ff2f..2b2dd1bd0 100644
--- a/app/views/status_messages/_status_message.html.haml
+++ b/app/views/status_messages/_status_message.html.haml
@@ -7,28 +7,27 @@
= person_image_link(post.person)
.content
- %span.from
+ .from
= link_to post.person.real_name, post.person
- = post.message
+ .aspect
+ →
+ - for aspect in current_user.aspects_with_post( post.id )
+ = aspect.name
+
+ - if current_user.owns?(post)
+ .destroy_link
+ = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
+ = render "shared/reshare", :post => post, :current_user => current_user
+
+ = post.message
.info
%span.time= link_to(how_long_ago(post), object_path(post))
- \--
= link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments"
= render "comments/comments", :post => post
- - if current_user.owns?(post)
- .destroy_link
- = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
- = render "shared/reshare", :post => post, :current_user => current_user
- if post.public?
.public_aspect_tag
public
- - else
- .aspect_tag
- %ul
- - for aspect in current_user.aspects_with_post( post.id )
- %li= aspect.name
-
diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml
index 80d426202..397035a80 100644
--- a/app/views/users/edit.html.haml
+++ b/app/views/users/edit.html.haml
@@ -14,7 +14,7 @@
- content_for :publish do
- %h1="#{t('.editing_profile')}"
+ %h2="#{t('.editing_profile')}"
- content_for :left_pane do
%ul#settings_nav
diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js
index 59ba6e331..2d6564e6b 100644
--- a/public/javascripts/aspect-edit.js
+++ b/public/javascripts/aspect-edit.js
@@ -94,7 +94,7 @@ $(function() {
});
- $(".aspect h1").live( 'focus', function() {
+ $(".aspect h3").live( 'focus', function() {
var $this = $(this),
id = $this.closest("li").children("ul").attr("id"),
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 80d0dfe39..a97c3706c 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -11,23 +11,16 @@ body {
margin: 0; }
a {
- color: #556270;
color: #107fc9;
- color: #019dbe;
text-decoration: none; }
a:hover {
- color: white;
- background-color: #556270;
- background-color: #019dbe; }
+ color: #22aae0; }
-h1 {
- font-size: 21px;
- font-weight: bold;
- line-height: 36px; }
+h1, h2, h3, h4 {
+ color: #444444; }
h3 {
- font-size: 18px;
- font-weight: bold; }
+ font-size: 18px; }
.avatar {
width: 50px;
@@ -125,17 +118,15 @@ header {
border-top: 1px solid white;
padding: 20px 0; }
header #aspect_header h1 {
- margin-bottom: 0;
- text-shadow: 0 2px 0 white; }
+ text-shadow: 0 1px 0 white; }
header #aspect_header a {
- color: #111111; }
+ color: #444444; }
header #aspect_header a:hover {
background: none;
color: #999999; }
header #aspect_header .page_title {
text-transform: uppercase;
- text-shadow: 0 2px 0 white;
- margin-top: -5px; }
+ text-shadow: 0 1px 0 white; }
ul#stream {
margin: 0;
@@ -146,7 +137,6 @@ ul#stream {
padding: 12px 0;
border-bottom: 1px solid #eeeeee; }
ul#stream > li:hover {
- background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#fafafa), to(#fcfcfc));
background-color: #fafafa;
border-bottom: 1px solid #dddddd; }
ul#stream > li:hover .destroy_link {
@@ -156,26 +146,41 @@ ul#stream {
li.message {
position: relative;
- line-height: 140%;
- font-family: "Lucida Grande", sans-serif;
- color: #999999; }
+ line-height: 19px;
+ font-family: "Arial", "Helvetica", sans-serif;
+ color: #777777; }
li.message .avatar {
float: left;
margin-right: 15px; }
li.message .delete:hover {
background: #eeeeee; }
li.message .content {
+ margin-top: -4px;
padding-left: 65px;
- width: 600px; }
- li.message .content span.from {
- color: black;
- font-weight: normal;
- font-size: 110%; }
+ color: #444444;
+ font-weight: normal;
+ font-size: 14px; }
+ li.message .content .from {
+ font-family: "Helvetica neue", Arial, Helvetica, sans-serif;
+ text-shadow: 0 1px white; }
+ li.message .content .from .aspect {
+ display: inline;
+ color: #bbbbbb;
+ font-size: 12px; }
+ li.message .content .from a {
+ font-weight: bold; }
li.message .content div.info {
- color: #bababa;
- font-size: 70%; }
- li.message .content div.info .time a {
- color: #666666; }
+ color: #eeeeee;
+ font-size: 11px; }
+ li.message .content div.info a {
+ color: #cccccc; }
+ li.message .content div.info .time {
+ font-weight: bold;
+ margin-right: 5px; }
+ li.message .content div.info .time a {
+ color: #bbbbbb; }
+ li.message:hover div.info a, li.message:hover .time a {
+ color: #107fc9; }
.reshare_pane {
margin-left: 5px;
@@ -261,19 +266,21 @@ ul.comment_set {
margin-top: 1em;
padding: 0;
list-style: none;
- width: 495px; }
+ width: 610px; }
ul.comment_set textarea {
width: 100%; }
ul.comment_set li.comment {
margin-bottom: 0.5em;
background-color: rgba(10, 81, 109, 0.05);
padding: 0.6em;
- border-bottom: 1px solid #dddddd; }
- ul.comment_set li.comment .from {
- font-size: 1em; }
+ border-bottom: 1px solid #dddddd;
+ font-size: 12px;
+ line-height: 17px; }
+ ul.comment_set li.comment .from a {
+ color: #444444; }
ul.comment_set li.comment div.time {
color: #666666;
- font-size: 70%; }
+ font-size: 10px; }
ul.comment_set li.comment form {
margin-top: -5px;
margin-bottom: 0;
@@ -306,18 +313,15 @@ ul.comment_set {
.destroy_link, .request_button {
position: absolute;
- right: 2em;
- bottom: 15px; }
+ right: 0; }
.destroy_link a, .request_button a {
color: #999999;
font-weight: normal; }
.destroy_link a:hover, .request_button a:hover {
- text-decoration: underline;
- background: none; }
+ text-decoration: underline; }
.destroy_link {
- display: none;
- font-size: smaller; }
+ display: none; }
.request_buttons {
position: absolute;
@@ -350,7 +354,7 @@ ul.comment_set {
input[type='text'],
input[type='password'],
textarea {
- font-family: "lucida grande", "lucida sans", "sans-serif";
+ font-family: "Arial", "Helvetica", sans-serif;
font-size: 14px;
padding: 0.3em;
display: block;
@@ -374,11 +378,13 @@ form p {
margin: 0; }
label {
+ font-family: "Arial", "Helvetica", sans-serif;
+ font-weight: normal;
color: #999999;
position: absolute;
top: 3px;
left: 0.48em;
- font-weight: normal; }
+ text-shadow: 0 1px 1px #eeeeee; }
#publisher {
color: #999999;
@@ -506,7 +512,8 @@ h1.big_text {
#aspect_nav {
color: black;
margin-top: 8px;
- margin-bottom: 1px; }
+ margin-bottom: 1px;
+ font-family: "Arial", "Helvetica", sans-serif; }
#aspect_nav #aspect_manage_button {
display: inline; }
#aspect_nav #aspect_manage_button a {
@@ -520,7 +527,7 @@ h1.big_text {
display: inline;
margin-right: 2px; }
#aspect_nav ul > li a {
- text-shadow: 0 2px 0 #444444;
+ text-shadow: 0 1px 0 #444444;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
line-height: 22px;
@@ -535,7 +542,7 @@ h1.big_text {
#aspect_nav ul > li.selected a {
-webkit-box-shadow: 0px -4px 6px -2px #777777;
-moz-box-shadow: 0px -4px 6px -2px #777777;
- text-shadow: 0 2px 0 white;
+ text-shadow: 0 1px 0 white;
padding-top: 4px;
padding-bottom: 5px;
line-height: 18px;
@@ -545,7 +552,7 @@ h1.big_text {
background: -moz-linear-gradient(19% 75% 90deg, #f7f7f7, white);
border: 1px solid white;
border-bottom: 1px solid #f7f7f7;
- color: black; }
+ color: #444444; }
#aspect_nav ul > li.selected a:hover {
background-color: #efefef; }
#aspect_nav ul > li.selected a a {
@@ -574,9 +581,9 @@ h1.big_text {
.requests,
.remove {
list-style: none; }
- .aspect h1,
- .requests h1,
- .remove h1 {
+ .aspect h3,
+ .requests h3,
+ .remove h3 {
display: inline-block; }
.aspect .tip,
.requests .tip,
@@ -596,7 +603,7 @@ h1.big_text {
.requests .aspect_name ul.tools,
.remove .aspect_name ul.tools {
position: absolute;
- top: 10px;
+ top: 5px;
right: 0;
display: inline;
padding: 0;
@@ -616,7 +623,7 @@ h1.big_text {
.remove .grey {
color: #999999;
cursor: default;
- text-shadow: 0 2px white; }
+ text-shadow: 0 1px white; }
.aspect ul.dropzone,
.requests ul.dropzone,
.remove ul.dropzone {
@@ -678,10 +685,11 @@ ul#settings_nav {
marign: 0;
font-size: larger; }
ul#settings_nav > li a {
+ font-size: smaller;
display: block;
height: 100%;
border-bottom: 1px solid #eeeeee;
- padding: 5px 0; }
+ padding: 2px; }
.settings_pane {
display: none; }
@@ -735,7 +743,9 @@ ul#settings_nav {
#friend_pictures {
line-height: 1em; }
#friend_pictures img {
- margin-right: -1px; }
+ margin-right: -1px;
+ width: 35px;
+ height: 35px; }
#thumbnails {
line-height: 14px; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index e50888c9d..139e723a8 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -15,28 +15,18 @@ body
:padding 2em
:margin 0
a
- :color #556270
:color #107FC9
- :color #019DBE
:text
:decoration none
&:hover
- :color #fff
- :background
- :color #556270
- :color #019DBE
+ :color #22AAE0
-h1
- :font
- :size 21px
- :weight bold
- :line
- :height 36px
+h1, h2, h3, h4
+ :color #444
h3
:font
:size 18px
- :weight bold
.avatar
:width 50px
@@ -158,12 +148,10 @@ header
:padding 20px 0
h1
- :margin
- :bottom 0
- :text-shadow 0 2px 0 #fff
+ :text-shadow 0 1px 0 #fff
a
- :color #111
+ :color #444
&:hover
:background none
:color #999
@@ -171,9 +159,7 @@ header
.page_title
:text
:transform uppercase
- :shadow 0 2px 0 #fff
- :margin
- :top -5px
+ :shadow 0 1px 0 #fff
ul#stream
@@ -187,14 +173,10 @@ ul#stream
:bottom 1px solid #eee
&:hover
- :background -webkit-gradient(linear, 0% 0%, 0% 50%, from(#FAFAFA), to(#FCFCFC))
-
:background
:color #fafafa
-
:border
:bottom 1px solid #ddd
-
.destroy_link
:display inline
@@ -203,10 +185,10 @@ ul#stream
li.message
:position relative
- :line-height 140%
+ :line-height 19px
:font
- :family 'Lucida Grande', sans-serif
- :color #999
+ :family 'Arial', 'Helvetica', sans-serif
+ :color #777
.avatar
:float left
@@ -217,24 +199,49 @@ li.message
:background #eee
.content
+ :margin
+ :top -4px
:padding
:left 65px
- :width 600px
- span.from
- :color #000
+ .from
:font
- :weight normal
- :font
- :size 110%
+ :family 'Helvetica neue', Arial, Helvetica, sans-serif
+ :text
+ :shadow 0 1px #fff
+
+ .aspect
+ :display inline
+ :color #bbb
+ :font
+ :size 12px
+
+ a
+ :font
+ :weight bold
+
+ :color #444
+ :font
+ :weight normal
+ :size 14px
div.info
- :color #bababa
- :font-size 70%
-
+ :color #eee
+ :font-size 11px
+ a
+ :color #ccc
.time
a
- :color #666
+ :color #bbb
+ :font
+ :weight bold
+ :margin
+ :right 5px
+
+ &:hover
+ div.info, .time
+ a
+ :color #107FC9
.reshare_pane
:margin
@@ -354,7 +361,7 @@ ul.comment_set
:top 1em
:padding 0
:list-style none
- :width 495px
+ :width 610px
textarea
:width 100%
@@ -369,12 +376,17 @@ ul.comment_set
:bottom 1px solid #ddd
.from
- :font
- :size 1em
+ a
+ :color #444
+ :font
+ :size 12px
+
+ :line
+ :height 17px
div.time
:color #666
- :font-size 70%
+ :font-size 10px
form
:margin
@@ -418,8 +430,7 @@ ul.comment_set
.destroy_link, .request_button
:position absolute
- :right 2em
- :bottom 15px
+ :right 0
a
:color #999
:font
@@ -427,11 +438,9 @@ ul.comment_set
&:hover
:text
:decoration underline
- :background none
.destroy_link
:display none
- :font-size smaller
.request_buttons
:position absolute
@@ -471,7 +480,7 @@ input[type='text'],
input[type='password'],
textarea
:font
- :family 'lucida grande', 'lucida sans', 'sans-serif'
+ :family 'Arial', 'Helvetica', sans-serif
:size 14px
:padding 0.3em
:display block
@@ -499,12 +508,15 @@ form p
:margin 0
label
+ :font
+ :family 'Arial', 'Helvetica', sans-serif
+ :weight normal
:color #999
:position absolute
:top 3px
:left 0.48em
- :font
- :weight normal
+ :text
+ :shadow 0 1px 1px #eee
#publisher
:color #999
@@ -676,6 +688,9 @@ h1.big_text
:top 8px
:bottom 1px
+ :font
+ :family 'Arial', 'Helvetica', sans-serif
+
#aspect_manage_button
:display inline
@@ -697,7 +712,7 @@ h1.big_text
:right 2px
a
- :text-shadow 0 2px 0 #444
+ :text-shadow 0 1px 0 #444
:-webkit-border-radius 3px 3px 0 0
:-moz-border-radius 3px 3px 0 0
:line
@@ -720,7 +735,7 @@ h1.big_text
:-webkit-box-shadow 0px -4px 6px -2px #777
:-moz-box-shadow 0px -4px 6px -2px #777
- :text-shadow 0 2px 0 #fff
+ :text-shadow 0 1px 0 #fff
:padding
:top 4px
:bottom 5px
@@ -736,7 +751,7 @@ h1.big_text
:border 1px solid #fff
:bottom 1px solid #F7F7F7
- :color #000
+ :color #444
&:hover
:background
:color #efefef
@@ -776,7 +791,7 @@ h1.big_text
:list
:style none
- h1
+ h3
:display inline-block
.tip
@@ -795,7 +810,7 @@ h1.big_text
ul.tools
:position absolute
- :top 10px
+ :top 5px
:right 0
:display inline
:padding 0
@@ -814,7 +829,7 @@ h1.big_text
.grey
:color #999
:cursor default
- :text-shadow 0 2px #fff
+ :text-shadow 0 1px #fff
ul.dropzone
:min-height 20px
@@ -868,13 +883,14 @@ ul#settings_nav
:size larger
> li
-
a
+ :font
+ :size smaller
:display block
:height 100%
:border
:bottom 1px solid #eee
- :padding 5px 0
+ :padding 2px
.settings_pane
@@ -954,6 +970,8 @@ ul#settings_nav
:line-height 1em
img
:margin-right -1px
+ :width 35px
+ :height 35px
#thumbnails
:line-height 14px