tumblr-themes

<!DOCTYPE html>
<html lang="en">
  <head>
  
    <!-- DEFAULT COLOURS -->
    <meta name="color:Background" content="#FFFFFF" /><!-- rgb(255, 255, 255) -->
    <meta name="color:Text" content="#1E1E1E" /><!-- rgb(30, 30, 30) -->
    <meta name="color:Text Highlight" content="#0A0A0A" /><!-- rgb(10, 10, 10) -->
    <meta name="color:Accent" content="#7576C2" /><!-- rgb(117, 118, 194) -->
    <meta name="color:Accent Highlight" content="#6B6CB8" /><!-- rgb(107, 108, 184) -->
    <meta name="color:Faint" content="#B1B1B1" /><!-- rgb(177, 177, 177) -->
    <meta name="color:Faint Highlight" content="#939393" /><!-- rgb(147, 147, 147) -->
    <meta name="color:Line" content="#DCDCDC" /><!-- rgb(220, 220, 220) -->
  
    <!-- DEFAULT FONTS -->
    <meta name="font:Title" content="Helvetica, Arial, sans-serif" />
    <meta name="font:Body" content="'Lucida Grande', Verdana, sans-serif" />
    <meta name="font:Mono" content="Menlo, 'Bitstream Vera Sans Mono', 'Lucida Console', 'Lucida Sans Typewriter', monospace" />
    <meta name="font:Serif" content="Georgia, serif" />
    
    <!-- DEFAULT OPTIONS -->
    <meta name="if:Use Wide Layout" content="1" />
    <meta name="if:Use Narrow Layout" content="1" />
    <meta name="if:Show Play Counts" content="1" />

    <meta name="image:Header" content="" />
    <meta name="if:Auto Size And Center Header Image" content="1" />
    
    <meta name="text:Footer Text" content="" />
  
  
    <meta charset="utf-8" />
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    {block:Description}
      <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    
    <meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
    
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      
      <style>
        body #main {
          margin-top: 0 !important;
        }
      </style>
      
    <![endif]-->
    
    <style>
    
      body {
        font: 13px/1.4em {font:Body};
        margin: 0;
        padding: 0 4em;
        color: {color:Text};
        background: {color:Background};
      }
        
      section#main {
        max-width: 500px;
        width: auto;
        float: left;
        position: absolute;
        margin-left: 240px;
        margin-top: -75px;
      }
      
      
      /* ASIDE ----------------------------------------------- */
      
      aside {
        display: block;
        width: auto;
        font: italic 1em/1.4em {font:Serif};
        width: 170px;
        float: left;
        position: absolute;
        margin-top: -2em;
        margin-left: 0px;}
      
        aside * {
          max-width: 170px;}
        
        aside nav {
          margin-bottom: 1.4em;}
        
          aside nav a {
            display: block;
            text-align: left;
            margin: 0;
            padding: .3em 0;
            border-bottom: 1px dotted {color:Line};}


      /* MAIN HEADER ------------------------------------------ */
      
      body > header {
        font-family: {font:Title};
        text-transform: uppercase;
        margin: 0 0 3em;}
        
        body > header h1 {
          display: inline-block;
          margin: 0;
          font-size: 1.5em;
          line-height: 1.2em;
          background: {color:Accent};
          border: 1px solid rgba(0, 0, 0, .1);
          -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), 
                              0 1px 2px rgba(0, 0, 0, .3);
          position: relative;
          top: -1.2em;
          left: -1em;
          padding: 1.5em 1em .4em;
          -webkit-transition: all .3s, top .1s;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);}
          
          body > header h1 a {
            color: rgb(250, 250, 250);}
            
          body > header h1:hover {
            top: -.7em;
            border: 1px solid rgba(0, 0, 0, .2);
            -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 
                                0 1px 3px rgba(0, 0, 0, .3);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);}
            
            body > header h1:hover a {
              text-decoration: none;
              color: white;}
        
        /* With header image */
        body > header.logo h1 {
          background: transparent;
          -webkit-box-shadow: none;
          border: none;}
        
          body > header.logo h1:hover {
            top: -1.2em;}
            
        {block:IfAutoSizeAndCenterHeaderImage}
        
          body > header.logo h1 img {
            width: 170px;}
        
        {/block:IfAutoSizeAndCenterHeaderImage}
        
      /* POSTS ------------------------------------------------ */
      
      article {
        border-bottom: 1px dotted {color:Line};
        margin: 5em 0 4em;
        padding-bottom: 1em;
        position: relative;
        max-width: 500px;
        width: auto;}
        
        article header h1 {
          font-size: 1.6em;
          margin: 1em 0;}
            
        /* ANSWER POSTS */
        article.answer .answer, article.answer .question h1 {
          font: 13px/1.4em {font:Body};
          padding: 0;
          margin: 0;}
          
          article.answer .question h1 {
            font-weight: bold;}
            
          article.answer .answer {
            margin: 0 2em;}
          
        /* AUDIO POSTS */
        .audio img {
          width: 140px;}
          
        .audio header {
          max-width: 340px;
          width: auto;
          position: absolute;
          top: 0;
          left: 160px;}
        
          .audio header h1 {
            font-weight: normal;
            font-size: 1.3em;}
        
          .audio header strong { 
            display: block; 
            font-weight: bold;
            font-weight: 1.8em;}
              
        /* PHOTO POSTS */
        article.photo .zoom {
          float: right;
          font-size: 9px;
          position: relative;
          top: -19px;
          height: 18px;
          line-height: 18px;
          padding: 1px 7px 0px;
          right: 0em;
          background: {color:Text};
          color: {color:Background};
          -webkit-border-top-left-radius: 5px;
          -moz-border-radius-topleft: 5px;
          -webkit-box-shadow: -1px -1px 0 rgba(255, 255, 255, .1);
          -webkit-transition: color .3s, background .3s;}
          
          article.photo .zoom:hover {
            background: {color:Text Highlight};
            text-decoration: none;}
              
        /* CHAT POSTS */
        article.chat .content {
          list-style: none;
          padding: 0;}
        
          article.chat .content li {
            padding: .2em 0;}
            
            article.chat .content li span {
              font-weight: bold;}
                
        /* LINK POSTS */
        article.link header h1 a {
          text-decoration: underline;
          color: {color:Text};
          -webkit-transition: color .2s;}
          
          article.link header h1 a:hover {
            color: {color:Text Highlight};
            text-decoration: none;}
              
        /* QUOTE POSTS */  
        article.quote blockquote {
          margin: 1em 2em;
          padding: 0;
          font: italic 1.2em/1.5em {font:Serif};}
          
        article.quote cite {
          margin: 1em 0;
          display: block;}
          
          
      /* POST NOTES ------------------------------------------- */
      
      #notes ol {
        list-style: none;
        padding: 0 2em;
        font-size: 11px;
        color: {color:Faint};}
        
        #notes ol img {
          position: relative;
          top: 4px;
          padding-right: 3px;}
      
        #notes ol a {
          color: {color:Faint Highlight};
          font-weight: bold;}
      
        #notes ol blockquote a {
          color: {color:Faint};
          font-weight: normal;
          font-style: italic;}
        
          #notes ol blockquote a:hover {
            text-decoration: none;
            color: {color:Faint Highlight};}
         
      
      /* POST METADATA ---------------------------------------- */
       
      .meta {
        height: 1.5em;}
        
        .meta a {
          color: {color:Faint};
          font-size: 11px;
          -webkit-transition: color .3s;}
          
          .meta a:hover {
            color: {color:Faint Highlight};
            text-decoration: none;}

          .meta time {
            float: right;}
            
      
      /* NAVIGATION ------------------------------------------- */
      
      nav {
        margin: 1em 0;
        max-width: 500px;
        width: 100%;
        text-align: center;}
      
        nav a { 
          margin: 0 2em;}
        
      
      /* FOOTER ----------------------------------------------- */
      
      footer {
        color: {color:Faint};
        font-size: 11px;
        clear: both;
        text-align: right;
        padding: 2em 0;}
       
      /* CONTENT STYLES --------------------------------------- */
       
      a {
        text-decoration: none;
        color: {color:Accent};
        -webkit-transition: .2s color;}
        
        a:hover {
          color: {color:Accent Highlight};
          text-decoration: underline;}
       
      .content h1 {
        font-size: 1.4em;}
          
      .content h2 {
        font-size: 1.25em;}
      
      .content h3 {
        font-size: 1.1em;}
        
      .content h1, .content h2, .content h3 {
        margin-top: 1.3em;}
        
        
      .content blockquote {
        border-left: .3em solid {color:Faint};}
      
      abbr[title=and] {
         font: italic 1.1em Baskerville, {font:Serif};}
      
      cite {
        font-style: normal;}
        
      code {
        font: 0.9em/1.3em {font:Mono};}

      .content blockquote, .content pre, .content ul, .content ol {
        padding: 0 1.4em;
        margin: 1.4em 0;}
      
      .content p {
        margin: 1.4em 0;}
      
      ul ol, ul ul, ol ul, ol ol { margin: 0 !important; }
        
      .photo img {
        display: block;
        max-width: 100%;
        margin: 0 auto;}
        
      /* http://webdesignerwall.com/tutorials/css-elastic-videos */
      .video-container {
      	position: relative;
      	padding-bottom: 56.25%;
      	padding-top: 30px;
      	height: 0;
      	overflow: hidden;
      }
      
      .video-container iframe,  
      .video-container object,  
      .video-container embed,
      .video-container video {
      	position: absolute;
      	top: 0;
      	left: 0;
      	width: 100%;
      	height: 100%;
      }
        
        
      /* SINGLE COLUMN __ONLY__ ------------------------------- */
      
      {block:IfNotUseWideLayout}
        body > header {
            max-width: 500px;
            width: auto;
            margin: 0 auto;
          }
        
          section#main {
            position: relative;
            float: none;
            margin: 0 auto;
          }
          
          aside {
            max-width: 500px;
            margin: 0 auto;
            width: 100%;
            position: relative;
            float: none;
            top: -2em;
            padding-bottom: 4em;
            margin-bottom: -1em;
          }
          
          aside * {
            max-width: 500px;
          }
          
          aside nav {
            width: auto;
            position: absolute;
            top: 0em;
            right: 0;
          }
          
          aside nav a {
            border: none;
            display: inline;
            margin: 0 1em 0;
            width: 100%;
          }
          
          aside .description {
            position: relative;
            top: 3em;
            margin: 0 2em;
          }
          
          {block:IfAutoSizeAndCenterHeaderImage}
            body > header.logo {
              text-align: center;
            }
          {/block:IfAutoSizeAndCenterHeaderImage}
      {/block:IfNotUseWideLayout}
         
         
      /* SINGLE COLUMN ---------------------------------------- */
      
      {block:IfUseNarrowLayout}
        @media all and (max-width: 840px) {
          body > header {
            max-width: 500px;
            width: auto;
            margin: 0 auto;
          }
        
          section#main {
            position: relative;
            float: none;
            margin: 0 auto;
          }
          
          aside {
            max-width: 500px;
            margin: 0 auto;
            width: 100%;
            position: relative;
            float: none;
            top: -2em;
            padding-bottom: 4em;
            margin-bottom: -1em;
          }
          
          aside * {
            max-width: 500px;
          }
          
          aside nav {
            width: auto;
            position: absolute;
            top: 0em;
            right: 0;
          }
          
          aside nav a {
            border: none;
            display: inline;
            margin: 0 1em 0;
            width: 100%;
          }
          
          aside .description {
            position: relative;
            top: 3em;
            margin: 0 2em;
          }
          
          {block:IfAutoSizeAndCenterHeaderImage}
            body > header.logo {
              text-align: center;
            }
          {/block:IfAutoSizeAndCenterHeaderImage}
        }
          
          
        @media all and (max-width: 500px) {
          body {
            padding-left: 2em;
            padding-right: 2em;
          }
          
          body > header h1 a {
            left: -2em;
          }

          .content blockquote, .content pre, .content ul, .content ol {
            padding: 0 1em;
          }
          
          article.quote blockquote {
            font-size: 1.1em;
            margin-left: 1em;
            margin-right: 1em;
          }
          
          aside {
            font-size: 0.9em;
          }
        }
        
        @media all and (max-width: 370px) {
          .audio img {
            width: 100%;
            display: block;
          }
            
          .audio header {
            width: auto;
            position: relative;
            top: 0;
            left: 0;
          }
        }
      {/block:IfUseNarrowLayout}
      
      {CustomCSS}
      
    </style>
    
  </head>
  <body>
    
    {block:IfHeaderImage}
      <header class="logo">
        <h1>
          <a href="/"><img src="{image:Header}" alt="{Title}"/></a>
        </h1>
      </header>
    {/block:IfHeaderImage}
    
    {block:IfNotHeaderImage}
      <header>
        <h1>
          <a href="/">{Title}</a>
        </h1>
      </header>
    {/block:IfNotHeaderImage}
    
    
    <aside>
      <nav>
        <a href="{RSS}">RSS</a>
        <a href="/archive">Archive</a>
        {block:AskEnabled}
          <a href="/ask">{AskLabel}</a>
        {/block:AskEnabled}
        {block:SubmitEnabled}
          <a href="/submit">{SubmitLabel}</a>
        {/block:SubmitEnabled}
      </nav>
      
      {block:Description}
        <div class="description">
          {Description}
        </div>
      {/block:Description}
    </aside>
  
    <section id="main">
    
      {block:Posts}
        {block:Text}
          <article class="text">
            {block:Title}
              <header><h1>{Title}</h1></header>
            {/block:Title}
            
            <div class="content">{Body}</div>
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Text}
        
        {block:Photo}
          <article class="photo">
            {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  
            {block:HighRes}
              <a href="{PhotoURL-HighRes}" class="zoom">View high-res image</a>
            {/block:HighRes}
            
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Photo}
        
        {block:Photoset}
          <article class="photo set">
            {Photoset-500}
            
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Photoset}
        
        {block:Video}
          <article class="video">
            <div class="video-container">
              {Video-500}
            </div>
            
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:IfShowPlayCounts}
              <a href="{Permalink}" class="notes">
                {block:NoteCount}{NoteCountWithLabel} <abbr title="and">&amp;</abbr> {/block:NoteCount}{PlayCountWithLabel}
              </a>
              {/block:IfShowPlayCounts}
              {block:IfNotShowPlayCounts}
                {block:NoteCount}
                  <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
                {/block:NoteCount}
              {/block:IfNotShowPlayCounts}
            </div>
          </article>
        {/block:Video}
        
        {block:Audio}
          <article class="audio">
            {block:AlbumArt}
              <div class="artwork">
                <div class="mask"></div>
                <img src="{AlbumArtURL}"/>
              </div>
            {/block:AlbumArt}
            
            <header>
              <h1>
                {block:TrackName}<strong>{TrackName}</strong> {/block:TrackName}
                {block:Artist}{Artist}{/block:Artist}
              </h1>
              
              <div class="player">{AudioPlayerBlack}</div>
            </header>
      
            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              
              {block:IfShowPlayCounts}
              <a href="{Permalink}" class="notes">
                {block:NoteCount}{NoteCountWithLabel} <abbr title="and">&amp;</abbr> {/block:NoteCount}{PlayCountWithLabel}
              </a>
              {/block:IfShowPlayCounts}
              {block:IfNotShowPlayCounts}
                {block:NoteCount}
                  <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
                {/block:NoteCount}
              {/block:IfNotShowPlayCounts}
            </div>
          </article>
        {/block:Audio}
        
        {block:Quote}
          <article class="quote">
            <blockquote>{Quote}</blockquote>
            {block:Source}
              <cite>{Source}</cite>
            {/block:Source}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Quote}
        
        {block:Chat}
          <article class="chat">
            {block:Title}
              <header><h1>{Title}</h1></header>
            {/block:Title}
            
            <ul class="content">
              {block:Lines}
                <li>{block:Label}<span class="{Name}">{Label}</span>{/block:Label} {Line}</li>
              {/block:Lines}
            </ul>
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Chat}
        
        {block:Link}
          <article class="link">
            <header><h1><a href="{URL}" {Target}>{Name}</a></h1></header>
  
            {block:Description}
              <div class="content">{Description}</div>
            {/block:Description}
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Link}
        
        {block:Answer}
          <article class="answer">
            <header class="question">
              <h1><span class="name">{Asker} asks:</span> {Question}</h1>
            </header>
            <blockquote class="answer">{Answer}</blockquote>
            
            <div class="meta">
              {block:Date}
                <a href="{Permalink}" class="permalink">
                  <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}">
                    {TimeAgo}
                  </time>
                </a>
              {/block:Date}
              {block:NoteCount}
                <a href="{Permalink}" class="notes">{NoteCountWithLabel}</a>
              {/block:NoteCount}
            </div>
          </article>
        {/block:Answer}   
        
      {/block:Posts}
  
  
      {block:PostNotes}
        <section id="notes">
        	{PostNotes}
        </section>
      {/block:PostNotes}
  
    
      
      {block:Pagination}
      	<nav>
      		{block:PreviousPage}
      		  <a href="{PreviousPage}" class="newer">Newer</a>
      		{/block:PreviousPage}
      		{block:NextPage}
      		  <a href="{NextPage}" class="older">Older</a>
      		{/block:NextPage}
      	</nav>
      {/block:Pagination}
      
      
      <footer>
        {text:Footer Text}<br/>
        <a href="http://blanc-theme.tumblr.com">Blanc theme</a> by <a href="http://tmblr.hawx.me">joshhawxwell</a>
      </footer>
      
    </section>
    
  </body>
</html>