Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding avatars to respective posts.

  • Loading branch information...
commit 3e5d6f09ddb5b1f658f5daaca760902a732e2061 1 parent a3e888b
@WanderingMatt authored
Showing with 111 additions and 50 deletions.
  1. +55 −25 index.html
  2. +56 −25 tumblr.html
View
80 index.html
@@ -275,8 +275,6 @@
width: 59px;
}
- .ribbon li { margin-bottom: 20px; }
-
.ribbon a {
background-image: url("http://static.tumblr.com/h42ojc9/Nx9ld56vz/sprite.png");
background-position: bottom 17px;
@@ -294,7 +292,7 @@
.ribbon a strong {
display: block;
font-size: 18px;
- line-height: 15px;
+ line-height: 24px;
}
.ribbon a span {
@@ -305,20 +303,34 @@
.type a {
background-position: 50%;
height: 40px;
- padding: 40px 0 20px 0;
+ padding: 40px 0 19px 0;
text-indent: -9999px;
}
+ .post .author { margin-bottom: 8px; }
+
+ .post .avatar {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 1px rgba(255, 255, 255, .6);
+ -moz-box-shadow: 0 1px rgba(255, 255, 255, .6);
+ box-shadow: 0 1px rgba(255, 255, 255, .6);
+ display: block;
+ height: 20px;
+ margin: 0 auto;
+ width: 20px;
+ }
+
.permalink a {
- background-position: 13px -305px;
- padding-top: 5px;
- padding-bottom: 28px;
+ background: none;
+ margin-bottom: 20px;
text-transform: uppercase;
}
.notes a {
- background-position: 13px -520px;
- padding-bottom: 26px;
+ background-position: 13px -541px;
+ height: 20px;
}
.post hr {
@@ -335,7 +347,7 @@
.text .type a {
background-position: 13px -896px;
- padding-bottom: 40px;
+ margin-bottom: 39px;
}
.text header p {
@@ -356,26 +368,32 @@
color: rgba(0, 0, 0, .8);
text-shadow: 0 1px rgba(255, 255, 255, .6);
}
-
+
/* =PHOTO */
.photo .type a { background-position: 13px -996px; }
-
+
+ .photo .avatar {
+ -webkit-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ -moz-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ }
+
.photo .frame {
background: #000;
margin-bottom: 20px;
- min-height: 220px;
+ min-height: 180px;
overflow: hidden;
}
-
+
.photo .hi-res { height: 520px; }
-
+
.photo img {
display: block;
margin: 0 auto;
max-width: 700px;
}
-
+
.photo .hi-res img:first-child { display: none; }
.photo .hi-res img { width: 700; }
@@ -383,14 +401,14 @@
color: rgba(255, 255, 255, .8);
text-shadow: 0 -1px rgba(0, 0, 0, .6);
}
-
+
.photo .permalink a { background-position: 13px -405px; }
.photo .notes a { background-position: 13px -620px; }
-
+
/* =QUOTE */
- .quote header { min-height: 220px; }
+ .quote header { min-height: 180px; }
.quote .type a { background-position: 13px -1096px; }
.quote q {
@@ -410,7 +428,7 @@
/* =LINK */
- .link header { min-height: 220px; }
+ .link header { min-height: 180px; }
.link header p { margin-top: 20px; }
.link header a {
@@ -430,7 +448,7 @@
.audio .type a {
background-position: 13px -1396px;
- padding-bottom: 60px;
+ margin-bottom: 65px;
}
.audio header {
@@ -500,6 +518,13 @@
/* =VIDEO */
.video .type a { background-position: 13px -1496px; }
+
+ .video .avatar {
+ -webkit-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ -moz-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ }
+
.video .screen { margin-bottom: 20px; }
.video object, .video embed, .video iframe {
@@ -696,8 +721,9 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="#">Text</a></li>
+ <li class="author"><a href="#"><img src="http://30.media.tumblr.com/avatar_a963092d964b_24.png" class="avatar" /></a></li>
<li class="permalink"><a href="#">Oct <strong>25</strong></a></li>
- <li class="notes"><a href="#"><strong>33</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="#"><span>Notes</span></a></li>
</ul>
</aside>
<hr />
@@ -716,6 +742,7 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="http://bits.cooperativ.es/post/2150294981/i-unlocked-the-living-human-statue-last-night-in">Permalink</a></li>
+ <li class="author"><a href="#"><img src="http://30.media.tumblr.com/avatar_a963092d964b_24.png" class="avatar" /></a></li>
<li class="permalink"><a href="http://bits.cooperativ.es/post/2150294981/i-unlocked-the-living-human-statue-last-night-in">Dec <strong>8</strong></a></li>
</ul>
@@ -734,8 +761,9 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="#">Quote</a></li>
+ <li class="author"><a href="#"><img src="http://30.media.tumblr.com/avatar_a963092d964b_24.png" class="avatar" /></a></li>
<li class="permalink"><a href="#">Oct <strong>25</strong></a></li>
- <li class="notes"><a href="#"><strong>33</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="#"><span>Notes</span></a></li>
</ul>
</aside>
<hr />
@@ -750,8 +778,9 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="#">Link</a></li>
+ <li class="author"><a href="#"><img src="http://30.media.tumblr.com/avatar_a963092d964b_24.png" class="avatar" /></a></li>
<li class="permalink"><a href="#">Oct <strong>25</strong></a></li>
- <li class="notes"><a href="#"><strong>33</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="#"><span>Notes</span></a></li>
</ul>
</aside>
<hr />
@@ -797,8 +826,9 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="#">Video</a></li>
+ <li class="author"><a href="#"><img src="http://30.media.tumblr.com/avatar_a963092d964b_24.png" class="avatar" /></a></li>
<li class="permalink"><a href="#">Oct <strong>25</strong></a></li>
- <li class="notes"><a href="#"><strong>33</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="#"><span>Notes</span></a></li>
</ul>
</aside>
<hr />
View
81 tumblr.html
@@ -275,8 +275,6 @@
width: 59px;
}
- .ribbon li { margin-bottom: 20px; }
-
.ribbon a {
background-image: url("http://static.tumblr.com/h42ojc9/Nx9ld56vz/sprite.png");
background-position: bottom 17px;
@@ -294,7 +292,7 @@
.ribbon a strong {
display: block;
font-size: 18px;
- line-height: 15px;
+ line-height: 24px;
}
.ribbon a span {
@@ -305,20 +303,34 @@
.type a {
background-position: 50%;
height: 40px;
- padding: 40px 0 20px 0;
+ padding: 40px 0 19px 0;
text-indent: -9999px;
}
+ .post .author { margin-bottom: 8px; }
+
+ .post .avatar {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 1px rgba(255, 255, 255, .6);
+ -moz-box-shadow: 0 1px rgba(255, 255, 255, .6);
+ box-shadow: 0 1px rgba(255, 255, 255, .6);
+ display: block;
+ height: 20px;
+ margin: 0 auto;
+ width: 20px;
+ }
+
.permalink a {
- background-position: 13px -305px;
- padding-top: 5px;
- padding-bottom: 28px;
+ background: none;
+ margin-bottom: 20px;
text-transform: uppercase;
}
.notes a {
- background-position: 13px -520px;
- padding-bottom: 26px;
+ background-position: 13px -541px;
+ height: 20px;
}
.post hr {
@@ -335,7 +347,7 @@
.text .type a {
background-position: 13px -896px;
- padding-bottom: 40px;
+ margin-bottom: 39px;
}
.text header p {
@@ -360,22 +372,28 @@
/* =PHOTO */
.photo .type a { background-position: 13px -996px; }
-
+
+ .photo .avatar {
+ -webkit-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ -moz-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ }
+
.photo .frame {
background: #000;
margin-bottom: 20px;
- min-height: 220px;
+ min-height: 180px;
overflow: hidden;
}
-
+
.photo .hi-res { height: 520px; }
-
+
.photo img {
display: block;
margin: 0 auto;
max-width: 700px;
}
-
+
.photo .hi-res img:first-child { display: none; }
.photo .hi-res img { width: 700; }
@@ -383,13 +401,14 @@
color: rgba(255, 255, 255, .8);
text-shadow: 0 -1px rgba(0, 0, 0, .6);
}
-
+
.photo .permalink a { background-position: 13px -405px; }
.photo .notes a { background-position: 13px -620px; }
+
/* =QUOTE */
- .quote header { min-height: 220px; }
+ .quote header { min-height: 180px; }
.quote .type a { background-position: 13px -1096px; }
.quote q {
@@ -409,7 +428,7 @@
/* =LINK */
- .link header { min-height: 220px; }
+ .link header { min-height: 180px; }
.link header p { margin-top: 20px; }
.link header a {
@@ -429,7 +448,7 @@
.audio .type a {
background-position: 13px -1396px;
- padding-bottom: 60px;
+ margin-bottom: 65px;
}
.audio header {
@@ -499,6 +518,13 @@
/* =VIDEO */
.video .type a { background-position: 13px -1496px; }
+
+ .video .avatar {
+ -webkit-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ -moz-box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ box-shadow: 0 -1px rgba(0, 0, 0, .6);
+ }
+
.video .screen { margin-bottom: 20px; }
.video object, .video embed, .video iframe {
@@ -686,9 +712,10 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="{Permalink}">Permalink</a></li>
+ <li class="author"><img src="{PostAuthorPortraitURL-24}" alt="{PostAuthorName}" class="avatar" />
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
@@ -710,9 +737,10 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="{Permalink}">Permalink</a></li>
+ <li class="author"><img src="{PostAuthorPortraitURL-24}" alt="{PostAuthorName}" class="avatar" />
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
@@ -734,9 +762,10 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="{Permalink}">Permalink</a></li>
+ <li class="author"><img src="{PostAuthorPortraitURL-24}" alt="{PostAuthorName}" class="avatar" />
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
@@ -760,9 +789,10 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="{Permalink}">Permalink</a></li>
+ <li class="author"><img src="{PostAuthorPortraitURL-24}" alt="{PostAuthorName}" class="avatar" />
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
@@ -799,7 +829,7 @@
<li class="type"><a href="{Permalink}">Permalink</a></li>
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
@@ -823,9 +853,10 @@
<aside class="ribbon">
<ul>
<li class="type"><a href="{Permalink}">Permalink</a></li>
+ <li class="author"><img src="{PostAuthorPortraitURL-24}" alt="{PostAuthorName}" class="avatar" />
<li class="permalink"><a href="{Permalink}">{ShortMonth} <strong>{DayOfMonth}</strong></a></li>
{block:NoteCount}
- <li class="notes"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> <span>Notes</span></a></li>
+ <li class="notes"><a href="{Permalink}#notes"><span>Notes</span></a></li>
{/block:NoteCount}
</ul>
</aside>
Please sign in to comment.
Something went wrong with that request. Please try again.