API tools faq
paste
feiinho

JAZZatkin http://jazzatkin.com | @JAZZatkin

feiinho
Apr 29th, 2019
339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5. | ---
  6. | Theme by JAZZatkin
  7. | ---
  8. | http://jazzatkin.com
  9. | @JAZZatkin
  10. | ---
  11. -->
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. <meta name="viewport" content="width=device-width, initial-scale=1">
  17.  
  18. {block:Description}
  19. <meta name="description" content="{MetaDescription}" />
  20. {/block:Description}
  21. <meta name="color:Primary" content="#f0d6db"/>
  22. <meta name="color:Secondary" content="#fc2a20"/>
  23. <meta name="color:Tertiary" content="#f0d6db"/>
  24. <meta name="if:Infinite Scroll" content="1">
  25. <meta name="if:Tags on Homepage" content="1" />
  26. <meta name="text:Facebook Link" content="">
  27. <meta name="text:Instagram Handle" content="">
  28. <meta name="text:Twitter Handle" content="">
  29. <meta name="text:YouTube URL" content="">
  30. <meta name="if:Archive Link" content="1" />
  31. <meta name="if:Ask Link" content="1" />
  32. <meta name="text:Custom Link 1 Title" content="Custom Link 1">
  33. <meta name="text:Custom Link 1 URL" content="">
  34. <meta name="text:Custom Link 2 Title" content="Custom Link 2">
  35. <meta name="text:Custom Link 2 URL" content="">
  36. <meta name="text:Custom Link 3 Title" content="Custom Link 3">
  37. <meta name="text:Custom Link 3 URL" content="">
  38.  
  39. <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
  40.  
  41. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Playfair+Display:900" rel="stylesheet">
  42. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  43.  
  44.  
  45. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  46.  
  47. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  48.  
  49. <script>
  50. $(document).ready(function() {
  51. var a = 3;
  52. $( ".draggable" ).draggable({
  53. start: function(event, ui) { $(this).css("z-index", a++); }
  54. });
  55. $('.container').mousedown(function() {
  56. $(this).addClass('top').removeClass('bottom');
  57. $(this).siblings().removeClass('top').addClass('bottom');
  58. $(this).css("z-index", a++);
  59.  
  60. });
  61. });
  62. </script>
  63.  
  64. <style type="text/css">
  65. html, body{
  66. margin:0;
  67. padding:0;
  68. background-color: {color:Primary};
  69. font-size: 12px;
  70. line-height: 1.4em;
  71. }
  72. body{
  73. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  74. font-family: 'Inconsolata', sans-serif;
  75. }
  76. /* Navigation */
  77. nav#nav{
  78. position: fixed;
  79. bottom: 0;
  80. left: 0;
  81. width: 100%;
  82. overflow: hidden;
  83. padding: 0;
  84. margin: 0;
  85. background-color: {color:Tertiary};
  86. border-top: 2px solid {color:Secondary};
  87. z-index: 200;
  88.  
  89. }
  90. nav#nav ul{
  91. list-style-type:none;
  92. padding: 5px;
  93. margin: 0;
  94. height: 30px;
  95. }
  96. nav#nav ul li{
  97. float: left;
  98. padding: 0;
  99. margin: 0;
  100. height: 30px;
  101. }
  102. nav#nav ul li a{
  103. font-size: 12px;
  104. line-height: 24px;
  105. height: 28px;
  106. padding: 0px 20px;
  107. border: 2px solid {color:Secondary};
  108. color: {color:Secondary};
  109. box-sizing: border-box;
  110. display: inline-block;
  111. margin-right: 5px;
  112. text-transform: uppercase;
  113. }
  114. nav#nav ul li a:hover, nav#nav ul li a.selected{
  115. background-color: {color:Secondary};
  116. color: {color:Primary};
  117. }
  118.  
  119. /* Post Structure */
  120. .wrapper{
  121. width: 100%;
  122. overflow: hidden;
  123. margin: 40px 0px 80px 0px;
  124. }
  125. ul.posts{
  126. list-style: none;
  127. text-align: center;
  128. padding: 0px !important;
  129. margin: 0px auto;
  130. {block:IndexPage}
  131. width: 1090px;
  132. {/block:IndexPage}
  133. {block:PermalinkPage}
  134. width: calc(100% - 80px);
  135. max-width: 700px;
  136. height: fit-content;
  137. display: flex;
  138. {/block:PermalinkPage}
  139. }
  140. @media screen and (max-width:1490px){
  141. ul.posts{
  142. width: 720px;
  143. }
  144. }
  145. @media screen and (max-width:920px){
  146. ul.posts{
  147. width: calc(100% - 200px);
  148. {block:PermalinkPage}
  149. flex-direction: column;
  150. {/block:PermalinkPage}
  151. }
  152. }
  153. @media screen and (max-width:700px){
  154. ul.posts{
  155. width: calc(100% - 60px);
  156. position: static !important;
  157. height: auto !important;
  158. overflow: hidden;
  159. }
  160. }
  161. ul.posts li.post{
  162. position: relative;
  163. padding: 0;
  164. text-align: left;
  165. width: 350px;
  166. margin: 5px;
  167. float: left;
  168. border: 2px solid {color:Secondary};
  169. box-sizing: border-box;
  170. background-color: #FFF;
  171. }
  172. ul.posts li.post.about{
  173. border-bottom: 0;
  174. }
  175. @media screen and (max-width:920px){
  176. ul.posts li.post{
  177. position: static !important;
  178. width: 100% !important;
  179. margin: 0 0 5px 0;
  180. }
  181. }
  182. ul.posts li.post.full, ul.posts li.post.notes{
  183. flex-grow: 1;
  184. max-height: calc(100vh - 120px) !important;
  185. z-index: 5000;
  186. display: flex;
  187. margin: 0 auto;
  188. flex-direction: column;
  189. align-self:flex-start;
  190. }
  191. @media screen and (max-width:920px){
  192. ul.posts li.post.full, ul.posts li.post.notes{
  193. width: 100% !important;
  194. height: unset;
  195. overflow: hidden;
  196. margin: 5px 0px !important;
  197. flex-grow: 1 !important;
  198. max-height: unset !important;
  199. }
  200. }
  201. .postControls{
  202. width: 100%;
  203. padding: 5px;
  204. box-sizing: border-box;
  205. background-color: {color:Tertiary};
  206. border-bottom: 2px solid {color:Secondary};
  207. display: flex;
  208. min-height: 30px;
  209. }
  210. .postInner{
  211. position: relative;
  212. }
  213. {block:PermalinkPage}
  214. .postInner {
  215. overflow-y: scroll !important;
  216. height: 100%;
  217. overflow: hidden;
  218. }
  219. {/block:PermalinkPage}
  220. .date{
  221. flex-grow: 1;
  222. font-size: 12px;
  223. line-height: 20px;
  224. text-transform: uppercase;
  225. color: {color:Secondary};
  226. border: 0;
  227. }
  228. .date a{
  229. color: {color:Secondary};
  230. text-decoration: none;
  231. padding: 0;
  232. border: 0;
  233. }
  234. .date a:hover{
  235. background-color: {color:Secondary};
  236. color: {color:Primary};
  237. }
  238. .postControls .fullControl, .postControls .closeControl{
  239. width: 20px;
  240. height: 20px;
  241. border: 2px solid {color:Secondary};
  242. line-height: 16px;
  243. font-size: 12px;
  244. text-align: center;
  245. color: {color:Secondary};
  246. margin-left: 5px;
  247. display: inline-block;
  248. box-sizing: border-box;
  249. }
  250. .postControls .fullControl:hover, .postControls .closeControl:hover{
  251. background-color: {color:Secondary};
  252. color: {color:Tertiary};
  253. border: 2px solid {color:Secondary};
  254. }
  255. /* Basics */
  256. ::-webkit-scrollbar {
  257. width: 10px;
  258. position: fixed;
  259. right: 12px;
  260. }
  261. ::-webkit-scrollbar-track {
  262. box-shadow: 0;
  263. border-radius: 0px;
  264. background-color: {color:Tertiary};
  265. }
  266. .post ::-webkit-scrollbar-track {
  267. border-left: 0px solid {color:Secondary};
  268. }
  269. ::-webkit-scrollbar-thumb {
  270. background: {color:Secondary};
  271. border-radius: 0px;
  272. }
  273. .hidden{
  274. display: none;
  275. }
  276. figure img{
  277. width: 100% !important;
  278. height: auto !important;
  279. margin-top: 5px;
  280. }
  281.  
  282. a{
  283. color: {color:Secondary};
  284. text-decoration: none;
  285. }
  286. a:hover{
  287. color: {color:Tertiary};
  288. }
  289. p{
  290. margin: 0;
  291. padding: 0;
  292. }
  293. p+p{
  294. padding-top: 5px;
  295. }
  296. figure + p{
  297. padding-top: 5px;
  298. }
  299. p + figure{
  300. padding-top: 5px !important;
  301. }
  302. img{
  303. display: block;
  304. margin: 0;
  305. padding: 0;
  306. }
  307. blockquote{
  308. margin: 5px 0px 5px 20px;
  309. }
  310. .draggable{
  311. z-index: 2;
  312. }
  313. /* Posts, General */
  314. .postContent{
  315. width: 100%;
  316. overflow: hidden;
  317. box-sizing: border-box;
  318. padding: 5px;
  319. }
  320. .postContent.hide{
  321. padding: 0px;
  322. }
  323. .postContent.hide p{
  324. display: block;
  325. padding: 5px;
  326. }
  327. .postContent.hide p:last-child{
  328. border-bottom: 2px solid {color:Secondary};
  329. }
  330. .postContent.hide p span:empty{
  331. padding: 0px;
  332. border: 0;
  333. }
  334. .postContent a{
  335. padding: 1px;
  336. border-bottom: 1px solid {color:Secondary};
  337. }
  338. .postContent a:hover{
  339. background-color: {color:Secondary};
  340. color: {color:Primary};
  341. }
  342. .tagContainer, .meta{
  343. width: 100%;
  344. overflow: hidden;
  345. padding: 5px;
  346. box-sizing: border-box;
  347. background-color: {color:Tertiary};
  348. border-top: 2px solid {color:Secondary};
  349. font-size: 12px;
  350. }
  351. ul.tags{
  352. list-style: none;
  353. padding: 0;
  354. margin: 0;
  355. }
  356. ul.tags li{
  357. display: inline-block;
  358. margin-right: 5px;
  359. }
  360. ul.tags li a, .perma a, .notecount a{
  361. background-color: {color:Secondary};
  362. color: {color:Tertiary};
  363. text-transform: uppercase;
  364. }
  365. ul.tags li a:hover, .perma a:hover, .notecount a:hover{
  366. background-color: {color:Tertiary};
  367. }
  368. .desktopLinks{
  369. position: fixed;
  370. top: 20px;
  371. left: 20px;
  372. z-index: 1;
  373. width: 60px;
  374. overflow: hidden;
  375. text-align: center;
  376. }
  377. @media screen and (max-width:700px){
  378. .desktopLinks{
  379. position: static;
  380. width: 100%;
  381. padding: 0 40px 30px 40px;
  382. box-sizing: border-box;
  383. display: flex;
  384. justify-content: center;
  385. }
  386. }
  387. .desktopLink{
  388. width: 100%;
  389. overflow: hidden;
  390. display: block;
  391. padding: 0px 1px;
  392. margin: 0 0 10px 0;
  393. border: 0;
  394. font-size: 30px;
  395. line-height: 30px;
  396. word-wrap: break-word;
  397. }
  398. @media screen and (max-width:700px){
  399. .desktopLink{
  400. width: unset;
  401. display: inline-block;
  402. font-size: 25px;
  403. line-height: 25px;
  404. text-align: center;
  405. padding: 0px 1px;
  406. margin: 0 0 10px 10px;
  407. }
  408. .desktopLink:first-child{
  409. margin: 0 0 10px 0;
  410. }
  411. .desktopTitle{
  412. display: none;
  413. }
  414. }
  415. .desktopLink p.desktopTitle{
  416. font-size: 12px;
  417. line-height: 12px;
  418. margin-top: 5px;
  419. }
  420. .desktopLink:hover{
  421. color: #FFF;
  422. padding: 0px 1px;
  423. border: 0;
  424. }
  425. /* Text Posts */
  426. h1, h2{
  427. font-size: 12px;
  428. padding: 0 0 5px 0;
  429. margin: 0;
  430. }
  431. h3{
  432. padding: 0;
  433. margin: 0;
  434. font-size: 12px;
  435. width: 100%;
  436. padding: 5px;
  437. box-sizing: border-box;
  438. line-height: 22px;
  439. background-color: {color:Tertiary};
  440. color: {color:Secondary};
  441. border-bottom: 2px solid {color:Secondary};
  442. text-transform: uppercase;
  443. font-weight: normal;
  444. }
  445. .text h3 a:hover{
  446. background-color: {color:Secondary};
  447. color: {color:Primary};
  448. }
  449. /* Photo Post */
  450. .photosetContainer{
  451. width: 100%;
  452. box-sizing: border-box;
  453. }
  454. .photoset img{
  455. width: 100% important;
  456. height: auto !important;
  457. display: block;
  458. }
  459. /* Video Posts */
  460. .videoWrapper {
  461. position: relative;
  462. padding-bottom: 50%;
  463. padding-top: 25px;
  464. height: 0;
  465. }
  466. .videoWrapper iframe {
  467. position: absolute;
  468. top: 0;
  469. left: 0;
  470. width: 100%;
  471. height: 100%;
  472. }
  473. /* Audio Posts */
  474. .audio iframe{
  475. width: 100% !important;
  476. display: block;
  477. }
  478. /* Link Posts */
  479. .linkThumb{
  480. width: 100%;
  481. height: auto;
  482. border-bottom: 2px solid {color:Secondary};
  483. }
  484. .linkHost, .linkTitle{
  485. width: 100%;
  486. border-bottom: 2px solid {color:Secondary};
  487. display: block;
  488. background-color: {color:Tertiary};
  489. padding: 5px;
  490. box-sizing: border-box;
  491. text-transform: uppercase;
  492. }
  493. .linkHost:hover, .linkTitle:hover{
  494. background-color: {color:Secondary};
  495. color: {color:Tertiary};
  496. border-bottom: 2px solid {color:Secondary};
  497. }
  498. /* Answer Posts */
  499. .questionContainer{
  500. padding: 5px;
  501. border-bottom: 2px solid {color:Secondary};
  502. }
  503. .answerContainer{
  504. padding: 5px;
  505. }
  506. .answererContainer + p{
  507. display: inline;
  508. }
  509. .askerContainer, .answererContainer{
  510. color: {color:Secondary};
  511. text-transform: uppercase;
  512. }
  513. .asker:hover, .answerer:hover{
  514. background-color: {color:Secondary};
  515. color: {color:Primary};
  516. }
  517. .replies{
  518. padding: 5px;
  519. }
  520. .answerContainer+.replies{
  521. border-top: 2px solid {color:Secondary};
  522. }
  523. .replies:empty{
  524. display: none;
  525. }
  526. /* Chat Posts */
  527. ul#chat{
  528. list-style-type: none;
  529. padding: 0;
  530. margin: 0;
  531. }
  532. ul#chat li{
  533. margin: 0;
  534. padding: 5px;
  535. border-top: 2px solid {color:Secondary};
  536. }
  537. ul#chat li:first-child {
  538. border-top: 0px solid #FFF;
  539. }
  540. ul#chat li span.label{
  541. color: {color:Secondary};
  542. }
  543. /* Pagination */
  544. .pagination{
  545. position: fixed;
  546. bottom: 50px;
  547. right: 20px;
  548. z-index: 1;
  549. width: 60px;
  550. overflow: hidden;
  551. text-align: center;
  552. }
  553. @media screen and (max-width:700px){
  554. .pagination{
  555. position: static;
  556. padding: 0px 40px;
  557. margin: 40px 0 0 0;
  558. width: 100%;
  559. box-sizing: border-box;
  560. text-align: right;
  561. display: flex;
  562. justify-content: center;
  563. }
  564. .pagination .desktopLink{
  565. float: right;
  566. }
  567. }
  568. /* Notes */
  569. ul.posts li.post.notes{
  570. width: 30%;
  571. flex-grow: 0;
  572. margin-left: 10px;
  573. }
  574. ol.notes {
  575. list-style-type: none;
  576. font-weight: 300;
  577. padding: 5px;
  578. }
  579. ol.notes li.note {
  580. padding-top: 5px;
  581. font-size: 12px;
  582. }
  583. ol.notes li.note:first-child {
  584. padding-top: 0px;
  585. }
  586. ol.notes li.note a{
  587. color: {color:Secondary};
  588. text-decoration: none;
  589. font-weight: normal;
  590. }
  591. ol.notes li.note a:hover{
  592. background-color: {color:Secondary};
  593. color: {color:Primary};
  594. }
  595. ol.notes li.note img.avatar {
  596. display: none;
  597. }
  598. ol.notes li.note span.action {
  599. font-weight: normal;
  600. }
  601. ol.notes li.note .answer_content {
  602. font-weight: normal;
  603. }
  604. ol.notes li.note blockquote a {
  605. text-decoration: none;
  606. }
  607.  
  608. .note.more_notes_link_container{
  609. margin-top: 0px;
  610. text-align: left !important;
  611. font-size: 12px !important;
  612. padding-bottom: 0px;
  613. }
  614. .note.more_notes_link_container a, a.more_notes_link, .notes_loading{
  615. text-decoration: none;
  616. padding: 1px !important;
  617. margin: 0;
  618. border: 0 !important;
  619. background-color: {color:Secondary}; !important;
  620. color: {color:Primary} !important;
  621. font-weight: normal !important;
  622. font-family: 'Inconsolata', sans-serif;
  623. text-align: left !important;
  624. font-size: 12px; !important;
  625. text-transform: uppercase;
  626. }
  627. a.more_notes_link:hover{
  628. color: {color:Secondary} !important;
  629. background-color: {color:Primary} !important;
  630. border-bottom:0;
  631. }
  632. .clearfix:after {
  633. visibility: hidden;
  634. display: block;
  635. font-size: 0;
  636. content: " ";
  637. clear: both;
  638. height: 0;
  639. }
  640. .clearfix { display: inline-block; }
  641. /* start commented backslash hack \*/
  642. * html .clearfix { height: 1%; }
  643. .clearfix { display: block; }
  644. /* close commented backslash hack */
  645.  
  646. {CustomCSS}
  647. #loading{
  648. width: 100vw;
  649. height: 100vh;
  650. top: 0;
  651. left: 0;
  652. right: 0;
  653. bottom: 0;
  654. position: fixed;
  655. z-index: 5000;
  656. background-color: {color:Primary};
  657. color: {color:Secondary};
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. flex-direction: column;
  662. flex-wrap: wrap;
  663. font-size: 30px;
  664. {block:PermalinkPage}
  665. display: none;
  666. {/block:PermalinkPage}
  667. }
  668. #loading p{
  669. font-size: 14px;
  670. text-align: center;
  671. display: block;
  672. clear: left;
  673. margin-top: 10px;
  674. }
  675. .loaderTwo{
  676. width: 100%;
  677. position: absolute;
  678. top: 0;
  679. left: 0;
  680. width: 100%;
  681. height: 100%;
  682. display: flex;
  683. align-items: center;
  684. justify-content: center;
  685. font-size: 20px;
  686. color: {color:Primary};
  687. background-color: {color:Secondary};
  688. display: none;
  689. }
  690. figure video {
  691. max-width: 100% !important;
  692. }
  693. </style>
  694. </head>
  695. <body>
  696. <div class="wrapper">
  697. <div id="loading">
  698. <i class="fas fa-cog fa-spin"></i>
  699. <p>LOADING</p>
  700. </div>
  701. <nav id="nav">
  702. <ul>
  703. <li><a class="navLink" href="{BlogURL}">START</a></li>
  704. {block:IfAskLink}<li><a class="navLink ask" href="/ask">Ask</a></li>{/block:IfAskLink}
  705. {block:IfArchiveLink}<li><a class="navLink archive" href="/archive">Archive</a></li>{/block:IfArchiveLink}
  706. {block:IfCustomLink1URL}<li><a href="{text:Custom Link 1 URL}"}>{text:Custom Link 1 Title}</a></li>{/block:IfCustomLink1URL}
  707. {block:IfCustomLink2URL}<li><a href="{text:Custom Link 2 URL}">{text:Custom Link 2 Title}</a></li>{/block:IfCustomLink2URL}
  708. {block:IfCustomLink3URL}<li><a href="{text:Custom Link 3 URL}">{text:Custom Link 3 Title}</a></li>{/block:IfCustomLink3URL}
  709.  
  710. </ul>
  711. </nav>
  712.  
  713. <div class="desktopLinks">
  714. <a class="desktopLink" href="{BlogURL}"><i class="fas fa-desktop"></i><p class="desktopTitle">{Title}</p>
  715. </a>
  716. <a class="desktopLink" href="https://www.tumblr.com/theme/40954" target="_blank"><i class="fas fa-palette"></i>
  717. <p class="desktopTitle">Theme by JAZZatkin</p>
  718. </a>
  719. {block:IfInstagramHandle}
  720. <a class="desktopLink" href="http://instagram.com/{text:Instagram Handle}" target="_blank"><i class="fab fa-instagram"></i>
  721. <p class="desktopTitle">@{text:Instagram Handle}</p>
  722. </a>
  723. {/block:IfInstagramHandle}
  724. {block:IfTwitterHandle}
  725. <a class="desktopLink" href="http://twitter.com/{text:Twitter Handle}" target="_blank"><i class="fab fa-twitter"></i>
  726. <p class="desktopTitle">@{text:Twitter Handle}</p>
  727. </a>
  728. {block:IfTwitterHandle}
  729. {block:IfYouTubeURL}
  730. <a class="desktopLink" href="{text:YouTube URL}" target="_blank"><i class="fab fa-youtube"></i>
  731. <p class="desktopTitle">YouTube</p>
  732. </a>
  733. {block:IfYouTubeURL}
  734.  
  735.  
  736. {block:HasPages}
  737. {block:Pages}
  738. <a class="desktopLink" href="{URL}" target="_blank"><i class="far fa-folder"></i>
  739. <p class="desktopTitle">{Label}</p>
  740. </a>
  741. {/block:Pages}
  742. {/block:HasPages}
  743.  
  744. </div>
  745.  
  746. <ul class="posts container">
  747. {block:IndexPage}
  748. <li class="post about">
  749. <div class="postControls">
  750. <div class="date">
  751. <a href="{BlogURL}">{Title}</a>
  752. </div>
  753. <a class="fullControl" href="#"><i class="fas fa-arrows-alt"></i></a>
  754. <a class="closeControl closeButton" href="#"><i class="fas fa-times"></i></a>
  755. </div>
  756. <div class="postContent hide">
  757. <p>{Description}</p>
  758. </div>
  759. </li>
  760. {/block:IndexPage}
  761. {block:Posts}
  762. <li class="post main {block:IndexPage}draggable{/block:IndexPage} {block:PermalinkPage}full{/block:PermalinkPage}">
  763. <div class="postControls">
  764. <div class="date">
  765. {ShortDayOfWeek} {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}
  766. </div>
  767. {block:IndexPage}
  768. <a class="fullControl" href="{Permalink}"><i class="fas fa-arrows-alt"></i></a>
  769. {/block:IndexPage}
  770. {block:IndexPage}<a class="closeControl closeButton" href="#">{/block:IndexPage}{block:PermalinkPage}<a class="closeControl" href="{BlogURL}">{/block:PermalinkPage}<i class="fas fa-times"></i></a>
  771.  
  772. </div>
  773.  
  774. <div class="postInner">
  775. <div class="loaderTwo"><i class="fas fa-cog fa-spin"></i></div>
  776. <div class="postInnerTwo">
  777. {block:Text}
  778. <div class="text">
  779. {block:Title}
  780. <h3 class="title">
  781. <a href="{Permalink}">{Title}</a>
  782. </h3>
  783. {/block:Title}
  784. {block:Body}
  785. <div class="postContent">
  786. {Body}
  787. </div>
  788. {/block:Body}
  789. </div>
  790. {/block:Text}
  791.  
  792. {block:Photo}
  793. <div class="photo">
  794. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/> {block:IndexPage}</a>{/block:IndexPage}{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  795. </div>
  796. {/block:Photo}
  797.  
  798. {block:Panorama}
  799. <div class="panorama">
  800.  
  801. {LinkOpenTag}
  802. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  803. {LinkCloseTag}
  804. </div>
  805. {/block:Panorama}
  806.  
  807. {block:Photoset}
  808. <div class="photosetContainer">
  809. {block:Photos}
  810. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/>{block:IndexPage}</a>{/block:IndexPage}{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  811. {/block:Photos}
  812. </div>
  813. {/block:Photoset}
  814.  
  815. {block:Link}
  816. <div class="link">
  817. {block:Thumbnail}
  818. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}{block:PermalinkPage}<a href="{URL}" class="link" {Target}>{/block:PermalinkPage}<img class="linkThumb" src="{Thumbnail-HighRes}" alt="{PhotoAlt}"></a>
  819. {/block:Thumbnail}
  820.  
  821. {block:Host}
  822. <a class="linkHost" href="http://{host}">{Host}</a>
  823. {/block:Host}
  824. <a class="linkTitle" href="{URL}" class="link" {Target}>{Name}</a>
  825. </div>
  826.  
  827. {block:PermalinkPage}
  828. {block:Description}
  829. <div class="postContent">
  830. {Description}
  831. </div>
  832. {/block:Description}
  833. {/block:PermalinkPage}
  834.  
  835. {block:IndexPage}
  836. {block:Description}
  837. <div class="postContent">
  838. {Description}
  839. </div>
  840. {/block:Description}
  841. {/block:IndexPage}
  842.  
  843. {/block:Link}
  844.  
  845. {block:Chat}
  846. <div class="chat">
  847. {block:Title}
  848. <h3>{Title}</h3>
  849. {/block:Title}
  850. <ul id="chat">
  851. {block:Lines}
  852. <li class="{Alt} user_{UserNumber}">
  853. {block:Label}
  854. <span class="label">{Label}</span>
  855. {/block:Label}{Line}
  856. </li>
  857. {/block:Lines}
  858. </ul>
  859. </div>
  860. {/block:Chat}
  861.  
  862. {block:Audio}
  863. <div class="audio">
  864. {block:AudioEmbed}
  865. {AudioEmbed}
  866. {/block:AudioEmbed}
  867. </div>
  868. {/block:Audio}
  869.  
  870. {block:Answer}
  871. <div class="question">
  872. <div class="questionContainer">
  873. <span class="askerContainer">{Asker} ASKED:</span> {Question}
  874. </div>
  875. {block:Answerer}
  876. <div class="answerContainer">
  877. <span class="answererContainer">{Answerer} ANSWERED:</span > {Answer}
  878. </div>
  879. {/block:Answerer}
  880. <div class="replies">{Replies}</div>
  881. </div>
  882. {/block:Answer}
  883.  
  884. {block:Video}
  885. <div class="video clearfix">
  886. <div class="videoWrapper">
  887. {VideoEmbed-700}
  888. </div>
  889. </div>
  890. {/block:Video}
  891.  
  892. {block:Quote}
  893. <div class="quote">
  894. <div class="postContent">
  895. "{Quote}" {block:Source}— {Source}{/block:Source}
  896. </div>
  897. </div>
  898. {/block:Quote}
  899.  
  900. {block:PermalinkPage}
  901. {block:Caption}
  902. <div class="postContent">
  903. {Caption}
  904. </div>
  905. {/block:Caption}
  906. {/block:PermalinkPage}
  907. </div>
  908. </div>
  909. {block:IndexPage}
  910. {block:Caption}
  911. <div class="postContent">
  912. {Caption}
  913. </div>
  914. {/block:Caption}
  915. {block:HasTags}
  916. {block:IfTagsOnHomepage}
  917. <div class="tagContainer">
  918. <ul class="tags">
  919.  
  920. {block:Tags}
  921. <li>
  922. <a href="{TagURL}">#{Tag}</a>
  923. </li>
  924. {/block:Tags}
  925. </ul>
  926. </div>
  927. {/block:IfTagsOnHomepage}
  928. {/block:HasTags}
  929.  
  930.  
  931.  
  932. {block:NoteCount}
  933. <div class="meta">
  934. <div class="notecount">
  935. <a href="{Permalink}">{NoteCountWithLabel}</a> </div>
  936. </div>
  937. {/block:NoteCount}
  938.  
  939.  
  940.  
  941. {/block:IndexPage}
  942.  
  943. </li>
  944.  
  945.  
  946. {block:PostNotes}
  947. <li class="post notes">
  948. <div class="postControls">
  949. <div class="date">
  950.  
  951. <a href="#">{NoteCountWithLabel}</a>
  952. </div>
  953. <a class="closeControl" href="{BlogURL}"><i class="fas fa-times"></i></a>
  954. </div>
  955. <div class="postInner">
  956. <div id="note-page">
  957. <div class="note-container">
  958. {PostNotes}
  959. </div>
  960. </div>
  961. </div>
  962. </li>
  963. {/block:PostNotes}
  964. {/block:Posts}
  965. </ul>
  966.  
  967. {block:Pagination}
  968. <div class="pagination {block:IfInfiniteScroll}infinite{/block:IfInfiniteScroll}">
  969. {block:PreviousPage}
  970. <a class="desktopLink" href="{PreviousPage}" id="prev"><i class="far fa-trash-alt"></i><p class="desktopTitle">Prev Posts</p></a>
  971. {/block:PreviousPage}
  972.  
  973. {block:NextPage}
  974. <a class="desktopLink" href="{NextPage}" id="next"><i class="fas fa-recycle"></i><p class="desktopTitle">Next Posts</p></a>
  975. {/block:NextPage}
  976.  
  977. </div>
  978. {/block:Pagination}
  979.  
  980. </div>
  981. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
  982.  
  983.  
  984. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.js"></script>
  985.  
  986. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  987.  
  988.  
  989. {block:IndexPage}
  990. <script type="text/javascript">
  991. (function() {
  992. // Main content container
  993. var $container = $('.container');
  994. // Masonry + ImagesLoaded
  995. $container.imagesLoaded(function(){
  996. $container.masonry({
  997. itemSelector: 'li.post',
  998. });
  999. });
  1000. $('#loading').delay(500).fadeOut(300);
  1001.  
  1002. // Infinite Scroll
  1003. $container.infinitescroll({
  1004. navSelector : ".pagination.infinite",
  1005. nextSelector : "a#next",
  1006. itemSelector : ".post.main",
  1007. // finished message
  1008. loading: {
  1009. speed: 0,
  1010. msgText: 'LOADING',
  1011. finishedMsg: '',
  1012. }
  1013. },
  1014. // Trigger Masonry as a callback
  1015. function( newElements ) {
  1016. // hide new items while they are loading
  1017. var $newElems = $( newElements ).css({ opacity: '0' });
  1018. $newElems.find('.postInnerTwo').css({ opacity: '0'});
  1019. $newElems.find('.loaderTwo').css({ 'display': 'flex' });
  1020. // ensure that images load before adding to masonry layout
  1021. $newElems.imagesLoaded(function(){
  1022. $newElems.each(function (i) {
  1023. var $item = $(this);
  1024. setTimeout(function() {
  1025. $item.animate({ opacity: 1 }, 0);
  1026. $item.find('.postInnerTwo').delay(500).animate({ opacity: 1 });
  1027. $item.find('.loaderTwo').delay(500).fadeOut();
  1028. }, 500*i);
  1029. });
  1030.  
  1031. $container.masonry( 'appended', $newElems, true );
  1032. });
  1033. });
  1034. })();
  1035. </script>
  1036.  
  1037. {/block:IndexPage}
  1038.  
  1039.  
  1040. </body>
  1041. </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!