tumblr-themes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blanc Tumblr Theme</title>
    <link rel="stylesheet" href="css/screen.css" type="text/css" />
    <link rel="icon" type="image/png" href="favicon.png">

    <style>
      body {
        font: 13px/1.4em 'Lucida Grande', Verdana, sans-serif;
        margin: 0;
        padding: 0 4em;
        color: rgb(60, 60, 60);
        background: white;}
      
      a {
        text-decoration: none;
        color: rgb(117, 118, 194);
        -webkit-transition: .2s color;}
        
        a:hover {
          color: rgb(107, 108, 184);
          text-decoration: underline;}
          
      section#main {
        max-width: 500px;
        width: auto;
        float: left;
        position: absolute;
        margin-left: 240px;
        margin-top: -75px;
      }
      
      
      
      body > header {
        font-family: Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        margin: 0 0 3em;}
        
        body > header h1 {
          display: inline-block;
          margin: 0;
          font-size: 1.5em;
          line-height: 1.2em;
          background: rgb(117, 118, 194);
          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;}
          
          body > header h1 a {
            text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
            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;}
        
      aside {
        display: block;
        width: auto;
        font: italic 1em/1.4em Georgia, 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-top: 1px dotted rgb(220, 220, 220);}
        
      
      article {
        border-bottom: 1px dotted rgb(220, 220, 220);
        margin: 5em 0 4em;
        padding-bottom: 1em;
        position: relative;
        max-width: 500px;
        width: auto;}
        
        article header h1 {
          font-size: 1.6em;
          margin: 1em 0;}
          
        article.answer .answer, article.answer .question h1 {
          font: 13px/1.4em 'Lucida Grande', Verdana, sans-serif;
          padding: 0;
          margin: 0;}
          
          article.answer .question h1 {
            font-weight: bold;}
            
          article.answer .answer {
            margin: 0 2em;}
          
        article.audio {}
        
          .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;}
              
              
          article.photo .zoom {
            float: right;
            font-size: 9px;
            position: relative;
            top: -19px;
            height: 18px;
            line-height: 18px;
            right: 0em;
            background: rgb(30, 30, 30);
            padding: 1px 7px 0px;
            color: rgb(220, 220, 220);
            -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: rgb(0, 0, 0);
              color: rgb(240, 240, 240);
              text-decoration: none;}
              
              
          article.chat .content {
            list-style: none;
            padding: 0;}
          
            article.chat .content li {
              padding: .2em 0;}
              
              article.chat .content li span {
                font-weight: bold;}
                
          article.link header h1 a {
            text-decoration: underline;
            color: rgb(60, 60, 60);
            -webkit-transition: color .2s;}
            
            article.link header h1 a:hover {
              color: rgb(20, 20, 20);
              text-decoration: none;}
                
          article.quote blockquote {
            margin: 1em 2em;
            padding: 0;
            font: italic 1.2em/1.5em Georgia, serif;}
            
          article.quote cite {
            margin: 1em 0;
            display: block;}
         
        .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;}
          
          
        #notes ol {
          list-style: none;
          padding: 0 2em;
          font-size: 11px;
          color: rgb(177, 177, 177);}
          
          #notes ol img {
            position: relative;
            top: 4px;
            padding-right: 3px;}
        
          #notes ol a {
            color: rgb(147, 147, 147);
            font-weight: bold;}
        
          #notes ol blockquote a {
            color: rgb(177, 177, 177);
            font-weight: normal;
            font-style: italic;}
          
            #notes ol blockquote a:hover {
              text-decoration: none;
              color: rgb(147, 147, 147);}
          
          
        .meta {
          height: 1.5em;}
          
          .meta a {
            color: rgb(177, 177, 177);
            font-size: 11px;
            -webkit-transition: all .3s;}
            
            .meta a:hover {
              color: rgb(147, 147, 147);
              text-decoration: none;}
  
            .meta time {
              float: right;}
          
        nav {
          margin: 1em 0;
          max-width: 500px;
          width: 100%;
          text-align: center;}
        
          nav a { margin: 0 2em; }
          
        footer {
          color: rgb(177, 177, 177);
          font-size: 11px;
          clear: both;
          text-align: right;
          padding: 2em 0;}
          
          
        .content blockquote {
          border-left: .3em solid rgb(177, 177, 177);}
        
        abbr[title=and] {
           font: italic 1.1em Baskerville, Georgia, serif;}
        
        cite {
          font-style: normal;}
          
        code {
          font: 0.9em/1.3em Menlo, 'Bitstream Vera Sans Mono', 'Lucida Console', 'Lucida Sans Typewriter', monospace;}

        .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, .video video, .video object embed {
          display: block;
          max-width: 100%;
          margin: 0 auto;}
          
        
        @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: -3em;
            padding-bottom: 4em;
            margin-bottom: -1em;
            border-bottom: 1px dotted rgb(220, 220, 220);
          }
          
          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;
          }
        }
          
          
        @media all and (max-width: 500px) {
          body {
            padding-left: 2em;
            padding-right: 2em;
          }
          
          body > header h1 a {
            left: -1em;}

          .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: 380px) {
          .audio img {
            width: 100%;
            display: block;
          }
              
          .audio header {
            width: auto;
            position: relative;
            top: 0;
            left: 0;
          }
        }
        
        article.photo.set iframe html {
          width: 100%;
        }
        
        article.photo.set iframe .photoset_row {
          width: 100% !important;
          height: auto !important;
          display: block !important;
        }
        article.photo.set iframe .photoset_row .photoset_photo {
          display: block !important;
        }
        
        article.photo.set iframe html body img {
          width: 20px !important;
        }
        
        
        
        body > header.logo h1 {
          background: transparent;
          -webkit-box-shadow: none;
          border: none;
        }
        
        body > header.logo h1:hover {
          top: -1.2em;
        }
        
        
        
    </style>
    
  </head>
  <body>

    <!--
    <header class="logo">
      <h1>
        <a href="#"><img src="../_images/logo.png" alt="The Tumble"></a>
      </h1>
    </header>
    -->
    
    <header>
      <h1>
        <a href="#">Blanc Tumblr Theme</a>
      </h1>
    </header>
    
    <aside>
      <nav>
        <a href="#">RSS</a>
        <a href="#">Archive</a>
        <a href="#">Ask</a>
      </nav>
      <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    
      
    </aside>
  
    <section id="main">
    
      <article class="text" class="reblog">
        <header>
          <h1>This is nice</h1>
        </header>
        
        <div class="content">
          <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <strong>reprehenderit in</strong> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
        </div>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes</a>
        </div>
          </article>
    
      <article class="photo set">
         <div id="photoset_8946693090" class="html_photoset">    
           <iframe class="photoset" scrolling="no" frameborder="0" height="476" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="../_iframe.html">
           </iframe>
         </div>

         <div class="caption"><p>From 50ftshadows</p></div>
       
       
       <div class="meta">
           <a href="#" class="permalink">
             <time datetime="2011-8-15T5:27:00">
               7 minutes ago
             </time>
           </a>
       </div>
     </article>
    
      <article class="text" class="reblog">
        <header>
          <h1>A Text Post</h1>
        </header>
        
        <div class="content">
          <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <strong>reprehenderit in</strong> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          
          <blockquote>
            <p>A wiki (i/ˈwɪki/ wik-ee) is a website that allows the creation and editing of any number of interlinked web pages via a web browser using a simplified markup language or a WYSIWYG text editor. Wikis are typically powered by wiki software and are often used collaboratively by multiple users. Examples include community websites, corporate intranets, knowledge management systems, and note services. The software can also be used for personal notetaking.</p>
            <p>Wikis serve different purposes. Some permit control over different functions (levels of access). For example editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules can be imposed for organizing content.</p>
            <p>Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work." "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word for "fast".</p>
          </blockquote>
          
          <cite>from <a href="http://en.wikipedia.org/wiki/Wiki">Wikipedia</a></cite>
          
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim <code>ad minim veniam</code>, quis <del>nostrud</del> <ins>exercitation</ins> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          
          <pre><code>def complex_reverse(str)
  letters = str.split('')
  buf = []
  letters.each do |l|
    buf = [l] + buf
  end
  buf.join('')
end

complex_reverse("god") #=> "dog"
</code></pre>
          
          <p>As shown above, complex is usually much worse and much slower, the standard way to reverse text would obviously be
          to call <code>#reverse</code> on the string, for example <code>"god".reverse</code>. A list of things to use is below.
          
          <ul>
            <li>KISS
              <ul>
                <li>Keep</li>
                <li>It
                  <ul>
                    <li>VERY</li>
                  </ul>
                </li>
                <li>Simple</li>
                <li>Stupid</li>
              </ul>
            </li>
            <li>Embrace simplicity...</li>
            <li>Even though anything truly simple is impossible</li>
          </ul>
          
          <h2>Ham Sandwich</h2>
          
          <p>Oh and numbered lists have not been forgotten...</p>
          
          <h3>Ingredients</h3>
          
          <ol>
            <li>Bread</li>
            <li>Butter</li>
            <li>Ham</li>
          </ol>
          
          <h3>Method</h3>
          
          <p>Combine in usual manner</p>
  
        </div>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes</a>
        </div>
      </article>
      
      <article class="photo">
        
        <img src="../_images/grass.jpg"/>
        
        <a href="#" class="zoom">View hi-res image</a>
        
        <div class="caption">
          <p>Wow isn't this a photo of grass.</p>
        </div>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes</a>
        </div>
      </article>
      
      <article class="video">
      
        <video src="/Users/Josh/Movies/Radiohead - Live from the Basement.mp4" controls width="500">
        This is fallback text to display if the browser does not support the video element.
        </video>
        
        <div class="caption">
          <p>Radiohead are the best</p>
        </div>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes</a>
        </div>
      </article>
      
      <article class="audio">
        
        <div class="artwork">
          <div class="mask"></div>
          <img src="../_images/artwork.jpg"/>
        </div>
        
        <header>
          <h1><strong>Alberto Blasalm</strong> Aphex Twin</h1>
          
          <div class="player">
            <audio src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3"></audio>
          
            <script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?16"></script><span id="audio_player_870566410">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span><script type="text/javascript">replaceIfFlash(9,"audio_player_870566410",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://tmblr.hawx.me/swf/audio_player.swf?audio_file=http://www.tumblr.com/audio_file/870566410/tumblr_l69pbm85AL1qb06wv&color=000000" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script>
          </div>
        </header>
  
        <div class="caption">
          <p>Easily the best song in the world</p>
        </div>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes <abbr title="and">&amp;</abbr> 5 plays</a>
        </div>
      </article>
      
      <article class="quote">
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </blockquote>
        <cite>
          <p>Some latin dude.</p>
          <p>Or was it? There are conflicting theories. But my point was to use lot's of text to see how it handles paragraphs.</p>
        </cite>
        
        <div class="meta">
            <a href="#" class="permalink"><time>17 Aug 2010</time></a>
            <a href="#" class="notes">5 notes</a>
          </div>
        </div>
      </article>
      
      <article class="chat">
        <header><h1>A Typical Day</h1></header>
        
        <ul class="content">
          <li><span class="me">Me: </span>What you doing?</li>
          <li><span>Other: </span>Nothing</li>
          <li><span class="me">Me: </span>Really?</li>
          <li><span>Other: </span>Yeah!</li>
          <li><span class="me">Me: </span>Okay, no need to get the gun out *walks off*</li>
        </ul>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
          <a href="#" class="notes">5 notes</a>
        </div>
      </article>
      
      <article class="link">
        <header><h1><a href="#">A Link to Some Cool Site</a></h1></header>
        
        <div class="content">
          <p>Some text describing how amazing the link above is, and optionally whether/why/if/who would want/do/something follow the link.</p>
        </div>
        
        <div class="meta">
          
            <a href="#" class="permalink"><time>17 Aug 2010</time></a>
            <a href="#" class="notes">5 notes</a>
          </div>
        </div>
      </article>
      
      <article class="answer">
        <header class="question">
          <h1><span class="name"><a href="#">Somebody</a> asks: </span>My question to you is this: What is this thing called an answer post?</h1>
        </header>
  
        <blockquote class="answer">
          <p>Well you can now look at this, 'cause you made one!.</p>
        </blockquote>
        
        <div class="meta">
          <a href="#" class="permalink"><time>17 Aug 2010</time></a>
        </div>
      </article>
      
      
      <section id="notes">
        <ol class="notes">
          <li class="note reblog tumblelog_joshhawxwell with_commentary">        
            <a href="http://tmblr.hawx.me/" title="@hawx">
              <img src="http://26.media.tumblr.com/avatar_cfd220f557b2_16.png" class="avatar" alt="">
            </a>
        
            <span class="action">
            
          <a href="http://tmblr.hawx.me/" class="tumblelog" title="@hawx">joshhawxwell</a>
           reblogged this from 
           <a href="http://fuckyeahconceptart.tumblr.com/" class="source_tumblelog" title="FUCK YEAH CONCEPT ART">fuckyeahconceptart</a>
            and added:                                                                                                                                                                                    </span>
            <div class="clear"></div>
            
            <blockquote>
            <a href="http://tmblr.hawx.me/post/10482937746" title="View post">
            My new favourite blog, fuckyeahconceptart.tumblr.com. People who draw concept art should be worshipped as gods.                            </a>
            </blockquote>
          </li>
          
        
        
        </li>
          <li class="note like without_commentary">
            <a href="#"><img src="http://assets.tumblr.com/images/default_avatar_16.gif" class="avatar"/></a>
            <span class="action"><a href="#">somebody</a> liked this</span>
            <div class="clear"></div>
          </li>
          <li class="note reblog without_commentary">
            <a href="#"><img src="http://assets.tumblr.com/images/default_avatar_16.gif" class="avatar"/></a>
            <span class="action"><a href="#">you</a> posted this</span>
            <div class="clear"></div>
          </li>
        </ol>
      </section> 
      
  
      <nav>
        <a href="#" class="newer">Newer</a>
        <a href="#" class="older">Older</a>
      </nav>
      
      
      <footer>
        <a href="http://blanc-theme.tumblr.com">Blanc theme</a> by <a href="http://tmblr.hawx.me">joshhawxwell</a><br/>
      </footer>

    <section>
  </body>
</html>