API tools faq
paste
Advertisement
mariammrf_

Awesome Responsive Tumblr Theme

mariammrf_
Apr 15th, 2015
318
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html class="no-js" lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>
  7.      <link rel="shortcut icon" href="{Favicon}">
  8.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.         {block:Description}
  10.             <meta name="description" content="{MetaDescription}" />
  11.         {/block:Description}
  12.        
  13.         <!--
  14.        THEME BY SILENCETHROUGHWORDS.TUMBLR.COM
  15.        GITHUB: /BLARINGSILENCE
  16.        PLEASE DO NOT REMOVE CREDIT OR REDISTRIBUTE AS YOUR OWN
  17.        -->
  18.        
  19.         <!--Fonts-->
  20.       <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  21.       <link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
  22.       <link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
  23.       <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet' type='text/css'>
  24.       <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'>
  25.       <!--End Fonts-->
  26.       <!--External files-->
  27.     <link rel='stylesheet' href='http://static.tumblr.com/1yx5uxc/0n3nlywt6/foundation.css' />
  28.     <script src='http://static.tumblr.com/1yx5uxc/1Phnlywvg/modernizr.js'></script>
  29.     <script type='text/javascript' src='http://codysherman.tumblr.com/tools/infinite-scrolling/code'></script>
  30.     <link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css' />
  31.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  32.  
  33.     <!--External files-->
  34.     <!--Meta Values-->
  35.     <meta name="image:hero"/>
  36.     <meta name="image:profile side"/>
  37.     <meta name="if:Different Font For Text Posts" content="0"/>
  38.     <meta name="if:Header Has Credit" content="0"/>
  39.     <meta name="text:Header Art Credit"/>
  40.     <meta name="text:profile content"/>
  41.     <meta name="if:Blue Button" content="0"/>
  42.     <meta name="text:Blue Button Name"/>
  43.     <meta name="text:Blue Button Link"/>
  44.     <meta name="if:Show Profile" content="1"/>
  45.  
  46.    
  47.     <!--End Meta Values-->
  48.       <style>
  49.       ol.notes{
  50.           margin-left:25px;
  51.           list-style-type:none;
  52.          
  53.       }
  54.      
  55.     .avatar_frame{
  56.         display:block;
  57.     float:left;
  58.     position:relative;
  59.     margin:-2px 12px 0 0;
  60.     border-radius:2px}
  61.      
  62.        ol.notes li.note img.avatar {
  63.                 position:relative;
  64.                 top: 3px;
  65.                 margin-right: 10px;
  66.                 width: 20px;
  67.                 height: 20px;
  68.                 border-radius:100px;
  69.             }
  70.            
  71.             .like img{
  72.                <!--INSERT CSS-->
  73.             }
  74.            
  75.       p{
  76.           font-size:1rem;
  77.       }
  78.  
  79.       input[type="text"] {
  80.           width:10em;
  81.           margin-right:0.65em;
  82.     display:inline-block;
  83. }
  84.  
  85.     button{
  86.         padding-top: 0.625rem;
  87.     padding-right: 1.25rem;
  88.     padding-bottom: 0.6875rem;
  89.     padding-left: 1.25rem;
  90.     font-size: 0.8rem;
  91.     }
  92.      
  93.       body{
  94.           font-family: 'Open Sans', sans-serif;
  95.       }
  96.      
  97.     {block:IfDifferentFontForTextPosts}
  98.      @media only screen and (min-width: 64.063em) {
  99.          
  100.        .textpost{
  101.              {block:PermalinkPage}
  102.              font-family: 'Lora', serif;
  103.              {/block:PermalinkPage}
  104.          }
  105.      }{/block:IfDifferentFontForTextPosts}
  106.      
  107.       img{
  108.           display:block;
  109.           margin-left:auto;
  110.           margin-right:auto;
  111.           margin-bottom:0.375em;
  112.       }
  113.       .hero {
  114.   background:url('{image:hero}') no-repeat center center;
  115.   background-size: cover;
  116.   height: 60vh;
  117.   margin-bottom: 3rem;
  118. }
  119.  
  120.  
  121.  
  122. .footer {
  123.     width:100%;
  124.   background-color: #2980b9;
  125.   padding: 2rem 4rem;
  126.   text-align: center;
  127.   color: #fff;
  128. }
  129.  
  130. .footer .breadcrumbs a{
  131.     color:#000;
  132. }
  133.  
  134. .footer p, .footer a {
  135.   font-weight: 300;
  136.   font-size: .8em;
  137.   color: #fff;
  138. }
  139.  
  140.  
  141. .footer-links {
  142.   list-style-type: none;
  143. }
  144. .footer-links li {
  145.   margin-top: .5em;
  146. }
  147.  
  148. .footer i {
  149.   font-size: 100px;
  150. }
  151.  
  152.          
  153.         .hero .intro {
  154.     padding: 3rem;
  155.     position: relative;
  156.     top: 50%;
  157.     transform: translateY(-50%);
  158.     }
  159.          
  160.           .hero h1{
  161.               font-family: 'Rock Salt', sans-serif;
  162.              
  163.           }
  164.          
  165.           .hero h3{
  166.               font-family: 'Gochi Hand', sans-serif;
  167.              
  168.           }
  169.          
  170.           .profile-card h1, .profile-card h2, .profile-card h3, .profile-card h4, .profile-card h5, .profile-card h6{
  171.               font-family: 'Handlee', sans-serif;
  172.              
  173.           }
  174.          
  175.           .tempwarning h3{
  176.               color:white;
  177.           }
  178.          
  179.           .posts {
  180.               background-color:white;
  181.               border-style: solid;
  182.               border-color: #e6e6e6;
  183.               border-width: 1px;
  184.               border-radius: 5px ;
  185.               margin:0.65em;
  186.               padding:0.65em;
  187.           }
  188.          
  189.          .note{
  190.              margin: 0.375em;
  191.              padding:0.65em;
  192.          }
  193.          
  194.          .timestamp{
  195.             margin:0.65em;
  196.  
  197.          }
  198.          
  199.           .timestamp h4{
  200.               font-family: 'Handlee', sans-serif;
  201.               color: #df8460;
  202.           }
  203.          
  204.           img.center-me{margin-left: auto;
  205.     margin-right: auto;
  206.     display:block;
  207.           }
  208.          
  209.           /* --- AUDIO ---*/
  210. .audio {
  211.     height:60px;
  212.     margin-bottom:40px;
  213. }
  214.  
  215. .audio-album {
  216.     position:absolute;
  217.     width:100px;
  218.     padding:3px;
  219.     border:1px solid #E1E1E1;
  220.     -webkit-transition: opacity 0.1s linear;
  221.     opacity: 1;
  222. }
  223.  
  224. .audio-player {
  225.     opacity:1;
  226.     filter:alpha(opacity=90);
  227.     width:25px;
  228.     height:25px;
  229.     overflow:hidden;
  230.     position:absolute;
  231.     border:30px;
  232.     z-index:2;
  233.     margin-left:43px;
  234.     margin-top:43px;
  235.     opacity:0;
  236.        -webkit-transition: all 0.6s ease-out;
  237.        -o-transition: all 0.6s ease-out;
  238.        -webkit-transition: all 0.6s ease-out;
  239.        -moz-transition: all 0.6s ease-out;
  240. }
  241.  
  242. .audio-info {
  243.     margin-top:7px;
  244.     position:relative;
  245.     margin-left:120px;
  246.     line-height:180%;
  247.     padding:2px;
  248. }
  249.  
  250. .audio:hover .audio-player {
  251.     opacity:.6;
  252.        -webkit-transition: all 0.6s ease-out;
  253.        -o-transition: all 0.6s ease-out;
  254.        -webkit-transition: all 0.6s ease-out;
  255.        -moz-transition: all 0.6s ease-out;
  256. }
  257.  
  258.  
  259. .ask {
  260.   background: #ebf3f5;
  261.   padding: 15px 20px 5px 15px;
  262.   border-radius: 5px;
  263.   margin-bottom: 30px;
  264. }
  265. .ask:after {
  266.   content: '';
  267.   width: 0px;
  268.   height: 0px;
  269.   border-style: solid;
  270.   border-width: 20px 18px 0 18px;
  271.   border-color: #ebf3f5 transparent transparent transparent;
  272.   position: relative;
  273.   top: 37px;
  274.   left: 20px;
  275. }
  276.  
  277. .asker {
  278.   margin-left: 25px;
  279.   margin-bottom: 80px;
  280. }
  281. .asker .photo {
  282.   background-color: #ccc;
  283.   border-radius: 100px;
  284.   width: 48px;
  285.   height: 48px;
  286.   float: left;
  287.   margin-right: 10px;
  288. }
  289.  
  290. img.person{
  291.     border-radius:100px;
  292. }
  293. .asker p {
  294.   position: relative;
  295.   top: 5px;
  296. }
  297. .asker p:nth-child(2) {
  298.   font-size: 16px;
  299.   font-weight: 600;
  300.   margin-bottom: 0;
  301. }
  302. .asker p:nth-child(3) {
  303.   font-size: 14px;
  304.   color: #777;
  305. }
  306.  
  307.  
  308.  
  309. .user_1 .label {font-weight:normal; font-style:italic;}
  310. .user_2 .label {font-weight:normal; font-style:italic; }
  311. .user_3 .label {font-weight:normal; font-style:italic;}
  312. .user_4 .label {font-weight:normal; font-style:italic; }
  313. .user_5 .label {font-weight:normal; font-style:italic;}
  314. .user_6 .label {font-weight:normal; font-style:italic; }
  315. .ul.chat {}
  316. .chat ol {}
  317. .chat li {list-style:none; font-family: 'Open Sans', sans-serif; font-style: none; }
  318.  
  319.  
  320.  
  321.       </style>
  322.       <style>
  323.       iframe#tumblr_controls {
  324. top: 6% !important;
  325. right:0% !important;
  326. position: fixed !important;}
  327.       {CustomCSS}</style>
  328.      
  329.      
  330.   </head>
  331.   <body>
  332.      
  333.       <!---Mobile Menu--->
  334.       <div class="off-canvas-wrap" data-offcanvas>
  335.       <div class="inner-wrap">
  336.           <nav class="tab-bar hide-for-medium-up">
  337.           <section class="left-small"><a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a></section>
  338.         <section class="middle tab-bar-section"><h1 class="title">Scribe of Fandom</h1></section>
  339.           </nav>
  340.          
  341.           <aside class="left-off-canvas-menu"><ul class="off-canvas-list">
  342.               <li><a href="/">Home</a></li>
  343.                 {block:HasPages}{block:Pages}
  344.               <li><a href="{URL}">{Label}</a></li>
  345.                 {/block:Pages}
  346.                {/block:HasPages}
  347.               <li><a href="/ask">Ask</a></li>
  348.               <li><a href="/submit">Submit</a></li>
  349.               </ul></aside>
  350.           <section class="main-section">
  351.            <!---End Mobile Menu--->  
  352.     <!---Bigger Screen Menu--->
  353.       <div class="show-for-medium-up sticky">
  354.         <nav class="top-bar"  data-topbar role="navigation">
  355.         <section class="top-bar-section">
  356.             <ul class="left">
  357.                 <li><a href="/">Home</a></li>
  358.                  {block:HasPages}{block:Pages}
  359.                  <li class="divider"></li>
  360.                 <li><a href="{URL}">{Label}</a></li>
  361.                 {/block:Pages}
  362.                  {/block:HasPages}
  363.                 {block:IfBlueButton}<li class="active" target="_blank"><a href="{text:Blue Button Link}">{text:Blue Button Name}</a></li>{/block:IfBlueButton}</ul>
  364.            
  365.             </section>
  366.         </nav>
  367.       </div>
  368.     <!---End Bigger Screen Menu--->
  369.     <!--Main Content-->
  370.               <!--Hero Image/Banner-->
  371.                   <section class="hero has-tip" {block:IfHeaderHasCredit}data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" title="{text:Header Art Credit}"{/block:IfHeaderHasCredit} >
  372.                 <div class="row intro">
  373.                     <div class="small-centered medium-uncentered medium-6 large-7 columns">
  374.                     <h1>{Title}</h1>
  375.                         <h3>{Description}</h3>    
  376.                     </div>  
  377.                   </div>
  378.                        
  379.               </section>
  380.               <!--End Hero Image/Banner-->
  381.               <!--Temp Warning-->
  382.               <div class="row tempwarning">
  383.               <div class="small-12 columns">
  384.               <div data-alert class="alert-box info" style="display:none;">
  385.  <h3>Psst, sweetheart...</h3>
  386.  <p>We're celebrating this blog's 2K with imagines! <a target="_blank" href="http://silencethroughwords.tumblr.com/post/114889583175/um-holy-crap-thank-you-each-and-every-one-of">Come join us!</a></p>
  387.   <a href="#" class="close">&times;</a>
  388. </div>
  389. </div>
  390. </div>
  391.             <!--End Temp Warning-->
  392.               <!--Profile-->
  393.               {block:IfShowProfile}
  394.               {block:IndexPage}
  395.               <div class="row show-for-medium-up">
  396.               <div class="large-4 columns">
  397.                   <img src='{image:profile side}'>
  398.                   </div>
  399.                   <section class="profile-card">
  400.                   <div class="large-8 columns">
  401.                       {text:profile content}
  402.                      
  403.                       </div>
  404.           <hr>
  405.                   </section>
  406.               </div>
  407.               {/block:IndexPage}
  408.               {/block:IfShowProfile}
  409.               <!--End Profile-->
  410.       <!--Posts-->
  411.      
  412.       <div class="row">
  413.       <div class="small-12 large-8 large-centered columns">
  414.       {block:Posts inlineMediaWidth="500"}
  415.      
  416.       <div class="posts">
  417.      
  418.       {block:Text}<h3>{block:Title}<a href="{Permalink}">{Title}</a>{block:Title}</h3><div class="textpost"><p>{Body}</p></div>{/block:Text}
  419.          
  420.           {block:Photo}{LinkOpenTag}<img class="center-me" src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}<p>{Caption}</p>{/block:Caption}{/block:Photo}
  421.           {block:Link}<h3><a href="{URL}" {Target}>{Name}</a></h3>{block:Description}{Description}{/block:Description}{/block:Link}
  422.          
  423.           {block:Photoset}<div align="center">{Photoset-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  424.          
  425.           {block:Quote}<div><h3><em>"{Quote}"</em></h3></div>{block:Source} <div>—{Source}</div>{/block:Source}{/block:Quote}
  426.          
  427.           {block:Audio}
  428. <div class="audio">
  429. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  430. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  431.  
  432.  
  433. <div class="audio-info">
  434. {block:TrackName}<b>Title:</b> {TrackName}<BR>{/block:TrackName}
  435. {block:Artist}<b>Artist:</b> {Artist}<BR>{/block:Artist}
  436. {block:Album}<b>Album:</b> {Album}<BR>{/block:Album}
  437. {block:PlayCount}<b>Plays:</b> {PlayCount}<BR>{/block:PlayCount}
  438. </div></div>
  439. <div class="audiocaption">{block:Caption}<p>{Caption}</p>{/block:Caption}</div>
  440. {/block:Audio}
  441.  
  442. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  443.  
  444.  
  445. {block:Answer}<div class="ask"><p>{Question}</p></div>
  446. <div class="asker"><div class="photo"><img class="person" src="{AskerPortraitURL-96}"></div>
  447.     <p>{Asker}</p>
  448. </div>
  449. <div> <p>{Answer}</p></div>
  450. {/block:Answer}
  451.      
  452.       {block:Chat}<ul class="chat">{block:Title}{Title}{/block:Title} {block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  453.           <!--Notes and whatnot-->
  454.           <div class="row  note">
  455.           <hr>
  456.           {block:NoteCount}<div class="small-2 columns"><h4><small><a href="{Permalink}#notes">{NoteCountWithLabel}</a></small></h4></div>{/block:NoteCount}
  457.           {block:IndexPage}<div class="show-for-large-up large-8 columns"><h4><small>{block:HasTags}<a href="{Permalink}" class="has-tip tip-right" data-tooltip aria-haspopup="true" title="{block:Tags}#{Tag} {/block:Tags}">Tags</a>{/block:HasTags}</small></h4></div>{/block:IndexPage}
  458.          
  459.           {block:PermalinkPage}<div class="small-6 large-8 columns">{block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}</div>{/block:PermalinkPage}
  460.           <div class="small-4 large-2 columns end">
  461.           <a class="right">{LikeButton}</a>
  462.           <a class="left">
  463.               {ReblogButton}
  464.           </a>
  465.              
  466.          
  467.           </div>
  468.             <div class="row">
  469.             <div class="small-12 columns timestamp">
  470.                 <a name="notes"></a>
  471.                 <a href="{Permalink}"><h4><small>posted {TimeAgo}</small></h4></a>
  472.             </div>
  473.         </div>
  474.           {block:PostNotes}<div class="row">
  475.               <div class="small-12 large-12 columns">
  476.                  {PostNotes-64}
  477.               </div>
  478.           </div>{/block:PostNotes}
  479.          
  480.          
  481.          
  482.           <!--End Notes and whatnot-->
  483.       </div>
  484.       </div>
  485.       {/block:Posts}</div>
  486.       {block:Pagination}
  487.       <div class="row">
  488.           <div class="small-8 large-4 small-centered columns">
  489.               <ul class="pagination" role="menubar" aria-label="Pagination">
  490.                   {block:PreviousPage}<li class="arrow"><a href="{PreviousPage}">&laquo; Previous</a></li>{/block:PreviousPage}
  491.                   <li class="current"><a href="">{CurrentPage}</a></li>
  492.                   <li class="unavailable" aria-disabled="true"><a href="">of {TotalPages}</a></li>
  493.                   {block:NextPage}<li class="arrow"><a href="{NextPage}">Next &raquo;</a></li>{/block:NextPage}
  494.               </ul>
  495.           </div>
  496.       </div>
  497.       {/block:Pagination}
  498.       <!--End Posts-->
  499.      
  500.      
  501.    
  502.                </section>
  503.           <a class="exit-off-canvas"></a>
  504.           </div>
  505.          
  506.       </div>
  507.        <!--Footer-->
  508.      
  509.       <footer class="footer">
  510.           <div class="row">
  511.           <div class="small-7 columns small-centered">
  512.           <ul class="breadcrumbs">
  513.   <li><a href="/">Home</a></li>
  514.   <li><a href="/ask">Ask</a></li>
  515.   <li><a href="/submit">Submit</a></li>
  516.   <li><a href="http://silencethroughwords.tumblr.com">Theme Credit</a></li>
  517. </ul></div>
  518.     <div class="small-12 columns">
  519.    
  520.     <p>© {CopyrightYears}</p>
  521.     </div>
  522.      
  523.     </div>
  524.   </div>
  525.  
  526.       </footer>
  527.    
  528.       <!--End Footer-->
  529.    
  530.     <script src="http://static.tumblr.com/1yx5uxc/0Tynlyx01/jquery.js"></script>
  531.     <script src="http://static.tumblr.com/1yx5uxc/1SOnlyx10/foundation.min.js"></script>
  532.     <script>
  533.       $(document).foundation();
  534.     </script>
  535.     <script>
  536.   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  537.   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  538.   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  539.   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  540.  
  541.   ga('create', 'UA-13306630-4', 'auto');
  542.   ga('send', 'pageview');
  543.  
  544. </script>
  545.  
  546.   </body>
  547. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!