API tools faq
paste
bychloethemes

Staircase Theme V2 - by Chloe

bychloethemes
Jul 28th, 2015
834
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10. Staircase Theme V2 by Chloe | @dontbrag | @bychloethemes
  11. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
  12. -->
  13. <meta name="image:Background" content="http://static.tumblr.com/c9b44bb34278049f70ef9ecf87df0191/4ff2ano/zAenlg3di/tumblr_static_d8zbrfbohn48o8c4c8cc8sg44.png" />
  14.  
  15. <meta name="color:Background" content="#fff" />
  16. <meta name="color:Post Background" content="#f6f6f6" />
  17. <meta name="color:Text" content="#000" />
  18. <meta name="color:Links" content="#000" />
  19. <meta name="color:Accent" content="#989898" />
  20.  
  21. <meta name="select:Columns" content="twocol" title="2" >
  22. <meta name="select:Columns" content="threecol" title="3" >
  23. <meta name="select:Columns" content="fourcol" title="4" >
  24.  
  25. <meta name="if:Tiled Background" content="1" />
  26. <meta name="if:Archive link" content="1" />
  27. <meta name="if:Pagination" content="1" />
  28. <meta name="if:Captions" content="0" />
  29.  
  30. <meta name="text:Link 1" content="" />
  31. <meta name="text:URL 1" content="" />
  32. <meta name="text:Link 2" content="" />
  33. <meta name="text:URL 2" content="" />
  34. <meta name="text:Link 3" content="" />
  35. <meta name="text:URL 3" content="" />
  36. {block:Description}
  37. <meta name="description" content="{MetaDescription}" />
  38. {/block:Description}
  39. <meta charset="utf-8">
  40. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  41. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  42.  
  43. <link rel="shortcut icon" href="{Favicon}">
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  45. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  46. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  47. <meta charset="utf-8">
  48. <style type="text/css">
  49. /*Basic styles*/
  50. body {
  51. background:{color:Background} url('{image:Background}') {block:IfNotTiledBackground}no-repeat center center fixed;
  52. -webkit-background-size: cover;
  53. -moz-background-size: cover;
  54. -o-background-size: cover;
  55. background-size: cover;{/block:IfNotTiledBackground}
  56. {block:IfTiledBackground}
  57. repeat;
  58. background-attachment:fixed;
  59. {/block:IfTiledBackground}
  60.  
  61. font-family: 'times';
  62. color:{color:Text};
  63. }
  64. iframe, img, embed, object, video {
  65. max-width: 100%;
  66. }
  67. img {
  68. height: auto;
  69. width: auto;
  70. vertical-align:middle;
  71. }
  72. blockquote {
  73. border-left: 1px solid {color:Accent};
  74. margin:0 0 0 10px;
  75. padding: 0 0px 0 5px;
  76. }
  77. cite {
  78. padding: 20px;
  79. }
  80. a {
  81. color:{color:Links};
  82. text-decoration:none;
  83. font-style:italic;
  84. }
  85. a:hover {
  86. text-decoration:underline;
  87. }
  88. a:focus {
  89. outline:none;
  90. }
  91. #content {
  92. {block:PermalinkPage}
  93. width:520px;
  94. {/block:PermalinkPage}
  95. margin-left: auto;
  96. margin-right:auto;
  97. {block:IfPagination}
  98. margin-bottom:40px;
  99. {/block:IfPagination}
  100. top:150px;
  101. }
  102. {block:IndexPage}
  103. .twocol {
  104. width:610px;
  105. }
  106. .threecol {
  107. width:910px;
  108. }
  109. .fourcol {
  110. width:1200px;
  111. }
  112. {/block:IndexPage}
  113. .header {
  114. text-align:center;
  115. width:100%;
  116. z-index:9999999;
  117. position:fixed;
  118. top:0;
  119. }
  120. .header:before {
  121. background:{color:Background} url('{image:Background}') {block:IfNotTiledBackground}no-repeat center center fixed;
  122. -webkit-background-size: cover;
  123. -moz-background-size: cover;
  124. -o-background-size: cover;
  125. background-size: cover;{/block:IfNotTiledBackground}
  126. {block:IfTiledBackground}
  127. repeat;
  128. background-attachment:fixed;
  129. {/block:IfTiledBackground}
  130. content:'';
  131. width:100%;
  132. position:absolute;
  133. height:100%;
  134. top:0;
  135. left:0;
  136. z-index:-9;
  137. }
  138. .header ul.navlinks {
  139. padding:0;
  140. list-style-type:none;
  141. }
  142. .header ul.navlinks li {
  143. display:inline-block;
  144. margin:0 2px;
  145. }
  146. article {
  147. background: {color:Post Background};
  148. margin-top:20px;
  149. {block:IndexPage}
  150. margin-right:15px;
  151. margin-left:15px;
  152. {/block:IndexPage}
  153. margin-bottom:20px;
  154. {block:IndexPage}
  155. width: 250px;
  156. {/block:IndexPage}
  157. {block:PermalinkPage}
  158. width: 500px;
  159. {/block:PermalinkPage}
  160. padding: 10px;
  161. outline-offset:-10px;
  162. border-radius:0px;
  163. font-size:14px;
  164. box-shadow:2px 2px 3px rgba(0,0,0,0.2);
  165. }
  166. article h1 {
  167. font-weight:bold;
  168. letter-spacing:2.5px;
  169. text-shadow: 1px 1px 0px #ccc;
  170. margin: 0px;
  171.  
  172. }
  173. article .asker {
  174. border-radius:0px;
  175. float:left;
  176. }
  177. article .whoasked {
  178. margin:0px 5px 0px 0px;
  179. float:left;
  180. background:#ccc;
  181. color:#000;
  182. height:30px;
  183. line-height:30px;
  184. border-radius:0px;
  185. padding:0px 6px;
  186. text-transform:lowercase;
  187. }
  188. article .whoasked a {
  189. color:#000;
  190. }
  191. article .whoasked a:hover {
  192. font-style:italic;
  193. }
  194. article hr {
  195. border:0px solid;
  196. height:1px;
  197. background:{color:Accent};
  198. }
  199. article .question {
  200. line-height:16px;
  201. min-height:30px;
  202. }
  203. .chat ul {
  204. list-style-type:none;
  205. padding:0;
  206. }
  207. .tumblr_audio_player {
  208. height: 30px;
  209. width: 500px;
  210. opacity:0.7;
  211. }
  212. .albumart {
  213. position:absolute;
  214. width:60px;
  215. height:60px;
  216. }
  217.  
  218. .albumart img {
  219. float:left;
  220. margin-left:5px;
  221. width:60px;
  222. height:60px;
  223. }
  224.  
  225. .playbox {
  226. opacity:0.6;
  227. width:30px;
  228. height:30px;
  229. border-radius:15px;
  230. -webkit-border-radius:15px;
  231. -moz-border-radius:15px;
  232. -o-border-radius:15px;
  233. overflow:hidden;
  234. position:absolute;
  235. z-index:2;
  236. margin-left:21px;
  237. margin-top:16px;
  238. }
  239.  
  240. .audioinfo {
  241. margin-top:2px;
  242. line-height:14px;
  243. padding-left:5px;
  244. min-height:60px;
  245. border-left:1px solid {color:Accent};
  246. {block:IndexPage}
  247. margin-left:75px;
  248. {block:IndexPage}
  249. }
  250. .metadata {
  251. padding-top:10px;
  252. font-size:15px;
  253. }
  254. .permas {
  255. position: relative;
  256. display: inline-block;
  257. margin: 2px 2px 0px 2px;
  258. cursor: pointer;
  259. opacity: .2;
  260. filter: alpha(opacity=20);
  261. }
  262. .permas:hover, .permas.active {
  263. opacity: 1; filter: alpha(opacity=100);
  264. }
  265.  
  266. ::-moz-selection {
  267. background: {color:Accent};
  268. color: #fff;
  269. opacity: 0.65;
  270. }
  271.  
  272. ::selection {
  273. background: {color:Accent};
  274. color: #fff;
  275. opacity: 0.65;
  276. }
  277. ul#tags {
  278. list-style-type:none;
  279. padding:0;
  280. margin:10px 0;
  281. }
  282. ul#tags li {
  283. display:inline-block;
  284. margin:5px;
  285. }
  286. ol.notes {
  287. padding: 0px;
  288. list-style-type: none;
  289. }
  290.  
  291. ol.notes li.note {
  292. padding:0;
  293. text-align:left;
  294. line-height:16px;
  295. width:100%;
  296. border:0;
  297. border-radius:0;
  298. background:transparent;
  299. padding-top:5px;
  300.  
  301. }
  302.  
  303. ol.notes li.note img.avatar {
  304. display:none;
  305. }
  306.  
  307. ol.notes li.note span.action {
  308. font-weight: normal;
  309. }
  310.  
  311. ol.notes li.note .answer_content {
  312. font-weight: normal;
  313. }
  314. #infscr-loading {
  315. position:fixed!important;
  316. bottom:0;
  317. width:20px;
  318. left:150px;
  319. z-index:999999999999999;
  320. color:{color:Text};
  321. }
  322. #infscr-loading img{
  323. display:none;
  324. }
  325. .pagination {
  326. position:fixed;
  327. bottom:10px;
  328. right:15px;
  329. font-size:28px;
  330. word-spacing:5px;
  331. text-shadow:1px 1px #fff;
  332. }
  333. .current_page {
  334. text-decoration:underline;
  335. }
  336. /*Custom CSS*/
  337. {CustomCSS}
  338. </style>
  339. </head>
  340. <body>
  341. <div class="contain">
  342. <div class="header">
  343. <h1><a href="/">{Title}</a></h1>
  344. <p>{Description}</p>
  345. <ul class="navlinks">
  346. {block:AskEnabled}
  347. <li><a href="/ask">ask</a>&nbsp;&nbsp;.</li>
  348. {/block:AskEnabled}
  349. {block:SubmissionsEnabled}
  350. <li><a href="/submit">submit</a>&nbsp;&nbsp;.</li>
  351. {/block:SubmissionsEnabled}
  352. {block:HasPages}
  353. {block:Pages}
  354. <li><a href="{URL}">{Label}</a>&nbsp;&nbsp;.</li>
  355. {/block:Pages}
  356. {/block:HasPages}
  357. {block:IfLink1}
  358. <li><a href="{text:URL 1}">{text:Link 1}</a>&nbsp;&nbsp;.</li>
  359. {/block:IfLink1}
  360. {block:IfLink2}
  361. <li><a href="{text:URL 2}">{text:Link 2}</a>&nbsp;&nbsp;.</li>
  362. {/block:IfLink2}
  363. {block:IfLink3}
  364. <li><a href="{text:URL 3}">{text:Link 3}</a>&nbsp;&nbsp;.</li>
  365. {/block:IfLink3}
  366. {block:IfArchiveLink}
  367. <li><a href="/archive">past</a>&nbsp;&nbsp;.</li>
  368. {/block:IfArchiveLink}
  369. <li><a href="http://dontbrag.tumblr.com">theme</a></li>
  370. </ul>
  371. </div>
  372. <div id="content" class="{select:Columns}">
  373. {block:Posts}
  374. <article>
  375. <!--Unique code for each post type-->
  376. {block:Text}
  377. <div class="text">
  378. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  379. {Body}
  380. {/block:Text}
  381.  
  382. {block:Photo}
  383. <div class="photo">
  384. {block:IndexPage} <a href="{Permalink}">
  385. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></a>
  386. {block:IfCaptions}
  387. {block:Caption}{Caption}{/block:Caption}
  388. {/block:IfCaptions}
  389. {/block:IndexPage}
  390. {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  391. {block:Caption}{Caption}{/block:Caption}
  392. {/block:PermalinkPage}
  393. {/block:Photo}
  394.  
  395.  
  396. {block:Photoset}
  397. <div class="photoset">
  398. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  399. {block:IndexPage}
  400. {block:IfCaptions}
  401. {block:Caption}{Caption}{/block:Caption}
  402. {/block:IfCaptions}
  403. {/block:IndexPage}
  404. {block:PermalinkPage}
  405. {block:Caption}{Caption}{/block:Caption}
  406. {/block:PermalinkPage}
  407. {/block:Photoset}
  408.  
  409. {block:Quote}
  410. <div class="quote">
  411. <p>&ldquo;{Quote}&rdquo;</p>
  412. {block:Source}<p><cite> &mdash;{Source}</cite></p>{/block:Source}
  413. {/block:Quote}
  414.  
  415. {block:Link}
  416. <div class="link">
  417. <h1><a href="{URL}">{Name}</a></h1>
  418. {block:Description}{Description}{/block:Description}
  419. {/block:Link}
  420.  
  421. {block:Chat}
  422. <div class="chat inner">
  423. <ul>
  424. {block:Lines}<li class="{Alt}"><p>{block:Label}
  425. <u>{Label}</u>{/block:Label} {Line} </p>
  426. </li>{/block:Lines}
  427. </ul>
  428. {/block:Chat}
  429.  
  430. {block:Audio}
  431. <div class="audio">
  432. {block:IndexPage}
  433. {block:AlbumArt}
  434. <div class="albumart">
  435. <a href="{Permalink}"><img src="{AlbumArtURL}"></a>
  436. </div>
  437. {/block:AlbumArt}
  438. {block:AudioPlayer}
  439. <div class="playbox">
  440. {AudioPlayerWhite}
  441. </div>
  442. {/block:AudioPlayer}
  443. <div class="audioinfo">
  444. Artist: <span{block:Artist} style="display:none;"
  445. {/block:Artist}>Unknown</span>
  446. {block:Artist}{Artist}{/block:Artist}</br>
  447. Title: <span{block:TrackName} style="display:none;"
  448. {/block:TrackName}>Unknown</span>
  449. {block:TrackName}{TrackName}{/block:TrackName}</br>
  450. Album: <span{block:Album} style="display:none;"
  451. {/block:Album}>Unknown</span>
  452. {block:Album}{Album}{/block:Album}{block:PlayCount}</br>
  453. Plays: {FormattedPlayCount}{/block:PlayCount}
  454. </div>
  455. {/block:IndexPage}
  456. {block:PermalinkPage}
  457. {block:AlbumArt}<img src="{AlbumArtURL}" width="500"
  458. height="500" />{/block:AlbumArt}<br>
  459. {AudioPlayerWhite}
  460. Artist: <span{block:Artist} style="display:none;"
  461. {/block:Artist}>Unknown</span>
  462. {block:Artist}{Artist}{/block:Artist} &mdash;
  463. Title: <span{block:TrackName} style="display:none;"
  464. {/block:TrackName}>Unknown</span>
  465. {block:TrackName}{TrackName}{/block:TrackName} &mdash;
  466. Album: <span{block:Album} style="display:none;"
  467. {/block:Album}>Unknown</span>
  468. {block:Album}{Album}{/block:Album}{block:PlayCount} &mdash;
  469. Plays: {FormattedPlayCount}{/block:PlayCount}
  470. {block:Caption}{Caption}{/block:Caption}
  471. {/block:PermalinkPage}
  472. {/block:Audio}
  473.  
  474. {block:Video}
  475. <div class="video">
  476. {block:IndexPage}
  477. <div class="video-player">{Video-400}</div>
  478. {/block:IndexPage}
  479. {block:PermalinkPage}
  480. <div class="video-player">{Video-500}</div>
  481. {block:Caption}{Caption}{/block:Caption}
  482. {/block:permalinkPage}
  483. {/block:Video}
  484.  
  485. {block:Answer}
  486. <div class="answer">
  487. <div class="question">
  488. <img class="asker" src="{AskerPortraitURL-30}">
  489. <span class="whoasked">{Asker}</span>{Question}</div>
  490. <hr>
  491. <div class="reply">
  492. {block:Answerer}{Answerer} replied: {Answer}{/block:Answerer}
  493. {Replies}
  494. <hr>
  495. </div>
  496. {/block:Answer}
  497. {block:PermalinkPage}
  498. <hr>
  499. <footer class="details">
  500. {block:HasTags}
  501. <ul id="tags">
  502. <li>filed under:</li>
  503. {block:Tags}<li> <a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
  504. </ul>
  505. <hr>
  506. {/block:HasTags}
  507. {block:PostNotes}
  508. <div id="notes">
  509. {PostNotes}
  510. </div>
  511. {/block:PostNotes}
  512. </footer>
  513. <hr>
  514. {/block:PermalinkPage}
  515. <footer class="metadata">
  516. <a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} @ {12Hour}:{Minutes}{AmPm}</a>
  517. <span style="float:right"><span class="permas reblog">{ReblogButton color="black" size="17"}</span> <span class="permas like">{LikeButton color="black" size="17"}</span></span>
  518. <!--Post footer (tags and notes) on displayed on permalink pages-->
  519. </article>
  520. {/block:Posts}
  521. <!--Close of article-->
  522. </div>
  523. </div>
  524. <!--Pagination: previous/next page links-->
  525. {block:Pagination}
  526. <div class="pagination" {block:IfNotPagination}style="visibility:hidden;"{/block:IfNotPagination}>
  527. {block:JumpPagination length="5"}
  528. {block:CurrentPage}
  529. <span class="current_page">{PageNumber}</span>
  530. {/block:CurrentPage}
  531. {block:JumpPage}
  532. <a class="jump_page" href="{URL}">{PageNumber}</a>
  533. {/block:JumpPage}
  534. {/block:JumpPagination}
  535. {block:IfNotPagination}
  536. {block:NextPage}
  537. <a href="{NextPage}">Next</a>
  538. {/block:NextPage}
  539. {/block:IfNotPagination}
  540. </div>
  541. {/block:Pagination}
  542. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  543. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  544. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  545. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  546. <script>
  547. $(document).ready(function(){
  548. $('.photo-slideshow').pxuPhotoset({
  549. lightbox: true,
  550. rounded: false,
  551. gutter: '10px',
  552. photoset: '.photo-slideshow',
  553. photoWrap: '.photo-data',
  554. photo: '.pxu-photo'
  555. });
  556. });
  557. </script>
  558. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  559. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  560. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  561. <!--Code for infinite scroll and grid layout-->
  562. <script>
  563. (function() {
  564. var $tumblelog = $('#content');
  565. $tumblelog.imagesLoaded( function(){
  566. $tumblelog.masonry({
  567. columnWidth: function( containerWidth ) {
  568. return containerWidth / 100;
  569. }
  570. });
  571. });
  572. {block:IfNotPagination}
  573. $tumblelog.infinitescroll({
  574. navSelector : ".pagination",
  575. nextSelector : ".pagination a:first",
  576. itemSelector : "article",
  577. bufferPx : 50,
  578. done : "",
  579. loading: {
  580. finishedMsg: "<p> </p>",
  581. img : "",
  582. msg: null,
  583. msgText: "<p> </p>"
  584. },
  585. },
  586. function( newElements ) {
  587. var $newElems = $( newElements );
  588. $newElems.find('.photo-slideshow').pxuPhotoset({
  589. lightbox: true,
  590. rounded: false,
  591. gutter: '10px',
  592. photoset: '.photo-slideshow',
  593. photoWrap: '.photo-data',
  594. photo: '.pxu-photo'
  595. },
  596. function(){
  597. $tumblelog.masonry();
  598. });
  599. var $newElems = $(newElements).css({
  600. opacity: 0
  601. });
  602. $newElems.imagesLoaded(function(){
  603. $newElems.animate({ opacity: 1, zIndex: 1 });
  604. $tumblelog.masonry( 'appended', $newElems );
  605. });
  606. });
  607. {/block:IfNotPagination}
  608. })();
  609.  
  610. </script>
  611. </body>
  612. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!