API tools faq
paste
Advertisement
neothm

#02 WINDJAMMER

neothm
Feb 15th, 2015
5,497
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.89 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!--
  5. #02 WINDJAMMER
  6. ©NEO: @NEOTHM/@NEOVAK
  7.  
  8. If you need help/spotted a glitch, feel free to message me!
  9. Thank you for taking an interest in this code. Enjoy. ♡
  10. -->
  11. <meta charset="utf-8">
  12. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}<meta name="description" content='{MetaDescription}'>{/block:Description}
  16. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  17. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/55Ynowx5p/tex.css">
  18. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css">
  19. <meta name="image:BackgroundImage" content="">
  20. <meta name="color:BackgroundColor" content="#f6f6f6">
  21. <meta name="text:PostSize" content="350">
  22. <meta name="text:NumberOfColumns" content="1">
  23. <meta name="color:Links" content="#aaa">
  24. <meta name="color:Hover" content="#000">
  25. <meta name="image:Header" content="">
  26. <meta name="image:IconTop" content="">
  27. <meta name="if:FullPageBackground" content="0">
  28. <meta name="if:BlogPortrait" content="1">
  29. <meta name="if:Pagination" content="1">
  30. <meta name="if:HeaderBlackFade" content="0">
  31. <meta name="if:FadedPosts" content="0">
  32. <meta name="if:GrayScalePosts" content="0">
  33. <meta name="if:ShowTags" content="1">
  34.  
  35.  
  36. <meta name="if:Link1" content="1">
  37. <meta name="if:Link2" content="0">
  38. <meta name="if:Link3" content="0">
  39. <meta name="if:Link4" content="0">
  40. <meta name="if:Link5" content="0">
  41. <meta name="text:Link1URL" content="/">
  42. <meta name="text:Link1Name" content="Custom link">
  43. <meta name="text:Link2URL" content="/">
  44. <meta name="text:Link2Name" content="Custom link">
  45. <meta name="text:Link3URL" content="/">
  46. <meta name="text:Link3Name" content="Custom link">
  47. <meta name="text:Link4URL" content="/">
  48. <meta name="text:Link4Name" content="Custom link">
  49. <meta name="text:Link5URL" content="/">
  50. <meta name="text:Link5Name" content="Custom link">
  51.  
  52.  
  53. <style type="text/css">
  54. #s-m-t-tooltip{font-family:arial;line-height:100%;font-size:7px;text-transform:uppercase;text-align:center;margin-top:15px;word-wrap:break-word;margin-left:10px;max-width:100px;z-index:999999999!important;padding:6px;background-color:rgba(0,0,0,.7);color:#f2f2F2;letter-spacing:1px;-moz-border-radius:3px;-webkit-border-radius:0px;border-radius:0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
  55. ::-webkit-scrollbar-thumb {z-index:9999999;position:relative;height:auto;background-color:#aaa;}
  56. ::-webkit-scrollbar {height:2px;width:2px;background-color:white;}
  57. ::selection {background:#000;color:#fff;text-shadow:1px 1px 0px rgba(255,255,255.5);}
  58. ::-moz-selection {background:#000;color:#fff;text-shadow:1px 1px 0px rgba(255,255,255.5);}
  59.  
  60. b, strong{
  61. font-family:'Tex Bold';
  62. }
  63. html, body{
  64. margin:0;
  65. background:{color:BackgroundColor} url('{image:BackgroundImage}');
  66. background-attachment:fixed;
  67. {block:ifFullPageBackground}
  68. background-size:cover;
  69. {/block:ifFullPageBackground}
  70. font-family:'Tex';
  71. -webkit-font-smoothing: antialiased;
  72. word-wrap:break-word;
  73. font-size:11px;
  74. line-height:140%;
  75. text-align: justify;
  76. color:#444;
  77. display:block;
  78. overflow:auto;
  79. }
  80.  
  81. a,.perma > span a, #tags a{
  82. outline:none;
  83. text-decoration:none;
  84. color:{color:Links};
  85. transition-duration:.3s;
  86. -webkit-transition-duration:.3s;
  87. -moz-transition-duration:.3s;
  88. -o-transition-duration:.3s;
  89. }
  90. a:hover, .perma > span a:hover, #tags a:hover{
  91. color:{color:Hover};
  92. transition-duration:.3s;
  93. -webkit-transition-duration:.3s;
  94. -moz-transition-duration:.3s;
  95. -o-transition-duration:.3s;
  96. cursor:crosshair;
  97. }
  98. section{
  99. display:block;
  100. margin:10px auto;
  101. overflow:hidden;
  102. height:auto;
  103. {block:PermalinkPage}width:580px;{/block:PermalinkPage}
  104. }
  105.  
  106. article{
  107. width:{text:PostSize}px;
  108. {block:PermalinkPage}width:500px;{/block:PermalinkPage}
  109. margin:40px 20px;
  110. position:relative;
  111. background-color:#fff;
  112. padding:20px;
  113. border:1px solid #f2f2f2;
  114. }
  115. article img, article embed, article iframe{
  116. max-width:100%;
  117. }
  118. article img{
  119. height:auto;
  120. }
  121. {block:IndexPage}
  122. article img, iframe.photoset{
  123. {block:ifGrayScalePosts}
  124. -webkit-filter: grayscale(100%);
  125. -moz-filter: grayscale(100%);
  126. -ms-filter: grayscale(100%);
  127. -o-filter: grayscale(100%);
  128. filter: grayscale(100%);
  129. filter: gray;
  130. {/block:ifGrayScalePosts}
  131. {block:ifFadedPosts}
  132. opacity:.7;
  133. {/block:ifFadedPosts}
  134. transition-duration:.4s;
  135. -webkit-transition-duration:.4s;
  136. -moz-transition-duration:.4s;
  137. -o-transition-duration:.4s;
  138. }
  139. article img:hover, iframe.photoset:hover{
  140. {block:ifGrayScalePosts}
  141. -webkit-filter: grayscale(0%);
  142. -moz-filter: grayscale(0%);
  143. -o-filter: grayscale(0%);
  144. -moz-filter: grayscale(0%);
  145. -o-filter: grayscale(0%);
  146. filter: grayscale(0%);
  147. filter: none;
  148. {/block:ifGrayScalePosts}
  149. {block:ifFadedPosts}
  150. opacity:1;
  151. {/block:ifFadedPosts}
  152. transition-duration:.4s;
  153. -webkit-transition-duration:.4s;
  154. -moz-transition-duration:.4s;
  155. -o-transition-duration:.4s;
  156. }
  157. {/block:IndexPage}
  158. header{
  159. {block:ifHeaderBlackFade}background-color:#000;{/block:ifHeaderBlackFade}
  160. {block:ifNotHeaderBlackFade}background-color:#fff;{/block:ifNotHeaderBlackFade}
  161. margin:100px auto 0 auto;
  162. {block:PermalinkPage}width:540px;{/block:PermalinkPage}
  163. }
  164. header #top{
  165. background-image:url('{image:Header}');
  166. background-size:100%;
  167. height:150px;
  168. width:100%;
  169. opacity:.6;
  170. }
  171. header #bottom{
  172. border-bottom:1px solid #f2f2f2;
  173. border-left:1px solid #f2f2f2;
  174. border-right:1px solid #f2f2f2;
  175. margin-left:-1Px;
  176. position:relative;
  177. background-color:#fff;
  178. }
  179. header #bottom > img{
  180. z-index:2;
  181. position:absolute;
  182. width:60px;
  183. height:60px;
  184. border-radius:100%;
  185. display:block;
  186. left:0;right:0;
  187. margin:auto;
  188. margin-top:-34px;
  189. border:4px solid #fff;
  190. }
  191. header #desc, header #lks{
  192. position:relative;
  193. margin:-1px;
  194. width:44%;
  195. padding:3%;
  196. z-index:1;
  197. display:inline-block;
  198. vertical-align:top;
  199. }
  200. header #lks > a{
  201. text-transform:uppercase;
  202. font-size:8px;
  203. letter-spacing:1px;
  204. display:block;
  205. text-align:right;
  206. }
  207. header #lks > a:hover{
  208. padding-right:15px;
  209. }
  210. #askbox{
  211. margin:0 auto;
  212. background-color:#fff;
  213. margin-top:10px;
  214. display:none;
  215. text-align:center;
  216. border:1px solid #f2f2f2;
  217. {block:PermalinkPage}width:540px;{/block:PermalinkPage}
  218. }
  219. #askbox > iframe{
  220. width:90%;
  221. display:block;
  222. padding:5%;
  223. }
  224. footer{
  225. line-height:70px;
  226. background-color:#fff;
  227. margin:0 auto 100px auto;
  228. text-align:center;
  229. text-transform:uppercase;
  230. color:#aaa;
  231. letter-spacing:3px;
  232. font-size:8px;
  233. border:1px solid #f2f2f2;
  234. {block:PermalinkPage}width:540px;{/block:PermalinkPage}
  235. }
  236. .caption{
  237. clear:both;
  238. margin-top:5px;
  239. padding:5px;
  240. background-color:#f6f6f6;
  241. }
  242. blockquote{
  243. border-left:1px solid #eee;
  244. margin-left:0;
  245. padding-left:20px;
  246. }
  247. .perma{
  248. width:100%;
  249. text-align:left;
  250. background-color:#fff;
  251. font-size:8px;
  252. padding:10px 0;
  253. line-height:120%;
  254. text-transform:uppercase;
  255. letter-spacing:1px;
  256. }
  257. .perma a{
  258. color:#000;
  259. display:inline;
  260. margin:0 4px;
  261. }
  262. .perma > span{
  263. word-wrap: break-word;
  264. word-break:break-all;
  265. white-space:initial;
  266. }
  267.  
  268. #tags{
  269. {block:IfShowTags}display:block;{/block:IfShowTags}
  270. {block:IndexPage}{block:IfNotShowTags}display:none;{/block:IfNotShowTags}{/block:IndexPage}
  271. clear:both;
  272. margin-top:3px;
  273. text-align:justify;
  274. line-height:170%;
  275. }
  276. #tags > b{
  277. font-size:7px;
  278. margin-left:5px;
  279. }
  280. {block:IfNotPagination}
  281. .pagination{
  282. display:none;
  283. }
  284. {/block:IfNotPagination}
  285. .texts{
  286. padding:30px;
  287. }
  288. .texts h1,#askbox h1{
  289. padding:0;
  290. margin:0;
  291. text-transform:uppercase;
  292. line-height:140%;
  293. letter-spacing:1px;
  294. font-size:9px;
  295. display:block;
  296. position:relative;
  297. padding-bottom:10px;
  298. margin-bottom:10px;
  299. }
  300. .texts h1 a{
  301. color:#000;
  302. }
  303. .texts h1:after,#askbox h1:after{
  304. position:absolute;
  305. content:"";
  306. bottom:0;
  307. left:0;
  308. width:20%;
  309. height:2.5px;
  310. background-color:#000;
  311. }
  312. #askbox h1{
  313. margin:20px 0;
  314. }
  315. #askbox h1:after{
  316. width:15%;
  317. right:0;
  318. margin:auto;
  319. }
  320. .chat li{
  321. margin:0;
  322. padding:10px;
  323. list-style-type:none;
  324. text-transform:uppercase;
  325. font-size:8px;
  326. letter-spacing:1px;
  327. }
  328. .chat li.odd{
  329. background-color:#f6f6f6;
  330. }
  331. iframe.tumblr_audio_player{
  332. width:45px;
  333. height:45px;
  334. top:27.5px;
  335. left:27.5px;
  336. position:absolute;
  337. }
  338. .audio{
  339. position:relative;
  340. width:100%;
  341. height:120px;
  342. overflow:auto;
  343. }
  344. .audio > img{
  345. width:100px;
  346. height:100px;
  347. position:absolute;
  348. left:0;
  349. left:0;
  350. opacity:.8;
  351. }
  352. .audio > span{
  353. display:block;
  354. float:left;
  355. text-align:left;
  356. margin-left:120px;
  357. line-height:250%;
  358. text-transform:uppercase;
  359. font-size:8px;
  360. letter-spacing:1px;
  361. }
  362.  
  363. .tmblr-iframe.iframe-controls--desktop{
  364. display:block;
  365. position:fixed;
  366. top:10px;
  367. z-index:9999999999!important;
  368. right:10px;
  369. -webkit-filter:invert(100%);
  370. -moz-filter:invert(100%);
  371. -o-filter:invert(100%);
  372. -ms-filter:invert(100%);
  373. filter:invert(100%);
  374. opacity:.3;
  375. transition-duration:.3s;
  376. }
  377. .tmblr-iframe.iframe-controls--desktop:hover{
  378. opacity:.5;
  379. transition-duration:.3s;
  380. }
  381. #notes *{
  382. margin:0;
  383. padding:0;
  384. }
  385. #notes{
  386. clear:both;
  387. margin-top:30px;
  388. padding-bottom:100px;
  389. text-align:center;
  390. }
  391. #notes li{
  392. padding:0;
  393. margin:0;
  394. list-style-type:none;
  395. display:inline-block;
  396. width:25px;
  397. height:25px;
  398. margin:7px;
  399. overflow:hidden;
  400. }
  401. #notes img{
  402. width:25px;
  403. height:25px;
  404. }
  405. #infscr-loading{
  406. display:none;
  407. }
  408. img.asker{
  409. width:40px;
  410. height:40px;
  411. border:2px solid #f2f2F2;
  412. border-radius:100%;
  413. margin:0 auto 20px auto;
  414. display:block;
  415. }
  416. </style>
  417. </head>
  418. <body>
  419. <header>
  420. <div id="top"> </div>
  421. <div id="bottom">
  422. <img {block:IfBlogPortrait}src="{PortraitURL-64}"{/block:IfBlogPortrait}{block:IfNotBlogPortrait}src="{image:IconTop}"{/block:IfNotBlogPortrait}>
  423. <div id="desc">
  424. {Description}
  425. </div>
  426. <div id="lks">
  427. <a href="/">home</a>
  428. <a id="mssg">message</a>
  429. <a href="/archive">archive</a>
  430. {block:IfLink1}
  431. <a href="{text:Link1URL}">{text:Link1Name}</a>
  432. {/block:IfLink1}
  433. {block:IfLink2}
  434. <a href="{text:Link2URL}">{text:Link2Name}</a>
  435. {/block:IfLink2}
  436. {block:IfLink3}
  437. <a href="{text:Link3URL}">{text:Link3Name}</a>
  438. {/block:IfLink3}
  439. {block:IfLink4}
  440. <a href="{text:Link4URL}">{text:Link4Name}</a>
  441. {/block:IfLink4}
  442. {block:IfLink5}
  443. <a href="{text:Link5URL}">{text:Link5Name}</a>
  444. {/block:IfLink5}
  445. </div>
  446. </div>
  447. </header>
  448. <div id="askbox">
  449. <h1>{AskLabel}</h1>
  450. <iframe frameborder="0" scrolling="no" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  451. </div>
  452. <section>
  453. {block:Posts}
  454. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  455. <article>
  456. {block:Photo}
  457. {LinkOpenTag}<img src="{PhotoURL-HighRes}" style="min-width:100%;" alt="{PhotoAlt}">{LinkCloseTag}
  458. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  459. {/block:Photo}
  460. {block:Photoset}
  461. {Photoset}
  462. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  463. {/block:Photoset}
  464. {block:Video}
  465. {Video-500}
  466. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  467. {/block:Video}
  468. {block:Text}
  469. <div class="texts">
  470. {block:Title}<h1><b>{Title}</b></h1>{/block:Title}
  471. {Body}
  472. </div>
  473. {/block:Text}
  474. {block:Link}
  475. <div class="texts">
  476. <h1><b><a href="{URL}">{Name} »</a></b></h1>
  477. {block:Description}{Description}{/block:Description}
  478. </div>
  479. {/block:Link}
  480. {block:Quote}
  481. <div class="texts">
  482. <h1><i>“{Quote}”</i></h1>
  483. {block:Source}— {Source}{/block:Source}
  484. </div>
  485. {/block:Quote}
  486. {block:Chat}
  487. <div class="chat">
  488. {block:Lines}
  489. <li class="{Alt}">
  490. {block:Label}
  491. <b>
  492. {Label}
  493. </b>
  494. {/block:Label}
  495. {Line}
  496. </li>
  497. {/block:Lines}
  498. </div>
  499. {/block:Chat}
  500. {block:Audio}
  501. <div class="audio">
  502. {block:AlbumArt}
  503. <img src="{AlbumArtURL}">
  504. {/block:AlbumArt}
  505. <span>
  506. {block:TrackName}
  507. <b>song: </b>{TrackName}
  508. {/block:TrackName}
  509. {block:Artist}
  510. <br><b>artist: </b>{Artist}
  511. {/block:Artist}
  512. {block:Album}
  513. <br><b>album: </b>{Album}
  514. {/block:Album}
  515. {block:PlayCount}
  516. <br><b>plays: </b>{FormattedPlayCount}
  517. {/block:PlayCount}
  518. </span>
  519. {AudioPlayer}
  520. </div>
  521. {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
  522. {/block:Audio}
  523. {block:Answer}
  524. <div class="texts">
  525. <img src="{AskerPortraitURL-64}" class="asker">
  526. <h1>
  527. <b>{Asker}</b> : {Question}
  528. </h1>
  529. {Answer}
  530. </div>
  531. {/block:Answer}
  532. {block:Date}
  533. <div class="perma">
  534. <b><a href="{Permalink}" title="{TimeAgo}">{DayOfWeek}</a></b> <span>{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> | <a href="{ReblogRootURL}" title="{ReblogRootTitle}">©{ReblogRootName}</a>{/block:RebloggedFrom}</span>
  535. {block:HasTags}
  536. <div id="tags">
  537. <b>#</b>
  538. {block:Tags}
  539. <a href="{TagURL}">{Tag}</a>
  540. {/block:Tags}
  541. </div>
  542. {/block:HasTags}
  543. </div>
  544. {/block:Date}
  545. {block:PostNotes}
  546. <div id="notes">{PostNotes-64}</div>
  547. {/block:PostNotes}
  548.  
  549. </article>
  550. {/block:Posts}
  551. </section>
  552. {block:Pagination}
  553. <footer>
  554. {block:IfNotPagination}
  555. <a id="next">load more</a>
  556. {/block:IfNotPagination}
  557. <div class="pagination">
  558. {block:PreviousPage}<a href="{PreviousPage}">back</a> / {/block:PreviousPage}{block:NextPage}<a id="nxt" href="{NextPage}">forth</a>{/block:NextPage}
  559. </div>
  560. </footer>
  561. {/block:Pagination}
  562.  
  563.  
  564. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  565. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  566. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  567. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  568. <script src="http://static.tumblr.com/q8c0vxg/hKdnjmdvi/manual-trigger.js"></script>
  569. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  570. <script type="text/javascript">
  571. {block:IndexPage}
  572. $(function(){
  573. $("[title]").style_my_tooltips();
  574. $('#mssg').click(function(){
  575. $('#askbox').slideToggle(600);
  576. });
  577. var NewValue = (({text:PostSize}+83) * {text:NumberOfColumns});
  578. $('section').css({'width':NewValue+'px'});
  579. $('header, header #bottom, #askbox, footer').css({'width':(NewValue-42)+'px'});
  580. var $tumblelog = $('section');
  581.  
  582. $tumblelog.infinitescroll({
  583. navSelector : "footer",
  584. nextSelector : "#nxt",
  585. itemSelector : "article",
  586. bufferPx : 50,
  587. done : "",
  588. loading: {
  589. img : "",
  590. msgText: "",
  591. finishedMsg:""
  592. },
  593. }, function( newElements ) {
  594. var $newElems = $( newElements ).css({ opacity: 0 });
  595. $newElems.imagesLoaded(function(){
  596. $newElems.animate({ opacity: 1 });
  597. $tumblelog.masonry( 'appended', $newElems);
  598. });
  599. });
  600.  
  601. if(parseInt({text:NumberOfColumns}) > 1){
  602. $('article').css('float', 'left');
  603. $tumblelog.imagesLoaded(function(){
  604. $tumblelog.masonry({
  605. itemSelector: 'article',
  606. columnWidth: ({text:PostSize}+82)
  607. });
  608. });
  609. $(window).scroll(function(){
  610. $tumblelog.masonry();
  611. });
  612. }
  613. {block:IfNotPagination}
  614. $tumblelog.infinitescroll({
  615. behavior: 'twitter'
  616. });
  617. $(window).unbind('.infscr');
  618. $('a#next').click(function(){
  619. $('section').infinitescroll('retrieve');
  620. $('footer').show();
  621. return false;
  622. });
  623. {/block:IfNotPagination}
  624.  
  625. });
  626.  
  627. {/block:IndexPage}
  628. </script>
  629. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  630. </body>
  631. </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!