API tools faq
paste
Advertisement
themesbydoori

Nubivagant

themesbydoori
Dec 26th, 2017 (edited)
8,810
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 69.72 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾NUBIVAGENT⏌ by sheathemes @ tumblr
  11.  
  12. Updated: 6.20.2022
  13.  
  14. - TERMS -
  15.  
  16. I. Do NOT remo#ve my credit from the index page. Keep it exactly where it is
  17. II. Do NOT take any part of my code to use for your personal designs
  18. III. Do NOT claim any part of my code as your own
  19. IV. NO redistrubuting of any of my code
  20. V. Editing is allowed. As long as it's NOT being claimed as your own
  21.  
  22. CREDITS
  23.  
  24. > PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Modified PXU photoset script tutorial by bychloethemes @ tumblr: http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  25.  
  26. > Responsive tumblr videos and external iframes script: https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  27.  
  28. > Time ago script: https://bychloethemes.tumblr.com/plugins/timeago
  29.  
  30. > .gifv to gif conversion script: https://felicitysmoak.tumblr.com/post/188159105501/
  31.  
  32. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  33.  
  34. > Tippy.js: https://atomiks.github.io/tippyjs/
  35.  
  36. > Icons: https://themify.me/themify-icons || https://feathericons.com/
  37.  
  38. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  39.  
  40. > Customaudio.js: https://annasthms.tumblr.com/more/js/customaudio/new
  41.  
  42. > Mini spotify player: https://glenthemes.tumblr.com/post/659842079511461888
  43.  
  44. > NPF images fix v3.0: https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  45.  
  46. > Search Suggestions Script: https://shythemes.tumblr.com/post/138692201618/tutorial-search-tags
  47.  
  48. > Accessible dark mode: https://rstylr.tumblr.com/plugins/darkmode
  49.  
  50. !-->
  51.  
  52. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  53. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  54.  
  55. <head>
  56.  
  57. <script>
  58. {block:ifdarkmode}
  59. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  60. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  61. {/block:ifdarkmode}
  62. </script>
  63.  
  64. <!------------Smooth Scroll Script------------>
  65. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  66. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  67. <!------------Smooth Scroll Script------------>
  68.  
  69. <!--------------Custom Fonts-------------->
  70. <link rel="preconnect" href="https://fonts.googleapis.com">
  71. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  72. <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  73. <!--------------Custom Fonts-------------->
  74.  
  75. <!--Homelinks Icons -->
  76. <script src="https://unpkg.com/phosphor-icons"></script>
  77. <!--Homelinks Icons-->
  78.  
  79.  
  80.     <title>{Title}</title>
  81.     <link rel="shortcut icon" href="{Favicon}">
  82.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  83.     <meta charset="utf-8">
  84.     {block:Description}
  85.     <meta name="description" content="{MetaDescription}" />
  86.     {/block:Description}
  87.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  88.     <meta name="viewport" content="width=device-width, initial-scale=1">
  89.  
  90. <!--Custom Options-->
  91. <meta name="color:background" content="#f8f8f8" />
  92. <meta name="color:accent" content="#7ba2a5" />
  93. <meta name="color:accented text" content="#000000" />
  94. <meta name="color:Text" content="#444444" />    
  95. <meta name="color:bold" content="#7ba2a5"/>
  96. <meta name="color:italic" content="#000000"/>
  97. <meta name="color:Links" content="#000000" />
  98. <meta name="color:Link Hover" content="#7ba2a5" />
  99. <meta name="color:text selection" content="#ffffff" />
  100. <meta name="color:text selection background" content="#7ba2a5" />
  101. <meta name="color:Blockquote" content="#7ba2a5" />
  102. <meta name="color:scrollbar" content="#7ba2a5" />
  103. <meta name="color:sidebar" content="#000000" />
  104. <meta name="color:sidebar title" content="#ffffff" />
  105. <meta name="color:description" content="#ffffff" />
  106. <meta name="color:top banner" content="#000000" />
  107. <meta name="color:Posts" content="#ffffff" />
  108. <meta name="color:Post Title" content="#000000" />
  109. <meta name="color:Post Borders" content="#f6f6f6" />
  110. <meta name="color:question" content="#000000" />
  111. <meta name="color:question background" content="#fafafa" />
  112. <meta name="color:chat odd" content="#7ba2a5"/>
  113. <meta name="color:chat even" content="#000000"/>
  114. <meta name="color:pagination" content="#000000" />
  115. <meta name="color:permalink" content="#000000" />
  116. <meta name="color:permalink hover" content="#7ba2a5" />
  117.  
  118. <meta name="color:&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;">
  119.  
  120. <!------- night mode ------>
  121.  
  122. <meta name="color:accent night" content="#9ab7ba" />
  123. <meta name="color:accented text night" content="#000000" />
  124. <meta name="color:background night" content="#313131" />
  125. <meta name="color:text night" content="#ffffff" />
  126. <meta name="color:bold night" content="#9ab7ba" />
  127. <meta name="color:italic night" content="#ffffff" />
  128. <meta name="color:links night" content="#ffffff" />
  129. <meta name="color:link hover night" content="#9ab7ba" />
  130. <meta name="color:text selection night" content="#ffffff" />
  131. <meta name="color:text selection background night" content="#9ab7ba" />
  132. <meta name="color:sidebar night" content="#414141" />
  133. <meta name="color:sidebar title night" content="#ffffff" />
  134. <meta name="color:description night" content="#ffffff" />
  135. <meta name="color:top banner night" content="#414141" />
  136. <meta name="color:posts background night" content="#414141" />
  137. <meta name="color:posts title night" content="#ffffff" />
  138. <meta name="color:post borders night" content="#333333" />
  139. <meta name="color:question night" content="#ffffff" />
  140. <meta name="color:question background night" content="#525252" />
  141. <meta name="color:chat odd night" content="#9ab7ba"/>
  142. <meta name="color:chat even night" content="#ffffff"/>
  143. <meta name="color:pagination night" content="#ffffff" />
  144. <meta name="color:permalink night" content="#ffffff" />
  145. <meta name="color:permalink hover night" content="#9ab7ba" />
  146.  
  147.  
  148. <meta name="select:Background Attachment" content="fixed" title="fixed">
  149. <meta name="select:Background Attachment" content="scroll" title="scroll">
  150. <meta name="select:Background Repeat" content="repeat" title="repeat">
  151. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  152.  
  153. <meta name="select:Body Font" content="Open Sans" title="Open Sans">
  154. <meta name="select:Body Font" content="Exo" title="Exo">
  155. <meta name="select:Body Font" content="Montserrat" title="Montserrat">
  156. <meta name="select:Body Font" content="Roboto" title="Roboto">
  157. <meta name="select:Body Font" content="Poppins" title="Poppins">
  158. <meta name="select:Body Font" content="Ubuntu" title="Ubuntu">
  159. <meta name="select:Body Font" content="Noto Sans" title="Noto Sans">
  160.  
  161. <meta name="select:font size" content="11" title="11px">
  162. <meta name="select:font size" content="12" title="12px">
  163. <meta name="select:font size" content="13" title="13px">
  164. <meta name="select:font size" content="14" title="14px">
  165. <meta name="select:font size" content="15" title="15px">
  166.  
  167. <meta name="select:text align" content="left" title="left">
  168. <meta name="select:text align" content="justify" title="justify">
  169. <meta name="select:description text align" content="center" title="center">
  170. <meta name="select:description text align" content="justify" title="justify">
  171.  
  172. <meta name="select:Post Size" content="400" title="400px">
  173. <meta name="select:Post Size" content="450" title="450px">
  174. <meta name="select:Post Size" content="475" title="475px">
  175. <meta name="select:Post Size" content="500" title="500px">
  176. <meta name="select:Post Size" content="525" title="525px">
  177. <meta name="select:Post Size" content="540" title="540px">
  178. <meta name="select:Post Size" content="650" title="650px">
  179. <meta name="select:Post Size" content="700" title="700px">
  180.  
  181. <meta name="select:Post Padding" content="0" title="0px">
  182. <meta name="select:Post Padding" content="2" title="2px">
  183. <meta name="select:Post Padding" content="5" title="5px">
  184. <meta name="select:Post Padding" content="10" title="10px">
  185. <meta name="select:Post Padding" content="15" title="15px">
  186. <meta name="select:Post Padding" content="20" title="20px">
  187.  
  188. <meta name="select:Photoset gutter" content="1" title="1px">
  189. <meta name="select:Photoset gutter" content="2" title="2px">
  190. <meta name="select:Photoset gutter" content="4" title="4px">
  191. <meta name="select:Photoset gutter" content="6" title="6px">
  192. <meta name="select:Photoset gutter" content="8" title="8px">
  193. <meta name="select:Photoset gutter" content="10" title="10px">
  194.  
  195. <meta name="text:banner title" content="subtitle here" />
  196.  
  197. <meta name="if:Link1" content="1" />
  198. <meta name="if:Link2" content="1" />
  199. <meta name="if:Link3" content="1" />
  200. <meta name="if:Link4" content="1" />
  201. <meta name="if:Link5" content="1" />
  202. <meta name="if:Link6" content="1" />
  203.  
  204. <meta name="text:Custom Link1 URL" content="Link 1 URL" />
  205. <meta name="text:Custom Link1 Name" content="Link 1" />
  206. <meta name="text:Custom Link2 URL" content="Link 2 URL" />
  207. <meta name="text:Custom Link2 Name" content="Link 2" />
  208. <meta name="text:Custom Link3 URL" content="Link 3 URL" />
  209. <meta name="text:Custom Link3 Name" content="Link 3" />
  210. <meta name="text:Custom Link4 URL" content="Link 4 URL" />
  211. <meta name="text:Custom Link4 Name" content="Link 4" />
  212. <meta name="text:Custom Link5 URL" content="Link 5 URL" />
  213. <meta name="text:Custom Link5 Name" content="Link 5" />
  214. <meta name="text:Custom Link6 URL" content="Link 6 URL" />
  215. <meta name="text:Custom Link6 Name" content="Link 6" />
  216.  
  217. <meta name="image:background" content=""/>
  218. <meta name="image:sidebar" content=""/>
  219.  
  220. <meta name="if:dark mode" content="1"/>
  221. <meta name="if:Small Cursor" content="0" />
  222. <meta name="if:Custom Text Selection" content="0"/>
  223. <meta name="if:Faded Images" content="0"/>
  224. <meta name="if:Grayscale Images" content="0"/>
  225. <meta name="if:Show Captions" content="1"/>
  226.  
  227. <!--
  228.        NPF images fix v3.0 by @glenthemes [2021]
  229.        💌 git.io/JRBt7
  230. --->
  231. <script src="//npf-images-v3.github.io/script.js"></script>
  232. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  233.  
  234. <style tmblr-npf>
  235.  
  236. :root {
  237.     --NPF-Caption-Spacing:1em;
  238.     --NPF-Image-Spacing:4px;
  239.    
  240.     /*----------BLOG OPTIONS----------*/
  241.     --text-font: {select:font size}px;
  242.     --post-size: {select:post size}px;
  243. }
  244.  
  245.     /*----------COLOR OPTIONS----------*/
  246.  
  247. :root, html[data-theme='light'] {
  248.     --LightOn: block; /* displays <span> with moon icon */
  249.     --LightOff: none;  /* hides <span> with sun icon */
  250.    
  251.     --main-background: {color:background};
  252.     --accent: {color:accent};
  253.     --accented-text: {color:accented text};
  254.     --lightbox-background: rgba({RGBcolor:background}, 0.6);
  255.     --audio-player-background: rgba({RGBcolor:posts}, 0.8);
  256.     --main-text: {color:text};
  257.     --bold: {color:bold};
  258.     --italic: {color:italic};
  259.     --main-links: {color:links};
  260.     --main-link-hover: {color:link hover};
  261.     --text-selection: {color:text selection};
  262.     --text-selection-background: {color:text selection background};
  263.     --blockquote: {color:blockquote};
  264.     --scrollbar: {color:scrollbar};
  265.     --sidebar: {color:sidebar};
  266.     --sidebar-title: {color:sidebar title};
  267.     --description: {color:description};
  268.     --top-banner: {color:top banner};
  269.     --main-posts: {color:posts};
  270.     --post-title: {color:post title};
  271.     --post-borders: {color:post borders};
  272.     --question: {color:question};
  273.     --question-background: {color:question background};
  274.     --chat-odd: {color:chat odd};
  275.     --chat-even: {color:chat even};
  276.     --pagination: {color:pagination};
  277.     --permalink: {color:permalink};
  278.     --tag-cover: {RGBcolor:permalink background};
  279.     --permalink-hover: {color:permalink hover};
  280. }
  281.  
  282. html[data-theme='dark'] {
  283.     --LightOn: none; /* hides <span> with moon icon */
  284.     --LightOff: block; /* displays <span> with sun icon */
  285.    
  286.     --accent: {color:accent night};
  287.     --accented-text: {color:accented text night};
  288.     --main-background: {color:background night};
  289.     --lightbox-background: rgba({RGBcolor:background night}, 0.6);
  290.     --audio-player-background: rgba({RGBcolor:posts background night}, 0.8);
  291.     --main-text: {color:text night};
  292.     --bold: {color:bold night};
  293.     --italic: {color:italic night};
  294.     --main-links: {color:links night};
  295.     --main-link-hover: {color:link hover night};
  296.     --text-selection: {color:text selection night};
  297.     --text-selection-background: {color:text selection background night};
  298.     --sidebar: {color:sidebar night};
  299.     --sidebar-title: {color:sidebar title night};
  300.     --description: {color:description night};
  301.     --top-banner: {color:top banner night};
  302.     --main-posts: {color:posts background night};
  303.     --post-borders: {color:post borders night};
  304.     --post-title: {color:posts title night};
  305.     --question: {color:question night};
  306.     --question-background: {color:question background night};
  307.     --chat-odd: {color:chat odd night};
  308.     --chat-even: {color:chat even night};
  309.     --pagination: {color:pagination night};
  310.     --permalink: {color:permalink night};
  311.     --permalink-hover: {color:permalink hover night};
  312. }
  313.  
  314. html.theme-transition,
  315. html.theme-transition *,
  316. html.theme-transition *:before,
  317. html.theme-transition *:after {
  318.   transition: 0s !important;
  319.   transition-delay: 0 !important;
  320. }
  321.  
  322. /*----------TUMBLR CONTROLS----------*/
  323.  
  324. iframe.tmblr-iframe {
  325.     position:fixed!important;
  326.     z-index: 300!important;
  327.     top: 90px!important;
  328.     right: 20px!important;
  329.     opacity:0.6!important;
  330.     transform:scale(0.7);
  331.     transform-origin:100% 0;
  332.     -webkit-transform:scale(0.7);
  333.     -webkit-transform-origin:100% 0;
  334.     -o-transform:scale(0.7);
  335.     -o-transform-origin:100% 0;
  336.     -moz-transform:scale(0.7);
  337.     -moz-transform-origin:100% 0;
  338.     -ms-transform:scale(0.7);
  339.      filter:invert(1);
  340.     -webkit-filter:invert(1);
  341.     -o-filter:invert(1);
  342.     -moz-filter:invert(1);
  343.     -ms-filter:invert(1);
  344.     filter:invert(100%) hue-rotate(180deg);
  345.     -webkit-filter:invert(100%) hue-rotate(180deg);
  346.     -moz-filter:invert(100%) hue-rotate(180deg);
  347.     -o-filter:invert(100%) hue-rotate(180deg);
  348.     -ms-filter:invert(100%) hue-rotate(180deg);
  349.     -webkit-transition: 0.6s ease;
  350.     -moz-transition: 0.6s ease;
  351.     -o-transition: 0.6s ease;
  352.     transition: 0.6s ease;
  353. }
  354.  
  355. iframe.tmblr-iframe:hover {
  356.     opacity:1.0!important;
  357.     -webkit-transition: 0.6s ease;
  358.     -moz-transition: 0.6s ease;
  359.     -o-transition: 0.6s ease;
  360.     transition: 0.6s ease;
  361. }
  362.  
  363. html[data-theme='dark'] iframe.tmblr-iframe  {
  364.     opacity: 1;
  365.     filter:invert(0)!important;
  366.     -webkit-filter:invert(0)!important;
  367.     -o-filter:invert(0)!important;
  368.     -moz-filter:invert(0)!important;
  369.     -ms-filter:invert(0)!important;
  370.     filter:invert(100%) hue-rotate(180deg);
  371.     -webkit-filter:invert(100%) hue-rotate(180deg);
  372.     -moz-filter:invert(100%) hue-rotate(180deg);
  373.     -o-filter:invert(100%) hue-rotate(180deg);
  374.     -ms-filter:invert(100%) hue-rotate(180deg);
  375.     -webkit-transition: 0.6s ease;
  376.     -moz-transition: 0.6s ease;
  377.     -o-transition: 0.6s ease;
  378.     transition: 0.6s ease;
  379. }
  380.  
  381. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  382.  
  383. .vignette, #vignette {
  384.     opacity:0;
  385. }
  386. .lightbox-image, #tumblr_lightbox img {
  387.     box-shadow:none !important;
  388.     border-radius:0 !important;
  389.     max-width:none;
  390. }
  391.  
  392. .tmblr-lightbox, #tumblr_lightbox {
  393.     background-color: var(--lightbox-background)!important;
  394. }
  395.  
  396. .lightbox-image, #tumblr_lightbox img {
  397.     background-color: var(--main-posts)!important;
  398.     padding: 10px !important;
  399.     -moz-box-sizing:border-box;
  400.     box-sizing:border-box;
  401. }
  402.  
  403. /*----------SCROLLBAR----------*/
  404.  
  405. ::-webkit-scrollbar {
  406.     width: 10px;
  407.     height: 6px;
  408. }
  409. ::-webkit-scrollbar-button {
  410.     width: 0px;
  411.     height: 0px;
  412. }
  413. ::-webkit-scrollbar-thumb {
  414.     background-color: var(--scrollbar);
  415.     border-radius: 20px;
  416.     border: 2px solid var(--main-background);
  417. }
  418.  
  419. ::-webkit-scrollbar-track {
  420.     background: var(--main-posts);
  421.     border: 8px solid var(--main-posts);
  422.     border-radius: 20px;
  423. }
  424.  
  425. ::-webkit-scrollbar-corner {
  426.     background: transparent;
  427. }
  428.  
  429. /*----------TOOLTIPS----------*/
  430.  
  431. .tippy-tooltip.custom-theme {
  432.     background-color: var(--accent);
  433.     color: var(--accented-text);
  434.     text-align:center;
  435.     font-size: 12px;
  436.     font-weight: 700;
  437. }
  438.  
  439. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  440.   fill: var(--accent);
  441. }
  442.  
  443. /*----------TEXT SELECTION----------*/
  444.  
  445. {block:ifCustomTextSelection}
  446. ::selection {
  447.     background: var(--text-selection-background);
  448.     color: var(--text-selection);
  449. }
  450.  
  451. ::-moz-selection {
  452.     background: var(--text-selection-background);
  453.     color: var(--text-selection);
  454. }
  455.  
  456. ::-webkit-selection {
  457.     background: var(--text-selection-background);
  458.     color: var(--text-selection);
  459. }
  460. {/block:ifCustomTextSelection}
  461.  
  462. /*----------THEME BASICS----------*/
  463.  
  464. body {
  465.     color: var(--main-text);
  466.     font-family: {select:Body Font}, helvetica, sans-serif;
  467.     font-weight: 400;
  468.     font-size: var(--text-font);
  469.     line-height:180%;
  470.     margin:0;
  471.     padding: 0;
  472.     box-sizing: border-box;
  473.     text-align:left;
  474.     background: var(--main-background) url({image:Background}) center;
  475.     background-attachment: {select:Background Attachment};
  476.     background-repeat: {select:Background Repeat};
  477.     -webkit-font-smoothing: antialiased;
  478.     -moz-osx-font-smoothing: grayscale;
  479. }
  480.  
  481. p:empty {
  482.     display: none;
  483. }
  484.  
  485. b,strong {
  486.     color:var(--bold);
  487.     font-weight: 700;
  488. }
  489.  
  490. i,em {
  491.     color:var(--italic);
  492. }
  493.  
  494. small,sub,sup {
  495.     font-size: calc(var(--text-font) - 0.5px);
  496. }
  497.  
  498. h1,h2,h3 {
  499.     font-weight: 700;
  500.     font-size: 1.3em;
  501.     color: var(--bold);
  502. }
  503.  
  504. h4,h5,h6 {
  505.     font-weight: 700;
  506.     font-size: 1.2em;
  507.     color: var(--bold);
  508. }
  509.  
  510. pre {
  511.     white-space: pre-wrap;
  512.     white-space: -moz-pre-wrap;
  513.     white-space: -pre-wrap;
  514.     white-space: -o-pre-wrap;
  515.     word-wrap: break-word;
  516.     padding: 5px 10px;
  517.     font-family: inherit;
  518.     font-weight: 400;
  519.     line-height: 150%;
  520.     color: var(--question);
  521.     background-color: var(--question-background);
  522. }
  523.  
  524. blockquote:not(.tumblr_parent) {
  525.     padding-left: 20px;
  526.     margin: 10px;
  527.     border-left: 3px solid var(--blockquote);
  528. }
  529.  
  530. blockquote img {
  531.     max-width: 100%;
  532.     height: auto;
  533. }
  534.  
  535. figure {
  536.   margin: 1em 3px;
  537. }
  538.  
  539. a {
  540.     color:var(--main-links);
  541.     text-decoration:none;
  542.     -moz-transition: 0.6s ease;
  543.     -o-transition: 0.6s ease;
  544.     -webkit-transition: 0.6s ease;
  545.     transition: 0.6s ease;
  546. }
  547.  
  548. a:hover {
  549.     color:var(--main-link-hover);
  550.     -moz-transition: 0.6s ease;
  551.     -o-transition: 0.6s ease;
  552.     -webkit-transition: 0.6s ease;
  553.     transition: 0.6s ease;
  554. }
  555.  
  556. {block:ifSmallCursor}
  557. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  558. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  559. {/block:ifSmallCursor}
  560.  
  561. /*----------PAGINATION----------*/
  562.  
  563. #pagination {
  564.     margin: 20px auto 0 auto;
  565.     text-align:center;
  566.     background-color: var(--main-posts);
  567.     padding: 15px 20px;
  568.     font-size: 1.1em;
  569. }
  570.  
  571. .current_page {
  572.     color:var(--pagination);
  573.     border-bottom: 2px solid var(--accent);
  574.     padding: 5px 10px;
  575.     font-weight: 700;
  576.     transition: 0.6s;
  577. }
  578.  
  579. #pagination a {
  580.     margin: 0 10px;
  581.     padding: 5px 10px;
  582.     color: var(--pagination);
  583.     font-weight: 700;
  584.     border-bottom: 2px solid transparent;
  585.     -moz-transition: 0.6s ease;
  586.     -o-transition: 0.6s ease;
  587.     -webkit-transition: 0.6s ease;
  588.     transition: 0.6s ease;
  589. }
  590.  
  591. #pagination a:hover {
  592.     color: var(--main-link-hover);
  593.     -moz-transition: 0.6s ease;
  594.     -o-transition: 0.6s ease;
  595.     -webkit-transition: 0.6s ease;
  596.     transition: 0.6s ease;
  597. }
  598.  
  599. /*----------POSIS CONTAINER----------*/
  600.  
  601. .wrap {
  602.     position: relative;
  603.     width: calc(var(--post-size) + 520px);
  604.     margin: 150px auto 50px;
  605.     padding: 10px 0 50px;
  606.     display: flex;
  607.     flex-direction: row;
  608.     justify-content: space-between;
  609.     {block:PermalinkPage}
  610.     width: calc(540px + 520px);
  611.     {/block:PermalinkPage}
  612. }
  613.  
  614. #content {
  615.     width: var(--post-size);
  616.     position: relative;
  617.     {block:PermalinkPage}
  618.     width: 540px;
  619.     {/block:PermalinkPage}
  620. }
  621.  
  622. .posts {
  623.     position: relative;
  624.     width: var(--post-size);
  625.     background-color: var(--main-posts);
  626.     {block:IndexPage}
  627.     margin-bottom: 100px;
  628.     {/block:IndexPage}
  629.     {block:PermalinkPage}
  630.     margin-bottom: 50px;
  631.     width: 540px;
  632.     {/block:PermalinkPage}
  633. }
  634.  
  635. #pinned {
  636.     color: var(--main-links);
  637.     font-weight: 700;
  638.     right: 0;
  639.     margin-top: 0px;
  640.     position: absolute;
  641.     z-index: 10;
  642. }
  643.  
  644. .ph-push-pin {
  645.     font-size: 20px;
  646.     width: 20px;
  647.     height: 20px;
  648.     padding: 10px;
  649.     background: var(--accent);
  650.     color: var(--accented-text);
  651.     border-radius: 0 0 0 10px;
  652. }
  653.  
  654. .posts ul li {
  655.     list-style: none;
  656.     margin-left: -25px;
  657.     padding-left: 10;
  658. }
  659.  
  660. .posts ul li:before {
  661.     content: "▷";
  662.     padding-right: 5px;
  663.     color: var(--accent);
  664. }
  665.  
  666. .posts ol {
  667.     list-style-type: upper-roman;
  668.     text-transform: justify;
  669.     margin-left: -10px;
  670. }
  671.  
  672. .posts iframe {
  673.     max-width:100%;
  674.     display: block;
  675.     padding: 0;
  676.     margin: 0
  677. }
  678.  
  679. .posts img {
  680.     max-width: 100%;
  681.     display: block;
  682.     border: 0;
  683. }
  684.  
  685. .tumblr_video_container {
  686.     width: auto !important;
  687.     height: auto !important;
  688. }
  689.  
  690. .npf_inst > *:last-child {
  691.     margin-bottom: 0;
  692. }
  693.  
  694. .posts .photo img {
  695.     {block:ifFadedImages}
  696.     {block:IndexPage}
  697.     opacity: 0.6;
  698.     -moz-transition: 0.6s ease;
  699.     -o-transition: 0.6s ease;
  700.     -webkit-transition: 0.6s ease;
  701.     transition: 0.6s ease;
  702. }
  703.  
  704. .posts:hover .photo img {
  705.     opacity: 1.0;
  706.     -moz-transition: 0.6s ease;
  707.     -o-transition: 0.6s ease;
  708.     -webkit-transition: 0.6s ease;
  709.     transition: 0.6s ease;
  710.     {/block:IndexPage}
  711.     {/block:ifFadedImages}
  712. }
  713.  
  714. {block:ifGrayscaleImages}
  715. {block:IndexPage}
  716. .posts .photo img {
  717.     z-index: -9999999999999999999999999px;
  718.     -webkit-filter: grayscale(100%);
  719.     filter: grayscale(100%);
  720.     filter: gray;
  721.     /* IE 6-9 */
  722.     -moz-transition: 0.6s ease;
  723.     -o-transition: 0.6s ease;
  724.     -webkit-transition: 0.6s ease;
  725.     transition: 0.6s ease;
  726. }
  727.  
  728. .posts:hover .photo img {
  729.     -webkit-filter: none;
  730.     filter: none;
  731.     -moz-transition: 0.6s ease;
  732.     -o-transition: 0.6s ease;
  733.     -webkit-transition: 0.6s ease;
  734.     transition: 0.6s ease;
  735. }
  736. {/block:IndexPage}
  737. {/block:ifGrayscaleImages}
  738.  
  739. /*----------TEXT/CAPTION CONTAINER----------*/
  740.  
  741. .photo, .video, .photo-slideshow {
  742.     padding: {select:Post Padding}px;
  743. }
  744.  
  745. .caption {
  746.     text-align: {select:text align};
  747. }
  748.  
  749. .caption figcaption {
  750.     padding: 15px;
  751. }
  752.  
  753. figcaption p {
  754.     margin: 5px 0 0;
  755. }
  756.  
  757. .caption img {
  758.     max-width: 100%;
  759. }
  760.  
  761. .reblog-list {
  762.     padding: 0 10px;
  763. }
  764.  
  765. .reblog-header {
  766.     padding: 20px 15px 0 15px;
  767. }
  768.  
  769. .reblog-header img {
  770.     width: 25px;
  771.     height: 25px;
  772.     display: inline-block;
  773.     vertical-align: middle;
  774.     margin-right: 10px;
  775.     border-radius: 50%;
  776. }
  777.  
  778. .inactive, .user, .deactivated {
  779.     font-weight: 700;
  780.     color: var(--main-links);
  781.     text-align: center;
  782. }
  783.  
  784. .user:hover {
  785.     color: var(--main-link-hover);
  786. }
  787.  
  788. .reblog-content {
  789.     padding: 5px 15px;
  790. }
  791.  
  792. .read_more {
  793.     position: relative;
  794.     width: 100%;
  795.     padding: 3px 10px;
  796.     font-weight: 700;
  797.     color: var(--accented-text);
  798.     background-color: var(--accent);
  799.     border-radius: 15px;
  800.     -moz-transition: 0.6s ease;
  801.     -o-transition: 0.6s ease;
  802.     -webkit-transition: 0.6s ease;
  803.     transition: 0.6s ease;
  804. }
  805.  
  806.  
  807. .read_more:hover {
  808.     background-color: transparent;
  809.     color: var(--main-links);
  810.     -moz-transition: 0.6s ease;
  811.     -o-transition: 0.6s ease;
  812.     -webkit-transition: 0.6s ease;
  813.     transition: 0.6s ease;
  814. }
  815.  
  816. .npf_inst, #npf_a0rsv {
  817.     margin-bottom: 20px;
  818. }
  819.  
  820. .npf_inst.photo-origin, #npf_wmw57 {
  821.     padding-top: 10px;
  822. }
  823.  
  824. .soundcloud_audio_player {
  825.     max-height:116px!important;
  826. }
  827.  
  828. .spotify_audio_player {
  829.     max-height:80px!important;
  830. }
  831.  
  832. /*----------POST INFO & PERMALINKS----------*/
  833.  
  834. .top-info {
  835.    padding: 15px 20px;
  836.     position: relative;
  837.     border-bottom: 1px solid var(--post-borders);
  838. }
  839.  
  840. .permalink-cont {
  841.     display: flex;
  842.     align-items: center;
  843. }
  844.  
  845. .permalink-cont .time {
  846.     display: flex;
  847.     flex-direction: column;
  848. }
  849.  
  850. .top-info-image {
  851.     min-width: 80px;
  852.     display: flex;
  853.     align-items: center;
  854. }
  855.  
  856. .image-cont {
  857.     display: flex;
  858.     align-items: center;
  859.     overflow: hidden;
  860. }
  861.  
  862. .permalink-cont img {
  863.     width: 55px;
  864.     height: 55px;
  865.     box-sizing: border-box;
  866.     border-radius: 50%;
  867. }
  868.  
  869. .reblog-cont {
  870.     font-weight: 700;
  871. }
  872.  
  873. .reblog-info {
  874.     margin-top: -5px;
  875. }
  876.  
  877. .post-bottom {
  878.     display: flex;
  879.     padding: 25px 20px;
  880.     justify-content: flex-end;
  881.     align-items: center;
  882.     font-weight: 700;
  883.     border-top: 1px solid var(--post-borders);
  884. }
  885.  
  886. .post-bottom a {
  887.     color: var(--permalink);
  888. }
  889.  
  890. .post-bottom a:hover {
  891.     color: var(--permalink-hover);
  892. }
  893.  
  894. .date i {
  895.     font-size: 1.9em;
  896.     margin-right: 10px;
  897.     color: var(--accent);
  898. }
  899.  
  900. .date {
  901.     display: flex;
  902.     align-items: center;
  903. }
  904.  
  905. /*----------LIKE/REBLOG----------*/
  906.  
  907. .likereblog {
  908.     text-align: center;
  909.     z-index: 1;
  910.     margin-top: 5px;
  911. }
  912.  
  913. .controls {
  914.     display: flex;
  915.     align-items: center;
  916. }
  917.  
  918. .controls a {
  919.     position:relative;
  920.     display:inline-block;
  921.     margin: 0 10px;
  922.     vertical-align: middle;
  923.     height: 21px;
  924.     -moz-transition: 0.6s ease;
  925.     -o-transition: 0.6s ease;
  926.     -webkit-transition: 0.6s ease;
  927.     transition: 0.6s ease;
  928. }
  929.  
  930. .controls a:hover {
  931.     color: var(--permalink-hover);
  932.     -moz-transition: 0.6s ease;
  933.     -o-transition: 0.6s ease;
  934.     -webkit-transition: 0.6s ease;
  935.     transition: 0.6s ease;
  936. }
  937.  
  938. .ph-arrows-clockwise {
  939.     font-size: 20px;
  940.     color: var(--permalink);
  941.     -moz-transition: 0.6s ease;
  942.     -o-transition: 0.6s ease;
  943.     -webkit-transition: 0.6s ease;
  944.     transition: 0.6s ease;
  945. }
  946.  
  947. .ph-arrows-clockwise:hover {
  948.     color: var(--permalink-hover);
  949.     -moz-transition: 0.6s ease;
  950.     -o-transition: 0.6s ease;
  951.     -webkit-transition: 0.6s ease;
  952.     transition: 0.6s ease;
  953. }
  954.  
  955. .ph-heart-straight {
  956.     color: var(--permalink);
  957.     font-size: 20px;
  958.     -moz-transition: 0.6s ease;
  959.     -o-transition: 0.6s ease;
  960.     -webkit-transition: 0.6s ease;
  961.     transition: 0.6s ease;
  962. }
  963.  
  964. .ph-heart-straight:hover {
  965.     color: var(--permalink);
  966. }
  967.  
  968. .controls .like .liked + .ph-heart-straight {
  969.    opacity: 1;
  970. }
  971.  
  972. .controls .like .liked + .ph-heart-straight {
  973.      color: #ff492f;
  974. }
  975.  
  976. .controls .like .like_button iframe {
  977.    position:absolute;
  978.    top: -1px;
  979.    left:0;
  980.    bottom:0;
  981.    right:0;
  982.    width:100%;
  983.    height:100%;
  984.    z-index:2;
  985.    opacity:0.000001;
  986. }
  987.  
  988. /*--------POST TAGS--------*/
  989.  
  990. .tag-button {
  991.     cursor: pointer;
  992.     display: flex;
  993. }
  994.  
  995. .ph-hash {
  996.     font-size: 20px;
  997.     color: var(--permalink);
  998. }
  999.  
  1000. .post_tags {
  1001.     padding: 10px 20px;
  1002.     display: none;
  1003.     text-align: right;
  1004.     margin-bottom: 5px;
  1005. }
  1006.  
  1007. .post_tags a {
  1008.     display: inline-block;
  1009.     margin-left: 3px;
  1010.     color: var(--permalink);
  1011.     font-size: 11px;
  1012.     font-weight: 700;
  1013.     border: 1px solid var(--post-borders);
  1014.     padding: 0px 10px;
  1015.     border-radius: 5px;
  1016.     -moz-transition: 0.6s ease;
  1017.     -o-transition: 0.6s ease;
  1018.     -webkit-transition: 0.6s ease;
  1019.     transition: 0.6s ease;
  1020. }
  1021.  
  1022. .post_tags a:hover {color:var(--permalink-hover);
  1023.     -moz-transition: 0.6s ease;
  1024.     -o-transition: 0.6s ease;
  1025.     -webkit-transition: 0.6s ease;
  1026.     transition: 0.6s ease;
  1027. }
  1028.  
  1029. .ph-hash-straight {
  1030.     margin-right: 10px;
  1031.     color:var(--accent);
  1032.     font-size:18px;
  1033.     vertical-align:middle;
  1034. }
  1035.  
  1036. /*----------PERMALINK PAGE----------*/
  1037.  
  1038. #perma {
  1039.     width: 540px;
  1040.     padding: 10px 5px;
  1041.     margin: 0 auto;
  1042.     background-color: var(--main-posts);
  1043.     text-align: center;
  1044.     text-transform: lowercase;
  1045.     box-sizing: border-box;
  1046.     position: relative;
  1047. }
  1048.  
  1049. #perma span {
  1050.     font-weight: 700;
  1051.     text-transform: uppercase;
  1052. }
  1053.  
  1054. #permatg {
  1055.     width: 540px;
  1056.     padding: 10px;
  1057.     margin: 10px auto 10px;
  1058.     background-color: var(--main-posts);
  1059.     text-align: center;
  1060.     text-transform: lowercase;
  1061.     box-sizing: border-box;
  1062.     position: relative;
  1063. }
  1064.  
  1065. #permatg a {
  1066.     display: inline-block;
  1067.     margin: 0 5px;
  1068.     color: var(--main-links);
  1069. }
  1070.  
  1071. #permatg a:hover {
  1072.     color: var(--main-link-hover);
  1073. }
  1074.  
  1075. .rb {
  1076.     position: absolute;
  1077.     left: 46%;
  1078.     margin-top: 27px;
  1079.     display: inline-block;
  1080.     z-index: 1;
  1081. }
  1082.  
  1083. .root img, .via img {
  1084.     border-radius: 100%;
  1085.     padding: 3px;
  1086.     margin-right: 2px;
  1087.     background-color: var(--accent);
  1088. }
  1089.  
  1090. #notecontainer {
  1091.     margin: 10px auto;
  1092.     width: 540px;
  1093.     background-color: var(--main-posts);
  1094.     color: var(--main-text);
  1095.     position: relative;
  1096.     padding: 10px;
  1097.     box-sizing: border-box;
  1098. }
  1099.  
  1100. #notecontainer ol.notes {
  1101.     list-style-type: none;
  1102.     margin: 0;
  1103.     padding: 0;
  1104.     font-size: var(--text-font);
  1105. }
  1106.  
  1107. #notecontainer ol.notes li.note {
  1108.     padding: 15px;
  1109. }
  1110.  
  1111. #notecontainer img.avatar {
  1112.     margin-right: 10px;
  1113.     vertical-align: middle;
  1114.     width: 25px;
  1115.     height: 25px;
  1116.     border-radius: 50%;
  1117. }
  1118.  
  1119. #permpage {
  1120.     text-align: center;
  1121.     margin-top: 50px;
  1122.     justify-content: center;
  1123.     align-items: center;
  1124.     margin-top: 80px;
  1125.     margin-bottom: -30px;
  1126. }
  1127.  
  1128. .ph-arrow-left, .ph-arrow-right {
  1129.     padding: 5px;
  1130.     font-size: 20px;
  1131.     display: inline-block;
  1132.     height: 20px;
  1133.     border-radius: 5px;
  1134.     margin: 0 10px;
  1135.     background-color: var(--accent);
  1136.     color: var(--accented-text);
  1137.     -webkit-transition: all 0.6s ease;
  1138.     -moz-transition: all 0.6s ease;
  1139.     -o-transition: all 0.6s ease;
  1140.     transition: all 0.6s ease;
  1141. }
  1142.  
  1143. .ph-arrow-left:hover, .ph-arrow-right:hover {
  1144.     background-color: transparent;
  1145.     color: var(--main-links);
  1146.     -webkit-transition: all 0.6s ease;
  1147.     -moz-transition: all 0.6s ease;
  1148.     -o-transition: all 0.6s ease;
  1149.     transition: all 0.6s ease;
  1150. }
  1151.  
  1152. /*----------TUMBLR TEXT/LINKS----------*/  
  1153.  
  1154. .posts .title, .posts .link {
  1155.     color: var(--post-title);
  1156.     text-transform: uppercase;
  1157.     padding: 20px;
  1158.     font-size: 1.4em;
  1159.     font-weight: 700;
  1160.     line-height: 200%;
  1161.     position: relative;
  1162.     line-height: 120%;
  1163.     -moz-transition: 0.6s ease;
  1164.     -o-transition: 0.6s ease;
  1165.     -webkit-transition: 0.6s ease;
  1166.     transition: 0.6s ease;
  1167. }
  1168.  
  1169. .posts .title:before, .posts .link:before {
  1170.     content: '';
  1171.     position: absolute;
  1172.     top: 100%;
  1173.     left: 20px;
  1174.     width: 10%;
  1175.     height: 3px;
  1176.     background-color: var(--accent);
  1177. }
  1178.  
  1179. .posts .link a {
  1180.     color: var(--post-title);
  1181. }
  1182.  
  1183. .posts .link a:hover {
  1184.     color: var(--main-link-hover);
  1185.     -moz-transition: 0.6s ease;
  1186.     -o-transition: 0.6s ease;
  1187.     -webkit-transition: 0.6s ease;
  1188.     transition: 0.6s ease;
  1189. }
  1190.  
  1191. .thumbnail img {
  1192.     width: 100%;
  1193.     height: auto;
  1194.     display: block;
  1195. }
  1196.  
  1197. /*----------TUMBLR QUOTES----------*/  
  1198.  
  1199. .qt {
  1200.     padding: 20px 20px 0;
  1201.     display: flex;
  1202.     flex-direction: row;
  1203.     justify-content: space-between;
  1204. }
  1205.  
  1206. .quote {
  1207.     font-family: 'Playfair Display', serif;
  1208.     line-height: 150%;
  1209.     font-size: 1.6em;
  1210.     padding: 20px;
  1211.     color: var(--question);
  1212.     padding-left: 20px;
  1213.     border-left: 1px solid var(--post-borders);
  1214. }
  1215.  
  1216. .ph-quotes {
  1217.     color: var(--main-links);
  1218.     padding: 5px;
  1219.     font-size: 1.2em;
  1220.     align-self: center;
  1221.     border-radius: 5px;
  1222. }
  1223.  
  1224. .quote-box {
  1225.     font-size: 20px;
  1226.     align-self: center;
  1227.     color: var(--main-text);
  1228.     margin-right: 20px;
  1229. }
  1230.  
  1231. .qtsource {
  1232.     padding: 0 20px 20px;
  1233. }
  1234.  
  1235. /*----------TUMBLR AUDIO----------*/
  1236.  
  1237. .audiowrapper {
  1238.     background-color: var(--question-background);
  1239.     display:flex;
  1240. }
  1241.  
  1242. .audio-content .audio_player {
  1243.     background-color: var(--audio-player-background);
  1244. }
  1245.  
  1246. .audio-content {
  1247.     width: 90px;
  1248.     height: 90px;
  1249.     padding:10%;
  1250.     position:relative;
  1251.     display: flex;
  1252.     justify-content: center;
  1253.     align-items: center;
  1254. }
  1255.  
  1256. .audio_player {
  1257.     position: absolute;
  1258.     z-index: 2;
  1259.     width: 70px;
  1260.     height: 70px;
  1261.     border-radius: 50%;
  1262. }
  1263.  
  1264. .audio_player > div {
  1265.     display: inline-block;
  1266.     margin: 0 0.5em 0 0;
  1267.     vertical-align: middle;
  1268. }
  1269.  
  1270. .custom_audio_buttons {
  1271.     height: 1.25em;
  1272. }
  1273.  
  1274. .custom_audio_buttons svg {
  1275.     width : 1.70em;
  1276.     height: 1.70em;
  1277.     margin-left: 24px;
  1278.     margin-top: 22px;
  1279.     stroke: var(--main-text);
  1280. }
  1281.  
  1282. .custom_audio_error_icon svg {
  1283.     stroke: red;
  1284. }
  1285.  
  1286. .custom_audio_duration {
  1287.     display: inline;
  1288. }
  1289.  
  1290. .seek-cont {
  1291.     display: flex;
  1292.     justify-content: space-between;
  1293.     align-items: center;
  1294. }
  1295.  
  1296. .seek-cont span {
  1297.     width: 50px;
  1298. }
  1299.  
  1300. .custom_audio_seekbar {
  1301.     height: 0.5em;
  1302.     border: 1px solid var(--main-text);
  1303.     width: 60%;
  1304. }
  1305.  
  1306. .custom_audio_seekbar_progress {
  1307.     width: 0;
  1308.     height: 100%;
  1309.     background: var(--main-links);
  1310. }
  1311.  
  1312. .custom_audio_current_time, .custom_audio_time_left {
  1313.     font-size: 12px;
  1314.     width: 50px;
  1315. }
  1316.  
  1317. .custom_audio_current_time {
  1318.     text-align: left;
  1319. }
  1320.  
  1321. .custom_audio_time_left {
  1322.     text-align: right;
  1323. }
  1324.  
  1325. .audio_info p {
  1326.     margin: 0.25em 0;
  1327. }
  1328.  
  1329. .music_menu {
  1330.     margin:0px;
  1331.     padding:0px;
  1332.     list-style:none;
  1333.     padding: 5%;
  1334.     width: 50%;
  1335.     align-self: center;
  1336.     font-size:18px;
  1337.     font-weight: 700;
  1338.     color: var(--main-links);
  1339. }
  1340.  
  1341. .music_menu  p {
  1342.     margin: 5px 0;
  1343. }
  1344.  
  1345. .music_menu  p:nth-child(2) {
  1346.     font-weight: 400;
  1347.     font-size: 15px;
  1348. }
  1349.  
  1350. /*----------TUMBLR QUESTION/ANSWER----------*/
  1351.  
  1352. #askcont, #replycont {
  1353.     padding: 15px;
  1354. }
  1355.  
  1356. .asker-cont, .replier-cont {
  1357.     display: flex;
  1358. }
  1359.  
  1360. #asker-image, #replier-image {
  1361.     width: 50px;
  1362.     height: 50px;
  1363.     align-self: center;
  1364. }
  1365.  
  1366. #asker-image {
  1367.     margin-right: 20px;
  1368. }
  1369.  
  1370. #replier-image {
  1371.     order: 2;
  1372.     margin-left: 20px;
  1373. }
  1374.  
  1375. #asker-image img, #replier-image img {
  1376.     border-radius: 50%;
  1377. }
  1378.  
  1379. .asker-link, .replier-link {
  1380.     font-weight: 700;
  1381. }
  1382.  
  1383. #asker, #replier {
  1384.     background-color: var(--question-background);
  1385.     padding: 20px;
  1386.     box-sizing: border-box;
  1387.     display: block;
  1388.     width: 100%;
  1389.     border-radius: 10px;
  1390.     position: relative;
  1391. }
  1392.  
  1393. #asker:after {
  1394.     right: 100%;
  1395.     top: 50%;
  1396.     margin-top: -17px;
  1397.     border: solid transparent;
  1398.     content: " ";
  1399.     height: 0;
  1400.     width: 0;
  1401.     position: absolute;
  1402.     pointer-events: none;
  1403.     border-right-color: var(--question-background);
  1404.     border-width: 13px;
  1405. }
  1406.  
  1407. #replier:after {
  1408.     left: 100%;
  1409.     top: 50%;
  1410.     margin-top: -17px;
  1411.     border: solid transparent;
  1412.     content: " ";
  1413.     height: 0;
  1414.     width: 0;
  1415.     position: absolute;
  1416.     pointer-events: none;
  1417.     border-left-color: var(--question-background);
  1418.     border-width: 13px;
  1419. }
  1420.  
  1421. .question, .answer {
  1422.     margin-top: 10px;
  1423. }
  1424.  
  1425. .answer p {
  1426.     margin: 0;
  1427. }
  1428.  
  1429. /*----------TUMBLR CHAT----------*/
  1430.  
  1431. .chatp {
  1432.     padding: 20px;
  1433. }
  1434.  
  1435. .chat .line {
  1436.     margin-top: 0px;
  1437.     padding: 20px;
  1438.     border-bottom: 1px solid var(--post-borders);
  1439. }
  1440.  
  1441. .chat .line:last-of-type {
  1442.     margin-bottom: 0px;
  1443.     border-bottom: none;
  1444. }
  1445.  
  1446. .line:nth-child(odd) .label b {
  1447.     color: var(--chat-odd);
  1448.     font-weight: 700;
  1449.     font-size: 1.1em;
  1450.     display: block;
  1451.     margin-bottom: 10px;
  1452. }
  1453.  
  1454. .line:nth-child(even) .label b {
  1455.     color: var(--chat-even);
  1456.     font-weight: 700;
  1457.     font-size: 1.1em;
  1458.     display: block;
  1459.     margin-bottom: 10px;
  1460. }
  1461.  
  1462. /*----------LINKBAR---------*/
  1463.  
  1464. #linkbar {
  1465.     width: 100%;
  1466.     height: 70px;
  1467.     position: fixed;
  1468.     top: 0;
  1469.     left: 0;
  1470.     right: 0;
  1471.     background-color: var(--top-banner);
  1472.     z-index: 9;
  1473.     display: flex;
  1474.     justify-content: center;
  1475.     align-items: center;
  1476. }
  1477.  
  1478. .banner-title {
  1479.     font-weight: 700;
  1480.     font-size: 1.4em;
  1481.     text-transform: uppercase;
  1482.     color: var(--sidebar-title);
  1483. }
  1484.  
  1485. /*----------SIDEBAR---------*/
  1486.  
  1487. #sidebar-cont {
  1488.     width: 400px;
  1489.     order: {select:sidebar position};
  1490.     position: relative;
  1491. }
  1492.  
  1493. #sidebar {
  1494.     width: 400px;
  1495.     height: calc(100% - 70px);
  1496.     position: fixed;
  1497.     top: 70px;
  1498.     bottom: 0;
  1499.     background-color: var(--sidebar);
  1500.     display: flex;
  1501.     flex-direction: column;
  1502.     align-items: center;
  1503.     padding: 40px 40px;
  1504.     box-sizing: border-box;
  1505. }
  1506.  
  1507. .sidebar-image {
  1508.     margin-top: 0;
  1509. }
  1510.  
  1511. .sidebar-image img {
  1512.     width: 190px;
  1513.     height: 190px;
  1514.     background-color: var(--accent);
  1515.     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  1516. }
  1517.  
  1518. .sidebar-title {
  1519.     margin-top: 25px;
  1520.     color: var(--sidebar-title);
  1521.     font-size: 1.6em;
  1522.     font-weight: 700;
  1523. }
  1524.  
  1525. /*----------TUMBLR LINKS---------*/
  1526.  
  1527. .homelinks {
  1528.     margin-top: 20px;
  1529. }
  1530.  
  1531. .homelinks a {
  1532.     margin: 0 5px;
  1533.     padding: 5px 0;
  1534.     color: var(--accent);
  1535.     font-weight: 700;
  1536.     border-bottom: 3px solid transparent;
  1537. }
  1538.  
  1539. .homelinks a:hover {
  1540.     border-bottom: 3px solid var(--accent);
  1541. }
  1542.  
  1543. .description {
  1544.     margin-top: 20px;
  1545.     color: var(--description);
  1546.     text-align: {select:description text align};
  1547. }
  1548.  
  1549. /*----------NAVIGATION LINKS---------*/
  1550.  
  1551. .morelinks {
  1552.     align-self: flex-start;
  1553.     margin-top: 10px;
  1554. }
  1555.  
  1556. .morelinks i {
  1557.     font-size: 25px;
  1558.     min-width: 60px;
  1559.     vertical-align: middle;
  1560.     color: var(--accent);
  1561. }
  1562.  
  1563. .link-list {
  1564.     margin: 20px 0;
  1565. }
  1566.  
  1567. .morelinks a {
  1568.     color: var(--description);
  1569. }
  1570.  
  1571. .morelinks a:hover {
  1572.     color: var(--main-link-hover);
  1573. }
  1574.  
  1575. .toggle-header {
  1576.     position: relative;
  1577.     left: 0;
  1578. }
  1579.  
  1580. .info-button {
  1581.     display: none;
  1582. }
  1583.  
  1584. /*----------DAY/NIGHT MODE---------*/
  1585.  
  1586. button#theme-toggle {
  1587.     outline: none;
  1588.     border: 0;
  1589.     background: var(--posts);
  1590.     padding: 0;
  1591.     position: absolute;
  1592.     top: -40px;
  1593.     left: -244px;
  1594.     cursor: pointer;
  1595.     z-index: 99;
  1596. }
  1597.  
  1598. button#theme-toggle svg {
  1599.     width: 24px;
  1600.     height: 24px;
  1601.     color: var(--accented-text);
  1602.     background-color: var(--accent);
  1603.     padding: 10px;
  1604.     -webkit-border-radius: 0 0 0 20px;
  1605.     -moz-border-radius: 0 0 0 20px;
  1606.     border-radius: 0 0 0 20px;
  1607. }
  1608.  
  1609. .light-on{
  1610.     display: var(--LightOn);
  1611. }
  1612.  
  1613. .light-off{
  1614.     display: var(--LightOff);
  1615. }
  1616.  
  1617. @media screen and (max-width: 1060px) {
  1618.    
  1619.     iframe.tmblr-iframe {
  1620.         display: none;
  1621.     }
  1622.    
  1623.     .tmblr-iframe--app-cta-button {
  1624.         display: none!important;
  1625.     }
  1626.    
  1627.     #sidebar-cont {
  1628.         position: absolute;
  1629.         z-index: 9;
  1630.         left: -100%;
  1631.         transition: 1.2s;
  1632.     }
  1633.    
  1634.     #sidebar-cont.active {
  1635.         left: 0;
  1636.         transition: 1.2s;
  1637.     }
  1638.    
  1639.     #sidebar {
  1640.         width: 100%;
  1641.         overflow: auto;
  1642.     }
  1643.    
  1644.     button#theme-toggle {
  1645.         position: fixed;
  1646.         top: 70px;
  1647.         left: 0;
  1648.     }
  1649.    
  1650.     button#theme-toggle svg {
  1651.         width: 24px;
  1652.         height: 24px;
  1653.         color: var(--accented-text);
  1654.         background-color: var(--accent);
  1655.         padding: 10px;
  1656.         -webkit-border-radius: 0 0 20px 0;
  1657.         -moz-border-radius: 0 0 20px 0;
  1658.         border-radius: 0 0 20px 0;
  1659.     }
  1660.    
  1661.     .wrap, #content {
  1662.         width: 100%;
  1663.         flex-direction: row;
  1664.         justify-content: center;
  1665.     }
  1666.    
  1667.     .posts {
  1668.         width: 90%;
  1669.         margin: 0 auto 150px auto;
  1670.     }
  1671.    
  1672.     .morelinks {
  1673.         align-self: center;
  1674.         margin-top: 10px;
  1675.     }
  1676.    
  1677.     .link-list {
  1678.         margin: 40px 0;
  1679.     }
  1680.    
  1681.     .description {
  1682.         text-align: center;
  1683.         margin-top: 40px;
  1684.     }
  1685.        
  1686.     #linkbar {
  1687.         display: flex;
  1688.         justify-content: space-between;
  1689.         align-items: center;
  1690.         padding: 0 30px;
  1691.     }
  1692.    
  1693.     .info-button {
  1694.         display: block;
  1695.         width: 40px;
  1696.         height: 40px;
  1697.         cursor: pointer;
  1698.         background-color: transparent;
  1699.         border: none;
  1700.         outline: none;
  1701.         margin-right: 50px
  1702.     }
  1703.  
  1704.     .info-button span {
  1705.         display: block;
  1706.         width: 27px;
  1707.         height: 3px;
  1708.         background-color: var(--description);
  1709.         position: absolute;
  1710.         top: 34px;
  1711.         transition: .5s;
  1712.     }
  1713.  
  1714.     .info-button span:before {
  1715.         content: '';
  1716.         position: absolute;
  1717.         top: -10px;
  1718.         left: 0;
  1719.         width: 100%;
  1720.         height: 3px;
  1721.         background-color: var(--description);
  1722.         transition: .5s;
  1723.     }
  1724.  
  1725.     .info-button span:after {
  1726.         content: '';
  1727.         position: absolute;
  1728.         top: 10px;
  1729.         left: 0;
  1730.         width: 100%;
  1731.         height: 3px;
  1732.         background-color: var(--description);
  1733.         transition: .5s;
  1734.     }
  1735.  
  1736.     .info-button.toggle span {
  1737.         background-color: transparent;
  1738.     }
  1739.  
  1740.     .info-button.toggle span:before {
  1741.         top: 0;
  1742.         transform: rotate(45deg);
  1743.     }
  1744.  
  1745.     .info-button.toggle span:after {
  1746.         top: 0;
  1747.         transform: rotate(-45deg);
  1748.     }
  1749. }
  1750.  
  1751. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  1752.  
  1753. #bottom {
  1754.     bottom: 20px;
  1755.     position: fixed;
  1756.     right: 30px;
  1757.     z-index: 1;
  1758.     display: flex;
  1759. }
  1760.  
  1761. #bottom a:hover {
  1762.     color: var(--accented-text);
  1763. }
  1764.  
  1765. .ph-arrow-circle-up, .ph-copyright {
  1766.     padding: 3px;
  1767.     font-size: 22px;
  1768.     width: 22px;
  1769.     height: 22px;
  1770.     background-color: var(--accent);
  1771.     color: var(--accented-text);
  1772.     border-radius: 5px;
  1773.     margin: 0 2px;
  1774. }
  1775.  
  1776. /*----------SCROLL TO TOP---------*/
  1777.  
  1778. #scrollToTop:link,
  1779. #scrollToTop:visited {
  1780.     display: none;
  1781.     font-size: 12px;
  1782.     color: var(--accented-text);
  1783.     padding: 0px 5px;
  1784.     width: auto;
  1785.     z-index: 900;
  1786.     font-weight: 700;
  1787. }
  1788.  
  1789. {CustomCSS}
  1790. </style>
  1791.  
  1792. <script>
  1793. $(document).ready(function(){
  1794.     $('.post_tags').hide();
  1795.     $('.tag-button').click(function() {
  1796.         $(this).closest('.posts').find('.post_tags').slideToggle(600);
  1797.         return false;
  1798.     });
  1799.    
  1800.     //search suggestions script    
  1801.      $('.info-button').click(function(){
  1802.         $('#sidebar-cont').toggleClass('active');
  1803.         $('.info-button').toggleClass('toggle');
  1804.     });
  1805. });
  1806. </script>
  1807.  
  1808. <!-----------Scroll To Top Script----------->
  1809. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1810. <!-----------Scroll To Top Script----------->
  1811.  
  1812. </head>
  1813.  
  1814. <body>
  1815.  
  1816. <footer id="bottom">
  1817.  
  1818. <!-----------SCROLL TO TOP ----------->
  1819. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="ph-arrow-circle-up"></i></a>
  1820. <!-----------SCROLL TO TOP ----------->
  1821.  
  1822. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1823.  <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class="ph-copyright"></i></a>  
  1824. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1825. </footer>
  1826.  
  1827. <header id="linkbar">
  1828.     <span class="banner-title">{text:banner title}</span>
  1829.     <button class="info-button">
  1830.         <span></span>
  1831.     </button>
  1832. </header>
  1833.  
  1834. <section class="wrap"> <!-----------POST CONTAINER----------->
  1835.  
  1836. <aside id="sidebar-cont"> <!-----------SIDEBAR----------->
  1837.  
  1838.     <aside id="sidebar">
  1839.    
  1840.     <div class="toggle-header">
  1841.         <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1842.         <span class="light-on"><a href="javascript:;" title="toggle dark mode"><i data-feather="moon"></i></a></span>
  1843.         <span class="light-off"><a href="javascript:;" title="toggle light mode"><i data-feather="sun"></i></a></span>
  1844. </button>
  1845.     </div>
  1846.         <div class="sidebar-image"><img src="{image:sidebar}"></div> <!-----------SIDEBAR IMAGE----------->
  1847.         <div class="sidebar-title">{Title}</div> <!-----------SIDEBAR TITLE----------->
  1848.         <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  1849.             <a href="/">home</a>
  1850.             <a href="/ask">inbox</a>
  1851.             <a href="/archive">archive</a>
  1852.             {block:SubmissionsEnabled}    
  1853.             <a href="/submit" title="submit"><i class="ph-gift"></i></a>
  1854.             {/block:SubmissionsEnabled}
  1855.         </nav> <!-----------TUMBLR LINKS----------->
  1856.         <div class="description">{Description}</div> <!-----------DESCRIPTION----------->
  1857.         <nav class="morelinks"> <!-----------NAVIGATION LINKS----------->
  1858.         <div class="link-list">{block:ifLink1}<i class="ph-airplane-tilt"></i><a href="{text:Custom Link1 URL}">{text:Custom Link1 Name}</a>{/block:ifLink1}</div>
  1859.         <div class="link-list">{block:ifLink2}<i class="ph-butterfly"></i><a href="{text:Custom Link2 URL}">{text:Custom Link2 Name}</a>{/block:ifLink2}</div>
  1860.         <div class="link-list">{block:ifLink3}<i class="ph-cloud"></i><a href="{text:Custom Link3 URL}">{text:Custom Link3 Name}</a>{/block:ifLink3}</div>
  1861.         <div class="link-list">{block:ifLink4}<i class="ph-dice-five"></i><a href="{text:Custom Link4 URL}">{text:Custom Link4 Name}</a>{/block:ifLink4}</div>
  1862.         <div class="link-list">{block:ifLink5}<i class="ph-fire"></i><a href="{text:Custom Link5 URL}">{text:Custom Link5 Name}</a>{/block:ifLink5}</div>
  1863.         <div class="link-list">{block:ifLink6}<i class="ph-hourglass"></i><a href="{text:Custom Link6 URL}">{text:Custom Link6 Name}</a>{/block:ifLink6}</div>
  1864.         </nav> <!-----------NAVIGATION LINKS----------->
  1865.     </aside>
  1866. </aside> <!-----------SIDEBAR----------->
  1867.  
  1868. <section id="content"> <!-----------POST WRAPPER----------->
  1869.  
  1870. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1871.  
  1872. <article class="posts" id="{PostID}" post-type="{PostType}"> <!-----------POSTS----------->
  1873.  
  1874. {block:ContentSource}
  1875. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1876. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1877. {/block:SourceLogo}
  1878. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1879. {/block:ContentSource}
  1880.  
  1881. <!-- {block:NoRebloggedFrom}
  1882. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1883. {/block:NoRebloggedFrom} -->
  1884.  
  1885. <!-----------POST INFO/PERMALINKS----------->
  1886. {block:IndexPage}
  1887.  
  1888. <div class="top-info">
  1889. {block:Date}
  1890.  
  1891. <section class="permalink-cont">
  1892.  
  1893.     <span class="top-info-image">
  1894.         {block:RebloggedFrom}
  1895.         <img src="{ReblogParentPortraitURL-96}">
  1896.         {/block:RebloggedFrom}
  1897.         {block:NotReblog}
  1898.         <img src="{PortraitURL-96}">
  1899.         {/block:NotReblog}
  1900.     </span>
  1901.  
  1902.     <div class="time">
  1903.         <span class="reblog-cont">
  1904. {block:RebloggedFrom}reblogged from<a href="{ReblogParentURL}"> {ReblogParentName}</a>{/block:RebloggedFrom}
  1905. {block:NotReblog}<a href="{Permalink}" title="{Title}"> {Name}</a>{/block:NotReblog}</span>
  1906.  
  1907.         <span class="reblog-info">
  1908.             posted <a class="timestamp" href="{Permalink}">{Timestamp}</a> {block:NoteCount}with  <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1909.         </span>
  1910.     </div>
  1911.  
  1912. </section>
  1913. {/block:Date}
  1914. </div>
  1915.  
  1916. {block:PinnedPostLabel} <!-----------PINNED POST----------->
  1917.     <section id="pinned">
  1918.         <a href="{Permalink}" title="{PinnedPostLabel}"><i class="ph-push-pin"></i></a>
  1919.     </section>
  1920. {/block:PinnedPostLabel} <!-----------PINNED POST----------->
  1921. {/block:IndexPage}
  1922. <!-----------POST INFO/PERMALINKS----------->
  1923.  
  1924. {block:Text}
  1925. <div class="text">
  1926. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1927. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1928.  
  1929. {block:Reblogs}
  1930. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1931. <div class="source-head">
  1932. <div class="reblog-header">
  1933.  
  1934. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1935.  
  1936. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated} {block:IsActive} <a target="_blank" href="{Permalink}" class="user"> {Username} </a> {/block:IsActive}
  1937.  
  1938. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> </div>{/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  1939. </div>
  1940. {/block:Text}
  1941.  
  1942. {block:Photo}
  1943. <div class="photo">
  1944. {LinkOpenTag}
  1945. <a href="#" 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">
  1946. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  1947. </a>
  1948. {LinkCloseTag}
  1949. </div>
  1950. {block:IfShowCaptions}
  1951. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1952.  
  1953. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1954.  
  1955. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1956.  
  1957. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1958.  
  1959. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1960.  
  1961. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1962. {/block:IfShowCaptions}
  1963.  
  1964. {block:IfnotShowCaptions}
  1965. {block:PermalinkPage}
  1966. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1967.  
  1968. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1969.  
  1970. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1971.  
  1972. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1973.  
  1974. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1975.  
  1976. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1977. {/block:PermalinkPage}
  1978. {/block:IfnotShowCaptions}
  1979. {/block:Photo}
  1980.  
  1981. {block:Photoset}
  1982. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1983. {block:IfShowCaptions}
  1984. {block:Caption}
  1985. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  1986. <div class="reblog-list">
  1987.  
  1988. {block:Reblogs}
  1989. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1990. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1991.  
  1992. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1993.  
  1994. {block:IsActive}
  1995. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1996.  
  1997. {block:IsDeactivated}
  1998. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1999. </div>
  2000. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2001. {/block:RebloggedFrom} </div>
  2002. {/block:Caption}
  2003. {/block:IfShowCaptions}
  2004.  
  2005. {block:IfnotShowCaptions}
  2006. {block:PermalinkPage}
  2007. {block:Caption}
  2008. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2009. <div class="reblog-list">
  2010.  
  2011. {block:Reblogs}
  2012. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2013. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2014.  
  2015. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2016.  
  2017. {block:IsActive}
  2018. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2019.  
  2020. {block:IsDeactivated}
  2021. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2022. </div>
  2023. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2024. {/block:RebloggedFrom} </div>
  2025. {/block:Caption}
  2026. {/block:PermalinkPage}
  2027. {/block:IfnotShowCaptions}
  2028. {/block:Photoset}
  2029.  
  2030. {block:Quote}
  2031. <div class="qt">
  2032. <div class="quote-box"><i class="ph-quotes"></i></div>
  2033. <div class="quote">
  2034. {Quote}
  2035. </div>
  2036. </div>
  2037. {block:Source}<div class="qtsource"><br><center>{Source}</center></div>{/block:Source}
  2038. {/block:Quote}
  2039.  
  2040. {block:Link}
  2041. {block:Thumbnail}
  2042. <div class="thumbnail"><img src="{Thumbnail-HighRes}" alt="{Name}"></div>
  2043. {/block:Thumbnail}
  2044.  
  2045. <div class="link"><a href="{URL}">{Name} <i class="ph-caret-double-right" style="vertical-align: middle;"></i></a> </div>
  2046. {block:Description}
  2047. <div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2048.  
  2049. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2050.  
  2051. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2052.  
  2053. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated} {block:IsActive} <a target="_blank" href="{Permalink}" class="user"> {Username} </a> {/block:IsActive}
  2054.  
  2055. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  2056. {/block:Description}
  2057. {/block:Link}
  2058.  
  2059. {block:Audio}
  2060. <div class="audiop">
  2061. <div class="audiowrapper">
  2062. {block:AudioPlayer}
  2063. {AudioPlayer}
  2064. <div class="audio-content" style="{block:AlbumArt} background:url({AlbumArtURL}); {/block:AlbumArt} -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  2065.    <div class="audio_player">
  2066.     <span class="custom_audio_buttons"></span>
  2067. </div>
  2068. </div>
  2069. <div class="music_menu">
  2070. {block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}
  2071. {block:Artist}<p><span class="info">{Artist}</span></p>{/block:Artist}
  2072.  
  2073. <div class="seek-cont">
  2074.     <span class="custom_audio_current_time"></span>
  2075.     <div class="custom_audio_seekbar"></div>
  2076.     <span class="custom_audio_time_left"></span>
  2077.     </div>
  2078. </div>
  2079. {/block:AudioPlayer}
  2080. </div>
  2081. </div>
  2082.  
  2083. {block:IfShowCaptions}
  2084. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2085.  
  2086. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2087.  
  2088. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2089.  
  2090. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2091.  
  2092. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2093.  
  2094. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2095. {/block:IfShowCaptions}
  2096.  
  2097. {block:IfnotShowCaptions}
  2098. {block:PermalinkPage}
  2099. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2100.  
  2101. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2102.  
  2103. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2104.  
  2105. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2106.  
  2107. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2108.  
  2109. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2110. {/block:PermalinkPage}
  2111. {/block:IfnotShowCaptions}
  2112. {/block:Audio}
  2113.  
  2114. {block:Video}
  2115. <div class="video">{Video-500}</div>
  2116. {block:IfShowCaptions}
  2117. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2118.  
  2119. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2120.  
  2121. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2122.  
  2123. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2124.  
  2125. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2126.  
  2127. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2128.  
  2129. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2130. {/block:IfShowCaptions}
  2131.  
  2132. {block:IfnotShowCaptions}
  2133. {block:PermalinkPage}
  2134. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2135.  
  2136. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2137.  
  2138. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2139.  
  2140. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2141.  
  2142. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2143.  
  2144. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2145.  
  2146. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2147. {/block:PermalinkPage}
  2148. {/block:IfnotShowCaptions}
  2149. {/block:Video}
  2150.  
  2151. {block:Chat}
  2152. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2153. <div class="chatp">
  2154. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  2155. {Line}</div>{/block:Lines}</div>
  2156. </div>
  2157. {/block:Chat}
  2158.  
  2159. {block:Answer}
  2160. <div id="askcont">
  2161. <div class="asker-cont">
  2162. <div id="asker-image"><img src="{AskerPortraitURL-128}"></div>
  2163. <div id="asker">
  2164. <div class="asker-link">{Asker} asked</div>
  2165. <div class="question">{Question}</div>
  2166. </div>
  2167. </div>
  2168. </div>
  2169.  
  2170. {block:Answerer}
  2171. <div id="replycont">
  2172. <div class="replier-cont">
  2173. <div id="replier-image"><img src="{AnswererPortraitURL-128}"></div>
  2174. <div id="replier">
  2175. <div class="replier-link">{Answerer} replied</div>
  2176. <div class="answer">{Answer}</div>
  2177. </div>
  2178. </div>
  2179. </div>
  2180. {/block:Answerer}
  2181.  
  2182. {block:NotReblog}  <div class="caption"><figcaption> {Answer} </figcaption> </div> {/block:NotReblog}
  2183. {block:RebloggedFrom} <div class="reblog-list">
  2184. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2185.  
  2186. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2187.  
  2188. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2189.  
  2190. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2191.  
  2192. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div>
  2193.  
  2194. <div class="reblog-content">{Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom}
  2195. {/block:Answer}
  2196.  
  2197. {block:IndexPage}
  2198.  {block:HasTags} <!-----------POST TAGS----------->
  2199. <div class="post_tags">
  2200. {block:Tags}
  2201. <a href="{TagURL}"><i class="ph-hash-straight"></i>{Tag}</a>{/block:Tags}</div>
  2202. {/block:HasTags} <!-----------POST TAGS----------->
  2203.  
  2204. <div class="post-bottom">
  2205.     <div class="likereblog">
  2206.     <div class="controls">
  2207.     <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class="ph-arrows-clockwise"></i></a>
  2208.     <a title="like this post" class="like">{LikeButton size="15"}
  2209.     <i class="ph-heart-straight"></i></a>
  2210.     <div class="tag-button"><a href="javascript:;" title="click for tags"><i class="ph-hash"></i></a></div>
  2211. </div>
  2212. </div>
  2213. </div>
  2214. {/block:IndexPage}
  2215.  
  2216. </article> <!-----------POSTS----------->
  2217.  
  2218. <!-----------PERMALINK PAGE----------->
  2219. {block:PermalinkPage}
  2220. {block:Date}
  2221. <div id="perma">
  2222. <span>
  2223. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm} {DayOfWeek}
  2224. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  2225. </span>
  2226.  
  2227. {block:RebloggedFrom}
  2228. <div class="rb">
  2229. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>
  2230. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>
  2231. </div>
  2232. {/block:RebloggedFrom}
  2233.  
  2234. </div>
  2235.  
  2236. {block:HasTags}
  2237. <div id="permatg">
  2238. {block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  2239. </div>
  2240. {/block:HasTags}
  2241.  
  2242. {block:PostNotes}
  2243. <div id="notecontainer">{PostNotes}</div>
  2244. {/block:PostNotes}
  2245.  
  2246. {block:PermalinkPagination}
  2247. <div id="permpage">
  2248.     {block:NextPost}
  2249.         <a href="{NextPost}" title="Previous Post"><i class="ph-arrow-left"></i></a>
  2250.     {/block:NextPost}
  2251.    
  2252.     {block:PreviousPost}
  2253.         <a href="{PreviousPost}" title="Next Post"><i class="ph-arrow-right"></i></a>
  2254.     {/block:PreviousPost}
  2255. </div>
  2256. {/block:PermalinkPagination}
  2257. {/block:Date}
  2258. {/block:PermalinkPage}
  2259. <!-----------PERMALINK PAGE----------->
  2260. {/block:Posts}
  2261.  
  2262. {block:IndexPage}
  2263. <footer id="pagination"> <!-----------PAGINATION----------->
  2264. {block:Pagination}
  2265. {block:PreviousPage}
  2266. <a href="{PreviousPage}">Prev</a>
  2267. {/block:PreviousPage}
  2268. {block:JumpPagination length="3"}
  2269. {block:CurrentPage}
  2270. <span class="current_page">{CurrentPage}</a></span>
  2271. {/block:CurrentPage}
  2272. {block:JumpPage}
  2273. <a class="jump_page" href="{URL}">{PageNumber}</a>
  2274. {/block:JumpPage}
  2275. {/block:JumpPagination}
  2276. {block:NextPage}
  2277. <a href="{NextPage}">Next</a>
  2278. {/block:NextPage}
  2279. {/block:Pagination}
  2280. </footer> <!-----------PAGINATION----------->
  2281. {/block:IndexPage}
  2282.  
  2283. </section><!------------------POSTS WRAPPER----------------------->
  2284.  
  2285. </section>  <!--------- POSTS CONTAINER ----------->
  2286.  
  2287. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2288.  
  2289. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2290.  
  2291. <!-----------Pixel Union photosets script----------->
  2292. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2293. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  2294. <!-----------Pixel Union photosets script----------->
  2295.  
  2296. <!---------- Responsive tumblr videos and external iframes script ---------->
  2297. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  2298. <!---------- Responsive tumblr videos and external iframes script ---------->
  2299.  
  2300. <!--Time ago script by bychloethemes @ tumblr-->
  2301. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  2302. <!--Time ago script by bychloethemes @ tumblr-->
  2303.  
  2304. <!-----------Tooltips Script----------->
  2305. <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  2306. <!-----------Tooltips Script----------->
  2307.  
  2308. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2309. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  2310. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2311.  
  2312. <script src="https://unpkg.com/feather-icons"></script>
  2313.  
  2314. <script>
  2315. $(document).ready(function(){
  2316.     //pxu photosets by @ shythemes & bychloethemes
  2317.    $('.photo-slideshow').pxuPhotoset({
  2318.        lightbox: true,
  2319.        rounded: false,
  2320.        gutter: '{select:photoset gutter}px',
  2321.        photoset: '.photo-slideshow',
  2322.        photoWrap: '.photo-data',
  2323.        photo: '.pxu-photo'
  2324.    });
  2325.     $('img[src*="media.tumblr.com"]').each(function() {
  2326.         var newsrc = $(this).attr('src').replace('gifv','gif');
  2327.     $(this).attr('src', newsrc);
  2328.     });
  2329.  
  2330.     $('a[href*="media.tumblr.com"]').each(function() {
  2331.         var newhref = $(this).attr('href').replace('gifv','gif');
  2332.      $(this).attr('href', newhref);
  2333.     });
  2334.     $('.timestamp').timeAgo({
  2335.         time: "short",
  2336.         spaces: true,
  2337.         words: false,
  2338.         suffix: "ago",  
  2339.     });
  2340.     // tippy tooltips script
  2341.     tippy('a[title]', {
  2342.         theme: 'custom',
  2343.         arrow: tippy.roundArrow,
  2344.         zIndex: 9999999999,
  2345.         placement: 'auto',
  2346.         maxWidth: 300,
  2347.         content(reference) {
  2348.             const title = reference.getAttribute('title');
  2349.             reference.removeAttribute('title'); return title; },
  2350.     });
  2351.     //responsive tumblr videos and external iframes by @ nouvae
  2352.     function flexFrame() {
  2353.     $(".caption").each(function() {
  2354.         $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2355.             flexibleFrames($(".capframe"));
  2356.         });
  2357.             flexibleFrames($(".video"));
  2358.     }
  2359.     $(document).ready(flexFrame);
  2360.     //customaudio.js script by annasthms @ tumblr
  2361.     customAudio({
  2362.     post: ".posts",
  2363.     wrappers: {
  2364.         audio: ".custom_audio_wrapper",
  2365.         buttons: ".custom_audio_buttons",
  2366.         duration: ".custom_audio_duration",
  2367.         timeCurrent: ".custom_audio_current_time",
  2368.         timeLeft: ".custom_audio_time_left",
  2369.         seekbar: ".custom_audio_seekbar"
  2370.     },
  2371.         default: false,
  2372.         pauseAll: true,
  2373.         playButton: "<i data-feather='play'></i>",
  2374.         pauseButton: "<i data-feather='pause'></i>",
  2375.         errorIcon: "<i data-feather='x'></i>",
  2376.         hideInfoIfError: true,
  2377.         callAfterLoad: () => {
  2378.             feather.replace();
  2379.         }
  2380.     });
  2381. });
  2382. </script>
  2383.  
  2384. <script>
  2385.    
  2386.   // toggle dark/light
  2387. {block:ifdarkmode}
  2388. const toggle = document.getElementById("theme-toggle");
  2389.  
  2390. toggle.onclick = function () {
  2391.     document.documentElement.classList.add("theme-transition");
  2392.  
  2393.     let currentTheme = document.documentElement.getAttribute("data-theme");
  2394.     let targetTheme = "light";
  2395.  
  2396.     if (currentTheme === "light") {
  2397.         targetTheme = "dark";
  2398.     }
  2399.  
  2400.     window.setTimeout(function () {
  2401.         document.documentElement.classList.remove("theme-transition");
  2402.     }, 50);
  2403.  
  2404.     document.documentElement.setAttribute("data-theme", targetTheme);
  2405.     localStorage.setItem("theme", targetTheme);
  2406.     };
  2407. {/block:ifdarkmode}
  2408. </script>
  2409.  
  2410. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2411.  
  2412. </body>
  2413. </html> <!---------------------------END--------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!