API tools faq
paste
ninchuser

Theme 13 - Dusk - cactusthemes

ninchuser
Jul 4th, 2019
2,729
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 56.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!-- THEME 13 - DUSK
  6. by cactusthemes
  7. -->
  8.  
  9. <!-- CREDITS: - MAJOR DESIGN INSPO: https://dribbble.com//shots/6636784-Music-Player
  10. - Fade in on Refresh/Tumblr Controls by cyantists
  11. - Featured Posts Script by fukuo
  12. - Lightbox by shythemes
  13. - Tooltip by manos malihu
  14. - Unnested Captions by bychloethemes
  15. - Flexibleframes by nouvae
  16. - Minimal Soundcloud Player by shythemes
  17. - Icon Font by suiomi
  18. - Photosets.css by annasthms and espoirthemes
  19. - Smoothscroll by cfernandi
  20. -->
  21.  
  22. <title>{Title}</title>
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <meta name="description" content="{MetaDescription}">
  26. <meta name="viewport" content="width=device-width, initial-scale=1">
  27.  
  28. <meta name="if:Dark Tumblr Controls" content="1">
  29. <meta name="if:Fade In On Refresh" content="1">
  30. <meta name="if:Featured Posts" content="1">
  31. <meta name="if:One Column" content="0">
  32. <meta name="if:American Date" content="0">
  33.  
  34. <meta name="select:Font Family" title="rubik" content="Rubik">
  35. <meta name="select:Font Family" title="nunito" content="Nunito">
  36. <meta name="select:Font Family" title="overpass" content="Overpass">
  37. <meta name="select:Font Family" title="raleway" content="Raleway">
  38. <meta name="select:Font Family" title="bai jamjuree" content="Bai Jamjuree">
  39.  
  40. <meta name="select:Font Size" title="15px" content="15px">
  41. <meta name="select:Font Size" title="16px" content="16px">
  42. <meta name="select:Font Size" title="14px" content="14px">
  43. <meta name="select:Font Size" title="13px" content="13px">
  44.  
  45. <meta name="select:Tags Icon" title="sun" content="sun">
  46. <meta name="select:Tags Icon" title="hashtag" content="hashtag">
  47. <meta name="select:Tags Icon" title="bookmark" content="bookmark-1">
  48. <meta name="select:Tags Icon" title="chat bubble" content="chat-bubble">
  49. <meta name="select:Tags Icon" title="checkmark" content="check-mark">
  50. <meta name="select:Tags Icon" title="circle" content="circle">
  51. <meta name="select:Tags Icon" title="cloud" content="cloud-3">
  52. <meta name="select:Tags Icon" title="cog" content="settings">
  53. <meta name="select:Tags Icon" title="cross" content="cross">
  54. <meta name="select:Tags Icon" title="diamond" content="diamond">
  55. <meta name="select:Tags Icon" title="flag" content="flag-1">
  56. <meta name="select:Tags Icon" title="flower" content="flower-1">
  57. <meta name="select:Tags Icon" title="gift" content="gift">
  58. <meta name="select:Tags Icon" title="heart" content="heart-1">
  59. <meta name="select:Tags Icon" title="moon" content="moon">
  60. <meta name="select:Tags Icon" title="music note" content="music">
  61. <meta name="select:Tags Icon" title="pencil" content="pencil">
  62. <meta name="select:Tags Icon" title="planet" content="planet-2">
  63. <meta name="select:Tags Icon" title="plus" content="plus-1">
  64. <meta name="select:Tags Icon" title="push pin" content="push-pin">
  65. <meta name="select:Tags Icon" title="snowflake" content="snowflake">
  66. <meta name="select:Tags Icon" title="star" content="star">
  67.  
  68. <meta name="color:Background" content="#ffdccf">
  69. <meta name="color:Text" content="#888">
  70. <meta name="color:Blockquote" content="#fff">
  71. <meta name="color:Selection Text" content="#fff">
  72. <meta name="color:Selection Background" content="#ffb194">
  73. <meta name="color:Footer Background" content="#ffb194">
  74. <meta name="color:Footer Text" content="#fff">
  75. <meta name="color:Footer Link" content="#ffdccf">
  76. <meta name="color:Container Background" content="#fff">
  77. <meta name="color:Post Background" content="#ffdccf">
  78. <meta name="color:Post Title Background" content="#ffb194">
  79. <meta name="color:Post Title Text" content="#fff">
  80. <meta name="color:Post Title Hover" content="#ffdccf">
  81. <meta name="color:Post Link" content="#fff">
  82. <meta name="color:Post Link Hover" content="#ffb194">
  83.  
  84. <link href='https://fonts.googleapis.com/css?family=Emblema+One|Rubik|Nunito|Overpass|Raleway|Bai+Jamjuree' rel='stylesheet' type='text/css'>
  85.  
  86. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  87.  
  88. <link href="https://static.tumblr.com/0podkko/bwepdyarh/photosets.css" rel="stylesheet">
  89.  
  90. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  91.  
  92. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  93.  
  94. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.9/SmoothScroll.min.js"></script>
  95.  
  96. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  97.  
  98. <script src="https://static.tumblr.com/uxq3xua/Tydpu4q3u/dusk.cactusthemes.js"></script>
  99.  
  100. <script>
  101. $(document).ready(function() {
  102. {block:ifFeaturedPosts}
  103. var readData, insert;
  104. var url = "https://{name}.tumblr.com/api/read/json?&tagged=featured";
  105. $.getScript(url, function() {
  106. readData = tumblr_api_read;
  107. console.log(readData);
  108. for (var i = 0; i <= 2; i++) {
  109. var posts = readData.posts[i];
  110. var link = posts["url"];
  111. var img = posts["photo-url-1280"];
  112. var captionPhotos = posts["photo-caption"];
  113. var titleText = posts["regular-title"];
  114. var captionText = posts["regular-body"]
  115. if (img === undefined) {
  116. insert = '<div class="featured_post">';
  117. insert += '<h3>' + titleText + '</h3>';
  118. insert += '<div class="featcap">' + captionText + '</div>';
  119. insert += '<a class="featmore" href="' + link + '">see more</a>';
  120. insert += '</div>';
  121. $('.featured_inner').append(insert);
  122. $("h3").each(function() {
  123. var $this = $(this);
  124. if($this.text() === "null") {
  125. $this.remove();
  126. }
  127. });
  128. } else {
  129. insert = '<div class="featured_post">';
  130. insert += '<img src="' + img + '">';
  131. insert += '<div class="featcap">' + captionPhotos + '</div>';
  132. insert += '<a class="featmore" href="' + link + '">see more</a>';
  133. insert += '</div>';
  134. $('.featured_inner').append(insert);
  135. }
  136. }
  137. });
  138. {/block:ifFeaturedPosts}
  139. // minimal soundcloud player © shythemes.tumblr
  140. var color = '{color:Post Link Hover}';
  141. $('.soundcloud_audio_player').each(function(){
  142. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
  143. });
  144. });
  145. </script>
  146.  
  147. <style type="text/css">
  148.  
  149. body {
  150. background:{color:Background};
  151. font-family:'{select:Font Family}';
  152. color:{color:Text};
  153. font-size:{select:Font Size};
  154. margin:0;
  155. line-height:20px;
  156. }
  157.  
  158. iframe.iframe-controls--desktop {
  159. white-space:nowrap!important;
  160. z-index:99999999999999!important;
  161. top:calc(5% - 17px);
  162. right:30px;
  163. {block:ifDarkTumblrControls}
  164. filter:invert(1) contrast(150%);
  165. -webkit-filter:invert(1) contrast(150%);
  166. -o-filter:invert(1) contrast(150%);
  167. -moz-filter:invert(1) contrast(150%);
  168. -ms-filter:invert(1) contrast(150%);
  169. opacity:.6!important;
  170. {/block:ifDarkTumblrControls}
  171. {block:ifNotDarkTumblrControls}
  172. opacity:.8!important;
  173. {block:ifNotDarkTumblrControls}
  174. transition:all .5s ease-in-out;
  175. -moz-transition:all .5s ease-in-out;
  176. -o-transition:all .5s ease-in-out;
  177. -webkit-transition:all .5s ease-in-out;
  178. transform:scale(0.75);
  179. transform-origin:100% 0;
  180. -webkit-transform:scale(0.75);
  181. -webkit-transform-origin:100% 0;
  182. -o-transform:scale(0.75);
  183. -o-transform-origin:100% 0;
  184. -moz-transform:scale(0.75);
  185. -moz-transform-origin:100% 0;
  186. -ms-transform:scale(0.75);
  187. -ms-transform-origin:100% 0;
  188. }
  189.  
  190. iframe.iframe-controls--desktop:hover {
  191. {block:ifDarkTumblrControls}
  192. opacity:.8!important;
  193. {/block:ifDarkTumblrControls}
  194. {block:ifNotDarkTumblrControls}
  195. opacity:1!important;
  196. {/block:ifNotDarkTumblrControls}
  197. }
  198.  
  199. {block:ifDarkTumblrControls}
  200. div.status-indicator {
  201. filter:invert(1)!important;
  202. }
  203. {/block:ifDarkTumblrControls}
  204.  
  205. iframe.tmblr-iframe--app-cta-button, iframe.iframe-controls--phone-mobile {
  206. display:none!important;
  207. }
  208.  
  209. .tmblr-iframe-pushdown {
  210. padding:0px!important;
  211. }
  212.  
  213. h1, h2, h3, h4, h5 {
  214. margin:1em 0;
  215. }
  216.  
  217. a {
  218. text-decoration:none;
  219. }
  220.  
  221. p {
  222. margin:.75em 0;
  223. }
  224.  
  225. * p:first-of-type {
  226. margin-top:0;
  227. }
  228.  
  229. * p:last-of-type {
  230. margin-bottom:0;
  231. }
  232.  
  233. blockquote {
  234. margin:0px 20px;
  235. border-radius:15px;
  236. background:{color:Blockquote};
  237. padding:15px;
  238. }
  239.  
  240. blockquote a {
  241. color:{color:Post Link Hover}!important;
  242. transition:all .5s ease-in-out!important;
  243. }
  244.  
  245. blockquote a:hover {
  246. color:{color:Post Background}!important;
  247. }
  248.  
  249. blockquote blockquote {
  250. margin:10px;
  251. background:{color:Post Link Hover};
  252. }
  253.  
  254. img {
  255. margin-bottom:-4px;
  256. }
  257.  
  258. ::-webkit-scrollbar {
  259. display:none;
  260. }
  261.  
  262. ::selection {
  263. color:{color:Selection Text};
  264. background:{color:Selection Background};
  265. }
  266.  
  267. ::-moz-selection {
  268. color:{color:Selection Text};
  269. background:{color:Selection Background};
  270. }
  271.  
  272. #s-m-t-tooltip {
  273. max-width:300px;
  274. overflow-x:auto;
  275. margin:15px;
  276. padding:10px;
  277. border-radius:15px;
  278. background:{color:Selection Background};
  279. color:{color:Selection Text};
  280. font-size:1em;
  281. height:auto;
  282. word-wrap:break-word;
  283. z-index:9999!important;
  284. text-transform:lowercase;
  285. }
  286.  
  287. #cont_before, #cont_after {
  288. background:{color:Background};
  289. position:fixed;
  290. width:100%;
  291. height:10%;
  292. left:0;
  293. z-index:99;
  294. }
  295.  
  296. #cont_before {
  297. top:0;
  298. }
  299.  
  300. #cont_after {
  301. bottom:0;
  302. }
  303.  
  304. section#container {
  305. width:85%;
  306. height:80%;
  307. position:fixed;
  308. background:{color:Footer Background};
  309. top:10%;
  310. left:7.5%;
  311. border-radius:30px;
  312. overflow:hidden;
  313. }
  314.  
  315. section#container footer {
  316. height:15%;
  317. color:{color:Footer Text};
  318. padding:10px 15px;
  319. box-sizing:border-box;
  320. z-index:99;
  321. position:relative;
  322. background:{color:Footer Background};
  323. display:-webkit-box;
  324. display:-ms-flexbox;
  325. display:flex;
  326. -webkit-box-align:center;
  327. -ms-flex-align:center;
  328. align-items:center;
  329. -webkit-box-orient:horizontal;
  330. -webkit-box-direction:normal;
  331. -ms-flex-direction:row;
  332. flex-direction:row;
  333. }
  334.  
  335. section#container footer .line {
  336. background:{color:Footer Text};
  337. height:2px;
  338. -webkit-box-flex:1;
  339. -ms-flex:1 1 auto;
  340. flex:1 1 auto;
  341. display:inline-block;
  342. margin:0 15px;
  343. }
  344.  
  345. section#container footer h2 {
  346. text-transform:capitalize;
  347. display:inline-block;
  348. vertical-align:middle;
  349. font-family:'Emblema One';
  350. margin:0;
  351. white-space:nowrap;
  352. color:{color:Footer Text};
  353. -webkit-box-flex:0;
  354. -ms-flex:0 1 auto;
  355. flex:0 1 auto;
  356. }
  357.  
  358. section#container .desc a {
  359. color:{color:Footer Link};
  360. transition:all .5s ease-in-out;
  361. }
  362.  
  363. section#container .desc a:hover {
  364. color:{color:Footer Text};
  365. }
  366.  
  367. section#container footer #pagination {
  368. -webkit-box-flex:0;
  369. -ms-flex:0 1 auto;
  370. flex:0 1 auto;
  371. white-space:nowrap;
  372. }
  373.  
  374. section#container footer #pagination div {
  375. display:inline-block;
  376. margin-right:15px;
  377. vertical-align:middle;
  378. }
  379.  
  380. section#container footer #pagination .next {
  381. margin-right:0;
  382. }
  383.  
  384. section#container footer #pagination .prev .th {
  385. transform:rotate(180deg);
  386. }
  387.  
  388. section#container footer #pagination .th {
  389. background:{color:Footer Link};
  390. padding:10px;
  391. border-radius:50px;
  392. transition:all .5s ease-in-out;
  393. }
  394.  
  395. section#container footer #pagination a {
  396. color:{color:Footer Text};
  397. }
  398.  
  399. section#container footer #pagination a:hover .th {
  400. background:transparent;
  401. }
  402.  
  403. section#container #inner {
  404. background:{color:Container Background};
  405. width:100%;
  406. height:85%;
  407. border-radius:0px 0px 30px 30px;
  408. z-index:1;
  409. position:relative;
  410. overflow:auto;
  411. }
  412.  
  413. #hamburger {
  414. opacity:0;
  415. position:fixed;
  416. }
  417.  
  418. label {
  419. display:none;
  420. position:fixed;
  421. cursor:pointer;
  422. z-index:999;
  423. background:rgba({RGBColor:Footer Background},.6);
  424. width:65px;
  425. height:65px;
  426. top:0;
  427. left:0;
  428. border-radius:0px 0px 100% 0px;
  429. padding-top:15px;
  430. box-sizing:border-box;
  431. }
  432.  
  433. label span {
  434. display:block;
  435. width:30px;
  436. height:4px;
  437. margin:0px 0px 5px 12.5px;
  438. position:relative;
  439. background:{color:Text};
  440. z-index:1;
  441. opacity:1;
  442. transform-origin:4px 0px;
  443. transition:all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  444. }
  445.  
  446. label span:first-of-type {
  447. transform-origin:0% 0%;
  448. }
  449.  
  450. label span:nth-of-type(3) {
  451. transform-origin:0% 100%;
  452. }
  453.  
  454. input#hamburger:checked ~ label span:first-of-type {
  455. transform:rotate(45deg) translate(-2px, -1px);
  456. }
  457.  
  458. input#hamburger:checked ~ label span:nth-of-type(2) {
  459. opacity:0;
  460. transform:rotate(0deg) scale(0.2, 0.2);
  461. }
  462.  
  463. input#hamburger:checked ~ label span:nth-of-type(3) {
  464. transform:rotate(-45deg) translate(0, -1px);
  465. }
  466.  
  467. input#hamburger:checked ~ #inner > aside {
  468. left:0;
  469. }
  470.  
  471. input#hamburger:checked ~ footer {
  472. left:100%;
  473. }
  474.  
  475. section#container #inner aside {
  476. width:25%;
  477. min-height:100%;
  478. display:inline-block;
  479. padding:30px 30px 0px 0px;
  480. vertical-align:top;
  481. position:relative;
  482. box-sizing:border-box;
  483. margin-right:30px;
  484. border-right:1px solid #eee;
  485. }
  486.  
  487. section#container #inner aside h2 {
  488. margin:.5em 0;
  489. color:{color:Post Title Text};
  490. background:{color:Post Title Background};
  491. padding:10px 10px 10px 30px;
  492. border-radius:0px 50px 50px 0px;
  493. }
  494.  
  495. section#container #inner aside h2:first-of-type {
  496. margin-top:0;
  497. }
  498.  
  499. section#container #inner aside a {
  500. display:block;
  501. text-transform:lowercase;
  502. padding:10px 10px 10px 45px;
  503. margin:5px 0px;
  504. position:relative;
  505. color:{color:Text};
  506. border-radius:0px 50px 50px 0px;
  507. transition:all .5s ease-in-out;
  508. }
  509.  
  510. section#container #inner aside h2 + a {
  511. margin-top:0;
  512. }
  513.  
  514. section#container #inner aside a::after {
  515. content:'\ebc6';
  516. font-family:'honeybee';
  517. position:absolute;
  518. font-size:calc(1em - 3px);
  519. right:15px;
  520. opacity:0;
  521. color:{color:Post Title Text};
  522. transition:opacity .5s ease-in-out;
  523. }
  524.  
  525. section#container #inner aside a:hover {
  526. background:{color:Post Background};
  527. box-shadow:2px 2px 10px {color:Post Background};
  528. color:{color:Post Title Text};
  529. }
  530.  
  531. section#container #inner aside a:hover::after {
  532. opacity:1;
  533. }
  534.  
  535. section#container #inner aside.sticky_bottom {
  536. position:fixed;
  537. width:calc(85% * .25);
  538. }
  539.  
  540. section#container #inner aside.sticky_bottom + section#posts {
  541. margin-left:calc(25% + 30px);
  542. width:calc(74% - 24px);
  543. }
  544.  
  545. section#container #inner aside.small {
  546. position:fixed;
  547. width:calc(85% * .25);
  548. }
  549.  
  550. section#container #inner aside.small + section#posts {
  551. margin-left:calc(25% + 30px);
  552. width:calc(75% - 30px);
  553. }
  554.  
  555. section#container #inner section#posts {
  556. width:calc(75% - 30px);
  557. display:inline-block;
  558. vertical-align:top;
  559. position:relative;
  560. padding:30px 30px 30px 0px;
  561. box-sizing:border-box;
  562. }
  563.  
  564. {block:ifFeaturedPosts}
  565.  
  566. section#container #inner section#posts.page-1 article.featured_cont, section#container #inner section#posts.page-1 h2.regpost {
  567. display:block;
  568. }
  569.  
  570. section#container #inner section#posts article.featured_cont {
  571. width:100%;
  572. display:none;
  573. }
  574.  
  575. section#container #inner section#posts article.featured_cont h2, section#container #inner section#posts h2.regpost {
  576. margin:.5em 0;
  577. color:{color:Post Title Text};
  578. background:{color:Post Title Background};
  579. padding:10px 20px;
  580. border-radius:50px;
  581. margin-top:0;
  582. }
  583.  
  584. section#container #inner section#posts h2.regpost {
  585. margin-top:.5em;
  586. display:none;
  587. }
  588.  
  589. section#container #inner section#posts article.featured_cont .featured_post {
  590. width:calc(33% - 10px);
  591. display:inline-block;
  592. vertical-align:top;
  593. height:170px;
  594. position:relative;
  595. overflow:hidden;
  596. margin-right:15px;
  597. border-radius:0px 0px 20px 20px;
  598. }
  599.  
  600. section#container #inner section#posts article.featured_cont .featured_post:last-of-type {
  601. margin-right:0;
  602. }
  603.  
  604. section#container #inner section#posts article.featured_cont .featured_post::after {
  605. content:'';
  606. position:absolute;
  607. width:100%;
  608. height:100px;
  609. background:linear-gradient(0deg,{color:Post Background},rgba({RGBColor:Post Background},.15));
  610. bottom:0;
  611. left:0;
  612. }
  613.  
  614. section#container #inner section#posts article.featured_cont .featured_post h3 {
  615. margin:0;
  616. background:{color:Post Title Background};
  617. color:{color:Post Title Text};
  618. border-radius:15px 15px 0px 0px;
  619. padding:10px;
  620. }
  621.  
  622. section#container #inner section#posts article.featured_cont .featured_post img {
  623. width:100%;
  624. height:auto;
  625. border-radius:15px 15px 0px 0px;
  626. }
  627.  
  628. section#container #inner section#posts article.featured_cont .featured_post .featcap {
  629. background:{color:Post Background};
  630. padding:10px;
  631. border-radius:15px;
  632. height:100%;
  633. color:{color:Text};
  634. }
  635.  
  636. section#container #inner section#posts article.featured_cont .featured_post .featcap a {
  637. color:{color:Post Link};
  638. }
  639.  
  640. section#container #inner section#posts article.featured_cont .featured_post .featcap blockquote {
  641. background:transparent;
  642. margin:0;
  643. padding:0;
  644. }
  645.  
  646. section#container #inner section#posts article.featured_cont .featured_post .featcap blockquote:first-of-type p {
  647. margin-bottom:.5em;
  648. }
  649.  
  650. section#container #inner section#posts article.featured_cont .featured_post h3 + .featcap, section#container #inner section#posts article.featured_cont .featured_post img + .featcap {
  651. border-radius:0px 0px 15px 15px;
  652. }
  653.  
  654. section#container #inner section#posts article.featured_cont .featured_post a.featmore {
  655. position:absolute;
  656. width:100%;
  657. bottom:15px;
  658. text-align:center;
  659. z-index:999;
  660. display:block;
  661. color:{color:Post Link};
  662. }
  663.  
  664. {/block:ifFeaturedPosts}
  665.  
  666. section#container #inner section#posts section.posts_inner {
  667. width:100%;
  668. }
  669.  
  670. article.post {
  671. margin-bottom:30px;
  672. position:relative;
  673. width:100%;
  674. }
  675.  
  676. article.post:last-of-type {
  677. margin-bottom:0;
  678. }
  679.  
  680. article.post .postheader {
  681. color:{color:Post Title Text};
  682. text-align:center;
  683. background:{color:Post Title Background};
  684. border-radius:15px 15px 0px 0px;
  685. }
  686.  
  687. article.post:not(.photo):not(.video):not(.audioembed):not(.audio):not(.answer) .postheader .posttitle {
  688. padding:20px;
  689. }
  690.  
  691. article.post .postheader .posttitle h2.title ~ .posticon::after {
  692. display:none;
  693. }
  694.  
  695. article.post .postheader .posttitle .pic ~ .posticon::after, article.post.link .postheader .posttitle a.link ~ .posticon::after {
  696. display:none;
  697. }
  698.  
  699. article.post .postheader .posttitle .posticon::after {
  700. font-family:'honeybee';
  701. color:{color:Post Title Text};
  702. display:block;
  703. font-size:1.5em;
  704. }
  705.  
  706. article.post.text .postheader .posttitle .posticon::after {
  707. content:'\eb02';
  708. }
  709.  
  710. article.post.quote .postheader .posttitle .posticon::after {
  711. content:'\eca6';
  712. }
  713.  
  714. article.post.chat .postheader .posttitle .posticon::after {
  715. content:'\ebcf';
  716. }
  717.  
  718. article.post.answer .postheader .posttitle {
  719. text-align:left;
  720. min-height:96px;
  721. }
  722.  
  723. article.post .postheader .posttitle .question img {
  724. border-top-left-radius:15px;
  725. display:inline-block;
  726. vertical-align:top;
  727. }
  728.  
  729. article.post .postheader .posttitle .question .que_cont {
  730. width:calc(100% - 96px);
  731. display:inline-block;
  732. vertical-align:top;
  733. box-sizing:border-box;
  734. padding:15px;
  735. }
  736.  
  737. article.post .postheader .posttitle .question .que_cont .asker {
  738. font-weight:bold;
  739. color:{color:Post Title Text};
  740. transition:color .5s ease-in-out;
  741. }
  742.  
  743. article.post .postheader .posttitle .question .que_cont a.asker:hover {
  744. color:{color:Post Title Hover};
  745. }
  746.  
  747. article.post .postheader .posttitle .audio {
  748. position:relative;
  749. }
  750.  
  751. article.post .postheader .posttitle .audio .art, article.post .postheader .posttitle .audio .art img {
  752. width:120px;
  753. height:120px;
  754. border-top-left-radius:15px;
  755. display:inline-block;
  756. vertical-align:top;
  757. }
  758.  
  759. article.post .postheader .posttitle .audio .auinfo {
  760. width:calc(100% - 120px);
  761. display:inline-block;
  762. vertical-align:top;
  763. padding:15px;
  764. box-sizing:border-box;
  765. text-align:left;
  766. }
  767.  
  768. article.post .postheader .posttitle .audio .auinfo .track {
  769. font-weight:bold;
  770. }
  771.  
  772. article.post .postheader .posttitle .audio .auinfo span {
  773. display:block;
  774. }
  775.  
  776. article.post .postheader .posttitle .audio .player iframe.tumblr_audio_player {
  777. width:100%;
  778. margin-bottom:-4px;
  779. }
  780.  
  781. article.post .postheader .posttitle .audioembed {
  782. border-radius:15px 15px 0px 0px;
  783. overflow:hidden;
  784. }
  785.  
  786. article.post iframe.soundcloud_audio_player {
  787. max-height:116px!important;
  788. margin-bottom:-4px;
  789. }
  790.  
  791. article.post iframe.spotify_audio_player {
  792. max-height:80px!important;
  793. margin-bottom:-4px;
  794. }
  795.  
  796. article.post.video .postheader .posttitle .video_cont {
  797. border-radius:15px 15px 0px 0px;
  798. overflow:hidden;
  799. }
  800.  
  801. article.post.link .postheader .posttitle {
  802. transition:all .5s ease-in-out;
  803. border-radius:15px 15px 0px 0px;
  804. }
  805.  
  806. article.post.link .postheader .posttitle:hover {
  807. background:{color:Post Title Hover};
  808. }
  809.  
  810. article.post .postheader .posttitle a.link {
  811. display:block;
  812. }
  813.  
  814. article.post .postheader [photoset-layout] {
  815. grid-gap:9px 5px;
  816. border-radius:15px 15px 0px 0px;
  817. overflow:hidden;
  818. background:{color:Container Background};
  819. }
  820.  
  821. article.post .postheader [photoset-layout] div {
  822. cursor:pointer;
  823. }
  824.  
  825. .vignette, #vignette {
  826. opacity:0;
  827. }
  828.  
  829. .lightbox-image, #tumblr_lightbox img {
  830. box-shadow:none!important;
  831. max-width:none;
  832. border-radius:30px!important;
  833. }
  834.  
  835. .tmblr-lightbox, #tumblr_lightbox {
  836. background:rgba({RGBColor:Background},.78)!important;
  837. }
  838.  
  839. article.post .postheader .pic img {
  840. width:100%;
  841. height:auto;
  842. border-radius:15px 15px 0px 0px;
  843. }
  844.  
  845. article.post .postheader .posttitle h2.title {
  846. margin:0;
  847. font-family:'Emblema One';
  848. color:{color:Post Title Text};
  849. }
  850.  
  851. article.post.photo:not(.cap) .postheader .pic img, article.post.photo:not(.cap) .postheader [photoset-layout], article.post.link:not(.cap) .postheader .posttitle, article.post.audioembed:not(.cap) .audioembed, article.post.video:not(.cap) .video_cont, article.post.audio:not(.cap) .postheader {
  852. border-radius:15px;
  853. }
  854.  
  855. article.post .postheader .postdata {
  856. display:none;
  857. padding:20px;
  858. }
  859.  
  860. article.post .postheader .postdata div:not(.like_button) {
  861. padding:10px;
  862. background:{color:Post Title Text};
  863. margin:10px;
  864. border-radius:15px;
  865. transition:all .5s ease-in-out;
  866. }
  867.  
  868. article.post .postheader .postdata div:not(.like_button):first-of-type {
  869. margin-top:0;
  870. }
  871.  
  872. article.post .postheader .postdata div:not(.like_button):last-of-type {
  873. margin-bottom:5px;
  874. }
  875.  
  876. article.post .postheader .postdata div:not(.like_button):hover {
  877. box-shadow:0px 0px 10px 1px {color:Post Title Text};
  878. }
  879.  
  880. article.post .postheader .postdata div:not(.like_button):hover a {
  881. color:{color:Post Title Hover};
  882. }
  883.  
  884. article.post .postheader .postdata div a {
  885. color:{color:Text};
  886. transition:color .5s ease-in-out;
  887. display:block;
  888. }
  889.  
  890. article.post .like_button, section#posts #perma .postnotestitle .like_button {
  891. display:inline-block;
  892. position:relative;
  893. cursor:pointer;
  894. }
  895.  
  896. article.post .like_button iframe, section#posts #perma .postnotestitle .like_button iframe {
  897. height:100%;
  898. left:0;
  899. opacity:0.001;
  900. position:absolute;
  901. top:0;
  902. width:100%;
  903. cursor:pointer;
  904. }
  905.  
  906. article.post .like_button::after {
  907. content:'Like this post!';
  908. }
  909.  
  910. article.post .postinfo {
  911. background:{color:Post Title Background};
  912. width:40px;
  913. height:40px;
  914. border-radius:50px;
  915. position:absolute;
  916. right:5px;
  917. margin-top:-20px;
  918. cursor:pointer;
  919. transition:right 0.5s ease-in-out;
  920. box-shadow:0px 0px 10px 1px {color:Post Background};
  921. }
  922.  
  923. article.post .postinfo.active {
  924. right:calc(50% - 20px);
  925. }
  926.  
  927. article.post .postinfo span {
  928. width:20px;
  929. height:2px;
  930. background:{color:Post Title Text};
  931. display:block;
  932. position:absolute;
  933. top:calc(50% - 1px);
  934. left:calc(50% - 10px);
  935. transition:transform 0.5s ease-in-out;
  936. border-radius:5px;
  937. }
  938.  
  939. article.post .postinfo span:first-of-type {
  940. transform:translate3d(0, -5px, 0);
  941. }
  942.  
  943. article.post .postinfo span:nth-of-type(2) {
  944. transform:translate3d(0, 0, 0);
  945. }
  946.  
  947. article.post .postinfo span:last-of-type {
  948. transform:translate3d(0, 5px, 0);
  949. }
  950.  
  951. article.post .postinfo.active span:first-of-type {
  952. transform:translate3d(0, 0, 0) rotate(45deg);
  953. }
  954.  
  955. article.post .postinfo.active span:nth-of-type(2) {
  956. transform:translate3d(0, 0, 0) scale(0, 1);
  957. }
  958.  
  959. article.post .postinfo.active span:nth-of-type(3) {
  960. transform:translate3d(0, 0, 0) rotate(-45deg);
  961. }
  962.  
  963. article.post.tags .caption {
  964. border-radius:0px;
  965. }
  966.  
  967. article.post .caption {
  968. background:{color:Post Background};
  969. padding:20px;
  970. border-radius:0px 0px 15px 15px;
  971. width:100%;
  972. box-sizing:border-box;
  973. }
  974.  
  975. article.post .caption .reblog-header {
  976. margin:.75em 0;
  977. }
  978.  
  979. article.post .caption .reblog-header:first-of-type {
  980. margin-top:0;
  981. }
  982.  
  983. article.post .caption .reblog-header:last-of-type {
  984. margin-bottom:0;
  985. }
  986.  
  987. article.post .caption .reblog-header a.active, article.post .caption .reblog-header span.inactive {
  988. color:{color:Post Link};
  989. transition:color .5s ease-in-out;
  990. cursor:pointer;
  991. }
  992.  
  993. article.post .caption .reblog-header a.active:hover {
  994. color:{color:Post Link Hover};
  995. }
  996.  
  997. article.post .caption .reblog-header span.inactive::after {
  998. content:'deactivated';
  999. color:{color:Post Link};
  1000. opacity:0;
  1001. transition:opacity .5s ease-in-out;
  1002. }
  1003.  
  1004. article.post .caption .reblog-header span.inactive:hover::after {
  1005. opacity:1;
  1006. }
  1007.  
  1008. article.post .caption .reblog-header a.active img, article.post .caption .reblog-header span.inactive img {
  1009. height:30px;
  1010. width:30px;
  1011. border-radius:15px;
  1012. vertical-align:middle;
  1013. margin-right:7.5px;
  1014. }
  1015.  
  1016. article.post .caption p.read_more_container {
  1017. text-align:center;
  1018. margin:15px 0px 0px 0px;
  1019. }
  1020.  
  1021. article.post .caption p.read_more_container a.read_more {
  1022. background:{color:Post Link Hover};
  1023. position:relative;
  1024. color:{color:Post Link};
  1025. padding:10px;
  1026. border-radius:15px;
  1027. transition:all .5s ease-in-out;
  1028. }
  1029.  
  1030. article.post .caption p.read_more_container a.read_more:hover {
  1031. background:transparent;
  1032. color:{color:Post Link Hover};
  1033. }
  1034.  
  1035. article.post .caption p.read_more_container + .reblog-header {
  1036. margin-top:10px;
  1037. }
  1038.  
  1039. article.post .caption figure.tmblr-full {
  1040. margin:.5em 0;
  1041. }
  1042.  
  1043. article.post .caption figure.attributed {
  1044. margin-bottom:0;
  1045. }
  1046.  
  1047. article.post .caption figure.tmblr-full:not(.attributed) {
  1048. text-align:center;
  1049. }
  1050.  
  1051. article.post .caption figure.tmblr-full:not(.attributed) img {
  1052. border-radius:15px;
  1053. }
  1054.  
  1055. article.post .caption figure.attributed img {
  1056. width:100%;
  1057. height:auto;
  1058. border-radius:15px 15px 0px 0px;
  1059. }
  1060.  
  1061. article.post .caption p.tmblr-attribution a {
  1062. background:{color:Post Link Hover};
  1063. transition:all .5s ease-in-out;
  1064. border-radius:0px 0px 15px 15px;
  1065. padding:10px;
  1066. display:block;
  1067. }
  1068.  
  1069. article.post .caption p.tmblr-attribution a:hover {
  1070. background:transparent;
  1071. }
  1072.  
  1073. article.post .caption a {
  1074. color:{color:Post Link};
  1075. transition:color .5s ease-in-out;
  1076. }
  1077.  
  1078. article.post .caption a:hover {
  1079. color:{color:Post Link Hover};
  1080. }
  1081.  
  1082. article.post .caption .quote {
  1083. background:{color:Blockquote};
  1084. text-align:center;
  1085. position:relative;
  1086. border-radius:15px;
  1087. margin-top:5px;
  1088. padding:15px;
  1089. }
  1090.  
  1091. article.post .caption .quote::after {
  1092. content:'';
  1093. position:absolute;
  1094. display:block;
  1095. top:100%;
  1096. left:50%;
  1097. margin-left:-15px;
  1098. width:0;
  1099. height:0;
  1100. border-top:solid 15px {color:Blockquote};
  1101. border-left:solid 15px transparent;
  1102. border-right:solid 15px transparent;
  1103. }
  1104.  
  1105. article.post .caption .qsource {
  1106. text-align:center;
  1107. margin-top:15px;
  1108. }
  1109.  
  1110. article.post .caption .label {
  1111. display:inline-block;
  1112. background:{color:Post Title Background};
  1113. color:{color:Post Title Text};
  1114. padding:7.5px;
  1115. border-radius:11px;
  1116. margin-bottom:-8px;
  1117. }
  1118.  
  1119. article.post .caption .line {
  1120. padding:10px;
  1121. border-radius:13px;
  1122. margin-bottom:15px;
  1123. }
  1124.  
  1125. article.post .caption .line:last-of-type {
  1126. margin-bottom:0;
  1127. }
  1128.  
  1129. article.post .tags {
  1130. background:{color:Post Title Background};
  1131. border-radius:0px 0px 15px 15px;
  1132. padding:15px;
  1133. }
  1134.  
  1135. article.post .tags a {
  1136. color:{color:Post Title Text};
  1137. margin-right:15px;
  1138. transition:color .5s ease-in-out;
  1139. }
  1140.  
  1141. article.post .tags a span {
  1142. display:inline-block;
  1143. vertical-align:middle;
  1144. }
  1145.  
  1146. article.post .tags a .sign {
  1147. font-size:calc(1em - 3px);
  1148. color:{color:Post Title Hover}!important;
  1149. margin-right:5px;
  1150. }
  1151.  
  1152. article.post .tags a:hover {
  1153. color:{color:Post Title Hover};
  1154. }
  1155.  
  1156. section#posts #perma .postnotestitle {
  1157. background:{color:Post Title Background};
  1158. border-radius:15px 15px 0px 0px;
  1159. padding:15px;
  1160. color:{color:Post Title Hover};
  1161. margin-top:30px;
  1162. display:-webkit-box;
  1163. display:-ms-flexbox;
  1164. display:flex;
  1165. }
  1166.  
  1167. section#posts #perma .postnotestitle span:not(.th), section#posts #perma .postnotestitle a {
  1168. color:{color:Post Title Text};
  1169. display:inline-block;
  1170. transition:all .5s ease-in-out;
  1171. }
  1172.  
  1173. section#posts #perma .postnotestitle .like_button::after {
  1174. font-family:'honeybee';
  1175. content:'\ea54';
  1176. color:{color:Post Title Text};
  1177. cursor:pointer;
  1178. transition:all .5s ease-in-out;
  1179. }
  1180.  
  1181. section#posts #perma .postnotestitle .geninf {
  1182. -ms-flex-item-align:start;
  1183. align-self:flex-start;
  1184. -webkit-box-flex:1;
  1185. -ms-flex:1 1 auto;
  1186. flex:1 1 auto;
  1187. }
  1188.  
  1189. section#posts #perma .postnotestitle .postcontrol {
  1190. -ms-flex-item-align:end;
  1191. align-self:flex-end;
  1192. -webkit-box-flex:0;
  1193. -ms-flex:0 1 auto;
  1194. flex:0 1 auto;
  1195. }
  1196.  
  1197. section#posts #perma .postnotestitle a:first-of-type {
  1198. margin-right:10px;
  1199. }
  1200.  
  1201. section#posts #perma .postnotestitle a:hover, section#posts #perma .postnotestitle .like_button:hover::after {
  1202. color:{color:Post Title Hover};
  1203. }
  1204.  
  1205. section#posts #perma ol.notes {
  1206. list-style:none;
  1207. padding:15px;
  1208. margin:0;
  1209. background:{color:Post Background};
  1210. border-radius:0px 0px 15px 15px;
  1211. max-height:250px;
  1212. overflow:auto;
  1213. }
  1214.  
  1215. section#posts #perma ol.notes li.note {
  1216. margin:15px 0px;
  1217. }
  1218.  
  1219. section#posts #perma ol.notes li.note:first-of-type {
  1220. margin-top:0;
  1221. }
  1222.  
  1223. section#posts #perma ol.notes li.note:last-of-type {
  1224. margin-bottom:0;
  1225. }
  1226.  
  1227. section#posts #perma ol.notes li.note a.avatar_frame {
  1228. position:relative;
  1229. margin-right:10px;
  1230. display:inline-block;
  1231. vertical-align:middle;
  1232. }
  1233.  
  1234. section#posts #perma ol.notes li.note a.avatar_frame::before {
  1235. content:'';
  1236. display:block;
  1237. background:{color:Post Background};
  1238. opacity:.7;
  1239. width:25px;
  1240. height:25px;
  1241. border-radius:50px;
  1242. position:absolute;
  1243. left:calc(50% - 12.5px);
  1244. margin-top:calc(50% - 12.5px);
  1245. }
  1246.  
  1247. section#posts #perma ol.notes li.note a.avatar_frame::after {
  1248. font-family:'honeybee';
  1249. color:{color:Post Link};
  1250. font-size:1em;
  1251. position:absolute;
  1252. display:block;
  1253. left:calc(50% - .5em);
  1254. top:calc(50% - .5em);
  1255. z-index:99;
  1256. }
  1257.  
  1258. section#posts #perma ol.notes li.note.like a.avatar_frame::after {
  1259. content:'\ea54';
  1260. }
  1261.  
  1262. section#posts #perma ol.notes li.note.reblog a.avatar_frame::after {
  1263. content:'\ebc2';
  1264. }
  1265.  
  1266. section#posts #perma ol.notes li.note.reply a.avatar_frame::after {
  1267. content:'\ebcd';
  1268. }
  1269.  
  1270. section#posts #perma ol.notes li.note.original_post a.avatar_frame::after {
  1271. content:'\eb02';
  1272. }
  1273.  
  1274. section#posts #perma ol.notes li.note a.avatar_frame img.avatar {
  1275. width:35px;
  1276. height:35px;
  1277. border-radius:50px;
  1278. }
  1279.  
  1280. section#posts #perma ol.notes li.note .action {
  1281. display:inline-block;
  1282. vertical-align:middle;
  1283. }
  1284.  
  1285. section#posts #perma ol.notes li.note .action a {
  1286. color:{color:Post Link Hover};
  1287. transition:all .5s ease-in-out;
  1288. }
  1289.  
  1290. section#posts #perma ol.notes li.note .action a:hover {
  1291. color:{color:Post Link};
  1292. }
  1293.  
  1294. section#posts #perma ol.notes li.note blockquote a {
  1295. color:{color:Text};
  1296. margin-left:45px;
  1297. box-sizing:border-box;
  1298. width:calc(100% - 60px);
  1299. }
  1300.  
  1301. section#posts #perma ol.notes li.note a.more_notes_link {
  1302. color:{color:Post Link};
  1303. transition:all .5s ease-in-out;
  1304. }
  1305.  
  1306. section#posts #perma ol.notes li.note a.more_notes_link:hover, section#posts #perma ol.notes li.note .notes_loading {
  1307. color:{color:Post Link Hover};
  1308. }
  1309.  
  1310. /* CREDIT. DO NOT TOUCH */
  1311.  
  1312. #credz {
  1313. position:fixed;
  1314. bottom:15px;
  1315. right:20px;
  1316. width:33px;
  1317. height:33px;
  1318. border-radius:50px;
  1319. border:1px solid rgba(0,0,0,.1);
  1320. background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  1321. background-repeat:no-repeat;
  1322. background-position:center center;
  1323. background-size:28px;
  1324. transition:all .5s ease-in-out;
  1325. z-index:9999;
  1326. }
  1327.  
  1328. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  1329. -webkit-transform:scale(1.15);
  1330. -ms-transform:scale(1.15);
  1331. transform:scale(1.15);
  1332. }
  1333.  
  1334. {block:ifFadeInOnRefresh}
  1335.  
  1336. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1337. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1338. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  1339. .fade-in {
  1340. opacity:0;
  1341. -webkit-animation:fadeIn ease-in 1;
  1342. -moz-animation:fadeIn ease-in 1;
  1343. animation:fadeIn ease-in 1;
  1344. -webkit-animation-fill-mode:forwards;
  1345. -moz-animation-fill-mode:forwards;
  1346. animation-fill-mode:forwards;
  1347. -webkit-animation-duration:1s;
  1348. -moz-animation-duration:1s;
  1349. animation-duration:1s;
  1350. }
  1351.  
  1352. .fade-in.one {
  1353. -webkit-animation-delay:0s;
  1354. -moz-animation-delay:0s;
  1355. animation-delay:0s;
  1356. }
  1357.  
  1358. .fade-in.two {
  1359. -webkit-animation-delay:0.8s;
  1360. -moz-animation-delay:0.8s;
  1361. animation-delay:0.8s;
  1362. }
  1363. {/block:ifFadeInOnRefresh}
  1364.  
  1365. {block:ifNotOneColumn}
  1366. {block:IndexPage}
  1367. @media only screen and (max-width:2560px) and (min-width:1800px) {
  1368. section#container #inner section#posts section.posts_inner {
  1369. -webkit-column-count:3;
  1370. column-count:3;
  1371. -webkit-column-gap:30px;
  1372. column-gap:30px;
  1373. }
  1374.  
  1375. article.post {
  1376. -webkit-column-break-inside:avoid;
  1377. break-inside:avoid;
  1378. display:inline-block;
  1379. }
  1380. }
  1381.  
  1382. @media only screen and (max-width:1799px) and (min-width:1024px) {
  1383. section#container #inner section#posts section.posts_inner {
  1384. -webkit-column-count:2;
  1385. column-count:2;
  1386. -webkit-column-gap:30px;
  1387. column-gap:30px;
  1388. }
  1389.  
  1390. article.post {
  1391. -webkit-column-break-inside:avoid;
  1392. break-inside:avoid;
  1393. display:inline-block;
  1394. }
  1395. }
  1396. {/block:IndexPage}
  1397. {/block:ifNotOneColumn}
  1398.  
  1399. @media only screen and (max-width:1024px) {
  1400. section#container #inner aside {
  1401. width:35%;
  1402. }
  1403.  
  1404. section#container #inner aside.sticky_bottom {
  1405. width:calc(85% * .35);
  1406. }
  1407.  
  1408. section#container #inner aside.small {
  1409. width:calc(85% * .35);
  1410. }
  1411.  
  1412. section#container #inner section#posts.page-1 article.featured_cont, section#container #inner section#posts.page-1 h2.regpost {
  1413. display:none;
  1414. }
  1415.  
  1416. section#container #inner section#posts {
  1417. width:calc(65% - 30px);
  1418. }
  1419.  
  1420. section#container #inner aside.small + section#posts {
  1421. margin-left:calc(35% + 30px);
  1422. width:calc(65% - 30px);
  1423. }
  1424.  
  1425. section#container #inner aside.sticky_bottom + section#posts {
  1426. margin-left:calc(35% + 30px);
  1427. }
  1428. }
  1429.  
  1430. @media only screen and (max-width:600px) {
  1431. iframe.iframe-controls--desktop {
  1432. display:none!important;
  1433. }
  1434.  
  1435. #cont_before, #cont_after {
  1436. display:none;
  1437. }
  1438.  
  1439. section#container {
  1440. width:100%;
  1441. height:100%;
  1442. position:relative;
  1443. top:0;
  1444. left:0;
  1445. border-radius:0px;
  1446. }
  1447.  
  1448. section#container footer {
  1449. position:fixed;
  1450. bottom:0;
  1451. height:auto;
  1452. transition:all .5s ease-in-out;
  1453. left:0;
  1454. width:100%!important;
  1455. }
  1456.  
  1457. section#container #inner {
  1458. height:100%;
  1459. }
  1460.  
  1461. section#container #inner aside.small {
  1462. width:calc(85% * .4);
  1463. }
  1464.  
  1465. section#container #inner aside.small + section#posts {
  1466. margin-left:40%;
  1467. width:60%;
  1468. }
  1469.  
  1470. #credz {
  1471. top:15px;
  1472. bottom:auto;
  1473. }
  1474. }
  1475.  
  1476. @media only screen and (max-width:426px) {
  1477. section#posts {
  1478. width:calc(100% - 28px)!important;
  1479. margin-left:30px!important;
  1480. height:100%;
  1481. }
  1482.  
  1483. section#container #inner aside {
  1484. width:100%!important;
  1485. background:{color:Container Background};
  1486. z-index:99;
  1487. position:fixed!important;
  1488. display:block;
  1489. top:0;
  1490. left:-100%;
  1491. transition:all .5s ease-in-out;
  1492. overflow:auto;
  1493. height:auto;
  1494. min-height:100%;
  1495. }
  1496.  
  1497. label {
  1498. display:block;
  1499. }
  1500. }
  1501.  
  1502. </style>
  1503.  
  1504. </head>
  1505.  
  1506. <body>
  1507.  
  1508. <div id="cont_before"></div>
  1509.  
  1510. <section id="container">
  1511.  
  1512. <input type="checkbox" id="hamburger" name="hamburger">
  1513.  
  1514. <label for="hamburger" class="fade-in one">
  1515. <span></span>
  1516. <span></span>
  1517. <span></span>
  1518. </label>
  1519.  
  1520. <div id="inner">
  1521.  
  1522. <aside class="fade-in one">
  1523.  
  1524. <h2>General</h2>
  1525.  
  1526. <a href="/">
  1527. home
  1528. </a>
  1529.  
  1530. {block:AskEnabled}
  1531. <a href="/ask">
  1532. message
  1533. </a>
  1534. {/block:AskEnabled}
  1535.  
  1536. {block:SubmissionsEnabled}
  1537. <a href="/submit">
  1538. submit
  1539. </a>
  1540. {/block:SubmissionsEnabled}
  1541.  
  1542. <a href="/archive">
  1543. archive
  1544. </a>
  1545.  
  1546. {block:HasPages}
  1547. <h2>Personal</h2>
  1548. {/block:HasPages}
  1549.  
  1550. {block:HasPages}
  1551. {block:Pages}
  1552. <a href="{URL}">
  1553. {Label}
  1554. </a>
  1555. {/block:Pages}
  1556. {/block:HasPages}
  1557.  
  1558. </aside>
  1559.  
  1560. <section id="posts" class="page-{CurrentPage} fade-in two">
  1561.  
  1562. {block:ifFeaturedPosts}
  1563. {block:HomePage}
  1564. <article class="featured_cont">
  1565. <h2>Featured Posts</h2>
  1566. <div class="featured_inner">
  1567.  
  1568. </div>
  1569. </article>
  1570.  
  1571. <h2 class="regpost">Regular Posts</h2>
  1572. {/block:HomePage}
  1573. {/block:ifFeaturedPosts}
  1574.  
  1575. <section class="posts_inner">
  1576.  
  1577. {block:Posts}
  1578.  
  1579. <article class="post {block:Text}text{/block:Text}{block:Photo}photo{block:Caption} cap{/block:Caption}{/block:Photo}{block:Photoset}photo{block:Caption} cap{/block:Caption}{/block:Photoset}{block:Quote}quote{/block:Quote}{block:Link}link{block:Description} cap{/block:Description}{/block:Link}{block:Chat}chat{/block:Chat}{block:Video}video{block:Caption} cap{/block:Caption}{/block:Video}{block:Audio}audio{block:AudioEmbed}embed{/block:AudioEmbed}{block:Caption} cap{/block:Caption}{/block:Audio}{block:Answer}answer{/block:Answer}{block:HasTags} tags{/block:HasTags}" id="{PostID}">
  1580.  
  1581. <div class="postheader">
  1582. <div class="posttitle">
  1583. {block:Text}
  1584. {block:Title}
  1585. <h2 class="title">{Title}</h2>
  1586. {/block:Title}
  1587. {/block:Text}
  1588. {block:Photo}
  1589. <div class="pic">
  1590. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false" class="lightbox">
  1591. <img src="{PhotoURL-HighRes}">
  1592. </a>
  1593. </div>
  1594. {/block:Photo}
  1595. {block:Photoset}
  1596. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1597. {block:Photos}
  1598. <div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)">
  1599. <img src="{PhotoURL-HighRes}">
  1600. </div>
  1601. {/block:Photos}
  1602. </div>
  1603. {/block:Photoset}
  1604. {block:Link}
  1605. <a href="{URL}" {Target} class="link">
  1606. <h2 class="title">{Name}</h2>
  1607. </a>
  1608. {/block:Link}
  1609. {block:Chat}
  1610. {block:Title}
  1611. <h2 class="title">{Title}</h2>
  1612. {/block:Title}
  1613. {/block:Chat}
  1614. {block:Video}
  1615. <div class="video_cont">
  1616. {Video-500}
  1617. </div>
  1618. {/block:Video}
  1619. {block:Audio}
  1620. {block:AudioEmbed}
  1621. <div class="audioembed">
  1622. {AudioEmbed-500}
  1623. </div>
  1624. {/block:AudioEmbed}
  1625.  
  1626. {block:AudioPlayer}
  1627. <div class="audio">
  1628. {block:AlbumArt}
  1629. <div class="art">
  1630. <img src="{AlbumArtURL}">
  1631. </div>
  1632. {/block:AlbumArt}
  1633. <div class="auinfo">
  1634. {block:TrackName}
  1635. <span class="track">
  1636. {TrackName}
  1637. </span>
  1638. {/block:TrackName}
  1639. {block:Album}
  1640. <span class="album">
  1641. on {Album}
  1642. </span>
  1643. {/block:Album}
  1644. {block:Artist}
  1645. <span class="artist">
  1646. from {Artist}
  1647. </span>
  1648. {/block:Artist}
  1649. </div>
  1650. <div class="player">
  1651. {AudioPlayer}
  1652. </div>
  1653. </div>
  1654. {/block:AudioPlayer}
  1655. {/block:Audio}
  1656. {block:Answer}
  1657. <div class="question">
  1658. <img src="{AskerPortraitURL-96}">
  1659. <div class="que_cont">
  1660. <div class="asker">
  1661. {Asker}
  1662. </div>
  1663. {Question}
  1664. </div>
  1665. </div>
  1666. {/block:Answer}
  1667. <span class="posticon"></span>
  1668. </div>
  1669. <div class="postdata">
  1670. <div>
  1671. <a href="{Permalink}">
  1672. {block:ifAmericanDate}
  1673. {MonthNumberWithZero}-{DayOfMonthWithZero}-{Year}
  1674. {/block:ifAmericanDate}
  1675. {block:ifNotAmericanDate}
  1676. {DayOfMonthWithZero}-{MonthNumberWithZero}-{Year}
  1677. {/block:ifNotAmericanDate}
  1678. at {12Hour}:{Minutes}{AmPm}
  1679. </a>
  1680. </div>
  1681. <div>
  1682. <a href="{Permalink}">
  1683. {NoteCountWithLabel}
  1684. </a>
  1685. </div>
  1686. <div>
  1687. <a href="#">
  1688. {LikeButton}
  1689. </a>
  1690. </div>
  1691. <div>
  1692. <a href="{ReblogURL}">
  1693. Reblog this post!
  1694. </a>
  1695. </div>
  1696. </div>
  1697. </div>
  1698.  
  1699. {block:Date}
  1700. <div class="postinfo"{block:PostNotes} style="display:none;"{/block:PostNotes}>
  1701. <span></span>
  1702. <span></span>
  1703. <span></span>
  1704. </div>
  1705. {/block:Date}
  1706.  
  1707. {block:Text}
  1708. <div class="caption">
  1709. {block:NotReblog}
  1710. <figcaption>
  1711. {Body}
  1712. </figcaption>
  1713. {/block:NotReblog}
  1714.  
  1715. {block:RebloggedFrom}
  1716. <div class="reblog-list">
  1717. {block:Reblogs}
  1718. <div class="reblog-header">
  1719. {block:IsActive}
  1720. <a href="{Permalink}" target="_blank" class="active">
  1721. <img src="{PortraitURL-64}">
  1722. {Username}
  1723. </a>
  1724. {/block:IsActive}
  1725. {block:IsDeactivated}
  1726. <span class="inactive">
  1727. <img src="{PortraitURL-64}">
  1728. {Username}
  1729. </span>
  1730. {/block:IsDeactivated}
  1731. </div>
  1732. <div class="reblog-content">
  1733. {Body}
  1734. </div>
  1735. {/block:Reblogs}
  1736. </div>
  1737. {/block:RebloggedFrom}
  1738. </div>
  1739. {/block:Text}
  1740.  
  1741. {block:Photo}
  1742. <div class="caption">
  1743. {block:NotReblog}
  1744. <figcaption>
  1745. {Caption}
  1746. </figcaption>
  1747. {/block:NotReblog}
  1748.  
  1749. {block:RebloggedFrom}
  1750. <div class="reblog-list">
  1751. {block:Reblogs}
  1752. <div class="reblog-header">
  1753. {block:IsActive}
  1754. <a href="{Permalink}" target="_blank" class="active">
  1755. <img src="{PortraitURL-64}">
  1756. {Username}
  1757. </a>
  1758. {/block:IsActive}
  1759. {block:IsDeactivated}
  1760. <span class="inactive">
  1761. <img src="{PortraitURL-64}">
  1762. {Username}
  1763. </span>
  1764. {/block:IsDeactivated}
  1765. </div>
  1766. <div class="reblog-content">
  1767. {Body}
  1768. </div>
  1769. {/block:Reblogs}
  1770. </div>
  1771. {/block:RebloggedFrom}
  1772. </div>
  1773. {/block:Photo}
  1774.  
  1775. {block:Photoset}
  1776. <div class="caption">
  1777. {block:NotReblog}
  1778. <figcaption>
  1779. {Caption}
  1780. </figcaption>
  1781. {/block:NotReblog}
  1782.  
  1783. {block:RebloggedFrom}
  1784. <div class="reblog-list">
  1785. {block:Reblogs}
  1786. <div class="reblog-header">
  1787. {block:IsActive}
  1788. <a href="{Permalink}" target="_blank" class="active">
  1789. <img src="{PortraitURL-64}">
  1790. {Username}
  1791. </a>
  1792. {/block:IsActive}
  1793. {block:IsDeactivated}
  1794. <span class="inactive">
  1795. <img src="{PortraitURL-64}">
  1796. {Username}
  1797. </span>
  1798. {/block:IsDeactivated}
  1799. </div>
  1800. <div class="reblog-content">
  1801. {Body}
  1802. </div>
  1803. {/block:Reblogs}
  1804. </div>
  1805. {/block:RebloggedFrom}
  1806. </div>
  1807. {/block:Photoset}
  1808.  
  1809. {block:Quote}
  1810. <div class="caption">
  1811. <div class="quote">
  1812. {Quote}
  1813. </div>
  1814. {block:Source}
  1815. <div class="qsource">
  1816. {Source}
  1817. </div>
  1818. {/block:Source}
  1819. </div>
  1820. {/block:Quote}
  1821.  
  1822. {block:Link}
  1823. {block:Description}
  1824. <div class="caption">
  1825. {block:NotReblog}
  1826. <figcaption>
  1827. {Description}
  1828. </figcaption>
  1829. {/block:NotReblog}
  1830.  
  1831. {block:RebloggedFrom}
  1832. <div class="reblog-list">
  1833. {block:Reblogs}
  1834. <div class="reblog-header">
  1835. {block:IsActive}
  1836. <a href="{Permalink}" target="_blank" class="active">
  1837. <img src="{PortraitURL-64}">
  1838. {Username}
  1839. </a>
  1840. {/block:IsActive}
  1841. {block:IsDeactivated}
  1842. <span class="inactive">
  1843. <img src="{PortraitURL-64}">
  1844. {Username}
  1845. </span>
  1846. {/block:IsDeactivated}
  1847. </div>
  1848. <div class="reblog-content">
  1849. {Body}
  1850. </div>
  1851. {/block:Reblogs}
  1852. </div>
  1853. {/block:RebloggedFrom}
  1854. </div>
  1855. {/block:Description}
  1856. {/block:Link}
  1857.  
  1858. {block:Chat}
  1859. <div class="caption">
  1860. {block:Lines}
  1861. {block:Label}
  1862. <span class="label">
  1863. {Label}
  1864. </span>
  1865. {/block:Label}
  1866. <div class="line">
  1867. {Line}
  1868. </div>
  1869. {/block:Lines}
  1870. </div>
  1871. {/block:Chat}
  1872.  
  1873. {block:Video}
  1874. <div class="caption">
  1875. {block:NotReblog}
  1876. <figcaption>
  1877. {Caption}
  1878. </figcaption>
  1879. {/block:NotReblog}
  1880.  
  1881. {block:RebloggedFrom}
  1882. <div class="reblog-list">
  1883. {block:Reblogs}
  1884. <div class="reblog-header">
  1885. {block:IsActive}
  1886. <a href="{Permalink}" target="_blank" class="active">
  1887. <img src="{PortraitURL-64}">
  1888. {Username}
  1889. </a>
  1890. {/block:IsActive}
  1891. {block:IsDeactivated}
  1892. <span class="inactive">
  1893. <img src="{PortraitURL-64}">
  1894. {Username}
  1895. </span>
  1896. {/block:IsDeactivated}
  1897. </div>
  1898. <div class="reblog-content">
  1899. {Body}
  1900. </div>
  1901. {/block:Reblogs}
  1902. </div>
  1903. {/block:RebloggedFrom}
  1904. </div>
  1905. {/block:Video}
  1906.  
  1907. {block:Audio}
  1908. <div class="caption">
  1909. {block:NotReblog}
  1910. <figcaption>
  1911. {Caption}
  1912. </figcaption>
  1913. {/block:NotReblog}
  1914.  
  1915. {block:RebloggedFrom}
  1916. <div class="reblog-list">
  1917. {block:Reblogs}
  1918. <div class="reblog-header">
  1919. {block:IsActive}
  1920. <a href="{Permalink}" target="_blank" class="active">
  1921. <img src="{PortraitURL-64}">
  1922. {Username}
  1923. </a>
  1924. {/block:IsActive}
  1925. {block:IsDeactivated}
  1926. <span class="inactive">
  1927. <img src="{PortraitURL-64}">
  1928. {Username}
  1929. </span>
  1930. {/block:IsDeactivated}
  1931. </div>
  1932. <div class="reblog-content">
  1933. {Body}
  1934. </div>
  1935. {/block:Reblogs}
  1936. </div>
  1937. {/block:RebloggedFrom}
  1938. </div>
  1939. {/block:Audio}
  1940.  
  1941. {block:Answer}
  1942. <div class="caption">
  1943. {block:NotReblog}
  1944. <figcaption>
  1945. {Replies}
  1946. </figcaption>
  1947. {/block:NotReblog}
  1948.  
  1949. {block:RebloggedFrom}
  1950. {block:Answerer}
  1951. <div class="reblog-header">
  1952. <a href="{ReblogRootURL}" class="active">
  1953. <img src="{AnswererPortraitURL-64}" class="blog">
  1954. {ReblogRootName}
  1955. </a>
  1956. </div>
  1957. <div class="reblog-list">
  1958. {Answer}
  1959. </div>
  1960. {/block:Answerer}
  1961. {block:Reblogs}
  1962. <div class="reblog-header">
  1963. {block:IsActive}
  1964. <a href="{Permalink}" target="_blank" class="active">
  1965. <img src="{PortraitURL-64}" class="blog">
  1966. {Username}
  1967. </a>
  1968. {/block:IsActive}
  1969.  
  1970. {block:IsDeactivated}
  1971. <span class="inactive">
  1972. <img src="{PortraitURL-64}" class="blog">
  1973. {Username}
  1974. </span>
  1975. {/block:IsDeactivated}
  1976. </div>
  1977. <div class="reblog-list">
  1978. {Body}
  1979. </div>
  1980. {/block:Reblogs}
  1981. {/block:RebloggedFrom}
  1982. </div>
  1983. {/block:Answer}
  1984.  
  1985. {block:HasTags}
  1986. <div class="tags">
  1987. {block:Tags}
  1988. <a href="{TagURL}">
  1989. <span class="sign">
  1990. <span class="th th-{select:Tags Icon}" aria-hidden="true"></span>
  1991. </span>
  1992. <span class="tag">
  1993. {Tag}
  1994. </span>
  1995. </a>
  1996. {/block:Tags}
  1997. </div>
  1998. {/block:HasTags}
  1999.  
  2000. </article>
  2001.  
  2002. {block:PostNotes}
  2003.  
  2004. <div id="perma" class="fade-in two">
  2005. <div class="postnotestitle">
  2006. <div class="geninf">
  2007. Posted on
  2008. <span>
  2009. {block:ifAmericanDate}
  2010. {MonthNumberWithZero}-{DayOfMonthWithZero}-{Year}
  2011. {/block:ifAmericanDate}
  2012. {block:ifNotAmericanDate}
  2013. {DayOfMonthWithZero}-{MonthNumberWithZero}-{Year}
  2014. {/block:ifNotAmericanDate}
  2015. </span>
  2016. at
  2017. <span>
  2018. {12Hour}:{Minutes}{AmPm}
  2019. </span>
  2020. with
  2021. <span>
  2022. {NoteCountWithLabel}
  2023. </span>
  2024. </div>
  2025. <div class="postcontrol">
  2026. <a href="#">
  2027. {LikeButton}
  2028. </a>
  2029. <a href="{ReblogURL}">
  2030. <span class="th th-reblog" aria-hidden="true"></span>
  2031. </a>
  2032. </div>
  2033. </div>
  2034. {PostNotes-64}
  2035. </div>
  2036. {/block:PostNotes}
  2037.  
  2038. {/block:Posts}
  2039.  
  2040. </section>
  2041.  
  2042. </section>
  2043.  
  2044. </div>
  2045.  
  2046. <footer class="fade-in one">
  2047.  
  2048. <h2>{Title}</h2>
  2049.  
  2050. <div class="line"></div>
  2051.  
  2052. <div class="desc">
  2053. {Description}
  2054. </div>
  2055.  
  2056. {block:Pagination}
  2057.  
  2058. <div class="line"></div>
  2059.  
  2060. <div id="pagination">
  2061.  
  2062. {block:PreviousPage}
  2063. <div class="prev">
  2064. <a href="{PreviousPage}" title="go back">
  2065. <span class="th th-next-track" aria-hidden="true"></span>
  2066. </a>
  2067. </div>
  2068. {/block:PreviousPage}
  2069.  
  2070. <div class="current">
  2071. {CurrentPage}
  2072. </div>
  2073.  
  2074. {block:NextPage}
  2075. <div class="next">
  2076. <a href="{NextPage}" title="go forth">
  2077. <span class="th th-next-track" aria-hidden="true"></span>
  2078. </a>
  2079. </div>
  2080. {/block:NextPage}
  2081.  
  2082. </div>
  2083.  
  2084. {/block:Pagination}
  2085.  
  2086. </footer>
  2087.  
  2088. </section>
  2089.  
  2090. <div id="cont_after"></div>
  2091.  
  2092. <!-- CREDIT. DO NOT TOUCH -->
  2093.  
  2094. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  2095. <div id="credz" class="fade-in two">
  2096. </div>
  2097. </a>
  2098.  
  2099. </body>
  2100.  
  2101. <script>
  2102. function gatherData(images, arr) {
  2103. for (let i = 0; i < images.length; i++) {
  2104. let currentData = {
  2105. "width": images[i].getAttribute('data-width'),
  2106. "height": images[i].getAttribute('data-height'),
  2107. "low_res": images[i].getAttribute('data-lowres'),
  2108. "high_res": images[i].getAttribute('data-highres')
  2109. };
  2110. arr.push(currentData);
  2111. }
  2112. }
  2113. function getIndex(elem) {
  2114. let i = 0;
  2115. while( (elem = elem.previousElementSibling) != null ) i++;
  2116. return i;
  2117. }
  2118. function lightbox(elem) {
  2119. let currentPhotoset = elem.parentNode;
  2120. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2121. let data = [];
  2122. gatherData(photosetPhotos, data);
  2123. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2124. }
  2125. </script>
  2126.  
  2127. </html>
Advertisement
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!