API tools faq
paste
Advertisement
skyrimthemes

Theme - Outsider

skyrimthemes
Feb 22nd, 2016
3,416
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11.  
  12. <meta name="if:inverted tumblr controls" content="1">
  13. <meta name="if:captions shown" content="1">
  14. <meta name="if:hover captions" content="1">
  15. <meta name="if:padding on photos" content="1">
  16. <meta name="if:infinite scroll" content="1">
  17. <meta name="if:manual load" content="0">
  18. <meta name="image:header" content="">
  19.  
  20. <meta name="select:post size" content="250" title="250px">
  21. <meta name="select:post size" content="300" title="300px">
  22. <meta name="select:post size" content="325" title="325px">
  23. <meta name="select:post size" content="350" title="350px">
  24. <meta name="select:post size" content="400" title="400px">
  25. <meta name="select:post size" content="450" title="450px">
  26.  
  27. <meta name="select:font" content="roboto" title="Roboto">
  28. <meta name="select:font" content="thiswontwork" title="Calibri">
  29. <meta name="select:font" content="karla" title="Karla">
  30. <meta name="select:font" content="open sans" title="Open Sans">
  31. <meta name="select:font" content="montserrat" title="Montserrat">
  32.  
  33. <meta name="select:photoset gutters" content="0" title="0px">
  34. <meta name="select:photoset gutters" content="1" title="1px">
  35. <meta name="select:photoset gutters" content="2" title="2px">
  36. <meta name="select:photoset gutters" content="3" title="3px">
  37. <meta name="select:photoset gutters" content="4" title="4px">
  38. <meta name="select:photoset gutters" content="5" title="5px">
  39. <meta name="select:photoset gutters" content="10" title="10px">
  40.  
  41. <meta name="color:background" content="#ffffff">
  42. <meta name="color:text" content="#000000">
  43. <meta name="color:border" content="#ebebeb">
  44. <meta name="color:scrollbar" content="#ffffff">
  45. <meta name="color:header" content="#ffffff">
  46. <meta name="color:link" content="#707070">
  47. <meta name="color:link hover" content="#000000">
  48. <meta name="color:link border" content="#ebebeb">
  49. <meta name="color:header text" content="#000000">
  50. <meta name="color:blockquote" content="#ebebeb">
  51. <meta name="color:posts background" content="#ffffff">
  52. <meta name="color:title background" content="#000000">
  53. <meta name="color:title colour" content="#ffffff">
  54.  
  55. <meta name="text:link 1 url" content="/ask">
  56. <meta name="text:link 1 name" content="message">
  57. <meta name="text:link 2 url" content="/nav">
  58. <meta name="text:link 2 name" content="navigation">
  59. <meta name="text:link 3 url" content="/abt">
  60. <meta name="text:link 3 name" content="about">
  61. <meta name="text:link 4 url" content="/archive">
  62. <meta name="text:link 4 name" content="archive">
  63.  
  64. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  65.  
  66. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  67.  
  68. <script>
  69.  
  70. (function($){
  71.  
  72. $(document).ready(function(){
  73.  
  74. $("a[title]").style_my_tooltips({
  75.  
  76. tip_follows_cursor:true,
  77.  
  78. tip_delay_time:30,
  79.  
  80. tip_fade_speed:300,
  81.  
  82. attribute:"title"
  83.  
  84. });
  85.  
  86. });
  87.  
  88. })(jQuery);
  89.  
  90. </script>
  91.  
  92. <script type="text/javascript">
  93. WebFontConfig = {
  94. google: { families: [ 'Open+Sans:400,700:latin', 'Roboto:400,700:latin', 'Karla:400,700:latin', 'Montserrat:400,700:latin' ] }
  95. };
  96. (function() {
  97. var wf = document.createElement('script');
  98. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  99. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  100. wf.type = 'text/javascript';
  101. wf.async = 'true';
  102. var s = document.getElementsByTagName('script')[0];
  103. s.parentNode.insertBefore(wf, s);
  104. })(); </script>
  105.  
  106. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  107. <script type="text/javascript">
  108. $(function(){
  109. var stickyRibbonTop = $('#header-con').offset().top;
  110. $(window).scroll(function(){
  111. if( $(window).scrollTop() > stickyRibbonTop ) {
  112. $('#header-con').css({position: 'fixed', top: '0px'});
  113. } else {
  114. $('#header-con').css({position: 'absolute', top: '190px'});
  115. }
  116. });
  117. });
  118. </script>
  119.  
  120. <script type="text/javascript">
  121. $(document).ready(function(){
  122. $("#container").css({'top':$("#header-con").height()+'px'})
  123. });
  124. </script>
  125.  
  126. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  127.  
  128. <style type="text/css">
  129.  
  130. .tmblr-iframe {
  131. opacity:0.6!important;
  132. position:fixed!important;
  133. -webkit-filter: invert(100%);
  134. z-index:9999999999999999999999999999999999999!important;
  135. -webkit-transition:all 0.5s;
  136. -moz-transition:all 0.5s;
  137. -ms-transition:all 0.5s;
  138. -o-transition:all 0.5s;
  139. transition:all 0.5s;
  140. }
  141.  
  142. .tmblr-iframe:hover {
  143. opacity:1!important;
  144. -webkit-transition:all 0.5s;
  145. -moz-transition:all 0.5s;
  146. -ms-transition:all 0.5s;
  147. -o-transition:all 0.5s;
  148. transition:all 0.5s;
  149. }
  150.  
  151. /*tooltips*/
  152.  
  153. #s-m-t-tooltip{
  154. font-size:10px;
  155. position:absolute;
  156. margin-top: 20px;
  157. margin-left:20px;
  158. font-weight:bold;
  159. z-index:99999999999999999999999;
  160. background:#000;
  161. padding:3px;
  162. color:#fff;
  163. text-transform:uppercase;
  164. padding:2px 3px 2px 3px;
  165. -webkit-transition:all 0.3s;
  166. -moz-transition:all 0.3s;
  167. -ms-transition:all 0.3s;
  168. -o-transition:all 0.3s;
  169. transition:all 0.3s;
  170. }
  171.  
  172. /*scrollbar*/
  173.  
  174. ::-webkit-scrollbar { width: 5px; height: 5px; background:{color:background}; }
  175. ::-webkit-scrollbar-thumb { background-color:{color:scrollbar}; }
  176.  
  177. html, body {
  178. font: 9.5px '{select:font}', calibri, sans-serif;
  179. color:{color:text};
  180. letter-spacing:0.6px;
  181. background-color:{color:background};
  182. background-attachment:fixed;
  183. background-size:cover;
  184. background-position:center;
  185. font-weight:400;
  186. text-align:justify;
  187. }
  188.  
  189. p {
  190. line-height:18px;
  191. }
  192.  
  193. a {
  194. color:{color:link};
  195. text-decoration:none;
  196. }
  197.  
  198. a:hover {
  199. color:{color:link hover};
  200. -webkit-transition:all 0.5s;
  201. -moz-transition:all 0.5s;
  202. -ms-transition:all 0.5s;
  203. -o-transition:all 0.5s;
  204. transition:all 0.5s;
  205. }
  206.  
  207. p a {
  208. padding-bottom:3px;
  209. border-bottom:1px solid {color:border};
  210. }
  211.  
  212. p a:hover {
  213. border-bottom:1px solid {color:text};
  214. }
  215.  
  216. blockquote {
  217. margin-left:5px;
  218. border-left:1px solid {color:border};
  219. padding-left:5px;
  220. }
  221.  
  222. strong {
  223. font-weight:700;
  224. }
  225.  
  226. #container {
  227. width:calc(100% - 200px);
  228. position:relative;
  229. left:100px;
  230. margin-top:150px;
  231. }
  232.  
  233. #header {
  234. width:100%;
  235. position:relative;
  236. z-index:99999;
  237. display:inline-block;
  238. }
  239.  
  240. #header img {
  241. width:100%;
  242. }
  243.  
  244. article {
  245. position:relative;
  246. margin-bottom:100px;
  247. {block:permalinkpage}
  248. width:500px!important;
  249. display:block;
  250. left:50%;
  251. margin-left:-250px;
  252. {/block:permalinkpage}
  253. {block:indexpage}
  254. width:calc((100% - 305px)/4);
  255. display:inline-block;
  256. float:left;
  257. {/block:indexpage}
  258. -webkit-transition:all 0.5s;
  259. -moz-transition:all 0.5s;
  260. -ms-transition:all 0.5s;
  261. -o-transition:all 0.5s;
  262. transition:all 0.5s;
  263. }
  264.  
  265. #header {
  266. position:relative;
  267. width:100%;
  268. top:0;
  269. left:0;
  270. z-index:9999999;
  271. }
  272.  
  273. #header-bg {
  274. width:calc(100% + 18px);
  275. left:-10px;
  276. top:-10px;
  277. position:relative;
  278. display:block;
  279. height:200px;
  280. overflow:hidden;
  281. background-image:url({image:header});
  282. background-size:cover;
  283. background-position:center center;
  284. background-repeat:no-repeat;
  285. }
  286.  
  287. #header-con {
  288. position:absolute;
  289. width:calc(100% - 193px);
  290. padding:25px 100px 25px 110px;
  291. margin-left:-10px;
  292. top:190px;
  293. background-color:{color:header};
  294. z-index:99999999999;
  295. }
  296.  
  297. #header-con h1 {
  298. font:20px 'Montserrat', arial;
  299. font-weight:700;
  300. display:inline-block;
  301. float:left;
  302. height:20px;
  303. margin:10px 20px 0 0;
  304. width:auto;
  305. color:{color:header text};
  306. }
  307.  
  308. #header-con p {
  309. display:inline-block;
  310. position:relative;
  311. color:{color:header text};
  312. float:left;
  313. margin-top:14px;
  314. font-size:8px;
  315. letter-spacing:1px;
  316. text-transform:uppercase;
  317. }
  318.  
  319. #header-wrap {
  320. display:block;
  321. width:100%;
  322. position:relative;
  323. overflow:hidden;
  324. }
  325.  
  326. #header-links {
  327. display:block;
  328. line-height:30px;
  329. margin-bottom:10px;
  330. }
  331.  
  332. #header-links a {
  333. text-transform:uppercase;
  334. letter-spacing:1px;
  335. color:{color:header text};
  336. margin-right:20px;
  337. position:relative;
  338. font-size:9px;
  339. width:auto;
  340. overflow:hidden;
  341. -webkit-transition:all 1s;
  342. -moz-transition:all 1s;
  343. -ms-transition:all 1s;
  344. -o-transition:all 1s;
  345. transition:all 1s;
  346. }
  347.  
  348. #header-links a:before {
  349. content:"";
  350. position:absolute;
  351. top:18px;
  352. left:0;
  353. right:0;
  354. width:auto;
  355. background:{color:border};
  356. height:1px;
  357. -webkit-transition:all 1s;
  358. -moz-transition:all 1s;
  359. -ms-transition:all 1s;
  360. -o-transition:all 1s;
  361. transition:all 1s;
  362. }
  363.  
  364. #header-links a:hover:before {
  365. box-shadow:inset 150px 0 {color:text};
  366. -webkit-transition:all 1s;
  367. -moz-transition:all 1s;
  368. -ms-transition:all 1s;
  369. -o-transition:all 1s;
  370. transition:all 1s;
  371. }
  372.  
  373. @media screen and (max-width:1500px) {
  374. article {
  375. {block:indexpage}
  376. width:calc((100% - 205px)/3);
  377. {/block:indexpage}
  378. }
  379. }
  380.  
  381. @media screen and (max-width:1150px) {
  382. article {
  383. {block:indexpage}
  384. width:calc((100% - 105px)/2);
  385. {/block:indexpage}
  386. }
  387. }
  388.  
  389. @media screen and (max-width:700px) {
  390. article {
  391. width:100%;
  392. display:block;
  393. }
  394. }
  395.  
  396. @media screen and (max-width:550px) {
  397. #container {
  398. width:calc(100% - 100px);
  399. left:50px;
  400. margin-top:100px;
  401. }
  402.  
  403. article {
  404. margin-bottom:50px;
  405. }
  406.  
  407. .perma {
  408. display:none;
  409. }
  410.  
  411. #header-con {
  412. width:calc(100% - 93px);
  413. padding:25px 50px 25px 60px;
  414. }
  415.  
  416. #header-con p {
  417. max-width:100%!important;
  418. }
  419. }
  420.  
  421. @media screen and (max-width:350px) {
  422. #container {
  423. width:calc(100% - 50px);
  424. left:25px;
  425. margin-top:75px;
  426. }
  427.  
  428. article {
  429. margin-bottom:30px;
  430. }
  431.  
  432. #header-con {
  433. width:calc(100% - 43px);
  434. padding:25px 25px 25px 35px;
  435. }
  436.  
  437. #header-con p {
  438. max-width:100%!important;
  439. }
  440. }
  441.  
  442. img:not(.lightbox-image), embed, object, video, .tumblr_video_container, iframe {
  443. max-width:100%!important;
  444. height:auto;
  445. }
  446. .tumblr_video_container {
  447. height:auto!important;
  448. }
  449. .vine-embed {
  450. height:235px!important;
  451. }
  452.  
  453. .postswrap {
  454. position:relative;
  455. display:block;
  456. border-bottom:1px solid {color:border};
  457. }
  458.  
  459. img {
  460. height: auto;
  461. width: auto;
  462. vertical-align:middle;
  463. -webkit-transition:all 0.5s;
  464. -moz-transition:all 0.5s;
  465. -ms-transition:all 0.5s;
  466. -o-transition:all 0.5s;
  467. transition:all 0.5s;
  468. }
  469.  
  470. .body,
  471. #chlines {
  472. padding:20px;
  473. border:1px solid {color:border};
  474. border-bottom:0;
  475. background-color:{color:posts background};
  476. }
  477.  
  478. .perma {
  479. position:absolute;
  480. background-color:{color:posts background};
  481. color:{color:text};
  482. top:20px;
  483. left:20px;
  484. max-width:calc(100% - 80px);
  485. padding:20px;
  486. max-height:calc(100% - 80px);
  487. opacity:0;
  488. overflow:auto;
  489. z-index:9999;
  490. -webkit-transition:all 0.5s;
  491. -moz-transition:all 0.5s;
  492. -ms-transition:all 0.5s;
  493. -o-transition:all 0.5s;
  494. transition:all 0.5s;
  495. }
  496.  
  497. article:hover .perma {
  498. opacity:1;
  499. -webkit-transition:all 0.5s;
  500. -moz-transition:all 0.5s;
  501. -ms-transition:all 0.5s;
  502. -o-transition:all 0.5s;
  503. transition:all 0.5s;
  504. }
  505.  
  506. .postswrap h1 {
  507. padding:20px;
  508. background-color:{color:title background};
  509. color:{color:title colour};
  510. margin:0;
  511. font-weight:400;
  512. text-transform:uppercase;
  513. letter-spacing:1px;
  514. border:1px solid {color:border};
  515. border-bottom:0;
  516. }
  517.  
  518. .postswrap h1 a {
  519. color:{color:title colour};
  520. }
  521.  
  522. .postswrap h1 a:hover {
  523. color:{color:title colour};
  524. }
  525.  
  526. .wholeaudio {
  527. position:relative;
  528. height:100px;
  529. overflow:hidden;
  530. -webkit-transition:all 0.5s;
  531. -moz-transition:all 0.5s;
  532. -ms-transition:all 0.5s;
  533. -o-transition:all 0.5s;
  534. transition:all 0.5s;
  535. }
  536.  
  537. .player {
  538. float:left;
  539. display:inline-block;
  540. width:100px;
  541. position:relative;
  542. overflow:hidden;
  543. }
  544.  
  545. .player img {
  546. border:1px solid {color:border};
  547. border-right:0;
  548. height:100px;
  549. }
  550.  
  551. .played {
  552. position:absolute;
  553. z-index:99999;
  554. opacity:0;
  555. width:100px;
  556. height:100px;
  557. background-color:rgba(0,0,0,0.7);
  558. -webkit-transition:all 0.5s;
  559. -moz-transition:all 0.5s;
  560. -ms-transition:all 0.5s;
  561. -o-transition:all 0.5s;
  562. transition:all 0.5s;
  563. }
  564.  
  565. .wholeaudio:hover .played {
  566. opacity:1;
  567. }
  568.  
  569. .played iframe {
  570. margin-top:25px;
  571. margin-left:25px;
  572. width:10px;
  573. height:10px;
  574. overflow:hidden;
  575. padding:20px;
  576. background-color:#000;
  577. }
  578.  
  579. .audio {
  580. padding:20px;
  581. display:inline-block;
  582. float:left;
  583. position:relative;
  584. height:60px;
  585. width:calc(100% - 140px);
  586. background-color:{color:title background};
  587. color:{color:title colour};
  588. }
  589.  
  590. .audio p {
  591. margin-top:0;
  592. margin-bottom:0;
  593. font-size:8px;
  594. text-transform:uppercase;
  595. letter-spacing:1px;
  596. line-height:22px;
  597. }
  598.  
  599. .postswrap h2 {
  600. padding:20px;
  601. background-color:{color:title background};
  602. color:{color:title colour};
  603. margin:0;
  604. font-weight:400;
  605. border:1px solid {color:border};
  606. border-bottom:0;
  607. }
  608.  
  609. .body p:nth-child(1),
  610. .perma p:nth-child(1),
  611. .fun p:nth-child(1) {
  612. margin-top:0;
  613. }
  614.  
  615. .body p:last-of-type,
  616. .perma p:last-of-type,
  617. .fun p:last-of-type {
  618. margin-bottom:0;
  619. }
  620.  
  621. #talkbubble img {
  622. width:20px;
  623. height:20px;
  624. margin-right:10px;
  625. float:left;
  626. border-radius:50%;
  627. display:inline-block;
  628. }
  629.  
  630. #talkbubble {
  631. display:block;
  632. padding:20px;
  633. background-color:{color:title background};
  634. color:{color:title colour};
  635. }
  636.  
  637. #talkbubble a {
  638. color:{color:title colour};
  639. display:inline-block;
  640. }
  641.  
  642. .asker {
  643. text-transform:uppercase;
  644. letter-spacing:1px;
  645. }
  646.  
  647. #row {
  648. padding-top:20px;
  649. border-top:1px solid {color:border};
  650. display:block;
  651. margin-top:20px;
  652. }
  653.  
  654. #row:nth-child(1) {
  655. padding:0;
  656. margin:0;
  657. border:0;
  658. }
  659.  
  660. #label {
  661. display:block;
  662. text-transform:uppercase;
  663. letter-spacing:1px;
  664. font-weight:700;
  665. }
  666.  
  667. .fun {
  668. padding:20px;
  669. background-color:{color:posts background};
  670. border:1px solid {color:border};
  671. border-bottom:0;
  672. margin:0;
  673. display:block;
  674. }
  675.  
  676. .photo,
  677. .photo-slideshow {
  678. {block:ifpaddingonphotos}
  679. padding:20px;
  680. background-color:{color:posts background};
  681. {/block:ifpaddingonphotos}
  682. border:1px solid {color:border};
  683. border-bottom:0;
  684. }
  685.  
  686. .footer {
  687. display:block!important;
  688. width:200px;
  689. text-align:center;
  690. left:50%;
  691. position:relative;
  692. margin-left:-100px;
  693. margin-top:100px;
  694. margin-bottom:100px;
  695. }
  696.  
  697. #loadbtn a,
  698. .pagination a{
  699. cursor:pointer;
  700. padding:20px;
  701. background-color:{color:posts background};
  702. text-transform:uppercase;
  703. letter-spacing:1px;
  704. border:1px solid {color:border};
  705. color:{color:text};
  706. text-align:center;
  707. }
  708.  
  709. #loadbtn a:hover,
  710. .pagination a:hover{
  711. background-color:{color:text};
  712. color:{color:posts background};
  713. }
  714.  
  715. .pagination {
  716. display:block!important;
  717. position:relative;
  718. padding-bottom:100px;
  719. }
  720.  
  721. .info {
  722. padding:20px;
  723. border:1px solid {color:border};
  724. border-top:0;
  725. height:10px;
  726. background-color:{color:posts background};
  727. }
  728.  
  729. .info a {
  730. text-transform:uppercase;
  731. letter-spacing:1px;
  732. font-size:8px;
  733. position:relative;
  734. -webkit-transition:all 1s;
  735. -moz-transition:all 1s;
  736. -ms-transition:all 1s;
  737. -o-transition:all 1s;
  738. transition:all 1s;
  739. }
  740.  
  741. .info a:before {
  742. content:"";
  743. position:absolute;
  744. margin-top:4px;
  745. left:0;
  746. right:0;
  747. width:auto;
  748. background:transparent;
  749. height:1px;
  750. -webkit-transition:all 1s;
  751. -moz-transition:all 1s;
  752. -ms-transition:all 1s;
  753. -o-transition:all 1s;
  754. transition:all 1s;
  755. }
  756.  
  757. .info a:hover:before {
  758. box-shadow:inset 150px 0 {color:text};
  759. -webkit-transition:all 1s;
  760. -moz-transition:all 1s;
  761. -ms-transition:all 1s;
  762. -o-transition:all 1s;
  763. transition:all 1s;
  764. }
  765.  
  766. ol.notes {
  767. list-style-type: none;
  768. background-color:{color:posts background};
  769. position:relative;
  770. display:block;
  771. padding:20px;
  772. border:1px solid {color:border};
  773. margin-top:100px;
  774. left:0;
  775. margin-bottom:100px;
  776. letter-spacing:1px;
  777. text-transform:uppercase;
  778. max-height:130px;
  779. overflow:auto;
  780. font-size:8px;
  781. }
  782.  
  783. ol.notes li {
  784. list-style-type:none;
  785. padding:0;
  786. min-height:16px;
  787. margin:5px 0;
  788. display:block;
  789. }
  790.  
  791. ol.notes img {
  792. width:15px;
  793. height:15px;
  794. display:inline-block;
  795. padding:0;
  796. margin:0 10px 0 0;
  797. float:left;
  798. border-radius:50%;
  799. }
  800.  
  801. ol.notes a img {
  802. border-bottom:none;
  803. }
  804.  
  805. .cr a {
  806. width:10px;
  807. height:10px;
  808. padding:2.5px;
  809. position:fixed;
  810. overflow:hidden;
  811. background-color:{color:title background};
  812. color:{color:title background};
  813. right:10px;
  814. font-size:8px;
  815. text-transform:uppercase;
  816. letter-spacing:1px;
  817. bottom:10px;
  818. -webkit-transition:all 0.5s;
  819. -moz-transition:all 0.5s;
  820. -ms-transition:all 0.5s;
  821. -o-transition:all 0.5s;
  822. transition:all 0.5s;
  823. }
  824.  
  825. .cr a:hover {
  826. padding:15px;
  827. color:{color:text};
  828. background-color:{color:posts background};
  829. -webkit-transition:all 0.5s;
  830. -moz-transition:all 0.5s;
  831. -ms-transition:all 0.5s;
  832. -o-transition:all 0.5s;
  833. transition:all 0.5s;
  834. }
  835.  
  836. </style>
  837.  
  838. </head>
  839. <body>
  840.  
  841. <div id="header">
  842. <div id="header-bg"></div>
  843. <div id="header-con">
  844. <div id="header-wrap">
  845. <h1>{title}</h1>
  846. <p>{description}<br></p>
  847. </div>
  848. <div id="header-links">
  849. <a href="/">home</a>
  850. <a href="{text:link 1 url}">{text:link 1 name}</a>
  851. <a href="{text:link 2 url}">{text:link 2 name}</a>
  852. <a href="{text:link 3 url}">{text:link 3 name}</a>
  853. <a href="{text:link 4 url}">{text:link 4 name}</a>
  854. </div>
  855. </div>
  856. </div>
  857.  
  858. <div id="container">
  859.  
  860. <div id="posts">
  861. {block:posts}
  862. <article>
  863. <div class="postswrap">
  864.  
  865. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="body">{Body}</div>{/block:Text}
  866.  
  867. {block:Photo}<div class="photo">{block:ifcaptionsshown}{block:ifhovercaptions}{block:caption}<div class="perma">{caption}</div>{/block:caption}{/block:ifhovercaptions}{/block:ifcaptionsshown}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>{/block:Photo}
  868.  
  869. {block:Panorama}{block:ifcaptionsshown}{block:ifhovercaptions}{block:caption}<div class="perma">{caption}</div>{/block:caption}{/block:ifhovercaptions}{/block:ifcaptionsshown}{LinkOpenTag}<img src="{PhotoURL-panorama}"alt="{PhotoAlt}" />{LinkCloseTag}{/block:Panorama}
  870.  
  871. {block:Photoset}{block:ifcaptionsshown}{block:ifhovercaptions}{block:caption}<div class="perma">{caption}</div>{/block:caption}{/block:ifhovercaptions}{/block:ifcaptionsshown}<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>{/block:Photoset}
  872.  
  873. {block:Quote}<h2>"{Quote}"</h2>{block:source}<div class="body">{source}</div>{/block:source}{/block:Quote}
  874.  
  875. {block:Link}<h1><a href="{URL}" {Target}>{Name} &#8594;</a></h1>{block:Description}<div class="body">{Description}</div>{/block:Description}{/block:Link}
  876.  
  877. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}<div id="chlines">{block:Lines}<div id="row">{block:Label}<span id="label">{Label}</span>{/block:Label} <span id="line">{Line}</span></div>{/block:Lines}</div>{/block:Chat}
  878.  
  879. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  880.  
  881. {block:Audio}
  882. {block:AudioPlayer}
  883. <div class="wholeaudio">
  884. <div class="player">
  885. <div class="played">{AudioPlayerBlack}</div>
  886. {block:AlbumArt}
  887. <img src="{AlbumArtURL}">
  888. {/block:AlbumArt}
  889. </div>
  890. <div class="audio">
  891. {block:TrackName}
  892. <p><strong>{TrackName}</strong></p>
  893. {/block:TrackName}
  894. {block:Artist}
  895. <p>{Artist}</p>
  896. {/block:Artist}
  897. {block:Album}
  898. <p>{Album}</p>
  899. {/block:Album}
  900. </div>
  901. </div>
  902. {/block:AudioPlayer}
  903. {/block:Audio}
  904.  
  905. {block:Answer}<div class="ask"><div id="talkbubble"><img src="{AskerPortraitURL-96}" align="left"><span class="asker">{Asker}:</span><br>{question}</div></div><div class="body">{Answer}</div>{/block:Answer}
  906.  
  907. {block:ifcaptionsshown}{block:ifnothovercaptions}{block:indexpage}{block:caption}<div class="body">{caption}</div>{/block:caption}{/block:indexpage}{/block:ifnothovercaptions}{/block:ifcaptionsshown}
  908.  
  909. {block:permalinkpage}{block:caption}<div class="body">{caption}</div>{/block:caption}{/block:permalinkpage}
  910.  
  911. {block:permalinkpage}
  912. {block:date}
  913. <div class="fun">
  914. <p><span id="label">Posted:</span> <a href="{permalink}">{TimeAgo}</a>{block:NoteCount} with <a href="{permalink}">{NoteCountWithLabel}</a>{/block:notecount}</p>
  915. {block:RebloggedFrom}<p><span id="label">Reblogged from:</span> <a href="{ReblogParentURL}">{ReblogParentName}</a></p>{/block:RebloggedFrom}
  916. {block:ContentSource}<p><span id="label">Originally posted by:</span> <a href="{SourceURL}">{SourceTitle}</a></p>{/block:ContentSource}
  917. {block:hastags}<p><span id="label">Tagged under:</span> <span class="magic">{block:tags}<a href="{tagurl}">#{tag}</a>{/block:tags}</span></p>{/block:hastags}
  918. </div>
  919. {/block:date}
  920. {/block:permalinkpage}
  921.  
  922. </div>
  923.  
  924. {block:indexpage}
  925. {block:date}
  926. <div class="info">
  927. <a href="{permalink}" style="float:left">{TimeAgo}</a>
  928. <a href="{ReblogURL}" target="_blank"style="float:right;">reblog</a>
  929. </div>
  930. {/block:date}
  931. {/block:indexpage}
  932.  
  933. {block:PostNotes}
  934. {PostNotes-16}
  935. {/block:PostNotes}
  936.  
  937. </article>
  938. {/block:posts}
  939. </div>
  940.  
  941. </div>
  942.  
  943. {block:indexpage}
  944. <div class="footer">
  945. {block:Pagination}
  946. <div class="pagination">
  947. {block:previouspage}<a href="{previouspage}" style="float:left;{block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}">previous</a>{/block:previouspage}
  948. {block:nextpage}<a href="{nextpage}" id="nextpage" style="float:right;{block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}">next</a>
  949. {/block:NextPage}
  950. </div>
  951. {/block:Pagination}
  952. {block:ifmanualload}
  953. <div id="loadbtn"><a>Load More</a></div>
  954. {/block:ifmanualload}
  955. </div>
  956. {/block:indexpage}
  957.  
  958. <div class="cr">
  959. <a href="http://incpetion.tumblr.com">st</a>
  960. </div>
  961.  
  962. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  963. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  964. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  965. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  966. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  967. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  968. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  969. <script>
  970. $(document).ready(function(){
  971. $('.photo-slideshow').pxuPhotoset({
  972. lightbox: true,
  973. rounded: false,
  974. gutter: '{select:photoset gutters}px',
  975. photoset: '.photo-slideshow',
  976. photoWrap: '.photo-data',
  977. photo: '.pxu-photo'
  978. });
  979. });
  980. {block:indexpage}
  981. (function () {
  982. var $tumblelog = $('#posts');
  983. $tumblelog.imagesLoaded(function () {
  984. $tumblelog.masonry({
  985. itemSelector: 'article', //your posts
  986. isAnimated:false,
  987. columnWidth:$("article").width(), //post width including margins, padding + borders
  988. gutterWidth:100, // gap between the 2 columns (more info in my reply)
  989. });
  990. });
  991. {block:ifinfinitescroll}
  992. $tumblelog.infinitescroll({
  993. navSelector : "div.pagination", //pagination
  994. nextSelector : ".pagination a#nextpage", //next link
  995. itemSelector : "article", // posts
  996. loading: {
  997. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  998. img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
  999. msg: null,
  1000. msgText: ""
  1001. },
  1002. },
  1003. function( newElements ) {
  1004. var $newElems = $(newElements)
  1005. $newElems.find('.photo-slideshow').pxuPhotoset({
  1006. lightbox: true,
  1007. rounded: false,
  1008. gutter: '{select:photoset gutters}px',
  1009. photoset: '.photo-slideshow',
  1010. photoWrap: '.photo-data',
  1011. photo: '.pxu-photo'
  1012. },
  1013. function(){
  1014. $tumblelog.masonry({
  1015. itemSelector: 'article',
  1016. columnWidth:$("article").width(),
  1017. gutterWidth:100,
  1018. });
  1019. });
  1020. var $newElems = $(newElements).css({
  1021. opacity: 0,
  1022. });
  1023. $newElems.imagesLoaded(function(){
  1024. $newElems.animate({ opacity: 1 });
  1025. $tumblelog.masonry( 'appended', $newElems );
  1026. });
  1027. });
  1028. {block:ifmanualload}
  1029. $tumblelog.infinitescroll('unbind');
  1030. $('#loadbtn').on('click', function(e) {
  1031. e.preventDefault();
  1032. $tumblelog.infinitescroll('retrieve');
  1033. });
  1034. {/block:ifmanualload}
  1035. {/block:ifinfinitescroll}
  1036. })();
  1037. {/block:indexpage}
  1038. </script>
  1039.  
  1040. </body>
  1041. </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!