From 8aaae63b0553bd3f79b6df59e9b417ff6045c173 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Tue, 5 Mar 2013 10:39:15 -0800 Subject: [PATCH] Restyling story title, author, date, and tags on ios. --- media/css/reader.css | 20 +- media/ios/Classes/StoryDetailViewController.m | 10 +- media/ios/Resources/storyDetailView.css | 593 ------------------ media/ios/Resources/storyDetailView.js | 95 --- media/ios/static/sample_text.html | 2 +- media/ios/static/storyDetailView.css | 110 ++-- 6 files changed, 71 insertions(+), 759 deletions(-) delete mode 100644 media/ios/Resources/storyDetailView.css delete mode 100644 media/ios/Resources/storyDetailView.js diff --git a/media/css/reader.css b/media/css/reader.css index 63c64d824..9e1c6fc19 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -2168,29 +2168,31 @@ background: transparent; .NB-feed-story .NB-feed-story-tags { margin: 9px 0 6px; - overflow: hidden; line-height: 12px; - height: 14px; + height: 16px; } .NB-feed-story .NB-feed-story-tags .NB-middot { color: #A0A0A0; font-size: 10px; - padding-right: 4px; + padding-right: 8px; float: left; font-weight: normal; } .NB-feed-story .NB-feed-story-tag { /* Grey */ float: left; + cursor: pointer; font-weight: normal; font-size: 9px; - padding: 0px 4px 1px; - margin: 0 2px 2px; - background-color: #D8DEE2; - color: #9D9A95; - text-shadow: 0 1px 0 rgba(255, 255, 255, .5); border-radius: 4px; - cursor: pointer; + + padding: 1px 5px; + margin: -2px 4px 4px 0; + background-color: rgba(0, 0, 0, .1); + color: #959B8B; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + border: 1px solid transparent; + border-color: rgba(255, 255, 255, .3) transparent rgba(0, 0, 0, .1); } .NB-feed-story .NB-feed-story-tag:first-child { margin-left: 0; diff --git a/media/ios/Classes/StoryDetailViewController.m b/media/ios/Classes/StoryDetailViewController.m index 6a614a2b2..637631604 100644 --- a/media/ios/Classes/StoryDetailViewController.m +++ b/media/ios/Classes/StoryDetailViewController.m @@ -206,7 +206,7 @@ footerString ]; -// NSLog(@"\n\n\n\nhtmlString:\n\n\n%@\n\n\n", htmlString); + NSLog(@"\n\n\n\nhtmlString:\n\n\n%@\n\n\n", htmlString); NSString *path = [[NSBundle mainBundle] bundlePath]; NSURL *baseURL = [NSURL fileURLWithPath:path]; @@ -282,7 +282,7 @@ int authorScore = [[[[appDelegate.activeClassifiers objectForKey:feedId] objectForKey:@"authors"] objectForKey:author] intValue]; - storyAuthor = [NSString stringWithFormat:@"·
%@", author, authorScore > 0 ? @"NB-story-author-positive" : authorScore < 0 ? @"NB-story-author-negative" : @"", @@ -329,15 +329,13 @@ NSString *storyHeader = [NSString stringWithFormat:@ "
" - "
%@
" "
%@
" + "
%@
" "%@" "%@" "
", - [storyTags length] ? - [self.activeStory objectForKey:@"long_parsed_date"] : - [self.activeStory objectForKey:@"short_parsed_date"], storyTitle, + [self.activeStory objectForKey:@"long_parsed_date"], storyAuthor, storyTags]; return storyHeader; diff --git a/media/ios/Resources/storyDetailView.css b/media/ios/Resources/storyDetailView.css deleted file mode 100644 index 94ab09d66..000000000 --- a/media/ios/Resources/storyDetailView.css +++ /dev/null @@ -1,593 +0,0 @@ -/** - * Font Size Style - */ - -.NB-story { - line-height: 1.5em; -} -.NB-extra-small .NB-story, -.NB-extra-small .NB-story-comment { - font-size: 12px; -} - -.NB-small .NB-story, -.NB-small .NB-story-comment { - font-size: 13px; -} - -.NB-medium .NB-story, -.NB-medium .NB-story-comment { - font-size: 14px; -} - -.NB-large .NB-story, -.NB-large .NB-story-comment { - font-size: 15px; -} - -.NB-extra-large .NB-story, -.NB-extra-large .NB-story-comment { - font-size: 17px; -} - -.NB-san-serif { - font-family: Helvetica; -} - -.NB-serif { - font-family: georgia; -} - -/** - * iPad Wide Style - */ - -.NB-ipad-wide .NB-header { - padding: 15px 0 5px; -} - -.NB-ipad-wide .NB-header .NB-header-inner { - margin: 0px 90px; -} - -.NB-ipad-wide .NB-story { - margin: 30px 90px; -} - -.NB-ipad-wide .NB-share-inner-wrapper { - margin: 0 90px; -} - -.NB-ipad-wide#story_pane .nb-story-comments-public-teaser, -.NB-ipad-wide#story_pane .nb-story-comments-public-header, -.NB-ipad-wide#story_pane .NB-story-comments-shares-teaser { - padding-left: 90px; - padding-right: 90px; -} - -.NB-ipad-wide#story_pane .nb-story-comment { - padding: 0 90px 2px 150px; -} - -.NB-ipad-wide#story_pane .nb-story-comment .nb-user-avatar { - left: 88px; -} -.NB-ipad-wide#story_pane .nb-story-comment .nb-story-comment-reshares .nb-user-avatar { - left: 108px; -} - -/** - * iPad Narrow Style - */ - -.NB-ipad-narrow .NB-header { - padding: 15px 30px 5px; -} - -.NB-ipad-narrow .NB-story { - margin: 25px 30px; -} - -.NB-ipad-narrow .NB-share-inner-wrapper { - margin: 0 30px; -} - -.NB-ipad-narrow#story_pane .nb-story-comments-public-teaser, -.NB-ipad-narrow#story_pane .nb-story-comments-public-header, -.NB-ipad-narrow#story_pane .NB-story-comments-shares-teaser { - padding-left: 30px; - padding-right: 30px; -} - -.NB-ipad-narrow#story_pane .nb-story-comment { - padding: 0 30px 2px 90px; -} -.NB-ipad-narrow#story_pane .NB-story-comment .NB-user-avatar { - left: 26px; -} -.NB-ipad-narrow#story_pane .nb-story-comment .nb-story-comment-reshares .nb-user-avatar { - left: 45px; -} - -.NB-ipad-narrow#story_pane .NB-story-comment .NB-user-avatar.NB-story-comment-reshare { - left: 26px; -} - -/** - * iPhone Style - */ - -.NB-iphone .NB-header { - padding: 12px 12px 5px; -} - -.NB-iphone .NB-story { - margin: 12px 12px; -} - -.NB-iphone .NB-share-inner-wrapper { - margin: 0 12px; -} -/* -.NB-iphone .NB-story img { - max-width: 290px !important; -} - - -/** - * Universal Style - */ - -body { - text-rendering: optimizeLegibility; - margin: 0; - - -webkit-text-size-adjust: none; - font-size: 14px; - line-height: 120%; - overflow: hidden; - font-family: Helvetica; -} - -body.NB-iphone { - line-height: 110%; -} - -.NB-story-author { - color: #969696; - text-decoration: none; - text-transform: uppercase; - margin: 4px 8px 0px 0; - margin-bottom: 8px; - text-shadow: 0 1px 0 #F9F9F9; - float: left; - position: relative; -} -.NB-story-author-positive { - color: #58A353; - text-shadow: 0 1px 0 #E9F6E9; -} -.NB-story-author-negative { - color: #B85044; - text-shadow: 0 1px 0 #F6E9E9; -} -.NB-story-tags { - overflow: hidden; - padding: 5px 2px 2px 2px; - margin-bottom: 8px; - text-transform: uppercase; -} - -.NB-story-tag { - float: left; - text-decoration: none; - font-weight: normal; - padding: 0px 4px 0px; - margin: 0px 4px 4px 0; - background-color: #C9CBC6; - color: #505050; - text-shadow: 0 1px 0 #E0E8DB; - -webkit-border-radius: 4px; - position: relative; -} -.NB-story-tag-positive { - background-color: #88B383; - color: white; - text-shadow: 0 1px 0 #588353; -} -.NB-story-tag-negative { - background-color: #C89094; - color: white; - text-shadow: 0 1px 0 #986064; -} -.NB-story-tag .NB-highlight, -.NB-story-author .NB-highlight, -.NB-show-profile .NB-highlight { - position: absolute; - top: -2px; - left: -2px; - bottom: -2px; - right: -2px; - background-color: #000; - opacity: .25; - border-radius: 4px; - display: none; -} -.NB-story-tag.pressed .NB-highlight, -.NB-story-author.pressed .NB-highlight, -.pressed .NB-show-profile .NB-highlight, -.NB-show-profile.pressed .NB-highlight { - display: block; - -} - -.NB-story-date { - color: #454D6C; -} - -.NB-story-author { - font-size: 10px; - line-height: 12px -} - -.NB-story-tags { - line-height: 12px; - height: 12px; -} - -.NB-story-tag { - font-size: 9px; -} - -.NB-story-date { - font-size: 11px; - line-height: 13px; -} - -.NB-story h1, -.NB-story h2, -.NB-story h3, -.NB-story h4, -.NB-story h5, -.NB-story h6, -.NB-story div, -.NB-story table, -.NB-story span, -.NB-story pre, -.NB-story code { - overflow: auto; - clear: both; - white-space: normal; -} - -.NB-story h1, -.NB-story h2, -.NB-story h3, -.NB-story h4, -.NB-story h5, -.NB-story h6 { - line-height: 140%; -} - -.NB-iphone .NB-story h1, -.NB-iphone .NB-story h2, -.NB-iphone .NB-story h3, -.NB-iphone .NB-story h4, -.NB-iphone .NB-story h5, -.NB-iphone .NB-story h6 { - line-height: 120%; - font-size: 1.1em; -} - - -a { - text-decoration: none; -} - -.NB-story blockquote { - background-color: #F0F0F0; - border-left: 1px solid #9B9B9B; - padding: 10px 20px; - margin: 20px 0; -} - -div + p { - margin: 20px 0px 20px 0; -} - -.NB-story p { - margin: 0px 0px 20px 0; - clear: both; -} - -.NB-story small { - font-size: 11px; -} - -.NB-header { - font-size: 22px; - line-height: 1.2em; - font-weight: 600; - background-color: #E0E0E0; - border-bottom: 1px solid #A0A0A0; - text-shadow: 1px 1px 0 #EFEFEF; - overflow: hidden; - max-width: none; -} - -.NB-iphone .NB-header { - font-size: 14px; -} - -.NB-story { - overflow: hidden; -} - -.NB-story a.NB-contains-image { - display: block; -} - -.NB-story div { - max-width: 100% !important; -} -.NB-story img { - margin: 20px auto; - height: auto !important; - width: auto; - max-width: 100% !important; - display: none; -} - -.NB-story img.NB-large-image, -.NB-story img.NB-medium-image { - margin: 20px auto !important; - display: block !important; - width: auto; - height: auto; - display: block; - float: none; - clear: both; -} - -.NB-story img.NB-small-image { - display: inline-block; - margin: 2px; -} - -.NB-feed-story-comments { - clear: both; -} - -.NB-story-title { - clear: left; - margin: 8px 0 4px; -} - -.NB-story-title-positive { - color: #58A353; - text-shadow: 0 1px 0 #E9F6E9; -} -.NB-story-title-negative { - color: #B85044; - text-shadow: 0 1px 0 #F6E9E9; -} -ins { - text-decoration: none; -} - -del { - display: none; -} - -/* Comments */ - -.NB-feed-story-comments { - margin: 0 !important; - clear: both !important; - max-width: none !important; -} - -#story_pane .NB-story-comments-shares-teaser.NB-highlighted { - -webkit-transition: background-color .6s linear; - background-color: #FBE5C7; -} - -#story_pane .NB-story-comments-shares-teaser { - -webkit-transition: background-color .6s linear; -} - -#story_pane .NB-story-comment-reply.NB-highlighted { - background-color: #FBE5C7; -} - -#story_pane .NB-story-comment.NB-highlighted { - -webkit-transition: background-color .6s linear; - background-color: #FBE5C7; -} - -#story_pane .NB-story-comment-reply, -#story_pane .NB-story-comment { - -webkit-transition: background-color .6s linear; -} -#story_pane .NB-story-comment-reply .NB-show-profile { - float: left; - left: -42px; -} -.NB-story-comment:last-child { - border-bottom: 1px solid #A6A6A6; -} - -#story_pane .NB-story-comment .NB-story-comment-content { - float: none; -} - -.nb-story-comments-label { - float: left; - margin-right: 2px; - margin-top: 6px; -} - -.nb-story-share-label { - float: right; - margin-top: 6px; - margin-left: 2px; -} - -/* Sharing */ - -.NB-share-wrapper { - margin-top: 36px; -} - -a.NB-show-profile { - margin: 0 0 0 2px; - position: relative; - display: inline-block; -} - -/* Disable certain interactions on touch devices */ -.NB-button, -a.NB-show-profile { - -webkit-text-size-adjust: none; - -webkit-user-select: none; - -webkit-highlight: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -.NB-header, -#NB-share-bar-wrapper { - -webkit-user-select: none; - -webkit-highlight: none; - -webkit-touch-callout: none; -} - -.NB-button.NB-share-button { - line-height: 20px; - font-family: Helvetica, sans-serif; - font-size: 14px; - color: #606060; - float: none; - display: block; - text-shadow: - 0px 0px 0px rgba(000,000,000,0), - 0px 1px 0px rgba(255,255,255,1); -} - -.NB-button.NB-share-button a { - display: block; -} - -.NB-share-button.active, -.NB-save-button.active { - background: #217412; - box-shadow: none; -} - -/* Edit, Like, and Reply buttons */ - -.NB-button { - padding: 0px 0px 4px 4px; - cursor: pointer; - white-space: nowrap; - float: right; -} - -.NB-button.NB-share-button { - float: none; - padding: 0px 0px 20px 0px; - margin-bottom: 0; - display: block; -} - -.NB-button div { - padding: 2px 6px; - background: -webkit-gradient( - linear, left top, left bottom, - from(#F0F0F0), - color-stop(0.50, #EBEBEB), - color-stop(0.50, #E4E4E4), - to(#C0C0C0)); - - border-radius: 3px; - border: 1px solid #949494; - box-shadow: inset 0px 1px 0px rgba(255,255,255,1); -} - -.NB-iphone .NB-button div { - padding: 0px 5px 0px; -} - -.NB-iphone #story_pane .NB-story-comment .NB-story-comment-content { - padding-bottom: 0px; -} - -.NB-button.NB-share-button div { - padding: 8px 0px 8px; - border-radius: 5px; - text-align: center; - background: -webkit-gradient( - linear, left top, left bottom, - from(#42aaff), - to(#1e78c1)); - box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .6); - text-shadow: 0 1px 0 #003366; -} - -.NB-button.NB-share-button div span { - background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACGUlEQVR42o2TTUsbYRSFZ+MvcNn/0EU1rSCCgkSxVRCLFgyiqFSE1tDSpNKoEaQJiAvBryDZGCVQKWIpWIeAFMHWL1qKjUJ3KRQSNUgSJzPR5PieMRMqjuLibAaec+577xkJwJ30p0jqEloXiglpQlmh3F3AaaEogWhnMw6dPTgafIljtx3i262gTSgSKbuPQ8dzxEfsSEw6kHBV4NRThrOVAaSd0o2wX0iJdj9D3PMaJ/1WKF4LtMlHyExf6jw0CO2dZAovCmWOBl4gMeFAyv0AmTyoLVRCXa1H+nsLtMgUktslpsmZ46E+JGedUMcsl2CwCumvTVD22qAcdOjS/vmQ3LVce7PCZMLa+EMdVj/XQflp06G/ezZ8/NYAV6gKUz+GcM8vXTGI8M0c20hW5QYo4XacCnhxox5dK+Wo+1SKmuUSeHdcKJ6VrpwqF3//Cqnh0kIy4djvNoyuVeNJHmwNONDrCyIg/8LjN0sFgyhPlfK/5cL4Zo7NZB2uFWDjh6fonQliXg5jQd7H3JcwDQoNy/LOPBXT9YXlx2YyYXcgpIPe+S10emTCqtAmDdbZMJaEd+apuG0ujG/m2EwmbB9fM0CrsTsaxFhPNozpvDPTuW0ujG/m2EwmbID/G2jsNutJA5aEBjyVnu7T042xrWYGWf4Y7DbryYaxJLwzT8Vtc2FGuplBTog/BrvNerJhLAnvTNDQppnBBZHZrv4ITeFuAAAAAElFTkSuQmCC") no-repeat top right; - width: 23px; - display: inline-block; - height: 16px; - margin-bottom: -2px; - margin-right: -23px; -} - -.NB-iphone .NB-button .NB-story-comment-like-button-wrapper, -.NB-button .NB-story-comment-like-button-wrapper { - position: relative; - overflow: hidden; -} - -.NB-button .NB-story-comment-like-button-wrapper span { - background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAGmSURBVCiRbZG/axRBHMXfzO7tbvYua+IFJQa0sRBs1IiQFIEIgvgDEUSs7CSFCJLaA1MJYjrFI5VgmkBiCDYWNgZJlaB/wgknxOT0Lnt7s7Mz852xOgzxXvne98OXxwMG6PXm3PSbzblbgzJ21Kit3mcT4ye34NyI0AeT87PvxeGcHwVGj0d34lJyJQ6Gz1myDwZ+eLpxOapGp8Y95lVPVM4sDUdjF8kSOmK3sZ81HhpGP4XMfi3e3eqx+tcnzyM/ngVjlzjjlcgvIy1aUEaiHIwg110oynNjzXep0h1OVjeMVTNJWK34Xoh2vous6ECoA7R6TRhSiEvJEFk1Rc40+OOZ+rtU7l9r9ZopA1BoAecsHIBcZ/B4CZ18L8uK9r3a9Y+LHADmry5/TmXrmabCDQUJFEkYKhD6EcgZ9FT77cKNT2sA4PfbO7jMWA3OfBwLxwDmILUAOQ1jSPbv/gHOnvdZiWlXQFulyGrle0GFgUFJOj0ImPgtmhCq+6or/6wbp1TIyzc9imq6oNH/AHJmZS/78fLF7S/fDu20/ah+4UMcJGf7xl8kb9PTscP82wAAAABJRU5ErkJggg==") no-repeat center center; - width: 16px; - height: 16px; - display: block; - float: left; - margin: 0 6px; -} - -.NB-button.selected div { - background: #2379bf; - background: -webkit-gradient( - linear, left top, left bottom, - from(#1e78c1), - to(#2379bf)); - box-shadow: none; -} - -.NB-button.NB-share-button.selected div{ - box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1); -} - -.NB-button a { - display: inline-block; - padding-top: 1px; - line-height: 16px; - font-family: Helvetica, sans-serif; - font-size: 11px; - color: #606060; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); -} - -.NB-button.NB-share-button a { - color: #FFF; - text-shadow: none; - font-size: 14px; -} - -.NB-button.selected a { - color: rgba(255,255,255,1); - text-shadow: none; -} \ No newline at end of file diff --git a/media/ios/Resources/storyDetailView.js b/media/ios/Resources/storyDetailView.js deleted file mode 100644 index 9cb593600..000000000 --- a/media/ios/Resources/storyDetailView.js +++ /dev/null @@ -1,95 +0,0 @@ -$('.NB-story img').each(function () { - setImage(this); -}); - -$('.NB-story img').bind('load', function () { - setImage(this); -}); - -$('a.NB-show-profile').live('click', function () { - var offset = $('img', this).offset(); - console.log(offset); - var url = $(this).attr('href') + "/" + offset.left + "/" + (offset.top - window.pageYOffset) + "/" + offset.width + "/" + offset.height; - window.location = url; - return false; -}); - -$('.NB-button').live('touchstart', function () { - $(this).addClass('selected'); -}); - -$('.NB-button').live('touchend', function (e) { - $(this).removeClass('selected'); -}); - -function setImage(img) { - var $img = $(img); - var width = $(img).width(); - var height = $(img).height(); - - if ($img.attr('src').indexOf('feedburner') != - 1) { - $img.attr('class', 'NB-feedburner'); - } else if (width > 300 && height > 50) { - $img.attr('class', 'NB-large-image'); - if ($img.parent().attr('href')) { - $img.parent().addClass('NB-contains-image') - } - } else if (width > 30 && height > 30) { - $img.attr('class', 'NB-medium-image'); - if ($img.parent().attr('href')) { - $img.parent().addClass('NB-contains-image') - } - } else { - $img.attr('class', 'NB-small-image'); - } -} - -function slideToComment(commentId, highlight) { - setTimeout(function(){ - var commentString = 'NB-user-comment-' + commentId; - var shareString = 'NB-user-share-bar-' + commentId; - //Get comment - var $comment = $('#' + commentString); - if ($comment.length) { - $.scroll($comment.offset().top - 32, 1000, 'ease-in-out'); - } else { - var $shareBar = $('#' + shareString); - if ($shareBar.length) { - $.scroll($shareBar.offset().top - 32, 1000, 'ease-in-out'); - } else { - var $shareButton =$("#NB-share-button-id"); - $.scroll($shareButton.offset().top - 32, 1000, 'ease-in-out'); - } - } - - if (highlight) { - if ($comment.length) { - setTimeout(function(){ - $comment.addClass('NB-highlighted'); - setTimeout(function(){ - $comment.removeClass('NB-highlighted'); - }, 2000); - }, 1000); - } else if ($shareBar.length) { - - setTimeout(function(){ - $(".NB-story-comments-shares-teaser").addClass('NB-highlighted'); - setTimeout(function(){ - $(".NB-story-comments-shares-teaser").removeClass('NB-highlighted'); - }, 2000); - }, 1000); - } - } - }, 500); - -} - -function findPos(obj) { - var curtop = 0; - if (obj.offsetParent) { - do { - curtop += obj.offsetTop; - } while (obj = obj.offsetParent); - return [curtop]; - } -} diff --git a/media/ios/static/sample_text.html b/media/ios/static/sample_text.html index e0f54458b..781830223 100644 --- a/media/ios/static/sample_text.html +++ b/media/ios/static/sample_text.html @@ -2,7 +2,7 @@ body {overflow: auto !important;} -
14 Feb 2013, 1:16pm
Fifty US states with equal population
Sarah Pavis
5 comments
12 shares

As part of a thought experiment to reform the electoral college, Neil Freeman redrew the US into 50 new states with equal population. In trying to balance the interests of the popular vote vs the integrity of states, he's split the baby so that no one is likely to be happy. Perfect!

+
Fifty US states with equal population
14 Feb 2013, 1:16pm
·
Sarah Pavis
general
new gilded age
sequester
5 comments
12 shares

As part of a thought experiment to reform the electoral college, Neil Freeman redrew the US into 50 new states with equal population. In trying to balance the interests of the popular vote vs the integrity of states, he's split the baby so that no one is likely to be happy. Perfect!

electoral_map_FITNR.jpg

diff --git a/media/ios/static/storyDetailView.css b/media/ios/static/storyDetailView.css index 8e84e66d0..df28976f3 100644 --- a/media/ios/static/storyDetailView.css +++ b/media/ios/static/storyDetailView.css @@ -43,7 +43,7 @@ */ .NB-ipad-wide .NB-header { - padding: 15px 0 5px; + padding: 15px 0; } .NB-ipad-wide .NB-header .NB-header-inner { @@ -81,7 +81,7 @@ */ .NB-ipad-narrow .NB-header { - padding: 15px 30px 5px; + padding: 12px 30px; } .NB-ipad-narrow .NB-story { @@ -118,7 +118,7 @@ */ .NB-iphone .NB-header { - padding: 12px 12px 5px; + padding: 8px 12px; } .NB-iphone .NB-story { @@ -153,14 +153,47 @@ body.NB-iphone { line-height: 110%; } + +/* ========== */ +/* = Header = */ +/* ========== */ + +.NB-story-title { + clear: left; + margin: 2px 0 4px; + color: #313330; +} + +.NB-story-title-positive { + color: #58A353; + text-shadow: 0 1px 0 #E9F6E9; +} +.NB-story-title-negative { + color: #B85044; + text-shadow: 0 1px 0 #F6E9E9; +} +.NB-story-date { + display: inline; + color: #818776; + font-size: 11px; + white-space: nowrap; +} + +.NB-middot { + display: inline-block; + color: #A0A0A0; + padding: 0 8px 0; + line-height: 8px; + font-weight: normal; +} + .NB-story-author { - color: #969696; + display: inline; + font-size: 11px; + color: #959B8B; text-decoration: none; - text-transform: uppercase; - margin: 4px 8px 0px 0; - margin-bottom: 8px; - text-shadow: 0 1px 0 rgba(255, 255, 255, .9); - float: left; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); position: relative; } .NB-story-author-positive { @@ -171,24 +204,28 @@ body.NB-iphone { color: #B85044; text-shadow: 0 1px 0 #F6E9E9; } + .NB-story-tags { overflow: hidden; - padding: 5px 2px 2px 2px; - margin-bottom: 8px; - text-transform: uppercase; + padding: 5px 2px 2px 0; + line-height: 12px; + height: 14px; } .NB-story-tag { float: left; text-decoration: none; font-weight: normal; - padding: 0px 4px 0px; + padding: 1px 5px; margin: 0px 4px 4px 0; - background-color: #C9CBC6; - color: #505050; - text-shadow: 0 1px 0 #E0E8DB; + background-color: rgba(0, 0, 0, .1); + color: #959B8B; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); -webkit-border-radius: 4px; + border: 1px solid transparent; + border-color: rgba(255, 255, 255, .3) transparent rgba(0, 0, 0, .1); position: relative; + font-size: 9px; } .NB-story-tag-positive { background-color: #88B383; @@ -221,29 +258,6 @@ body.NB-iphone { } -.NB-story-date { - color: #454D6C; -} - -.NB-story-author { - font-size: 10px; - line-height: 12px -} - -.NB-story-tags { - line-height: 12px; - height: 12px; -} - -.NB-story-tag { - font-size: 9px; -} - -.NB-story-date { - font-size: 11px; - line-height: 13px; -} - .NB-story h1, .NB-story h2, .NB-story h3, @@ -307,10 +321,9 @@ div + p { .NB-header { font-size: 22px; line-height: 1.2em; - font-weight: 600; background-image: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F3F4EF)); border-bottom: 1px solid #C2C5BE; - text-shadow: 0 1px 0 rgba(255, 255, 255, .9); + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); overflow: hidden; max-width: none; @@ -318,7 +331,7 @@ div + p { } .NB-iphone .NB-header { - font-size: 14px; + font-size: 16px; } .NB-story { @@ -360,19 +373,6 @@ div + p { clear: both; } -.NB-story-title { - clear: left; - margin: 8px 0 4px; -} - -.NB-story-title-positive { - color: #58A353; - text-shadow: 0 1px 0 #E9F6E9; -} -.NB-story-title-negative { - color: #B85044; - text-shadow: 0 1px 0 #F6E9E9; -} ins { text-decoration: none; }