API tools faq
paste
uchihaclan

staycation

uchihaclan
Oct 1st, 2021 (edited)
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <!--
  3. staycation theme by @sadthemes
  4.  
  5. -round border doesn't work with rainbow borders
  6. -header image can be any size customize in text options
  7.  
  8. install google fonts
  9. https://fonts.google.com/
  10.  
  11. script credits
  12. masonry
  13. https://infinite-scroll.com/demo/masonry/
  14.  
  15. NPF image fix
  16. https://glenthemes.tumblr.com/post/638038350689976320/npf-mobile-photoset-fix-by-glenthemes-new
  17.  
  18. photosets
  19. https://annasthms.github.io/photosets/
  20. -->
  21. <html>
  22.  
  23.  
  24. <title>{Title}</title>
  25. <link rel="icon" href="{image:FavIcon}" type="image/gif" >
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27. {block:Description}
  28. <meta name="description" content="{MetaDescription}" />
  29. {/block:Description}
  30.  
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  32. <!--
  33. NPF IMAGES READJUSTMENT | @glenthemes
  34. v2.0 [last updated: 2021-06-03]
  35. -->
  36. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  37. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  38.  
  39. <style type="text/css">
  40. :root {
  41. --NPF-Image-Spacing:0px;
  42. --NPF-Bottom-Gap-From-Captions:0;
  43. }
  44. </style>
  45.  
  46. <!-- insert google fonts here type font-family in font options -->
  47. <link rel="preconnect" href="https://fonts.googleapis.com">
  48. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  49. <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  50. <!-- google fonts end -->
  51.  
  52. <!-- upload your own fonts on dropbox -->
  53. <style type="text/css">
  54. @font-face {font-family:"pokemon"; src: url("https://dl.dropboxusercontent.com/s/d9hz0y1y7o8xgbk/Pokemon%20GB.ttf?dl=0")}
  55. </style>
  56.  
  57. <meta name="image:favicon" content=""/>
  58. <meta name="image:icon" content="https://i.imgur.com/pdFRbxx.png"/>
  59. <meta name="image:bg" content=""/>
  60. <meta name="image:cursor" content="https://i.imgur.com/fAJFarU.gif"/>
  61.  
  62. <meta name="color:bg" content="#eee">
  63. <meta name="color:posts" content="#fff">
  64. <meta name="color:post shadow" content="#ccc">
  65. <meta name="color:font" content="#000">
  66. <meta name="color:glow outline txt" content="#ff0000">
  67. <meta name="color:links" content="#ff0000">
  68. <meta name="color:links glow outline" content="#000">
  69. <meta name="color:underline of link" content="#000">
  70. <meta name="color:links hover" content="#000">
  71. <meta name="color:link hover glow outline" content="#ff0000">
  72. <meta name="color:title color" content="#000">
  73. <meta name="color:title glow outline" content="#ff0000">
  74. <meta name="color:underline of title" content="#ff0000">
  75. <meta name="color:info bg" content="#fff">
  76. <meta name="color:info shadow" content="#ccc">
  77. <meta name="color:desc txt" content="#000">
  78. <meta name="color:desc glow outline" content="#ff0000">
  79. <meta name="color:info links" content="#000">
  80. <meta name="color:underline of info link" content="#ff0000">
  81. <meta name="color:info link glow outline" content="#ff0000">
  82. <meta name="color:tooltip txt" content="#fff">
  83. <meta name="color:tooltip bg" content="#000">
  84. <meta name="color:tooltip glow outline" content="#000">
  85. <meta name="color:select bg" content="#000">
  86. <meta name="color:select txt" content="#ff0000">
  87. <meta name="color:info border" content="#000">
  88. <meta name="color:post border" content="#000">
  89.  
  90. <meta name="select:info border" content="solid"/>
  91. <meta name="select:info border" content="dashed"/>
  92. <meta name="select:info border" content="dotted"/>
  93. <meta name="select:info border" content="double"/>
  94. <meta name="select:info border" content="inset"/>
  95. <meta name="select:info border" content="outset"/>
  96. <meta name="select:info border" content="ridge"/>
  97. <meta name="select:info border" content="groove"/>
  98.  
  99. <meta name="select:info border size" content="0"/>
  100. <meta name="select:info border size" content="1"/>
  101. <meta name="select:info border size" content="2"/>
  102. <meta name="select:info border size" content="3"/>
  103. <meta name="select:info border size" content="4"/>
  104. <meta name="select:info border size" content="5"/>
  105.  
  106. <meta name="select:post border" content="solid"/>
  107. <meta name="select:post border" content="dashed"/>
  108. <meta name="select:post border" content="dotted"/>
  109. <meta name="select:post border" content="double"/>
  110. <meta name="select:post border" content="inset"/>
  111. <meta name="select:post border" content="outset"/>
  112. <meta name="select:post border" content="ridge"/>
  113. <meta name="select:post border" content="groove"/>
  114.  
  115. <meta name="select:post border size" content="0"/>
  116. <meta name="select:post border size" content="1"/>
  117. <meta name="select:post border size" content="2"/>
  118. <meta name="select:post border size" content="3"/>
  119. <meta name="select:post border size" content="4"/>
  120. <meta name="select:post border size" content="5"/>
  121.  
  122. <meta name="if:cover background" content="0" />
  123. <meta name="if:2 columns" content="0" />
  124. <meta name="if:4 columns" content="0" />
  125. <meta name="if:transparent info" content="0" />
  126. <meta name="if:circle header" content="0" />
  127. <meta name="if:shadow" content="0" />
  128. <meta name="if:round border" content="0" />
  129. <meta name="if:rainbow border 1" content="0" />
  130. <meta name="if:rainbow border 2" content="0" />
  131. <meta name="if:hide title" content="0" />
  132. <meta name="if:hide desc" content="0" />
  133. <meta name="if:hide links" content="0" />
  134. <meta name="if:hide caption" content="0" />
  135. <meta name="if:hide tags" content="0" />
  136. <meta name="if:outline txt" content="0" />
  137. <meta name="if:glow txt" content="0" />
  138. <meta name="if:custom cursor" content="0" />
  139. <meta name="if:links underline" content="0"/>
  140. <meta name="if:links bold" content="0"/>
  141. <meta name="if:links italic" content="0"/>
  142. <meta name="if:redirect" content="0" />
  143. <meta name="if:extra links" content="0" />
  144.  
  145. <meta name="text:icon size" content="200px">
  146. <meta name="text:font family" content="fira sans">
  147. <meta name="text:font size" content="16px">
  148. <meta name="text:title" content="hi yall!">
  149. <meta name="text:title size" content="22px">
  150. <meta name="text:description" content="simply a description.">
  151. <meta name="text:desc size" content="16px">
  152. <meta name="text:info link size" content="16px">
  153. <meta name="text:link 1" content="1">
  154. <meta name="text:link 1 URL" content="/">
  155. <meta name="text:link 2" content="2">
  156. <meta name="text:link 2 URL" content="/">
  157. <meta name="text:link 3" content="3">
  158. <meta name="text:link 3 URL" content="/">
  159. <meta name="text:link 4" content="4">
  160. <meta name="text:link 4 URL" content="/">
  161. <meta name="text:link 5" content="5">
  162. <meta name="text:link 5 URL" content="/">
  163. <meta name="text:link 6" content="6">
  164. <meta name="text:link 6 URL" content="/">
  165. <meta name="text:redirect link" content="/tagged/0">
  166.  
  167. <head>
  168.  
  169. {block:IfRedirect}
  170. <script>
  171. if(window.location.pathname == '/') location.replace('{text:Redirect Link}');
  172. </script>
  173. {block:IfRedirect}
  174.  
  175. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  176.  
  177.  
  178.  
  179. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  180.  
  181. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  182.  
  183. <script>
  184. (function($){
  185. $(document).ready(function(){
  186. $("[title]").style_my_tooltips();
  187. });
  188. })(jQuery);
  189. </script>
  190.  
  191.  
  192. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  193. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
  194. <script src="//npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  195. <script src="//npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script>
  196. <script src="https://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>
  197.  
  198. <style type="text/css">
  199.  
  200. ::-moz-selection {
  201. background: {color:select bg};
  202. color: {color:select txt};
  203. {block:IfGlowText}
  204. text-shadow: 0 0 1px {color:select txt}, 0 0 3px {color:select txt};
  205. {/block:IfGlowText}
  206. }
  207.  
  208. ::selection {
  209. background: {color:select bg};
  210. color: {color:select txt};
  211. {block:IfGlowText}
  212. text-shadow: 0 0 2px {color:select txt}, 0 0 3px {color:select txt};
  213. {/block:IfGlowText}
  214. }
  215.  
  216.  
  217. ::-webkit-scrollbar{
  218. width: 10px;
  219. height: 10px;
  220. }
  221. ::-webkit-scrollbar-thumb{
  222. background: {color:links};
  223. border: 4px solid {color:bg};
  224. border-radius: 0px;
  225. }
  226. ::-webkit-scrollbar-track{
  227. background:{color:bg};
  228. }
  229.  
  230. {block:IfCustomCursor}
  231. body, *, a, a:hover {cursor:url({image:cursor}), auto;}{/block:IfCustomCursor}
  232. {block:IfNotCustomCursor}
  233. a, a:hover {cursor: help;}
  234. {/block:IfNotCustomCursor}
  235.  
  236. #s-m-t-tooltip {
  237. {block:ifRoundBorder}
  238. border-radius: 5px;
  239. {/block:ifRoundBorder}
  240. z-index: 999999999;
  241. background-color: {color:tooltip bg};
  242. border: 1px {select:border} {color:border};
  243. color: {color:tooltip txt};
  244. font-size: {text:Font Size};
  245. {block:ifOutlineTxt}
  246. text-shadow: -1px 0 {color:tooltip glow outline}, 0 1px {color:tooltip glow outline}, 1px 0 {color:tooltip glow outline}, 0 -1px {color:tooltip glow outline};
  247. {block:ifOutlineTxt}
  248. {block:ifGlowTxt}
  249. text-shadow: 0 0 2px {color:tooltip glow outline}, 0 0 5px {color:tooltip glow outline};
  250. {/block:ifGlowTxt}
  251. text-align: center;
  252. transition: all 0.3s ease-out;
  253. -o-transition: all 0.3s ease-out;
  254. -webkit-transition: all 0.3s ease-out;
  255. -moz-transition: all 0.3s ease-out;
  256. text-transform: normal;
  257. max-width: 300px;
  258. display: block;
  259. word-wrap: break-word;
  260. padding: 3px 5px;
  261. margin: -30px 0px 10px 20px;}
  262.  
  263. p { margin: 0;}
  264. h1 {line-height: 120%;}
  265. h2 {line-height: 120%;}
  266.  
  267. body {
  268. margin: 0;
  269. background: {color:bg} url("{image:bg}") fixed;
  270. {block:IfCoverBackground}
  271. background-image: url("{image:bg}") no-repeat center center fixed;
  272. -webkit-background-size: cover;
  273. -moz-background-size: cover;
  274. -o-background-size: cover;
  275. background-size: cover;
  276. {/block:IfCoverBackground}
  277. font-family: '{text:font family}';
  278. font-size: {text:font size};
  279. color: {color:font};
  280. -webkit-font-smoothing: antialiased;
  281. {block:ifOutlineTxt}
  282. text-shadow: -1px 0 {color:glow outline txt}, 0 1px {color:glow outline txt}, 1px 0 {color:glow outline txt}, 0 -1px {color:glow outline txt};
  283. {block:ifOutlineTxt}
  284. {block:ifGlowTxt}
  285. text-shadow: 0 0 2px {color:glow outline txt}, 0 0 5px {color:glow outline txt};
  286. {/block:ifGlowTxt}
  287. line-height: 120%;
  288. overflow-x: hidden;
  289. }
  290.  
  291. a:link, a:active, a:visited {
  292. color: {color:links};
  293. {block:ifOutlineTxt}
  294. text-shadow: -1px 0 {color:links glow outline}, 0 1px {color:links glow outline}, 1px 0 {color:links glow outline}, 0 -1px {color:links glow outline}; {block:ifOutlineTxt}
  295. {block:ifGlowTxt}
  296. text-shadow: 0 0 2px {color:links glow outline}, 0 0 5px {color:links glow outline};
  297. {/block:ifGlowTxt}
  298. {block:IfLinksBold}
  299. font-weight: 700;{/block:IfLinksBold}
  300. {block:IfLinksItalic}
  301. font-style: italic;{/block:IfLinksItalic}
  302. {block:IfNotLinksUnderline}
  303. text-decoration: none;{/block:IfNotLinksUnderline}
  304. {block:IfLinksUnderline}
  305. text-decoration: none;
  306. line-height: 150%;
  307. border-bottom: 2px solid {color:underline of link};
  308. {/block:IfLinksUnderline}
  309. -webkit-transition: all 0.4s ease-in-out;
  310. -moz-transition: all 0.4s ease-in-out;
  311. -o-transition: all 0.4s ease-in-out;
  312. -ms-transition: all 0.4s ease-in-out;
  313. transition: all 0.4s ease-in-out;}
  314.  
  315. .title a:hover, .linkz a:hover, a:hover {
  316. color: {color:links hover};
  317. {block:IfLinksUnderline}
  318. text-decoration: none;
  319. border-bottom: 2px solid {color:links};
  320. {/block:IfLinksUnderline}
  321. {block:ifOutlineTxt}
  322. text-shadow: -1px 0 {color:link hover glow outline}, 0 1px {color:link hover glow outline}, 1px 0 {color:link hover glow outline}, 0 -1px {color:link hover glow outline};
  323. {block:ifOutlineTxt}
  324. {block:ifGlowTxt}
  325. text-shadow: 0 0 2px {color:link hover glow outline}, 0 0 5px {color:link hover glow outline};
  326. {/block:ifGlowTxt}
  327. -webkit-transition: all 0.4s ease-in-out;
  328. -moz-transition: all 0.4s ease-in-out;
  329. -o-transition: all 0.4s ease-in-out;
  330. -ms-transition: all 0.4s ease-in-out;
  331. transition: all 0.4s ease-in-out;}
  332.  
  333. .linkz a:hover, .title a:hover {
  334. {block:IfLinksUnderline}
  335. color: {color:underline of info link};
  336. text-decoration: none;
  337. border-bottom: 2px solid {color:info links};
  338. {/block:IfLinksUnderline}
  339. }
  340.  
  341. main {
  342. margin: auto;
  343. margin-bottom: 30px;
  344. position: relative;
  345. opacity: 0;
  346. transition: opacity 0.3s;
  347. height: auto;
  348. overflow: hidden;
  349. max-width: 1300px;
  350. padding-left: 60px;
  351. padding-top: 20px;
  352. {block:if2Columns}
  353. max-width: 1100px;
  354. padding-left: 80px;
  355. {/block:if2Columns}
  356. {block:if4Columns}
  357. max-width: 1300px;
  358. padding-left: 40px;
  359. {/block:if4Columns}
  360. }
  361.  
  362. .waga {
  363. width: 100%;
  364. margin: auto;
  365. position: relative;
  366. margin-top: 40px;
  367. }
  368.  
  369. .title {
  370. margin: auto;
  371. font-size: {text:title size};
  372. text-align: center;
  373. margin-bottom: 10px;
  374. line-height: 130%;
  375. max-width: 600px;
  376. }
  377.  
  378. .title a {
  379. color: {color:title color};
  380. {block:ifOutlineTxt}
  381. text-shadow: -1px 0 {color:title glow outline}, 0 1px {color:title glow outline}, 1px 0 {color:title glow outline}, 0 -1px {color:title glow outline};
  382. {block:ifOutlineTxt}
  383. {block:ifGlowTxt}
  384. text-shadow: 0 0 2px {color:title glow outline}, 0 0 5px {color:title glow outline};
  385. {/block:ifGlowTxt}
  386. {block:IfLinksUnderline}
  387. text-decoration: none;
  388. border-bottom: 2px solid {color:underline of title};
  389. {/block:IfLinksUnderline}
  390. }
  391.  
  392. .sb {
  393. {block:ifRoundBorder}
  394. border-radius: 5px;
  395. {/block:ifRoundBorder}
  396. width: calc({text:icon size} + 40px);
  397. background: {color:info bg};
  398. {block:IfTransparentInfo}
  399. background: transparent;
  400. filter: drop-shadow(0px)
  401. {/block:IfTransparentInfo}
  402. {block:ifShadow}
  403. filter: drop-shadow(5px 5px 2px {color:info shadow});
  404. {/block:ifShadow}
  405. {block:IfNotTransparentInfo}
  406. border: {select:info border size}px {select:info border} {color:info border};
  407. {block:ifRainbowBorder1}
  408. border: {select:post border size}px solid transparent;
  409. border-image: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, violet 100%);
  410. border-image-slice: 1;
  411. {/block:ifRainbowBorder1}
  412. {block:ifRainbowBorder2}
  413. border: {select:post border size}px solid transparent;
  414. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  415. border-image-slice: 1;
  416. {/block:ifRainbowBorder2}
  417. {/block:IfNotTransparentInfo}
  418. position: relative;
  419. margin: auto;
  420. text-align: center;
  421. color: {color:desc txt};
  422. font-size: {text:desc size};
  423. {block:ifOutlineTxt}
  424. text-shadow: -1px 0 {color:desc glow outline}, 0 1px {color:desc glow outline}, 1px 0 {color:desc glow outline}, 0 -1px {color:desc glow outline};
  425. {block:ifOutlineTxt}
  426. {block:ifGlowTxt}
  427. text-shadow: 0 0 2px {color:desc glow outline}, 0 0 5px {color:desc glow outline};
  428. {/block:ifGlowTxt}
  429.  
  430. {block:ifCircleHeader}
  431. {block:ifShadow}
  432. filter: drop-shadow(0px 0px 5px {color:info shadow})
  433. drop-shadow(0px 0px 10px {color:info shadow});
  434. {/block:ifShadow}
  435. border-radius: 50%;
  436. position: relative;
  437. top: 0;
  438. -webkit-transition: top ease 0.5s;
  439. -moz-transition: top ease 0.5s;
  440. -o-transition: top ease 0.5s;
  441. -ms-transition: top ease 0.5s;
  442. transition: top ease 0.5s;
  443. {/block:ifCircleHeader}
  444. }
  445. {block:ifCircleHeader}
  446. .sb:hover{
  447.  
  448. top: -10px;
  449. }
  450. {/block:ifCircleHeader}
  451.  
  452.  
  453. .sb img {
  454. {block:ifCircleHeader}
  455. border-radius: 50%;
  456. {/block:ifCircleHeader}
  457. {block:IfTransparentInfo}
  458. padding: 0px;
  459. {block:ifShadow}
  460. filter: drop-shadow(0px 0px 5px {color:info shadow})
  461. drop-shadow(0px 0px 10px {color:info shadow});
  462. {/block:ifShadow}
  463. {/block:IfTransparentInfo}
  464. width: {text:icon size};
  465. padding: 20px;
  466. display: block;
  467. {block:ifNotCircleHeader}
  468. position: relative;
  469. top: 0;
  470. -webkit-transition: top ease 0.5s;
  471. -moz-transition: top ease 0.5s;
  472. -o-transition: top ease 0.5s;
  473. -ms-transition: top ease 0.5s;
  474. transition: top ease 0.5s;
  475. {/block:ifNotCircleHeader}
  476. }
  477.  
  478. {block:ifNotCircleHeader}
  479. .sb img:hover{
  480. top: -10px;
  481. }
  482. {block:ifNotCircleHeader}
  483.  
  484. .desc {
  485. padding: 0px 20px 5px 20px;
  486. text-align: center;
  487. line-height: 120%;
  488. font-size: {text:desc size};
  489. {block:ifNotCircleHeader}
  490. margin-top: -15px;
  491. {/block:ifNotCircleHeader}
  492. {block:IfHideLinks}
  493. padding-bottom: 10px;
  494. {block:IfHideLinks}
  495.  
  496. }
  497.  
  498. .linkz {
  499. line-height: 120%;
  500. padding-bottom: 5px;
  501. font-size: {text:info link size};
  502. {block:IfHideDesc}
  503. padding: 3px 0 10px 0;
  504. margin-top: -15px;
  505. {/block:IfHideDesc}
  506. }
  507.  
  508. .linkz a{
  509. margin-right: 5px;
  510. color: {color:info links};
  511. {block:IfLinksUnderline}
  512. text-decoration: none;
  513. border-bottom: 2px solid {color:underline of info link};
  514. {/block:IfLinksUnderline}
  515. font-size: {text:info link size};
  516. {block:ifOutlineTxt}
  517. text-shadow: -1px 0 {color:info link glow outline}, 0 1px {color:info link glow outline}, 1px 0 {color:info link glow outline}, 0 -1px {color:info link glow outline};
  518. {block:ifOutlineTxt}
  519. {block:ifGlowTxt}
  520. text-shadow: 0 0 2px {color:info link glow outline}, 0 0 5px {color:info link glow outline};
  521. {/block:ifGlowTxt}
  522. }
  523.  
  524. .circle {
  525. margin: auto;
  526. max-width: 600px;
  527. text-align: center;
  528. margin-top: 20px;
  529. {block:IfTransparentInfo}
  530. margin-top: 0;
  531. {/block:IfTransparentInfo}
  532. color: {color:desc txt};
  533. {block:ifOutlineTxt}
  534. text-shadow: -1px 0 {color:desc glow outline}, 0 1px {color:desc glow outline}, 1px 0 {color:desc glow outline}, 0 -1px {color:desc glow outline};
  535. {block:ifOutlineTxt}
  536. {block:ifGlowTxt}
  537. text-shadow: 0 0 2px {color:desc glow outline}, 0 0 5px {color:desc glow outline};
  538. {/block:ifGlowTxt}
  539.  
  540. }
  541.  
  542. .posts {
  543.  
  544. {block:ifRoundBorder}
  545. border-radius: 5px;
  546. {/block:ifRoundBorder}
  547. {block:ifShadow}
  548. filter: drop-shadow(5px 5px 2px {color:post shadow});
  549. margin: 0px 25px 25px 0;
  550. {/block:ifShadow}
  551. background: {color:posts};
  552. width: 400px;
  553. {block:if2Columns}
  554. width: 500px;
  555. {/block:if2Columns}
  556. {block:if4Columns}
  557. width: 290px;
  558. {/block:if4Columns}
  559. margin: 20px 20px 0 0;
  560. display:inline-block;
  561. border: {select:post border size}px {select:post border} {color:post border};
  562. {block:ifRainbowBorder1}
  563. border: {select:post border size}px solid transparent;
  564. border-image: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, violet 100%);
  565. border-image-slice: 1;
  566. {/block:ifRainbowBorder1}
  567. {block:ifRainbowBorder2}
  568.  
  569. border: {select:post border size}px solid transparent;
  570. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  571. border-image-slice: 1;
  572. {/block:ifRainbowBorder2}
  573. position: relative;
  574. {block:PermalinkPage}
  575. {block:if2Columns}
  576. margin-left: 210px;
  577. {/block:if2Columns}
  578. {block:ifNot2Columns}
  579. margin-left: 330px;
  580. {/block:ifNot2Columns}
  581. width: 600px;
  582. {/block:PermalinkPage}
  583.  
  584. }
  585.  
  586. .pic img{
  587. {block:ifRoundBorder}
  588. border-radius: 5px;
  589. {/block:ifRoundBorder}
  590. width: 100%;
  591. display: block;
  592. {block:PermalinkPage}
  593. border-bottom: {select:post border size}px {select:post border} {color:post border};
  594. {/block:PermalinkPage}
  595. -webkit-transition: all 0.3s ease-in-out;
  596. -moz-transition: all 0.3s ease-in-out;
  597. -o-transition: all 0.3s ease-in-out;
  598. -ms-transition: all 0.3s ease-in-out;
  599. transition: all 0.3s ease-in-out;
  600. }
  601.  
  602. .pic img:hover {
  603. filter: contrast(1.2) brightness(1.1);
  604. -webkit-transition: all 0.3s ease-in-out;
  605. -moz-transition: all 0.3s ease-in-out;
  606. -o-transition: all 0.3s ease-in-out;
  607. -ms-transition: all 0.3s ease-in-out;
  608. transition: all 0.3s ease-in-out;
  609. }
  610.  
  611. [photoset-layout] img {
  612. {block:PermalinkPage}
  613. border-bottom: {select:post border size}px {select:post border} {color:post border};
  614. {/block:PermalinkPage}
  615. {block:ifRoundBorder}
  616. border-radius: 5px;
  617. {/block:ifRoundBorder}
  618. -webkit-transition: all 0.3s ease-in-out;
  619. -moz-transition: all 0.3s ease-in-out;
  620. -o-transition: all 0.3s ease-in-out;
  621. -ms-transition: all 0.3s ease-in-out;
  622. transition: all 0.3s ease-in-out;}
  623.  
  624.  
  625. [photoset-layout] img:hover {
  626. filter: contrast(1.2) brightness(1.1);
  627. -webkit-transition: all 0.3s ease-in-out;
  628. -moz-transition: all 0.3s ease-in-out;
  629. -o-transition: all 0.3s ease-in-out;
  630. -ms-transition: all 0.3s ease-in-out;
  631. transition: all 0.3s ease-in-out;}
  632.  
  633. .footer {
  634. line-height: 120%;
  635. }
  636.  
  637. .cap {
  638. border-bottom: {select:post border size}px {select:post border} {color:post border};
  639. {block:ifRainbowBorder1}
  640. border-bottom: {select:post border size}px solid transparent;
  641. border-image: linear-gradient(to bottom right, red, orange, yellow, green, cyan, blue, violet 100%);
  642. border-image-slice: 1;
  643. {/block:ifRainbowBorder1}
  644. {block:ifRainbowBorder2}
  645. border-bottom: {select:post border size}px solid transparent;
  646. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  647. border-image-slice: 1;
  648. {/block:ifRainbowBorder2}
  649. overflow: auto;
  650. overflow-x: hidden;
  651. top: 0;
  652. width: 380px;
  653. {block:if2Columns}
  654. width: 480px;
  655. {/block:if2Columns}
  656. {block:if4Columns}
  657. width: 270px;
  658. {/block:if4Columns}
  659. padding: 10px;
  660. position: absolute;
  661. background: {color:posts};
  662. max-height: 100%;
  663. line-height:120%;
  664. opacity:0;
  665. -webkit-transition: all 0.7s ease;
  666. transition: all 0.7s ease;
  667. -moz-transition: all 0.7s ease;
  668. -o-transition: all 0.7s ease;
  669.  
  670. }
  671.  
  672. .posts:hover .cap {
  673. top: 0;
  674. opacity:1;
  675. max-height: 100%;
  676. -webkit-transition: all 0.7s ease;
  677. transition: all 0.7s ease;
  678. -moz-transition: all 0.7s ease;
  679. -o-transition: all 0.7s ease;}
  680.  
  681. [photoset-layout] {
  682. grid-gap: 0;
  683. }
  684.  
  685.  
  686. .pagination{
  687. display:none;
  688. }
  689.  
  690. #infscr-loading {
  691. display: none !important;
  692. }
  693.  
  694.  
  695. .bubble {
  696. {block:ifShadow}
  697. filter: drop-shadow(0px 3px 2px {color:links});
  698. {/block:ifShadow}
  699. background: {color:links};
  700. color: {color:posts};
  701. {block:ifOutlineTxt}
  702. color: {color:posts};
  703. text-shadow: -1px 0 {color:links}, 0 1px {color:links}, 1px 0 {color:links}, 0 -1px {color:links};
  704. {block:ifOutlineTxt}
  705. {block:ifGlowTxt}
  706. color: {color:posts};
  707. text-shadow: 0 0 2px {color:posts}, 0 0 5px {color:posts};
  708. {/block:ifGlowTxt}
  709. position: relative;
  710. padding: 10px;
  711. }
  712.  
  713. .bubble img {
  714. width: 100%;
  715. }
  716.  
  717. .triangle {
  718. width: 0;
  719. {block:ifShadow}
  720. filter: drop-shadow(0px 3px 2px {color:links});
  721. {/block:ifShadow}
  722. margin-left: 15px;
  723. border-top: 10px solid {color:links};
  724. border-left: 10px solid transparent;
  725. border-right: 10px solid transparent;
  726. }
  727.  
  728. .asky {
  729. width: 100%;
  730. }
  731.  
  732. #askimg {
  733. margin-left: 7px;
  734. }
  735.  
  736. #askimg img {
  737. display: block;
  738. margin-top: 5px;
  739. {block:ifRoundBorder}
  740. border-radius: 50%;
  741. {/block:ifRoundBorder}
  742. {block:ifShadow}
  743. filter: drop-shadow(0px 3px 3px {color:font});
  744. {/block:ifShadow}
  745. }
  746.  
  747. #asker {
  748.  
  749. height: 40px;
  750. margin-top: -30px;
  751. padding-left: 60px;
  752. line-height: {text:font size}px;
  753. position: absolute;
  754. }
  755.  
  756.  
  757. #a {
  758. margin-top: 5px;
  759. padding: 10px;
  760. }
  761.  
  762. #permacontainer {
  763. width: 590px;
  764. padding: 10px;
  765. }
  766.  
  767. #permanotes {
  768. margin-top: 10px;
  769. overflow: auto;
  770. overflow-x: hidden;
  771. max-height: 300px;
  772. }
  773.  
  774. #permanotes ol.notes {
  775. list-style-type: none;
  776. margin: 0;
  777. padding: 0;}
  778.  
  779. #permanotes img.avatar {
  780. margin-right: 10px;
  781. display: inline;
  782. width: 16px;
  783. height: 16px;}
  784.  
  785. .quote {
  786. padding: 10px;
  787. font-size: 130%;
  788. line-height: 120%;
  789. }
  790.  
  791. .linky {
  792. padding: 10px;
  793. }
  794.  
  795. .linky a {
  796. {block:ifRoundBorder}border-radius: 5px;{/block:ifRoundBorder}
  797. background: {color:font};
  798. color: {color:posts};
  799. font-size: 120%;
  800. line-height: 200%;
  801. padding: 5px;
  802. {block:ifOutlineTxt}
  803. color: {color:font};
  804. text-shadow: -1px 0 {color:posts}, 0 1px {color:posts}, 1px 0 {color:posts}, 0 -1px {color:posts};
  805. {block:ifOutlineTxt}
  806. {block:ifGlowTxt}
  807. color: {color:posts};
  808. text-shadow: 0 0 2px {color:posts}, 0 0 5px {color:posts};
  809. {/block:ifGlowTxt}
  810. }
  811.  
  812. .txt {
  813. padding: 10px;
  814. }
  815.  
  816. blockquote {
  817. margin: 0 0 0 10px;
  818. border-left: 1px solid {color:links};
  819. padding-left: 5px;
  820. }
  821.  
  822. ul {
  823. list-style: none;
  824. margin: 5px 0 5px 0;
  825. }
  826.  
  827. ul li::before {
  828. content: "\25AA";
  829. color: {color:links};
  830. display: inline-block;
  831. width: 1em;
  832. margin-left: -1em;
  833. }
  834.  
  835. #c {
  836. position: fixed;
  837. bottom: 0; left: 0;
  838. padding-left: 5px;
  839. }
  840.  
  841. .art {
  842. height: 150px;
  843. {block:if4Columns}
  844. height: 100px;
  845. {/block:if4Columns}
  846. }
  847.  
  848. .art img {
  849. {block:ifRoundBorder}
  850. border-radius: 5px;
  851. {/block:ifRoundBorder}
  852. width: 150px;
  853. height: 150px;
  854. {block:if4Columns}
  855. width: 100px;
  856. height: 100px;
  857. {/block:if4Columns}
  858. }
  859.  
  860. .radio {
  861. left: 55px;
  862. top: 55px;
  863. {block:if4Columns}
  864. top: 30px;
  865. left: 30px;
  866. {/block:if4Columns}
  867. {block:ifRoundBorder}
  868. border-radius: 5px;
  869. {/block:ifRoundBorder}
  870. width: 19px;
  871. height: 19px;
  872. background-color: #fff;
  873. padding: 10px;
  874. opacity: 1;
  875. position: absolute;
  876. }
  877.  
  878. .playa {
  879. margin-left: 0px;
  880. width: 25px;
  881. height: 25px;
  882. overflow: hidden;
  883. margin-top: -4px;
  884. margin-left: -7px;
  885. filter: contrast(2);
  886. overflow: hidden;
  887. }
  888.  
  889. .track {
  890. position: absolute;
  891. padding: 10px 0 5px 0px;
  892. width: 195px;
  893. margin-left: 160px;
  894. {block:if4Columns}
  895. margin-left: 110px;
  896. {/block:if4Columns}
  897. line-height: 120%;
  898. }
  899.  
  900. .spotify_audio_player {
  901. height:80px!important;
  902. width:100%!important;
  903. display: block;
  904. z-index: 1;
  905. }
  906.  
  907. .soundcloud_audio_player {
  908. height:150px!important;
  909. width:100%!important;
  910. display: block;
  911. z-index: 1;
  912. }
  913.  
  914. .video {
  915. position: relative;
  916. padding-bottom: 75%;
  917. height: 0;
  918. overflow: hidden;
  919. }
  920.  
  921. .video iframe, .video object, .video embed {
  922. position: absolute;
  923. top: 0;
  924. left: 0;
  925. width: 100%;
  926. height: 100%;
  927. }
  928.  
  929. .odd, .even {padding:5px;}
  930.  
  931. .odd {
  932. background-color:{color:font};
  933. color: {color:posts};
  934. }
  935.  
  936.  
  937. .tmblr-iframe--loaded{
  938. position: fixed !important;
  939. top: 0px !important;
  940. width: 420px !important;
  941. left: calc(100% - 420px) !important;
  942. -moz-transform: scale(0.6) !important;
  943. -webkit-transform: scale(0.6) !important;
  944. transform: scale(0.6) !important;
  945. -moz-transform-origin: top right !important;
  946. -webkit-transform-origin: top right !important;
  947. transform-origin: top right !important;
  948. opacity: 0.6;
  949. }
  950. .tmblr-iframe--loaded:hover{
  951. opacity: 1 !important;
  952. }
  953. .tmblr-iframe-pushdown,
  954. .tmblr-iframe-themed{
  955. padding-top: 0px !important;
  956. padding: 0px !important;
  957. animation: none !important;
  958. -webkit-animation: none !important;
  959. }
  960.  
  961.  
  962. </style>
  963.  
  964.  
  965. <script type="text/javascript">
  966. function open(askbox) {
  967. var askcontainer = document.getElementById(askbox);
  968. if (askcontainer) {askcontainer.className=(askcontainer.className=='closed')?'open':'closed';}
  969. }
  970. </script>
  971.  
  972.  
  973. <script>
  974. function gatherData(images, arr) {
  975. for (let i = 0; i < images.length; i++) {
  976. let currentData = {
  977. "width": images[i].getAttribute('data-width'),
  978. "height": images[i].getAttribute('data-height'),
  979. "low_res": images[i].getAttribute('data-lowres'),
  980. "high_res": images[i].getAttribute('data-highres')
  981. };
  982. arr.push(currentData);
  983. }
  984. }
  985. function getIndex(elem) {
  986. let i = 0;
  987. while( (elem = elem.previousElementSibling) != null ) i++;
  988. return i;
  989. }
  990. function lightbox(elem) {
  991. let currentPhotoset = elem.parentNode;
  992. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  993. let data = [];
  994. gatherData(photosetPhotos, data);
  995. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  996. }
  997. </script>
  998.  
  999.  
  1000.  
  1001.  
  1002.  
  1003. </head>
  1004.  
  1005.  
  1006.  
  1007.  
  1008. <body>
  1009. <div class="waga">
  1010. {block:ifNotHideTitle}
  1011. <div class="title"><a href="/">{text:title}</a></div>
  1012. {/block:ifNotHideTitle}
  1013. <div class="sb">
  1014. <center><a href="/"><img src="{image:icon}"></a></center>
  1015. {block:ifNotCircleHeader}{block:ifNotHideDesc}<div class="desc">{text:description}</div>{/block:ifNotHideDesc}
  1016. {block:ifNotHideLinks}<div class="linkz">
  1017. <a href="{text:link 1 URL}">{text:link 1}</a>
  1018. <a href="{text:link 2 URL}">{text:link 2}</a>
  1019. <a href="{text:link 3 URL}">{text:link 3}</a>
  1020. {block:ifExtraLinks}
  1021. <a href="{text:link 4 URL}">{text:link 4}</a>
  1022. <a href="{text:link 5 URL}">{text:link 5}</a>
  1023. <a href="{text:link 6 URL}">{text:link 6}</a>
  1024. {/block:ifExtraLinks}
  1025. </div>{/block:ifNotHideLinks}
  1026. </div></div>{block:ifNotCircleHeader}
  1027. </div>
  1028. {block:ifCircleHeader}
  1029. <div class="circle">
  1030. {block:ifNotHideDesc}<div class="desc">{text:description}</div>{/block:ifNotHideDesc}
  1031. {block:ifNotHideLinks}<div class="linkz">
  1032. <a href="{text:link 1 URL}">{text:link 1}</a>
  1033. <a href="{text:link 2 URL}">{text:link 2}</a>
  1034. <a href="{text:link 3 URL}">{text:link 3}</a>
  1035. {block:ifExtraLinks}
  1036. <a href="{text:link 4 URL}">{text:link 4}</a>
  1037. <a href="{text:link 5 URL}">{text:link 5}</a>
  1038. <a href="{text:link 6 URL}">{text:link 6}</a>
  1039. {/block:ifExtraLinks}
  1040. </div>{/block:ifNotHideLinks}
  1041. </div>
  1042. {/block:ifCircleHeader}
  1043.  
  1044. </div>
  1045.  
  1046. <main id="content">
  1047.  
  1048.  
  1049. {block:Posts}
  1050. <div class="posts">
  1051.  
  1052. {block:Text}
  1053. {block:Title}<p style="padding: 10px 5px 0 10px; line-height: 120%; font-size: 150%;"><a href="{Permalink}">{Title}</a></p>{/block:Title}
  1054. <div class="txt">{Body}</div>
  1055. {/block:Text}
  1056.  
  1057. {block:Quote}
  1058. <div class="quote">"{Quote}"</div>
  1059. {block:Source}<p style="padding: 0px 10px 10px 10px;">&mdash; {Source}</p>{/block:Source}
  1060. {/block:Quote}
  1061.  
  1062. {block:Link}
  1063. <div class="linky"><a href="{URL}">{Name} &raquo;</a></div>
  1064. {block:Description}{Description}{/block:Description}
  1065. </div>
  1066. {/block:Link}
  1067.  
  1068. {block:Chat}
  1069. {block:Title}{Title}{/block:Title}
  1070. {block:Lines}
  1071. <div class="{Alt} user_{UserNumber}">
  1072. {block:Label}{Label}{/block:Label} {Line}
  1073. </div>
  1074. {/block:Lines}
  1075. {/block:Chat}
  1076.  
  1077.  
  1078. {block:Answer}
  1079. <div class="asky">
  1080. <div class="bubble">{Question}
  1081. </div>
  1082. <div class="triangle"></div>
  1083.  
  1084. <div id="askimg"><img src="{AskerPortraitURL-40}"></div>
  1085. <div id="asker">{Asker}</div>
  1086. <div id="a">{Answer}</div>
  1087. </div>
  1088. {/block:Answer}
  1089.  
  1090.  
  1091. {block:Photo}
  1092. <div class="pic">
  1093. {block:IndexPage}
  1094. {block:ifNot2Columns}<img src="{PhotoURL-400}">{/block:ifNot2Columns}
  1095. {block:if2Columns}<img src="{PhotoURL-500}">{/block:if2Columns}{/block:IndexPage}
  1096. {block:PermalinkPage}<a href="{LinkURL}"><img src="{PhotoURL-HighRes}"></a>{/block:PermalinkPage}
  1097. </div>
  1098. {/block:Photo}
  1099.  
  1100.  
  1101. {block:Photoset}
  1102. <div class="photoset-grid" photoset-layout="{PhotosetLayout}" style="width: 400px; {block:if2Columns}width: 500px;{/block:if2Columns}{block:if4Columns}width: 290px;{/block:if4Columns} {block:PermalinkPage}width: 600px;{/block:PermalinkPage}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-HighRes}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1103. {/block:Photoset}
  1104.  
  1105. {block:Video}
  1106. <div class="video">{Video-400}</div>
  1107. {/block:Video}
  1108.  
  1109. {block:Audio}
  1110. {block:AudioPlayer}<div class="radio"><div class="playa">{AudioPlayer}</div></div>
  1111. <div class="track">
  1112. {block:TrackName}{TrackName}<Br>{/block:TrackName}
  1113. {block:Artist}by {Artist}<br>{/block:Artist}
  1114. {block:Album}{Album}{/block:Album}
  1115. </div>
  1116. {block:AlbumArt}<div class="art"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}{/block:AudioPlayer}
  1117. {block:AudioEmbed}{AudioEmbed-400}{/block:AudioEmbed}
  1118. {/block:Audio}
  1119.  
  1120. {block:IndexPage}
  1121. <div class="cap">
  1122. {block:ifNotHideCaption}
  1123. {block:Caption}{Caption}
  1124. <div style="margin-bottom: 10px"></div>
  1125. {/block:Caption}
  1126. {/block:ifNotHideCaption}
  1127.  
  1128.  
  1129. <div class="footer">
  1130. <a href="{Permalink}">{TimeAgo}</a> with <a href="{ReblogURL}" data-toggle="tooltip" title="Reblog?">{NoteCountWithLabel}</a>{block:RebloggedFrom} <a href="{ReblogParentURL}" data-toggle="tooltip" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}{block:ContentSource} / <a href="{SourceURL}" data-toggle="tooltip" title="{SourceTitle}">source</a>{/block:ContentSource}
  1131.  
  1132. {block:ifNotHideTags}
  1133. {block:HasTags}<br>Tagged:
  1134. {block:Tags}
  1135. <a href="{TagURL}">#{Tag}</a>
  1136. {/block:Tags}{/block:HasTags}
  1137. {/block:ifNotHideTags}
  1138. </div></div>
  1139. {/block:IndexPage}
  1140.  
  1141.  
  1142. {block:PermalinkPage}
  1143. <div id="permacontainer">
  1144. {block:Caption}{Caption}{/block:Caption}
  1145. <p>
  1146. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a><br>{/block:NoteCount}
  1147. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}<br>{/block:HasTags}
  1148. {block:RebloggedFrom}
  1149. Via <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}{block:ContentSource}
  1150. Source <a href="{SourceURL}">{SourceTitle}</a>
  1151. {/block:ContentSource}</p>
  1152.  
  1153. {block:NoteCount}<div id="permanotes">
  1154. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1155. </div>{/block:NoteCount}</div>
  1156. {/block:PermalinkPage}
  1157.  
  1158.  
  1159.  
  1160. </div>
  1161. {/block:Posts}
  1162.  
  1163.  
  1164. {block:Pagination}
  1165. <nav class="pagination">
  1166. {block:NextPage}<a href="{NextPage}">Next Page</a>{/block:NextPage}
  1167. </nav>
  1168. {/block:Pagination}
  1169. </main>
  1170.  
  1171. <div id="c"><a href="https://sadthemes.tumblr.com/" data-toggle="tooltip" title="sadthemes" style="font-size: 22px; text-decoration: none; font-style: normal; font-weight: normal; border: 0">&#8251;</a></div>
  1172.  
  1173. <script>
  1174. //These functions control Masonry, Infinite Scroll and Photoset Grid
  1175. var msnry;
  1176. var imgLoad;
  1177. var $tumblelog = $('main');
  1178. var content = document.getElementById("content");
  1179. msnry = new Masonry("main",{itemSelector:".posts"}); //Initialise Masonry
  1180. imgLoad = imagesLoaded("main");
  1181. imgLoad.on('always', function(){
  1182. content.style.opacity = "1"; //appears the content block once initial images are loaded
  1183. });
  1184. imgLoad.on('progress', function(instance, image){
  1185. $(image.img).closest('.photoset').photosetGrid({gutter:'10px', onComplete:function(){msnry.layout();}}); //Grids up photosets nicely
  1186. msnry.layout();
  1187. });
  1188.  
  1189. $(window).load(function(){ //Waits a sec before running infinite scroll
  1190. $tumblelog.infinitescroll({ //Initialises the infinite scroll
  1191. navSelector: ".pagination",
  1192. nextSelector: ".pagination a:last-child",
  1193. itemSelector: ".posts",
  1194. bufferPx: 1500, //Since photosets can get quite long, and this is a 3 column theme, the buffer is extra long to stop people from having to scroll up too much
  1195. prefill:true,
  1196. },
  1197. function(newElements){
  1198. var $newElems = $(newElements).css({opacity:0});
  1199. $newElems.imagesLoaded(function(){
  1200. msnry.appended($newElems);
  1201. $('.photoset').photosetGrid({gutter:'0px', onComplete:function(){msnry.layout();}});
  1202. msnry.layout();
  1203. $newElems.animate({opacity:1});
  1204. });
  1205. });
  1206. });
  1207.  
  1208.  
  1209. </script>
  1210.  
  1211. </body>
  1212. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!