adding in more styles

This commit is contained in:
Roy Yang 2012-08-16 00:45:20 -07:00
parent 4b085d9346
commit 84a2622c0b
7 changed files with 429 additions and 81 deletions

4
.gitignore vendored
View file

@ -22,4 +22,6 @@ xcuserdata
media/maintenance.html
media/maintenance.html.unused
config/settings
static.tgz
static.tgz
media/css/circular/.sass-cache/*

View file

@ -67,44 +67,50 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
display: block;
}
/* line 14, ../sass/screen.scss */
/* line 30, ../sass/screen.scss */
body {
background: url('/media/img/circular/background.png') repeat 0 0;
background: #ebedee url('/media/img/circular/background.png') repeat 0 0;
font-family: Helvetica, arial, san-serif;
color: #333333;
}
/* line 20, ../sass/screen.scss */
/* line 36, ../sass/screen.scss */
a {
color: #333333;
text-decoration: none;
}
/* line 25, ../sass/screen.scss */
/* line 41, ../sass/screen.scss */
.NB-page {
width: 700px;
margin: 0 auto;
}
/* line 30, ../sass/screen.scss */
/* line 46, ../sass/screen.scss */
.NB-header {
background: url('/media/img/circular/header_background.png') repeat-x 0 0;
height: 99px;
display: none;
}
/* line 36, ../sass/screen.scss */
/* line 52, ../sass/screen.scss */
.NB-mark {
margin: 20px 0;
margin: 20px 0 50px 0;
}
/* line 40, ../sass/screen.scss */
/* line 56, ../sass/screen.scss */
.NB-story-wrapper {
border-left: 5px solid #fff;
padding: 25px;
padding: 25px 25px 15px;
background: #fff;
position: relative;
/* contains all children */
overflow: hidden;
-webkit-box-shadow: 0px 0px 2px #dcddde;
-moz-box-shadow: 0px 0px 2px #dcddde;
box-shadow: 0px 0px 2px #dcddde;
}
/* line 46, ../sass/screen.scss */
/* line 65, ../sass/screen.scss */
.NB-story-wrapper .NB-story-title a {
font-size: 20px;
font-weight: bold;
@ -112,7 +118,7 @@ a {
text-decoration: none;
color: #333333;
}
/* line 54, ../sass/screen.scss */
/* line 73, ../sass/screen.scss */
.NB-story-wrapper .NB-story-title span {
font-size: 14px;
color: gray;
@ -120,35 +126,202 @@ a {
display: inline-block;
/* to ensure that the author is always on one line */
}
/* line 63, ../sass/screen.scss */
.NB-story {
font-size: 14px;
line-height: 140%;
/* line 81, ../sass/screen.scss */
.NB-story-wrapper .NB-feed {
margin: 2px 0 10px;
text-transform: capitalize;
}
/* line 67, ../sass/screen.scss */
.NB-story p {
margin: 20px 0;
}
/* line 72, ../sass/screen.scss */
.NB-story-shares-container {
background: #000;
}
/* line 76, ../sass/screen.scss */
.NB-feed {
margin: 10px 0;
}
/* line 79, ../sass/screen.scss */
.NB-feed a {
/* line 85, ../sass/screen.scss */
.NB-story-wrapper .NB-feed a {
color: gray;
font-size: 14px;
font-size: 12px;
}
/* line 83, ../sass/screen.scss */
.NB-feed img {
/* line 90, ../sass/screen.scss */
.NB-story-wrapper .NB-feed img {
float: left;
width: 16px;
height: 16px;
margin-right: 4px;
}
/* line 99, ../sass/screen.scss */
.NB-story {
font-size: 14px;
line-height: 140%;
/*
these styles affect all outside content
*/
}
/* line 103, ../sass/screen.scss */
.NB-story .NB-story-content-wrapper {
margin: 10px 0;
max-height: 300px;
padding-bottom: 24px;
overflow: hidden;
}
/* line 115, ../sass/screen.scss */
.NB-story .NB-story-content p {
margin: 10px 0;
}
/* line 119, ../sass/screen.scss */
.NB-story .NB-story-content img {
width: 100% !important;
height: auto !important;
}
/* line 125, ../sass/screen.scss */
.NB-story .NB-story-content-expander {
display: none;
position: absolute;
bottom: 15px;
left: 25px;
width: 100%;
cursor: pointer;
color: #1a9fff;
font-size: 14px;
}
/* line 136, ../sass/screen.scss */
.NB-story .NB-story-content-expander .NB-story-content-expander-text,
.NB-story .NB-story-content-expander .NB-story-content-expander-pages {
display: inline-block;
}
/* line 142, ../sass/screen.scss */
.NB-story-shares-container {
text-align: right;
color: gray;
font-size: 11px;
line-height: 16px;
}
/* line 148, ../sass/screen.scss */
.NB-story-shares-container .NB-story-share-label {
display: inline-block;
vertical-align: top;
margin-top: 3px;
}
/* line 154, ../sass/screen.scss */
.NB-story-shares-container .NB-user-avatar {
display: inline-block;
margin: 2px 0 0 2px;
}
/* line 158, ../sass/screen.scss */
.NB-story-shares-container .NB-user-avatar img {
-webkit-box-shadow: 0px 0px 1px #bdbdbd;
-moz-box-shadow: 0px 0px 1px #bdbdbd;
box-shadow: 0px 0px 1px #bdbdbd;
width: 16px;
height: 16px;
display: block;
}
/* line 167, ../sass/screen.scss */
.NB-story-comments-container {
font-size: 14px;
width: 586px;
margin: 0 auto;
}
/* line 172, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment {
padding: 10px 0 10px 44px;
border-bottom: 1px solid #bdbdbd;
position: relative;
min-height: 32px;
}
/* line 178, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment .NB-user-avatar img {
position: absolute;
width: 32px;
height: 32px;
top: 10px;
left: 0;
-webkit-border-radius: 3px 3px;
-moz-border-radius: 3px / 3px;
border-radius: 3px / 3px;
/* @include single-box-shadow; gets in the way of transparent PNGs */
}
/* line 188, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment .NB-story-comment-username {
float: left;
font-size: 12px;
font-weight: bold;
}
/* line 194, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment .NB-story-comment-date {
float: right;
font-size: 12px;
color: gray;
text-shadow: 0px 1px 1px white;
}
/* line 202, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment .NB-story-comment-reply-button,
.NB-story-comments-container .NB-story-comment .NB-story-comment-edit-button {
display: none;
}
/* line 206, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment .NB-story-comment-content {
padding-top: 4px;
clear: both;
}
/* line 212, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment-input {
width: 376px;
height: 24px;
margin-top: 2px;
border: 1px solid #bdbdbd;
}
/* line 220, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save {
position: absolute;
top: 10px;
right: 0;
width: 120px;
border: 1px solid #bdbdbd;
-webkit-border-radius: 3px 3px;
-moz-border-radius: 3px / 3px;
border-radius: 3px / 3px;
-webkit-box-shadow: inset 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 2px white;
box-shadow: inset 0px 0px 2px white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6));
background-image: -webkit-linear-gradient(#ffffff, #f6f6f6);
background-image: -moz-linear-gradient(#ffffff, #f6f6f6);
background-image: -o-linear-gradient(#ffffff, #f6f6f6);
background-image: linear-gradient(#ffffff, #f6f6f6);
background-color: #000;
color: gray;
height: 20px;
text-transform: capitalize;
line-height: 20px;
text-align: center;
}
/* line 236, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6f6f6), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(#f6f6f6, #ffffff);
background-image: -moz-linear-gradient(#f6f6f6, #ffffff);
background-image: -o-linear-gradient(#f6f6f6, #ffffff);
background-image: linear-gradient(#f6f6f6, #ffffff);
}
/* line 240, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save:active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #e9e9e9));
background-image: -webkit-linear-gradient(#e9e9e9, #e9e9e9);
background-image: -moz-linear-gradient(#e9e9e9, #e9e9e9);
background-image: -o-linear-gradient(#e9e9e9, #e9e9e9);
background-image: linear-gradient(#e9e9e9, #e9e9e9);
-webkit-box-shadow: inset 0px 0px 10px #c1c1c1;
-moz-box-shadow: inset 0px 0px 10px #c1c1c1;
box-shadow: inset 0px 0px 10px #c1c1c1;
color: #333333;
}
/* line 247, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-delete {
display: none;
}
/* line 252, ../sass/screen.scss */
.NB-story-comments-container .NB-story-comments-public-header-wrapper {
color: gray;
font-size: 12px;
border-bottom: 1px solid #bdbdbd;
padding: 3px 0;
}

View file

@ -4,15 +4,31 @@
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
@import "compass/css3";
$page-width: 700px;
$comment-width: 586px;
$text-color: #333333;
$light-text-color: #808080;
$more-text-color: #1a9fff;
$border-color: #bdbdbd;
$title-font-size: 20px;
$small-font-size: 14px;
$smallest-font-size: 12px;
$default-text-shadow-color: white;
$default-text-shadow-blur: 1px;
$default-text-shadow-v-offset: 1px;
$default-box-shadow-color: $border-color;
$default-box-shadow-v-offset: 0px;
$default-box-shadow-blur: 1px;
body {
background: image-url('background.png') repeat 0 0;
background: #ebedee image-url('background.png') repeat 0 0;
font-family: Helvetica, arial, san-serif;
color: $text-color;
}
@ -34,13 +50,16 @@ a {
}
.NB-mark {
margin: 20px 0;
margin: 20px 0 50px 0;
}
.NB-story-wrapper {
border-left: 5px solid #fff;
padding: 25px;
padding: 25px 25px 15px;
background: #fff;
position: relative; /* contains all children */
overflow: hidden;
@include single-box-shadow(#dcddde, 0px, 0px, 2px, false, false);
.NB-story-title {
a {
@ -58,32 +77,183 @@ a {
display: inline-block; /* to ensure that the author is always on one line */
}
}
.NB-feed {
margin: 2px 0 10px;
text-transform: capitalize;
a {
color: $light-text-color;
font-size: $smallest-font-size;
}
img {
float: left;
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}
.NB-story {
font-size: $small-font-size;
line-height: 140%;
p {
margin: 20px 0;
.NB-story-content-wrapper {
margin: 10px 0;
max-height: 300px;
padding-bottom: 24px;
overflow: hidden;
}
/*
these styles affect all outside content
*/
.NB-story-content {
p {
margin: 10px 0;
}
img {
width: 100% !important;
height: auto !important;
}
}
.NB-story-content-expander {
display: none;
position: absolute;
bottom: 15px;
left: 25px;
width: 100%;
cursor: pointer;
color: $more-text-color;
font-size: $small-font-size;
.NB-story-content-expander-text,
.NB-story-content-expander-pages {
display: inline-block;
}
}
}
.NB-story-shares-container {
background: #000;
text-align: right;
color: $light-text-color;
font-size: 11px;
line-height: 16px;
.NB-story-share-label {
display: inline-block;
vertical-align: top;
margin-top: 3px;
}
.NB-user-avatar {
display: inline-block;
margin: 2px 0 0 2px;
img {
@include single-box-shadow;
width: 16px;
height: 16px;
display: block;
}
}
}
.NB-feed {
margin: 10px 0;
.NB-story-comments-container {
font-size: $small-font-size;
width: $comment-width;
margin: 0 auto;
.NB-story-comment {
padding: 10px 0 10px 44px;
border-bottom: 1px solid $border-color;
position: relative;
min-height: 32px;
a {
.NB-user-avatar img {
position: absolute;
width: 32px;
height: 32px;
top: 10px;
left: 0;
@include border-radius(3px, 3px);
/* @include single-box-shadow; gets in the way of transparent PNGs */
}
.NB-story-comment-username {
float: left;
font-size: $smallest-font-size;
font-weight: bold;
}
.NB-story-comment-date {
float: right;
font-size: $smallest-font-size;
color: $light-text-color;
@include single-text-shadow;
}
.NB-story-comment-reply-button,
.NB-story-comment-edit-button {
display: none;
}
.NB-story-comment-content {
padding-top: 4px;
clear: both;
}
}
.NB-story-comment-input {
width: 376px;
height: 24px;
margin-top: 2px;
border: 1px solid $border-color;
}
.NB-story-comment-buttons {
.NB-story-comment-save {
position: absolute;
top: 10px;
right: 0;
width: 120px;
border: 1px solid $border-color;
@include border-radius(3px, 3px);
@include single-box-shadow(white, 0px, 0px, 2px, false, true);
@include background-image(linear-gradient(white, #f6f6f6));
background-color: #000;
color: $light-text-color;
height: 20px;
text-transform: capitalize;
line-height: 20px;
text-align: center;
&:hover {
@include background-image(linear-gradient(#f6f6f6, white));
}
&:active {
@include background-image(linear-gradient(#e9e9e9, #e9e9e9));
@include single-box-shadow(#c1c1c1, 0px, 0px, 10px, false, true);
color: $text-color;
}
}
.NB-story-comment-delete {
display: none;
}
}
.NB-story-comments-public-header-wrapper {
color: $light-text-color;
font-size: $small-font-size;
}
img {
float: left;
width: 16px;
height: 16px;
margin-right: 4px;
font-size: $smallest-font-size;
border-bottom: 1px solid $border-color;
padding: 3px 0;
}
}

View file

@ -3,8 +3,7 @@
<div class="NB-mark">
<div class="NB-divider"></div>
<div class="NB-story-wrapper" style="border-color: #{{ story.feed.favicon_color }}">
<div class="NB-story-wrapper" style="border-color: #{{ story.feed.favicon_color }};">
<div class="NB-story-header-wrapper">
<div class="NB-story-header">
<!--<div class="NB-story-date">

View file

@ -26,6 +26,7 @@
</div>
</div>
<!--
{% if story.comment_count_public %}
<div class="NB-story-comments-public-header-wrapper">
<div class="NB-story-comments-public-header">
@ -37,6 +38,7 @@
{% for comment in story.public_comments %}
{% render_story_comment story comment %}
{% endfor %}
-->
</div>

View file

@ -5,43 +5,45 @@
<div class="NB-story-shares">
<div class="NB-story-comments-shares-teaser-wrapper">
<div class="NB-story-comments-shares-teaser">
{% if story.comment_count %}
<div class="NB-story-comments-label">
<b>{{ story.comment_count }}</b>
{{ story.comment_count|pluralize:"comment,comments" }}
{% if story.reply_count %}
and
<b>{{ story.reply_count }}</b>
{{ story.reply_count|pluralize:"reply,replies" }}
<div class="NB-right">
<div class="NB-story-share-label">
{% if story.comment_count %}
{{ story.comment_count }}
{{ story.comment_count|pluralize:"Comment,Comments" }}
and
{% endif %}
{{ story.share_count }}
{{ story.share_count|pluralize:"Share,Shares" }}
</div>
<div class="NB-story-share-profiles NB-story-share-profiles-comments">
<div class="NB-story-share-profiles-comments-friends">
<!--<div class="NB-story-share-profiles NB-story-share-profiles-shares">
<div class="NB-story-share-profiles-shares-friends">
</div>
<div class="NB-story-share-profiles-shares-public">
</div>
</div>-->
{% if story.comment_count %}
{% render_avatars story.shared_by_friends %}
{% render_avatars story.shared_by_public %}
{% for comment in story.friend_comments %}
{% render_avatars comment.user %}
{% endfor %}
</div>
<div class="NB-story-share-profiles-comments-public">
{% for comment in story.public_comments %}
{% render_avatars comment.user %}
{% endfor %}
<!--<div class="NB-story-share-profiles NB-story-share-profiles-comments">
<div class="NB-story-share-profiles-comments-friends">
</div>
</div>
<div class="NB-story-share-profiles-comments-public">
</div>
</div>-->
{% endif %}
<div class="NB-right">
<div class="NB-story-share-label">
Shared by
<b>{{ story.share_count }}</b>
{{ story.share_count|pluralize:"person,people" }}
</div>
<div class="NB-story-share-profiles NB-story-share-profiles-shares">
<div class="NB-story-share-profiles-shares-friends">
{% render_avatars story.shared_by_friends %}
</div>
<div class="NB-story-share-profiles-shares-public">
{% render_avatars story.shared_by_public %}
</div>
</div>
</div>
</div>
</div>