Created
August 2, 2012 16:10
-
-
Save JAStanton/3238263 to your computer and use it in GitHub Desktop.
Reaction:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; | |
} | |
#wrapper{ | |
background: url("http://m-local.wavii.com:3000/assets/mobile/page_background@2x.jpg"); | |
height: 100%; | |
width: 320px; | |
padding: 20px; | |
} | |
.avatar { | |
width: 45px; | |
} | |
.avatar img{ | |
height: 26px; | |
border: 2px solid #3F9BC2; | |
margin: 13px 0px 0 10px; | |
} | |
.actions{ | |
width: 50px; | |
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(23, 175, 232, 0.7)), color-stop(65%, rgba(16, 122, 162, 0.7)), color-stop(70%, rgba(16, 122, 162, 0.7)), color-stop(100%, rgba(46, 183, 234, 0.7))); | |
background: -webkit-linear-gradient(top, rgba(23, 175, 232, 0.7), rgba(16, 122, 162, 0.7) 65%, rgba(16, 122, 162, 0.7) 70%, rgba(46, 183, 234, 0.7)); | |
-webkit-box-shadow: rgba(157, 221, 245, 0.5) 0px -1px 6px inset; | |
text-align: center; | |
color: white; | |
} | |
.actions span{ | |
position: absolute; | |
right: 11px; | |
top: 50%; | |
margin-top: -17px; | |
letter-spacing: -4px; | |
font-size: 62px; | |
line-height: 0; | |
} | |
.second-social-bar{ | |
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 4px; | |
width: 319px; | |
margin-bottom: 30px; | |
} | |
.second-social-bar > section:first-child { | |
width: 319px; | |
margin-left: -1px; | |
position: relative; | |
background-color: #FFFFFF; | |
background: white; | |
-webkit-box-shadow: inset -3px 4px 6px #C5C5C5; | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(73%,#ffffff), color-stop(100%,#eff1f0)); | |
background: -webkit-linear-gradient(top, #ffffff 73%,#eff1f0 100%); | |
margin-right: -50px; | |
} | |
.second-social-bar > section:first-child { | |
display: -webkit-box; | |
-webkit-box-orient: horizontal; | |
min-height: 66px; | |
} | |
.second-social-bar > section:first-child .headline-module { | |
-webkit-box-flex: 1; | |
} | |
.second-social-bar > section:first-child .snippet-module { | |
-webkit-box-ordinal-group: 20; | |
width: 125px; | |
} | |
.headline-module { | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
position: relative; | |
padding: 10px; | |
overflow: hidden; | |
} | |
.headline-module:before, | |
.headline-module:after{ | |
font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; | |
font-style: italic; | |
font-size: 100px; | |
color: #8A8A8A; | |
opacity: .1; | |
position: absolute; | |
line-height: 0px; | |
} | |
.headline-module:before{ | |
content: "\201c"; | |
top: 30px; | |
left: -10px; | |
} | |
.headline-module:after{ | |
content: "\201d"; | |
bottom: 5px; | |
right: 0px; | |
height: 0px; | |
} | |
.headline-module .headline { | |
-webkit-box-flex: 1; | |
margin: -0.27em 0em -0.25em 0em; | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
-webkit-box-pack: center; | |
} | |
.headline-module .headline:after { | |
content: "\00A0"; | |
display: block; | |
} | |
.headline-module .headline .message { | |
display: block; | |
max-height: 72px; | |
overflow: hidden; | |
color: #8A8A8A; | |
font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; | |
font-size: 15px; | |
padding-top: 4px; | |
} | |
.headline-module .headline .label { | |
display: block; | |
font-size: 13px; | |
color: #9D9D9D; | |
font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; | |
} | |
.headline-module .user { | |
color: white; | |
font-size: 15px; | |
} | |
.headline-module .user .rumor { | |
color: #205A79; | |
} | |
.comments{ | |
background-color: rgba(0,0,0,.5); | |
} | |
.comments ul{ | |
margin: 0px 0px 0px 55px; | |
padding: 10px 0px 0px 0px; | |
list-style: none; | |
} | |
.comments ul li { | |
display: -webkit-box; | |
padding-bottom: 15px; | |
margin: 0 20px 10px 0; | |
} | |
.comments ul li .user{ | |
width: 40px; | |
} | |
.comments ul li .user-details{ | |
-webkit-box-flex: 1; | |
} | |
.comments ul li:not(:last-child){ | |
border-bottom: 1px dashed rgba(255,255,255,.2); | |
} | |
.comments ul li .user img{ | |
height: 26px; | |
} | |
.comments ul li .user-details .name{ | |
font-size: 15px; | |
color: #B0E9FF; | |
margin-bottom: 3px; | |
} | |
.comments ul li .user-details .comment{ | |
color: #E4E4E4; | |
font-size: 15px; | |
} | |
.comments .reply a{ | |
font-size: 15px; | |
color: #B0E9FF; | |
text-decoration: none; | |
padding: 10px 0px 10px 10px; | |
display: block; | |
} | |
.comments .reply{ | |
display: block; | |
text-align: right; | |
margin: -15px 20px 0px 55px; | |
border-top: 1px dashed rgba(255,255,255,.2); | |
} | |
/* Reaction: */ | |
.second-social-bar .reaction{ | |
display: -webkit-box; | |
-webkit-box-align: center; | |
margin-left: 10px; | |
color: #8A8A8A; | |
} | |
.second-social-bar .reaction{ | |
font-size: 15px; | |
-webkit-box-flex: 1; | |
} | |
.second-social-bar .reaction .user{ | |
display: inline-block; | |
} | |
.second-social-bar .reaction .name, | |
.second-social-bar .reaction .count{ | |
color: #205A79; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section id="wrapper"> | |
<section class="second-social-bar"> | |
<section> | |
<section class="reaction"> | |
<div class="user"> | |
<div class="name"> Gina Baplask </div> | |
</div> | |
and | |
<span class="count">1 other</span> | |
feels differetly | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="user"> | |
<span class="rumor">Jonathan Stanton</span> | |
</div> | |
<div class="headline"> | |
<span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span> | |
<span class="label">2 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="user"> | |
<span class="rumor">Jonathan Stanton</span> | |
</div> | |
<div class="headline"> | |
<span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span> | |
<span class="label">2 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="headline"> | |
<span class="message">Some of the mystery has been taken out of it, but Google has officially taken the wraps off of the Nexus 7, its first reference-grade</span> | |
<span class="label">10 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="user"> | |
<span class="rumor">Jonathan Stanton</span> | |
</div> | |
<div class="headline"> | |
<span class="message">I don't like this one bit</span> | |
<span class="label">10 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="headline"> | |
<span class="message">Wow Super Cool</span> | |
<span class="label">10 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="headline"> | |
<span class="message">Lorem Ipsum</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
</section> | |
<section> | |
<section> | |
<section class="second-social-bar"> | |
<section> | |
<section class="avatar"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</section> | |
<section class="headline-module"> | |
<div class="user"> | |
<span class="rumor">Jonathan Stanton</span> | |
</div> | |
<div class="headline"> | |
<span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span> | |
<span class="label">2 people like this</span> | |
</div> | |
</section> | |
<section class="actions"><span>...</span></section> | |
</section> | |
<section class="comments"> | |
<ul> | |
<li> | |
<div class="user"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</div> | |
<div class="user-details"> | |
<div class="name"> | |
Scarlet Johansson | |
</div> | |
<div class="comment"> | |
This makes a lot of sense. They're trying to scam clueless people, so they go with something obvious. If you fall for it you're the sucker they are looking for. | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="user"> | |
<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" /> | |
</div> | |
<div class="user-details"> | |
<div class="name"> | |
Scarlet Johansson | |
</div> | |
<div class="comment"> | |
why?? it'd be weird not calling it ipad | |
</div> | |
</div> | |
</li> | |
</ul> | |
<span class="reply"> | |
<a href="/">6 other replies</a> | |
</span> | |
</section> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment