Skip to content

Instantly share code, notes, and snippets.

@p2

p2/Custom CSS

Created February 22, 2012 15:28
Show Gist options
  • Save p2/1885548 to your computer and use it in GitHub Desktop.
Save p2/1885548 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr Blog Page
Raw
Custom CSS
h3 {
margin-bottom: 0.5em;
}
#header {
margin-bottom: 40px;
padding-top: 40px;
}
#header h1 a.no_header {
font-family: Palatino, Helvetica, sans-serif;
font-size: 1.65em;
}
.date_and_notes {
border-top: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
background-color: rgb(206,209,214);
background: -moz-linear-gradient(center top, rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
}
.date_and_notes a {
color: rgba(255,255,255,0.75); text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
-moz-transition: text-shadow 0.2s; -webkit-transition: text-shadow 0.2s; transition: text-shadow 0.2s;
}
.date_and_notes a:hover {
color: rgba(255,255,255,0.95); text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.post {
line-height: 1.6;
border: 1px solid rgba(0,0,0,0.8);
background-color: transparent;
box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.post .quote, .post .photo, .post .link, .post .conversation, .post .audio, .post .regular, .post .just_notes {
background-color: white;
}
.post blockquote {
font: 1.1em/1.6 Palatino,sans-serif;
border-left: 4px solid rgba(0,0,0,0.12);
}
.just_notes {
margin: 0; padding: 15px;
-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
}
span.quote {
line-height: inherit;
}
.conversation li.odd {
background: rgba(150,153,155,0.1);
}
.conversation {
padding: 30px 30px 1em;
}
.short_url {
border: 1px solid rgba(0,0,0,0.35);
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
#sidebar #description {
line-height: 1.6;
}
#sidebar .page_link, #sidebar #search label {
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.3);
-moz-transition: text-shadow, background-color 0.2s; -webkit-transition: text-shadow, background-color 0.2s; transition: text-shadow, background-color 0.2s;
}
#sidebar .page_link:hover {
text-shadow: 0 0 8px rgba(255,255,255,0.8);
background-color: rgba(0,0,0,0.25);
}
#sidebar #search form #search_submit {
color: white;
border: 1px solid rgba(0,0,0,0.75);
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 0 rgba(255,255,255,0.4);
background: -moz-linear-gradient(center top, rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
-moz-transition: box-shadow 0.2s; -webkit-transition: box-shadow 0.2s; transition: box-shadow 0.2s;
}
#sidebar #search form #search_submit:hover {
background: -moz-linear-gradient(center top, rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.15) 52%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.3)) repeat scroll 0 0 transparent;
box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.page_of {
background-color: rgba(0,0,0,0.3);
border: 1px solid rgba(0, 0, 0, 0.75);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
Raw
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<meta name="image:Background" content=""/>
<meta name="image:Header" content=""/>
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="if:Show My Portrait" content="" />
<meta name="if:Huge Photos" content="" />
<meta name="if:Dark Layout" content="" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="stylesheet" href="http://static.tumblr.com/snnreod/yt6l8jer7/screen.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css">
{block:IfBackgroundImage}
html, body {
background: #d1d2d1;
}
html, body {
background: #d1d2d1 url({image:Background}) repeat fixed left top !important;
}
{/block:IfBackgroundImage}
{block:IfNotBackgroundImage}
html, body {
background: #d1d2d1 url(http://static.tumblr.com/snnreod/DTFl8fjqb/background.jpg) top left repeat;
}
{/block:IfNotBackgroundImage}
{block:IFDarkLayout}
/* Dark Layout aka SIMPLE BRUTALITY! */
html, body {
background: #363636 url(http://static.tumblr.com/snnreod/Fx4l8ig9j/background_dark.jpg) top left repeat;
}
#header h1 a.no_header {
color: #fff;
text-shadow: 0 2px 4px #000;
}
.post {
-moz-box-shadow: 0 1px 8px rgba(0,0,0,.9);
-webkit-box-shadow: 0 1px 8px rgba(0,0,0,.9);
box-shadow: 0 1px 8px rgba(0,0,0,.9);
}
#sidebar #description {
color: #e1e1e1;
text-shadow: 0 1px 1px #000;
text-shadow: 0 1px 1px rgba(0,0,0,.9) !important;
font-weight: bold !important;
}
#sidebar #description a {
text-shadow: 0 1px 1px #000;
text-shadow: 0 1px 1px rgba(0,0,0,.9);
color: #e1e1e1;
}
#sidebar #description a:hover {
color: #fff;
}
#sidebar .page_link, #sidebar #search label, #sidebar #description a.page_link {
color: #e1e1e1;
text-shadow: 0 1px 1px #000;
font-weight: normal;
border-top: 1px solid #555555;
*border-top:1px solid #555555;
border-top: 1px solid rgba(255,255,255, .15);
}
#sidebar .page_link:hover, #sidebar #description a.page_link:hover {
color: #fff;
}
#sidebar #search form #search_submit {
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.7);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.7);
box-shadow: 0 1px 4px rgba(0,0,0,.7);
border: none;
}
#newer_posts, #older_posts {
color: #e1e1e1;
text-shadow: 0 1px 1px #000;
font-weight: normal;
}
#newer_posts:hover, #older_posts:hover {
color: #fff;
}
.page_of {
display: inline-block;
width: auto;
color: #bebebe;
font-size: .75em;
text-shadow: 0 1px 0px rgba(0,0,0,.3);
background: rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.12);
padding: 8px 10px;
margin: 0 14px 0 0;
position: relative;
top: 5px;
-moz-box-shadow: 0 1px 0px rgba(255,255,255,.15);
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,.15);
box-shadow: 0 1px 0px rgba(255,255,255,.15);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#footer_info, #footer_info strong, #footer p, #footer p a {
color: #e1e1e1;
text-shadow: 0 1px 1px #000;
}
.short_url {
text-shadow: 0 1px 0px rgba(0,0,0,.3);
background: rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.12);
*border: 1px solid #232323;
padding: 8px 10px;
color: #bebebe;
margin: 0 0 0 0;
-moz-box-shadow: 0 1px 0px rgba(255,255,255,.15);
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,.15);
box-shadow: 0 1px 0px rgba(255,255,255,.15);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
top: -30px;
}
.short_url a {
color: #fff;
}
/* */
{/block:IFDarkLayout}
{block:IFHugePhotos}
/* Huge Photos */
#content {
width: 1240px;
}
.postcontainer {
width: 1060px;
}
.post {
width: 1060px;
}
.photo .photo_holder img {
max-width: 1000px;
}
#post_notes ol li.reply {
width: 1004px;
}
.audio div.audio_player_container .player_and_caption {
width: 825px;
}
.photo .photo_holder {
width: 1000px;
text-align: left;
}
.question p {
width: 870px;
}
{block:IFHugePhotos}
/* Simpler Date for Toggle
.date_and_notes {
text-align: left;
padding: 15px 0 0 0;
margin: 0 30px;
font-size: 1em;
background: transparent;
}
.date_and_notes a {
display: block;
color: #303030;text-decoration: none;
font-weight: normal;
cursor: pointer;
}
.date_and_notes a:hover {color: #232323;}
.date_and_notes a:active {
position: relative;
top: 1px;
}
.post .photo, .post .video, .post .conversation, .post .regular, .post .photoset, .post .link {
padding: 10px 30px 30px 30px;
}
*/
{CustomCSS}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.post div.labels {
right: 450px;
}
</style>
<![endif]-->
</head>
<body>
<div id="content" class="clearfix">
<div id="header" class="clearfix">
<h1>
{block:IfHeaderImage}<a href="/"><img src="{image:Header}" alt="{Title}"/></a>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<a class="no_header" href="/">{Title}</a>{/block:IfNotHeaderImage}
</h1>
</div><!-- end #header -->
<div id="sidebar">
<div id="description">
{block:IFShowMyPortrait}
<img id="tumblr_portrait" src="{PortraitURL-128}" width="128" height="128" alt="This is a picture of {Title}"/>
{/block:IFShowMyPortrait}
{Description}
</div>
{block:HasPages}
{block:Pages}<a class="page_link" href="{URL}"><span>{Label}</span></a>{/block:Pages}
{/block:HasPages}
<a class="page_link" href="/archive"><span>Archive</span></a>
{block:AskEnabled}
<a class="page_link" href="/ask"><span>{AskLabel}</span></a>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<a class="page_link" href="/submit"><span>{SubmitLabel}</span></a>
{/block:SubmissionsEnabled}
<div id="search">
<form action="/search" method="get">
<label><span>Search</span></label>
<input type="text" name="q" value="{SearchQuery}"/>
<input id="search_submit" type="submit" value="Search" alt="Search" />
</form>
</div>
</div><!-- end #sidebar -->
<div class="postcontainer clearfix">
<div class="post_inner_container clearfix">
{block:Posts}
<div class="post clearfix">
<div class="date_and_notes">
{block:NewDayDate}
<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes}{CapitalAmPm}</a>
{/block:NewDayDate}
{block:SameDayDate}
<a href="{Permalink}"> {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes}{CapitalAmPm} </span></a>
{/block:SameDayDate}
</div>
{block:Regular}
<div class="regular clearfix">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="post_semi_top"></div>
<div class="regular_body">
<p>{Body}</p>
</div>
</div>
{/block:Regular}
{block:Answer}
<div class="regular clearfix">
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="post_semi_top"></div>
<div class="question clearfix"><img src="{AskerPortraitURL-64}" width="64" height="64" alt="asker"> <p>{Asker} asked: {Question}</p></div>
<div class="regular_body answer">
{Answer}
</div>
</div>
{/block:Answer}
{block:Photo}
<div class="photo">
{block:IFHugePhotos} <div class="photo_holder">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>{/block:IFHugePhotos}
{block:IFNotHugePhotos} <div class="photo_holder">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>{/block:IFNotHugePhotos}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
<span class="quote">
{Quote}
</span>
{block:Source}<span class="source">&mdash; {Source}</span>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Photoset}
<div class="photoset_container">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}
{block:Audio}
<div class="audio clearfix">
<div class="audio_player_container clearfix">
<div class="album_art_container">
{block:AlbumArt}
<img src="{AlbumArtURL}" width="150" height="150" alt="Album Art" />
{/block:AlbumArt}
</div>
<div class="player_and_caption">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="audio_extras">
<div class="audio_id3 clearfix">
{block:Artist}
<div class="id3_artist"><em>Artist</em>{Artist}</div>
{/block:Artist}
{block:TrackName}
<div class="id3_track"><em>Title</em>{TrackName}</div>
{/block:TrackName}
{block:Album}
<div class="id3_album"><em>Album</em>{Album}</div>
{/block:Album}
</div>
</div>
</div>
</div>
</div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:PostNotes}<div id="post_notes">{PostNotes} </div>{/block:PostNotes}
<div class="just_notes clearfix">
{block:NoteCount}<a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
{block:ContentSource}
{block:SourceLogo}
<a class="source_link" href="{SourceURL}">
{lang:Source}:
<img src="{WhiteLogoURL}" width="{LogoWidth}"
height="{LogoHeight}" alt="{SourceTitle}" />
</a>
{/block:SourceLogo}
{block:NoSourceLogo}
<a class="source_link" href="{SourceURL}">
{lang:Source}: {SourceTitle}
</a>
{/block:NoSourceLogo}
{/block:ContentSource}
{block:HasTags}
{block:Tags}<a class="tags" href="{TagURL}">&#35;{Tag}</a>{/block:Tags}
{/block:HasTags}
</div>
</div>
{block:PermalinkPage}<div class="short_url">Short URL for this post: <strong>{ShortURL}</strong></div>{/block:PermalinkPage}
{block:Permalink}
{block:IfDisqusShortname}
<div id="brutal_disqus_container">
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
</div>
<div style="text-align: right; margin-top: 5px">
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{/block:IfDisqusShortname}
{/block:Permalink}
{/block:Posts}
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
<div id="footer">
<div id="footer_content" class="clearfix">
{block:PreviousPage}
<a id="newer_posts" href="{PreviousPage}">&#171; Newer posts</a> &nbsp;&nbsp;
{/block:PreviousPage}
{block:IndexPage}
<div class="page_of clearfix">
<strong>Page {CurrentPage}</strong>
<span>of {TotalPages}</span>
</div>
{/block:IndexPage}
{block:NextPage}
<a id="older_posts" href="{NextPage}">Older posts &#187;</a>
{/block:NextPage}
</div>
<div id="footer_info">
<p>Based on the <strong>Brutal Simplicity</strong> theme by <a href="http://kevin.tumblr.com">Kevin Burg</a></p>
</div>
</div>
</div><!-- end .post_inner_container -->
</div> <!-- end .postcontainer -->
</div>
{block:IfGoogleAnalyticsID}
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{text:Google Analytics ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{/block:IfGoogleAnalyticsID}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment