Skip to content

Instantly share code, notes, and snippets.

@froseph

froseph/munic_tumblr_theme.html

Created November 10, 2012 05:50
Show Gist options
  • Save froseph/4050069 to your computer and use it in GitHub Desktop.
Save froseph/4050069 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. froseph revised this gist Nov 10, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion munic_tumblr_theme.html
    View file
    Original file line number Diff line number Diff line change
    @@ -153,7 +153,8 @@
    padding:7px;
    background:#ffbc00;
    text-decoration:none;
    text-transform:lowercase;
    text-transform:lowercase;
    line-height: 45px;
    }

    .ttl a:hover {
  2. froseph created this gist Nov 10, 2012.
    651 changes: 651 additions & 0 deletions munic_tumblr_theme.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,651 @@
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>{Title}{block:PostTitle} / {PostTitle}{/block:PostTitle}</title>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
    <link rel="Shortcut Icon" type="image/png" href="{Favicon}" />
    <style type="text/css">
    a img, img a {border:none;}

    * {padding:0;margin:0;}

    .clear {clear:both;}

    iframe {top:7px !important;}

    #wrapper {
    width:600px;
    margin:0 auto;
    }

    body {
    background:#262626;
    border-top:6px solid #ffbc00;
    }

    #top {
    margin:45px 0 70px 0;
    }

    #header {
    float:left;
    }

    #header h1 a, #header h1 a:hover {
    display:block;
    text-decoration:none;
    font-family:Georgia;
    font-size:60px;
    color:#fff;
    font-weight:normal;
    }

    #header h1 {
    margin:6px 0 -17px 0;
    }


    #header div {
    color:#ffbf00;
    font-size:14px;
    font-family: "Georgia";
    text-transform:lowercase;
    font-style:italic;
    float:left;
    margin-top:8px;
    }

    #header div a {
    color:#ffbf00;
    font-size:14px;
    font-family: "Georgia";
    text-transform:lowercase;
    font-style:italic;
    text-decoration:none;
    }

    #header div a:hover {
    text-decoration:underline;
    }

    #nav {
    float:right;
    margin-top:32px;
    text-align:left;
    }

    #nav li {
    display:inline;
    list-style:none;
    margin-left:22px;
    }

    #nav li a {
    color:#ffbc00;
    font-family:"Lucida Grande", "Lucida Sans Unicode";
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    padding:10px 10px 10px 10px;
    }

    #nav li a:hover {
    color:#262626;
    background:#ffbc00;
    }

    /* CONTENT */

    #main {
    width:600px;
    margin:0 auto;
    }

    span.icon a, .iconp {
    position:absolute;
    float:left;
    margin:0 0 0 0;
    top:-3px;
    left:-37px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    text-indent:-9999px;
    background:url('http://media.tumblr.com/5yo2viQlxc7nrkbiYxZ2ujeK_500.png') no-repeat;
    height:27px;
    width:27px;
    }

    span.meta a {
    position:absolute;
    float:left;
    margin:0 0 0 0;
    top:30px;
    left:-54px;
    font-family:Helvetica, Arial;
    font-size:9px;
    color:#adadad;
    font-weight:normal;
    text-decoration:none;
    text-transform:uppercase;
    text-decoration:none;
    text-align:right;
    width:40px;
    }

    span.meta a b {
    color:#fff;
    }

    /* GENERAL POSTS */

    .post-content {
    margin:0 0 80px 0;
    position:relative;
    }

    .post .ttl a, .ttlp {
    font-family:Georgia;
    font-weight:normal;
    color:#262626;
    font-size:21px;
    padding:7px;
    background:#ffbc00;
    text-decoration:none;
    text-transform:lowercase;
    }

    .ttl a:hover {
    background:#ffc523;
    }

    .ttl a span {
    padding:7px 0px 7px 4px;
    }

    .post .body {
    margin:20px 0 0 0;
    font-family:"Lucida Grande", "Lucida Sans Unicode";
    font-size:11px;
    color:#fff;
    line-height:17px;
    }

    .post .body a, .item .text a, .chat ul li a, .quote .source a {
    color:#FFBc00;
    text-decoration:none;
    font-variant:small-caps;
    font-family:Georgia;
    font-size:11px;
    }

    .post .body a:hover, .item .text a:hover, .chat ul li a:hover, .quote .source a:hover {
    text-decoration:underline;
    }


    .post p {
    margin:12px 0 12px 0;
    }

    .post pre {
    margin:12px 0 12px 15px;
    font-size:10px;
    }

    .post ul, .post ol {
    margin:12px 0 12px 40px;
    }

    .post ul li {
    list-style:circle;
    margin-bottom:3px;
    }

    .post ol li {
    margin-bottom:3px;
    }

    .post blockquote {
    margin-left:20px;
    border-left:1px solid #ccc;
    padding-left:10px;
    color:#ccc;
    }

    .tags {
    font-size:11px;
    font-family:Georgia;
    color:#fff;
    text-decoration:none;
    }
    .tags a {
    color:#FFBc00;
    font-variant:small-caps;
    }
    .tags a:hover {
    text-decoration:underline;
    }
    .tags a:after {
    content: ",";
    }
    .tags a:last-child:after {
    content: "";
    }

    .source {
    font-family:Georgia;
    font-size:12px;
    font-variant:small-caps;
    text-transform:none;
    color:#ffbc00;
    margin:11px 0px 0 0;

    }

    .source a {
    color:#ffbc00;
    text-decoration:none;
    }

    .source a:hover {
    text-decoration:underline;
    }

    #daybox {
    margin-bottom:45px;
    }

    #day {
    font-family:Georgia;
    font-variant:small-caps;
    font-size:18px;
    color:#fff;
    }

    /* PHOTOS, VIDEOS, AUDIO */

    .photo .body, .video .body, .audio.body {
    margin-top:10px;
    }

    .photo span.icon a, .video span.icon a {
    top:3px;
    }

    .photo span.meta a, .video span.meta a {
    top:36px;
    }

    .audio span.icon a {
    top:0px;
    }

    .audio span.meta a {
    top:33px;
    }

    /* QUOTES */
    .quote {
    margin-top:-15px;
    }

    .quote .body {
    font-family:Georgia;
    font-size:18px;
    line-height:25px;
    }

    .quote span.icon a {
    top:0px;
    }

    .quote span.meta a {
    top:33px;
    }

    .quote .byline {
    float:right;
    }

    .quote .source {
    font-family:"Lucida Grande", "Lucida Sans Unicode";
    font-size:11px;
    color:#fff;
    line-height:17px;
    font-variant:normal !important;
    }

    /* CHATS */

    .chat ul {
    margin:20px 0 0 0;
    }

    .chat ul li {
    list-style:none;
    font-family:"Lucida Grande", "Lucida Sans Unicode";
    font-size:11px;
    color:#fff;
    padding:8px;
    }

    .label {
    font-weight:bold;
    }

    li.odd {
    background:#1f1f1f;
    }

    li.even {
    background:#292929;
    }

    /* PAGENAV */
    #pagenav {
    margin:60px 0 0 0;
    }

    #pagenav .inner {
    text-align:center;
    position:relative;
    }

    #older, #newer {
    color:#262626;
    font-family:"Georgia";
    font-size:11px;
    text-transform:uppercase;
    padding:7px;
    background:#ffbc00;
    text-decoration:none;
    display:block;
    position:absolute;
    top:-2px;
    }

    #older:hover, #newer:hover {
    background:#ffc523;
    }

    #older {
    float:left;
    text-align:left;
    left:0px;
    }

    #newer {
    float:right;
    text-align:right;
    right:10px;
    }

    #pages {
    color:#888;
    font-family:"Georgia";
    font-size:11px;
    text-transform:uppercase;
    text-align:center;
    }

    /* FOOTER */

    #bottom {
    border-top:2px solid #ffbc00;
    border-bottom:2px solid #ffbc00;
    margin:80px 0 40px 0;
    font-family:"Lucida Grande";
    font-size:10px;
    color:#ccc;
    text-align:center;
    padding:13px 0 13px 0;
    }

    #bottomp {
    border-top:2px solid #ffbc00;
    border-bottom:2px solid #ffbc00;
    margin:0px 0 40px 0;
    font-family:"Lucida Grande";
    font-size:10px;
    color:#ccc;
    text-align:center;
    padding:13px 0 13px 0;
    }

    #bottom a, #bottom a:hover, #bottom b {
    color:#ccc;
    font-weight:bold;
    text-decoration:none;
    }

    </style>



    <!--[if IE]>
    <style type="text/css">
    #bottom {
    margin:100px 0 40px 0;
    }
    #top {
    margin:45px 0 155px 0;
    }
    .ttl a span {
    padding:0px 0px 0px 4px;
    }
    span.icon a, .iconp {
    top:5px;
    left:-37px;
    }
    span.meta a {
    top:38px;
    left:-54px;
    }
    #nav li a {
    color:#ffbc00;
    font-family:"Lucida Grande", "Lucida Sans Unicode";
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    padding:10px 10px 10px 10px;
    }
    #nav li a:hover, #nav li a.on {
    background:#262626;
    color:#ffc523;
    }
    </style>
    <![endif]-->

    </head>

    <body>
    <div id="wrapper">

    <div id="top">

    <div id="header">
    <h1><a href="/">{Title}</a></h1>
    <div>{Description} </div>
    </div>

    <ul id="nav">
    <li><a href="/">home</a></li>
    <li><a href="/archive">archive</a></li>
    <li><a href="{RSS} ">feed</a></li>
    </ul>
    <br class="clear">
    </div>

    <div id="main">

    {block:DayPage}<div id="daybox"><span id="day">{Month}&nbsp;{DayOfMonth},&nbsp;{Year}</span></div>{/block:DayPage}

    {block:Posts}
    <div class="post-content">

    {block:Link}
    <div class="post link">
    <span class="icon"><a href="{Permalink}">link</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    <span class="ttl"><a href="{URL}">{Name}<span>&raquo;</span></a></span>
    {block:Description}
    <div class="body">
    {Description}
    </div>
    {/block:Description}
    {block:RebloggedFrom}
    <div class="source">
    via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.
    </div>
    {/block:RebloggedFrom}
    </div>
    {/block:Link}

    {block:Quote}
    <div class="post quote">
    <span class="icon"><a href="{Permalink}">quote</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    <div class="body">
    {Quote}
    </div>
    {block:Source}
    <div class="source">
    &mdash;&nbsp;{Source}
    </div>
    {/block:Source}
    </div>
    {/block:Quote}

    {block:Chat}
    <div class="post chat">
    <span class="icon"><a href="{Permalink}">chat</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    {block:Title}<span class="ttl"><a href="{Permalink}">{Title}</a></span>{/block:Title}
    <ul>
    {block:Lines}
    <li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>
    {/block:Lines}
    </ul>
    {block:RebloggedFrom}
    <div class="source">
    via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.
    </div>
    {/block:RebloggedFrom}
    </div>
    {/block:Chat}

    {block:Text}
    <div class="post text">
    <span class="icon"><a href="{Permalink}">text</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    {block:Title}<span class="ttl"><a href="{Permalink}">{Title}</a></span>{/block:Title}
    <div class="body">
    {Body}
    </div>
    {block:RebloggedFrom}
    <div class="source">
    via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.
    </div>
    {/block:RebloggedFrom}
    </div>
    {/block:Text}

    {block:Photo}
    <div class="post photo">
    <span class="icon"><a href="{Permalink}">photo</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
    {block:Caption}
    <div class="body">
    {Caption}
    </div>
    {/block:Caption}
    {block:RebloggedFrom}
    <div class="source">
    via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.
    </div>
    {/block:RebloggedFrom}
    </div>
    {/block:Photo}

    {block:Video}
    <div class="post video">
    <span class="icon"><a href="{Permalink}">video</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    {Video-500}
    {block:Caption}
    <div class="body">
    {Caption}
    </div>
    {/block:Caption}
    {block:RebloggedFrom}
    <div class="source">
    via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.
    </div>
    {/block:RebloggedFrom}
    </div>
    {/block:Video}

    {block:Audio}
    <div class="post audio">
    <span class="icon"><a href="{Permalink}">audio</a></span>
    <span class="meta"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><b>{DayOfMonth}</b>&nbsp;{ShortMonth}</a></span>
    {AudioPlayerWhite}
    {block:Caption}
    <div class="body">
    {Caption}
    </div>
    {/block:Caption}
    <div class="source">
    played {FormattedPlayCount} times.{block:RebloggedFrom}&nbsp;via <a href="{ReblogParentURL}">{ReblogParentTitle}</a>.{/block:RebloggedFrom}
    </div>
    </div>
    {/block:Audio}
    {block:HasTags}
    <div class="tags">
    <p>{block:Tags}<a href="{TagURL}" class="single-tag">&#35;{Tag}</a> {/block:Tags}</p>
    </div>
    {/block:HasTags}
    </div>

    {/block:Posts}

    <div id="pagenav">
    <div class="inner">
    {block:IndexPage}
    {block:NextPage}<a id="older" href="{NextPage}">&larr;&nbsp;Wander back</a>{/block:NextPage}
    <span id="pages">Page {CurrentPage} of {TotalPages}</span>
    {block:PreviousPage}<a id="newer" href="{PreviousPage}">Go forth&nbsp;&rarr;</a>{/block:PreviousPage}
    {/block:IndexPage}


    {block:PermalinkPagination}
    {block:NextPost}<a id="newer" href="{NextPost}">Newer&nbsp;&rarr;</a> {/block:NextPost}
    <span id="pages">Permalink Page</span>
    {block:PreviousPost}<a id="older" href="{PreviousPost}">&larr;&nbsp;Older</a>{/block:PreviousPost}
    {/block:PermalinkPagination}

    </div>
    </div>

    </div>

    <br class="clear">

    <div id="bottom">
    <!-- Please do not remove the credit attribution here. Feel free to modify the rest of theme as you wish, however. --><b>Design</b> crafted by <a href="http://www.prshnth.com">Prashanth Kamalakanthan</a>. <b>Content</b> powered by <a href="http://www.tumblr.com/">Tumblr</a>.
    </div>

    </div>

    </body>

    </html>