Skip to content

Instantly share code, notes, and snippets.

@jslevine

jslevine/tumlbr_template.html

Forked from pamelafox/tumlbr_template.html
Created February 16, 2013 18:36
Show Gist options
  • Save jslevine/4968108 to your computer and use it in GitHub Desktop.
Save jslevine/4968108 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @pamelafox pamelafox created this gist Apr 12, 2012.
    262 changes: 262 additions & 0 deletions tumlbr_template.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,262 @@
    <!doctype html>
    <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name='description' content='{MetaDescription}'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link rel="stylesheet" media="screen" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    <title>{Title}</title>
    <link rel='alternate' type='application/rss+xml' href='{RSS}'>
    <style type="text/css" media="screen">
    body {
    padding-top: 50px;
    min-height: 100%;
    background-image: -ms-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
    background-image: -moz-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
    background-image: -o-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 501, color-stop(0, #EDEDED), color-stop(1, #FFFFFF));
    background-image: -webkit-radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
    background-image: radial-gradient(center, ellipse cover, #EDEDED 0%, #FFFFFF 100%);
    }

    .post {
    width: 710px;
    box-shadow: 0 0 6px #ccc;
    border-radius:0.25em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    margin: 0.5em auto 45px;
    border:1px solid #AAA;
    background: white;
    position: relative;
    }

    .post-inner {
    margin: 0 5px;
    padding: 40px 50px 30px;
    }

    .post-inner h1 a {
    color: #313131;
    font-weight: bold;
    }

    .post-inner p {
    margin-bottom: 15px;
    }

    .post-meta {
    color: #AAA;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;
    }

    .post-avatar {
    position: absolute;
    left: -35px;
    top: 50px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-style: 1px solid #ccc;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
    }

    .post-body img {
    border: 5px solid white;
    margin: 0 auto 30px;
    display: block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.51);
    }

    .post-body img.right {
    float: right;
    margin: 10px -120px 30px 40px;
    }

    .footer {
    margin-top: 45px;
    padding: 35px 0 36px;
    border-top: 1px solid #E5E5E5;
    }

    #disqus_thread {
    width: 670px;
    margin: auto;
    }

    </style>
    </head>
    <body>

    <!-- Topbar
    ================================================== -->
    <div id="header" class="navbar navbar-fixed-top" data-scrollspy="scrollspy" >
    <div class="navbar-inner">
    <div class="container">
    <div class="pull-left">
    <a class="brand" href="/">{Title}</a>
    </div>
    <ul class="nav">
    {block:PreviousPage}
    <li><a href="{PreviousPage}">Previous Page</a></li>
    {/block:PreviousPage}
    {block:NextPage}
    <li><a href="{NextPage}">Next Page</a></li>
    {/block:NextPage}
    {block:PreviousPost}
    <li><a href="{PreviousPost}">Previous Post</a></li>
    {/block:PreviousPost}
    {block:NextPost}
    <li><a href="{NextPost}">Next Post</a></li>
    {/block:NextPost}
    <li><a class="pull-right" href="/archive">Archive</a></li>
    </ul>
    </div>
    </div>
    </div>


    <div class="container">

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

    <div class="post-inner">
    {block:Text}
    {block:Title}
    <h1><a href='{Permalink}'>{Title}</a></h1>
    <div class="post-meta">

    <img class="post-avatar" src="{PortraitURL-64}" width="64" height="64">

    {Name} &mdash; {Month} {DayOfMonth}, {Year}</p>
    </div>
    </header>
    {/block:Title}
    <div class="post-body">
    {Body}
    </div>
    {/block:Text}

    {block:Photo}
    {LinkOpenTag}<img src='{PhotoURL-500}' alt='{PhotoAlt}'/>{LinkCloseTag}
    {block:Caption}
    <p>{Caption}</p>
    {/block:Caption}
    {/block:Photo}
    {block:Photoset}
    {Photoset-500}
    {block:Caption}
    <p>{Caption}</p>
    {/block:Caption}
    {/block:Photoset}
    {block:Quote}
    <p class='quote'>"{Quote}"</p>
    {block:Source}
    <p>{Source}</p>
    {/block:Source}
    {/block:Quote}
    {block:Link}
    <a href='{URL}' class='link' {Target}>{Name}</a>
    {block:Description}
    <p>{Description}</p>
    {/block:Description}
    {/block:Link}
    {block:Chat}
    {block:Title}
    <h3>{Title}</h3>
    {/block:Title}
    <table cellpadding='0' cellspacing='0' width='100%' border='0' class='chat'>
    {block:Lines}
    <tr class='{Alt}'>
    {block:Label}
    <td class='label'>{Label}</td>
    {/block:Label}
    <td>{Line}</td>
    </tr>
    {/block:Lines}
    </table>
    {/block:Chat}
    {block:Audio}
    <div class='audio'>
    <div class='audioLeft'>
    {AudioPlayerWhite}
    </div>
    <div class='audioRight'>
    {FormattedPlayCount} Plays
    </div>
    <br class='clear' />
    </div>
    {block:Caption}
    <p>{Caption}</p>
    {/block:Caption}
    {/block:Audio}
    {block:Video}
    {Video-500}
    {block:Caption}
    <p>{Caption}</p>
    {/block:Caption}
    {/block:Video}

    <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a></div>
    </div>
    </div>

    <script type="text/javascript">
    var disqus_url = "{Permalink}";
    var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    /**
    * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
    */
    (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://SHORTNAME.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=SHORTNAME">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
    {/block:Permalink}<script type="text/javascript">
    var disqus_shortname = 'SHORTNAME';
    (function () {
    var s = document.createElement('script'); s.async = true;
    s.src = 'http://SHORTNAME.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
    </script>

    {/block:Posts}

    <!-- Footer -->
    <div class="footer">
    {block:PreviousPage}
    <a href="{PreviousPage}">&#171; Previous</a>
    {/block:PreviousPage}

    {block:NextPage}
    <a href="{NextPage}">Next &#187;</a>
    {/block:NextPage}

    <a href="/archive">Archive</a>

    </div>
    <!-- /Footer -->

    </div>
    <!-- /container -->

    </body>
    </html>