axiumthemes

theme 12 - witch hunt

Jan 20th, 2018
650
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.78 KB | None | 0 0
  1. <html>
  2.  
  3. <!----------------------------------------------------------------------
  4.  
  5. THEME #12 /// WITCH HUNT
  6. by WOLFTHEMES
  7.  
  8. rules:
  9. 1. do not claim as your own
  10. 2. if you want to use any part
  11. of the code in your own theme
  12. please ask
  13. 3. don't remove the credit
  14. 4. enjoy :)
  15.  
  16.  
  17. Credit:
  18. Dashboard Captions - neothm.com & magnusthemes.tumblr.com
  19. resize - shythemes.tumblr.com
  20.  
  21. -----------------------------------------------------------------------
  22.  
  23. ----------------------------------------------------------------------->
  24. <html>
  25.  
  26. <head>
  27. <title>{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}
  31. <meta name="description" content="{MetaDescription}" />
  32. {/block:Description}
  33.  
  34.  
  35. <meta name="image:icon" content=""/>
  36. <meta name="image:background image" content=""/>
  37.  
  38. <meta name="if:caption" content=""/>
  39.  
  40. <meta name="color:accent" content="#dfacaf"/>
  41. <meta name="color:text" content="#b3b3b3"/>
  42. <meta name="color:link" content="#cccccc"/>
  43. <meta name="color:borders" content="#eeeeee"/>
  44.  
  45. <meta name="text:post width" content="500"/>
  46. <meta name="text:photoset gutter" content="0"/>
  47.  
  48. <meta name="text:as of date" content="01/23"/>
  49. <meta name="text:featured link" content="/"/>
  50. <meta name="text:featured title" content="title"/>
  51. <meta name="text:online script" content="script here"/>
  52. <meta name="text:visits script" content="script here"/>
  53.  
  54. <meta name="text:link 1" content="link"/>
  55. <meta name="text:link 1 URL" content="/"/>
  56. <meta name="text:link 2" content="link"/>
  57. <meta name="text:link 2 URL" content="/"/>
  58. <meta name="text:link 3" content="link"/>
  59. <meta name="text:link 3 URL" content="/"/>
  60. <meta name="text:link 4" content="link"/>
  61. <meta name="text:link 4 URL" content="/"/>
  62.  
  63. <link href="https://fonts.googleapis.com/css?family=Anton|Inconsolata|Lora|Muli|Playball|Playfair+Display|Roboto|Roboto+Mono|Slabo+27px" rel="stylesheet">
  64.  
  65. <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
  66.  
  67. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  68. <script>
  69. // minimal soundcloud player © shythemes.tumblr
  70. $(document).ready(function(){
  71. var color = '#f0bfb3'; // color of play button (hex)
  72. $('.soundcloud_audio_player').each(function(){
  73. $(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=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  74. });
  75. });
  76. </script>
  77.  
  78.  
  79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  80. <script src="https://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
  81. <script>
  82. (function($){
  83. $(document).ready(function(){
  84. $('[title]').style_my_tooltips({
  85. tip_follows_cursor:true,
  86. tip_delay_time:90,
  87. tip_fade_speed:700,
  88. attribute:'title'
  89. });
  90. });
  91. })(jQuery);
  92. </script>
  93.  
  94. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  95. <script>
  96. !function(a){a.fn.unnest=function(b){var d,e,f,g,h,c=a.extend({yourCaption:".cap",wrapName:".rebloguser",newCaptionUsername:!1,originalPostCaptionUsername:!1,tumblrAvatarClass:".avtar",tumblrAvatars:!0,usernameColon:!0},b),i=c.wrapName.slice(1,c.wrapName.length),j=c.tumblrAvatarClass.slice(1,c.tumblrAvatarClass.length);a(c.yourCaption,this).each(function(){var b=!1,k=!1;a("a.tumblr_blog",this).length<=0&&(b=!0),a(this).find("blockquote").each(function(){a(this).prev().children(".tumblr_blog").length>0&&(a(this).addClass(i),d=a(this).parent().find("a.tumblr_blog").parent("p").html(),c.usernameColon||(d=d.slice(0,-1))),a(this).hasClass(i)&&(a(this).prepend(d),c.tumblrAvatars&&(g=a(this).prev().children("a.tumblr_blog").text(),a(this).prepend('<img src="http://api.tumblr.com/v2/blog/'+g+'.tumblr.com/avatar/30" class="'+j+'" />')))}),a(this).find("a.tumblr_blog:first-of-type").parent("p").remove(),a(c.wrapName,this).each(function(){a(this).parents(c.yourCaption).prepend(a(this))}),h=window.location.hostname;var l=a(this);a.getScript("http://"+h+"/api/read/json").complete(function(){e=l.contents(":not("+c.wrapName+")"),e.text().replace(/\s/g,"").length>0&&(k=l.clone().find(c.wrapName).remove().end().html(),e.remove(),c.newCaptionUsername||b?(f='<blockquote class="'+i+'">',c.tumblrAvatars&&(!b||b&&c.originalPostCaptionUsername)&&(f+='<img src="http://api.tumblr.com/v2/blog/'+h+'/avatar/30" class="'+j+'" />'),(!b||b&&c.originalPostCaptionUsername)&&(f+='<a class="tumblr_blog" href="/">'),(!b||b&&c.originalPostCaptionUsername)&&("undefined"!=typeof tumblr_api_read&&(h=tumblr_api_read.tumblelog.name),console.info(h),f+=h+"</a><p>"),f+=k+"</blockquote>",l.append(f)):l.append('<blockquote class="'+i+'">'+k+"</blockquote>"))})})}}(jQuery);
  97. $('.caption').unnest({
  98. yourCaption: ".cap", //your caption selector, the div wrapping
  99. wrapName: ".rebloguser", //the name of the captions’ new wrapper
  100. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  101. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  102. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  103. tumblrAvatarClass: ".avatar", //class of the avatar next to the username
  104. usernameColon: false //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  105. });
  106. $('.caption').unnest({
  107. newCaptionUsername: true,
  108. tumblrAvatars: true,
  109. usernameColon: false
  110. });
  111. </script>
  112.  
  113. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  114. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  115. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  116. <script>
  117. $(document).ready(function(){
  118. $('.photo-slideshow').pxuPhotoset({
  119. lightbox: true,
  120. rounded: false,
  121. gutter: '{text:photoset gutter}px',
  122. borderRadius: '0px',
  123. photoset: '.photo-slideshow',
  124. photoWrap: '.photo-data',
  125. photo: '.pxu-photo'
  126. });
  127. });
  128. </script>
  129.  
  130. <script>
  131. $(window).scroll(function(){
  132. if ($(window).scrollTop() >= 650) {
  133. $('.bottombar').addClass('fixed-header');
  134. }
  135. else {
  136. $('.bottombar').removeClass('fixed-header');
  137. }
  138. });
  139. </script>
  140. {block:IndexPage}
  141. <script type="text/javascript">
  142. jQuery(document).ready(function() {
  143. jQuery(".tagline").hide();
  144. jQuery(".tagtoggle").click(function()
  145. {
  146. jQuery(this).next(".tagline").slideToggle(500);
  147. });});
  148. </script>
  149. {/block:IndexPage}
  150.  
  151. {block:PermalinkPage}
  152. <script type="text/javascript">
  153. jQuery(document).ready(function() {
  154. jQuery(".permalinks").hide();
  155. jQuery(".postnotes").click(function()
  156. {
  157. jQuery(this).next(".permalinks").slideToggle(500);
  158. });});
  159. </script>
  160. {/block:PermalinkPage}
  161.  
  162. </head>
  163.  
  164. <style type="text/css">
  165.  
  166.  
  167. /*-------------- SCROLLBAR ----------------*/
  168.  
  169. ::-webkit-scrollbar {
  170. width:9px;
  171. }
  172. ::-webkit-scrollbar {
  173. background: #fff;
  174. }
  175. ::-webkit-scrollbar-track {
  176. border: 4px solid #fff;
  177. background: {color:accent};
  178. }
  179. ::-webkit-scrollbar-thumb {
  180. border: 3px solid #fff;
  181. background: {color:accent};
  182. }
  183.  
  184. /*-------------- TOOLTIP ----------------*/
  185.  
  186. #s-m-t-tooltip {
  187. max-width:300px;
  188. padding:3px 6px 3px 6px;
  189. margin:20px 20px 10px 6px;
  190. font-family: 'Roboto', sans-serif;
  191. font-size:9px;
  192. background: #f2f2f2;color:#888;
  193. border: 1px solid {color:borders};
  194. border-radius: 5px;
  195. z-index:9999999;}
  196.  
  197. ::selection {
  198. background: #eee; /* WebKit/Blink Browsers */
  199. color: #000;
  200. }
  201. ::-moz-selection {
  202. background: #eee; /* Gecko Browsers */
  203. color: #000;
  204. }
  205.  
  206.  
  207. /*-------------- BASIC HTML ----------------*/
  208.  
  209.  
  210. html {
  211. overflow-x:hidden;
  212. background: #f9f9f9;
  213. cursor: url(http://www.rw-designer.com/cursor-extern.php?id=27887), progress !important;
  214. }
  215.  
  216.  
  217. a:hover, img:hover {
  218. cursor: url(http://www.rw-designer.com/cursor-extern.php?id=91283), progress !important;
  219. }
  220.  
  221. body {
  222. font-size: 11px;
  223. color: {color:text};
  224. font-family:'Roboto', sans-serif;
  225. }
  226.  
  227. hr {
  228. border: none;
  229. height: 1px;
  230. background: #eee;
  231. }
  232.  
  233. a {
  234. text-decoration: none;
  235. color: #ccc;
  236. -webkit-transition: all ease 0.8s;
  237. -moz-transition: all ease 0.8s;
  238. transition: all ease 0.8s;
  239. }
  240.  
  241. a:hover, a:active, .links span:hover {
  242. color:{color:accent};
  243. -webkit-transition: all ease 0.8s;
  244. -moz-transition: all ease 0.8s;
  245. transition: all ease 0.8s;
  246. }
  247.  
  248. b {
  249. color: #666666;
  250. }
  251.  
  252. blockquote {
  253. border-left: 1px solid #333;
  254. margin-right: 20px;
  255. padding-left: 10px;
  256. }
  257.  
  258. /*------------------------------------------*/
  259.  
  260. iframe.tmblr-iframe {
  261. z-index:2!important;
  262. top:105px!important;
  263. right:5px!important;
  264. opacity:0.2;
  265. /* delete invert(1) from here */
  266. filter:invert(1) contrast(150%);
  267. -webkit-filter:invert(1) contrast(150%);
  268. -o-filter:invert(1) contrast(150%);
  269. -moz-filter:invert(1) contrast(150%);
  270. -ms-filter:invert(1) contrast(150%);
  271. /* to here if your blog has a dark background */
  272. transform:scale(0.65);
  273. transform-origin:100% 0;
  274. -webkit-transform:scale(0.65);
  275. -webkit-transform-origin:100% 0;
  276. -o-transform:scale(0.65);
  277. -o-transform-origin:100% 0;
  278. -moz-transform:scale(0.65);
  279. -moz-transform-origin:100% 0;
  280. -ms-transform:scale(0.65);
  281. -ms-transform-origin:100% 0;}
  282.  
  283. iframe.tmblr-iframe:hover {
  284. opacity:0.2!important;
  285. -webkit-transition: all ease 0.8s;
  286. -moz-transition: all ease 0.8s;
  287. transition: all ease 0.8s;}
  288.  
  289. /*------------------------------------------*/
  290.  
  291. .bottombar {
  292. border-bottom: 1px solid {color:borders};
  293. border-top: 1px solid {color:borders};
  294. z-index: 9;
  295. background: #fff;
  296. {block:IndexPage}left: 0;bottom: 0;position: absolute;{/block:IndexPage}
  297. {block:PermalinkPage}left: 0;
  298. top: 0;position: fixed;
  299. {/block:PermalinkPage}
  300. height: 100px;width: 100%;
  301. }
  302.  
  303. .fixed-header {
  304. position: fixed;
  305. top:0; left:0;
  306. width: 100%;
  307. }
  308. .title {
  309. font-family: 'Lora', serif;
  310. text-transform: uppercase;
  311. position:absolute;
  312. left: 80px;
  313. top: 40px;
  314. font-size: 13px;
  315. background: #fff;
  316. padding-right: 10px;
  317. z-index: 5;
  318. }
  319.  
  320. .line {
  321. z-index: 1;
  322. height: 1px;
  323. width: calc(100% - 160px);
  324. right: 80px;
  325. left: 80px;
  326. margin-top: 48px;
  327. position: absolute;
  328. background: {color:borders};
  329. }
  330.  
  331. .links {
  332. z-index: 5;
  333. background: #fff;
  334. position: absolute;
  335. right: 80px;
  336. top: 40px;
  337. padding-left: 10px;
  338. text-transform: capitalize;
  339. }
  340.  
  341. .links a {
  342. color: {color:accent}!important;
  343. margin-left: 20px;
  344. border: 1px solid {color:accent};
  345. font-weight: bold;
  346. padding: 5px 10px;
  347. }
  348.  
  349. .links a:hover, .links a:active {
  350. background: {color:accent};
  351. border: 1px solid {color:accent};
  352. color: #fff!important;
  353. }
  354. {block:IndexPage}
  355. .backgroundimage {
  356. z-index: 3;
  357. position: absolute;
  358. bottom: 0;
  359. left: 0;
  360. border: 10px 10px 10px 0;
  361. border-color: #fff;
  362. width: 100%;
  363. height: 100%;
  364. background-color: #fff;
  365. background-image: url('{image:background image}');
  366. background-repeat: no-repeat;
  367. background-size:cover;
  368. }
  369. {block:IndexPage}
  370.  
  371.  
  372. /*------------------------------------------*/
  373.  
  374. #pagination {
  375. font-family: 'Muli', monospace;
  376. width: {text:post width}px;
  377. position: absolute;
  378. left: calc(50% - {text:post width}px/2);
  379. text-align: center;
  380. word-spacing:10px;
  381. color: #666666;
  382. font-size: 10px;
  383. padding: 20px 0;
  384. margin-bottom: 100px;
  385. }
  386.  
  387. #pagination .current {
  388. color: {color:accent};
  389. }
  390. #pagination a {
  391. color:{color:link};
  392. }
  393.  
  394. #pagination a:hover {
  395. color:{color:accent};
  396. }
  397.  
  398. /*------------------------------------------*/
  399.  
  400.  
  401. #thecontainer {
  402. height: auto;
  403. position: absolute;
  404. {block:IndexPage}top: 100%;{/block:IndexPage}
  405. {block:PermalinkPage}top: 0;{/block:PermalinkPage}
  406. left:0;
  407. z-index: 1;
  408. width: 100%;
  409. background: #f9f9f9;
  410. }
  411.  
  412.  
  413. .posts {
  414. width: {text:post width}px;
  415. height: auto;
  416. {block:IndexPage}margin-top: 80px;margin-bottom: 80px;position: relative;left: calc(50% - {text:post width}px/2);{/block:IndexPage}
  417. {block:PermalinkPage}top: 120px;left: calc(25% - {text:post width}px/2);position: absolute;margin-bottom: 50px;{/block:PermalinkPage}
  418. font-size: 10px;
  419. color: {color:text};
  420. }
  421.  
  422. .posts a {
  423. color: {color:accent};
  424. }
  425.  
  426. .posts a:hover {
  427. color: #333333;
  428. }
  429.  
  430. {block:IndexPage}
  431. .hover {
  432. {block:Quote}display:none;{/block:Quote}
  433. z-index: 8;
  434. border: 20px solid {color:borders};
  435. position:absolute;
  436. top:0px;
  437. right:0px;
  438. bottom:0px;
  439. left:0px;
  440. opacity:0;
  441. background: #fff;
  442. -webkit-transition: all ease 0.8s;
  443. -moz-transition: all ease 0.8s;
  444. transition: all ease 0.8s;
  445. }
  446.  
  447. .stats:hover{
  448. {block:Quote}display:none;{/block:Quote}
  449. opacity:1;
  450. -webkit-transition: all ease 0.8s;
  451. -moz-transition: all ease 0.8s;
  452. transition: all ease 0.8s;
  453. }
  454.  
  455. .stats i{
  456. font-size: 15px;
  457. padding: 10px;
  458. }
  459.  
  460. .stats table {
  461. position: absolute;
  462. left: calc(50% - 40px);
  463. top: calc(50% - 40px);
  464. vertical-align: center;
  465. text-align: center;
  466. border-collapse: collapse;
  467. }
  468.  
  469. .stats table td, .stats table th {
  470. width: 40px
  471. height: 40px;
  472. }
  473.  
  474. tr:first-child {
  475. border-bottom: 1px solid {color:accent};
  476. }
  477.  
  478. th:first-child {
  479. border-right: 1px solid {color:accent};
  480. }
  481.  
  482. td:first-child {
  483. border-right: 1px solid {color:accent};
  484. }
  485.  
  486. .hover .stats {
  487. {block:Quote}display:none;{/block:Quote}
  488. /* set width and height relative to the hover div */
  489. width:100%;
  490. height:auto;
  491. /* correct width and max-height for padding and borders */
  492. -moz-box-sizing:border-box;
  493. box-sizing:border-box;
  494. /* make it scroll if the caption is too long */
  495. overflow:auto; /* overflow:hidden; otherwise */
  496. -webkit-transition: all ease 0.8s;
  497. -moz-transition: all ease 0.8s;
  498. transition: all ease 0.8s;
  499. }
  500.  
  501. .post-content:hover .hover {
  502. opacity:0.8;
  503. {block:Quote}display:none;{/block:Quote}
  504. -webkit-transition: all ease 0.8s;
  505. -moz-transition: all ease 0.8s;
  506. transition: all ease 0.8s;
  507. }
  508. .post-content {
  509. position:relative;
  510. }
  511. {block:IndexPage}
  512.  
  513.  
  514.  
  515.  
  516.  
  517. /*------------------------------------------*/
  518.  
  519. #captions {
  520. {block:Caption}border: 1px solid #eee;{/block:Caption}
  521. }
  522.  
  523. .caption {
  524. margin-top: 10px;
  525. {block:ifCaption}display: block;{/block:IfCaption}
  526. {block:ifNotCaption}display:none;{/block:IfNotCaption}
  527. background: #fff;
  528. width: 100%;
  529. {block:Caption}padding: 10px; border: 1px solid #eee;{/block:Caption}
  530. }
  531.  
  532. .caption img, .cap img, #askcaption img {
  533. margin: 0;
  534. padding: 0;
  535. max-width: calc({text:post width}px - 20px);
  536. }
  537.  
  538. .cap {
  539. margin: 0px 10px 0px 10px;
  540. padding: 0 0 10px 0;
  541. }
  542.  
  543. .rebloguser {
  544. margin-top: 15px;
  545. padding-top: 10px;
  546. }
  547.  
  548. .rebloguser:first-child {
  549. border-top: 0px;
  550. padding-top: 10px;
  551. }
  552.  
  553. .rebloguser a {
  554. font-size: 10px;
  555. padding: 3px 5px;
  556. border-radius: 5px;
  557. color: {color:accent};
  558. }
  559.  
  560. .rebloguser a:hover {
  561. background: {color:accent};
  562. color: #fff!important;
  563. }
  564.  
  565. img.avatar {
  566. height: 14px;
  567. width: 14px;
  568. border-radius: 100%;
  569. margin-left: 10px;
  570. margin-right: 3px;
  571. float: left;
  572. }
  573.  
  574. /*------------------------------------------*/
  575.  
  576. .tags {
  577. margin-top: 10px;
  578. word-wrap: break-word;
  579. max-width: {text:post width}px;
  580. }
  581.  
  582. .tagtoggle i {
  583. margin-left: 10px;
  584. padding-right: 10px;
  585. border-right: 1px solid {color:borders};
  586. }
  587.  
  588. {block:IndexPage}
  589. .tagtoggle, .tagline {
  590. position: absolute;
  591. }
  592.  
  593. .tagline {
  594. margin-top: -2px;
  595. left: 30px;
  596. line-height: 1.5;
  597. }{/block:IndexPage}
  598.  
  599. {block:PermalinkPage}
  600. .tagline {
  601. line-height: 1.5;
  602. margin-left: 10px;
  603. }
  604. {/block:PermalinkPage}
  605.  
  606.  
  607. .tagline a {
  608. word-wrap: break-word;
  609. margin-right: 5px;color:#888!important;
  610. }
  611.  
  612. .tagline a:hover{
  613. color: {color:accent}!important;
  614. }
  615.  
  616. /*------------------------------------------*/
  617.  
  618. .tmblr-lightbox, #tumblr_lightbox {
  619. background-color:rgba(245,245,245,.80) !important;
  620. }
  621. .vignette, #vignette {
  622. opacity:0;
  623. }
  624. .lightbox-image, #tumblr_lightbox img {
  625. box-shadow:none !important;
  626. border-radius:0 !important;
  627. max-width:none;
  628. }
  629.  
  630.  
  631. /*------------------------------------------*/
  632.  
  633. .quote {
  634. text-align: center;
  635. background: #fff;
  636. font-weight: 400;
  637. padding: 20px;
  638. border: 1px solid #eee;
  639. font-size: 15px;
  640. font-family: 'Slabo 27px', serif;
  641. }
  642.  
  643. .line2 {
  644. z-index: 1;
  645. position: absolute;
  646. height: 2px;
  647. width: calc(100% - 40px);
  648. left: 20px;
  649. top: 25px;
  650. right: 20px;
  651. background: {color:borders};
  652. }
  653.  
  654. .quote .fa-bookmark {
  655. z-index: 2;
  656. color: {color:accent};
  657. position: absolute;
  658. top: 15px;
  659. left: calc(50% - 10px);
  660. padding: 5px 10px;
  661. background: #fff;
  662. }
  663.  
  664. .realquote {
  665. margin-top:15px;
  666. }
  667.  
  668. .sourceq {
  669. padding: 20px;
  670. text-align:center;
  671. }
  672.  
  673. .sourceq b {
  674. font-family: 'Lora', serif;
  675. }
  676.  
  677. /*------------------------------------------*/
  678.  
  679. .posttitle {
  680. border: 1px solid #eee;
  681. color: #737373;
  682. padding: 10px;
  683. margin-bottom: 10px;
  684. background: #f9f9f9;
  685. text-align: center;
  686. font-size: 13px;
  687. text-transform: capitalize;
  688. font-family: 'Lora', serif;
  689. }
  690. /*------------------------------------------*/
  691.  
  692. .question {
  693. border: 1px solid #eee;
  694. background: #fff;
  695. padding: 10px 5px;
  696. color: {color:text};
  697. }
  698.  
  699. .question b {
  700. font-family: 'Inconsolata', monospace;
  701. }
  702.  
  703. .question img {
  704. float:right;
  705. width: 24px;
  706. height: 24px;
  707. margin-top: 3px;
  708. margin-right: 15px;
  709. margin-left: 5px;
  710. border-radius: 10px;
  711. }
  712.  
  713. .triangle {z-index: 1;
  714. width: 15px;
  715. height: 15px;
  716. background:#eee;
  717. position: absolute;
  718. transform: rotate(45deg);
  719. margin-top: 7px;
  720. right: 69px;
  721. }
  722.  
  723. .askbox {
  724. z-index:7;
  725. background:#eee;
  726. padding: 10px 10px 10px 10px;
  727. width: calc({text:post width}px - 100px);
  728. border-radius: 5px;
  729. margin-right: 60px;
  730. }
  731.  
  732. .ask, .quest {
  733. z-index:7;
  734. display:inline;
  735. }
  736.  
  737. .ask {z-index:5;
  738. margin-right: 5px;
  739. }
  740.  
  741. .ask a {
  742. text-transform: uppercase;
  743. color: {color:accent}!important;
  744. }
  745.  
  746. .ask a:hover {
  747. color:#333!important;
  748. }
  749.  
  750. #askcaption {
  751. border: 1px solid #eee;
  752. margin-top: 10px;
  753. padding-top: 10px;
  754. background: #fff;
  755. }
  756.  
  757. .answerer {
  758. margin-left: 20px;
  759. }
  760.  
  761. .answer img {
  762. width: 20px;
  763. float: left;
  764. height: 20px;
  765. position: absolute;
  766. left: 15px;
  767. border-radius: 5px;
  768. }
  769.  
  770. .answ {
  771. background: #eee;
  772. padding: 10px;
  773. margin: 15px 10px 10px 10px;
  774. border-radius: 5px;
  775. }
  776.  
  777. /*------------------------------------------*/
  778.  
  779. .chats li {
  780. list-style-type: none;
  781. padding: 10px;
  782. background:#f9f9f9;
  783. border: 1px solid #eee;
  784. }
  785.  
  786. .chats li:nth-of-type(2n) {
  787. background: transparent;
  788. }
  789.  
  790. .label, .line {
  791. display: inline;
  792. }
  793.  
  794. .label {
  795. font-family: 'Inconsolata', monospace;
  796. color: #333;
  797. font-weight: bold;
  798. }
  799.  
  800. /*------------------------------------------*/
  801.  
  802. .audio {
  803. width: {text:post width}px;
  804. }
  805.  
  806. .tumblr_audio_player {
  807. border-radius: 0 !important;
  808. width: {text:Post width}px !important;
  809. }
  810.  
  811. .spotify_audio_player {
  812. width: {text:post width}px;
  813. height: 80px !important;
  814.  
  815. }
  816.  
  817. /*------------------------------------------*/
  818. .postinfo {
  819. {block:AskPage}display:none;{/block:AskPage}
  820. position: absolute;
  821. right: calc(25% - {text:post width}px/2);
  822. top: 180px;
  823. }
  824.  
  825. .permalinks {
  826. border-top: 1px solid #eee;
  827. border-bottom: 1px solid #eee;
  828. color: #999999;
  829. width: {text:post width}px;
  830. max-height: 300px;
  831. overflow-y:scroll;
  832. overflow-x:hidden;
  833. margin-bottom: 10px;
  834. }
  835.  
  836. .permalinks ol li {
  837. list-style-type:none;
  838. margin:0;
  839. padding: 0;
  840. line-height: 3;
  841. }
  842.  
  843. .permalinks li {
  844. margin-bottom: 15px;
  845. }
  846.  
  847. .permalinks a {
  848. font-family: 'Muli', monospace;
  849. color: #333;
  850. }
  851.  
  852. .permalinks a:hover {
  853. color: {color:accent};
  854. }
  855.  
  856. .permalinks img {
  857. height: 12px;
  858. width:12px;
  859. float:left;
  860. margin-top: 10px;
  861. margin-right: 10px;
  862. border-radius: 100%;
  863. }
  864. /*------------------------------------------*/
  865.  
  866. .permalinkbox {
  867. width: {text:post width}px;
  868. height: auto;
  869. }
  870.  
  871. .postnotes {
  872. margin: 20px 0;
  873. width: {text:post width}px;
  874. padding: 5px 0;
  875. text-transform: uppercase;
  876. }
  877.  
  878. /*------------------------------------------*/
  879.  
  880. {block:IndexPage}
  881.  
  882. .stats2 i{
  883. font-size: 10px;
  884. padding: 5px;
  885. background:transparent;
  886. }
  887.  
  888. .stats2 table {
  889. position: absolute;
  890. vertical-align: center;
  891. text-align: center;
  892. border-collapse: collapse;
  893. }
  894.  
  895. .stats2 table td, .stats2 table th {
  896. width: 20px
  897. height: 20px;
  898. }
  899.  
  900. tr:first-child {
  901. border-bottom: 1px solid {color:accent};
  902. }
  903.  
  904. th:first-child {
  905. border-right: 1px solid {color:accent};
  906. }
  907.  
  908. td:first-child {
  909. border-right: 1px solid {color:accent};
  910. }
  911.  
  912. .stats2 {
  913. /* set width and height relative to the hover div */
  914. position: absolute;
  915. opacity: 0;
  916. left: calc(100% + 10px);
  917. top: 5px;
  918. -webkit-transition: all ease 0.8s;
  919. -moz-transition: all ease 0.8s;
  920. transition: all ease 0.8s;
  921. }
  922.  
  923. .question:hover .stats2,.posttitle:hover .stats2, .quote:hover .stats2 {
  924. opacity:0.8;
  925. -webkit-transition: all ease 0.8s;
  926. -moz-transition: all ease 0.8s;
  927. transition: all ease 0.8s;
  928. }
  929. {block:IndexPage}
  930.  
  931.  
  932. </style>
  933. <body>
  934.  
  935.  
  936.  
  937. {block:IndexPage}
  938. <div class="backgroundimage"></div>
  939. {block:IndexPage}
  940.  
  941. <div class="bottombar">
  942. <div class="title">{Name}</div>
  943. <div class="links">
  944. <a href="/">home</a>
  945. <a href="/ask">ask</a>
  946. {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{block:iflink1}
  947. {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{block:iflink2}
  948. {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{block:iflink3}
  949. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{block:iflink4}
  950. </div>
  951. <div class="line"></div>
  952. </div>{/block:IndexPage}
  953.  
  954.  
  955. <div id="thecontainer">
  956.  
  957.  
  958. {block:Posts}
  959.  
  960.  
  961. <div class="posts" id="{PostID}">
  962.  
  963.  
  964. <div class="post-content">
  965.  
  966. {block:Text}{block:Title}<div class="posttitle">{Title}</div>{/block:Title}{/block:Text}
  967.  
  968. {block:Photo}<img src="{PhotoURL-500}" width="{block:IndexPage}{text:Post Width}px{/block:IndexPage}{block:PermalinkPage}{text:Permalink Post Width}px{/block:PermalinkPage}" max-height="100%">{block:Photo}
  969.  
  970. {block:Photoset}<div class="set"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  971. <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></div></center></div>{/block:Photoset}
  972.  
  973. {block:Chat}{block:Title}<div class="posttitle">{Title}</div></a>{/block:Title}{/block:Chat}
  974.  
  975. {block:Video}<div class="video">{Video-500}</div>{block:Video}
  976.  
  977. {block:Audio}<div class="audio spotify_audio_player">{AudioEmbed}</div>{/block:Audio}
  978.  
  979. <div class="hover" style="{block:Quote}display:none;{/block:Quote}{block:Answer}display:none;{/block:Answer}{block:Link}display:none;{/block:Link}{block:PermalinkPage}display:none;{/block:PermalinkPage}">
  980. <div class="stats">
  981. <table>
  982. <tr>
  983. <th><notes>{block:NoteCount}<a href="{Permalink}" title="{NoteCount} N"><i class="far fa-heart"></i></a>{/block:NoteCount}</notes></th>
  984. <th><from>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"><i class="fas fa-redo-alt"></i></a>{/block:RebloggedFrom}
  985. {block:NotReblog}<a href="{Permalink}" title="original"><i class="far fa-star"></i></a>{/block:NotReblog}</from></th>
  986. </tr>
  987. <tr>
  988. <td><date>{block:Date}<a href="{Permalink}" title="{12Hour}:{Minutes}:{Seconds} {AmPm} {DayOfMonthWithZero} {ShortMonth}"><i class="far fa-clock"></i></a>{/block:Date}</date></td>
  989. <td><src>{block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}"><i class="fas fa-map-marker-alt"></i></a>{/block:ContentSource}</src></td>
  990. </tr>
  991. </table>
  992. </div></div>
  993. </div>
  994.  
  995.  
  996.  
  997. <div id="captions">
  998.  
  999. {block:Answer}
  1000. <div class="question"><img src="{AskerPortraitURL-24}"><div class="triangle"></div><div class="askbox"><div class="ask"> {Asker} asked:</div><div class="quest">{Question}</div></div>
  1001. <div class="stats2">
  1002. <table>
  1003. <tr>
  1004. <th><notes>{block:NoteCount}<a href="{Permalink}" title="{NoteCount} N"><i class="far fa-heart"></i></a>{/block:NoteCount}</notes></th>
  1005. <th><from>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"><i class="fas fa-redo-alt"></i></a>{/block:RebloggedFrom}
  1006. {block:NotReblog}<a href="{Permalink}" title="original"><i class="far fa-star"></i></a>{/block:NotReblog}</from></th>
  1007. </tr>
  1008. <tr>
  1009. <td><date>{block:Date}<a href="{Permalink}" title="{12Hour}:{Minutes}:{Seconds} {AmPm} {DayOfMonthWithZero} {ShortMonth}"><i class="far fa-clock"></i></a>{/block:Date}</date></td>
  1010. <td><src>{block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}"><i class="fas fa-map-marker-alt"></i></a>{/block:ContentSource}</src></td>
  1011. </tr>
  1012. </table>
  1013. </div></div><div id="askcaption">
  1014. <div class="answer"><img src="{AnswererPortraitURL-24}"> {block:Answerer}<div class="answerer">{Answerer} said:</div> {/block:Answerer}<div class="answ">{Answer}</div></div></div>
  1015. {/block:Answer}
  1016.  
  1017. {block:Text}<div class="caption">
  1018. {block:Reblogs}
  1019. <div class="rebloguser">
  1020. {block:IsNotOriginalEntry}
  1021. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1022. {/block:IsNotOriginalEntry}
  1023. {block:IsOriginalEntry}
  1024. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1025. {/block:IsOriginalEntry}
  1026. </div>
  1027. <div class="cap">
  1028. {Body}
  1029. </div>
  1030. {/block:Reblogs}
  1031. {block:NotReblog}
  1032. {block:Caption}
  1033. <div class="cap">
  1034. {Caption}
  1035. </div>
  1036. {/block:Caption}
  1037. {/block:NotReblog}</div>
  1038. {/block:Text}
  1039.  
  1040. {block:Photo}
  1041. <div class="caption">
  1042. {block:Reblogs}
  1043. <div class="rebloguser">
  1044. {block:IsNotOriginalEntry}
  1045. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1046. {/block:IsNotOriginalEntry}
  1047. {block:IsOriginalEntry}
  1048. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1049. {/block:IsOriginalEntry}
  1050. </div>
  1051. <div class="cap">
  1052. {Body}
  1053. </div>
  1054. {/block:Reblogs}
  1055. {block:NotReblog}
  1056. {block:Caption}
  1057. <div class="cap">
  1058. {Caption}
  1059. </div>
  1060. {/block:Caption}
  1061. {/block:NotReblog}</div>
  1062. {/block:Photo}
  1063.  
  1064. {block:Photoset}
  1065. <div class="caption">
  1066. {block:Reblogs}
  1067. <div class="rebloguser">
  1068. {block:IsNotOriginalEntry}
  1069. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1070. {/block:IsNotOriginalEntry}
  1071. {block:IsOriginalEntry}
  1072. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1073. {/block:IsOriginalEntry}
  1074. </div>
  1075. <div class="cap">
  1076. {Body}
  1077. </div>
  1078. {/block:Reblogs}
  1079. {block:NotReblog}
  1080. {block:Caption}
  1081. <div class="cap">
  1082. {Caption}
  1083. </div>
  1084. {/block:Caption}
  1085. {/block:NotReblog}</div>
  1086. {/block:Photoset}
  1087.  
  1088. {block:Video}
  1089. <div class="caption">
  1090. {block:Reblogs}
  1091. <div class="rebloguser">
  1092. {block:IsNotOriginalEntry}
  1093. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1094. {/block:IsNotOriginalEntry}
  1095. {block:IsOriginalEntry}
  1096. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1097. {/block:IsOriginalEntry}
  1098. </div>
  1099. <div class="cap">
  1100. {Body}
  1101. </div>
  1102. {/block:Reblogs}
  1103. {block:NotReblog}
  1104. {block:Caption}
  1105. <div class="cap">
  1106. {Caption}
  1107. </div>
  1108. {/block:Caption}
  1109. {/block:NotReblog}</div>
  1110. {/block:Video}
  1111.  
  1112. {block:Audio}
  1113. <div class="caption">
  1114. {block:Reblogs}
  1115. <div class="rebloguser">
  1116. {block:IsNotOriginalEntry}
  1117. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1118. {/block:IsNotOriginalEntry}
  1119. {block:IsOriginalEntry}
  1120. <a href="{Permalink}"><img class="avatar" src="{PortraitURL-64}" /> {Username}</a>
  1121. {/block:IsOriginalEntry}
  1122. </div>
  1123. <div class="cap">
  1124. {Body}
  1125. </div>
  1126. {/block:Reblogs}
  1127. {block:NotReblog}
  1128. {block:Caption}
  1129. <div class="cap">
  1130. {Caption}
  1131. </div>
  1132. {/block:Caption}
  1133. {/block:NotReblog}</div>
  1134. {/block:Audio}
  1135.  
  1136. {block:Quote}
  1137. <div class="quote"><div class="line2"></div><i class="fas fa-bookmark"></i><div class="realquote">"{Quote}"</div>
  1138. <div class="stats2">
  1139. <table>
  1140. <tr>
  1141. <th><notes>{block:NoteCount}<a href="{Permalink}" title="{NoteCount} N"><i class="far fa-heart"></i></a>{/block:NoteCount}</notes></th>
  1142. <th><from>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"><i class="fas fa-redo-alt"></i></a>{/block:RebloggedFrom}
  1143. {block:NotReblog}<a href="{Permalink}" title="original"><i class="far fa-star"></i></a>{/block:NotReblog}</from></th>
  1144. </tr>
  1145. <tr>
  1146. <td><date>{block:Date}<a href="{Permalink}" title="{12Hour}:{Minutes}:{Seconds} {AmPm} {DayOfMonthWithZero} {ShortMonth}"><i class="far fa-clock"></i></a>{/block:Date}</date></td>
  1147. <td><src>{block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}"><i class="fas fa-map-marker-alt"></i></a>{/block:ContentSource}</src></td>
  1148. </tr>
  1149. </table>
  1150. </div></div>
  1151. <div class="caption">
  1152. {block:Reblogs}
  1153. <div class="sourceq">{Source}</div>
  1154. {/block:Reblogs}
  1155. {block:NotReblog}
  1156. <div class="sourceq">{Source}</div>
  1157. {/block:NotReblog}</div>
  1158. {/block:Quote}
  1159.  
  1160. {block:Link}<div class="posttitle"><a href="{URL}">{Name}</a><div class="stats2">
  1161. <table>
  1162. <tr>
  1163. <th><notes>{block:NoteCount}<a href="{Permalink}" title="{NoteCount} N"><i class="far fa-heart"></i></a>{/block:NoteCount}</notes></th>
  1164. <th><from>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"><i class="fas fa-redo-alt"></i></a>{/block:RebloggedFrom}
  1165. {block:NotReblog}<a href="{Permalink}" title="original"><i class="far fa-star"></i></a>{/block:NotReblog}</from></th>
  1166. </tr>
  1167. <tr>
  1168. <td><date>{block:Date}<a href="{Permalink}" title="{12Hour}:{Minutes}:{Seconds} {AmPm} {DayOfMonthWithZero} {ShortMonth}"><i class="far fa-clock"></i></a>{/block:Date}</date></td>
  1169. <td><src>{block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}"><i class="fas fa-map-marker-alt"></i></a>{/block:ContentSource}</src></td>
  1170. </tr>
  1171. </table>
  1172. </div></div>{block:Description}<div class="caption">{Description}</div>{/block:Description}{/block:Link}
  1173.  
  1174. {block:Chat}<div class="caption">{block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}</div>{/block:Chat}
  1175. </div>
  1176.  
  1177. {block:IndexPage}{block:HasTags}<div class="tags"><div class="tagtoggle"><i class="fas fa-tags"></i></div><div class="tagline">{block:Tags}#<a href="{TagURL}" title="{Tag}">{Tag}</a>{/block:Tags}</div></div>{/block:HasTags}{/block:IndexPage}
  1178.  
  1179.  
  1180.  
  1181.  
  1182. </div>
  1183.  
  1184. {block:PermalinkPage}
  1185. <div class="postinfo">
  1186. <div class="permalinkbox">
  1187. {block:Date}<div style="padding: 10px;">Posted @ {12Hour}:{Minutes}:{Seconds} {AmPm} on {ShortMonth} {DayOfMonthWithZero} {Year} </div>{/block:Date}
  1188. {block:HasTags}<div class="tags"><div class="tagline"><i class="fas fa-tags"></i> filed under: {block:Tags}#<a href="{TagURL}" title="{Tag}">{Tag}</a>{/block:Tags}</div></div>{/block:HasTags}
  1189. </div>
  1190.  
  1191. <div class="postnotes">{NoteCountWithLabel}</div>
  1192. {block:PostNotes}<div class="permalinks" >
  1193. {PostNotes-16}<br>
  1194. </div>{/block:PostNotes}</div>
  1195. {/block:PermalinkPage}
  1196.  
  1197.  
  1198. {/block:Posts}
  1199.  
  1200.  
  1201. {block:IndexPage}
  1202. <div id="pagination">
  1203. {block:Pagination}
  1204. {block:PreviousPage}
  1205. <a class="prev" href="{PreviousPage}" title="back">back</a>
  1206. {/block:PreviousPage}
  1207. {block:JumpPagination length="5"}
  1208. {block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}
  1209. {block:JumpPage}<a class="jump" href="{URL}" title="page {PageNumber}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1210. {block:NextPage}
  1211. <a class="next" href="{NextPage}" title="next">next</a>
  1212. {/block:NextPage}
  1213. {/block:Pagination}
  1214. </div>
  1215. {/block:IndexPage}
  1216.  
  1217. </div>
  1218.  
  1219.  
  1220.  
  1221.  
  1222. <!---------------DONT TOUCH PLS------------------->
  1223. <a href="http://wolfthemes.tumblr.com" style="position:fixed; bottom:10px; right:10px; font-size:9px;" title="wolfthemes">wolf</a>
  1224. <!------------------------------------------------>
  1225. </body>
  1226. </html>
Advertisement
Add Comment
Please, Sign In to add comment