API tools faq
paste
glenthemes

Theme [20]: Wanderlust

glenthemes
Sep 19th, 2016 (edited)
8,126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 67.60 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------
  2. Theme [20]: Wanderlust
  3. Made by glenthemes
  4.  
  5. Initial release: 2016/09/20
  6. Remake date: 2021/01/14
  7. Last updated: 2025/06/10
  8.  
  9. What's new:
  10. ✱ minor fixes for npf quotes and chats
  11. ✱ fixed whitespace issue on texts
  12.  
  13. TERMS OF USE:
  14. 1) Do not remove the theme credit.
  15. 2) Do not repost/redistribute my themes.
  16. 3) Do not take parts of the code and use it as your own.
  17. 4) Do not use my themes as a base code.
  18. 5) Do not mix my themes together.
  19. ----------------------------------------------------->
  20. <!DOCTYPE html>
  21. <html lang="en">
  22.  
  23. <head>
  24.  
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. {block:Description}
  29. <meta name="description" content="{MetaDescription}">
  30. {/block:Description}
  31.  
  32. <!--------------------------------------------------->
  33.  
  34. <!------ JQUERY LIBRARY ------->
  35. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  36.  
  37. <!------ FONTS ------->
  38. <link href="//fonts.googleapis.com/css?family=Karla|Syne|Libre+Franklin|Bai+Jamjuree|Chakra+Petch|Gotu" rel="stylesheet">
  39.  
  40. <link href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css"rel="stylesheet" >
  41.  
  42. <!------ ICON FONTS ------->
  43. <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  44.  
  45. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  46.  
  47. <!------ THEME SCRIPTS ------->
  48. <link href="//static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  49.  
  50. <script src="//glen-themes.gitlab.io/thms/20/fkn-audio.js"></script>
  51.  
  52. <script src="//npf-images-v3.github.io/script.js"></script>
  53. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  54.  
  55. {block:ifshowmusicplayer}
  56. <script src="//glenthemes.github.io/-music-/glenplayer06.js"></script>
  57. {/block:ifshowmusicplayer}
  58.  
  59. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  60. <script src="//glen-themes.gitlab.io/thms/20/AP-Ezreal_2023.js"></script>
  61. <script src="//glen-themes.gitlab.io/thms/20/pizza.js"></script>
  62.  
  63. <script>
  64. // minimal soundcloud player @ shythemes.tumblr
  65. // shythemes.tumblr.com/post/114792480648
  66. $(document).ready(function(){
  67. var soundcloud_btn = '{color:link}';
  68. $('.soundcloud_audio_player').each(function(){
  69. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
  70. });
  71. });
  72. </script>
  73.  
  74. <!-- unblue polls -->
  75. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  76. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  77. <style unblue-polls>
  78. .poll-post {
  79. --Poll-Question-Font-Size: {select:post font size};
  80.  
  81. --Poll-Option-Background-Color: transparent;
  82. --Poll-Option-Corner-Rounding: 4px;
  83. --Poll-Option-Border-Size: 1px;
  84. --Poll-Option-Border-Color: rgba({RGBcolor:text},0.25);
  85. --Poll-Option-Padding: 8px;
  86. --Poll-Option-Font-Size: {select:post font size};
  87. --Poll-Option-Spacing: 10px;
  88. --Poll-Option-Text-Color: {color:text};
  89.  
  90. --Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.25);
  91. --Poll-Option-HOVER-Background-Color: transparent;
  92. --Poll-Option-HOVER-Text-Color: {color:link};
  93. --Poll-Option-HOVER-Speed: 0.4s;
  94. }
  95.  
  96. .poll-see-results {
  97. padding-bottom:0!important;
  98. border-bottom:none!important;
  99. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  100. text-transform:uppercase;
  101. letter-spacing:0.5px;
  102. }
  103. </style>
  104.  
  105. <!-- npf audio player -->
  106. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  107. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  108. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  109. <script>
  110. tumblr_npf_audio({
  111. emptyTitleText: "Untitled track",
  112. emptyArtistText: "Untitled artist",
  113. emptyAlbumText: "Untitled album",
  114.  
  115. titleLabel: "",
  116. artistLabel: "",
  117. albumLabel: ""
  118. });
  119. </script>
  120. <style edit-npf-audio-player>
  121. .npf-audio-wrapper {
  122. --NPF-Audio-Buttons-Size: calc(var(--Audio-Post-PlayButton-Size) * 0.6);
  123. --NPF-Audio-Buttons-Color: {color:text};
  124. --NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * (1 - 0.6)) - 3px);
  125. --NPF-Audio-Buttons-Spacing: calc(var(--p) + 14px);
  126. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Image-Size);
  127. --NPF-Audio-Image-Spacing: 0px;
  128.  
  129. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  130. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  131. }
  132.  
  133. .npf-audio-wrapper {
  134. position:relative;
  135. z-index:0;
  136. }
  137.  
  138. .npf-audio-background {
  139. margin-left:var(--p);
  140. }
  141.  
  142. .npf-audio-play, .npf-audio-pause {
  143. position:relative;
  144. z-index:0;
  145. }
  146.  
  147. .npf-audio-play:after, .npf-audio-pause:after {
  148. content:"";
  149. position:absolute;
  150. top:0;left:0;
  151. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
  152. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
  153. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  154. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  155. background:{color:post};
  156. border:1px solid rgba({RGBcolor:text},0.420);
  157. border-radius:100%;
  158. z-index:-1;
  159. }
  160.  
  161. .npf-audio-play svg { margin-left:1px; }
  162. .npf-audio-pause svg { margin-left:0; }
  163.  
  164. figcaption.audio-caption,
  165. figcaption.audio-caption ~ audio[controls],
  166. .npf-audio-album {
  167. display:none;
  168. }
  169.  
  170. .npf-audio-image {
  171. position:absolute;
  172. top:0;left:0;
  173. border-radius:3px;
  174. z-index:-1;
  175. }
  176. </style>
  177.  
  178. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  179. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  180.  
  181. <!------------ THEME OPTIONS ------------>
  182. <meta name="image:top bar icon" content="//64.media.tumblr.com/d169e6d0881f6e9579a779c93511d457/c8e873a39e533599-52/s2048x3072/f80b6924392918a842d2fed68f03dcd3afe7e6cb.png">
  183. <meta name="image:background image" content="//64.media.tumblr.com/743195c6c6fc7d14532da88e43ed1608/c8e873a39e533599-be/s2048x3072/5d9917ee06ee584a3152e32d79433eab38c7e36c.jpg">
  184. <meta name="image:character image" content="//64.media.tumblr.com/edeb5863c5f052d408ece801de664555/c8e873a39e533599-04/s2048x3072/16a6b6121e49e4c2eb0f046654fe4137e2e35b4d.png">
  185. <meta name="image:customlinks image" content="//static.tumblr.com/2pnwama/kQNs1pt3a/emblem_edit1.png">
  186.  
  187. <!------TOPBAR COLORS------>
  188. <meta name="color:music player" content="#60bdcf">
  189. <meta name="color:top bar background" content="#010509">
  190. <meta name="color:top bar icon inner border" content="#75a8bf">
  191. <meta name="color:top bar icon outer border 1" content="#fdd9bf">
  192. <meta name="color:top bar icon outer border 2" content="#bf8c57">
  193. <meta name="color:top bar bottom border 1" content="#b28864">
  194. <meta name="color:top bar bottom border 2" content="#3e3023">
  195.  
  196. <!------TEXTBOX COLORS------>
  197. <meta name="color:textbox background" content="#081a34">
  198. <meta name="color:textbox text" content="#67bdca">
  199.  
  200. <!------INFOTAB COLORS------>
  201. <meta name="color:info tab background" content="#010509">
  202. <meta name="color:info tab text" content="#bf9b72">
  203. <meta name="color:info tab border" content="#896a4b">
  204.  
  205. <!------MAIN BACKGROUND------>
  206. <meta name="color:background" content="#090e17">
  207.  
  208. <!------LEFT SIDEBAR COLORS------>
  209. <meta name="color:character glow" content="#0e91ac">
  210. <meta name="color:description background" content="#040304">
  211. <meta name="color:description text" content="#7eadb1">
  212. <meta name="color:sidelinks background" content="#040304">
  213. <meta name="color:sidelinks text" content="#67bdca">
  214. <meta name="color:sidelinks border" content="#4d8a96">
  215. <meta name="color:customlinks background" content="#040304">
  216. <meta name="color:customlinks border" content="#39666f">
  217. <meta name="color:tooltips background" content="#040304">
  218. <meta name="color:tooltips border" content="#2d5a62">
  219. <meta name="color:tooltips text" content="#63b6c3">
  220.  
  221. <!------POST COLORS------>
  222. <meta name="color:post" content="#040304">
  223. <meta name="color:text" content="#7fa6b0">
  224. <meta name="color:link" content="#d9b684">
  225. <meta name="color:reblogger border 1" content="#5a9ba6">
  226. <meta name="color:reblogger border 2" content="#274551">
  227. <meta name="color:reblogger border shadow" content="#090909">
  228. <meta name="color:reblogger" content="#74b1c3">
  229. <meta name="color:reblog separators" content="#274551">
  230. <meta name="color:tags" content="#5ab5bb">
  231. <meta name="color:permalink" content="#67bdca">
  232. <meta name="color:post buttons" content="#67bdca">
  233. <meta name="color:post bottom border" content="#4d8a96">
  234.  
  235. <meta name="color:scrollbar" content="#7a6249">
  236.  
  237. <meta name="select:top bar icon size" title="36px" content="36px">
  238. <meta name="select:top bar icon size" title="42px" content="42px">
  239. <meta name="select:top bar icon size" title="48px" content="48px">
  240. <meta name="select:top bar icon size" title="54px" content="54px">
  241. <meta name="select:top bar icon size" title="60px" content="60px">
  242.  
  243. <meta name="select:top bar padding" title="20px" content="20px">
  244. <meta name="select:top bar padding" title="10px" content="10px">
  245. <meta name="select:top bar padding" title="15px" content="15px">
  246. <meta name="select:top bar padding" title="25px" content="25px">
  247. <meta name="select:top bar padding" title="30px" content="30px">
  248.  
  249. <meta name="select:textbox width" title="300px" content="300px">
  250. <meta name="select:textbox width" title="200px" content="200px">
  251. <meta name="select:textbox width" title="225px" content="225px">
  252. <meta name="select:textbox width" title="250px" content="250px">
  253. <meta name="select:textbox width" title="275px" content="275px">
  254.  
  255. <meta name="select:textbox padding" title="12px" content="12px">
  256. <meta name="select:textbox padding" title="10px" content="10px">
  257. <meta name="select:textbox padding" title="14px" content="14px">
  258. <meta name="select:textbox padding" title="16px" content="16px">
  259. <meta name="select:textbox padding" title="18px" content="18px">
  260. <meta name="select:textbox padding" title="20px" content="20px">
  261.  
  262. <meta name="select:textbox font size" title="8px" content="8px">
  263. <meta name="select:textbox font size" title="9px" content="9px">
  264. <meta name="select:textbox font size" title="10px" content="10px">
  265. <meta name="select:textbox font size" title="11px" content="11px">
  266. <meta name="select:textbox font size" title="12px" content="12px">
  267.  
  268. <meta name="select:textbox line height" title="100%" content="2em">
  269. <meta name="select:textbox line height" title="87%" content="1.75em">
  270. <meta name="select:textbox line height" title="75%" content="1.5em">
  271. <meta name="select:textbox line height" title="50%" content="1em">
  272.  
  273. <meta name="select:textbox arrow size" title="10px" content="10px">
  274. <meta name="select:textbox arrow size" title="15px" content="15px">
  275. <meta name="select:textbox arrow size" title="20px" content="20px">
  276.  
  277. <meta name="select:textbox arrow spacing" title="14px" content="14px">
  278. <meta name="select:textbox arrow spacing" title="10px" content="10px">
  279. <meta name="select:textbox arrow spacing" title="18px" content="18px">
  280. <meta name="select:textbox arrow spacing" title="22px" content="22px">
  281.  
  282. <meta name="select:info tab width" title="175px" content="175px">
  283. <meta name="select:info tab width" title="125px" content="125px">
  284. <meta name="select:info tab width" title="150px" content="150px">
  285. <meta name="select:info tab width" title="200px" content="200px">
  286. <meta name="select:info tab width" title="225px" content="225px">
  287.  
  288. <meta name="select:info tab padding" title="20px" content="20px">
  289. <meta name="select:info tab padding" title="12px" content="12px">
  290. <meta name="select:info tab padding" title="14px" content="14px">
  291. <meta name="select:info tab padding" title="16px" content="16px">
  292. <meta name="select:info tab padding" title="18px" content="18px">
  293. <meta name="select:info tab padding" title="22px" content="22px">
  294. <meta name="select:info tab padding" title="24px" content="24px">
  295.  
  296. <meta name="select:info tab font size" title="11px" content="11px">
  297. <meta name="select:info tab font size" title="9px" content="9px">
  298. <meta name="select:info tab font size" title="10px" content="10px">
  299. <meta name="select:info tab font size" title="12px" content="12px">
  300. <meta name="select:info tab font size" title="13px" content="13px">
  301.  
  302. <meta name="select:info tab text line height" title="1.7em" content="1.7em">
  303. <meta name="select:info tab text line height" title="1.8em" content="1.8em">
  304. <meta name="select:info tab text line height" title="1.9em" content="1.9em">
  305.  
  306. <!------------MAIN CONTAINER ASSETS------------>
  307. <meta name="select:window margin" title="50px" content="50px">
  308. <meta name="select:window margin" title="60px" content="60px">
  309. <meta name="select:window margin" title="70px" content="70px">
  310.  
  311. <!------------LEFT SIDEBAR ASSETS------------>
  312. <meta name="select:sidebar width" title="300px" content="300px">
  313. <meta name="select:sidebar width" title="200px" content="200px">
  314. <meta name="select:sidebar width" title="250px" content="250px">
  315. <meta name="select:sidebar width" title="350px" content="350px">
  316. <meta name="select:sidebar width" title="400px" content="400px">
  317. <meta name="select:sidebar width" title="450px" content="450px">
  318. <meta name="select:sidebar width" title="500px" content="500px">
  319.  
  320. <meta name="select:character image width" title="100%" content="100%">
  321. <meta name="select:character image width" title="60%" content="60%">
  322. <meta name="select:character image width" title="70%" content="70%">
  323. <meta name="select:character image width" title="80%" content="80%">
  324. <meta name="select:character image width" title="90%" content="90%">
  325.  
  326. <meta name="select:character image left gap" title="none" content="0%">
  327. <meta name="select:character image left gap" title="10%" content="10%">
  328. <meta name="select:character image left gap" title="20%" content="20%">
  329. <meta name="select:character image left gap" title="30%" content="30%">
  330. <meta name="select:character image left gap" title="-10%" content="-10%">
  331. <meta name="select:character image left gap" title="-20%" content="-20%">
  332. <meta name="select:character image left gap" title="-30%" content="-30%">
  333.  
  334. <meta name="select:character glow" title="80%" content="80%">
  335. <meta name="select:character glow" title="none" content="0%">
  336. <meta name="select:character glow" title="20%" content="20%">
  337. <meta name="select:character glow" title="40%" content="40%">
  338. <meta name="select:character glow" title="60%" content="60%">
  339.  
  340. <meta name="select:character glow left gap" title="20px" content="20px">
  341. <meta name="select:character glow left gap" title="none" content="0px">
  342. <meta name="select:character glow left gap" title="-20px" content="-20px">
  343. <meta name="select:character glow left gap" title="40px" content="40px">
  344. <meta name="select:character glow left gap" title="60px" content="60px">
  345. <meta name="select:character glow left gap" title="80px" content="80px">
  346.  
  347. <meta name="select:description width" title="120%" content="20%">
  348. <meta name="select:description width" title="default" content="0px">
  349. <meta name="select:description width" title="90%" content="-10%">
  350. <meta name="select:description width" title="110%" content="10%">
  351. <meta name="select:description width" title="130%" content="30%">
  352. <meta name="select:description width" title="140%" content="40%">
  353. <meta name="select:description width" title="150%" content="50%">
  354.  
  355. <meta name="select:description padding" title="11px" content="11px">
  356. <meta name="select:description padding" title="13px" content="13px">
  357. <meta name="select:description padding" title="15px" content="15px">
  358.  
  359. <meta name="select:description font size" title="11px" content="11px">
  360. <meta name="select:description font size" title="12px" content="12px">
  361. <meta name="select:description font size" title="13px" content="13px">
  362.  
  363. <meta name="select:description text line height" title="1.6em" content="1.6em">
  364. <meta name="select:description text line height" title="1.5em" content="1.5em">
  365. <meta name="select:description text line height" title="1.7em" content="1.7em">
  366. <meta name="select:description text line height" title="1.8em" content="1.8em">
  367. <meta name="select:description text line height" title="1.9em" content="1.9em">
  368. <meta name="select:description text line height" title="2em" content="2em">
  369.  
  370. <meta name="select:sidelinks font size" title="10px" content="10px">
  371. <meta name="select:sidelinks font size" title="8px" content="8px">
  372. <meta name="select:sidelinks font size" title="9px" content="9px">
  373. <meta name="select:sidelinks font size" title="11px" content="11px">
  374. <meta name="select:sidelinks font size" title="12px" content="12px">
  375. <meta name="select:sidelinks font size" title="13px" content="13px">
  376.  
  377. <meta name="select:customlinks image size" title="14px" content="14px">
  378. <meta name="select:customlinks image size" title="12px" content="12px">
  379. <meta name="select:customlinks image size" title="16px" content="16px">
  380. <meta name="select:customlinks image size" title="18px" content="18px">
  381.  
  382. <meta name="select:customlinks padding" title="8px" content="8px">
  383. <meta name="select:customlinks padding" title="none" content="0px">
  384. <meta name="select:customlinks padding" title="2px" content="2px">
  385. <meta name="select:customlinks padding" title="4px" content="4px">
  386. <meta name="select:customlinks padding" title="6px" content="6px">
  387. <meta name="select:customlinks padding" title="10px" content="10px">
  388.  
  389. <meta name="select:customlinks spacing" title="4px" content="4px">
  390. <meta name="select:customlinks spacing" title="2px" content="2px">
  391. <meta name="select:customlinks spacing" title="6px" content="6px">
  392. <meta name="select:customlinks spacing" title="8px" content="8px">
  393. <meta name="select:customlinks spacing" title="10px" content="10px">
  394.  
  395. <meta name="select:center gap" title="60px" content="60px">
  396. <meta name="select:center gap" title="40px" content="40px">
  397. <meta name="select:center gap" title="50px" content="50px">
  398. <meta name="select:center gap" title="70px" content="70px">
  399.  
  400. <!------------ACTUAL POSTS------------>
  401. <meta name="select:post width" title="500px" content="500px">
  402. <meta name="select:post width" title="400px" content="400px">
  403. <meta name="select:post width" title="450px" content="450px">
  404. <meta name="select:post width" title="540px" content="540px">
  405.  
  406. <meta name="select:post padding" title="15px" content="15px">
  407. <meta name="select:post padding" title="none" content="0px">
  408. <meta name="select:post padding" title="4px" content="4px">
  409. <meta name="select:post padding" title="6px" content="6px">
  410. <meta name="select:post padding" title="10px" content="10px">
  411. <meta name="select:post padding" title="12px" content="12px">
  412.  
  413. <meta name="select:post font size" title="13px" content="13px">
  414. <meta name="select:post font size" title="11px" content="11px">
  415. <meta name="select:post font size" title="12px" content="12px">
  416. <meta name="select:post font size" title="14px" content="14px">
  417.  
  418. <meta name="select:photoset spacing" title="4px" content="4px">
  419. <meta name="select:photoset spacing" title="6px" content="6px">
  420. <meta name="select:photoset spacing" title="10px" content="10px">
  421.  
  422. <meta name="select:post buttons size" title="13px" content="13px">
  423. <meta name="select:post buttons size" title="11px" content="11px">
  424. <meta name="select:post buttons size" title="15px" content="15px">
  425.  
  426. <meta name="select:post buttons spacing" title="8px" content="8px">
  427. <meta name="select:post buttons spacing" title="4px" content="4px">
  428. <meta name="select:post buttons spacing" title="6px" content="6px">
  429. <meta name="select:post buttons spacing" title="10px" content="10px">
  430. <meta name="select:post buttons spacing" title="12px" content="12px">
  431.  
  432. <meta name="select:post spacing" title="40px" content="40px">
  433. <meta name="select:post spacing" title="30px" content="30px">
  434. <meta name="select:post spacing" title="50px" content="50px">
  435.  
  436. <meta name="select:post text line height" title="1.7em" content="1.7em">
  437. <meta name="select:post text line height" title="1.5em" content="1.5em">
  438. <meta name="select:post text line height" title="1.9em" content="1.9em">
  439.  
  440.  
  441. <!------- TOGGLE OPTIONS ------->
  442. <meta name="if:show music player" content="1">
  443. <meta name="if:reblog separators" content="1">
  444. <meta name="if:full width reblog separators" content="1">
  445.  
  446. <meta name="text:how to link music" content="linktr.ee/direct_file_links">
  447. <meta name="text:music player song name" content="Michael FK - Sonder">
  448. <meta name="text:music player song mp3 url" content="https://rhizo.gitlab.io/m/Sonder.mp3">
  449.  
  450. <meta name="text:textbox left" content="Some text here at the top">
  451. <meta name="text:textbox right" content="Some text here at the top">
  452.  
  453. <meta name="text:info panel text" content="Some text here. Hover over the top bar icon to see the dropdown.">
  454.  
  455. <meta name="text:customlink 1 name" content="dashboard">
  456. <meta name="text:customlink 1 URL" content="//tumblr.com/dashboard">
  457. <meta name="text:customlink 2 name" content="">
  458. <meta name="text:customlink 2 URL" content="">
  459. <meta name="text:customlink 3 name" content="">
  460. <meta name="text:customlink 3 URL" content="">
  461. <meta name="text:customlink 4 name" content="">
  462. <meta name="text:customlink 4 URL" content="">
  463. <meta name="text:customlink 5 name" content="">
  464. <meta name="text:customlink 5 URL" content="">
  465.  
  466. <!-------------------------------------->
  467. <style type="text/css">
  468.  
  469. /*------------ TUMBLR CONTROLS ------------*/
  470. iframe#tumblr_controls, .iframe-controls--desktop {
  471. top:0!important;
  472. margin-top:calc({select:top bar icon size} + ({select:top bar padding} * 2) + 12px + 2px)!important;
  473.  
  474. right:0!important;
  475. margin-right:3px!important;
  476. position:fixed!important;
  477.  
  478. transform:scale(0.7,0.7);
  479. -webkit-transform:scale(0.7,0.7);
  480.  
  481. transform-origin:100% 0;
  482. z-index:999999!important;
  483.  
  484. opacity:0.4;
  485. transition:0.3s ease-in-out;
  486. }
  487.  
  488. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  489. opacity:0.8;
  490. }
  491.  
  492. /*----------- TOOLTIPS -----------*/
  493. a[data-title]{
  494. position:relative;
  495. }
  496.  
  497. a[data-title]:not([data-title=""]):hover:before {
  498. content:"";
  499. position:absolute;
  500. top:100%;margin-top:calc(6px - .5px);
  501. left:50%;transform:translateX(-50%);
  502. margin-left:-3px;
  503. width:6px;
  504. height:6px;
  505. transform:rotate(45deg);
  506. background:{color:tooltips background};
  507. border-top:1px solid {color:tooltips border};
  508. border-left:1px solid {color:tooltips border};
  509. z-index:70;
  510. }
  511.  
  512. a[data-title]:not([data-title=""]):hover:after {
  513. content:attr(data-title);
  514. position:absolute;
  515. top:calc(100% + 3px + 6px);
  516. left:50%;transform:translateX(-50%);
  517. background:{color:tooltips background};
  518. padding:5px 7px;
  519. border:1px solid {color:tooltips border};
  520. font-family:karla;
  521. text-transform:uppercase;
  522. font-size:calc(11px - 2px);
  523. letter-spacing:1px;
  524. color:{color:tooltips text};
  525. text-align:center;
  526. white-space:nowrap;
  527. line-height:1.69em;
  528. z-index:69;
  529. }
  530.  
  531. /*------------ BASICS ------------*/
  532. * {
  533. position:relative;
  534. margin:0;
  535. padding:0;
  536. }
  537.  
  538. body {
  539. background:{color:background};
  540. font-family:Bai Jamjuree;
  541. color:{color:text};
  542. overflow-x:hidden;
  543. }
  544.  
  545. img {
  546. vertical-align:middle;
  547. }
  548.  
  549. a, a:visited {
  550. color:{color:link};
  551. text-decoration:none;
  552. }
  553.  
  554. h1, h2, h3, h4, h5, h6 {
  555. margin:var(--Heading-Margins) 0;
  556. font-family:chakra petch;
  557. text-transform:uppercase;
  558. font-weight:normal;
  559. font-size:calc({select:post font size} + 4px);
  560. letter-spacing:1.3px;
  561. line-height:calc({select:post text line height} * 0.69);
  562. }
  563.  
  564. h1.title {
  565. margin-bottom:calc(var(--Heading-Margins) * 2);
  566. font-size:calc({select:post font size} + 2px);
  567. text-align:center;
  568. }
  569.  
  570. .linkpath {
  571. display:block;
  572. padding:0.8em 1em;
  573. border:.5px solid rgba({RGBcolor:post bottom border},0.420);
  574. background:rgba({RGBcolor:post bottom border},0.069);
  575. text-transform:uppercase;
  576. letter-spacing:1.3px;
  577. text-align:center;
  578. color:{color:permalink};
  579. }
  580.  
  581. .link-description {
  582. margin-top:var(--Heading-Margins);
  583. }
  584.  
  585. p:first-child {
  586. margin-top:0;
  587. }
  588.  
  589. p:last-child {
  590. margin-bottom:0;
  591. }
  592.  
  593. p {
  594. margin:var(--Paragraph-Margins) 0;
  595. }
  596.  
  597. ul, ol {
  598. margin-left:1.69em;
  599. }
  600.  
  601. ol li {
  602. padding-left:0.420em;
  603. }
  604.  
  605. ul li {
  606. position:relative;
  607. padding-left:0.25em;
  608. margin-left:calc(({select:post font size} * 1.420) - 3px);
  609. list-style:none;
  610. }
  611.  
  612. ul li:before {
  613. content:"";
  614. position:absolute;
  615. top:0;margin-top:calc((({select:post font size} * var(--LH)) - ({select:post font size} * 1.420)) / 2);
  616. left:0;margin-left:calc(({select:post font size} * -1.420) - 3px);
  617. display:inline-block;
  618. width:calc({select:post font size} * 1.420);
  619. height:calc({select:post font size} * 1.420);
  620. background-image:url({image:customlinks image});
  621. background-size:contain;
  622. background-repeat:no-repeat;
  623. }
  624.  
  625. .flex {
  626. display:flex;
  627. align-items:center;
  628. }
  629.  
  630. .flex.space-between {
  631. justify-content:space-between;
  632. }
  633.  
  634. /*------------ PAGE SCROLLBAR ------------*/
  635. body::-webkit-scrollbar {
  636. width:var(--Main-Scrollbar-Padding);
  637. height:var(--Main-Scrollbar-Padding);
  638. background-color:{color:background};
  639. }
  640.  
  641. body::-webkit-scrollbar-thumb {
  642. background-color:{color:scrollbar};
  643. border:calc((var(--Main-Scrollbar-Padding) - 1px) / 2) solid {color:background};
  644. border-top:calc(var(--Main-Scrollbar-Padding) * 0.69) solid {color:background};
  645. border-bottom:calc(var(--Main-Scrollbar-Padding) * 0.69) solid {color:background};
  646. }
  647.  
  648. body::-webkit-scrollbar-corner {
  649. background:{color:background};
  650. }
  651.  
  652. /*-------- ADDITIONAL CUSTOMIZATION OPTIONS --------*/
  653. :root {
  654. --Music-Player-Vinyl:{color:music player};
  655. --Vinyl-Icon-Size:17px;
  656. --Vinyl-Spin-Speed:3.5s;
  657. --Music-Controls:{color:music player};
  658. --Music-Controls-Size:12px;
  659. --Music-Title-Font-Size:11px;
  660. --Music-Title-Color:rgba({RGBcolor:music player},0.8);
  661.  
  662. --TopBar-Triangle-Size:12px;
  663. --InfoTab-Triangle-Size:46px;
  664.  
  665. --Desc-Padding:{select:description padding};
  666. --Description-Scrollbar-Padding:7px;
  667.  
  668. --Photos-Spacing:{select:photoset spacing};
  669.  
  670. --Posts-Avatar-Size:24px;
  671. --Captions-Gap:12px;
  672.  
  673. --Blockquote-Border-Color:rgba({RGBcolor:text},0.7);
  674.  
  675. --Paragraph-Margins:0.69em;
  676. --Heading-Margins:0.5em;
  677.  
  678. --NPF-Caption-Spacing:1em;
  679. --NPF-Image-Spacing:{select:photoset spacing};
  680.  
  681. --Audio-Post-Album-Image-Size:64px;
  682. --Audio-Post-PlayButton-Size:18px;
  683. --Audio-Post-PlayButton-Padding:8px;
  684.  
  685. --Text-LineHeight:{select:post text line height};
  686.  
  687. --Like-Button-Liked:#f75c64;
  688.  
  689. --Main-Scrollbar-Padding:13px;
  690. }
  691.  
  692. .posts .body > .npf_inst:first-child {
  693. margin-top:0!important;
  694. }
  695.  
  696. /*------------ BACKGROUND ------------*/
  697. .le-background {
  698. position:fixed;
  699. top:0;left:0;
  700. width:100%;
  701. height:100%;
  702. background-image:url({image:background image});
  703. background-attachment:fixed;
  704. background-size:cover;
  705. background-position:center;
  706. background-repeat:no-repeat;
  707. }
  708.  
  709. /*------------ TOP BAR ------------*/
  710. .topbar {
  711. position:fixed;
  712. top:0;left:0;
  713. width:calc(100% - ({select:top bar padding} * 2));
  714. padding:{select:top bar padding};
  715. background:{color:top bar background};
  716. border-bottom:2px solid {color:top bar bottom border 1};
  717. display:table;
  718. z-index:7;
  719. }
  720.  
  721. /* underside border: left */
  722. .topbar:before {
  723. content:"";
  724. position:absolute;
  725. bottom:0;margin-bottom:-2px;
  726. left:0;
  727. width:calc(50% - var(--TopBar-Triangle-Size));
  728. height:2px;
  729. background:linear-gradient(to right, {color:top bar bottom border 2}, {color:top bar bottom border 1});
  730. }
  731.  
  732. /* underside border: right */
  733. .topbar:after {
  734. content:"";
  735. position:absolute;
  736. bottom:0;margin-bottom:-2px;
  737. right:0;
  738. width:calc(50% - var(--TopBar-Triangle-Size));
  739. height:2px;
  740. background:linear-gradient(to right, {color:top bar bottom border 1}, {color:top bar bottom border 2});
  741. }
  742.  
  743. .tp {
  744. display:table-cell;
  745. vertical-align:middle;
  746. }
  747.  
  748. /*------------ MUSIC PLAYER ------------*/
  749. .glenjams-06 {
  750. position:absolute;
  751. top:50%;transform:translateY(-50%);
  752. left:0;
  753. z-index:5;
  754. }
  755.  
  756. .pasta {
  757. display:flex;
  758. align-items:center;
  759. }
  760.  
  761. .vinyl-spin {
  762. animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  763. -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  764. -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  765. -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  766. }
  767.  
  768. .vinyl-pause {
  769. animation-play-state:paused;
  770. -webkit-animation-play-state:paused;
  771. -moz-animation-play-state:paused;
  772. -o-animation-play-state:paused;
  773. }
  774.  
  775. @-webkit-keyframes recordspin {
  776. from {
  777. -webkit-transform:rotate(0deg);
  778. -o-transform:rotate(0deg);
  779. transform:rotate(0deg);
  780. }
  781. to {
  782. -webkit-transform:rotate(360deg);
  783. -o-transform:rotate(360deg);
  784. transform:rotate(360deg);
  785. }
  786. }
  787.  
  788. @keyframes recordspin {
  789. from {
  790. -ms-transform:rotate(0deg);
  791. -moz-transform:rotate(0deg);
  792. -webkit-transform:rotate(0deg);
  793. -o-transform:rotate(0deg);
  794. transform:rotate(0deg);
  795. }
  796. to {
  797. -ms-transform:rotate(360deg);
  798. -moz-transform:rotate(360deg);
  799. -webkit-transform:rotate(360deg);
  800. -o-transform:rotate(360deg);
  801. transform:rotate(360deg);
  802. }
  803. }
  804.  
  805. .vinyl, .vinyl svg {
  806. width:var(--Vinyl-Icon-Size);
  807. height:var(--Vinyl-Icon-Size);
  808. }
  809.  
  810. .music-controls {
  811. margin-left:10px;
  812. width:var(--Music-Controls-Size);
  813. overflow:hidden;
  814. cursor:pointer;
  815. }
  816.  
  817. .music-controls svg {
  818. width:var(--Music-Controls-Size);
  819. height:var(--Music-Controls-Size);
  820. color:var(--Music-Controls);
  821. stroke-width:1.5px;
  822. }
  823.  
  824. .pausee {display:none;}
  825.  
  826. .beff {display:none;}
  827. .aff {display:block;}
  828.  
  829. .music-title {
  830. margin-left:8px;
  831. font-family:Bai Jamjuree;
  832. font-size:var(--Music-Title-Font-Size);
  833. letter-spacing:.3px;
  834. color:var(--Music-Title-Color);
  835. }
  836.  
  837. .cheese {
  838. display:flex;
  839. align-items:center;
  840. justify-content:center;
  841. }
  842.  
  843. /*--------- TEXTBOXES ---------*/
  844. .textbox-left {
  845. position:absolute;
  846. margin-left:calc(-{select:top bar icon size} - 44px - {select:textbox width} - {select:textbox arrow size} - {select:textbox arrow spacing});
  847. height:100%;
  848. z-index:6;
  849. }
  850.  
  851. .boxtext {
  852. width:{select:textbox width};
  853. height:100%;
  854. background:{color:textbox background};
  855. }
  856.  
  857. .textbox-left .boxtext:after {
  858. content:"";
  859. position:absolute;
  860. top:50%;transform:translateY(-50%);
  861. right:0;margin-right:-{select:textbox arrow size};
  862. width:0;height:0;
  863. border-top:calc({select:textbox arrow size} * 0.8) solid transparent;
  864. border-bottom:calc({select:textbox arrow size} * 0.8) solid transparent;
  865. border-left:{select:textbox arrow size} solid {color:textbox background};
  866. }
  867.  
  868. .bubbletea {
  869. display:flex;
  870. align-items:center;
  871. padding:0 {select:textbox padding};
  872. padding-top:1px;
  873. height:100%;
  874. font-family:gotu;
  875. font-size:{select:textbox font size};
  876. text-transform:uppercase;
  877. letter-spacing:1.3px;
  878. color:{color:textbox text};
  879. line-height:{select:textbox line height};
  880. overflow:hidden;
  881. }
  882.  
  883. .textbox-left .bubbletea {
  884. justify-content:flex-end;
  885. text-align:right;
  886. }
  887.  
  888. .textbox-right {
  889. position:absolute;
  890. margin-left:calc({select:top bar icon size} + 44px + {select:textbox width} + {select:textbox arrow size} + {select:textbox arrow spacing});
  891. height:100%;
  892. text-align:left;
  893. }
  894.  
  895. .textbox-right .boxtext:after {
  896. content:"";
  897. position:absolute;
  898. top:50%;transform:translateY(-50%);
  899. left:0;margin-left:-{select:textbox arrow size};
  900. width:0;height:0;
  901. border-top:calc({select:textbox arrow size} * 0.8) solid transparent;
  902. border-bottom:calc({select:textbox arrow size} * 0.8) solid transparent;
  903. border-right:{select:textbox arrow size} solid {color:textbox background};
  904. }
  905.  
  906. /*--------- TOP BAR ICON ---------*/
  907. .kitty {
  908. margin-top:1px;
  909. margin-bottom:-1px;
  910. }
  911.  
  912. .waow {
  913. padding:2px;
  914. background:linear-gradient(to bottom, {color:top bar icon outer border 1}, {color:top bar icon outer border 2});
  915. border-radius:100%;
  916. }
  917.  
  918. /* icon: left arrow */
  919. .kitty:before {
  920. content:"";
  921. position:absolute;
  922. top:0;margin-top:calc(50% - 2px);
  923. left:0;margin-left:0px;
  924. width:8px;
  925. height:8px;
  926. transform:rotate(-45deg) translateY(-50%);
  927. background:linear-gradient(to bottom left, {color:top bar icon outer border 1}, {color:top bar icon outer border 2});
  928. z-index:-1;
  929. }
  930.  
  931. /* icon: right arrow */
  932. .kitty:after {
  933. content:"";
  934. position:absolute;
  935. top:0;margin-top:calc(50% - 2px);
  936. right:0;margin-right:-6px;
  937. width:8px;
  938. height:8px;
  939. transform:rotate(-45deg) translateY(-50%);
  940. background:linear-gradient(to bottom left, {color:top bar icon outer border 1}, {color:top bar icon outer border 2});
  941. z-index:-1;
  942. }
  943.  
  944. /* icon: top arrow */
  945. .waow:before {
  946. content:"";
  947. position:absolute;
  948. top:0;margin-top:-6px;
  949. left:0;margin-left:calc(50% - 1px);
  950. width:8px;
  951. height:8px;
  952. transform:rotate(-45deg) translateX(-50%);
  953. background:{color:top bar icon outer border 1};
  954. z-index:-1;
  955. }
  956.  
  957. /* icon: bottom arrow */
  958. .waow:after {
  959. content:"";
  960. position:absolute;
  961. bottom:0;margin-bottom:0px;
  962. left:0;margin-left:calc(50% - 1px);
  963. width:8px;
  964. height:8px;
  965. transform:rotate(-45deg) translateX(-50%);
  966. background:{color:top bar icon outer border 2};
  967. z-index:-1;
  968. }
  969.  
  970. .circ {
  971. padding:2px;
  972. background:{color:top bar background};
  973. border-radius:100%;
  974. }
  975.  
  976. .circ:before {
  977. content:"";
  978. position:absolute;
  979. top:0;left:0;
  980. width:100%;
  981. height:calc(100% + {select:top bar padding} + var(--TopBar-Triangle-Size));
  982. z-index:8;
  983. }
  984.  
  985. /* top bar icon inner shadow */
  986. .circ:after {
  987. content:"";
  988. position:absolute;
  989. top:0;margin-top:4px;
  990. left:0;margin-left:4px;
  991. width:calc(100% - 8px);
  992. height:calc(100% - 8px);
  993. box-shadow:inset 0 0 4px {color:top bar background};
  994. border-radius:100%;
  995. z-index:9;
  996. }
  997.  
  998. /* actual icon image */
  999. .yuuto {
  1000. width:{select:top bar icon size};
  1001. height:{select:top bar icon size};
  1002. background:{color:top bar background};
  1003. border:2px solid {color:top bar icon inner border};
  1004. border-radius:100%;
  1005. user-select:none;
  1006. }
  1007.  
  1008. /* topbar bottom triangle */
  1009. .tri-under {
  1010. position:absolute;
  1011. bottom:0;margin-bottom:calc((var(--TopBar-Triangle-Size) / -1.414) + 1px);
  1012. left:50%;
  1013. transform:translateX(-50%);
  1014. width:0;
  1015. height:0;
  1016. border-style:solid;
  1017. border-width:calc(var(--TopBar-Triangle-Size) / 1.414) var(--TopBar-Triangle-Size) 0 var(--TopBar-Triangle-Size);
  1018. border-color:{color:top bar background} transparent transparent transparent;
  1019. z-index:7;
  1020. }
  1021.  
  1022. /* topbar bottom triangle's border */
  1023. .tri-underunder {
  1024. position:absolute;
  1025. bottom:0;margin-bottom:calc(((var(--TopBar-Triangle-Size) + 4px) / -1.414));
  1026. left:50%;
  1027. transform-origin:top;
  1028. transform:translateX(-50%) scale(0.9,0.9);
  1029. width:0;
  1030. height:0;
  1031. border-style:solid;
  1032. border-width:calc((var(--TopBar-Triangle-Size) + 4px) / 1.414) calc(var(--TopBar-Triangle-Size) + 4px) 0 calc(var(--TopBar-Triangle-Size) + 4px);
  1033. border-color:{color:top bar bottom border 1} transparent transparent transparent;
  1034. z-index:6;
  1035. }
  1036.  
  1037. /*-------- SLIDE-DOWN INFO TAB THING --------*/
  1038. .hargao {
  1039. position:fixed;
  1040. margin:auto;
  1041. top:0;left:0;right:0;
  1042. margin-top:calc({select:top bar icon size} + ({select:top bar padding} * 2) + 12px + 2px - 2px);
  1043. text-align:center;
  1044. opacity:0;
  1045. z-index:4;
  1046. }
  1047.  
  1048. .hargao {
  1049. transition:margin-top 0.69s ease-in-out, opacity 0.69s ease-in-out;
  1050. }
  1051.  
  1052. .hg {
  1053. display:inline-block;
  1054. }
  1055.  
  1056. .peeholder {
  1057. margin-top:calc(var(--TopBar-Triangle-Size) / -1.414);
  1058. width:calc({select:info tab width} + ({select:info tab padding} * 2));
  1059. background:{color:info tab background};
  1060. border-left:2px solid {color:info tab border};
  1061. border-right:2px solid {color:info tab border};
  1062. }
  1063.  
  1064. /* panel text holder */
  1065. .piss-standing {
  1066. padding:{select:info tab padding};
  1067. padding-top:calc(var(--TopBar-Triangle-Size) + {select:info tab padding});
  1068. padding-bottom:calc({select:info tab padding} / 4);
  1069. }
  1070.  
  1071. /* make extra space for the triangle sides */
  1072. .piss-standing:after {
  1073. content:"";
  1074. position:absolute;
  1075. bottom:0;margin-bottom:-2px;
  1076. left:0;margin-left:-2px;
  1077. width:calc(100% + 4px);
  1078. height:4px;
  1079. background:{color:info tab border};
  1080. z-index:-1;
  1081. }
  1082.  
  1083. /* info tab triangle */
  1084. .peeholder:before {
  1085. content:"";
  1086. position:absolute;
  1087. bottom:0;
  1088. left:0;margin-left:-2px;
  1089. width:0;
  1090. height:0;
  1091. border-left:calc((({select:info tab width} + ({select:info tab padding} * 2)) / 2) + 2px) solid transparent;
  1092. border-right:calc((({select:info tab width} + ({select:info tab padding} * 2)) / 2) + 2px) solid transparent;
  1093. border-top:calc(var(--InfoTab-Triangle-Size) + 2px) solid {color:info tab border};
  1094. margin-bottom:calc((var(--InfoTab-Triangle-Size) * -1) - 4px);
  1095. pointer-events:none;
  1096. }
  1097.  
  1098. /* info tab triangle's border */
  1099. .peeholder:after {
  1100. content:"";
  1101. position:absolute;
  1102. bottom:0;
  1103. left:0;
  1104. width:0;
  1105. height:0;
  1106. border-left:calc(({select:info tab width} + ({select:info tab padding} * 2)) / 2) solid transparent;
  1107. border-right:calc(({select:info tab width} + ({select:info tab padding} * 2)) / 2) solid transparent;
  1108. border-top:var(--InfoTab-Triangle-Size) solid {color:info tab background};
  1109. margin-bottom:calc(var(--InfoTab-Triangle-Size) * -1);
  1110. pointer-events:none;
  1111. }
  1112.  
  1113. /* info tab text */
  1114. .infopanel-text {
  1115. font-family:libre franklin;
  1116. font-size:{select:info tab font size};
  1117. letter-spacing:.3px;
  1118. color:{color:info tab text};
  1119. text-align:justify;
  1120. line-height:{select:info tab text line height};
  1121. }
  1122.  
  1123. .infopanel-text b {
  1124. font-family:syne;
  1125. text-transform:uppercase;
  1126. letter-spacing:1px;
  1127. }
  1128.  
  1129. /*------------ SIDEBAR ------------*/
  1130. .leftside {
  1131. position:fixed;
  1132. bottom:0;
  1133. margin-bottom:calc({select:window margin} * 0.69);
  1134. width:{select:sidebar width};
  1135. visibility:hidden; /* fallback */
  1136. }
  1137.  
  1138. .characont {
  1139. margin-left:calc(((100% - {select:character image width}) / 2) + {select:character image left gap});
  1140. }
  1141.  
  1142. /* sidebar character image [render] */
  1143. .chara-image {
  1144. max-width:{select:sidebar width};
  1145. width:{select:character image width};
  1146. height:auto;
  1147. user-select:none;
  1148. }
  1149.  
  1150. /* glow container */
  1151. .glowy {
  1152. position:absolute;
  1153. bottom:0;
  1154. left:0;margin-left:{select:character glow left gap};
  1155. width:100%;
  1156. height:100%;
  1157. padding-top:100vh;
  1158. overflow:hidden;
  1159. }
  1160.  
  1161. /* actual glow */
  1162. .glowy:before {
  1163. content:"";
  1164. position:absolute;
  1165. bottom:0;margin-bottom:-30px;
  1166. left:0;margin-left:calc((100% - {select:character glow}) / 2);
  1167. width:{select:character glow};
  1168. height:100%;
  1169. transform:rotate(7deg);
  1170. background:linear-gradient(to left, transparent, rgba({RGBcolor:character glow},0.6), transparent);
  1171. }
  1172.  
  1173. /* description container */
  1174. .descont {
  1175. flex:1;
  1176. align-self:stretch;
  1177. }
  1178.  
  1179. .desna {
  1180. margin-left:calc({select:description width} * -1);
  1181. width:calc(100% + {select:description width});
  1182. height:calc(100% - {select:description padding}); /* fallback */
  1183. background:rgba({RGBcolor:description background},0.69);
  1184. }
  1185.  
  1186. .desu {
  1187. margin-top:{select:description padding};
  1188. height:calc(100% - ({select:description padding} * 2));
  1189.  
  1190. margin-left:{select:description padding};
  1191. width:calc(100% - ({select:description padding} * 2));
  1192. }
  1193.  
  1194. .desu::-webkit-scrollbar {
  1195. width:var(--Description-Scrollbar-Padding);
  1196. height:var(--Description-Scrollbar-Padding);
  1197. background-color:transparent;
  1198. }
  1199.  
  1200. .desu::-webkit-scrollbar-thumb {
  1201. background-color:rgba({RGBcolor:description text},0.420);
  1202. border:calc((var(--Description-Scrollbar-Padding) - 1px) / 2) solid transparent;
  1203. background-clip:padding-box;
  1204. }
  1205.  
  1206. .desu::-webkit-scrollbar-corner {
  1207. background:transparent;
  1208. }
  1209.  
  1210. /* actual description text */
  1211. .desc {
  1212. font-size:{select:description font size};
  1213. color:{color:description text};
  1214. text-align:justify;
  1215. line-height:{select:description text line height};
  1216. }
  1217.  
  1218. /* default navlinks [home/msg/archive/thm] */
  1219. .sidelinks {
  1220. margin-left:12px;
  1221. align-self:flex-end;
  1222. }
  1223.  
  1224. .sidelinks a {
  1225. display:block;
  1226. margin:3px 0;
  1227. padding:6px 9px;
  1228.  
  1229. border-left:0px solid transparent;
  1230.  
  1231. background:rgba({RGBcolor:sidelinks background},0.69);
  1232. font-family:chakra petch;
  1233. font-size:{select:sidelinks font size};
  1234. text-transform:uppercase;
  1235. letter-spacing:1px;
  1236. color:{color:sidelinks text};
  1237. line-height:1em;
  1238. display:table;
  1239.  
  1240. transition:all 0.420s ease-in-out;
  1241. }
  1242.  
  1243. .sidelinks a:hover {
  1244. border-left:3px solid rgba({RGBcolor:sidelinks border},0.8);
  1245. letter-spacing:2px;
  1246. }
  1247.  
  1248. .sidelinks a:first-child {margin-top:0}
  1249. .sidelinks a:last-child {margin-bottom:0}
  1250.  
  1251. /* custom links [bottom] */
  1252. .customlinks {
  1253. display:flex;
  1254. align-items:center;
  1255. justify-content:center;
  1256. margin-left:calc({select:description width} / -2);
  1257. margin-top:13px;
  1258. width:calc(100% - {select:description width}); /* fallback */
  1259. line-height:1em;
  1260. }
  1261.  
  1262. .customlinks a {
  1263. display:flex;
  1264. align-items:center;
  1265. justify-content:center;
  1266. margin:0 {select:customlinks spacing};
  1267. padding:{select:customlinks padding};
  1268. border:.5px solid rgba({RGBcolor:customlinks border},0.69);
  1269. border-radius:100%;
  1270. background:rgba({RGBcolor:customlinks background},0.69);
  1271. }
  1272.  
  1273. .cl-img {
  1274. width:{select:customlinks image size};
  1275. height:{select:customlinks image size};
  1276. }
  1277.  
  1278. .customlinks a:first-child {margin-left:0;}
  1279. .customlinks a:last-child {margin-right:0;}
  1280.  
  1281. /*------------ MAIN POSTS ------------*/
  1282. .maincont {
  1283. top:0;left:0;right:0;
  1284. margin:auto;
  1285. margin-top:calc({select:top bar icon size} + ({select:top bar padding} * 2) + 12px + 2px + (var(--TopBar-Triangle-Size) / 1.414) + {select:window margin});
  1286. font-family:Bai Jamjuree;
  1287. letter-spacing:.3px;
  1288. text-align:center;
  1289. }
  1290.  
  1291. .mc {
  1292. display:inline-block;
  1293. }
  1294.  
  1295. .mc > * {
  1296. text-align:left;
  1297. }
  1298.  
  1299. .postscont {
  1300. margin-left:calc({select:sidebar width} + {select:center gap});
  1301. margin-bottom:{select:window margin};
  1302. min-width:calc({select:post width} + ({select:post padding} * 2));
  1303. font-size:{select:post font size};
  1304. color:{color:text};
  1305. line-height:{select:post text line height};
  1306. }
  1307.  
  1308. .posts {
  1309. position:relative;
  1310. margin-bottom:{select:post spacing};
  1311. padding:{select:post padding};
  1312. background:rgba({RGBcolor:post},0.69);
  1313. width:{select:post width};
  1314. border-bottom:2px solid {color:post bottom border};
  1315. }
  1316.  
  1317. .posts blockquote {
  1318. margin:calc(var(--Posts-Avatar-Size) / 2);
  1319. padding-left:calc(var(--Posts-Avatar-Size) / 2);
  1320. border-left:1px solid var(--Blockquote-Border-Color);
  1321. }
  1322.  
  1323. /*------------ REBLOG STYLING ------------*/
  1324. .caption {
  1325. margin-top:var(--NPF-Caption-Spacing);
  1326. }
  1327.  
  1328. .caption a, .comment a {
  1329. padding-bottom:1px;
  1330. border-bottom:.5px solid rgba({RGBcolor:link},0.420);
  1331. }
  1332.  
  1333. .comment_container {
  1334. {block:ifreblogseparators}
  1335. padding:calc(var(--Captions-Gap) / 2) 0;
  1336. border-bottom:1px solid {color:reblog separators};
  1337. {block:iffullwidthreblogseparators}
  1338. margin:0 -{select:post padding};
  1339. padding-left:{select:post padding};
  1340. padding-right:{select:post padding};
  1341. {/block:iffullwidthreblogseparators}
  1342. {/block:ifreblogseparators}
  1343.  
  1344. {block:ifnotreblogseparators}
  1345. padding:calc(var(--Captions-Gap) / 2.5) 0;
  1346. {/block:ifnotreblogseparators}
  1347. }
  1348.  
  1349. .comment_container:first-of-type, .ccfirst {
  1350. padding-top:0px;
  1351. border-top:0px solid transparent;
  1352. }
  1353.  
  1354. .comment_container:last-of-type, .cclast {
  1355. padding-bottom:0px;
  1356. border-bottom:0px solid transparent;
  1357. }
  1358.  
  1359. .commenter {
  1360. margin:0.69em 0;
  1361. display:flex;
  1362. align-items:center;
  1363. }
  1364.  
  1365. /* reblogger icon frame */
  1366. .goldframe { line-height:0 }
  1367.  
  1368. .goldframe:before {
  1369. content:"";
  1370. position:absolute;
  1371. top:0;margin-top:-1px;
  1372. left:0;margin-left:-1px;
  1373. width:calc(100% + 2px);
  1374. height:calc(100% + 2px);
  1375. background:linear-gradient(145deg, {color:reblogger border 1}, {color:reblogger border 2});
  1376. border-radius:100%;
  1377. z-index:0;
  1378. }
  1379.  
  1380. /* reblogger icon inner shadow */
  1381. .goldframe:after {
  1382. content:"";
  1383. position:absolute;
  1384. top:0;
  1385. left:0;
  1386. width:100%;
  1387. height:100%;
  1388. box-shadow:inset 0 0 4px 0 {color:reblogger border shadow};
  1389. border-radius:100%;
  1390. z-index:0;
  1391. }
  1392.  
  1393. .commenter img {
  1394. width:var(--Posts-Avatar-Size);
  1395. height:var(--Posts-Avatar-Size);
  1396. border-radius:100%;
  1397. }
  1398.  
  1399. .commenter a, .commenter span {
  1400. padding-left:8px;
  1401. font-family:gotu;
  1402. text-transform:uppercase;
  1403. letter-spacing:1px;
  1404. font-size:calc({select:post font size} - 3px);
  1405. color:{color:reblogger};
  1406.  
  1407. padding-bottom:0;
  1408. border-bottom:none;
  1409. }
  1410.  
  1411. .commenter span a {
  1412. padding-left:0px;
  1413. }
  1414.  
  1415. .nosrc {
  1416. display:none;
  1417. margin-top:0;
  1418. }
  1419.  
  1420. /*----- ASK/ANSWER POSTS -----*/
  1421. .asker span, .asker a {
  1422. padding-left:0;
  1423. }
  1424.  
  1425. .asker, .asker span, .question_text {
  1426. text-align:center;
  1427. }
  1428.  
  1429. .asker span {
  1430. margin:auto;
  1431. }
  1432.  
  1433. .question_text {
  1434. margin-bottom:var(--Paragraph-Margins);
  1435. }
  1436.  
  1437. /*----- QUOTE POSTS -----*/
  1438. .quote-words {
  1439. padding:0 1em;
  1440. font-size:calc({select:post font size} - 1px);
  1441. text-transform:uppercase;
  1442. letter-spacing:1px;
  1443. text-align:center;
  1444. }
  1445.  
  1446. .quote-source {
  1447. margin-top:var(--Paragraph-Margins);
  1448. text-align:center;
  1449. }
  1450.  
  1451. .quote-source:before {
  1452. content:"";
  1453. position:absolute;
  1454. margin-left:calc(-20px - 8px);
  1455. top:50%;transform:translateY(-50%);
  1456. width:20px;
  1457. height:1px;
  1458. background:{color:text};
  1459. }
  1460.  
  1461. .quote-source .tumblr_blog {
  1462. display:none;
  1463. }
  1464.  
  1465. /*----- PHOTO POSTS -----*/
  1466. .photopic {
  1467. width:100%;
  1468. cursor:pointer;
  1469. }
  1470.  
  1471. /*----- PHOTOSETS -----*/
  1472. [photoset-layout] {
  1473. grid-gap:{select:photoset spacing};
  1474. }
  1475.  
  1476. [photoset-layout] div {
  1477. cursor:pointer;
  1478. }
  1479.  
  1480. /*----- CHAT POSTS -----*/
  1481. .chatholder {
  1482. }
  1483.  
  1484. .chat_label {
  1485. margin-right:2.5px;
  1486. font-size:calc({select:post font size} - 2px);
  1487. font-weight:bold;
  1488. text-transform:uppercase;
  1489. letter-spacing:1px;
  1490. }
  1491.  
  1492. .chat_content {
  1493. }
  1494.  
  1495. /*----- AUDIO -----*/
  1496. .tumblr_audio_player[width] {
  1497. width:100%!important;
  1498. height:0!important;
  1499. }
  1500.  
  1501. .audiocont {
  1502. position:absolute;
  1503. display:none;
  1504. overflow:hidden;
  1505. width:0!important;
  1506. height:0!important;
  1507. opacity:0;
  1508. }
  1509.  
  1510. .alcove {
  1511. position:relative;
  1512. width:var(--Audio-Post-Album-Image-Size);
  1513. height:var(--Audio-Post-Album-Image-Size);
  1514. }
  1515.  
  1516. .strawberries {
  1517. position:absolute;
  1518. top:0;margin-top:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
  1519. left:0;margin-left:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
  1520. width:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
  1521. height:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
  1522. }
  1523.  
  1524. .summer {
  1525. border:1px solid rgba({RGBcolor:text},0.420);
  1526. width:100%;
  1527. height:100%;
  1528. background:{color:post};
  1529. box-sizing:border-box;
  1530. border-radius:100%;
  1531. display:flex;
  1532. align-items:center;
  1533. justify-content:center;
  1534. line-height:1em;
  1535. cursor:pointer;
  1536. user-select:none;
  1537. }
  1538.  
  1539. .splay {
  1540. margin-top:2px;
  1541. }
  1542.  
  1543. .splay i, .spause i {
  1544. font-size:var(--Audio-Post-PlayButton-Size);
  1545. color:{color:text};
  1546. }
  1547.  
  1548. .spause {
  1549. display:none;
  1550. margin-top:2px;
  1551. }
  1552.  
  1553. .spause i {
  1554. font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
  1555. }
  1556.  
  1557. .a-lbum-img {
  1558. width:100%;
  1559. height:100%;
  1560. border-radius:3px;
  1561. visibility:hidden;
  1562. }
  1563.  
  1564. .tin {
  1565. width:calc(100% - var(--Audio-Post-Album-Image-Size));
  1566. height:var(--Audio-Post-Album-Image-Size);
  1567. }
  1568.  
  1569. .trackinfo {
  1570. margin-left:14px;
  1571. }
  1572.  
  1573. .t-name, .npf-audio-title {
  1574. font-weight:bold;
  1575. text-transform:uppercase;
  1576. letter-spacing:1px;
  1577. }
  1578.  
  1579. .dongload {
  1580. text-transform:initial!important;
  1581. border-bottom:none!important;
  1582. }
  1583.  
  1584. .dongload svg {
  1585. width:calc({select:post font size} + 4px);
  1586. height:calc({select:post font size} + 4px);
  1587. stroke:{color:post buttons};
  1588. stroke-width:1.5px;
  1589. pointer-events:none;
  1590. }
  1591.  
  1592. /*----- VIDEOS -----*/
  1593. video {
  1594. display:block;
  1595. outline:none;
  1596. cursor:default;
  1597. width:100%;
  1598. }
  1599.  
  1600. /*----- TAGS -----*/
  1601. .tagholder {
  1602. display:flex;
  1603. flex-wrap:wrap;
  1604. justify-content:flex-end;
  1605. text-align:right;
  1606. margin:0 -5px;
  1607. margin-top:var(--Captions-Gap);
  1608. font-family:gotu;
  1609. font-size:calc({select:post font size} - 4px);
  1610. text-transform:uppercase;
  1611. letter-spacing:1px;
  1612. line-height:1.5em;
  1613. }
  1614.  
  1615. .tagholder a {
  1616. display:block;
  1617. margin:0 5px;
  1618. color:{color:tags};
  1619. }
  1620.  
  1621. /*------------ PERMALINK ------------*/
  1622. .permarow {
  1623. display:flex;
  1624. align-items:center;
  1625. justify-content:space-between;
  1626. margin-top:var(--Captions-Gap);
  1627. padding-top:var(--Captions-Gap);
  1628. font-family:chakra petch;
  1629. text-transform:uppercase;
  1630. font-size:calc({select:post font size} - 2.5px);
  1631. letter-spacing:1px;
  1632. }
  1633.  
  1634. .permarow:before {
  1635. content:"";
  1636. position:absolute;
  1637. top:0;
  1638. left:0;margin-left:-{select:post padding};
  1639. width:calc(100% + ({select:post padding} * 2));
  1640. height:.5px;
  1641. background:rgba({RGBcolor:post bottom border},.25);
  1642. }
  1643.  
  1644. .permarow a {
  1645. color:{color:permalink};
  1646. }
  1647.  
  1648. .permaleft {
  1649. flex:1;
  1650. }
  1651.  
  1652. .permaright, .les-controls {
  1653. display:flex;
  1654. align-items:center;
  1655. }
  1656.  
  1657. .les-controls > a {
  1658. display:block;
  1659. margin-right:{select:post buttons spacing};
  1660. width:{select:post buttons size};
  1661. height:{select:post buttons size};
  1662. }
  1663.  
  1664. .les-controls svg {
  1665. display:block;
  1666. width:100%;
  1667. height:100%;
  1668. fill:{color:post buttons};
  1669. }
  1670.  
  1671. .permaright a {margin-right:{select:post buttons spacing};}
  1672. .permaright a:last-of-type {margin-right:0;}
  1673.  
  1674. .retweet svg {
  1675. transform:scaleX(-1);
  1676. }
  1677.  
  1678. .likecont {
  1679. position:relative;
  1680. }
  1681.  
  1682. .like_button {
  1683. position:absolute;
  1684. width:100%;
  1685. height:100%;
  1686. }
  1687.  
  1688. .like_button iframe {
  1689. position:absolute;
  1690. top:0;left:0;
  1691. width:100%;
  1692. height:100%;
  1693. opacity:0;
  1694. z-index:2;
  1695. }
  1696.  
  1697. .like_button.liked + .heart svg {
  1698. fill:var(--Like-Button-Liked)!important;
  1699. }
  1700.  
  1701. /*----- POST NOTES -----*/
  1702. .notescont {
  1703. width:calc({select:post width} + ({select:post padding} * 2));
  1704. background:rgba({RGBcolor:post},0.7);
  1705. }
  1706.  
  1707. ol.notes {
  1708. margin:0;
  1709. padding:{select:post padding};
  1710. font-size:calc({select:post font size} - 1px);
  1711. list-style:none;
  1712. }
  1713.  
  1714. ol.notes .avatar {
  1715. display:none;
  1716. }
  1717.  
  1718. ol.notes li {
  1719. padding:0;
  1720. margin-bottom:1.25em;
  1721. }
  1722.  
  1723. ol.notes li:last-child {
  1724. margin-bottom:0;
  1725. }
  1726.  
  1727. ol.notes a {
  1728. font-family:gotu;
  1729. font-size:calc({select:post font size} - 4px);
  1730. text-transform:uppercase;
  1731. letter-spacing:1.3px;
  1732. }
  1733.  
  1734. ol.notes blockquote {
  1735. margin:1em;
  1736. padding-left:1em;
  1737. border-left:var(--Blockquote-Border-Color);
  1738. }
  1739.  
  1740. .more_notes_link_container {
  1741. margin-top:{select:post padding};
  1742. font-family:gotu;
  1743. font-size:calc({select:post font size} - 3px);
  1744. text-transform:uppercase;
  1745. letter-spacing:1px;
  1746. }
  1747.  
  1748. /*------- PAGINATION -------*/
  1749. .botpagi {
  1750. margin-bottom:calc(-{select:window margin} + {select:post spacing});
  1751. width:100%;
  1752. }
  1753.  
  1754. .botpagi span {
  1755. padding:0 4px;
  1756. font-family:chakra petch;
  1757. font-size:calc({select:post font size} - 2.5px);
  1758. text-transform:uppercase;
  1759. letter-spacing:1.5px;
  1760. color:{color:text};
  1761. text-shadow:1px -1px 1px rgba({RGBcolor:background},0.69);
  1762. }
  1763.  
  1764. .botpagi svg {
  1765. width:calc({select:post font size} + 2px);
  1766. height:calc({select:post font size} + 2px);
  1767. color:{color:text};
  1768. }
  1769.  
  1770. .pn {
  1771. margin-left:auto;
  1772. }
  1773.  
  1774. a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
  1775. padding-bottom:0!important;
  1776. border-bottom:none!important;
  1777. }
  1778.  
  1779. .spotify_audio_player {
  1780. height:80px!important;
  1781. }
  1782.  
  1783. {CustomCSS}
  1784. </style>
  1785.  
  1786. </head>
  1787.  
  1788. <body>
  1789. <div class="le-background"></div>
  1790.  
  1791. <div class="topbar">
  1792. <div class="tp">
  1793. <!-------MUSIC PLAYER------->
  1794. {block:ifshowmusicplayer}
  1795. <div class="glenjams-06">
  1796. <div class="pasta">
  1797. <div class="vinyl"></div>
  1798. <div class="music-controls">
  1799. <div class="playy"><i data-feather="play"></i></div>
  1800. <div class="pausee"><i data-feather="pause"></i></div>
  1801. </div>
  1802. <div class="music-title">{text:music player song name}</div>
  1803.  
  1804. <audio id="audio" src="{text:music player song mp3 url}" type="audio"></audio>
  1805. </div><!--pasta-->
  1806. </div><!--glenjams-06-->
  1807. {/block:ifshowmusicplayer}
  1808. <!----end music player---->
  1809.  
  1810. <div class="cheese">
  1811. {block:iftextboxleft}
  1812. <div class="textbox-left">
  1813. <div class="boxtext">
  1814. <div class="bubbletea">{text:textbox left}</div>
  1815. </div>
  1816. </div>
  1817. {/block:iftextboxleft}
  1818.  
  1819. {block:iftextboxright}
  1820. <div class="textbox-right">
  1821. <div class="boxtext">
  1822. <div class="bubbletea">{text:textbox right}</div>
  1823. </div>
  1824. </div>
  1825. {/block:iftextboxright}
  1826.  
  1827. <div class="kitty">
  1828. <div class="waow">
  1829. <div class="circ">
  1830. <img class="yuuto" src="{image:top bar icon}">
  1831. </div>
  1832. </div>
  1833. </div>
  1834. </div><!--cheese-->
  1835. </div><!--tp-->
  1836.  
  1837. <div class="tri-under"></div>
  1838. <div class="tri-underunder"></div>
  1839. </div><!--end topbar-->
  1840.  
  1841.  
  1842. <div class="hargao">
  1843. <div class="hg">
  1844. <div class="peeholder">
  1845. <div class="piss-standing">
  1846. <div class="infopanel-text">{text:info panel text}</div>
  1847. </div>
  1848. </div>
  1849. </div>
  1850. </div>
  1851.  
  1852.  
  1853.  
  1854. <div class="maincont">
  1855. <div class="mc">
  1856. <div class="leftside">
  1857. <div class="characont">
  1858. <div class="glowy"></div>
  1859. <img class="chara-image" src="{image:character image}">
  1860. </div>
  1861.  
  1862. <div class="flex">
  1863. <div class="descont">
  1864. <div class="desna">
  1865. <div class="desu">
  1866. <div class="desc">
  1867. {Description}
  1868. </div>
  1869. </div>
  1870. </div>
  1871. </div>
  1872.  
  1873. <div class="sidelinks">
  1874. <a href="/">index</a>
  1875. <a href="/ask">message</a>
  1876. <a href="/archive">archive</a>
  1877. <a href="//glenthemes.tumblr.com" title="theme by glenthemes">theme</a>
  1878. </div>
  1879. </div><!--flex-->
  1880.  
  1881. <div class="customlinks">
  1882. {block:ifcustomlink1name}
  1883. <a href="{text:customlink 1 URL}" title="{text:customlink 1 name}">
  1884. <img class="cl-img" src="{image:customlinks image}">
  1885. </a>
  1886. {/block:ifcustomlink1name}
  1887.  
  1888.  
  1889. {block:ifcustomlink2name}
  1890. <a href="{text:customlink 2 URL}" title="{text:customlink 2 name}">
  1891. <img class="cl-img" src="{image:customlinks image}">
  1892. </a>
  1893. {/block:ifcustomlink2name}
  1894.  
  1895.  
  1896. {block:ifcustomlink3name}
  1897. <a href="{text:customlink 3 URL}" title="{text:customlink 3 name}">
  1898. <img class="cl-img" src="{image:customlinks image}">
  1899. </a>
  1900. {/block:ifcustomlink3name}
  1901.  
  1902.  
  1903. {block:ifcustomlink4name}
  1904. <a href="{text:customlink 4 URL}" title="{text:customlink 4 name}">
  1905. <img class="cl-img" src="{image:customlinks image}">
  1906. </a>
  1907. {/block:ifcustomlink4name}
  1908.  
  1909.  
  1910. {block:ifcustomlink5name}
  1911. <a href="{text:customlink 5 URL}" title="{text:customlink 5 name}">
  1912. <img class="cl-img" src="{image:customlinks image}">
  1913. </a>
  1914. {/block:ifcustomlink5name}
  1915. </div><!--end customlinks-->
  1916. </div><!--end left sidebar-->
  1917.  
  1918.  
  1919.  
  1920. <!-------- MAIN POSTS -------->
  1921. <div class="postscont">
  1922.  
  1923. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1924. <div class="posts {block:ifreblogseparators}oui{/block:ifreblogseparators}" id="{PostID}" post-type="{PostType}">
  1925.  
  1926. <!------ POST TITLE ------>
  1927. {block:Title}
  1928. <h1 class="title">{Title}</h1>
  1929. {/block:Title}
  1930.  
  1931.  
  1932. <!-- adds OP source if post does not have caption -->
  1933. {block:RebloggedFrom}
  1934. <div class="commenter nosrc">
  1935. <img src="{ReblogRootPortraitURL-64}">
  1936. <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1937. </div>
  1938. {/block:RebloggedFrom}
  1939.  
  1940.  
  1941. <!------ TEXT POSTS ------>
  1942. {block:Text}
  1943. <div class="body">
  1944. {block:NotReblog}{Body}{/block:NotReblog}
  1945. {block:RebloggedFrom}
  1946. {block:Reblogs}
  1947. <div class="comment_container">
  1948. <div class="commenter source-head">
  1949. <img src="{PortraitURL-64}">
  1950. <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
  1951. </div>
  1952. <div class="comment">{Body}</div>
  1953. </div>
  1954. {/block:Reblogs}
  1955. {/block:RebloggedFrom}
  1956. </div>
  1957. {/block:Text}
  1958. <!------ END TEXT POSTS ------>
  1959.  
  1960.  
  1961. <!------ SINGLE PHOTO ------>
  1962. {block:Photo}
  1963. <a class="single" onclick="Tumblr.Lightbox.init([{ width:{PhotoWidth-HighRes}, height:{PhotoHeight-HighRes}, low_res:'{PhotoURL-500}', high_res:'{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img class="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
  1964. {/block:Photo}
  1965. <!------ END SINGLE PHOTO ------>
  1966.  
  1967.  
  1968.  
  1969.  
  1970. <!------ PHOTOSETS ------>
  1971. {block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}"></div>{/block:Photos}</div>{/block:Photoset}
  1972. <!------ END PHOTOSETS ------>
  1973.  
  1974.  
  1975.  
  1976. <!------ QUOTE POSTS ------>
  1977. {block:Quote}
  1978. <div class="quote-words">{Quote}</div>
  1979. {block:Source}
  1980. <div class="quote-source">{Source}</div>
  1981. {/block:Source}
  1982. {/block:Quote}
  1983. <!------ END QUOTE POSTS ------>
  1984.  
  1985.  
  1986. <!------ LINK POSTS ------>
  1987. {block:Link}
  1988. <a href="{URL}" class="linkpath{block:Description} has-desc{/block:Description}" {Target}>{Name} &gt;</a>
  1989. {block:Description}
  1990. <div class="link-description">
  1991. {block:NotReblog}{Description}{/block:NotReblog}
  1992. {block:RebloggedFrom}
  1993. {block:Reblogs}
  1994. <div class="comment_container">
  1995. <div class="commenter">
  1996. <img src="{PortraitURL-64}">
  1997. <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
  1998. </div>
  1999. <div class="comment">{Body}</div>
  2000. </div>
  2001. {/block:Reblogs}
  2002. {/block:RebloggedFrom}
  2003. </div>
  2004. {/block:Description}
  2005. {/block:Link}
  2006. <!------ END LINK POSTS ------>
  2007.  
  2008.  
  2009. <!------ CHAT POSTS ------>
  2010. {block:Chat}
  2011. <div class="chatholder">
  2012. {block:Lines}
  2013. {block:Label}
  2014. <span class="chat_label">{Label}</span>
  2015. {/block:Label}
  2016.  
  2017. <span class="chat_content">{Line}</span>
  2018. {/block:Lines}
  2019. </div>
  2020. {/block:Chat}
  2021. <!------ END CHAT ------>
  2022.  
  2023.  
  2024.  
  2025. <!------ AUDIO POSTS ------>
  2026. {block:Audio}
  2027. <div class="flex">
  2028. <div class="audiocont">
  2029. {AudioEmbed}
  2030. </div>
  2031.  
  2032. <div class="alcove">
  2033. <img class="a-lbum-img">
  2034.  
  2035. <div class="strawberries">
  2036. <div class="summer">
  2037. <div class="splay">
  2038. <i class="material-icons">play_arrow</i>
  2039. </div>
  2040. <div class="spause">
  2041. <i class="material-icons">pause</i>
  2042. </div>
  2043. </div><!--summer-->
  2044. </div>
  2045. </div>
  2046.  
  2047. <div class="tin flex space-between">
  2048. <div class="trackinfo">
  2049. {block:TrackName}
  2050. <div class="t-name">{TrackName}</div>
  2051. {/block:TrackName}
  2052.  
  2053. {block:Artist}
  2054. <div class="t-artist">{Artist}</div>
  2055. {/block:Artist}
  2056. </div><!--trackinfo-->
  2057.  
  2058. <a class="dongload" title="download">
  2059. <i data-feather="download"></i>
  2060. </a>
  2061. </div><!--flex-->
  2062. </div><!--oofy-->
  2063. {/block:Audio}
  2064. <!------ END AUDIO ------>
  2065.  
  2066.  
  2067.  
  2068. <!------ VIDEO POSTS ------>
  2069. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  2070. <!------ END VIDEOS ------>
  2071.  
  2072.  
  2073.  
  2074. <!------ ANSWER POSTS ------>
  2075. {block:Answer}
  2076. <div class="comment_container">
  2077. <div class="asker commenter">
  2078. <span>{Asker} asked:</span>
  2079. </div>
  2080. <div class="question_text">{Question}</div>
  2081. </div>
  2082. {block:Answerer}
  2083. <div class="comment_container">
  2084. <div class="answerer commenter">
  2085. <img src="{AnswererPortraitURL-48}">
  2086. <span>{Answerer} answered:</span>
  2087. </div>
  2088. <div class="answer_text">{Answer}</div>
  2089. </div>
  2090. {block:Reblogs}
  2091. <div class="comment_container">
  2092. <div class="replier commenter">
  2093. <img src="{PortraitURL-64}">
  2094. <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
  2095. </div>
  2096. <div class="reply">{Body}</div>
  2097. </div>
  2098. {/block:Reblogs}
  2099. {/block:Answerer}
  2100. {block:NotReblog}
  2101. <div class="comment_container">
  2102. <div class="answerer commenter">
  2103. <img src="{PortraitURL-48}">
  2104. <a href="{Permalink}">{Name}</a>
  2105. </div><!--answerer-->
  2106. <div class="answer_text">{Answer}</div>
  2107. </div><!--answer-container-->
  2108. {/block:NotReblog}
  2109. {/block:Answer}
  2110. <!------ END ANSWER ------>
  2111.  
  2112. {block:Caption}
  2113. <div class="caption">
  2114. {block:NotReblog}{Caption}{/block:NotReblog}
  2115. {block:RebloggedFrom}
  2116. {block:Reblogs}
  2117. <div class="comment_container">
  2118. <div class="commenter">
  2119. <img src="{PortraitURL-64}">
  2120. <a href="{block:HasPermalink}{Permalink}{/block:HasPermalink}">{Username}</a>
  2121. </div><!--commenter-->
  2122. <div class="comment">{Body}</div>
  2123. </div><!--comment-container-->
  2124. {/block:Reblogs}
  2125. {/block:RebloggedFrom}
  2126. </div><!--caption-->
  2127. {/block:Caption}
  2128.  
  2129.  
  2130.  
  2131. {block:HasTags}
  2132. <div class="tagholder">
  2133. {block:Tags}
  2134. <a href="{TagURL}">#{Tag}</a>
  2135. {/block:Tags}
  2136. </div>
  2137. {/block:HasTags}
  2138.  
  2139.  
  2140.  
  2141. {block:Date}
  2142. <div class="permarow">
  2143. <div class="permaleft">
  2144. {block:IndexPage}
  2145. <a href="{Permalink}">{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero} &emsp; {NoteCountWithLabel}</a>
  2146. {/block:IndexPage}
  2147.  
  2148. {block:PermalinkPage}
  2149. {block:NotReblog}Posted{/block:NotReblog}
  2150. {block:RebloggedFrom}Reblogged{/block:RebloggedFrom}
  2151. on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}
  2152. &emsp;{NoteCountWithLabel}
  2153. {/block:PermalinkPage}
  2154. </div>
  2155.  
  2156. <div class="permaright">
  2157. {block:IndexPage}
  2158. <div class="les-controls flex">
  2159. <a href="{ReblogURL}" target="_blank">
  2160. <span class="retweet"></span>
  2161. </a>
  2162.  
  2163. <a class="likecont like">
  2164. {LikeButton}
  2165. <span class="heart"></span>
  2166. </a>
  2167. </div>
  2168. {/block:IndexPage}
  2169.  
  2170.  
  2171. {block:PermalinkPage}
  2172. {block:RebloggedFrom}
  2173. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2174. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  2175. {/block:RebloggedFrom}
  2176. {/block:PermalinkPage}
  2177. </div>
  2178. </div><!--permarow-->
  2179. {/block:Date}
  2180.  
  2181. </div><!--posts-->
  2182.  
  2183. {block:PostNotes}
  2184. <div class="notescont">
  2185. {PostNotes}
  2186. </div>
  2187. {/block:PostNotes}
  2188.  
  2189. {/block:Posts}
  2190.  
  2191.  
  2192. <!------- PAGINATION ------->
  2193. {block:Pagination}
  2194. <div class="botpagi flex space-between">
  2195. {block:PreviousPage}
  2196. <a class="flex" href="{PreviousPage}">
  2197. <i data-feather="chevron-left"></i>
  2198. <span>previous</span>
  2199. </a>
  2200. {/block:PreviousPage}
  2201.  
  2202. {block:NextPage}
  2203. <a class="flex pn" href="{NextPage}">
  2204. <span>next</span>
  2205. <i data-feather="chevron-right"></i>
  2206. </a>
  2207. {/block:NextPage}
  2208. </div><!--botpagi-->
  2209. {/block:Pagination}
  2210.  
  2211. </div><!--postscont-->
  2212. </div><!--mc-->
  2213. </div><!--maincont-->
  2214.  
  2215. <!---- more scripts ---->
  2216. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2217.  
  2218. <script>
  2219. initPhotosets();
  2220. feather.replace();
  2221. </script>
  2222.  
  2223. <script>
  2224. $(document).ready(function(){
  2225. $('img[src*="media.tumblr.com"]').each(function(){
  2226. var newsrc = $(this).attr('src').replace('gifv','gif');
  2227. $(this).attr('src', newsrc);
  2228. });
  2229.  
  2230. $('a[href*="media.tumblr.com"]').each(function(){
  2231. var newhref = $(this).attr('href').replace('gifv','gif');
  2232. $(this).attr('href', newhref);
  2233. });
  2234.  
  2235. $('div[data-lowres*="media.tumblr.com').each(function(){
  2236. var newdata = $(this).attr('data-lowres').replace('gifv','gif');
  2237. $(this).attr('data-lowres', newdata);
  2238. });
  2239.  
  2240. $('div[data-highres*="media.tumblr.com').each(function(){
  2241. var newdata = $(this).attr('data-highres').replace('gifv','gif');
  2242. $(this).attr('data-highres', newdata);
  2243. });
  2244. });
  2245. </script>
  2246.  
  2247. </body>
  2248. </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!