glenthemes

Theme [14]: Bloodlust

Dec 13th, 2015 (edited)
33,005
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 76.46 KB | None | 0 0
  1. <!----------------------------------------------------
  2. Theme [14]: Bloodlust
  3. Made by glenthemes
  4.  
  5. Initial release: 2015/12/13
  6. Revamp v1 date: 2020/03/20
  7. v2 date: 2021/11/18
  8. Last updated: 2025/06/09
  9.  
  10. What's new:
  11. ✱ minor fixes to npf quotes and chats
  12.  
  13. ------------------------------------------------------
  14.  
  15. EDITING GUIDE:
  16.  
  17. https://docs.google.com/presentation/d/19QzgXtEY1JawYEh8vudyXcjFBZT5wgKvDxUCt0bHDqE/view
  18.  
  19. ------------------------------------------------------
  20.  
  21. TERMS OF USE:
  22. 1) Do not remove the credit.
  23. 2) Do not remove parts of the code without my permission.
  24. 3) Do not claim my codes as your own.
  25. 4) Do not use my works as base codes.
  26. 5) You may add widgets to my themes and pages.
  27.  
  28. CREDITS:
  29. ┻┳|・ω・)ノ ~ glencredits.tumblr.com/bloodlust
  30. ----------------------------------------------------->
  31. <!DOCTYPE html>
  32. <html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" portrait="{PortraitURL-64}" {block:TagPage}tag-page{/block:TagPage}>
  33.  
  34. <head>
  35.  
  36. <title>{Title}</title>
  37. <link rel="shortcut icon" href="{Favicon}">
  38.  
  39. {block:Description}
  40. <meta name="description" content="{MetaDescription}">
  41. {/block:Description}
  42.  
  43. <!-------- FONTS -------->
  44. <!-- google fonts -->
  45. <link href="//fonts.googleapis.com/css?family=Work+Sans|Cousine|Libre+Franklin|Manrope:500|Karla|Open+Sans|Averia+Serif+Libre|Vollkorn|Abril+Fatface|Tenor+Sans" rel="stylesheet">
  46.  
  47. <!-- caslon fs -->
  48. <link rel="stylesheet" href="//assets.tumblr.com/fonts/caslonfs/stylesheet.css">
  49.  
  50. <!-------- ICON FONTS -------->
  51. <!-- phosphor icons -->
  52. <link rel="stylesheet" href="//unpkg.com/[email protected]/src/css/phosphor.css">
  53.  
  54. <!-- cappucicons -->
  55. <link href="//cappuccicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  56.  
  57. <!-- iconsax -->
  58. <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  59. <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
  60.  
  61. <!-- boobstrap -->
  62. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  63.  
  64. <!-------- PRELOAD -------->
  65. <link rel="preload" href="{image:header image}" as="image">
  66. <link rel="preload" href="//glen-assets.github.io/fonts/Canela-Regular-Web.ttf" as="font">
  67.  
  68. <!-------- JQUERY -------->
  69. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  70.  
  71. <!-------- THEME SCRIPTS -------->
  72. <script src="//npf-images-v3.github.io/script.js"></script>
  73. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  74.  
  75. <link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  76.  
  77. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  78.  
  79. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  80. <script src="//glen-themes.gitlab.io/thms/14/lactose-intolerance.js"></script>
  81. <script src="//glen-themes.gitlab.io/thms/14/milk-tea.js"></script>
  82.  
  83. <script src="//smart-sticky.gitlab.io/i/init.js"></script>
  84. <script>
  85. document.addEventListener("DOMContentLoaded", () => {
  86. smartSticky({
  87. scroll_container: ".ensoot",
  88. stick: ".left-sidebar, .right-sidebar"
  89. })
  90. })
  91. </script>
  92.  
  93. <!-- unblue polls -->
  94. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  95. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  96. <style unblue-polls>
  97. .poll-post {
  98. --Poll-Question-Font-Size: var(--Body-Font-Size);
  99.  
  100. --Poll-Option-Background-Color: transparent;
  101. --Poll-Option-Corner-Rounding: 0px;
  102. --Poll-Option-Border-Size: 1px;
  103. --Poll-Option-Border-Color: var(--Post-Borders-Inner);
  104. --Poll-Option-Padding: 10px;
  105. --Poll-Option-Font-Size: var(--Body-Font-Size);
  106. --Poll-Option-Spacing: 10px;
  107. --Poll-Option-Text-Color: var(--Body-Text-Color);
  108.  
  109. --Poll-Option-HOVER-Border-Color: var(--Post-Borders-Inner);
  110. --Poll-Option-HOVER-Background-Color: transparent;
  111. --Poll-Option-HOVER-Text-Color: var(--Body-Text-Color);
  112. --Poll-Option-HOVER-Speed: 0.4s;
  113. }
  114.  
  115. .poll-see-results {
  116. padding-bottom:0!important;
  117. border-bottom:none!important;
  118. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  119. text-transform:uppercase;
  120. letter-spacing:0.5px;
  121. }
  122. </style>
  123.  
  124. <!-- npf audio player -->
  125. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  126. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  127. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  128. <script>
  129. tumblr_npf_audio({
  130. emptyTitleText: "Untitled track",
  131. emptyArtistText: "Untitled artist",
  132. emptyAlbumText: "Untitled album",
  133.  
  134. titleLabel: "",
  135. artistLabel: "",
  136. albumLabel: ""
  137. });
  138. </script>
  139. <style edit-npf-audio-player>
  140. .npf-audio-wrapper {
  141. --NPF-Audio-Buttons-Size: var(--Audio-Post-Buttons-Size);
  142. --NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
  143. --NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
  144. --NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
  145. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Size);
  146. --NPF-Audio-Image-Spacing: 0px;
  147.  
  148. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  149. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  150. }
  151.  
  152. .npf-audio-wrapper {
  153. position:relative;
  154. background:{color:special background};
  155. z-index:0;
  156. }
  157.  
  158. .npf-audio-background {
  159. margin-left:var(--p);
  160. }
  161.  
  162. .npf-audio-play, .npf-audio-pause {
  163. position:relative;
  164. z-index:0;
  165. }
  166.  
  167. .npf-audio-play:after, .npf-audio-pause:after {
  168. content:"";
  169. position:absolute;
  170. top:0;left:0;
  171. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  172. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  173. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  174. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  175. background:var(--Audio-Post-Buttons-Background);
  176. border-radius:100%;
  177. z-index:-1;
  178. }
  179.  
  180. .npf-audio-play svg { margin-left:1px; }
  181. .npf-audio-pause svg { margin-left:0; }
  182.  
  183. figcaption.audio-caption,
  184. figcaption.audio-caption ~ audio[controls]{
  185. display:none;
  186. }
  187.  
  188. .npf-audio-image {
  189. position:absolute;
  190. top:0;left:0;
  191. z-index:-1;
  192. }
  193. </style>
  194.  
  195. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  196. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  197.  
  198. <!-------- CUSTOMIZE PANEL OPTIONS -------->
  199. <!-- hi if you're reading this, GO BACK to edit! -->
  200. <!-- editing stuff here (the meta names) won't do anything -->
  201. <meta name="image:top bar icon" content="//64.media.tumblr.com/a7a2734ed0af7053247dcc7e4c2e8743/aa56c24116a90bd2-42/s2048x3072/3173d13466cd4f08688b3b479d5dcda204e20945.png">
  202. <meta name="image:header image" content="//64.media.tumblr.com/d2ba94111296ea9b986d405b68274c6b/aa56c24116a90bd2-a7/s2048x3072/2ccbdecc910fb487b66032cad5ba98f93bd52db8.png">
  203.  
  204. <meta name="image:sidebar banner 1" content="//64.media.tumblr.com/7c2e7a845810c922c7ae15a0de787160/aa56c24116a90bd2-97/s2048x3072/e3455e11e4b69c296ca8add8c7d2501e5696fa1b.gif">
  205. <meta name="image:sidebar banner 2" content="//64.media.tumblr.com/4555dfb0f792547cba9db169b9153869/aa56c24116a90bd2-e4/s2048x3072/69e6f4b54125f93354c70b49897188c253aabe75.gif">
  206.  
  207. <meta name="image:background image" content="">
  208.  
  209. <!----- TOP BAR COLORS ----->
  210. <meta name="color:top bar background" content="#040404">
  211. <meta name="color:top bar icon border" content="#2a2727">
  212. <meta name="color:top left title" content="#a39795">
  213. <meta name="color:navlinks" content="#b49a97">
  214.  
  215. <meta name="color:top center title" content="#9b7f7d">
  216. <meta name="color:custom links" content="#b49a97">
  217.  
  218. <meta name="color:searchbar text" content="#b49a97">
  219. <meta name="color:searchbar underline" content="#45403f">
  220. <meta name="color:searchbar button" content="#b49a97">
  221.  
  222. <!----- HEADER COLORS ----->
  223. <meta name="color:header background" content="#040404">
  224.  
  225. <!----- SIDEBAR COLORS ----->
  226. <meta name="color:sidebar heading" content="#977969">
  227. <meta name="color:sidebar dividers" content="#625b5a">
  228. <meta name="color:sidebar hyperlinks" content="#af8465">
  229. <meta name="color:sidebar blog names" content="#aa836f">
  230. <meta name="color:sidebar social icons" content="#a0705f">
  231. <meta name="color:sidebar stat label" content="#a77b6b">
  232.  
  233. <!----- MAIN COLORS ----->
  234. <meta name="color:background" content="#040404">
  235.  
  236. <!----- POST COLORS ----->
  237. <meta name="color:post" content="#040404">
  238. <meta name="color:text" content="#a39795">
  239. <meta name="color:link" content="#aa836f">
  240.  
  241. <meta name="color:post borders outer" content="#252221">
  242. <meta name="color:post borders inner" content="#3a3635">
  243.  
  244. <meta name="color:special border" content="#3a3635">
  245. <meta name="color:special background" content="#040404">
  246. <meta name="color:special text" content="#a39795">
  247.  
  248. <meta name="color:reblogger" content="#a77b6b">
  249.  
  250. <meta name="color:tags" content="#978a87">
  251. <meta name="color:permalink" content="#a4928e">
  252. <meta name="color:permalink background" content="#040404">
  253. <meta name="color:permalink border" content="#252221">
  254.  
  255. <meta name="color:post buttons" content="#988580">
  256. <meta name="color:like button liked" content="#c06751">
  257.  
  258. <meta name="color:post dividers" content="#625b5a">
  259.  
  260. <meta name="color:scrollbar" content="#625b5a">
  261. <meta name="color:scrollbar background" content="#040404">
  262.  
  263. <meta name="color:text selection background" content="#2c2221">
  264. <meta name="color:text selected" content="#a39795">
  265.  
  266. <!-------- DROPDOWN OPTIONS -------->
  267. <meta name="select:background image type" title="small" content="repeat">
  268. <meta name="select:background image type" title="large" content="full">
  269.  
  270. <meta name="select:font" title="Vollkorn" content="Vollkorn">
  271. <meta name="select:font" title="Libre Franklin" content="Libre Franklin">
  272. <meta name="select:font" title="Open Sans" content="Open Sans">
  273. <meta name="select:font" title="Manrope" content="Manrope">
  274. <meta name="select:font" title="Karla" content="Karla">
  275. <meta name="select:font" title="Tenor Sans" content="Tenor Sans">
  276.  
  277. <meta name="select:font size" title="12px" content="12px">
  278. <meta name="select:font size" title="10px" content="10px">
  279. <meta name="select:font size" title="11px" content="11px">
  280. <meta name="select:font size" title="13px" content="13px">
  281. <meta name="select:font size" title="14px" content="14px">
  282. <meta name="select:font size" title="15px" content="15px">
  283.  
  284. <!----- HEADER OPTIONS ----->
  285. <meta name="select:-------------------">
  286.  
  287. <meta name="select:header image position" title="center center" content="center center">
  288. <meta name="select:header image position" title="top left" content="top left">
  289. <meta name="select:header image position" title="top center" content="top center">
  290. <meta name="select:header image position" title="top right" content="top right">
  291. <meta name="select:header image position" title="center left" content="center left">
  292. <meta name="select:header image position" title="center right" content="center right">
  293. <meta name="select:header image position" title="bottom left" content="bottom left">
  294. <meta name="select:header image position" title="bottom center" content="bottom center">
  295. <meta name="select:header image position" title="bottom right" content="bottom right">
  296.  
  297. <!-------- SIDEBAR OPTIONS -------->
  298. <meta name="select:sidebar width" title="250px" content="250px">
  299. <meta name="select:sidebar width" title="175px" content="175px">
  300. <meta name="select:sidebar width" title="200px" content="200px">
  301. <meta name="select:sidebar width" title="225px" content="225px">
  302. <meta name="select:sidebar width" title="175px" content="175px">
  303.  
  304. <meta name="select:sidebar box 1 text align" title="left" content="left">
  305. <meta name="select:sidebar box 1 text align" title="right" content="right">
  306. <meta name="select:sidebar box 1 text align" title="center" content="center">
  307. <meta name="select:sidebar box 1 text align" title="justify" content="justify">
  308.  
  309. <!-------- GAPS BETWEEN POST & SIDEBARS -------->
  310. <meta name="select:center gaps" title="60px" content="60px">
  311. <meta name="select:center gaps" title="20px" content="20px">
  312. <meta name="select:center gaps" title="30px" content="30px">
  313. <meta name="select:center gaps" title="35px" content="35px">
  314. <meta name="select:center gaps" title="40px" content="40px">
  315. <meta name="select:center gaps" title="45px" content="45px">
  316. <meta name="select:center gaps" title="55px" content="55px">
  317. <meta name="select:center gaps" title="50px" content="50px">
  318. <meta name="select:center gaps" title="55px" content="55px">
  319. <meta name="select:center gaps" title="65px" content="65px">
  320. <meta name="select:center gaps" title="70px" content="70px">
  321. <meta name="select:center gaps" title="75px" content="75px">
  322. <meta name="select:center gaps" title="80px" content="80px">
  323.  
  324. <!-------- POST OPTIONS -------->
  325. <meta name="select:---------------------">
  326.  
  327. <meta name="select:borderless posts" title="yes" content="yes">
  328. <meta name="select:borderless posts" title="no" content="no">
  329.  
  330. <meta name="select:post width" title="500px" content="500px">
  331. <meta name="select:post width" title="400px" content="400px">
  332. <meta name="select:post width" title="425px" content="425px">
  333. <meta name="select:post width" title="450px" content="450px">
  334. <meta name="select:post width" title="475px" content="475px">
  335. <meta name="select:post width" title="520px" content="520px">
  336. <meta name="select:post width" title="540px" content="540px">
  337. <meta name="select:post width" title="600px" content="600px">
  338.  
  339. <meta name="select:post padding" title="0px" content="0px">
  340. <meta name="select:post padding" title="10px" content="10px">
  341. <meta name="select:post padding" title="14px" content="14px">
  342. <meta name="select:post padding" title="18px" content="18px">
  343. <meta name="select:post padding" title="22px" content="22px">
  344.  
  345. <meta name="select:photoset spacing" title="4px" content="4px">
  346. <meta name="select:photoset spacing" title="2px" content="2px">
  347. <meta name="select:photoset spacing" title="6px" content="6px">
  348. <meta name="select:photoset spacing" title="8px" content="8px">
  349. <meta name="select:photoset spacing" title="10px" content="10px">
  350.  
  351. <meta name="select:grayscale images" title="reblogger icon only" content="rb-ico">
  352. <meta name="select:grayscale images" title="everything in posts" content="everything">
  353. <meta name="select:grayscale images" title="off" content="off">
  354.  
  355. <meta name="select:click tags" title="no" content="no">
  356. <meta name="select:click tags" title="yes" content="yes">
  357.  
  358. <meta name="select:post spacing" title="50px" content="50px">
  359. <meta name="select:post spacing" title="25px" content="25px">
  360. <meta name="select:post spacing" title="30px" content="30px">
  361. <meta name="select:post spacing" title="35px" content="35px">
  362. <meta name="select:post spacing" title="40px" content="40px">
  363. <meta name="select:post spacing" title="45px" content="45px">
  364. <meta name="select:post spacing" title="55px" content="55px">
  365. <meta name="select:post spacing" title="60px" content="60px">
  366. <meta name="select:post spacing" title="65px" content="65px">
  367. <meta name="select:post spacing" title="70px" content="70px">
  368. <meta name="select:post spacing" title="75px" content="75px">
  369.  
  370. <!--------- TUMBLR CONTROLS OPTIONS --------->
  371. <meta name="select:------------------------">
  372.  
  373. <meta name="select:tumblr controls color" title="white" content="white">
  374. <meta name="select:tumblr controls color" title="black" content="black">
  375.  
  376. <!--------- TEXT FIELDS --------->
  377. <meta name="text:PLEASE READ THE GUIDE BELOW" content="https://docs.google.com/presentation/d/19QzgXtEY1JawYEh8vudyXcjFBZT5wgKvDxUCt0bHDqE/edit?usp=sharing">
  378.  
  379. <meta name="text:top left title" content="farewell, good hunter">
  380. <meta name="text:top center title" content="bloodlust.">
  381.  
  382. <meta name="text:customlink 1 name" content="sample link">
  383. <meta name="text:customlink 1 url" content="https://youtube.com/watch?v=ZkNMZlkrzaU">
  384. <meta name="text:customlink 2 name" content="">
  385. <meta name="text:customlink 2 url" content="">
  386. <meta name="text:customlink 3 name" content="">
  387. <meta name="text:customlink 3 url" content="">
  388. <meta name="text:customlink 4 name" content="">
  389. <meta name="text:customlink 4 url" content="">
  390. <meta name="text:customlink 5 name" content="">
  391. <meta name="text:customlink 5 url" content="">
  392. <meta name="text:customlink 6 name" content="">
  393. <meta name="text:customlink 6 url" content="">
  394.  
  395. <meta name="text:left sidebar box 1 title" content="welcome">
  396. <meta name="text:left sidebar box 1" content="Some welcome text here! To use your description, empty this box! :)">
  397.  
  398. <meta name="text:left sidebar box 2 title" content="other blogs">
  399. <meta name="text:left sidebar box 2" content="***&NewLine;[pic] [https://static.tumblr.com/2pnwama/kOas1psfy/haru.png]&NewLine;[link-text] [freestyle dance teacher]&NewLine;[link-url] [https://youtube.com/watch?v=ZkNMZlkrzaU]&NewLine;[subtitle] [remember to drink water]">
  400.  
  401. <meta name="text:left sidebar box 3 title" content="socials&ensp;&&ensp;elsewhere">
  402. <meta name="text:left sidebar box 3" content="***&NewLine;[icon-name] [brush]&NewLine;[link-url] [https://instagram.com/anyilia_]&NewLine;[hover-text] [art account]">
  403.  
  404. <meta name="text:right sidebar box 1" content="* name: HT&NewLine;* birthday: 05.21&NewLine;* MBTI: your mbti&NewLine;* status: sleeping&NewLine;* level: 69&NewLine;* bias: Lady Maria">
  405.  
  406. <meta name="text:right sidebar box 2 title" content="currently">
  407. <meta name="text:right sidebar box 2" content="* reading: something&NewLine;* watching: something&NewLine;* playing: something&NewLine;* listening: something">
  408.  
  409. <!--------------------------------------------------->
  410.  
  411. <style type="text/css">
  412.  
  413. @font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
  414.  
  415. /*-------- TUMBLR CONTROLS --------*/
  416. iframe#tumblr_controls, .iframe-controls--desktop {
  417. top:calc(3px + var(--Top-Bar-Height))!important;
  418. right:calc(5px + (var(--Scrollbar-Padding) / 2))!important;
  419. position:fixed!important;
  420.  
  421. transform:scale(0.65,0.65);
  422. -webkit-transform:scale(0.65,0.65);
  423.  
  424. transform-origin:100% 0;
  425. z-index:11!important;
  426. user-select:none;
  427. }
  428.  
  429. [tumblr-controls="black"] iframe#tumblr_controls,
  430. [tumblr-controls="black"] .iframe-controls--desktop {
  431. filter:invert(100%) hue-rotate(180deg)!important;
  432. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  433. }
  434.  
  435. .tmblr-iframe--follow-teaser, .follow-teaser {
  436. display:none!important;
  437. }
  438.  
  439. /*------- SCROLLBAR --------*/
  440. ::-webkit-scrollbar {
  441. width:var(--Scrollbar-Padding);
  442. height:0;
  443. background-color:{color:scrollbar background};
  444. }
  445.  
  446. ::-webkit-scrollbar-thumb {
  447. background-color:{color:scrollbar};
  448. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  449. border-top:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
  450. border-bottom:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
  451. background-clip:padding-box;
  452. }
  453.  
  454. ::-webkit-scrollbar-corner {
  455. background:{color:scrollbar background};
  456. }
  457.  
  458. /*------- TOOLTIPS --------*/
  459. #s-m-t-tooltip {
  460. padding:5px 9px;
  461. margin:17px;
  462. background-color:{color:post};
  463. border-radius:2px;
  464. border:1px solid rgba({RGBcolor:text},0.25);
  465. font-family:var(--SmallCaps-Font-Family);
  466. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  467. letter-spacing:0.5px;
  468. text-transform:uppercase;
  469. color:{color:text};
  470. line-height:var(--Line-Height);
  471. z-index:99;
  472. max-width:40vw;
  473. }
  474.  
  475. /*---- GLOBAL FONT SETTINGS -----*/
  476. [font]{
  477. font-family:var(--Body-Font-Family);
  478. font-size:var(--Body-Font-Size);
  479. color:var(--Body-Text-Color);
  480. }
  481.  
  482. [font="Libre Franklin"]{
  483. font-size:calc(var(--Body-Font-Size) - .5px)!important;
  484. letter-spacing:0.1px;
  485. }
  486.  
  487. [font="Manrope"]{
  488. font-size:calc(var(--Body-Font-Size) - 1px)!important;
  489. letter-spacing:0.3px;
  490. }
  491.  
  492. [font="Vollkorn"]{
  493. font-size:calc(var(--Body-Font-Size) + 1px)!important;
  494. }
  495.  
  496. /*------- TEXT HIGHLIGHT --------*/
  497. ::selection {
  498. background:{color:text selection background};
  499. color:{color:text selected};
  500. }
  501.  
  502. ::-moz-selection {
  503. background:{color:text selection background};
  504. color:{color:text selected};
  505. }
  506.  
  507. /*------- BASICS --------*/
  508. @-moz-document url-prefix(){
  509. html, body {
  510. scrollbar-width:thin; /* firefox only */
  511. }
  512. }
  513.  
  514. body {
  515. margin:0;
  516. background-color:{color:background};
  517. background-image:url('{image:background image}');
  518. background-attachment:fixed;
  519. overscroll-behavior-y:none;
  520. }
  521.  
  522. [bg-type="repeat"] body {
  523. background-repeat:repeat;
  524. }
  525.  
  526. [bg-type="full"] body {
  527. background-repeat:no-repeat;
  528. background-size:cover;
  529. background-position:center;
  530. }
  531.  
  532. a {
  533. text-decoration:none;
  534. color:var(--Link);
  535. }
  536.  
  537. a[title][class*="smt-current-element"]:not([href]){
  538. cursor:help;
  539. }
  540.  
  541. a[title=""]:not([href]){
  542. cursor:initial;
  543. }
  544.  
  545. p {
  546. margin:var(--Paragraph-Margins) 0;
  547. }
  548.  
  549. blockquote {
  550. margin:var(--Paragraph-Margins);
  551. margin-right:0;
  552. padding-left:var(--Paragraph-Margins);
  553. border-left:1px solid rgba({RGBcolor:text},0.169);
  554. }
  555.  
  556. h1, h2, h3, h4, h5, h6, .linkpost-title {
  557. margin:var(--Heading-Margins) 0;
  558. font-family:var(--Heading-Font-Family);
  559. font-size:var(--Body-Font-Size);
  560. text-transform:uppercase;
  561. letter-spacing:.3px;
  562. line-height:calc(var(--Line-Height) * 1.1);
  563. }
  564.  
  565. img, iframe {
  566. vertical-align:middle;
  567. max-width:100%;
  568. }
  569.  
  570. figure {
  571. margin:0;
  572. }
  573.  
  574. pre, code {
  575. white-space:pre-wrap;
  576. font-family:cousine;
  577. font-size:calc(var(--Body-Font-Size) - 2px);
  578. background:{color:special background};
  579. border:1px solid {color:special border};
  580. color:{color:special text};
  581. }
  582.  
  583. pre {
  584. padding:0.8em 1em;
  585. }
  586.  
  587. code {
  588. padding:3px 4px;
  589. }
  590.  
  591. hr {
  592. display:block;
  593. margin:var(--Heading-Margins) auto;
  594. border-width:0px;
  595. width:69%;
  596. height:1px;
  597. background:{color:post borders inner};
  598. }
  599.  
  600. a.read_more {
  601. display:block;
  602. margin-bottom:-3px;
  603. font-family:var(--SmallCaps-Font-Family);
  604. font-size:calc(var(--SmallCaps-Font-Size) + 2px);
  605. text-transform:uppercase;
  606. letter-spacing:.7px;
  607. text-align:center;
  608. }
  609.  
  610. ul, ol {
  611. margin:var(--Paragraph-Margins) 0;
  612. margin-left:1.69em;
  613. padding:0;
  614. }
  615.  
  616. ol li {
  617. padding-left:0.420em;
  618. }
  619.  
  620. ul li {
  621. position:relative;
  622. padding-left:0.25em;
  623. margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
  624. list-style:none;
  625. }
  626.  
  627. ul li:before {
  628. content:"";
  629. position:absolute;
  630. margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
  631. transform:translateY(-50%);
  632. left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
  633. width:var(--Body-Font-Size);
  634. height:.7px;
  635. background:rgba({RGBcolor:text},0.420);
  636. }
  637.  
  638. .flex, [flex]{
  639. display:flex!important;
  640. align-items:center;
  641. }
  642.  
  643. :root {
  644. /*--- GENERAL SETTINGS ---*/
  645. --Page-FadeIn-Speed:0.5s;
  646. --Main-Content-Width-Total:calc(var(--Post-Width-Total) + (var(--Center-Aisle-Gaps) * 2) + (var(--Sidebar-Width) * 2));
  647.  
  648. /*--- TOP BAR SETTINGS ---*/
  649. --Top-Bar-BG:{color:top bar background};
  650. --Top-Bar-Title-Center:{color:top center title};
  651. --Top-Bar-Padding:18px;
  652. --Top-Bar-Icon-Size:45px;
  653. --Top-Bar-Icon-Padding:4px;
  654. --Top-Bar-Icon-Right-Gap:12px;
  655.  
  656. --Top-Left-Title-Size:13px;
  657. --Navlinks-Size:9px;
  658. --Navlinks-Spacing:8px;
  659.  
  660. --Top-Center-Title-Size:26px;
  661. --CustomLinks-Font-Size:9px;
  662. --CustomLinks-Spacing:13px;
  663.  
  664. --Searchbar-Font-Size:8px;
  665. --Magnifying-Glass-Size:14px;
  666.  
  667. /*--- HEADER SETTINGS ---*/
  668. --Header-Height:60vh;
  669. --Header-Bottom-Gap:50px; /* space between header and stuff under it */
  670.  
  671. /*--- SIDEBAR SETTINGS ---*/
  672. --Sidebar-Width:{select:sidebar width};
  673. --Sidebar-Top-Sticky-Gap:30px; /* when scrolled, this is the space between the top bar and the sidebars */
  674.  
  675. --Sidebar-Sections-Spacing:30px;
  676.  
  677. --Sidebar-Heading-Padding:13px; /* space between title and underline */
  678. --Sidebar-Heading-Bottom-Gap:15px; /* space between underline and body text */
  679. --Sidebar-Divider-Width:85%;
  680.  
  681. --Sidebar-Blogs-Image-Size:36px;
  682. --Sidebar-Blogs-Image-Gap-Right:10px;
  683. --Sidebar-Blogs-Row-Spacing:12px;
  684.  
  685. --Sidebar-Socials-Icon-Size:16px;
  686. --Sidebar-Socials-Icon-Spacing:12px;
  687.  
  688. --Sidebar-Stats-LineHeight:calc(var(--Body-Font-Size) * 1.69);
  689. --Sidebar-Stats-Column-Spacing:6px;
  690.  
  691. --Center-Aisle-Gaps:{select:center gaps};
  692.  
  693. /*--- POST SETTINGS ---*/
  694. --Paragraph-Margins:1em;
  695. --Heading-Margins:1em;
  696.  
  697. --Body-Font-Family:{select:font};
  698. --Body-Font-Size:{select:font size};
  699. --Body-Text-Color:{color:text};
  700.  
  701. --Line-Height:1.7em; /* line-height with suffix */
  702. --Line-Height-INT:1.7; /* line-height without suffix */
  703.  
  704. --Heading-Font-Family:"caslon fs";
  705. --Heading-Font-Size:calc(var(--Body-Font-Size) + 1.5px);
  706.  
  707. --SmallCaps-Font-Family:"Averia Serif Libre";
  708. --SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 2px);
  709.  
  710. --Post-Width:{select:post width};
  711. --Post-Padding:{select:post padding};
  712. --Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2));
  713. --Post-Spacing:calc({select:post spacing} * 2);
  714.  
  715. --Reblogger-Avatar-Size:22px;
  716. --Reblogger-Avatar-Gap-Right:8px;
  717. --Reblogger-Username-Color:{color:reblogger};
  718. --Reblogger-Avatar-Bottom-Gap:12px;
  719.  
  720. --Reblogs-Spacing:15px;
  721. --Reblogs-Border:{color:post borders inner};
  722.  
  723. --Captions-Gap:15px;
  724. --NPF-Caption-Spacing:var(--Captions-Gap);
  725.  
  726. --Photoset-Spacing:{select:photoset spacing};
  727. --NPF-Image-Spacing:var(--Photoset-Spacing);
  728.  
  729. --Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
  730. --Grayscale-Transition-Speed:0.269s;
  731.  
  732. --AskerPortrait-Size:42px;
  733. --AskerPortrait-Padding:6px;
  734.  
  735. --Audio-Post-Album-Size:64px;
  736. --Audio-Post-Album-Right-Gap:13px;
  737. --Audio-Post-Buttons-Size:11px;
  738. --Audio-Post-Buttons-Color:{color:special text};
  739. --Audio-Post-Buttons-Padding:11px;
  740. --Audio-Post-Buttons-Background:{color:special background};
  741.  
  742. --Link:{color:link};
  743. --Post-Borders-Inner:{color:post borders inner};
  744.  
  745. --Quote-Font-Family:var(--SmallCaps-Font-Family);
  746. --Quote-Font-Size:calc(var(--Body-Font-Size) + 1px);
  747.  
  748. --Post-Dividers-Width:69%;
  749.  
  750. /*--- TAGS SETTINGS ---*/
  751. --Tags-Fade-Speed-MS:269; /* fade speed without suffix */
  752. --Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
  753. --Tags-Spacing:4px;
  754.  
  755. /*--- PERMALINK SETTINGS ---*/
  756. --Permalink-Text-Spacing:15px;
  757.  
  758. /*--- POST BUTTONS SETTINGS ---*/
  759. --Post-Buttons-Size:var(--Body-Font-Size);
  760. --Post-Buttons-Color:{color:post buttons};
  761. --Like-Button-Liked:{color:like button liked};
  762. --Post-Buttons-Spacing:4px;
  763.  
  764. /*--- POST NOTES SETTINGS ---*/
  765. --Notes-Indicator-Size:14px;
  766. --Notes-Indicator-Gap-Right:7px;
  767. --Notes-Row-Spacing:10px;
  768.  
  769. /*--- MISC ---*/
  770. --Side-Padding:{select:side padding};
  771.  
  772. --Pagination-Color:{color:text};
  773.  
  774. --TumblrControls-Color:{select:tumblr controls color};
  775.  
  776. --Scrollbar-Padding:13px;
  777. }
  778.  
  779. /*---- TOP BAR ----*/
  780. .topbar {
  781. position:fixed;
  782. top:0;left:0;
  783. width:calc(100% - (var(--Top-Bar-Padding) * 2));
  784. padding:var(--Top-Bar-Padding);
  785. background:{color:top bar background};
  786. z-index:12;
  787. display:grid;
  788. grid-template-columns:repeat(3, 1fr);
  789. grid-gap:var(--Top-Bar-Padding);
  790. --ccwhat:calc((var(--ClientWidth) - (var(--Top-Bar-Padding) * 4)) / 3);
  791. }
  792.  
  793. .otae, .cheddar {
  794. max-width:var(--ccwhat);
  795. overflow:hidden;
  796. }
  797.  
  798. .dango {
  799. position:relative;
  800. width:calc(var(--Top-Bar-Icon-Size) + (var(--Top-Bar-Icon-Padding) * 2));
  801. height:calc(var(--Top-Bar-Icon-Size) + (var(--Top-Bar-Icon-Padding) * 2));
  802. border-radius:100%;
  803. border:1px solid {color:top bar icon border};
  804. flex-shrink:0;
  805. }
  806.  
  807. .ichi-avi {
  808. position:absolute;
  809. margin-top:var(--Top-Bar-Icon-Padding);
  810. margin-left:var(--Top-Bar-Icon-Padding);
  811. width:var(--Top-Bar-Icon-Size);
  812. height:var(--Top-Bar-Icon-Size);
  813. background-image:url('{image:top bar icon}');
  814. background-position:center;
  815. background-size:cover;
  816. border-radius:100%;
  817. }
  818.  
  819. .ichi-invis {
  820. position:absolute;
  821. margin-top:var(--Top-Bar-Icon-Padding);
  822. margin-left:var(--Top-Bar-Icon-Padding);
  823. width:var(--Top-Bar-Icon-Size);
  824. height:var(--Top-Bar-Icon-Size);
  825. border-radius:100%;
  826. z-index:2;
  827. opacity:0;
  828. }
  829.  
  830. .dango + [butain]{
  831. margin-left:var(--Top-Bar-Icon-Right-Gap);
  832. }
  833.  
  834. [butain]{
  835. line-height:1em;
  836. }
  837.  
  838. [tl-title]{
  839. font-family:canela;
  840. font-size:var(--Top-Left-Title-Size);
  841. text-transform:uppercase;
  842. letter-spacing:1.5px;
  843. word-spacing:.3px;
  844. color:{color:top left title};
  845. line-height:1em;
  846. }
  847.  
  848. [tl-title] + .navlinks {
  849. margin-top:8px;
  850. }
  851.  
  852. .navlinks {
  853. display:flex;
  854. align-items:center;
  855. font-family:var(--SmallCaps-Font-Family);
  856. font-size:var(--Navlinks-Size);
  857. text-transform:uppercase;
  858. letter-spacing:1px;
  859. color:{color:navlinks};
  860. line-height:1em;
  861. --NV-Dot-Size:3px;
  862. }
  863.  
  864. .navlinks > * {
  865. display:block;
  866. }
  867.  
  868. .navlinks a {
  869. position:relative;
  870. color:{color:navlinks};
  871. line-height:1em;
  872. }
  873.  
  874. .navlinks a + a {
  875. margin-left:calc(var(--NV-Dot-Size) + (var(--Navlinks-Spacing) * 2));
  876. }
  877.  
  878. .navlinks a + a:before {
  879. content:"";
  880. position:absolute;
  881. top:50%;transform:translateY(-50%);
  882. left:0;margin-left:calc(0px - var(--Navlinks-Spacing) - var(--NV-Dot-Size));
  883. width:var(--NV-Dot-Size);
  884. height:var(--NV-Dot-Size);
  885. border-radius:100%;
  886. background:rgba({RGBcolor:navlinks},0.7);
  887. }
  888.  
  889. [customize-page="true"] .kirin {
  890. overflow:hidden;
  891. }
  892.  
  893. .kirin {
  894. margin-top:-1px;
  895. display:table;
  896. width:100%;
  897. height:100%;
  898. }
  899.  
  900. .jindosh {
  901. display:table-cell;
  902. vertical-align:middle;
  903. }
  904.  
  905. [tit-center]{
  906. font-family:abril fatface;
  907. font-size:var(--Top-Center-Title-Size);
  908. text-transform:uppercase;
  909. letter-spacing:1px;
  910. color:{color:top center title};
  911. line-height:var(--Top-Center-Title-Size);
  912. text-align:center;
  913. line-height:1em;
  914. }
  915.  
  916. [tit-center] + .customlinks {
  917. margin-top:10px;
  918. }
  919.  
  920. .customlinks {
  921. display:flex;
  922. align-items:center;
  923. justify-content:center;
  924. flex-wrap:nowrap;
  925. margin:0 calc(var(--CustomLinks-Spacing) / -2);
  926. font-family:var(--SmallCaps-Font-Family);
  927. font-size:var(--CustomLinks-Font-Size);
  928. text-transform:uppercase;
  929. letter-spacing:1px;
  930. color:{color:custom links};
  931. line-height:1em;
  932. }
  933.  
  934. .customlinks > * {
  935. display:block;
  936. }
  937.  
  938. .customlinks a {
  939. margin:0 calc(var(--CustomLinks-Spacing) / 2);
  940. color:{color:custom links};
  941. flex-shrink:0;
  942. }
  943.  
  944. .cheddar {
  945. margin-top:3px;
  946. display:flex;
  947. align-items:center;
  948. justify-content:flex-end;
  949. }
  950.  
  951. .srchbar {
  952. display:flex;
  953. align-items:center;
  954. justify-content:flex-end;
  955. flex-wrap:nowrap;
  956. }
  957.  
  958. .srchbar > * {
  959. display:block;
  960. }
  961.  
  962. .srchbar input {
  963. outline:none;
  964. border:none;
  965. background:transparent!important;
  966. border-bottom:1px solid transparent;
  967. padding:7px 0;
  968. transition:border-bottom .269s ease-in-out;
  969. }
  970.  
  971. .srchbar input, .srchbar input::placeholder {
  972. font-family:var(--SmallCaps-Font-Family);
  973. font-size:var(--Searchbar-Font-Size);
  974. text-transform:uppercase;
  975. letter-spacing:1.5px;
  976. color:{color:searchbar text};
  977. text-align:right;
  978. }
  979.  
  980. .srchbar input::placeholder {
  981. opacity:0.7;
  982. }
  983.  
  984. .srchbar input:focus {
  985. border-bottom:1px solid {color:searchbar underline};
  986. }
  987.  
  988. .srchbar input:focus::placeholder {
  989. color:transparent;
  990. }
  991.  
  992. .srchgo {
  993. margin-left:5px;
  994. margin-right:-5px;
  995. padding:5px;
  996. border-radius:0;
  997. background:transparent;
  998. border:none;
  999. cursor:pointer;
  1000. }
  1001.  
  1002. .srchgo i {
  1003. display:block;
  1004. transform:scaleX(-1);
  1005. font-size:var(--Magnifying-Glass-Size);
  1006. color:{color:searchbar button};
  1007. }
  1008.  
  1009. /*------------------*/
  1010.  
  1011. .le-header, .mynoots {
  1012. visibility:hidden;
  1013. opacity:0;
  1014. }
  1015.  
  1016. .showpls {
  1017. visibility:visible;
  1018. opacity:1;
  1019. transition:opacity var(--Page-FadeIn-Speed) ease-in-out, visibility var(--Page-FadeIn-Speed) 0s ease-in-out;
  1020. }
  1021.  
  1022. /*---- HEADER ----*/
  1023. .le-header {
  1024. margin-top:var(--Top-Bar-Height);
  1025. width:100%;
  1026. min-width:calc(var(--Main-Content-Width-Total) + (2rem * 2));
  1027. height:var(--Header-Height);
  1028. background-color:{color:header background};
  1029. background-image:url('{image:header image}');
  1030. background-size:cover;
  1031. background-position:{select:header image position};
  1032. margin-bottom:var(--Header-Bottom-Gap);
  1033. {block:TagPage}
  1034. display:none;
  1035. {/block:TagPage}
  1036. }
  1037.  
  1038. .le-header:not([page-1]){
  1039. display:none;
  1040. }
  1041.  
  1042. /* force header image to show 100% on portrait devices */
  1043. @media(max-width:540px){
  1044. body {
  1045. position:absolute;
  1046. }
  1047. }
  1048.  
  1049. /*---- MAIN CONTENT CONTAINER ----*/
  1050. .mynoots {
  1051. margin:auto;
  1052. text-align:center;
  1053. }
  1054.  
  1055. .nymoots {
  1056. display:inline-block;
  1057. text-align:initial;
  1058. }
  1059.  
  1060. .ensoot {
  1061. display:flex;
  1062. flex-wrap:nowrap;
  1063. align-items:flex-start;
  1064. }
  1065.  
  1066. /*---- SIDEBARS ----*/
  1067. .left-sidebar, .right-sidebar {
  1068. position:sticky;
  1069. width:var(--Sidebar-Width);
  1070. }
  1071.  
  1072. .left-sidebar.short-stick,
  1073. .right-sidebar.short-stick {
  1074. top:calc(var(--Sidebar-Top-Sticky-Gap) + var(--Top-Bar-Height));
  1075. }
  1076.  
  1077. .left-sidebar.stick,
  1078. .right-sidebar.stick {
  1079. top:calc(100vh - var(--Target-Height) - var(--Sidebar-Sections-Spacing));
  1080. }
  1081.  
  1082. .left-sidebar > * + *,
  1083. .right-sidebar > * + * {
  1084. margin-top:var(--Sidebar-Sections-Spacing);
  1085. }
  1086.  
  1087. .box-title {
  1088. position:relative;
  1089. padding-bottom:var(--Sidebar-Heading-Padding);
  1090. font-family:canela;
  1091. font-size:calc(var(--Heading-Font-Size) - 1.5px);
  1092. text-transform:uppercase;
  1093. letter-spacing:1.5px;
  1094. color:{color:sidebar heading};
  1095. text-align:center;
  1096. line-height:1em;
  1097. }
  1098.  
  1099. .box-title:after {
  1100. content:"";
  1101. position:absolute;
  1102. bottom:0;
  1103. left:50%;transform:translateX(-50%);
  1104. width:var(--Sidebar-Divider-Width);
  1105. height:1px;
  1106. background:linear-gradient(to right, transparent, {color:sidebar dividers}, transparent);
  1107. }
  1108.  
  1109. .box-title + * {
  1110. margin-top:var(--Sidebar-Heading-Bottom-Gap);
  1111. }
  1112.  
  1113. [box-body]{
  1114.  
  1115. }
  1116.  
  1117. [box-body] a {
  1118. font-family:var(--SmallCaps-Font-Family);
  1119. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  1120. text-transform:uppercase;
  1121. letter-spacing:1px;
  1122. color:{color:sidebar hyperlinks};
  1123. }
  1124.  
  1125. [box-body] a:not(.blog-tit, .soc-item a){
  1126. padding-bottom:1px;
  1127. border-bottom:1px solid rgba({RGBcolor:sidebar hyperlinks},0.25);
  1128. }
  1129.  
  1130. .sb-banner {
  1131. width:100%;
  1132. height:auto;
  1133. }
  1134.  
  1135. .sb-banner[src*='cdn.glitch.com/bdf00c8f-434a-46d9-a514-ec8332ec176a/1x1.png'],
  1136. .sb-banner[src*='//static.tumblr.com/gtjt4bo/82Esruod1/1x1.png']{
  1137. display:none;
  1138. }
  1139.  
  1140. /*---- LEFT SIDEBAR BOX 1 ----*/
  1141. .descbox {
  1142. text-align:{select:sidebar box 1 text align};
  1143. line-height:var(--Line-Height);
  1144. }
  1145.  
  1146. /*---- LEFT SIDEBAR BOX 2 ----*/
  1147. .blog-row {
  1148. display:flex;
  1149. align-items:center;
  1150. }
  1151.  
  1152. .blog-row + .blog-row {
  1153. margin-top:var(--Sidebar-Blogs-Row-Spacing);
  1154. }
  1155.  
  1156. .blog-row img {
  1157. width:var(--Sidebar-Blogs-Image-Size);
  1158. height:var(--Sidebar-Blogs-Image-Size);
  1159. border-radius:3px;
  1160. flex-shrink:0;
  1161. }
  1162.  
  1163. .blog-row .mt {
  1164. flex:1;
  1165. margin-left:var(--Sidebar-Blogs-Image-Gap-Right);
  1166. }
  1167.  
  1168. .blog-row .mt > * {
  1169. display:block;
  1170. }
  1171.  
  1172. .blog-row a.blog-tit {
  1173. font-family:var(--SmallCaps-Font-Family);
  1174. font-size:var(--SmallCaps-Font-Size);
  1175. text-transform:uppercase;
  1176. letter-spacing:1px;
  1177. line-height:1em;
  1178. color:{color:sidebar blog names};
  1179. }
  1180.  
  1181. .blog-row a.blog-tit [et]{
  1182. margin-right:.7px;
  1183. }
  1184.  
  1185. .blog-subtitle {
  1186. margin-top:2px;
  1187. line-height:var(--Line-Height);
  1188. margin-bottom:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) - var(--Body-Font-Size)) / -2);
  1189. }
  1190.  
  1191. .blog-subtitle.has-et {
  1192. margin-left:2px;
  1193. }
  1194.  
  1195. /*---- LEFT SIDEBAR BOX 3 ----*/
  1196. .socials-box {
  1197. text-align:center;
  1198. }
  1199.  
  1200. .socials-box .soc-item {
  1201. display:inline-block;
  1202. }
  1203.  
  1204. .socials-box a {
  1205. line-height:var(--Sidebar-Socials-Icon-Size);
  1206. }
  1207.  
  1208. .socials-box .bootstrap-icon {
  1209. font-size:var(--Sidebar-Socials-Icon-Size);
  1210. color:{color:sidebar social icons};
  1211. padding:calc(var(--Sidebar-Socials-Icon-Spacing) / 2);
  1212. line-height:1em;
  1213. }
  1214.  
  1215. /*---- RIGHT SIDEBAR BOXES ----*/
  1216. .statsbox {
  1217.  
  1218. }
  1219.  
  1220. [two-cols] .stat-row {
  1221. display:grid;
  1222. grid-template-columns:repeat(2, 1fr);
  1223. grid-gap:var(--Sidebar-Stats-Column-Spacing);
  1224. }
  1225.  
  1226. [two-cols] .stat-row .stat-grp:nth-child(2){
  1227. justify-content:flex-end;
  1228. }
  1229.  
  1230. [one-col] .stat-grp {
  1231. justify-content:space-between;
  1232. }
  1233.  
  1234. [one-col] .stat-detail {
  1235. text-align:right;
  1236. }
  1237.  
  1238. .stat-grp {
  1239. display:flex;
  1240. line-height:var(--Sidebar-Stats-LineHeight);
  1241. }
  1242.  
  1243. .stat-label {
  1244. font-family:var(--SmallCaps-Font-Family);
  1245. font-size:var(--SmallCaps-Font-Size);
  1246. text-transform:uppercase;
  1247. letter-spacing:1px;
  1248. color:{color:sidebar stat label};
  1249. }
  1250.  
  1251. .stat-label + .stat-detail {
  1252. margin-left:5px;
  1253. }
  1254.  
  1255. /*---- POST CONTAINER ----*/
  1256. .postscont {
  1257. margin:0 var(--Center-Aisle-Gaps);
  1258. }
  1259.  
  1260. .le-header:not([page-1]) + .mynoots .postscont,
  1261. [tag-page] .postscont {
  1262. margin-top:calc(var(--Top-Bar-Height) + var(--Sidebar-Top-Sticky-Gap));
  1263. }
  1264.  
  1265. .posts {
  1266. position:relative;
  1267. width:var(--Post-Width-Total);
  1268. }
  1269.  
  1270. /*---- POST BORDERS ----*/
  1271. .posts[seamless="yes"] .postinner,
  1272. .posts[seamless="yes"] .permadiv,
  1273. .posts[seamless="yes"] .notescont {
  1274. border:none;
  1275. }
  1276.  
  1277. .posts[seamless="yes"] .permadiv {
  1278. margin-top:25px;
  1279. padding:0;
  1280.  
  1281. }
  1282.  
  1283. /*----------------------*/
  1284.  
  1285. .posts:first-child, .posts + * {
  1286. margin-bottom:var(--Post-Spacing);
  1287. }
  1288.  
  1289. .posts:only-child {
  1290. {block:PermalinkPage}
  1291. margin-bottom:calc(var(--Post-Spacing) / 2);
  1292. {/block:PermalinkPage}
  1293. }
  1294.  
  1295. .posts + *:not(.posts) {
  1296. margin-top:calc(var(--Post-Spacing) / -2);
  1297. }
  1298.  
  1299. [black-and-white="rb-ico"] .reblog-head img {
  1300. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1301. filter:var(--Grayscale-Settings);
  1302. }
  1303.  
  1304. [black-and-white="everything"] img,
  1305. [black-and-white="everything"] iframe,
  1306. [black-and-white="everything"] video {
  1307. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1308. filter:var(--Grayscale-Settings);
  1309. }
  1310.  
  1311. [black-and-white="everything"] .posts:hover img,
  1312. [black-and-white="everything"] .posts:hover iframe,
  1313. [black-and-white="everything"] .posts:hover video {
  1314. filter:none;
  1315. }
  1316.  
  1317. .posts + .posts:before {
  1318. content:"";
  1319. position:absolute;
  1320. top:0;margin-top:calc(0px - (var(--Post-Spacing) / 2));
  1321. left:0;margin-left:calc((100% - var(--Post-Dividers-Width)) / 2);
  1322. width:var(--Post-Dividers-Width);
  1323. height:1px;
  1324. background:linear-gradient(to right, transparent, {color:post dividers}, transparent);
  1325. }
  1326.  
  1327. /*-----------------------*/
  1328.  
  1329. .postinner {
  1330. padding:var(--Post-Padding);
  1331. background:{color:post};
  1332. border:1px solid {color:post borders outer};
  1333. line-height:var(--Line-Height);
  1334. overflow:hidden;
  1335. }
  1336.  
  1337. .postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .inari, .tagsdiv a, a.read_more, .tmblr-attribution a){
  1338. padding-bottom:.5px;
  1339. border-bottom:1px solid rgba({RGBcolor:link},0.420);
  1340. }
  1341.  
  1342. /*---- REBLOG HEAD ----*/
  1343. .reblog-wrap {
  1344. margin:0 calc(0px - var(--Post-Padding));
  1345. padding:0 var(--Post-Padding);
  1346. }
  1347.  
  1348. .reblog-wrap + .reblog-wrap {
  1349. margin-top:var(--Reblogs-Spacing);
  1350. padding-top:var(--Reblogs-Spacing);
  1351. border-top:1px solid var(--Reblogs-Border);
  1352. }
  1353.  
  1354. .reblog-head {
  1355. display:flex;
  1356. align-items:center;
  1357. }
  1358.  
  1359. .reblog-head img {
  1360. width:var(--Reblogger-Avatar-Size);
  1361. height:var(--Reblogger-Avatar-Size);
  1362. border-radius:100%;
  1363. }
  1364.  
  1365. .reblog-head img + .reblog-url {
  1366. margin-left:var(--Reblogger-Avatar-Gap-Right);
  1367. }
  1368.  
  1369. .reblog-url, .reblog-url a, p > a.tumblr_blog[target='_blank']{
  1370. font-family:var(--SmallCaps-Font-Family);
  1371. font-size:var(--SmallCaps-Font-Size);
  1372. text-transform:uppercase;
  1373. letter-spacing:.5px;
  1374. color:var(--Reblogger-Username-Color);
  1375. line-height:1em;
  1376. }
  1377.  
  1378. .reblog-url .deac {
  1379. margin-left:3px;
  1380. color:var(--Body-Text-Color);
  1381. }
  1382.  
  1383. .reblog-head + .reblog-comment {
  1384. margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
  1385. }
  1386.  
  1387. /*---- NPF... STUFF ----*/
  1388. figure[data-orig-src] + figure[data-orig-src]{
  1389. margin-top:var(--Photoset-Spacing);
  1390. }
  1391.  
  1392. .tmblr-full video {
  1393. cursor:pointer;
  1394. }
  1395.  
  1396. video::-webkit-media-controls-panel {
  1397. position:absolute;
  1398. bottom:0;
  1399. background:transparent!important;
  1400. width:100%;
  1401. box-sizing:border-box;
  1402. opacity:1!important;
  1403. }
  1404.  
  1405. video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
  1406. display:none!important;
  1407. }
  1408.  
  1409. * + .npf-link-block {
  1410. margin-top:10px;
  1411. }
  1412.  
  1413. .npf-link-block {
  1414. margin-top:0px;
  1415. margin-bottom:0;
  1416. border-color:{color:special border}!important;
  1417. border-radius:0!important;
  1418. }
  1419.  
  1420. .npf-link-block + * {
  1421. margin-bottom:var(--Paragraph-Margins);
  1422. }
  1423.  
  1424. .npf-link-block a {
  1425. padding:0!important;
  1426. border:none!important;
  1427. }
  1428.  
  1429. .npf-link-block .title {
  1430. font-family:var(--SmallCaps-Font-Family)!important;
  1431. font-size:calc(var(--SmallCaps-Font-Size) + 4px)!important;
  1432. text-transform:uppercase;
  1433. letter-spacing:.5px;
  1434. color:{color:link}!important;
  1435. line-height:1.7em!important;
  1436. text-shadow:1px 1px 1px rgba(0,0,0,0.1);
  1437. }
  1438.  
  1439. .npf-link-block .bottom {
  1440. background:{color:special background}!important;
  1441. }
  1442.  
  1443. .npf-link-block .description {
  1444. font-family:var(--SmallCaps-Font-Family)!important;
  1445. font-weight:bold;
  1446. font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
  1447. text-transform:uppercase;
  1448. letter-spacing:.5px;
  1449. color:{color:link}!important;
  1450. line-height:1.7em!important;
  1451. }
  1452.  
  1453. .npf-link-block .site-name {
  1454. text-transform:initial!important;
  1455. font-family:var(--Body-Font-Family)!important;
  1456. font-weight:normal!important;
  1457. font-size:var(--Body-Font-Size)!important;
  1458. color:{color:special text}!important;
  1459. }
  1460.  
  1461. .npf-link-block .description + .site-name {
  1462. margin-top:0;
  1463. }
  1464.  
  1465. .npf-link-block.no-poster .title {
  1466. padding:0.8em!important;
  1467. text-shadow:none!important;
  1468. }
  1469.  
  1470. .npf-link-block.no-poster .title + .bottom {
  1471. border-top:1px solid {color:special border};
  1472. }
  1473.  
  1474. /* gif src attribution */
  1475. .tmblr-attribution {
  1476. font-family:var(--SmallCaps-Font-Family);
  1477. font-size:var(--SmallCaps-Font-Size);
  1478. text-transform:uppercase;
  1479. letter-spacing:1px;
  1480. }
  1481.  
  1482. /*---- TEXT POSTS (TITLE) ----*/
  1483. .post-title, .linkpost-title {
  1484. margin-top:2px;
  1485. margin-bottom:0;
  1486. padding:0.8em;
  1487. background:{color:special background};
  1488. border:1px solid {color:special border};
  1489. font-size:var(--Heading-Font-Size);
  1490. font-weight:bold;
  1491. color:{color:special text};
  1492. text-align:center;
  1493. }
  1494.  
  1495. .post-title + *, .linkpost-title + * {
  1496. margin-top:var(--Heading-Margins);
  1497. }
  1498.  
  1499. /*---- LINK POSTS (TITLE) ----*/
  1500. .linkpost-title {
  1501. display:flex;
  1502. align-items:center;
  1503. justify-content:space-between;
  1504. color:{color:special text};
  1505. text-align:left;
  1506. }
  1507.  
  1508. .linkpost-title span {
  1509. display:block;
  1510. max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
  1511. }
  1512.  
  1513. span + .linksym {
  1514. margin-left:10px;
  1515. margin-right:2px;
  1516. }
  1517.  
  1518. .linksym {
  1519. width:calc(var(--Heading-Font-Size) * 1.1);
  1520. height:calc(var(--Heading-Font-Size) * 1.1);
  1521. -webkit-mask-size:contain;
  1522. -webkit-mask-repeat:no-repeat;
  1523. -webkit-mask-position:center;
  1524. -webkit-mask-image:var(--ext);
  1525. background:{color:special text};
  1526. }
  1527.  
  1528. .linkpost-title + .link-excerpt {
  1529. margin-top:-1px;
  1530. }
  1531.  
  1532. .link-excerpt {
  1533. padding:0.8em calc(0.8em + 2px);
  1534. border:1px solid {color:post borders inner};
  1535. }
  1536.  
  1537. .link-excerpt + * {
  1538. margin-top:var(--Heading-Margins);
  1539. }
  1540.  
  1541. .le-host {
  1542. font-family:var(--SmallCaps-Font-Family);
  1543. font-size:var(--SmallCaps-Font-Size);
  1544. text-transform:uppercase;
  1545. letter-spacing:.7px;
  1546. }
  1547.  
  1548. /*---- PHOTO POSTS ----*/
  1549. a.single-photo {
  1550. cursor:pointer;
  1551. }
  1552.  
  1553. img.photopic {
  1554. width:100%;
  1555. }
  1556.  
  1557. [photoset-layout] {
  1558. grid-gap:var(--Photoset-Spacing);
  1559. }
  1560.  
  1561. [photoset-layout] div {
  1562. cursor:pointer;
  1563. backface-visibility:hidden;
  1564. }
  1565.  
  1566. .caption {
  1567. margin-top:var(--Captions-Gap);
  1568. }
  1569.  
  1570. /*----- LIGHTBOX BS -----*/
  1571. .tmblr-lightbox, #tumblr_lightbox {
  1572. background-color:rgba({RGBcolor:post},0.69)!important;
  1573. }
  1574.  
  1575. .tmblr-lightbox .vignette {
  1576. background-image:none!important;
  1577. }
  1578.  
  1579. #vignette {display:none!important}
  1580.  
  1581. .lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
  1582. margin-top:calc(0px - var(--Post-Padding));
  1583. }
  1584.  
  1585. .tmblr-lightbox img, #tumblr_lightbox img {
  1586. max-width:initial;
  1587. box-shadow:none!important;
  1588. border-radius:0px!important;
  1589. padding:var(--Post-Padding);
  1590. background:{color:post}!important;
  1591. }
  1592.  
  1593. /*----- QUOTE POSTS -----*/
  1594. .postinner > .quote-words:first-child { margin-top:0 }
  1595.  
  1596. .quote-words, .npf_quote {
  1597. padding:0 var(--Post-Padding);
  1598. font-family:var(--Quote-Font-Family)!important;
  1599. font-size:var(--Quote-Font-Size)!important;
  1600. text-transform:uppercase;
  1601. letter-spacing:.3px;
  1602. text-align:center;
  1603. line-height:169%;
  1604. }
  1605.  
  1606. .quote-words + .quote-source,
  1607. .npf_quote + p[style*="margin-bottom: 0px;"]{
  1608. margin-top:var(--Paragraph-Margins);
  1609. text-align:center;
  1610. }
  1611.  
  1612. /*----- VIDEO POSTS -----*/
  1613. .tmblr-video {
  1614. max-width:initial;
  1615. }
  1616.  
  1617. .tumblr_video_container, .tumblr_video_iframe {
  1618. width:100%!important;
  1619. }
  1620.  
  1621. /*---- CHAT POSTS ----*/
  1622. .chatwrap {
  1623. display:table;
  1624. width:100%;
  1625. border:1px solid var(--Post-Borders-Inner);
  1626. box-sizing:border-box;
  1627. }
  1628.  
  1629. .chat_row {
  1630. position:relative;
  1631. display:table-row;
  1632. overflow:hidden;
  1633. }
  1634.  
  1635. .chat_row:not(:has(.chat_label)){
  1636. display:block;
  1637. width:calc(var(--Post-Width) - 2px);
  1638. margin-right:calc(0px - var(--Post-Width) - 2px);
  1639. }
  1640.  
  1641. .chat_row:after {
  1642. content:"";
  1643. position:absolute;
  1644. bottom:0;left:0;
  1645. transform:translateY(-.5px);
  1646. width:100%;
  1647. height:1px;
  1648. background:var(--Post-Borders-Inner);
  1649. }
  1650.  
  1651. .chatwrap .chat_row:last-child:after {
  1652. display:none;
  1653. }
  1654.  
  1655. .chat_row code:only-child {
  1656. display:block;
  1657. padding:0.8em;
  1658. border:none;
  1659. background:transparent;
  1660. }
  1661.  
  1662. .chat_label {
  1663. display:table-cell;
  1664. padding-right:1em;
  1665. font-family:var(--SmallCaps-Font-Family);
  1666. font-size:var(--SmallCaps-Font-Size);
  1667. text-transform:uppercase;
  1668. letter-spacing:1px;
  1669. }
  1670.  
  1671. .chat_label, .chat_content {
  1672. padding:calc(1em - 2px) 1em;
  1673. }
  1674.  
  1675. .chat_content {
  1676. display:table-cell;
  1677. width:100%;
  1678. }
  1679.  
  1680. .chat_label + .chat_content {
  1681. border-left:1px solid var(--Post-Borders-Inner);
  1682. }
  1683.  
  1684. .chat_row .chat_label + .chat_content {
  1685. min-width:calc((var(--Post-Width) - 3px) / 2);
  1686. box-sizing:border-box;
  1687. }
  1688.  
  1689. /*---- AUDIO POSTS ----*/
  1690. .audio-post .npf_inst img {
  1691. width:100%;
  1692. }
  1693.  
  1694. .aud-emb {display:none}
  1695.  
  1696. .audiowrap {
  1697. display:flex;
  1698. align-items:center;
  1699. }
  1700.  
  1701. .albumwrap {
  1702. position:relative;
  1703. width:var(--Audio-Post-Album-Size);
  1704. height:var(--Audio-Post-Album-Size);
  1705. display:flex;
  1706. align-items:center;
  1707. justify-content:center;
  1708. }
  1709.  
  1710. .albumwrap[has-cover] .audplac {display:none}
  1711.  
  1712. .butts {
  1713. width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1714. height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1715. background:var(--Audio-Post-Buttons-Background);
  1716. border-radius:100%;
  1717. display:flex;
  1718. align-items:center;
  1719. justify-content:center;
  1720. cursor:pointer;
  1721. z-index:2;
  1722. }
  1723.  
  1724. .overplay, .overpause {
  1725. width:var(--Audio-Post-Buttons-Size);
  1726. height:var(--Audio-Post-Buttons-Size);
  1727. -webkit-mask-size:contain;
  1728. -webkit-mask-repeat:no-repeat;
  1729. -webkit-mask-position:center;
  1730. background:var(--Audio-Post-Buttons-Color);
  1731. }
  1732.  
  1733. .overplay {
  1734. margin-left:2px;
  1735. -webkit-mask-image:var(--audioplay);
  1736. }
  1737.  
  1738. .overpause {
  1739. display:none;
  1740. -webkit-mask-image:var(--audiopause);
  1741. }
  1742.  
  1743. .ov-y {display:block}
  1744. .ov-z {display:none}
  1745.  
  1746. .audplac {
  1747. position:absolute;
  1748. top:0;left:0;
  1749. width:var(--Audio-Post-Album-Size);
  1750. height:var(--Audio-Post-Album-Size);
  1751. background:var(--Audio-Post-Buttons-Background);
  1752. }
  1753.  
  1754. .albumwrap img {
  1755. position:absolute;
  1756. top:0;left:0;
  1757. width:100%;
  1758. height:100%;
  1759. }
  1760.  
  1761. .audiotxt {
  1762. flex:1;
  1763. height:var(--Audio-Post-Album-Size);
  1764. padding:var(--Audio-Post-Album-Right-Gap);
  1765. background:{color:special background};
  1766. display:flex;
  1767. align-items:center;
  1768. box-sizing:border-box;
  1769. display:flex;
  1770. align-items:center;
  1771. justify-content:space-between;
  1772. }
  1773.  
  1774. .audiotxt, .npf-audio-details {
  1775. font-size:calc(var(--Body-Font-Size) - .3px);
  1776. color:{color:special text};
  1777. }
  1778.  
  1779. .odin > div + div, .npf-audio-details > * + * {
  1780. margin-top:-1.5px;
  1781. }
  1782.  
  1783. .aud-song-name, .npf-audio-title {
  1784. font-family:var(--SmallCaps-Font-Family);
  1785. font-size:calc(var(--SmallCaps-Font-Size) + .3px);
  1786. text-transform:uppercase;
  1787. letter-spacing:1px;
  1788. }
  1789.  
  1790. .aud-song-name[has-name] .untit {
  1791. display:none;
  1792. }
  1793.  
  1794. .aud-artist[has-artist] .unart {
  1795. display:none;
  1796. }
  1797.  
  1798. .inari {
  1799. display:block;
  1800. padding:6px;
  1801. margin-right:-6px;
  1802. cursor:pointer;
  1803. }
  1804.  
  1805. .int-all {
  1806. display:block;
  1807. width:calc(var(--Audio-Post-Buttons-Size) + 6px);
  1808. height:calc(var(--Audio-Post-Buttons-Size) + 6px);
  1809. -webkit-mask-size:contain;
  1810. -webkit-mask-repeat:no-repeat;
  1811. -webkit-mask-position:center;
  1812. -webkit-mask-image:var(--install);
  1813. background:{color:special text};
  1814. }
  1815.  
  1816. /*---- SPOTIFY ----*/
  1817. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  1818. height:80px!important;
  1819. }
  1820.  
  1821. .spotify_audio_player {
  1822. width:100%;
  1823. }
  1824.  
  1825. /*---- SOUNDCLOUD ----*/
  1826. .tmblr-video iframe[src*='soundcloud.com']{
  1827. }
  1828.  
  1829. .audio-soundcloud {
  1830. max-height:113px;
  1831. border-radius:4px;
  1832. overflow:hidden;
  1833. }
  1834.  
  1835. .soundcloud_audio_player {
  1836. margin:-1px;
  1837. margin-bottom:0;
  1838. width:calc(100% + 2px);
  1839. max-width:initial;
  1840. }
  1841.  
  1842. /*---- ASK/ANSWER POSTS ----*/
  1843. .une_question {
  1844. }
  1845.  
  1846. .que-person {
  1847. text-align:right;
  1848. padding-top:var(--hargaosize);
  1849. line-height:1em;
  1850. --hargaosize:calc(var(--Body-Font-Size) + 2px);
  1851. }
  1852.  
  1853. .que-person .reblog-url {
  1854. position:relative;
  1855. margin-right:calc((var(--Post-Width) * 0.15) + var(--hargaosize));
  1856.  
  1857. /* 'asked' color */
  1858. color:{color:text};
  1859. }
  1860.  
  1861. /* arrow fill */
  1862. .que-person .reblog-url:before {
  1863. content:"";
  1864. position:absolute;
  1865. top:0;margin-top:calc(0px - var(--hargaosize) - 2px);
  1866. right:0;
  1867. margin-right:calc(0px - (var(--hargaosize) * 2) + 1px);
  1868. width:0;height:0;
  1869. border-width:calc(var(--hargaosize) - 2px) calc(var(--hargaosize) - 2px) 0 0;
  1870. border-color:{color:special background} transparent transparent transparent;
  1871. border-style:solid;
  1872. z-index:3;
  1873. }
  1874.  
  1875. /* arrow outline */
  1876. .que-person .reblog-url:after {
  1877. content:"";
  1878. position:absolute;
  1879. top:0;margin-top:calc(0px - var(--hargaosize) - 1px);
  1880. margin-left:var(--hargaosize);
  1881. width:0;height:0;
  1882. border-width:var(--hargaosize) var(--hargaosize) 0 0;
  1883. border-color:{color:special border} transparent transparent transparent;
  1884. border-style:solid;
  1885. }
  1886.  
  1887. .que-person .reblog-url b {
  1888. /* asker username color */
  1889. font-weight:normal;
  1890. color:var(--Reblogger-Username-Color);
  1891. }
  1892.  
  1893. .question_text {
  1894. position:relative;
  1895. padding:calc(var(--Captions-Gap) - 2px) var(--Captions-Gap);
  1896. background:{color:special background};
  1897. border-radius:3px;
  1898. border:1px solid {color:special border};
  1899. color:{color:special text};
  1900. text-align:right;
  1901. }
  1902.  
  1903. /* thin invisible strip to cover the 1px bug */
  1904. .question_text:after {
  1905. content:"";
  1906. position:absolute;
  1907. bottom:0;margin-bottom:-1px;
  1908. right:0;margin-right:3px;
  1909. width:calc(100% - 6px);
  1910. height:3px;
  1911. border-bottom:1px solid {color:special border};
  1912. background:{color:special background};
  1913. z-index:3;
  1914. }
  1915.  
  1916. .question_text > p:first-child {
  1917. margin-top:0px;
  1918. }
  1919.  
  1920. .question_text > p:only-child {
  1921. margin-bottom:0;
  1922. }
  1923.  
  1924. .une_question + .une_reponse {
  1925. margin-top:var(--Reblogs-Spacing);
  1926. }
  1927.  
  1928. .une_reponse .reblog-url {
  1929. /* 'answered' text color */
  1930. color:{color:text};
  1931. }
  1932.  
  1933. /*---- TAGS SECTION ----*/
  1934. .tagsdiv {
  1935. margin-top:var(--Captions-Gap);
  1936. }
  1937.  
  1938. .tagsdiv[clicktags="yes"] {
  1939. {block:IndexPage}
  1940. display:none;
  1941. opacity:0;
  1942. transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
  1943. {/block:IndexPage}
  1944. }
  1945.  
  1946. .tagsfade {
  1947. opacity:1!important;
  1948. }
  1949.  
  1950. .tagsin {
  1951. display:flex;
  1952. flex-wrap:wrap;
  1953. justify-content:flex-end;
  1954. margin:calc(0px - var(--Tags-Spacing));
  1955. /*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
  1956. margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
  1957. }
  1958.  
  1959. .tagsin a {
  1960. position:relative;
  1961. display:block;
  1962. margin:var(--Tags-Spacing);
  1963. font-family:var(--SmallCaps-Font-Family);
  1964. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  1965. text-transform:uppercase;
  1966. letter-spacing:.7px;
  1967. color:{color:tags};
  1968. }
  1969.  
  1970. .tagsin a:before {
  1971. content:"#";
  1972. font-family:work sans;
  1973. margin-right:.5px;
  1974. }
  1975.  
  1976. /*---- PERMALINK BAR ----*/
  1977. .permadiv {
  1978. margin-top:10px;
  1979. display:flex;
  1980. align-items:center;
  1981. justify-content:space-between;
  1982. padding:calc(var(--Post-Padding) - 2px) var(--Post-Padding);
  1983. background:{color:permalink background};
  1984. border:1px solid {color:permalink border};
  1985. font-family:var(--SmallCaps-Font-Family);
  1986. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  1987. text-transform:uppercase;
  1988. letter-spacing:.5px;
  1989. }
  1990.  
  1991. .permadiv, .permadiv a {
  1992. color:{color:permalink};
  1993. }
  1994.  
  1995. .permaleft {
  1996. white-space:nowrap;
  1997. overflow:hidden;
  1998. text-transform:uppercase;
  1999. letter-spacing:.7px;
  2000. word-spacing:1px;
  2001. }
  2002.  
  2003. .permaleft a {
  2004. display:flex;
  2005. align-items:center;
  2006. margin:calc(0px - var(--Post-Padding)) 0;
  2007. padding:var(--Post-Padding) 0;
  2008. }
  2009.  
  2010. /* the "source: @--" part: crop it */
  2011. .permaleft a:first-of-type {
  2012. max-width:calc(var(--Post-Width) * 0.4);
  2013. overflow:hidden;
  2014. text-overflow:ellipsis;
  2015. white-space:nowrap;
  2016. }
  2017.  
  2018. .permaleft a:first-of-type [src-link]{
  2019. text-overflow:ellipsis;
  2020. max-width:100%;
  2021. overflow:hidden;
  2022. }
  2023.  
  2024. .permaleft a + a {
  2025. margin-left:var(--Permalink-Text-Spacing);
  2026. }
  2027.  
  2028. .permaleft .iconsax {
  2029. --Iconsax-Size:calc(var(--Body-Font-Size) + 2px);
  2030. --Iconsax-Color:{color:permalink};
  2031. margin-right:7px;
  2032. }
  2033.  
  2034. .permaright {
  2035. display:flex;
  2036. align-items:center;
  2037. justify-content:center;
  2038. letter-spacing:1px;
  2039. }
  2040.  
  2041. .permaright a {
  2042. display:block;
  2043. position:relative;
  2044. {block:IndexPage}
  2045. width:var(--Post-Buttons-Size);
  2046. height:var(--Post-Buttons-Size);
  2047. {/block:IndexPage}
  2048. backface-visibility:hidden;
  2049. }
  2050.  
  2051. .permaright .iconsax {
  2052. display:block;
  2053. --Iconsax-Size:var(--Post-Buttons-Size);
  2054. --Iconsax-Color:var(--Post-Buttons-Color);
  2055. backface-visibility:hidden;
  2056. }
  2057.  
  2058. .permaright .iconsax[icon-name='repeat']{
  2059. transform-origin:center;
  2060. transform:scaleX(1.1);
  2061. }
  2062.  
  2063. .permaright .cp {
  2064. padding-left:1px;
  2065. font-size:var(--Post-Buttons-Size);
  2066. color:var(--Post-Buttons-Color);
  2067. }
  2068.  
  2069. .permaright span {display:block}
  2070.  
  2071. .permaright a + a {
  2072. margin-left:var(--Post-Buttons-Spacing);
  2073. }
  2074.  
  2075. .permaright[clicktags="no"] .clicktags {
  2076. display:none;
  2077. }
  2078.  
  2079. .clicktags {
  2080. cursor:help;
  2081. }
  2082.  
  2083. .like_button {
  2084. position:absolute;
  2085. top:0;left:0;
  2086. width:100%;
  2087. height:100%;
  2088. z-index:2;
  2089. }
  2090.  
  2091. .like_button iframe {
  2092. width:100%;
  2093. height:100%;
  2094. vertical-align:initial;
  2095. opacity:0;
  2096. }
  2097.  
  2098. .like_button.liked + .cp-heart-o {
  2099. color:var(--Like-Button-Liked);
  2100. }
  2101.  
  2102. .permaright a[dash]{
  2103. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  2104. }
  2105.  
  2106. /*---- POST NOTES ----*/
  2107. .notescont {
  2108. margin-top:calc(var(--Post-Spacing) / 2);
  2109. padding:var(--Post-Padding);
  2110. background:{color:post};
  2111. border:1px solid {color:post borders outer};
  2112. }
  2113.  
  2114. .notescont h1 {
  2115. margin-top:5px;
  2116. margin-bottom:calc(var(--Heading-Margins) + 10px);
  2117. letter-spacing:1px;
  2118. text-align:center;
  2119. }
  2120.  
  2121. .notescont ol.notes {
  2122. padding:0;
  2123. margin:0;
  2124. }
  2125.  
  2126. .notescont li {
  2127. list-style-type:none;
  2128. padding:0!important;
  2129. }
  2130.  
  2131. .notescont li + li {
  2132. margin-top:var(--Notes-Row-Spacing);
  2133. }
  2134.  
  2135. .notescont li:before {
  2136. font-family:phosphor;
  2137. font-size:var(--Notes-Indicator-Size);
  2138. color:{color:text};
  2139. vertical-align:middle;
  2140. }
  2141.  
  2142. .notescont li.like:before {
  2143. content:"\f1ca";
  2144. }
  2145.  
  2146. .notescont li.reblog:before {
  2147. content:"\f2c3";
  2148. }
  2149.  
  2150. .notescont li.reply:before,
  2151. .notescont li.with_commentary:before {
  2152. content:"\f0db"!important;
  2153. }
  2154.  
  2155. .notescont .avatar_frame {
  2156. display:none;
  2157. }
  2158.  
  2159. .notescont .avatar_frame + .action {
  2160. margin-left:var(--Notes-Indicator-Gap-Right);
  2161. }
  2162.  
  2163. .notescont .action a {
  2164. font-family:var(--SmallCaps-Font-Family);
  2165. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  2166. text-transform:uppercase;
  2167. letter-spacing:.7px;
  2168. color:var(--Reblogger-Username-Color);
  2169. }
  2170.  
  2171. .notescont blockquote {
  2172. margin-left:calc(var(--Notes-Indicator-Size) / 2);
  2173. padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
  2174. }
  2175.  
  2176. .more_notes_link_container {
  2177. margin-top:1em!important;
  2178. margin-bottom:calc(var(--Paragraph-Margins) / 2);
  2179. }
  2180.  
  2181. .more_notes_link, .notes_loading {
  2182. font-family:var(--SmallCaps-Font-Family);
  2183. font-size:var(--SmallCaps-Font-Size);
  2184. text-transform:uppercase;
  2185. letter-spacing:.5px;
  2186. color:{color:link};
  2187. }
  2188.  
  2189. /*---- PAGINATION ----*/
  2190. .botpagi {
  2191. display:flex;
  2192. align-items:center;
  2193. justify-content:space-between;
  2194. width:var(--Post-Width-Total);
  2195. margin-bottom:calc(var(--Post-Spacing) / 2);
  2196. font-family:var(--SmallCaps-Font-Family);
  2197. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  2198. text-transform:uppercase;
  2199. letter-spacing:.7px;
  2200. line-height:1em;
  2201. }
  2202.  
  2203. .botpagi a {
  2204. padding:0.69em;
  2205. margin:-0.69em;
  2206. color:var(--Pagination-Color)!important;
  2207. }
  2208.  
  2209. .botpagi span {
  2210. padding:0 4px;
  2211. }
  2212.  
  2213. .prev-svg {
  2214. margin-top:-.5px;
  2215. width:calc(var(--Body-Font-Size) + 3px);
  2216. height:calc(var(--Body-Font-Size) + 3px);
  2217. -webkit-mask-image:var(--BackSVG);
  2218. -webkit-mask-repeat:no-repeat;
  2219. -webkit-mask-size:contain;
  2220. background:var(--Pagination-Color)
  2221. }
  2222.  
  2223. .next-svg {
  2224. margin-top:-.5px;
  2225. width:calc(var(--Body-Font-Size) + 3px);
  2226. height:calc(var(--Body-Font-Size) + 3px);
  2227. -webkit-mask-image:var(--NextSVG);
  2228. -webkit-mask-repeat:no-repeat;
  2229. -webkit-mask-size:contain;
  2230. background:var(--Pagination-Color)
  2231. }
  2232.  
  2233. .pn {
  2234. margin-left:auto!important;
  2235. }
  2236.  
  2237. /*--- ignore this ---*/
  2238. [customize-page='true'] .msby {
  2239. display:block;
  2240. }
  2241.  
  2242. .msby {
  2243. display:none;
  2244. position:fixed;
  2245. bottom:0;left:0;
  2246. width:100%;
  2247. padding:15px 17px;
  2248. background:{color:background};
  2249. border-top:1px solid rgba({RGBcolor:sidebar dividers},0.420);
  2250. box-sizing:border-box;
  2251. color:{color:text};
  2252. text-align:center;
  2253. z-index:69;
  2254. }
  2255.  
  2256. .msby a {
  2257. font-family:var(--SmallCaps-Font-Family);
  2258. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  2259. text-transform:uppercase;
  2260. letter-spacing:1.3px;
  2261. color:#de706f;
  2262. }
  2263. /*-------------------*/
  2264.  
  2265. {CustomCSS}
  2266. </style>
  2267.  
  2268. </head>
  2269.  
  2270. <!-------------------->
  2271.  
  2272. <body>
  2273.  
  2274. <!---- TOP BAR ---->
  2275. <div class="topbar">
  2276. <div flex class="otae">
  2277. <div class="dango">
  2278. <div class="ichi-avi"></div>
  2279. <img class="ichi-invis" src="{image:top bar icon}">
  2280. </div>
  2281.  
  2282. <div butain>
  2283. {block:iftoplefttitle}
  2284. <div tl-title>{text:top left title}</div>
  2285. {/block:iftoplefttitle}
  2286.  
  2287. {block:ifnottoplefttitle}
  2288. <div tl-title>{Title}</div>
  2289. {/block:ifnottoplefttitle}
  2290.  
  2291. <div class="navlinks">
  2292. <a href="//{Name}.tumblr.com">home</a>
  2293. <a href="//{Name}.tumblr.com/ask">askbox</a>
  2294. <a href="//{Name}.tumblr.com/archive">archive</a>
  2295.  
  2296. <!--please do not remove the credit, thank you!!-->
  2297. <a href="//glenthemes.tumblr.com" title="&#34;bloodlust&#34; by glenthemes">theme</a>
  2298. </div><!--navlinks-->
  2299. </div><!--butain (icon's right text)-->
  2300. </div><!--flex (left)-->
  2301.  
  2302. <div class="kirin">
  2303. <div class="jindosh">
  2304. {block:iftopcentertitle}
  2305. <div tit-center>{text:top center title}</div>
  2306. {/block:iftopcentertitle}
  2307.  
  2308. <div class="customlinks">
  2309. {block:ifcustomlink1name}
  2310. <a href="{text:customlink 1 url}">{text:customlink 1 name}</a>
  2311. {/block:ifcustomlink1name}
  2312.  
  2313. {block:ifcustomlink2name}
  2314. <a href="{text:customlink 2 url}">{text:customlink 2 name}</a>
  2315. {/block:ifcustomlink2name}
  2316.  
  2317. {block:ifcustomlink3name}
  2318. <a href="{text:customlink 3 url}">{text:customlink 3 name}</a>
  2319. {/block:ifcustomlink3name}
  2320.  
  2321. {block:ifcustomlink4name}
  2322. <a href="{text:customlink 4 url}">{text:customlink 4 name}</a>
  2323. {/block:ifcustomlink4name}
  2324.  
  2325. {block:ifcustomlink5name}
  2326. <a href="{text:customlink 5 url}">{text:customlink 5 name}</a>
  2327. {/block:ifcustomlink5name}
  2328.  
  2329. {block:ifcustomlink6name}
  2330. <a href="{text:customlink 6 url}">{text:customlink 6 name}</a>
  2331. {/block:ifcustomlink6name}
  2332. </div><!--customlinks-->
  2333. </div><!--jindosh-->
  2334. </div><!--kirin-->
  2335.  
  2336. <!--- SEARCHBAR --->
  2337. <div class="cheddar">
  2338. <form class="srchbar" action="/search" method="get">
  2339. <input type="text" name="q" value="{SearchQuery}" placeholder="search..." autocomplete="off">
  2340.  
  2341. <button class="srchgo" type="submit">
  2342. <i class="ph-magnifying-glass"></i>
  2343. </button>
  2344. </form>
  2345. </div><!--end searchbar-->
  2346. </div><!--topbar-->
  2347.  
  2348.  
  2349. <!---- HEADER ---->
  2350. <div class="le-header" page-{CurrentPage}></div>
  2351.  
  2352. <!---- MAIN CONTAINER ---->
  2353. <div class="mynoots">
  2354. <div class="nymoots">
  2355. <div class="ensoot">
  2356.  
  2357. <!---- LEFT SIDEBAR ---->
  2358. <div class="left-sidebar">
  2359. {block:ifleftsidebarbox1title}
  2360. <div class="box-title">{text:left sidebar box 1 title}</div>
  2361. {/block:ifleftsidebarbox1title}
  2362.  
  2363. {block:ifleftsidebarbox1}
  2364. <div box-body class="descbox">{text:left sidebar box 1}</div>
  2365. {/block:ifleftsidebarbox1}
  2366.  
  2367. {block:ifnotleftsidebarbox1}
  2368. {block:Description}
  2369. <div class="descbox">{Description}</div>
  2370. {/block:Description}
  2371. {/block:ifnotleftsidebarbox1}
  2372.  
  2373. <!--------------------------->
  2374.  
  2375. {block:ifleftsidebarbox2title}
  2376. <div class="box-title">{text:left sidebar box 2 title}</div>
  2377. {/block:ifleftsidebarbox2title}
  2378.  
  2379. {block:ifleftsidebarbox2}
  2380. <div box-body class="blogs-box" input="{text:left sidebar box 2}">{text:left sidebar box 2}</div>
  2381. {/block:ifleftsidebarbox2}
  2382.  
  2383. <!--------------------------->
  2384.  
  2385. {block:ifleftsidebarbox3title}
  2386. <div class="box-title">{text:left sidebar box 3 title}</div>
  2387. {/block:ifleftsidebarbox3title}
  2388.  
  2389. {block:ifleftsidebarbox3}
  2390. <div box-body class="socials-box" input="{text:left sidebar box 3}">{text:left sidebar box 3}</div>
  2391. {/block:ifleftsidebarbox3}
  2392. </div><!--left-sidebar-->
  2393.  
  2394. <!---- POSTS ---->
  2395. <div class="postscont" black-and-white="{select:grayscale images}">
  2396.  
  2397. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2398. <div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}" seamless="{select:borderless posts}">
  2399.  
  2400. <div class="postinner">
  2401.  
  2402. <!------ POST TITLE ------>
  2403. {block:Title}
  2404. <h1 class="post-title">{Title}</h1>
  2405. {/block:Title}
  2406.  
  2407. <!------ TEXT POSTS ------>
  2408. {block:Text}
  2409. {block:NotReblog}{Body}{/block:NotReblog}
  2410. {block:RebloggedFrom}
  2411. {block:Reblogs}
  2412. <div class="reblog-wrap">
  2413. <div class="reblog-head source-head">
  2414. <img src="{PortraitURL-64}">
  2415. <span class="reblog-url">
  2416. <a href="{Permalink}">{Username}</a>
  2417. </span>
  2418. </div>
  2419. <div class="reblog-comment">{Body}</div>
  2420. </div>
  2421. {/block:Reblogs}
  2422. {/block:RebloggedFrom}
  2423. {/block:Text}
  2424.  
  2425. <!------ SINGLE PHOTO ------>
  2426. {block:Photo}
  2427. <a class="single-photo" 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>
  2428. {/block:Photo}
  2429.  
  2430. <!------ PHOTOSETS ------>
  2431. {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}
  2432.  
  2433. <!------ QUOTE POSTS ------>
  2434. {block:Quote}
  2435. <div class="quote-words">{Quote}</div>
  2436. {block:Source}
  2437. <div class="quote-source">
  2438. <span mdash>&mdash;</span>
  2439. {Source}
  2440. </div>{/block:Source}
  2441. {/block:Quote}
  2442.  
  2443. <!------ LINK POSTS ------>
  2444. {block:Link}
  2445. <a class="linkpost-title" href="{URL}" {Target}>
  2446. <span>{Name}</span>
  2447. <div class="linksym"></div>
  2448. </a>
  2449.  
  2450. {block:Excerpt}
  2451. <div class="link-excerpt">
  2452. {Excerpt}
  2453. {block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
  2454. </div>
  2455. {/block:Excerpt}
  2456.  
  2457. {block:Description}
  2458. <div class="link-description">
  2459. {block:NotReblog}{Description}{/block:NotReblog}
  2460. {block:RebloggedFrom}
  2461. {block:Reblogs}
  2462. <div class="reblog-wrap">
  2463. <div class="reblog-head">
  2464. <img src="{PortraitURL-64}">
  2465. <span class="reblog-url">
  2466. <a href="{Permalink}">{Username}</a>
  2467. </span>
  2468. </div>
  2469. <div class="reblog-comment">{Body}</div>
  2470. </div>
  2471. {/block:Reblogs}
  2472. {/block:RebloggedFrom}
  2473. </div>
  2474. {/block:Description}
  2475. {/block:Link}
  2476.  
  2477. <!------ CHAT POSTS ------>
  2478. {block:Chat}
  2479. <div class="chatwrap">
  2480. {block:Lines}
  2481. <div class="chat_row">
  2482. {block:Label}
  2483. <div class="chat_label">{Label}</div>
  2484. {/block:Label}
  2485.  
  2486. <div class="chat_content">
  2487. {Line}
  2488. </div>
  2489. </div>
  2490. {/block:Lines}
  2491. </div>
  2492. {/block:Chat}
  2493.  
  2494. <!------ AUDIO POSTS ------>
  2495. {block:Audio}
  2496. <div class="audiowrap">
  2497. {block:AudioPlayer}
  2498. <div class="aud-emb">
  2499. {AudioPlayer}
  2500. </div>
  2501. {/block:AudioPlayer}
  2502.  
  2503. <div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
  2504. {block:AlbumArt}
  2505. <img src="{AlbumArtURL}">
  2506. {/block:AlbumArt}
  2507.  
  2508. <div class="audplac"></div>
  2509.  
  2510. <div class="butts">
  2511. <div class="overplay"></div>
  2512. <div class="overpause"></div>
  2513. </div>
  2514. </div>
  2515.  
  2516. <div class="audiotxt">
  2517. <div class="odin">
  2518.  
  2519. <div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
  2520. <div class="untit">Untitled track</div>
  2521.  
  2522. {block:TrackName}
  2523. <div class="hastit">{TrackName}</div>
  2524. {/block:TrackName}
  2525. </div>
  2526.  
  2527. {block:Album}
  2528. <div class="aud-album-name">{Album}</div>
  2529. {/block:Album}
  2530.  
  2531. <div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
  2532. <div class="unart">Unknown artist</div>
  2533.  
  2534. {block:Artist}
  2535. <div class="hasart">{Artist}</div>
  2536. {/block:Artist}
  2537. </div>
  2538. </div><!--odin-->
  2539.  
  2540. <a class="inari" title="download" target="_blank">
  2541. <span class="int-all"></span>
  2542. </a>
  2543. </div><!--audiotxt-->
  2544. </div><!--audiowrap-->
  2545. {/block:Audio}
  2546.  
  2547. <!------ VIDEO POSTS ------>
  2548. {block:Video}
  2549. <div class="tmblr-video">{Video-500}</div>
  2550. {/block:Video}
  2551.  
  2552. <!------ ANSWER POSTS ------>
  2553. {block:Answer}
  2554. <!-- who asked? -->
  2555. <div class="une_question">
  2556.  
  2557. <div class="question_text">{Question}</div>
  2558.  
  2559. <div class="que-person">
  2560. <span class="reblog-url"><b>{Asker}</b> asked:</span>
  2561. </div>
  2562. </div>
  2563.  
  2564. <!--------------------------------------->
  2565.  
  2566. <!-- who answered? -->
  2567. {block:Answerer}
  2568. <div class="reblog-wrap une_reponse">
  2569. <div class="answerer reblog-head">
  2570. <img src="{AnswererPortraitURL-64}">
  2571. <span class="reblog-url">{Answerer} answered:</span>
  2572. </div>
  2573. <p class="answer_text">{Answer}</p>
  2574. </div>
  2575.  
  2576. <!-- additional reblogs to the ask post -->
  2577. {block:Reblogs}
  2578. <div class="reblog-wrap reply_container">
  2579. <div class="replier reblog-head">
  2580. <img src="{PortraitURL-64}">
  2581. <span class="reblog-url">
  2582. <a href="{Permalink}">{Username}</a>
  2583. </span>
  2584. </div>
  2585. <div class="reply">{Body}</div>
  2586. </div>
  2587. {/block:Reblogs}
  2588. {/block:Answerer}
  2589.  
  2590. <!--------------------------------------->
  2591.  
  2592. <!-- original answer post -->
  2593. {block:NotReblog}
  2594. <div class="reblog-wrap une-reponse">
  2595. <div class="answerer reblog-head">
  2596. <img src="{PortraitURL-64}">
  2597. <span class="reblog-url">
  2598. <a href="{Permalink}">{Name}</a>
  2599. </span>
  2600. </div>
  2601.  
  2602. <div class="answer_text">{Answer}</div>
  2603. </div><!--answer-container-->
  2604. {/block:NotReblog}
  2605. {/block:Answer}
  2606. <!------ END ANSWER ------>
  2607.  
  2608. <!------ 'CAPTION'? ------>
  2609. {block:Caption}
  2610. <div class="caption">
  2611. {block:NotReblog}{Caption}{/block:NotReblog}
  2612. {block:RebloggedFrom}
  2613. {block:Reblogs}
  2614. <div class="reblog-wrap">
  2615. <div class="reblog-head">
  2616. <img src="{PortraitURL-64}">
  2617. <span class="reblog-url">
  2618. <a href="{Permalink}">{Username}</a>
  2619. </span>
  2620. </div><!--reblog-head-->
  2621. <div class="reblog-comment">{Body}</div>
  2622. </div><!--comment-container-->
  2623. {/block:Reblogs}
  2624. {/block:RebloggedFrom}
  2625. </div><!--caption-->
  2626. {/block:Caption}
  2627.  
  2628.  
  2629. <!------ TAGS ------>
  2630. {block:HasTags}
  2631. <div class="tagsdiv" clicktags="{select:click tags}">
  2632. <div class="tagsin">
  2633. {block:Tags}
  2634. <a href="{TagURL}">{Tag}</a>
  2635. {/block:Tags}
  2636. </div>
  2637. </div>
  2638. {/block:HasTags}
  2639. </div><!--postinner-->
  2640.  
  2641. <!------ PERMALINK ------>
  2642. {block:Date}
  2643. <div class="permadiv">
  2644. <div class="permaleft" flex>
  2645. <i class="iconsax" icon-name="stickynote"></i>
  2646.  
  2647. {block:RebloggedFrom}
  2648. <a href="{ReblogRootURL}">Source:&ensp;<span src-link>{ReblogRootName}</span></a>
  2649. {/block:RebloggedFrom}
  2650.  
  2651. {block:NotReblog}
  2652. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>Original Post</a>
  2653. {/block:NotReblog}
  2654.  
  2655. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{NoteCountWithLabel}</a>
  2656.  
  2657. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{TimeAgo}</a>
  2658.  
  2659. {block:IndexPage}
  2660. {block:PinnedPostLabel}<a>Pinned Post</a>{/block:PinnedPostLabel}
  2661. {/block:IndexPage}
  2662. </div>
  2663.  
  2664. <!------------------------------>
  2665. {block:IndexPage}
  2666. <div class="permaright" clicktags="{select:click tags}">
  2667. {block:HasTags}
  2668. <a class="clicktags">
  2669. <i class="iconsax" icon-name="hashtag"></i>
  2670. </a>
  2671. {/block:HasTags}
  2672.  
  2673.  
  2674. <a href="{ReblogURL}" title="reblog this post">
  2675. <i class="iconsax" icon-name="repeat"></i>
  2676. </a>
  2677.  
  2678. <a title="like this post">
  2679. {LikeButton}
  2680. <i class="cp cp-heart-o"></i>
  2681. </a>
  2682. </div>
  2683. {/block:IndexPage}
  2684. <!------------------------------>
  2685.  
  2686. {block:PermalinkPage}
  2687. <div class="permaright">
  2688. {block:NotReblog}
  2689. original post
  2690. {/block:NotReblog}
  2691.  
  2692. {block:RebloggedFrom}
  2693. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2694. <a dash>/</a>
  2695. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  2696. {/block:RebloggedFrom}
  2697. </div>
  2698. {/block:PermalinkPage}
  2699.  
  2700. </div><!--permadiv-->
  2701. {/block:Date}
  2702.  
  2703. {block:PostNotes}
  2704. <div class="notescont">
  2705. <h1>{NoteCountWithLabel}</h1>
  2706. {PostNotes}
  2707. </div>
  2708. {/block:PostNotes}
  2709. </div><!--posts-->
  2710.  
  2711. {/block:Posts}
  2712.  
  2713. <!------ PAGINATION ------>
  2714. {block:Pagination}
  2715. <div class="botpagi">
  2716. {block:PreviousPage}
  2717. <a class="flex" href="{PreviousPage}">
  2718. <div class="prev-svg"></div>
  2719. <span>previous page</span>
  2720. </a>
  2721. {/block:PreviousPage}
  2722.  
  2723. {block:NextPage}
  2724. <a class="flex pn" href="{NextPage}">
  2725. <span>next page</span>
  2726. <div class="next-svg"></div>
  2727. </a>
  2728. {/block:NextPage}
  2729. </div>
  2730. {/block:Pagination}
  2731. </div><!--postscont-->
  2732.  
  2733. <!---- RIGHT SIDEBAR ---->
  2734. <div class="right-sidebar">
  2735. <img class="sb-banner" src="{image:sidebar banner 1}">
  2736.  
  2737. {block:ifrightsidebarbox1}
  2738. <div box-body class="statsbox" two-cols>{text:right sidebar box 1}</div>
  2739. {/block:ifrightsidebarbox1}
  2740.  
  2741. <!-------------------------->
  2742.  
  2743. {block:ifrightsidebarbox2title}
  2744. <div class="box-title">{text:right sidebar box 2 title}</div>
  2745. {/block:ifrightsidebarbox2title}
  2746.  
  2747. {block:ifrightsidebarbox2}
  2748. <div box-body class="statsbox" one-col>{text:right sidebar box 2}</div>
  2749. {/block:ifrightsidebarbox2}
  2750.  
  2751. <img class="sb-banner" src="{image:sidebar banner 2}">
  2752. </div><!--right-sidebar-->
  2753. </div><!--ensoot-->
  2754. </div><!--nymoots-->
  2755. </div><!--mynoots-->
  2756.  
  2757. <div class="msby"></div>
  2758.  
  2759. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2760.  
  2761. </body>
  2762. </html>
Advertisement
Add Comment
Please, Sign In to add comment