Advertisement
b0rn-to-be-wild

Theme: HALLOWEEN I

Sep 29th, 2014
489
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 41.42 KB | None | 0 0
  1. <!----
  2.  
  3. ©borntobewildcodes.tumblr.com | HALLOWEEN I (vol.4)
  4.  
  5. + Do not redistribute this theme or remove the credits.
  6. + Edit as long as you keep the credits intact
  7. + Contact me if you have any questions or concerns.
  8. + Thanks for using my theme, I hope that you enjoy it.
  9.  
  10. Other credits:
  11.  
  12. - Jquery
  13. - Disqus
  14. - Google fonts
  15. - Font Awesome icons
  16. - Masonry by David Desandro
  17. - Infinite scroll by Paul Irish
  18. - PXU Photosets
  19. - Masonry with Infinite Scroll and PXU Photosets tutorial by @shythemes
  20. - Load more buttons tutorial by @shythemes
  21. - Hide stuff tutorial by @lmthemes
  22.  
  23. ---->
  24.  
  25. <!DOCTYPE html>
  26. <head>
  27.  
  28. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  29.  
  30. <link rel="shortcut icon" href="{favicon}">
  31.  
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  33. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  34.  
  35. <!--Default Variables -->
  36.  
  37. <meta name="image:Background" content="1"/>
  38. <meta name="image:Avatar" content="1"/>
  39. <meta name="image:Menu background" content="0"/>
  40.  
  41. <meta name="color:Background" content="#ffffff"/>
  42. <meta name="color:Header background" content="#ffffff"/>
  43. <meta name="color:Blog title" content="#F2992E"/>
  44. <meta name="color:Search" content="#F2992E"/>
  45. <meta name="color:Description" content="#222222"/>
  46. <meta name="color:Menu background" content="#dddddd"/>
  47. <meta name="color:Main icon" content="#000000"/>
  48. <meta name="color:Main link" content="#000000"/>
  49. <meta name="color:Buttons" content="#000000"/>
  50. <meta name="color:Link post background" content="#eeeeee"/>
  51. <meta name="color:Ask bubble" content="#eeeeee"/>
  52. <meta name="color:Title" content="#F2992E"/>
  53. <meta name="color:Text" content="#222222"/>
  54. <meta name="color:Link" content="#F2992E"/>
  55. <meta name="color:Hover" content="#e7820a"/>
  56. <meta name="color:Bold" content="#000000"/>
  57. <meta name="color:Italic" content="#888888"/>
  58. <meta name="color:Borders" content="#dddddd"/>
  59. <meta name="color:Pagination" content="#000000"/>
  60. <meta name="color:Scrollbar background" content="#ffffff"/>
  61. <meta name="color:Scrollbar" content="#000000"/>
  62.  
  63. <meta name="select:Post transparency color" content="255,255,255" title="white">
  64. <meta name="select:Post transparency color" content="0,0,0" title="black">
  65. <meta name="select:Post transparency color" content="238,238,238" title="gray">
  66. <meta name="select:Post transparency color" content="255,168,212" title="pink">
  67. <meta name="select:Post transparency color" content="127,88,242" title="purple">
  68. <meta name="select:Post transparency color" content="184,168,255" title="indigo">
  69. <meta name="select:Post transparency color" content="184,208,255" title="blue">
  70. <meta name="select:Post transparency color" content="103,173,90" title="green">
  71. <meta name="select:Post transparency color" content="33,209,297" title="turquoise">
  72. <meta name="select:Post transparency color" content="226,229,23" title="yellow">
  73. <meta name="select:Post transparency color" content="112,38,11" title="brown">
  74.  
  75. <meta name="select:Post info transparency color" content="255,255,255" title="white">
  76. <meta name="select:Post info transparency color" content="0,0,0" title="black">
  77. <meta name="select:Post info transparency color" content="238,238,238" title="gray">
  78. <meta name="select:Post info transparency color" content="255,168,212" title="pink">
  79. <meta name="select:Post info transparency color" content="127,88,242" title="purple">
  80. <meta name="select:Post info transparency color" content="184,168,255" title="indigo">
  81. <meta name="select:Post info transparency color" content="184,208,255" title="blue">
  82. <meta name="select:Post info transparency color" content="103,173,90" title="green">
  83. <meta name="select:Post info transparency color" content="33,209,297" title="turquoise">
  84. <meta name="select:Post info transparency color" content="226,229,23" title="yellow">
  85. <meta name="select:Post info transparency color" content="112,38,11" title="brown">
  86.  
  87. <meta name="select:Transparency" content="1" title="opaque">
  88. <meta name="select:Transparency" content=".9" title=".9">
  89. <meta name="select:Transparency" content=".8" title=".8">
  90. <meta name="select:Transparency" content=".7" title=".7">
  91. <meta name="select:Transparency" content=".6" title=".6">
  92. <meta name="select:Transparency" content=".5" title=".5">
  93. <meta name="select:Transparency" content=".4" title=".4">
  94. <meta name="select:Transparency" content=".3" title=".3">
  95. <meta name="select:Transparency" content=".2" title=".2">
  96. <meta name="select:Transparency" content=".1" title=".1">
  97. <meta name="select:Transparency" content=".0" title="transparent">
  98.  
  99. <meta name="font:Body font" content="Helvetica"/>
  100. <meta name="select:Body font size" content="12px" title="12px">
  101. <meta name="select:Body font size" content="13px" title="13px">
  102. <meta name="select:Body font size" content="14px" title="14px">
  103. <meta name="select:Body font size" content="15px" title="15px">
  104. <meta name="select:Body font size" content="16px" title="16px">
  105.  
  106. <meta name="select:Title font" content="Cinzel" title="Cinzel">
  107. <meta name="select:Title font" content="Mystery Quest" title="Mystery Quest">
  108. <meta name="select:Title font" content="New Rocker" title="New Rocker">
  109. <meta name="select:Title font" content="Trade Winds" title="Trade Winds">
  110. <meta name="select:Title font" content="Voltaire" title="Voltaire">
  111.  
  112. <meta name="select:Title font size" content="18px" title="18px">
  113. <meta name="select:Title font size" content="20px" title="20px">
  114. <meta name="select:Title font size" content="22px" title="22px">
  115. <meta name="select:Title font size" content="25px" title="25px">
  116. <meta name="select:Title font size" content="27px" title="27px">
  117.  
  118. <meta name="select:Post width" content="540" title="540px">
  119. <meta name="select:Post width" content="500" title="500px">
  120. <meta name="select:Post width" content="400" title="400px">
  121. <meta name="select:Post width" content="300" title="300px">
  122. <meta name="select:Post width" content="250" title="250px">
  123.  
  124. <meta name="select:Number of columns" content="1" title="1">
  125. <meta name="select:Number of columns" content="2" title="2">
  126. <meta name="select:Number of columns" content="3" title="3">
  127.  
  128. <meta name="if:Inverted Controls" content="0" />
  129. <meta name="if:Show Bat" content="1" />
  130. <meta name="if:Show Bats" content="1" />
  131. <meta name="if:Show Black Cat" content="1" />
  132. <meta name="if:White Halloween" content="0" />
  133. <meta name="if:White frame" content="0" />
  134. <meta name="if:Show Search Box" content="1" />
  135. <meta name="if:Infinite Scroll" content="0"/>
  136. <meta name="if:Load More" content="0"/>
  137. <meta name="if:Faded Images" content="0" />
  138. <meta name="if:Monochrome Images" content="0" />
  139. <meta name="if:Show Captions" content="1" />
  140. <meta name="if:Show Tags" content="1" />
  141. <meta name="if:Ask Enabled" content="1" />
  142. <meta name="if:Submissions Enabled" content="1" />
  143. <meta name="if:Show Archive" content="1" />
  144. <meta name="if:Disqus Shortname" content="0"/>
  145.  
  146. <meta name="if:Show Link One" content="1" />
  147. <meta name="if:Show Link Two" content="1" />
  148. <meta name="if:Show Link Three" content="1" />
  149. <meta name="if:Show Link Four" content="1" />
  150. <meta name="if:Show Link Five" content="1" />
  151.  
  152. <meta name="text:Link One" content="LINK ONE"/>
  153. <meta name="text:Link One url" content="Link One url"/>
  154. <meta name="text:Link Two" content="LINK TWO"/>
  155. <meta name="text:Link Two url" content="Link Two url"/>
  156. <meta name="text:Link Three" content="LINK THREE"/>
  157. <meta name="text:Link Three url" content="Link Three url"/>
  158. <meta name="text:Link Four" content="LINK FOUR"/>
  159. <meta name="text:Link Four url" content="Link Four url"/>
  160. <meta name="text:Link Five" content="LINK FIVE"/>
  161. <meta name="text:Link Five url" content="Link Five url"/>
  162.  
  163. <meta name="text:Border radius" content="0px" />
  164. <meta name="text:Blog alias" content="blogalias"/>
  165. <meta name='text:Disqus Shortname' content='' />
  166.  
  167. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  168.  
  169. <!-- CSS -->
  170.  
  171. <style type="text/css">
  172.  
  173.  
  174. /* ---------------------------- GENERAL ----------------------------- */
  175.  
  176. /* -------- BASICS ------- */
  177.  
  178. body {
  179. margin: 0;
  180. padding: 0;
  181. width: 100%;
  182. height: 100%;
  183. color: {color:text};
  184. font-family: {font:Body font};
  185. font-size: {select:Body font size};
  186. line-height: -moz-calc({select:Body font size} + 5px);
  187. line-height: -webkit-calc({select:Body font size} + 5px);
  188. line-height: -o-calc({select:Body font size} + 5px);
  189. line-height: calc({select:Body font size} + 5px);
  190. background-color: {color:Background};
  191. background-image:url({image:Background});
  192. background-attachment: fixed;
  193. background-repeat: repeat;
  194. word-wrap:break-word;
  195. }
  196.  
  197. /* Tumblr lightbox */
  198.  
  199. .tmblr-lightbox {background:rgba({RGBcolor:Background}, .95)!important;}
  200.  
  201. .tmblr-lightbox img {opacity:0;}
  202.  
  203. .lightbox-caption {
  204. color:{color:Title}!important;
  205. font-family:inherit!important;
  206. font-size:1em!important;
  207. font-weight:normal!important;
  208. text-shadow:none!important;
  209. }
  210.  
  211. .lightbox-image {
  212. -moz-box-shadow:none!important;
  213. -webkit-box-shadow:none!important;
  214. box-shadow:none!important;
  215. -moz-border-radius:0px!important;
  216. -webkit-border-radius:0px!important;
  217. border-radius:0px!important;
  218. padding:0px!important;
  219. border:0!important;
  220. opacity:1!important;
  221. }
  222.  
  223. .vignette {opacity:0!Important;}
  224.  
  225. /* Webkit scrollbar */
  226.  
  227. ::-webkit-scrollbar {
  228. width: 9px;
  229. height: 0px;
  230. }
  231.  
  232. ::-webkit-scrollbar-button:start:decrement,
  233. ::-webkit-scrollbar-button:end:increment {
  234. height: 0px;
  235. display: block;
  236. background-color: {color:Scrollbar background};
  237. }
  238.  
  239. ::-webkit-scrollbar-track-piece {
  240. background-color: {color:Scrollbar background};
  241. }
  242.  
  243. ::-webkit-scrollbar-thumb:vertical {
  244. height: 0px;
  245. background-color: {color:Scrollbar};
  246. border: 4px solid {color:Scrollbar background};
  247. }
  248.  
  249. /* Selection */
  250.  
  251. ::-moz-selection {
  252. background: {color:Hover};
  253. color: {color:Background};
  254. }
  255.  
  256. ::selection {
  257. background: {color:Hover};
  258. color: {color:Background};
  259. }
  260.  
  261. /* Tumblr controls */
  262.  
  263. iframe.tmblr-iframe {
  264. top:0!important;
  265. right:35px!important;
  266. opacity:0.8;
  267. {block:ifInvertedControls}
  268. filter:invert(1);
  269. -webkit-filter:invert(1);
  270. -o-filter:invert(1);
  271. -moz-filter:invert(1);
  272. -ms-filter:invert(1);
  273. {/block:ifInvertedControls}
  274. transform:scale(0.8);
  275. transform-origin:100% 0;
  276. -webkit-transform:scale(0.8);
  277. -webkit-transform-origin:100% 0;
  278. -o-transform:scale(0.8);
  279. -o-transform-origin:100% 0;
  280. -moz-transform:scale(0.8);
  281. -moz-transform-origin:100% 0;
  282. -ms-transform:scale(0.8);
  283. -ms-transform-origin:100% 0;
  284. z-index:10000!important;
  285. }
  286.  
  287. iframe.tmblr-iframe:hover {
  288. opacity:0.6!important;
  289. }
  290.  
  291. /* Tooltips */
  292.  
  293. .ui-tooltip {
  294. position:Absolute;
  295. z-index:9999;
  296. padding-top:10px;
  297. }
  298.  
  299. .ui-tooltip-content {
  300. background:{color:background};
  301. padding:0 4px;
  302. font-style:italic;
  303. color:{color:link};
  304. text-transform:lowercase;
  305. border:1px solid {color:Borders};
  306. }
  307.  
  308. img {
  309. opacity:1;
  310. border:0;
  311. text-decoration:none;
  312. max-width:100%;
  313. height:auto;
  314. display:block;
  315. }
  316.  
  317. /* Image style */
  318.  
  319. {block:IfFadedImages}
  320. img {
  321. -webkit-transition: opacity 0.8s linear;
  322. -moz-transition: opacity 0.8s linear;
  323. -o-transition: opacity 0.8s linear;
  324. -ms-transition: opacity 0.8s linear;
  325. opacity: 0.60;
  326. }
  327.  
  328. img:hover {
  329. -webkit-transition: opacity 0.8s linear;
  330. -moz-transition: opacity 0.8s linear;
  331. -o-transition: opacity 0.8s linear;
  332. -ms-transition: opacity 0.8s linear;
  333. opacity: 1;
  334. }
  335. {/block:IfFadedImages}
  336.  
  337. {block:IfMonochromeImages}
  338. img {
  339. -webkit-filter: grayscale(1);
  340. -webkit-transition: all 0.5s ease-in-out;
  341. -moz-transition: all 0.5s ease-in-out;
  342. -o-transition: all 0.5s ease-in-out;
  343. -ms-transition: all 0.5s ease-in-out;
  344. transition: all 0.5s ease-in-out;
  345. }
  346.  
  347. img:hover {
  348. filter: none;
  349. -webkit-filter: grayscale(0);
  350. -webkit-transition: all 0.2s ease-in-out;
  351. -moz-transition: all 0.2s ease-in-out;
  352. -o-transition: all 0.2s ease-in-out;
  353. }
  354. {/block:IfMonochromeImages}
  355.  
  356. blockquote {
  357. padding:.25em 0 .25em 15px;
  358. margin:.5em 0;
  359. border-left:1px solid {color:Borders};
  360. }
  361.  
  362. pre {
  363. padding:0;
  364. margin:0;
  365. line-height:inherit!important;
  366. background:transparent;
  367. font-family:inherit!Important;
  368. font-size:inherit!important;
  369. white-space:pre-wrap;
  370. white-space:-moz-pre-wrap;
  371. white-space:-pre-wrap;
  372. white-space:-o-pre-wrap;
  373. word-wrap:break-word;
  374. }
  375.  
  376. /* Fix */
  377.  
  378. iframe, img, embed, object, video {
  379. max-width: 100%;
  380. border: none;
  381. }
  382.  
  383. input, textarea, select, a { outline: none; }
  384.  
  385. /* Headings */
  386.  
  387. h1, h2, h3, h4 {
  388. margin:1.5em 0;
  389. font-size:1.5em;
  390. padding:0;
  391. color:{color:title};
  392. font-weight:bold;
  393. }
  394.  
  395. .entry h1:first-child, .entry h2:first-child, .entry h3:first-child, .entry h4:first-child {margin-top:0;}
  396.  
  397. /* Paragraph */
  398.  
  399. p { margin:5px 0px;}
  400.  
  401. p:first-of-type { margin-top:0;}
  402.  
  403. p:last-of-type { margin-bottom:0;}
  404.  
  405. small, big, sub, pre {
  406. font-size:1em!important;
  407. line-height:1.4em!important;
  408. vertical-align:baseline!important;
  409. }
  410.  
  411. /* Bold and italic */
  412.  
  413. b, strong, b a, strong a {
  414. font-weight:bold!important;
  415. color: {color:Bold};
  416. }
  417.  
  418. i, em {
  419. color: {color:Italic};
  420. }
  421.  
  422. /* Links */
  423.  
  424. a {
  425. color:{color:Link};
  426. text-decoration:none;
  427. transition:all .3s linear;
  428. -webkit-transition:all .3s linear;
  429. -o-transition:all .3s linear;
  430. -moz-transition:all .3s linear;
  431. }
  432.  
  433. a, a img {cursor:pointer;}
  434.  
  435. a:hover {
  436. color:{color:Hover}!important;
  437. text-decoration:none;
  438. }
  439.  
  440. ul, ol, li {
  441. margin: 5px 10px;
  442. padding: 0px;
  443. }
  444.  
  445. /* Line break */
  446.  
  447. hr {
  448. border:none;
  449. box-shadow:0;
  450. margin:2em auto;
  451. width:75px;
  452. border-top:1px solid {color:Borders};
  453. }
  454.  
  455. /* ------------------------------- CONTAINER ----------------------------- */
  456.  
  457. #container{
  458. position:relative;
  459. margin:auto;
  460. margin-top:70px;
  461. width:878px;
  462. }
  463.  
  464. #bats {
  465. position:fixed;
  466. left:10px;
  467. top:10px;
  468. z-index:1;
  469. {block:ifWhiteHalloween}
  470. filter:invert(1);
  471. -webkit-filter:invert(1);
  472. -o-filter:invert(1);
  473. -moz-filter:invert(1);
  474. -ms-filter:invert(1);
  475. {/block:ifWhiteHalloween}
  476. }
  477.  
  478. #black-cat {
  479. position:fixed;
  480. right:-50px;
  481. bottom: -20px;
  482. z-index:1;
  483. {block:ifWhiteHalloween}
  484. filter:invert(1);
  485. -webkit-filter:invert(1);
  486. -o-filter:invert(1);
  487. -moz-filter:invert(1);
  488. -ms-filter:invert(1);
  489. {/block:ifWhiteHalloween}
  490. }
  491.  
  492. /* ------------------------------ HEADER --------------------------------- */
  493.  
  494. #header {
  495. position:relative;
  496. margin-left:0px;
  497. margin-top:90px;
  498. background-color:{color:Header background};
  499. background-size:cover;
  500. border:1px solid {color:Borders};
  501. height:110px;
  502. width:898px;
  503. border-radius:{text:Border radius};
  504. z-index:100;
  505. }
  506.  
  507. /* Blog title */
  508.  
  509. #blogtitle {
  510. position:absolute;
  511. margin:5px 10px;
  512. width:350px;
  513. height:50px;
  514. color:{color:Blog Title};
  515. font-family:{select:Title Font};
  516. font-size:30px;
  517. line-height:50px;
  518. text-align:center;
  519. }
  520.  
  521. #blogtitle:hover {
  522. color:{color:Hover};
  523. }
  524.  
  525. /* Main icons */
  526.  
  527. #icons {
  528. position:absolute;
  529. margin-left:5px;
  530. margin-top:68px;
  531. width:370px;
  532. height:40px;
  533. }
  534.  
  535. #icons i {
  536. color:{color:Main icon};
  537. display:inline-block;
  538. margin:0 10px;
  539. font-size:18px;
  540. }
  541.  
  542. #icons i:hover {
  543. color:{color:Hover};
  544. -webkit-transition: all .7s ease;
  545. -moz-transition: all .7s ease;
  546. -o-transition: all .7s ease;
  547. transition: all .7s ease;
  548. }
  549.  
  550. /* Avatar */
  551.  
  552. .bat {
  553. position:absolute;
  554. width:297px;
  555. height:117px;
  556. margin-top:-80px;
  557. margin-left:300px;
  558. background:url('');
  559. {block:ifShowBat}
  560. background:url('https://i.imgur.com/06QrMiI.png');
  561. {block:ifWhiteHalloween}
  562. background:url('https://i.imgur.com/qn62zd6.png');
  563. {/block:ifWhiteHalloween}
  564. {/block:ifShowBat}
  565. z-index:1;
  566. }
  567.  
  568. #avatar {
  569. position:absolute;
  570. margin-left:375px;
  571. margin-top:-30px;
  572. width:150px;
  573. height:145px;
  574. z-index:10;
  575. }
  576.  
  577. #avatar img {
  578. width:100%;
  579. height:100%;
  580. }
  581.  
  582. .avatarborder {
  583. position:absolute;
  584. width:150px;
  585. height:140px;
  586. margin-top:-145px;
  587. margin-left:0px;
  588. background:url('https://i.imgur.com/NnHUHUM.png');
  589. {block:ifWhiteFrame}
  590. background:url('https://i.imgur.com/RSdolU1.png');
  591. {/block:ifWhiteFrame}
  592. }
  593.  
  594. /* Description */
  595.  
  596. #description {
  597. position:absolute;
  598. margin-top:10px;
  599. margin-left:540px;
  600. width:340px;
  601. height:90px;
  602. padding-right:5px;
  603. color:{color:Description};
  604. font-size: {select:Body font size};
  605. line-height: -moz-calc({select:Body font size} + 5px);
  606. line-height: -webkit-calc({select:Body font size} + 5px);
  607. line-height: -o-calc({select:Body font size} + 5px);
  608. line-height: calc({select:Body font size} + 5px);
  609. text-align:justify;
  610. overflow-y:auto;
  611. }
  612.  
  613. /* Search box */
  614.  
  615. #search {
  616. position:absolute;
  617. margin-left:195px;
  618. margin-top:68px;
  619. width:160px;
  620. }
  621.  
  622. #search i {
  623. position:absolute;
  624. margin-left:140px;
  625. margin-top:-18px;
  626. font-size:12px;
  627. color:{color:Search};
  628. z-index:1000;
  629. }
  630.  
  631. /* -------- MENU ------- */
  632.  
  633. #menu {
  634. position:absolute;
  635. left:50%;
  636. margin-top:-1px;
  637. height:55px;
  638. width:620px;
  639. background-color:{color:Menu background};
  640. background-image:url({image:Menu background});
  641. border:1px solid {color:Borders};
  642. border-bottom-left-radius:50px;
  643. border-bottom-right-radius:50px;
  644. -webkit-transform:translateX(-50%);
  645. -moz-transform:translateX(-50%);
  646. -ms-transform:translateX(-50%);
  647. transform:translateX(-50%);
  648. z-index:100;
  649. }
  650.  
  651. #menu a {
  652. display:inline-block;
  653. margin-left:10px;
  654. margin-top:17px;
  655. padding:2px;
  656. text-align:center;
  657. font-size: {select:Body font size};
  658. color:{color:Main link};
  659. border-bottom: 1px solid transparent;
  660. }
  661.  
  662. #menu a:hover {
  663. color:{color:Hover};
  664. border-bottom: 1px solid {color:Hover};
  665. }
  666.  
  667. /* -------------------------- POSTS AND ENTRIES --------------------------*/
  668.  
  669. section {
  670. margin-top: 90px;
  671. margin-left:auto;
  672. margin-right:auto;
  673. width:calc(({select:Post width}px + 38px) * {select:Number of columns})!important;
  674. max-width:878px !important;
  675. {block:PermalinkPage}
  676. width:540px !important;
  677. {/block:PermalinkPage}
  678. overflow:hidden;
  679. }
  680.  
  681. .entry {
  682. display: inline-block;
  683. float: left;
  684. margin: 18px;
  685. width: {select:Post width}px;
  686. height:auto;
  687. background:rgba({select:Post transparency color}, {select:Transparency});
  688. overflow: hidden;
  689. border: 1px solid {color:Borders};
  690. border-radius:{text:Border radius};
  691. {block:PermalinkPage}
  692. width:500px !important;
  693. {/block:PermalinkPage}
  694. }
  695.  
  696. .entry img { max-width: 100%; }
  697.  
  698. .content {
  699. padding: 10px;
  700. }
  701.  
  702. /* Caption */
  703.  
  704. .comment {
  705. padding:0px 10px;
  706. list-style:none;
  707. }
  708.  
  709. .comment:last-of-type { padding-bottom:0!important;}
  710.  
  711. .user {
  712. display:inline-block;
  713. line-height:1em;
  714. margin-bottom:.75em;
  715. }
  716.  
  717. .captioned .comment:first-of-type { margin-top:2em;}
  718.  
  719. /* -------- POSTS STYLES ------- */
  720.  
  721. /* Titles */
  722.  
  723. .title {
  724. margin:10px;
  725. margin-top:0px;
  726. color:{color:Title};
  727. font-family:{select:Title Font};
  728. font-size:{select:Title font size};
  729. line-height: -moz-calc({select:Title font size} + 3px);
  730. line-height: -webkit-calc({select:Title font size} + 3px);
  731. line-height: -o-calc({select:Title font size} + 3px);
  732. line-height: calc({select:Title font size} + 3px);
  733. }
  734.  
  735. .title a { color:{color:Title}; }
  736.  
  737. .title a:hover { color:{color:L ink}; }
  738.  
  739. .tex li, .tex blockquote {text-align:left; }
  740.  
  741. /* Quote posts */
  742.  
  743. .quote {
  744. margin: 10px;
  745. padding: 5px;
  746. font-family: {select:Title font};
  747. font-size: {select:Title font size};
  748. line-height: -moz-calc({select:Title font size} + 3px);
  749. line-height: -webkit-calc({select:Title font size} + 3px);
  750. line-height: -o-calc({select:Title font size} + 3px);
  751. line-height: calc({select:Title font size} + 3px);
  752. color: {color:Italic};
  753. text-align: left;
  754. letter-spacing: 2px;
  755. }
  756.  
  757. .source {
  758. font-size: 12px;
  759. line-height: 20px;
  760. }
  761.  
  762. /* Link posts */
  763.  
  764. .linkthumb img {
  765. width:100%;
  766. }
  767.  
  768. .linkp {
  769. background: {color:Link post background};
  770. padding:10px;
  771. }
  772.  
  773. .linkp i {
  774. color: {color:Title};
  775. }
  776.  
  777. /* Chat posts */
  778.  
  779. .line {
  780. margin: 5px 10px;
  781. line-height: 18px;
  782. }
  783.  
  784. /* Ask Posts */
  785.  
  786. .asker {
  787. margin: 5px;
  788. margin-top: 10px;
  789. width: -moz-calc(100% - 10px);
  790. width: -webkit-calc(100% - 10px);
  791. width: -o-calc(100% - 10px);
  792. width: calc(100% - 10px);
  793. height: auto;
  794. }
  795.  
  796. .bubble {
  797. width: -moz-calc(100% - 70px);
  798. width: -webkit-calc(100% - 70px);
  799. width: -o-calc(100% - 70px);
  800. width: calc(100% - 70px);
  801. height: auto;
  802. min-height: 35px;
  803. padding: 10px;
  804. line-height: 20px;
  805. background: {color:Ask bubble};
  806. z-index: 10;
  807. }
  808.  
  809. .triangle {
  810. position: absolute;
  811. margin-left: -moz-calc(100% - 90px);
  812. margin-left: -webkit-calc(100% - 90px);
  813. margin-left: -o-calc(100% - 90px);
  814. margin-left: calc(100% - 90px);
  815. width: 0;
  816. z-index:0;
  817. border-left: 8px solid {color:Ask bubble};
  818. border-bottom: 8px solid transparent;
  819. border-top: 8px solid transparent;
  820. }
  821.  
  822. .asker img {
  823. float: right;
  824. margin-right: 0px;
  825. max-width: 30px;
  826. border: 1.5px solid {color:Ask bubble};
  827. border-radius: 2px;
  828. z-index:1000;
  829. opacity:1;
  830. }
  831.  
  832. .answer {
  833. margin: 10px;
  834. margin-bottom: 0;
  835. }
  836.  
  837. /* ----------------------- POST INFO ----------------------------- */
  838.  
  839. .topinfo {
  840. margin:0px;
  841. width: -moz-calc(100% - 30px);
  842. width: -webkit-calc(100% - 30px);
  843. width: -o-calc(100% - 30px);
  844. width: calc(100% - 30px);
  845. height: 10px;
  846. padding: 15px;
  847. line-height: 15px;
  848. background:rgba({select:Post info transparency color}, {select:Transparency});
  849. }
  850.  
  851. .topinfourl {
  852. margin:0;
  853. font-size: 12px;
  854. }
  855.  
  856. /* Date */
  857.  
  858. .topinfod {
  859. float: right;
  860. margin-top:-15px;
  861. font-size:12px;
  862. }
  863.  
  864. /* Bottom info */
  865.  
  866. .botinfo {
  867. width: -moz-calc(100% - 30px);
  868. width: -webkit-calc(100% - 30px);
  869. width: -o-calc(100% - 30px);
  870. width: calc(100% - 30px);
  871. height:auto;
  872. min-height: 50px;
  873. margin: 0px;
  874. padding: 15px;
  875. padding-top: 10px;
  876. padding-bottom: 10px;
  877. font-size: 12px;
  878. line-height: 25px;
  879. color: {color:Text};
  880. background:rgba({select:Post info transparency color}, {select:Transparency});
  881. overflow:hidden;
  882. }
  883.  
  884. .botinfo a {
  885. margin-right: 25px;
  886. color: {color:Link};
  887. }
  888.  
  889. .tags {
  890. {block:IndexPage}
  891. {block:ifNotShowTags}
  892. display: none;
  893. {/block:ifNotShowTags}
  894. {/block:IndexPage}
  895. }
  896.  
  897. .notec {
  898. float: left;
  899. }
  900.  
  901. /* Butttons */
  902.  
  903. .buttons {
  904. float:right;
  905. margin-top:0px;
  906. margin-right:-5px;
  907. width:77px;
  908. height:26px;
  909. line-height:26px;
  910. z-index:100;
  911. list-style:none;
  912. {block:ifDisqusShortname}
  913. width: 103px;
  914. {/block:ifDisqusShortname}
  915. {block:PermalinkPage}
  916. width:52px;
  917. {/block:PermalinkPage}
  918. }
  919.  
  920. .buttons li {
  921. display:inline-block;
  922. margin:0;
  923. margin-left:2px;
  924. margin-right:0;
  925. width:20px;
  926. height:26px;
  927. padding:0px;
  928. text-align:center;
  929. }
  930.  
  931. .perma i {
  932. font-size:13px;
  933. color:{color:Buttons};
  934. }
  935.  
  936. .cmnt i {
  937. font-size:15px;
  938. color:{color:Buttons};
  939. }
  940.  
  941. .reblog i {
  942. font-size:17px;
  943. color:{color:Buttons};
  944. }
  945.  
  946. .like .like_button {
  947. position:absolute;
  948. width:100%;
  949. height:100%;
  950. }
  951.  
  952. .like .like_button iframe {
  953. position:absolute;
  954. top:0;
  955. bottom:0;
  956. left:0;
  957. right:0;
  958. width:100%;
  959. height:100%;
  960. z-index:10;
  961. opacity:0.0000001;
  962. }
  963.  
  964. .like i {
  965. font-size:15px;
  966. color:{color:Buttons};
  967. }
  968.  
  969. .like .liked + i {
  970. font-size:14px;
  971. color:#D95E40;
  972. }
  973.  
  974.  
  975. /* Permalink pagination */
  976.  
  977. .permapag {
  978. margin-top: 15px;
  979. margin-left: 0px;
  980. }
  981.  
  982. .permapag a{
  983. font-size: 15px;
  984. margin:10px;
  985. margin-top: 20px;
  986. padding:5px;
  987. color:{color:Link};
  988. }
  989.  
  990. /* Show/hide */
  991.  
  992. .clickme {
  993. margin: 10px;
  994. width: 130px;
  995. color: {color:Link};
  996. text-align: left;
  997. cursor: pointer;
  998. padding: 5px 10px;
  999. border-bottom: 1.5px solid {color:Borders};
  1000. }
  1001.  
  1002. .clickme:hover {
  1003. color: {color:Hover};
  1004. background:rgba({select:Post info transparency color}, {select:Transparency});
  1005. }
  1006.  
  1007. /* Post notes */
  1008.  
  1009. #notes {
  1010. margin: 10px;
  1011. width: 500px;
  1012. font-size: 12px;
  1013. color: {color:Text};
  1014. display:none;
  1015. }
  1016.  
  1017. ol.notes {
  1018. padding: 0px;
  1019. margin: 5px 0px;
  1020. list-style-type: none;
  1021. }
  1022.  
  1023. ol.notes li.note {
  1024. padding: 5px;
  1025. }
  1026.  
  1027. ol.notes li.note img.avatar {
  1028. float:left;
  1029. vertical-align: -5px;
  1030. width: 15px;
  1031. height: 15px;
  1032. margin-left:10px;
  1033. margin-right:10px;
  1034. }
  1035.  
  1036. li.more_notes_link_container {
  1037. text-transform: uppercase;
  1038. font-size: 12px;
  1039. }
  1040.  
  1041. /* Disqus box */
  1042.  
  1043. #disqusbox {
  1044. padding:15px;
  1045. }
  1046.  
  1047. /* ------------------- PAGINATION AND INFINITE SCROLL -------------------- */
  1048.  
  1049. #pagcon {
  1050. margin:25px auto;
  1051. width:calc({select:Post width}px + 40px)!important;
  1052. height:60px;
  1053. text-align: center;
  1054. z-index:100;
  1055. }
  1056.  
  1057. /* Pagination */
  1058.  
  1059. #pagination {
  1060. width: 100%;
  1061. height: 35px;
  1062. z-index:10000;
  1063. {block:ifInfiniteScroll}
  1064. display: none;
  1065. {/block:ifInfiniteScroll}
  1066. }
  1067.  
  1068. .previous, .next, .load-more {
  1069. display:inline;
  1070. margin-left:10px;
  1071. width:100px;
  1072. height:20px;
  1073. padding:8px 10px;
  1074. line-height:20px;
  1075. font-size:12px;
  1076. text-align:center;
  1077. color:{color:Pagination};
  1078. background:{color:Borders};
  1079. border:1px solid {color:Borders};
  1080. -webkit-transition: all .3s ease;
  1081. -moz-transition: all .3s ease;
  1082. -o-transition: all .3s ease;
  1083. transition: all .3s ease;
  1084. }
  1085.  
  1086. .previous a:hover, .next a:hover, .load-more a:hover {
  1087. color:{color:Pagination};
  1088. }
  1089.  
  1090. .previous i, .next i, .load-more i {
  1091. color:{color:Pagination};
  1092. font-size:15px;
  1093. margin-left:10px;
  1094. text-decoration:none;
  1095. }
  1096.  
  1097. .previous:hover i, .next:hover i, .load-more:hover i {
  1098. color:{color:Hover};
  1099. }
  1100.  
  1101.  
  1102. /* INFINITE SCROLL */
  1103.  
  1104. #infscr-loading {
  1105. display:none!important;
  1106. }
  1107.  
  1108. #iscon {
  1109. width:500px;
  1110. height:40px;
  1111. z-index:100;
  1112. }
  1113.  
  1114. {block:ifLoadMore}
  1115. .load-more{
  1116. height:40px;
  1117. }
  1118. {/block:ifLoadMore}
  1119.  
  1120. /*-- CREDIT --*/
  1121.  
  1122. #credit {
  1123. position:fixed;
  1124. top: 9px;
  1125. right: 10px;
  1126. width:25px;
  1127. height:25px;
  1128. z-index: 100000;
  1129. }
  1130.  
  1131. #credit img {
  1132. border: 1px solid {color:Borders};
  1133. }
  1134.  
  1135. #credit img:hover {
  1136. border: 1px solid {color:Hover};
  1137. }
  1138.  
  1139. {CustomCSS}
  1140.  
  1141. </style>
  1142.  
  1143. </head>
  1144.  
  1145. <body>
  1146.  
  1147. <div id="container">
  1148.  
  1149. <div id="header">
  1150.  
  1151. <div class="bat"></div>
  1152. <!-- End bat -->
  1153.  
  1154. <div id="blogtitle">{Title}</div>
  1155. <!-- End blogtitle -->
  1156.  
  1157. <div id="icons">
  1158. <a href="/" title="Index"><i class="fas fa-broom"></i></a>
  1159. {block:ifAskEnabled}
  1160. <a href="/ask" title="Ask"><i class="fas fa-ghost"></i></a>
  1161. {/block:ifAskEnabled}
  1162. {block:IfSubmissionsEnabled}
  1163. <a href="/submit" title="Submit"><i class="fas fa-cat"></i></a>
  1164. {/block:IfSubmissionsEnabled}
  1165. {block:IfShowArchive}
  1166. <a href="/archive" title="Archive"><i class="fas fa-spider"></i></a>
  1167. {/block:IfShowArchive}
  1168. </div>
  1169. <!--End icons-->
  1170.  
  1171. {block:IfShowSearchBox}
  1172. <div id="search">
  1173. <form action="/search" method="get">
  1174. <input type="text" name="q" value="Search..." style="margin-top:0px; margin-left:0px; width:150px; padding-left:10px; height:22px; background:transparent; border:1px solid {color:Borders}; border-radius:{text:Border radius}; color:{color:Search}; font-family:{font:Body font}; font-size: 12px;"/><span><i class="fa fa-search"></i></span></form>
  1175. </div>
  1176. <!-- End search-->
  1177. {/block:IfShowSearchBox}
  1178.  
  1179. <div id="avatar">
  1180. <img src="{image:Avatar}">
  1181. <div class="avatarborder"></div>
  1182. </div>
  1183. <!-- End avatar -->
  1184.  
  1185. <div id="description">{Description}</div>
  1186. <!-- End description -->
  1187.  
  1188. </div>
  1189. <!-- End header -->
  1190.  
  1191. <div id="menu">
  1192. <center>
  1193. {block:ifShowLinkOne}
  1194. <a href="{text:Link One url}">{text:Link One}</a>
  1195. {/block:ifShowLinkOne}
  1196. {block:ifShowLinkTwo}
  1197. <a href="{text:Link Two url}">{text:Link Two}</a>
  1198. {/block:ifShowLinkTwo}
  1199. {block:ifShowLinkThree}
  1200. <a href="{text:Link Three url}">{text:Link Three}</a>
  1201. {/block:ifShowLinkThree}
  1202. {block:ifShowLinkFour}
  1203. <a href="{text:Link Four url}">{text:Link Four}</a>
  1204. {/block:ifShowLinkFour}
  1205. {block:ifShowLinkFive}
  1206. <a href="{text:Link Five url}">{text:Link Five}</a>
  1207. {/block:ifShowLinkFive}
  1208. </center>
  1209. </div>
  1210. <!-- End menu-->
  1211.  
  1212. <!-- Posts -->
  1213. <section id="posts">
  1214.  
  1215. {block:posts}
  1216.  
  1217. <article class="entry {block:Caption}captioned{/block:Caption}">
  1218.  
  1219. {block:Date}
  1220.  
  1221. <div class="topinfo">
  1222.  
  1223. <div class="topinfourl">
  1224. {block:RebloggedFrom}
  1225. <a href="/"> {text:Blog alias}</a>
  1226. <i class="fa fa-retweet" aria-hidden="true"></i>
  1227. <a href="{ReblogParentURL}" target="_blank"> {ReblogParentName}</a>
  1228. {/block:RebloggedFrom}
  1229.  
  1230. {block:NotReblog}
  1231. <a href="/">{text:Blog alias}</a>
  1232. {/block:NotReblog}
  1233. </div>
  1234. <!-- End topinfourl-->
  1235.  
  1236. <div class="topinfod"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"> {ShortMonth} {DayOfMonthWithZero} </a></div>
  1237.  
  1238. </div>
  1239. <!-- End topinfo-->
  1240.  
  1241. {/block:Date}
  1242.  
  1243. <!-- Text post -->
  1244. {block:Text}
  1245. <div class="content">
  1246. {block:Title}
  1247. <div class="title">{Title}</div>{/block:Title}
  1248. {block:RebloggedFrom}
  1249. {block:Reblogs}
  1250. <li class="comment {block:Title}{/block:Title}">
  1251. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1252. <div class="tex">{body}</div>
  1253. </li>
  1254. {/block:Reblogs}
  1255. {/block:RebloggedFrom}
  1256. {block:NotReblog}
  1257. <li class="comment {block:Title}{/block:Title}">
  1258. <div class="tex">{body}</div>
  1259. </li>
  1260. {/block:NotReblog}
  1261. </div>
  1262. <!-- End content -->
  1263. {/block:Text}
  1264.  
  1265. <!-- Photo post -->
  1266. {block:Photo}
  1267. {block:IndexPage}
  1268. {LinkOpenTag}
  1269. <img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="{select:Post width}px"/></a>
  1270. {LinkCloseTag}
  1271. {/block:IndexPage}
  1272. {block:PermalinkPage}
  1273. {LinkOpenTag}
  1274. <img src="{photoURL-HighRes}" alt="{PhotoAlt}" width="500px"/></a>
  1275. {LinkCloseTag}
  1276. {/block:PermalinkPage}
  1277. {/block:Photo}
  1278.  
  1279. <!-- Photoset post -->
  1280. {block:Photoset}
  1281. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1282. {/block:Photoset}
  1283.  
  1284. <!-- Quote post -->
  1285. {block:Quote}
  1286. <div class="content">
  1287. <div class="quote">
  1288. "{Quote}"
  1289. </div>
  1290. <!-- End quote-->
  1291. <div class="source">
  1292. — {Source}
  1293. </div>
  1294. <!-- End source-->
  1295. </div>
  1296. <!-- End content -->
  1297. {/block:Quote}
  1298.  
  1299. <!-- Link post -->
  1300. {block:Link}
  1301. {block:Thumbnail}
  1302. <div class="linkthumb">
  1303. <img src="{Thumbnail}" alt="{Name}">
  1304. </div>
  1305. <!-- End linkthumb-->
  1306. {/block:Thumbnail}
  1307. <div class="linkp">
  1308. <a href="{URL}"><h1>{Name} <i class="fa fa-angle-right" aria-hidden="true"></i></h1></a>
  1309. {block:Description}
  1310. {Description}
  1311. {/block:Description}
  1312. </div>
  1313. <!-- End linkp-->
  1314. {/block:Link}
  1315.  
  1316. <!-- Chat post -->
  1317. {block:Chat}
  1318. <div class="content">
  1319. {block:Title}<h1>{Title}</h1>{/block:Title}
  1320. {block:Lines}
  1321. <div class="line">
  1322. {block:Label}<b>{Label}</b>{/block:Label} {Line}
  1323. </div>
  1324. <!-- End line-->
  1325. {/block:Lines}
  1326. </div>
  1327. <!-- End content -->
  1328. {/block:Chat}
  1329.  
  1330. <!-- Audio post -->
  1331. {block:Audio}
  1332. <div style="height: 85px">{AudioEmbed-640}</div>
  1333. {/block:Audio}
  1334.  
  1335. <!-- Video post -->
  1336. {block:Video}
  1337. {Video-500}
  1338. {/block:Video}
  1339.  
  1340. <!-- Ask post -->
  1341. {block:Answer}
  1342. <div class="content">
  1343. <div class="asker">
  1344. <img src="{AskerPortraitURL-48}">
  1345. <div class="bubble" style="border-color: {color:Ask bubble}; background: {color:Ask bubble};">
  1346. <div class="triangle"></div>
  1347. {Asker}:
  1348. <br>{Question}
  1349. </div>
  1350. <!-- End bubble-->
  1351. </div>
  1352. <!-- End asker -->
  1353. <div class="answer">
  1354. {Answer}
  1355. </div>
  1356. <!-- End answer -->
  1357. </div>
  1358. <!-- End content -->
  1359. {/block:Answer}
  1360.  
  1361. <!-- Caption -->
  1362. {block:Caption}
  1363. {block:Reblogs}
  1364. <li class="comment">
  1365. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} } class="user" target="_blank">{Username}</a>
  1366. <div class="tex">{Body}</div>
  1367. </li>
  1368. {/block:Reblogs}
  1369. {block:NotReblog}
  1370. <li class="comment">
  1371. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Name}</a>
  1372. <div class="tex">{caption}</div>
  1373. </li>
  1374. {/block:NotReblog}
  1375. {/block:Caption}
  1376.  
  1377.  
  1378. {block:Date}
  1379.  
  1380. <div class="botinfo">
  1381.  
  1382. {block:RebloggedFrom}
  1383. {block:ContentSource}
  1384. Source: <a href="{ReblogRootURL}" target="_blank"> {ReblogRootName}</a><br>
  1385. {/block:ContentSource}
  1386. {/block:RebloggedFrom}
  1387.  
  1388. {block:HasTags}
  1389. <div class="tags">
  1390. {block:Tags}
  1391. <a href="{TagURL}">
  1392. #{Tag}</a> &nbsp;
  1393. {/block:Tags}<br>
  1394. </div>
  1395. {/block:HasTags}
  1396.  
  1397. {block:NoteCount}
  1398. <a href="{Permalink}"> {NoteCountWithLabel}</a>
  1399. {/block:NoteCount}
  1400.  
  1401. <div class="buttons">
  1402.  
  1403. {block:IndexPage}
  1404. <li class="perma"><a href="{Permalink}"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li>
  1405.  
  1406. {block:ifDisqusShortname}
  1407. <li class="cmnt"><a href="{Permalink}#disqus_thread"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
  1408. {/block:ifDisqusShortname}
  1409. {/block:IndexPage}
  1410.  
  1411. <li class="reblog"><a href="{ReblogURL}"><i class="fa fa-retweet" aria-hidden="true"></i></a></li>
  1412.  
  1413. <li class="like">{LikeButton}<i class="fa fa-heart" aria-hidden="true"></i></a>
  1414.  
  1415. </div>
  1416. <!-- End buttons -->
  1417.  
  1418. </div>
  1419. <!-- End botinfo-->
  1420.  
  1421. <!--Permalink page-->
  1422. {block:PermalinkPage}
  1423.  
  1424. {block:PostNotes}
  1425.  
  1426. <div class="clickme">Show/hide post notes</div>
  1427.  
  1428. <div id="notes">
  1429. {PostNotes}
  1430. </div>
  1431. <!-- End notes-->
  1432. {/block:PostNotes}
  1433.  
  1434. {block:PermalinkPagination}
  1435. <div class="permapag">
  1436. <center>
  1437. {block:PreviousPost}
  1438. <a href="{PreviousPost}"><i class="fa fa-caret-left" aria-hidden="true"></i> Prev post</a>
  1439. {/block:PreviousPost}
  1440.  
  1441. {block:NextPost}
  1442. <a href="{NextPost}"> Next post <i class="fa fa-caret-right" aria-hidden="true"></i></a>
  1443. {/block:NextPost}
  1444. </center>
  1445. </div><br>
  1446. {/block:PermalinkPagination}
  1447.  
  1448. {block:ifDisqusShortname}
  1449. <div id="disqusbox">
  1450.  
  1451. <div id="disqus_thread"></div>
  1452. <script type="text/javascript">
  1453. /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  1454. var disqus_shortname = '{text:Disqus Shortname}'; // Required - Enter shortname in Tumblr Theme Options
  1455. var disqus_url = '{Permalink}';
  1456.  
  1457. /* * * DON'T EDIT BELOW THIS LINE * * */
  1458. (function() {
  1459. var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  1460. dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  1461. (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  1462. })();
  1463. </script>
  1464. <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  1465. <a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  1466.  
  1467. </div>
  1468. <!-- End disqus box-->
  1469. {/block:ifDisqusShortname}
  1470.  
  1471. {/block:PermalinkPage}
  1472.  
  1473. {/block:Date}
  1474.  
  1475. </article>
  1476.  
  1477. {/block:Posts}
  1478.  
  1479. </section>
  1480.  
  1481.  
  1482. {block:Pagination}
  1483.  
  1484. <div id="pagcon">
  1485.  
  1486. <div id="pagination">
  1487. {block:PreviousPage}
  1488. <a class="previous" href="{PreviousPage}"><i class="fa fa-caret-left" aria-hidden="true"></i> NEWER </a>
  1489. {/block:PreviousPage}
  1490.  
  1491. {block:NextPage}
  1492. <a class="next" href="{NextPage}"> OLDER <i class="fa fa-caret-right" aria-hidden="true"></i></a>
  1493. {/block:NextPage}
  1494. </div>
  1495. <!-- End pagination -->
  1496.  
  1497. <div id="iscon">
  1498. {block:ifLoadMore}
  1499. <center>
  1500. <a href="#" class="load-more"> LOAD MORE <i class="fa fa-caret-down" aria-hidden="true"></i></a>
  1501. </center>
  1502. {/block:ifLoadMore}
  1503. </div>
  1504. <!-- End iscon -->
  1505.  
  1506. </div>
  1507. <!-- End pagcon -->
  1508.  
  1509. {/block:Pagination}
  1510.  
  1511.  
  1512. <!-------------------------------- SCRIPTS -------------------------------->
  1513.  
  1514. <!--Custom cursor -->
  1515. {block:IfShowCustomCursor}
  1516. <style type="text/css">
  1517. body, a:hover {cursor: url(https://cur.cursors-4u.net/food/foo-5/foo439.cur), progress !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/11/04/pumpkin-2.html" target="_blank" title="Pumpkin"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Pumpkin" style="position:absolute; top: 0px; right: 0px;" /></a></style>
  1518. {/block:IfShowCustomCursor}
  1519.  
  1520. <!--Bats on the left -->
  1521. {block:IfShowBats}
  1522. <div id="bats">
  1523. <img src="https://i.imgur.com/IYsO8JN.png">
  1524. </div>
  1525. {/block:IfShowBats}
  1526.  
  1527. <!--Cat on the right -->
  1528. {block:IfShowBlackCat}
  1529. <div id="black-cat">
  1530. <img src="https://i.imgur.com/FVfvFE9.png">
  1531. </div>
  1532. {/block:IfShowBlackCat}
  1533.  
  1534. <!--Google fonts -->
  1535.  
  1536. <link href="https://fonts.googleapis.com/css?family=Cinzel|Mystery+Quest|New+Rocker|Trade+Winds|Voltaire" rel="stylesheet">
  1537.  
  1538. <!-- Font awesome -->
  1539.  
  1540. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  1541. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  1542.  
  1543. <!-- PXU photoset & responsive photosets -->
  1544.  
  1545. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1546. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1547. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  1548.  
  1549. {block:IndexPage}
  1550.  
  1551. <script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  1552.  
  1553. {block:ifInfiniteScroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1554. {/block:ifInfiniteScroll}{/block:IndexPage}
  1555.  
  1556. <script>
  1557. $(document).ready(function(){
  1558. $('.photo-slideshow').pxuPhotoset({
  1559. lightbox: true,
  1560. rounded: false,
  1561. gutter: '1px',
  1562. photoset: '.photo-slideshow',
  1563. photoWrap: '.photo-data',
  1564. photo: '.pxu-photo'
  1565. });
  1566. {block:IndexPage}
  1567. var $container = $('section');
  1568. $container.masonry({ itemSelector: 'article' });
  1569. $container.imagesLoaded(function(){
  1570. $container.masonry();
  1571. $container.find('article').animate({ opacity: 1, zIndex: 1 });
  1572. });
  1573. {block:ifInfiniteScroll}
  1574. $container.infinitescroll({
  1575. itemSelector: 'article',
  1576. navSelector: '.pagination',
  1577. nextSelector: '.next',
  1578. loadingImg: '',
  1579. loadingText: '<em></em>',
  1580. bufferPx: 2000
  1581. },
  1582. function( newElements ) {
  1583. var $newElems = $( newElements );
  1584. $newElems.find('.photo-slideshow').pxuPhotoset({
  1585. lightbox: true,
  1586. rounded: false,
  1587. gutter: '1px',
  1588. photoset: '.photo-slideshow',
  1589. photoWrap: '.photo-data',
  1590. photo: '.pxu-photo'
  1591. },
  1592. function(){
  1593. $container.masonry();
  1594. });
  1595. $newElems.imagesLoaded(function(){
  1596. $container.masonry( 'appended', $newElems );
  1597. $newElems.animate({ opacity: 1, zIndex: 1 });
  1598. });
  1599. });
  1600. {/block:ifInfiniteScroll}
  1601. $container.infinitescroll({
  1602. itemSelector: "article",
  1603. navSelector: "#pagination",
  1604. nextSelector: ".next",
  1605. loadingImg: "",
  1606. loadingText: "<em></em>",
  1607. bufferPx: 10000,
  1608. extraScrollPx: 12000,
  1609. errorCallback: function() {
  1610. $('.load-more').fadeOut();
  1611. }
  1612. }, function(newElements) {
  1613. var $newElems = $(newElements).css({
  1614. opacity: 0
  1615. });
  1616. $newElems.imagesLoaded(function() {
  1617. $newElems.animate({
  1618. opacity: 1
  1619. });
  1620. $container.masonry('appended', $newElems,
  1621. true);
  1622. });
  1623. });
  1624. {block:ifLoadMore}
  1625. $(window).unbind('.infscr');
  1626. $('.load-more').click(function() {
  1627. $container.infinitescroll('retrieve');
  1628. return false
  1629. });
  1630. {/block:ifLoadMore}
  1631. {/block:IndexPage}
  1632. });
  1633. </script>
  1634.  
  1635. <!-- Sticky menu -->
  1636. {block:IndexPage}
  1637. <script type="text/javascript">
  1638. $(function(){
  1639. var stickyRibbonTop = $('#menu').offset().top;
  1640. $(window).scroll(function(){
  1641. if( $(window).scrollTop() > stickyRibbonTop ) {
  1642. $('#menu').css({position: 'fixed', top: '0px', marginTop: 'auto'});
  1643. } else {
  1644. $('#menu').css({position: 'absolute', top: 'auto', marginTop: '-1px'});
  1645. }
  1646. });
  1647. });
  1648. </script>
  1649. {/block:IndexPage}
  1650.  
  1651. <!-- Show/Hide tumblr notes -->
  1652. <script>
  1653. $(document).ready(function(){
  1654. $(".clickme").click(function(){
  1655. $("#notes").toggle(500);
  1656. });
  1657. });
  1658. </script>
  1659.  
  1660. <!-- CREDIT (do not remove) -->
  1661.  
  1662. <div id="credit"><a href="https://borntobewildcodes.tumblr.com" title="theme HALLOWEEN II by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  1663.  
  1664. {block:ContentSource}
  1665. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1666. width="{LogoWidth}" height= "{LogoHeight}" alt="{SourceTitle}" />
  1667. {/block:SourceLogo}
  1668. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1669. {/block:ContentSource}
  1670. </body>
  1671. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement