API tools faq
paste
Advertisement
themesbydoori

ESP

themesbydoori
Aug 28th, 2020 (edited)
3,334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 97.49 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾ESP⏌ by sheathemes @ tumblr
  11.  
  12.  
  13. TERMS
  14.  
  15. > Do not redistribute my codes and claim it as your own
  16.  
  17. > Do not change, move, or delete my credits
  18.  
  19. > Use pieces of my code for your own work
  20.  
  21. > Use any of my themes or pages as a base code for your own work
  22.  
  23. > Do not do any major customizations to my themes. Please do not try to pass it off as your own.
  24.  
  25.  
  26. CREDITS
  27.  
  28. > 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
  29.  
  30. > Responsive tumblr videos and external iframes script: https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  31.  
  32. > Time ago script: https://bychloethemes.tumblr.com/plugins/timeago
  33.  
  34. > .gifv to gif conversion script: https://felicitysmoak.tumblr.com/post/188159105501/
  35.  
  36. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  37.  
  38. > Tippy.js: https://atomiks.github.io/tippyjs/
  39.  
  40. > Icons: https://remixicon.com/ | https://phosphoricons.com/ | https://feathericons.com/
  41.  
  42. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  43.  
  44. > Customaudio.js: https://annasthms.tumblr.com/more/js/customaudio/new
  45.  
  46.  
  47. > NPF images fix v3.0: https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  48.  
  49. > Search Suggestions Script: https://shythemes.tumblr.com/post/138692201618/tutorial-search-tags
  50.  
  51. > Accessible dark mode: https://rstylr.tumblr.com/plugins/darkmode
  52.  
  53. > Click to show tumblr controls: https://seyche.tumblr.com/post/643682133088583680/hi-looove-your-new-blog-theme-i-was-wondering-if
  54.  
  55. > Sticky sidebar: https://leafo.net/sticky-kit/
  56.  
  57. !-->
  58.  
  59. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  60. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  61.  
  62. <head>
  63.  
  64. <script>
  65. {block:ifdarkmode}
  66. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  67. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  68. {/block:ifdarkmode}
  69. </script>
  70.  
  71. <!------------Smooth Scroll Script------------>
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  73. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  74. <!------------Smooth Scroll Script------------>
  75.  
  76. <!--------------Custom Fonts-------------->
  77. <link rel="preconnect" href="https://fonts.googleapis.com">
  78. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  79. <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">
  80. <!--------------Custom Fonts-------------->
  81.  
  82. <!--Homelinks Icons -->
  83. <script src="https://unpkg.com/phosphor-icons"></script>
  84. <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  85. <!--Homelinks Icons-->
  86.  
  87.  
  88.     <title>{Title}</title>
  89.     <link rel="shortcut icon" href="{Favicon}">
  90.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  91.     <meta charset="utf-8">
  92.     {block:Description}
  93.     <meta name="description" content="{MetaDescription}" />
  94.     {/block:Description}
  95.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  96.     <meta name="viewport" content="width=device-width, initial-scale=1">
  97.  
  98. <!--Custom Options-->
  99. <meta name="color:background" content="#f8f8f8" />
  100. <meta name="color:accent" content="#ffb79d" />
  101. <meta name="color:accented text" content="#ffffff" />
  102. <meta name="color:Text" content="#3e3e3e" />    
  103. <meta name="color:bold" content="#ffb79d"/>
  104. <meta name="color:italic" content="#000000"/>
  105. <meta name="color:Links" content="#000000" />
  106. <meta name="color:Link Hover" content="#ffb79d" />
  107. <meta name="color:text selection" content="#ffffff" />
  108. <meta name="color:text selection background" content="#ffb79d" />
  109. <meta name="color:Blockquote" content="#ffb79d" />
  110. <meta name="color:scrollbar" content="#ffb79d" />
  111. <meta name="color:linkbar title" content="#000000" />
  112. <meta name="color:linkbar" content="#ffffff" />
  113. <meta name="color:header title" content="#000000" />
  114. <meta name="color:header subtitle" content="#000000" />
  115. <meta name="color:description" content="#000000" />
  116. <meta name="color:Posts" content="#ffffff" />
  117. <meta name="color:Post Title" content="#000000" />
  118. <meta name="color:Post Borders" content="#e8e8e8" />
  119. <meta name="color:question" content="#000000" />
  120. <meta name="color:question background" content="#fafafa" />
  121. <meta name="color:chat odd" content="#ffb79d"/>
  122. <meta name="color:chat even" content="#000000"/>
  123. <meta name="color:pagination" content="#000000" />
  124. <meta name="color:permalink" content="#000000" />
  125. <meta name="color:permalink hover" content="#ffb79d" />
  126.  
  127. <meta name="color:&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;">
  128.  
  129. <!------- night mode ------>
  130.  
  131. <meta name="color:accent night" content="#ffd2c1" />
  132. <meta name="color:accented text night" content="#000000" />
  133. <meta name="color:background night" content="#313131" />
  134. <meta name="color:text night" content="#ffffff" />
  135. <meta name="color:bold night" content="#ffd2c1" />
  136. <meta name="color:italic night" content="#ffffff" />
  137. <meta name="color:links night" content="#ffffff" />
  138. <meta name="color:link hover night" content="#ffd2c1" />
  139. <meta name="color:text selection night" content="#000000" />
  140. <meta name="color:text selection background night" content="#ffd2c1" />
  141. <meta name="color:linkbar title night" content="#ffffff" />
  142. <meta name="color:linkbar night" content="#414141" />
  143. <meta name="color:header title night" content="#ffffff" />
  144. <meta name="color:header subtitle night" content="#ffffff" />
  145. <meta name="color:description night" content="#ffffff" />
  146. <meta name="color:posts background night" content="#414141" />
  147. <meta name="color:posts title night" content="#ffffff" />
  148. <meta name="color:post borders night" content="#2e2e2e" />
  149. <meta name="color:question night" content="#ffffff" />
  150. <meta name="color:question background night" content="#525252" />
  151. <meta name="color:chat odd night" content="#ffd2c1"/>
  152. <meta name="color:chat even night" content="#ffffff"/>
  153. <meta name="color:pagination night" content="#ffffff" />
  154. <meta name="color:permalink night" content="#ffffff" />
  155. <meta name="color:permalink hover night" content="#ffd2c1" />
  156.  
  157. <meta name="select:Background Attachment" content="fixed" title="fixed">
  158. <meta name="select:Background Attachment" content="scroll" title="scroll">
  159. <meta name="select:Background Repeat" content="repeat" title="repeat">
  160. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  161.  
  162. <meta name="select:Body Font" content="Open Sans" title="Open Sans">
  163. <meta name="select:Body Font" content="Exo" title="Exo">
  164. <meta name="select:Body Font" content="Montserrat" title="Montserrat">
  165. <meta name="select:Body Font" content="Roboto" title="Roboto">
  166. <meta name="select:Body Font" content="Poppins" title="Poppins">
  167. <meta name="select:Body Font" content="Ubuntu" title="Ubuntu">
  168. <meta name="select:Body Font" content="Noto Sans" title="Noto Sans">
  169.  
  170. <meta name="select:font size" content="11" title="11px">
  171. <meta name="select:font size" content="12" title="12px">
  172. <meta name="select:font size" content="13" title="13px">
  173. <meta name="select:font size" content="14" title="14px">
  174. <meta name="select:font size" content="15" title="15px">
  175.  
  176. <meta name="select:text align" content="left" title="left">
  177. <meta name="select:text align" content="justify" title="justify">
  178. <meta name="select:description text align" content="center" title="center">
  179. <meta name="select:description text align" content="justify" title="justify">
  180.  
  181. <meta name="select:Post Size" content="400" title="400px">
  182. <meta name="select:Post Size" content="450" title="450px">
  183. <meta name="select:Post Size" content="475" title="475px">
  184. <meta name="select:Post Size" content="500" title="500px">
  185. <meta name="select:Post Size" content="525" title="525px">
  186. <meta name="select:Post Size" content="540" title="540px">
  187. <meta name="select:Post Size" content="650" title="650px">
  188. <meta name="select:Post Size" content="700" title="700px">
  189.  
  190. <meta name="select:Photoset gutter" content="1" title="1px">
  191. <meta name="select:Photoset gutter" content="2" title="2px">
  192. <meta name="select:Photoset gutter" content="4" title="4px">
  193. <meta name="select:Photoset gutter" content="6" title="6px">
  194. <meta name="select:Photoset gutter" content="8" title="8px">
  195. <meta name="select:Photoset gutter" content="10" title="10px">
  196.  
  197. <meta name="text:header title" content="header title here" />
  198. <meta name="text:header subtitle" content="header subtitle here" />
  199.  
  200. <meta name="text:event title one" content="event title here" />
  201. <meta name="text:event description one" content="event description here" />
  202. <meta name="text:event title two" content="even title here" />
  203. <meta name="text:event description two" content="event description here" />
  204. <meta name="text:event title three" content="event title here" />
  205. <meta name="text:event description three" content="event description here" />
  206. <meta name="text:event title four" content="event title here" />
  207. <meta name="text:event description four" content="event description here" />
  208.  
  209. <meta name="text:event month one" content="Jul" />
  210. <meta name="text:event day one" content="25" />
  211. <meta name="text:event month two" content="Aug" />
  212. <meta name="text:event day two" content="5" />
  213. <meta name="text:event month three" content="Aug" />
  214. <meta name="text:event day three" content="14" />
  215. <meta name="text:event month four" content="Sep" />
  216. <meta name="text:event day four" content="6" />
  217.  
  218. <meta name="text:established" content="Jul 31 2022" />
  219. <meta name="text:about" content="Anya Forger" />
  220. <meta name="text:online counter" content="free hosted script here" />
  221. <meta name="text:hit counter" content="free hosted script here" />
  222. <meta name="text:blog status" content="active / semi-hiatus / hiatus / inactive" />
  223. <meta name="text:disclaimer" content="disclaimer here" />
  224.  
  225. <meta name="if:Link1" content="1" />
  226. <meta name="if:Link2" content="1" />
  227. <meta name="if:Link3" content="1" />
  228. <meta name="if:Link4" content="1" />
  229. <meta name="if:Link5" content="1" />
  230. <meta name="if:Link6" content="1" />
  231.  
  232. <meta name="text:social media URL 1" content="social media URL 1" />
  233. <meta name="text:social media name 1" content="Instagram" />
  234. <meta name="text:social media URL 2" content="social media URL 2" />
  235. <meta name="text:social media name 2" content="Twitter" />
  236. <meta name="text:social media URL 3" content="social media URL 3" />
  237. <meta name="text:social media name 3" content="Youtube" />
  238. <meta name="text:social media URL 4" content="social media URL 4" />
  239. <meta name="text:social media name 4" content="Tiktok" />
  240.  
  241. <meta name="text:Custom Link1 URL" content="Link 1 URL" />
  242. <meta name="text:Custom Link1 Name" content="Link 1" />
  243. <meta name="text:Custom Link2 URL" content="Link 2 URL" />
  244. <meta name="text:Custom Link2 Name" content="Link 2" />
  245. <meta name="text:Custom Link3 URL" content="Link 3 URL" />
  246. <meta name="text:Custom Link3 Name" content="Link 3" />
  247. <meta name="text:Custom Link4 URL" content="Link 4 URL" />
  248. <meta name="text:Custom Link4 Name" content="Link 4" />
  249. <meta name="text:Custom Link5 URL" content="Link 5 URL" />
  250. <meta name="text:Custom Link5 Name" content="Link 5" />
  251. <meta name="text:Custom Link6 URL" content="Link 6 URL" />
  252. <meta name="text:Custom Link6 Name" content="Link 6" />
  253.  
  254. <meta name="image:background" content=""/>
  255. <meta name="image:header" content=""/>
  256. <meta name="image:responsive header" content=""/>
  257. <meta name="image:sidebar" content=""/>
  258.  
  259. <meta name="if:header" content="1"/>
  260. <meta name="if:dark mode" content="1"/>
  261. <meta name="if:sidebar image" content="1"/>
  262. <meta name="if:Small Cursor" content="0" />
  263. <meta name="if:Custom Text Selection" content="0"/>
  264. <meta name="if:Faded Images" content="0"/>
  265. <meta name="if:Grayscale Images" content="0"/>
  266. <meta name="if:Show Captions" content="1"/>
  267. <meta name="if:truncate posts" content="1"/>
  268.  
  269.  
  270. <meta name="if:social media links" content="1"/>
  271. <meta name="if:events box" content="1"/>
  272. <meta name="if:projects box" content="1"/>
  273. <meta name="if:members box" content="1"/>
  274. <meta name="if:affiliates box" content="1"/>
  275. <meta name="if:site info box" content="1"/>
  276.  
  277. <!--
  278.        NPF images fix v3.0 by @glenthemes [2021]
  279.        💌 git.io/JRBt7
  280. --->
  281. <script src="//npf-images-v3.github.io/script.js"></script>
  282. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  283.  
  284. <style tmblr-npf>
  285.  
  286. :root {
  287.     --NPF-Caption-Spacing:1em;
  288.     --NPF-Image-Spacing:4px;
  289.    
  290.     /*----------BLOG OPTIONS----------*/
  291.     --text-font: {select:font size}px;
  292.     --post-size: {select:post size}px;
  293. }
  294.     /*----------COLOR OPTIONS----------*/
  295.  
  296. :root, html[data-theme='light'] {
  297.     --LightOn: block; /* displays <span> with moon icon */
  298.     --LightOff: none;  /* hides <span> with sun icon */
  299.    
  300.     --main-background: {color:background};
  301.     --accent: {color:accent};
  302.     --accented-text: {color:accented text};
  303.     --lightbox-background: rgba({RGBcolor:background}, 0.6);
  304.     --audio-player-background: rgba({RGBcolor:posts}, 0.8);
  305.     --main-text: {color:text};
  306.     --bold: {color:bold};
  307.     --italic: {color:italic};
  308.     --main-links: {color:links};
  309.     --main-link-hover: {color:link hover};
  310.     --text-selection: {color:text selection};
  311.     --text-selection-background: {color:text selection background};
  312.     --blockquote: {color:blockquote};
  313.     --scrollbar: {color:scrollbar};
  314.     --topbar-title: {color:linkbar title};
  315.     --description: {color:description};
  316.     --top-banner: {color:linkbar};
  317.     --header-title: {color:header title};
  318.     --header-subtitle: {color:header subtitle};
  319.     --main-posts: {color:posts};
  320.     --caption-cover: {RGBcolor:posts};
  321.     --post-title: {color:post title};
  322.     --post-borders: {color:post borders};
  323.     --question: {color:question};
  324.     --question-background: {color:question background};
  325.     --chat-odd: {color:chat odd};
  326.     --chat-even: {color:chat even};
  327.     --pagination: {color:pagination};
  328.     --permalink: {color:permalink};
  329.     --tag-cover: {RGBcolor:permalink background};
  330.     --permalink-hover: {color:permalink hover};
  331. }
  332.  
  333. html[data-theme='dark'] {
  334.     --LightOn: none; /* hides <span> with moon icon */
  335.     --LightOff: block; /* displays <span> with sun icon */
  336.    
  337.     --accent: {color:accent night};
  338.     --accented-text: {color:accented text night};
  339.     --main-background: {color:background night};
  340.     --lightbox-background: rgba({RGBcolor:background night}, 0.6);
  341.     --audio-player-background: rgba({RGBcolor:posts background night}, 0.8);
  342.     --main-text: {color:text night};
  343.     --bold: {color:bold night};
  344.     --italic: {color:italic night};
  345.     --main-links: {color:links night};
  346.     --main-link-hover: {color:link hover night};
  347.     --text-selection: {color:text selection night};
  348.     --text-selection-background: {color:text selection background night};
  349.     --sidebar-title: {color:sidebar title night};
  350.     --description: {color:description night};
  351.     --topbar-title: {color:linkbar title night};
  352.     --header-title: {color:header title night};
  353.     --header-subtitle: {color:header subtitle night};
  354.     --top-banner: {color:linkbar night};
  355.     --main-posts: {color:posts background night};
  356.     --caption-cover: {RGBcolor:posts background night};
  357.     --post-borders: {color:post borders night};
  358.     --post-title: {color:posts title night};
  359.     --question: {color:question night};
  360.     --question-background: {color:question background night};
  361.     --chat-odd: {color:chat odd night};
  362.     --chat-even: {color:chat even night};
  363.     --pagination: {color:pagination night};
  364.     --permalink: {color:permalink night};
  365.     --permalink-hover: {color:permalink hover night};
  366. }
  367.  
  368. html.theme-transition,
  369. html.theme-transition *,
  370. html.theme-transition *:before,
  371. html.theme-transition *:after {
  372.   transition: 0s !important;
  373.   transition-delay: 0 !important;
  374. }
  375.  
  376. /*----------TUMBLR CONTROLS----------*/
  377.  
  378. .ph-gear {
  379.     font-size: 18px;
  380.     background-color: var(--accent);
  381.     color: var(--accented-text);
  382.     padding: 10px;
  383.     border-radius: 50%;
  384.     margin-right: 10px;
  385. }
  386.  
  387. iframe.tmblr-iframe {
  388.     opacity: 0;
  389.     visibility: hidden;
  390.     position:fixed!important;
  391.     z-index: 300!important;
  392.     top: 17px!important;
  393.     right: 120px!important;
  394.     opacity:0.6!important;
  395.     transform:scale(0.7);
  396.     transform-origin:100% 0;
  397.     -webkit-transform:scale(0.7);
  398.     -webkit-transform-origin:100% 0;
  399.     -o-transform:scale(0.7);
  400.     -o-transform-origin:100% 0;
  401.     -moz-transform:scale(0.7);
  402.     -moz-transform-origin:100% 0;
  403.     -ms-transform:scale(0.7);
  404.      filter:invert(1);
  405.     -webkit-filter:invert(1);
  406.     -o-filter:invert(1);
  407.     -moz-filter:invert(1);
  408.     -ms-filter:invert(1);
  409.     filter:invert(100%) hue-rotate(180deg);
  410.     -webkit-filter:invert(100%) hue-rotate(180deg);
  411.     -moz-filter:invert(100%) hue-rotate(180deg);
  412.     -o-filter:invert(100%) hue-rotate(180deg);
  413.     -ms-filter:invert(100%) hue-rotate(180deg);
  414.     -webkit-transition: all 0.5s;
  415.     -moz-transition: all 0.5s;
  416.     -ms-transition: all 0.5s;
  417.     -o-transition: all 0.5s;
  418.     transition: all 0.5s;
  419. }
  420.  
  421. body.controls-click iframe.tmblr-iframe {
  422.     opacity: 1.0;
  423.     visibility: visible;
  424.     -webkit-transition: all 0.5s;
  425.     -moz-transition: all 0.5s;
  426.     -ms-transition: all 0.5s;
  427.     -o-transition: all 0.5s;
  428.     transition: all 0.5s;
  429. }
  430.  
  431. iframe.tmblr-iframe:hover {
  432.     opacity:1.0!important;
  433.     -webkit-transition: 0.6s ease;
  434.     -moz-transition: 0.6s ease;
  435.     -o-transition: 0.6s ease;
  436.     transition: 0.6s ease;
  437. }
  438.  
  439. html[data-theme='dark'] iframe.tmblr-iframe  {
  440.     opacity: 1;
  441.     filter:invert(0)!important;
  442.     -webkit-filter:invert(0)!important;
  443.     -o-filter:invert(0)!important;
  444.     -moz-filter:invert(0)!important;
  445.     -ms-filter:invert(0)!important;
  446.     filter:invert(100%) hue-rotate(180deg);
  447.     -webkit-filter:invert(100%) hue-rotate(180deg);
  448.     -moz-filter:invert(100%) hue-rotate(180deg);
  449.     -o-filter:invert(100%) hue-rotate(180deg);
  450.     -ms-filter:invert(100%) hue-rotate(180deg);
  451.     -webkit-transition: 0.6s ease;
  452.     -moz-transition: 0.6s ease;
  453.     -o-transition: 0.6s ease;
  454.     transition: 0.6s ease;
  455. }
  456.  
  457. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  458.  
  459. .vignette, #vignette {
  460.     opacity:0;
  461. }
  462. .lightbox-image, #tumblr_lightbox img {
  463.     box-shadow:none !important;
  464.     border-radius:0 !important;
  465.     max-width:none;
  466. }
  467.  
  468. .tmblr-lightbox, #tumblr_lightbox {
  469.     background-color: var(--lightbox-background)!important;
  470. }
  471.  
  472. .lightbox-image, #tumblr_lightbox img {
  473.     background-color: var(--main-posts)!important;
  474.     padding: 10px !important;
  475.     -moz-box-sizing:border-box;
  476.     box-sizing:border-box;
  477. }
  478.  
  479. /*----------SCROLLBAR----------*/
  480.  
  481. ::-webkit-scrollbar {
  482.     width: 10px;
  483.     height: 6px;
  484. }
  485. ::-webkit-scrollbar-button {
  486.     width: 0px;
  487.     height: 0px;
  488. }
  489. ::-webkit-scrollbar-thumb {
  490.     background-color: var(--scrollbar);
  491.     border-radius: 20px;
  492.     border: 2px solid var(--main-background);
  493. }
  494.  
  495. ::-webkit-scrollbar-track {
  496.     background: var(--main-posts);
  497.     border: 8px solid var(--main-posts);
  498.     border-radius: 20px;
  499. }
  500.  
  501. ::-webkit-scrollbar-corner {
  502.     background: transparent;
  503. }
  504.  
  505. /*----------TOOLTIPS----------*/
  506.  
  507. .tippy-tooltip.custom-theme {
  508.     background-color: var(--accent);
  509.     color: var(--accented-text);
  510.     text-align:center;
  511.     font-size: 12px;
  512.     font-weight: 700;
  513. }
  514.  
  515. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  516.   fill: var(--accent);
  517. }
  518.  
  519. /*----------TEXT SELECTION----------*/
  520.  
  521. {block:ifCustomTextSelection}
  522. ::selection {
  523.     background: var(--text-selection-background);
  524.     color: var(--text-selection);
  525. }
  526.  
  527. ::-moz-selection {
  528.     background: var(--text-selection-background);
  529.     color: var(--text-selection);
  530. }
  531.  
  532. ::-webkit-selection {
  533.     background: var(--text-selection-background);
  534.     color: var(--text-selection);
  535. }
  536. {/block:ifCustomTextSelection}
  537.  
  538. /*----------THEME BASICS----------*/
  539.  
  540. body {
  541.     color: var(--main-text);
  542.     font-family: {select:Body Font}, helvetica, sans-serif;
  543.     font-weight: 400;
  544.     font-size: var(--text-font);
  545.     line-height:180%;
  546.     margin:0;
  547.     padding: 0;
  548.     box-sizing: border-box;
  549.     text-align:left;
  550.     background: var(--main-background) url({image:Background}) center;
  551.     background-attachment: {select:Background Attachment};
  552.     background-repeat: {select:Background Repeat};
  553.     -webkit-font-smoothing: antialiased;
  554.     -moz-osx-font-smoothing: grayscale;
  555. }
  556.  
  557. p:empty {
  558.     display: none;
  559. }
  560.  
  561. b,strong {
  562.     color:var(--bold);
  563.     font-weight: 700;
  564. }
  565.  
  566. i,em {
  567.     color:var(--italic);
  568. }
  569.  
  570. small,sub,sup {
  571.     font-size: calc(var(--text-font) - 0.5px);
  572. }
  573.  
  574. h1,h2,h3 {
  575.     font-weight: 700;
  576.     font-size: 1.3em;
  577.     color: var(--bold);
  578. }
  579.  
  580. h4,h5,h6 {
  581.     font-weight: 700;
  582.     font-size: 1.2em;
  583.     color: var(--bold);
  584. }
  585.  
  586. pre {
  587.     white-space: pre-wrap;
  588.     white-space: -moz-pre-wrap;
  589.     white-space: -pre-wrap;
  590.     white-space: -o-pre-wrap;
  591.     word-wrap: break-word;
  592.     padding: 5px 10px;
  593.     font-family: inherit;
  594.     font-weight: 400;
  595.     line-height: 150%;
  596.     color: var(--question);
  597.     background-color: var(--question-background);
  598. }
  599.  
  600. blockquote:not(.tumblr_parent) {
  601.     padding-left: 20px;
  602.     margin: 10px;
  603.     border-left: 3px solid var(--blockquote);
  604. }
  605.  
  606. blockquote img {
  607.     max-width: 100%;
  608.     height: auto;
  609. }
  610.  
  611. figure {
  612.   margin: 1em 3px;
  613. }
  614.  
  615. a {
  616.     color:var(--main-links);
  617.     text-decoration:none;
  618.     -moz-transition: 0.6s ease;
  619.     -o-transition: 0.6s ease;
  620.     -webkit-transition: 0.6s ease;
  621.     transition: 0.6s ease;
  622. }
  623.  
  624. a:hover {
  625.     color:var(--main-link-hover);
  626.     -moz-transition: 0.6s ease;
  627.     -o-transition: 0.6s ease;
  628.     -webkit-transition: 0.6s ease;
  629.     transition: 0.6s ease;
  630. }
  631.  
  632. {block:ifSmallCursor}
  633. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  634. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  635. {/block:ifSmallCursor}
  636.  
  637. /*----------PAGINATION----------*/
  638.  
  639. #pagination {
  640.     margin: 20px auto 0 auto;
  641.     text-align:center;
  642.     background-color: var(--main-posts);
  643.     padding: 15px 20px;
  644.     font-size: 1.1em;
  645. }
  646.  
  647. .current_page {
  648.     color:var(--pagination);
  649.     border-bottom: 2px solid var(--accent);
  650.     padding: 5px 10px;
  651.     font-weight: 700;
  652.     transition: 0.6s;
  653. }
  654.  
  655. #pagination a {
  656.     margin: 0 10px;
  657.     padding: 5px 10px;
  658.     color: var(--pagination);
  659.     font-weight: 700;
  660.     border-bottom: 2px solid transparent;
  661.     -moz-transition: 0.6s ease;
  662.     -o-transition: 0.6s ease;
  663.     -webkit-transition: 0.6s ease;
  664.     transition: 0.6s ease;
  665. }
  666.  
  667. #pagination a:hover {
  668.     color: var(--main-link-hover);
  669.     -moz-transition: 0.6s ease;
  670.     -o-transition: 0.6s ease;
  671.     -webkit-transition: 0.6s ease;
  672.     transition: 0.6s ease;
  673. }
  674.  
  675. /*----------POSIS CONTAINER----------*/
  676.  
  677. .wrap {
  678.     position: relative;
  679.     width: calc(var(--post-size) + 485px);
  680.     margin: 130px auto 0 auto;
  681.     padding-top: 40px;
  682.     display: flex;
  683.     align-items: flex-start;
  684.     flex-flow: row wrap;
  685.     justify-content: space-between;
  686.     {block:PermalinkPage}
  687.     width: calc(540px + 485px);
  688.     {/block:PermalinkPage}
  689. }
  690.  
  691. #content {
  692.     width: var(--post-size);
  693.     position: relative;
  694.     margin-bottom: 58px;
  695.     {block:PermalinkPage}
  696.     width: 540px;
  697.     {/block:PermalinkPage}
  698. }
  699.  
  700. .posts {
  701.     position: relative;
  702.     width: var(--post-size);
  703.     background-color: var(--main-posts);
  704.     {block:IndexPage}
  705.     margin-bottom: 100px;
  706.     {/block:IndexPage}
  707.     {block:PermalinkPage}
  708.     margin-bottom: 50px;
  709.     width: 540px;
  710.     {/block:PermalinkPage}
  711. }
  712.  
  713. #pinned {
  714.     color: var(--main-links);
  715.     font-weight: 700;
  716.     right: 0;
  717.     margin-top: 0px;
  718.     position: absolute;
  719.     z-index: 2;
  720. }
  721.  
  722. .ph-push-pin {
  723.     font-size: 20px;
  724.     width: 20px;
  725.     height: 20px;
  726.     padding: 10px;
  727.     background: var(--accent);
  728.     color: var(--accented-text);
  729.     border-radius: 0 0 0 10px;
  730. }
  731.  
  732. .posts ul li {
  733.     list-style: none;
  734.     margin-left: -25px;
  735.     padding-left: 10;
  736. }
  737.  
  738. .posts ul li:before {
  739.     content: "▷";
  740.     padding-right: 10px;
  741.     color: var(--accent);
  742. }
  743.  
  744. .posts ol {
  745.     list-style-type: upper-roman;
  746.     text-transform: justify;
  747.     margin-left: -10px;
  748. }
  749.  
  750. .posts iframe {
  751.     max-width:100%;
  752.     display: block;
  753.     padding: 0;
  754.     margin: 0
  755. }
  756.  
  757. .posts img {
  758.     max-width: 100%;
  759.     display: block;
  760.     border: 0;
  761. }
  762.  
  763. .tumblr_video_container {
  764.     width: auto !important;
  765.     height: auto !important;
  766. }
  767.  
  768. .npf_inst > *:last-child {
  769.     margin-bottom: 0;
  770. }
  771.  
  772. .posts .photo img {
  773.     {block:ifFadedImages}
  774.     {block:IndexPage}
  775.     opacity: 0.6;
  776.     -moz-transition: 0.6s ease;
  777.     -o-transition: 0.6s ease;
  778.     -webkit-transition: 0.6s ease;
  779.     transition: 0.6s ease;
  780. }
  781.  
  782. .posts:hover .photo img {
  783.     opacity: 1.0;
  784.     -moz-transition: 0.6s ease;
  785.     -o-transition: 0.6s ease;
  786.     -webkit-transition: 0.6s ease;
  787.     transition: 0.6s ease;
  788.     {/block:IndexPage}
  789.     {/block:ifFadedImages}
  790. }
  791.  
  792. {block:ifGrayscaleImages}
  793. {block:IndexPage}
  794. .posts .photo img {
  795.     z-index: -9999999999999999999999999px;
  796.     -webkit-filter: grayscale(100%);
  797.     filter: grayscale(100%);
  798.     filter: gray;
  799.     /* IE 6-9 */
  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. .posts:hover .photo img {
  807.     -webkit-filter: none;
  808.     filter: none;
  809.     -moz-transition: 0.6s ease;
  810.     -o-transition: 0.6s ease;
  811.     -webkit-transition: 0.6s ease;
  812.     transition: 0.6s ease;
  813. }
  814. {/block:IndexPage}
  815. {/block:ifGrayscaleImages}
  816.  
  817. /*----------TEXT/CAPTION CONTAINER----------*/
  818.  
  819. .caption {
  820.     text-align: {select:text align};
  821. }
  822.  
  823. .caption a {
  824.     text-decoration: underline;
  825. }
  826.  
  827. .caption figcaption {
  828.     padding: 15px;
  829. }
  830.  
  831. figcaption p {
  832.     margin: 5px 0 0;
  833. }
  834.  
  835. .caption img {
  836.     max-width: 100%;
  837. }
  838.  
  839. .reblog-list {
  840.     padding: 10px;
  841. }
  842.  
  843. .reblog-header {
  844.     padding: 20px 15px;
  845. }
  846.  
  847. .reblog-header a {
  848.     text-decoration: none;
  849. }
  850.  
  851. .reblog-header img {
  852.     width: 25px;
  853.     height: 25px;
  854.     display: inline-block;
  855.     vertical-align: middle;
  856.     margin-right: 10px;
  857.     border-radius: 50%;
  858. }
  859.  
  860. .inactive, .user, .deactivated {
  861.     font-weight: 700;
  862.     color: var(--main-links);
  863.     text-align: center;
  864. }
  865.  
  866. .user:hover {
  867.     color: var(--main-link-hover);
  868. }
  869.  
  870. .reblog-content {
  871.     padding: 5px 15px;
  872. }
  873.  
  874. .reblog-content p, .reblog-content h2 {
  875.     margin: 0 0 10px 0;
  876. }
  877.  
  878. .read_more {
  879.     position: relative;
  880.     width: 100%;
  881.     padding: 3px 10px;
  882.     font-weight: 700;
  883.     color: var(--accented-text);
  884.     background-color: var(--accent);
  885.     border-radius: 15px;
  886.     -moz-transition: 0.6s ease;
  887.     -o-transition: 0.6s ease;
  888.     -webkit-transition: 0.6s ease;
  889.     transition: 0.6s ease;
  890. }
  891.  
  892. .caption .read_more {
  893.     text-decoration: none;
  894. }
  895.  
  896. .read_more:hover {
  897.     background-color: transparent;
  898.     color: var(--main-links);
  899.     -moz-transition: 0.6s ease;
  900.     -o-transition: 0.6s ease;
  901.     -webkit-transition: 0.6s ease;
  902.     transition: 0.6s ease;
  903. }
  904.  
  905. .read-more {
  906.     position: absolute;
  907.     padding: 2px 10px;
  908.     font-weight: 700;
  909.     left: 50%;
  910.     transform: translateX(-50%);
  911.     bottom: 20px;
  912.     z-index: 5;
  913.     border-radius: 20px;
  914.     background-color: var(--accent);
  915.     color: var(--accented-text);
  916.     {block:ifnottruncateposts}
  917.     display: none;
  918.     {block:ifnottruncateposts}
  919. }
  920.  
  921. .read-more:hover {
  922.     color: var(--main-links);
  923.     background-color: var(--main-posts);
  924. }
  925.  
  926. .posts .text {
  927.     height: 350px;
  928.     overflow: hidden;
  929.     position: relative;
  930.     {block:PermalinkPage}
  931.     height: 100%;
  932.     overflow: visible;
  933.     {/block:PermalinkPage}
  934.     {block:ifnottruncateposts}
  935.     height: 100%;
  936.     overflow: visible;
  937.     {/block:ifnottruncateposts}
  938. }
  939.  
  940. .post-cover {
  941.     width: 100%;
  942.     height: 150px;
  943.     background: linear-gradient(0deg, rgb( var(--caption-cover)), rgba(var(--caption-cover), 0.24));
  944.     position: absolute;
  945.     bottom: 0;
  946.     z-index: 4;
  947.     transition: 0.6s;
  948.     {block:ifnottruncateposts}
  949.     display: none;
  950.     {block:ifnottruncateposts}
  951. }
  952.  
  953. .npf_inst, #npf_a0rsv {
  954.     margin-bottom: 20px;
  955. }
  956.  
  957. figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  958.  
  959. div.npf-link-block .title {
  960.     font-size: 16px;
  961.     text-align: left;
  962. }
  963.  
  964. .soundcloud_audio_player {
  965.     max-height:116px!important;
  966. }
  967.  
  968. .spotify_audio_player {
  969.     max-height:80px!important;
  970. }
  971.  
  972. /*----------POST INFO & PERMALINKS----------*/
  973.  
  974. .top-info {
  975.    padding: 15px 20px;
  976.     position: relative;
  977.     border-bottom: 1px solid var(--post-borders);
  978. }
  979.  
  980. .permalink-cont {
  981.     display: flex;
  982.     align-items: center;
  983. }
  984.  
  985. .permalink-cont .time {
  986.     display: flex;
  987.     flex-direction: column;
  988. }
  989.  
  990. .top-info-image {
  991.     min-width: 80px;
  992.     display: flex;
  993.     align-items: center;
  994. }
  995.  
  996. .image-cont {
  997.     display: flex;
  998.     align-items: center;
  999.     overflow: hidden;
  1000. }
  1001.  
  1002. .permalink-cont img {
  1003.     width: 55px;
  1004.     height: 55px;
  1005.     box-sizing: border-box;
  1006.     border-radius: 50%;
  1007. }
  1008.  
  1009. .reblog-cont {
  1010.     font-weight: 700;
  1011. }
  1012.  
  1013. .reblog-info {
  1014.     margin-top: -5px;
  1015. }
  1016.  
  1017. .post-bottom {
  1018.     display: flex;
  1019.     padding: 25px 20px;
  1020.     justify-content: flex-end;
  1021.     align-items: center;
  1022.     font-weight: 700;
  1023.     border-top: 1px solid var(--post-borders);
  1024. }
  1025.  
  1026. .post-bottom a {
  1027.     color: var(--permalink);
  1028. }
  1029.  
  1030. .post-bottom a:hover {
  1031.     color: var(--permalink-hover);
  1032. }
  1033.  
  1034. .date i {
  1035.     font-size: 1.9em;
  1036.     margin-right: 10px;
  1037.     color: var(--accent);
  1038. }
  1039.  
  1040. .date {
  1041.     display: flex;
  1042.     align-items: center;
  1043. }
  1044.  
  1045. /*----------LIKE/REBLOG----------*/
  1046.  
  1047. .likereblog {
  1048.     text-align: center;
  1049.     z-index: 1;
  1050.     margin-top: 5px;
  1051. }
  1052.  
  1053. .controls {
  1054.     display: flex;
  1055.     align-items: center;
  1056. }
  1057.  
  1058. .controls a {
  1059.     position:relative;
  1060.     display:inline-block;
  1061.     margin: 0 10px;
  1062.     vertical-align: middle;
  1063.     height: 21px;
  1064.     -moz-transition: 0.6s ease;
  1065.     -o-transition: 0.6s ease;
  1066.     -webkit-transition: 0.6s ease;
  1067.     transition: 0.6s ease;
  1068. }
  1069.  
  1070. .controls a:hover {
  1071.     color: var(--permalink-hover);
  1072.     -moz-transition: 0.6s ease;
  1073.     -o-transition: 0.6s ease;
  1074.     -webkit-transition: 0.6s ease;
  1075.     transition: 0.6s ease;
  1076. }
  1077.  
  1078. .ph-arrows-clockwise {
  1079.     font-size: 20px;
  1080.     color: var(--permalink);
  1081.     -moz-transition: 0.6s ease;
  1082.     -o-transition: 0.6s ease;
  1083.     -webkit-transition: 0.6s ease;
  1084.     transition: 0.6s ease;
  1085. }
  1086.  
  1087. .ph-arrows-clockwise:hover {
  1088.     color: var(--permalink-hover);
  1089.     -moz-transition: 0.6s ease;
  1090.     -o-transition: 0.6s ease;
  1091.     -webkit-transition: 0.6s ease;
  1092.     transition: 0.6s ease;
  1093. }
  1094.  
  1095. .ph-heart-straight {
  1096.     color: var(--permalink);
  1097.     font-size: 20px;
  1098.     -moz-transition: 0.6s ease;
  1099.     -o-transition: 0.6s ease;
  1100.     -webkit-transition: 0.6s ease;
  1101.     transition: 0.6s ease;
  1102. }
  1103.  
  1104. .ph-heart-straight:hover {
  1105.     color: var(--permalink);
  1106. }
  1107.  
  1108. .controls .like .liked + .ph-heart-straight {
  1109.    opacity: 1;
  1110. }
  1111.  
  1112. .controls .like .liked + .ph-heart-straight {
  1113.      color: #ff492f;
  1114. }
  1115.  
  1116. .controls .like .like_button iframe {
  1117.    position:absolute;
  1118.    top: -1px;
  1119.    left:0;
  1120.    bottom:0;
  1121.    right:0;
  1122.    width:100%;
  1123.    height:100%;
  1124.    z-index:2;
  1125.    opacity:0.000001;
  1126. }
  1127.  
  1128. /*--------POST TAGS--------*/
  1129.  
  1130. .tag-button {
  1131.     cursor: pointer;
  1132.     display: flex;
  1133. }
  1134.  
  1135. .ph-hash {
  1136.     font-size: 20px;
  1137.     color: var(--permalink);
  1138. }
  1139.  
  1140. .post_tags {
  1141.     padding: 10px 20px;
  1142.     display: none;
  1143.     text-align: right;
  1144.     margin-bottom: 5px;
  1145. }
  1146.  
  1147. .post_tags a {
  1148.     display: inline-block;
  1149.     margin-left: 3px;
  1150.     color: var(--permalink);
  1151.     font-size: 11px;
  1152.     font-weight: 700;
  1153.     border: 1px solid var(--post-borders);
  1154.     padding: 0px 10px;
  1155.     border-radius: 5px;
  1156.     -moz-transition: 0.6s ease;
  1157.     -o-transition: 0.6s ease;
  1158.     -webkit-transition: 0.6s ease;
  1159.     transition: 0.6s ease;
  1160. }
  1161.  
  1162. .post_tags a:hover {color:var(--permalink-hover);
  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. .ph-hash-straight {
  1170.     margin-right: 10px;
  1171.     color:var(--accent);
  1172.     font-size:18px;
  1173.     vertical-align:middle;
  1174. }
  1175.  
  1176. /*----------PERMALINK PAGE----------*/
  1177.  
  1178. #perma {
  1179.     width: 540px;
  1180.     padding: 10px 5px;
  1181.     margin: 0 auto;
  1182.     background-color: var(--main-posts);
  1183.     text-align: center;
  1184.     text-transform: lowercase;
  1185.     box-sizing: border-box;
  1186.     position: relative;
  1187. }
  1188.  
  1189. #perma span {
  1190.     font-weight: 700;
  1191.     text-transform: uppercase;
  1192. }
  1193.  
  1194. #permatg {
  1195.     width: 540px;
  1196.     padding: 10px;
  1197.     margin: 10px auto 10px;
  1198.     background-color: var(--main-posts);
  1199.     text-align: center;
  1200.     text-transform: lowercase;
  1201.     box-sizing: border-box;
  1202.     position: relative;
  1203. }
  1204.  
  1205. #permatg a {
  1206.     display: inline-block;
  1207.     margin: 0 5px;
  1208.     color: var(--main-links);
  1209. }
  1210.  
  1211. #permatg a:hover {
  1212.     color: var(--main-link-hover);
  1213. }
  1214.  
  1215. .rb {
  1216.     position: absolute;
  1217.     left: 46%;
  1218.     margin-top: 27px;
  1219.     display: inline-block;
  1220.     z-index: 1;
  1221. }
  1222.  
  1223. .root img, .via img {
  1224.     border-radius: 100%;
  1225.     padding: 3px;
  1226.     margin-right: 2px;
  1227.     background-color: var(--accent);
  1228. }
  1229.  
  1230. #notecontainer {
  1231.     margin: 10px auto;
  1232.     width: 540px;
  1233.     background-color: var(--main-posts);
  1234.     color: var(--main-text);
  1235.     position: relative;
  1236.     padding: 10px;
  1237.     box-sizing: border-box;
  1238. }
  1239.  
  1240. #notecontainer ol.notes {
  1241.     list-style-type: none;
  1242.     margin: 0;
  1243.     padding: 0;
  1244.     font-size: var(--text-font);
  1245. }
  1246.  
  1247. #notecontainer ol.notes li.note {
  1248.     padding: 15px;
  1249. }
  1250.  
  1251. #notecontainer img.avatar {
  1252.     margin-right: 10px;
  1253.     vertical-align: middle;
  1254.     width: 25px;
  1255.     height: 25px;
  1256.     border-radius: 50%;
  1257. }
  1258.  
  1259. #permpage {
  1260.     text-align: center;
  1261.     margin-top: 50px;
  1262.     justify-content: center;
  1263.     align-items: center;
  1264.     margin-top: 80px;
  1265.     margin-bottom: -30px;
  1266. }
  1267.  
  1268. .ph-arrow-left, .ph-arrow-right {
  1269.     padding: 5px;
  1270.     font-size: 20px;
  1271.     display: inline-block;
  1272.     height: 20px;
  1273.     border-radius: 50%;
  1274.     margin: 0 10px;
  1275.     background-color: var(--accent);
  1276.     color: var(--accented-text);
  1277.     -webkit-transition: all 0.6s ease;
  1278.     -moz-transition: all 0.6s ease;
  1279.     -o-transition: all 0.6s ease;
  1280.     transition: all 0.6s ease;
  1281. }
  1282.  
  1283. .ph-arrow-left:hover, .ph-arrow-right:hover {
  1284.     background-color: transparent;
  1285.     color: var(--main-links);
  1286.     -webkit-transition: all 0.6s ease;
  1287.     -moz-transition: all 0.6s ease;
  1288.     -o-transition: all 0.6s ease;
  1289.     transition: all 0.6s ease;
  1290. }
  1291.  
  1292. /*----------TUMBLR TEXT/LINKS----------*/  
  1293.  
  1294. .posts .title, .posts .link {
  1295.     color: var(--post-title);
  1296.     text-transform: uppercase;
  1297.     padding: 20px;
  1298.     font-size: 1.4em;
  1299.     font-weight: 700;
  1300.     line-height: 200%;
  1301.     position: relative;
  1302.     line-height: 120%;
  1303.     -moz-transition: 0.6s ease;
  1304.     -o-transition: 0.6s ease;
  1305.     -webkit-transition: 0.6s ease;
  1306.     transition: 0.6s ease;
  1307. }
  1308.  
  1309. .posts .title:before, .posts .link:before {
  1310.     content: '';
  1311.     position: absolute;
  1312.     top: 100%;
  1313.     left: 20px;
  1314.     width: 10%;
  1315.     height: 3px;
  1316.     background-color: var(--accent);
  1317. }
  1318.  
  1319. .posts .link a {
  1320.     color: var(--post-title);
  1321. }
  1322.  
  1323. .posts .link a:hover {
  1324.     color: var(--main-link-hover);
  1325.     -moz-transition: 0.6s ease;
  1326.     -o-transition: 0.6s ease;
  1327.     -webkit-transition: 0.6s ease;
  1328.     transition: 0.6s ease;
  1329. }
  1330.  
  1331. .thumbnail img {
  1332.     width: 100%;
  1333.     height: auto;
  1334.     display: block;
  1335. }
  1336.  
  1337. /*----------TUMBLR QUOTES----------*/  
  1338.  
  1339. .qt {
  1340.     padding: 20px 20px 0;
  1341.     display: flex;
  1342.     flex-direction: row;
  1343.     justify-content: space-between;
  1344. }
  1345.  
  1346. .quote {
  1347.     font-family: 'Playfair Display', serif;
  1348.     line-height: 150%;
  1349.     font-size: 1.6em;
  1350.     padding: 20px;
  1351.     color: var(--question);
  1352.     padding-left: 20px;
  1353.     border-left: 1px solid var(--post-borders);
  1354. }
  1355.  
  1356. .ph-quotes {
  1357.     color: var(--main-links);
  1358.     padding: 5px;
  1359.     font-size: 1.2em;
  1360.     align-self: center;
  1361.     border-radius: 5px;
  1362. }
  1363.  
  1364. .quote-box {
  1365.     font-size: 20px;
  1366.     align-self: center;
  1367.     color: var(--main-text);
  1368.     margin-right: 20px;
  1369. }
  1370.  
  1371. .qtsource {
  1372.     padding: 0 20px 20px;
  1373. }
  1374.  
  1375. /*----------TUMBLR AUDIO----------*/
  1376.  
  1377. .audiowrapper {
  1378.     background-color: var(--question-background);
  1379.     display:flex;
  1380.     overflow: hidden;
  1381. }
  1382.  
  1383. .audio-content .audio_player {
  1384.     background-color: var(--audio-player-background);
  1385. }
  1386.  
  1387. .audio-content {
  1388.     width: 40%;
  1389.     position:relative;
  1390.     display: flex;
  1391.     justify-content: center;
  1392.     align-items: center;
  1393. }
  1394.  
  1395. .audio_player {
  1396.     position: absolute;
  1397.     z-index: 2;
  1398.     width: 70px;
  1399.     height: 70px;
  1400.     border-radius: 50%;
  1401. }
  1402.  
  1403. .audio_player > div {
  1404.     display: inline-block;
  1405.     margin: 0 0.5em 0 0;
  1406.     vertical-align: middle;
  1407. }
  1408.  
  1409. .custom_audio_buttons {
  1410.     height: 1.25em;
  1411. }
  1412.  
  1413. .custom_audio_buttons svg {
  1414.     width : 1.70em;
  1415.     height: 1.70em;
  1416.     margin-left: 24px;
  1417.     margin-top: 22px;
  1418.     stroke: var(--main-text);
  1419. }
  1420.  
  1421. .custom_audio_error_icon svg {
  1422.     stroke: red;
  1423. }
  1424.  
  1425. .custom_audio_duration {
  1426.     display: inline;
  1427. }
  1428.  
  1429. .seek-cont {
  1430.     display: flex;
  1431.     justify-content: space-between;
  1432.     align-items: center;
  1433. }
  1434.  
  1435. .seek-cont span {
  1436.     width: 50px;
  1437. }
  1438.  
  1439. .custom_audio_seekbar {
  1440.     height: 0.5em;
  1441.     border: 1px solid var(--main-text);
  1442.     width: 90%;
  1443. }
  1444.  
  1445. .custom_audio_seekbar_progress {
  1446.     width: 0;
  1447.     height: 100%;
  1448.     background: var(--main-links);
  1449. }
  1450.  
  1451. .custom_audio_current_time, .custom_audio_time_left {
  1452.     font-size: 12px;
  1453.     width: 50px;
  1454. }
  1455.  
  1456. .custom_audio_current_time {
  1457.     text-align: left;
  1458. }
  1459.  
  1460. .custom_audio_time_left {
  1461.     text-align: right;
  1462. }
  1463.  
  1464. .audio_info p {
  1465.     margin: 0.25em 0;
  1466. }
  1467.  
  1468. .album-background {
  1469.     position: absolute;
  1470.     top: -40%;
  1471.     left: 0;
  1472.     opacity: 0.1;
  1473. }
  1474.  
  1475. .music_menu {
  1476.     position: relative;
  1477.     margin: 0px;
  1478.     list-style:none;
  1479.     padding: 5%;
  1480.     align-self: center;
  1481.     font-size:18px;
  1482.     font-weight: 700;
  1483.     color: var(--main-links);
  1484.     width: 100%;
  1485. }
  1486.  
  1487. .music_menu  p {
  1488.     margin: 5px 0;
  1489. }
  1490.  
  1491. .music_menu  p:nth-child(2) {
  1492.     font-weight: 400;
  1493.     font-size: 15px;
  1494. }
  1495.  
  1496. /*----------TUMBLR QUESTION/ANSWER----------*/
  1497.  
  1498. #askcont, #replycont {
  1499.     padding: 15px;
  1500. }
  1501.  
  1502. .asker-cont, .replier-cont {
  1503.     display: flex;
  1504. }
  1505.  
  1506. #asker-image, #replier-image {
  1507.     width: 50px;
  1508.     height: 50px;
  1509.     align-self: center;
  1510. }
  1511.  
  1512. #asker-image {
  1513.     margin-right: 45px;
  1514. }
  1515.  
  1516. #replier-image {
  1517.     order: 2;
  1518.     margin-left: 30px;
  1519.     margin-right: 20px;
  1520. }
  1521.  
  1522. #asker-image img, #replier-image img {
  1523.     border-radius: 50%;
  1524.     border: 3px solid var(--accent);
  1525.     padding: 5px;
  1526. }
  1527.  
  1528. .asker-link, .replier-link {
  1529.     font-weight: 700;
  1530. }
  1531.  
  1532. #asker, #replier {
  1533.     background-color: var(--question-background);
  1534.     padding: 20px;
  1535.     box-sizing: border-box;
  1536.     display: block;
  1537.     width: 100%;
  1538.     border-radius: 10px;
  1539.     position: relative;
  1540. }
  1541.  
  1542. #asker:after {
  1543.     right: 100%;
  1544.     top: 50%;
  1545.     margin-top: -17px;
  1546.     border: solid transparent;
  1547.     content: " ";
  1548.     height: 0;
  1549.     width: 0;
  1550.     position: absolute;
  1551.     pointer-events: none;
  1552.     border-right-color: var(--question-background);
  1553.     border-width: 13px;
  1554. }
  1555.  
  1556. #replier:after {
  1557.     left: 100%;
  1558.     top: 50%;
  1559.     margin-top: -17px;
  1560.     border: solid transparent;
  1561.     content: " ";
  1562.     height: 0;
  1563.     width: 0;
  1564.     position: absolute;
  1565.     pointer-events: none;
  1566.     border-left-color: var(--question-background);
  1567.     border-width: 13px;
  1568. }
  1569.  
  1570. .question, .answer {
  1571.     margin-top: 10px;
  1572. }
  1573.  
  1574. .answer p {
  1575.     margin: 0;
  1576. }
  1577.  
  1578. .anwer a {
  1579.     text-decoration: underline;
  1580. }
  1581.  
  1582. .answer .npf_inst, #npf_a0rsv {
  1583.     margin-bottom: 0;
  1584. }
  1585.  
  1586. /*----------TUMBLR CHAT----------*/
  1587.  
  1588. .chat .line {
  1589.     margin-top: 0px;
  1590.     padding: 20px 40px;
  1591.     border-bottom: 1px solid var(--post-borders);
  1592. }
  1593.  
  1594. .chat .line:last-of-type {
  1595.     margin-bottom: 0px;
  1596.     border-bottom: none;
  1597. }
  1598.  
  1599. .line:nth-child(odd) .label b {
  1600.     color: var(--chat-odd);
  1601.     font-weight: 700;
  1602.     font-size: 1.1em;
  1603.     display: block;
  1604.     margin-bottom: 10px;
  1605. }
  1606.  
  1607. .line:nth-child(even) .label b {
  1608.     color: var(--chat-even);
  1609.     font-weight: 700;
  1610.     font-size: 1.1em;
  1611.     display: block;
  1612.     margin-bottom: 10px;
  1613. }
  1614.  
  1615. p.npf_chat {  
  1616.     border-bottom: 1px solid var(--post-borders);
  1617.     padding: 20px 0;
  1618.     margin-top: 0;
  1619. }
  1620.  
  1621. p.npf_chat:first-of-type {
  1622.     padding-top: 0;
  1623. }
  1624.  
  1625. p.npf_chat:last-of-type {
  1626.     margin-bottom: 0px;
  1627.     border-bottom: none;
  1628. }
  1629.  
  1630. p.npf_chat b {    
  1631.     display: block;
  1632.     padding-bottom: 10px;
  1633.     color: var(--main-links);
  1634. }
  1635.  
  1636. /*----------LINKBAR---------*/
  1637.  
  1638. #linkbar {
  1639.     height: 70px;
  1640.     position: fixed;
  1641.     top: 0;
  1642.     left: 0;
  1643.     right: 0;
  1644.     background-color: var(--top-banner);
  1645.     z-index: 9;
  1646.     display: flex;
  1647.     justify-content: space-between;
  1648.     align-items: center;
  1649.     padding: 0 20px;
  1650. }
  1651.  
  1652. .topbar-title {
  1653.     font-weight: 700;
  1654.     font-size: 1.2em;
  1655.     text-transform: uppercase;
  1656.     color: var(--topbar-title);
  1657.     margin-right: 20px;
  1658. }
  1659.  
  1660. /*----------SEARCH BAR----------*/
  1661.  
  1662. .search-cont {
  1663.     display: flex;
  1664.     align-items: center;
  1665. }
  1666.  
  1667. .search-area {
  1668.     width: auto;
  1669.     padding: 10px 0px;
  1670.     box-sizing: border-box;
  1671.     display: flex;
  1672.     align-items: center;
  1673. }
  1674.  
  1675. .ph-magnifying-glass {
  1676.     color: var(--accented-text);
  1677.     background-color: var(--accent);
  1678.     padding: 10px;
  1679.     border-radius: 50%;
  1680.     margin-left: 10px;
  1681.     font-size: 18px;
  1682. }
  1683.  
  1684. .query {
  1685.     border: 0;
  1686.     outline: 0;
  1687.     font-family: inherit;
  1688.     font-size: var(--text-font);
  1689.     color: inherit;
  1690.     background-color: var(--question-background);
  1691.     width: 290px;
  1692.     padding: 5px 15px;
  1693.     border-radius: 20px;
  1694.     border: 1px solid var(--post-borders);
  1695. }
  1696.  
  1697. html[data-theme='light'] .query {
  1698.     background-color: var(--question-background);
  1699. }
  1700.  
  1701. ::-webkit-input-placeholder {color: var(--main-text);}
  1702. :-moz-placeholder {color: inherit; opacity:1;}
  1703. ::-moz-placeholder {color: inherit; opacity:1;}
  1704. :-ms-input-placeholder {color: inherit;}
  1705. input:focus::-webkit-input-placeholder {color: transparent;}
  1706. input:focus:-moz-placeholder {color: transparent;}
  1707. input:focus::-moz-placeholder {color: transparent;}
  1708. input:focus:-ms-input-placeholder { color: transparent;}
  1709.  
  1710. .homelinks a {
  1711.     margin: 0 20px;
  1712.     padding-bottom: 3px;
  1713.     font-weight: 700;
  1714.     box-shadow: inset 0px 0px 0px 0px transparent;
  1715.     -webkit-transition: 0.6s ease;
  1716.     -moz-transition: 0.6s ease;
  1717.     -o-transition: 0.6s ease;
  1718.     transition: 0.6s ease;
  1719. }
  1720.  
  1721. .homelinks a:hover {
  1722.     box-shadow: inset 0px -3px 0px 0px var(--accent);
  1723.     -webkit-transition: 0.6s ease;
  1724.     -moz-transition: 0.6s ease;
  1725.     -o-transition: 0.6s ease;
  1726.     transition: 0.6s ease;
  1727. }
  1728.  
  1729. /*----------DAY/NIGHT MODE---------*/
  1730.  
  1731. button#theme-toggle {
  1732.     outline: none;
  1733.     border: 0;
  1734.     background: transparent;
  1735.     padding: 0;
  1736.     cursor: pointer;
  1737. }
  1738.  
  1739. button#theme-toggle i {
  1740.     font-size: 18px;
  1741.     background-color: var(--accent);
  1742.     color: var(--accented-text);
  1743.     padding: 10px;
  1744.     border-radius: 50%;
  1745. }
  1746.  
  1747. .toggle-header {
  1748.     display: flex;
  1749. }
  1750.  
  1751. .light-on{
  1752.     display: var(--LightOn);
  1753. }
  1754.  
  1755. .light-off{
  1756.     display: var(--LightOff);
  1757. }
  1758.  
  1759. .sider {
  1760.     display: none;
  1761. }
  1762.  
  1763. /*----------HEADER----------*/
  1764.  
  1765. #header {
  1766.     height: 550px;
  1767.     position: relative;
  1768.     top: 70px;
  1769.     left: 0;
  1770.     right: 0;
  1771.     overflow: hidden;
  1772.     background-color: var(--accent);
  1773.     {block:PermalinkPage}
  1774.     display: none;
  1775.     {/block:PermalinkPage}
  1776.     {block:ifnotheader}
  1777.     display: none;
  1778.     {/block:ifnotheader}
  1779. }
  1780.  
  1781. #header img {
  1782.     position: absolute;
  1783.     top: 0;
  1784.     left: 0;
  1785.     right: 0;
  1786.     bottom: 0;
  1787.     margin: auto;
  1788. }
  1789.  
  1790. #header-title-cont {
  1791.     width: 50%;
  1792.     height: 100%;
  1793.     margin-left: 22%;
  1794.     padding: 50px;
  1795.     box-sizing: border-box;
  1796.     display: flex;
  1797.     flex-direction: column;
  1798.     justify-content: center;
  1799.     z-index: 2;
  1800.     position: absolute;
  1801. }
  1802.  
  1803. .header-title {
  1804.     font-weight: 700;
  1805.     font-size: 2.8em;
  1806.     text-transform: uppercase;
  1807.     color: var(--header-title);
  1808. }
  1809.  
  1810. .header-subtitle {
  1811.     margin-top: 20px;
  1812.     font-size: 1.5em;
  1813.     color: var(--header-subtitle);
  1814. }
  1815.  
  1816. #small-header {
  1817.     display: none;
  1818. }
  1819.  
  1820. /*----------SIDEBAR----------*/
  1821.  
  1822. #sidebar-container {
  1823.     padding-bottom: 150px;
  1824.     position: relative;
  1825.     width: 380px;
  1826.     z-index: 2;
  1827. }
  1828.  
  1829. .sidebar {
  1830.     width: 380px;
  1831.     {block:PermalinkPage}
  1832.     top: 110px;
  1833.     {/block:PermalinkPage}
  1834. }
  1835.  
  1836. .sidebar:nth-child(3) {
  1837.     {block:ifnoteventsbox}
  1838.     display: none;
  1839.     {/block:ifnoteventsbox}
  1840. }
  1841.  
  1842. .sidebar:nth-child(4) {
  1843.     {block:ifnotprojectsbox}
  1844.     display: none;
  1845.     {/block:ifnotprojectsbox}
  1846. }
  1847.  
  1848. .sidebar:nth-child(5) {
  1849.     {block:ifnotmembersbox}
  1850.     display: none;
  1851.     {/block:ifnotmembersbox}
  1852. }
  1853.  
  1854. .sidebar:nth-child(6) {
  1855.     {block:ifnotaffiliatesbox}
  1856.     display: none;
  1857.     {/block:ifnotaffiliatesbox}
  1858. }
  1859.  
  1860. .sidebar:nth-child(7) {
  1861.     {block:ifnotsiteinfobox}
  1862.     display: none;
  1863.     {/block:ifnotsiteinfobox}
  1864. }
  1865.  
  1866. .sidebar-content {
  1867.     background-color: var(--main-posts);
  1868. }
  1869.  
  1870. .sidebar-image {
  1871.     width: 380px;
  1872.     height: 180px;
  1873.     overflow: hidden;
  1874. }
  1875.  
  1876. .sidebar-image img {
  1877.     width: 100%;
  1878.     height: auto;
  1879.     background-color: var(--accent);
  1880. }
  1881.  
  1882. .sidebar-header {
  1883.     position: relative;
  1884.     padding: 20px;
  1885.     border-bottom: 1px solid var(--post-borders);
  1886. }
  1887.  
  1888. /*----------SIDEBAR | ABOUT----------*/
  1889.  
  1890. .sidebar-name {
  1891.     color: var(--main-links);
  1892.     font-weight: 700;
  1893.     font-size: 1.4em;
  1894. }
  1895.  
  1896. .description {
  1897.     padding: 20px 25px;
  1898.     text-align: {select:description text align};
  1899.     color: var(--description);
  1900. }
  1901.  
  1902. .description a {
  1903.     text-decoration: underline;
  1904. }
  1905.  
  1906. .nav-bar {
  1907.     display: flex;
  1908.     justify-content: center;
  1909.     align-items: center;
  1910.     padding: 5px 0 10px;
  1911.     {block:ifnotsocialmedialinks}
  1912.     display: none;
  1913.     {/block:ifnotsocialmedialinks}
  1914. }
  1915.  
  1916. .social-links i {
  1917.     color: var(--main-links);
  1918.     font-size: 22px;
  1919.     margin: 0 20px;
  1920.     height: 25px;
  1921.     -moz-transition: 0.6s ease;
  1922.     -o-transition: 0.6s ease;
  1923.     -webkit-transition: 0.6s ease;
  1924.     transition: 0.6s ease;
  1925. }
  1926.  
  1927. .social-links i:hover {
  1928.     color: var(--main-link-hover);
  1929.     -moz-transition: 0.6s ease;
  1930.     -o-transition: 0.6s ease;
  1931.     -webkit-transition: 0.6s ease;
  1932.     transition: 0.6s ease;
  1933. }
  1934.  
  1935. /*----------SIDEBAR | NAVIGATION----------*/
  1936.  
  1937. .morelinks a {
  1938.     display: block;
  1939.     padding: 20px 35px;
  1940.     border-bottom: 1px solid var(--post-borders);
  1941. }
  1942.  
  1943. .morelinks i {
  1944.     font-size: 18px;
  1945.     float: right;
  1946.     display: inline-block;
  1947.     vertical-align: middle;
  1948.     color: var(--accent);
  1949. }
  1950.  
  1951. .morelinks a:last-of-type {
  1952.     border-bottom: none;
  1953. }
  1954.  
  1955. /*----------SIDEBAR | EVENTS----------*/
  1956.  
  1957. .events {
  1958.     position: relative;
  1959.     display: flex;
  1960.     align-items: center;
  1961.     padding: 20px;
  1962.     padding-top: 10px;
  1963.     margin: 10px 0;
  1964. }
  1965.  
  1966. .events-title {
  1967.     font-weight: 700;
  1968. }
  1969.  
  1970. .events .event-date {
  1971.     position: relative;
  1972.     width: 60px;
  1973.     height: 60px;
  1974.     margin-right: 20px;
  1975.     background: var(--accent);
  1976.     display: flex;
  1977.     justify-content: center;
  1978.     align-items: center;
  1979.     flex-direction: column;
  1980.     border-radius: 50%;
  1981. }
  1982.  
  1983. .events .events-content {
  1984.     position: relative;  
  1985.     display: flex;
  1986.     flex-direction: column;
  1987.     justify-content: center;
  1988.     width: 220px;
  1989. }
  1990.  
  1991. .event-month, .event-day {
  1992.     color: var(--accented-text);
  1993. }
  1994.  
  1995. .event-month {
  1996.     font-size: 1.1em;
  1997.     font-weight: 700;
  1998.     text-transform: capitalize;
  1999. }
  2000.  
  2001. .events-content .events-subtitle {
  2002.     display: block;
  2003. }
  2004.  
  2005. /*----------SIDEBAR | PROJECTS----------*/
  2006.  
  2007. .project-cont {
  2008.     padding: 20px;
  2009.     box-sizing: border-box;
  2010. }
  2011.  
  2012. .project-cont h2 {
  2013.     color: var(--main-links);
  2014. }
  2015.  
  2016. .project-cont img {
  2017.     width: 340px;
  2018.     height: 200px;
  2019.     background-color: var(--accent);
  2020. }
  2021.  
  2022. .project-links {
  2023.     margin-top: 20px;
  2024. }
  2025.  
  2026. .project-cont a {
  2027.     margin-right: 5px;
  2028.     padding: 4px 10px;
  2029.     background-color: var(--accent);
  2030.     color: var(--accented-text);
  2031.     font-weight: 700;
  2032. }
  2033.  
  2034. .project-cont a:hover {
  2035.     background-color: transparent;
  2036.     color: var(--main-links);
  2037. }
  2038.  
  2039. /*----------SIDEBAR | MEMBERS----------*/
  2040.  
  2041. .member-section {
  2042.     position: relative;
  2043.     display: flex;
  2044.     align-items: center;
  2045.     padding: 20px 20px 0;
  2046.     margin: 10px 0;
  2047. }
  2048.  
  2049. .member-section:first-of-type {
  2050.     padding-top: 10px;
  2051. }
  2052.  
  2053. .member-section:last-of-type {
  2054.     padding-bottom: 20px;
  2055. }
  2056.  
  2057. .member-image {
  2058.     position: relative;
  2059.     width: 70px;
  2060.     height: 70px;
  2061.     margin-right: 20px;
  2062. }
  2063.  
  2064. .member-image img {
  2065.     position: absolute;
  2066.     top: 0;
  2067.     left: 0;
  2068.     width: 100%;
  2069.     height: 100%;
  2070.     object-fit: cover;
  2071.     border-radius: 50%;
  2072.     background-color: var(--accent);
  2073. }
  2074.  
  2075. .member-content {
  2076.     position: relative;  
  2077.     display: flex;
  2078.     flex-direction: column;
  2079.     justify-content: center;
  2080.     width: 220px;
  2081. }
  2082.  
  2083. .member-title {
  2084.     font-weight: 700;
  2085.     color: var(--main-links);
  2086. }
  2087.  
  2088. /*----------SIDEBAR | AFFILIATES----------*/
  2089.  
  2090. .affiliates {
  2091.     display: flex;
  2092.     flex-flow: row wrap;
  2093.     justify-content: center;
  2094.     align-items: stretch;
  2095.     padding: 20px 0;
  2096. }
  2097.  
  2098. .affiliates img {
  2099.     margin: 7px;
  2100.     width: 70px;
  2101.     height: 70px;
  2102.     background-color: var(--accent);
  2103.     -webkit-filter: none;
  2104.     filter: none;
  2105.     -moz-transition: all 0.8s ease-in;
  2106.     -o-transition: all 0.8s ease-in;
  2107.     -webkit-transition: all 0.8s ease-in;
  2108.     transition: all 0.8s ease-in;
  2109. }
  2110.  
  2111. .affiliates img:hover {
  2112.     z-index: -9999999999999999999999999px;
  2113.     -webkit-filter: grayscale(100%);
  2114.     filter: grayscale(100%);
  2115.     filter: gray;
  2116.     /* IE 6-9 */
  2117.     -moz-transition: all 0.8s ease-in;
  2118.     -o-transition: all 0.8s ease-in;
  2119.     -webkit-transition: all 0.8s ease-in;
  2120.     transition: all 0.8s ease-in;
  2121. }
  2122.  
  2123. /*----------SIDEBAR | SITE INFO----------*/
  2124.  
  2125. .blog-stats {
  2126.     padding: 20px;
  2127. }
  2128.  
  2129. .blog-stats p {
  2130.     margin: 10px 0;
  2131. }
  2132.  
  2133. .blog-stats p:first-of-type {
  2134.     margin-top: 0;
  2135. }
  2136.  
  2137. .blog-stats p:last-of-type {
  2138.     margin-bottom: 0;
  2139. }
  2140.  
  2141. .blog-stats b {
  2142.     background-color: var(--accent);
  2143.     color: var(--accented-text);
  2144.     padding: 2px 10px;
  2145.     margin-right: 5px;
  2146. }
  2147.  
  2148. /*----------FOOTER----------*/
  2149.  
  2150. #footer {
  2151.     background-color: var(--main-posts);
  2152.     position: relative;
  2153.     bottom: 0;
  2154.     width: 100%;
  2155.     margin-top: 30px;
  2156.     padding: 5px 20px;
  2157.     box-sizing: border-box;
  2158.     display: flex;
  2159.     justify-content: center;
  2160.     align-items: center;
  2161.     z-index: 9;
  2162. }
  2163.  
  2164. #footer i {
  2165.     display: inline-block;
  2166.     vertical-align: middle;
  2167. }
  2168.  
  2169. .ph-list {
  2170.     display: none;
  2171. }
  2172.  
  2173. #responsive-background {
  2174.     display: none;
  2175. }
  2176.  
  2177. /*----------RESPONSIVE DESIGN (DO NOT TOUCH)----------*/
  2178.  
  2179. @media screen and (max-width: 1025px) {
  2180.    
  2181.     iframe.tmblr-iframe {
  2182.         visibility: visible;
  2183.     }
  2184.    
  2185.     .tmblr-iframe--app-cta-button {
  2186.         display: none!important;
  2187.     }
  2188.    
  2189.     .ph-gear {
  2190.         display: none;
  2191.     }
  2192.    
  2193.     #sidebar-container {
  2194.         display: none;
  2195.     }
  2196.    
  2197.     .wrap {
  2198.         margin-top: 50px;
  2199.     }
  2200.    
  2201.     .wrap, #content {
  2202.         width: 100%;
  2203.         flex-direction: row;
  2204.         justify-content: center;
  2205.     }
  2206.    
  2207.     .posts {
  2208.         width: 90%;
  2209.         margin: 0 auto 150px auto;
  2210.     }
  2211.    
  2212.     #notecontainer, #perma, #permatg {
  2213.         width: 90%;
  2214.     }
  2215.    
  2216.     .posts .text {
  2217.         height: 100%;
  2218.     }
  2219.    
  2220.     .search-cont {
  2221.         display: none;
  2222.     }
  2223.    
  2224.     #header {
  2225.         display: none;
  2226.     }
  2227.    
  2228.     #small-header {
  2229.         width: 90%;
  2230.         height: 300px;
  2231.         position: relative;
  2232.         margin: 160px auto 50px;
  2233.         background-color: var(--accent);
  2234.         display: flex;
  2235.         flex-direction: column;
  2236.         Justify-content: center;
  2237.         align-items: center;
  2238.     }
  2239.    
  2240.     #small-header img {
  2241.         position: absolute;
  2242.         top: 0;
  2243.         right: 0;
  2244.         bottom: 0;
  2245.         opacity: 0.15;
  2246.     }
  2247.    
  2248.     #pagination {
  2249.         width: 90%;
  2250.         box-sizing: border-box;
  2251.         background-color: transparent;
  2252.     }
  2253.    
  2254.     .post-cover, .read-more {
  2255.         display: none;
  2256.     }
  2257.    
  2258.     .ph-list {
  2259.         display: flex;
  2260.         font-size: 18px;
  2261.         background-color: var(--accent);
  2262.         color: var(--accented-text);
  2263.         padding: 10px;
  2264.         border-radius: 50%;
  2265.         margin-left: 10px;
  2266.     }
  2267.    
  2268.     .homelinks a {
  2269.         margin: 0 5px;
  2270.     }
  2271.    
  2272.     #linkbar {
  2273.         border-bottom: 1px solid var(--post-borders);
  2274.     }
  2275.    
  2276.     #responsive-background {
  2277.         background-color: var(--main-posts);
  2278.         width: 100%;
  2279.         height: calc(100% - 71px);
  2280.         position: fixed;
  2281.         left: -100%;
  2282.         bottom: 0;
  2283.         display: flex;
  2284.         z-index: 100;
  2285.         transition: 1.2s;
  2286.     }
  2287.  
  2288.    
  2289.     #responsive-background.active {
  2290.         left: 0;
  2291.         transition: 1.2s;
  2292.     }
  2293.    
  2294.     .description {
  2295.         margin-bottom: 20px;
  2296.     }
  2297.    
  2298.     .social-links i {
  2299.         margin: 0 10px;
  2300.     }
  2301.    
  2302.     .morelinks a:last-of-type {
  2303.         border-bottom: 1px solid var(--post-borders);
  2304.     }
  2305.    
  2306.     .responsive-content {
  2307.         overflow-x: auto;
  2308.         padding: 20px 30px;
  2309.     }
  2310. }
  2311.  
  2312. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  2313.  
  2314. #bottom {
  2315.     bottom: 20px;
  2316.     position: fixed;
  2317.     right: 30px;
  2318.     z-index: 10;
  2319.     display: flex;
  2320.     flex-direction: column;
  2321. }
  2322.  
  2323. #bottom a:hover {
  2324.     color: var(--accented-text);
  2325. }
  2326.  
  2327. .ph-arrow-circle-up, .ph-copyright {
  2328.     padding: 3px;
  2329.     font-size: 22px;
  2330.     width: 22px;
  2331.     height: 22px;
  2332.     background-color: var(--accent);
  2333.     color: var(--accented-text);
  2334.     border-radius: 50%;
  2335.     margin: 3px 0;
  2336. }
  2337.  
  2338. /*----------SCROLL TO TOP---------*/
  2339.  
  2340. #scrollToTop:link,
  2341. #scrollToTop:visited {
  2342.     display: none;
  2343.     font-size: 12px;
  2344.     color: var(--accented-text);
  2345.     width: auto;
  2346.     z-index: 900;
  2347.     font-weight: 700;
  2348. }
  2349.  
  2350. {CustomCSS}
  2351. </style>
  2352.  
  2353. <script>
  2354. $(document).ready(function(){
  2355.    
  2356.     //click to show/hide tags
  2357.     $('.post_tags').hide();
  2358.     $('.tag-button').click(function() {
  2359.         $(this).closest('.posts').find('.post_tags').slideToggle(600);
  2360.         return false;
  2361.     });
  2362.    
  2363.     //search suggestions script    
  2364.     $('.search').submit(function(event){
  2365.        var value = $('input:first').val();
  2366.        location.replace('https://{Name}.tumblr.com/tagged/' + value);
  2367.    });
  2368.    
  2369.    //click to show/hide tumblr controls
  2370.     $('.controls-button').click(function(){
  2371.        $('body').toggleClass('controls-click');
  2372.    });
  2373.    
  2374.    //side panel for responsive design
  2375.     $('.slider').click(function(){
  2376.         $('#responsive-background').toggleClass('active');
  2377.     });
  2378.    
  2379. });
  2380. </script>
  2381.  
  2382. <!-----------Scroll To Top Script----------->
  2383. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  2384. <!-----------Scroll To Top Script----------->
  2385.  
  2386. </head>
  2387.  
  2388. <body>
  2389.  
  2390. <footer id="bottom">
  2391.  
  2392. <!-----------SCROLL TO TOP ----------->
  2393. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="ph-arrow-circle-up"></i></a>
  2394. <!-----------SCROLL TO TOP ----------->
  2395.  
  2396. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2397.  <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class="ph-copyright"></i></a>  
  2398. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2399. </footer>
  2400.  
  2401. <header id="linkbar">
  2402.     <section class="search-cont"> <!-----------SEARCH BAR----------->
  2403.         <span class="topbar-title">{Title}</span>
  2404.         <div class="search-area">
  2405.             <form action="/search" method="get" class="search">
  2406.             <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="search...">
  2407.         </form>
  2408.         <i class="ph-magnifying-glass"></i>
  2409.         </div>
  2410.     </section> <!-----------SEARCH BAR----------->
  2411.    
  2412.     <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  2413.         <a href="/">Home</a> /
  2414.         <a href="/ask">Ask</a> /
  2415.         <a href="/archive">Archive</a>  
  2416.         {block:SubmissionsEnabled}    
  2417.         / <a href="/submit">Submit</a>
  2418.         {/block:SubmissionsEnabled}
  2419.     </nav> <!-----------TUMBLR LINKS----------->
  2420.    
  2421.     <div class="toggle-header">
  2422.         <a class="controls-button" title="toggle tumblr controls"><i class="ph-gear"></i></a>
  2423.         {block:ifdarkmode} <!-----------DAY/NIGHT TOGGLE---------->
  2424.         <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2425.         <span class="light-on"><a href="javascript:;" title="toggle dark mode"><i class="ph-moon"></i></a></span>
  2426.         <span class="light-off"><a href="javascript:;" title="toggle light mode"><i class="ph-sun"></i></a></span>
  2427.         </button>
  2428.         {/block:ifdarkmode} <!-----------DAY/NIGHT TOGGLE---------->
  2429.         <a class="slider" href="javascript:;" title="side panel"><i class="ph-list"></i></a>
  2430.     </div>
  2431. </header>
  2432.  
  2433. <div id="responsive-background"> <!-----------RESPONSIVE SIDE PANEL----------->
  2434.     <div class="responsive-content">
  2435.         <div class="sidebar-content">
  2436.             <section class="sidebar-header">
  2437.                 <span class="sidebar-name">About</span>
  2438.             </section>
  2439.         <div class="description">{Description}</div> <!-----------SIDEBAR DESCRIPTION----------->
  2440.             <div class="nav-bar">
  2441.             <nav class="social-links"> <!-----------TUMBLR LINKS----------->
  2442.                 <a href="{text:social media URL 2}" title="{text:social media name 2}"><i class="ph-twitter-logo"></i></a>
  2443.                 <a href="{text:social media URL 1}" title="{text:social media name 1}"><i class="ph-instagram-logo"></i></a>
  2444.                 <a href="{text:social media URL 3}" title="{text:social media name 3}"><i class="ph-youtube-logo"></i></a>
  2445.                 <a href="{text:social media URL 4}" title="{text:social media name 4}"><i class="ph-tiktok-logo"></i></a>
  2446.             </nav> <!-----------TUMBLR LINKS----------->
  2447.             </div>
  2448.         </div>
  2449.        
  2450.         <div class="sidebar-content">
  2451.             <section class="sidebar-header">
  2452.                 <span class="sidebar-name">Navigation</span>
  2453.             </section>
  2454.    
  2455.             <nav class="morelinks"> <!-----------NAVIGATION LINKS----------->
  2456.             {block:ifLink1}<a href="{text:Custom Link1 URL}"><i class="ph-link"></i>{text:Custom Link1 Name}</a>{/block:ifLink1}
  2457.             {block:ifLink2}<a href="{text:Custom Link2 URL}"><i class="ph-link"></i>{text:Custom Link2 Name}</a>{/block:ifLink2}
  2458.             {block:ifLink3}<a href="{text:Custom Link3 URL}"><i class="ph-link"></i>{text:Custom Link3 Name}</a>{/block:ifLink3}
  2459.             {block:ifLink4}<a href="{text:Custom Link4 URL}"><i class="ph-link"></i>{text:Custom Link4 Name}</a>{/block:ifLink4}
  2460.             {block:ifLink5}<a href="{text:Custom Link5 URL}"><i class="ph-link"></i>{text:Custom Link5 Name}</a>{/block:ifLink5}
  2461.             {block:ifLink6}<a href="{text:Custom Link6 URL}"><i class="ph-link"></i>{text:Custom Link6 Name}</a>{/block:ifLink6}
  2462.             </nav> <!-----------NAVIGATION LINKS----------->
  2463.         </div>
  2464.        
  2465.         <div class="sidebar-content">
  2466.             <section class="sidebar-header">
  2467.                 <span class="sidebar-name">Members</span>
  2468.             </section>
  2469.    
  2470.             <div class="member-section">
  2471.                 <div class="member-image">
  2472.                     <img src="https://static.tumblr.com/uh2chis/AnOrgbkzq/member-1.png">
  2473.                 </div>
  2474.                 <div class="member-content">
  2475.                     <span class="member-title"><a href="/">Member Name</a></span>
  2476.                     <span class="member-subtitle">Member description</span>
  2477.                 </div>
  2478.             </div>
  2479.    
  2480.         <div class="member-section">
  2481.             <div class="member-image">
  2482.                 <img src="https://static.tumblr.com/uh2chis/mMvrgbkzw/member-2.png">
  2483.             </div>
  2484.             <div class="member-content">
  2485.                 <span class="member-title"><a href="/">Member Name</a></span>
  2486.                 <span class="member-subtitle">Member description</span>
  2487.             </div>
  2488.         </div>
  2489.    
  2490.         <div class="member-section">
  2491.             <div class="member-image">
  2492.                 <img src="https://static.tumblr.com/uh2chis/kX0rgbl01/member-3.png">
  2493.             </div>
  2494.             <div class="member-content">
  2495.                 <span class="member-title"><a href="/">Member Name</a></span>
  2496.                 <span class="member-subtitle">Member description</span>
  2497.             </div>
  2498.         </div>
  2499.     </div>
  2500.    
  2501.     <div class="sidebar-content">
  2502.         <section class="sidebar-header">
  2503.             <span class="sidebar-name">Site Info</span>
  2504.         </section>
  2505.         <div class="blog-stats">
  2506.             <p><b>Established</b> {text:established}</p>
  2507.             <p><b>About</b> {text:about}</p>
  2508.             <p><b>Theme</b> Sheathemes</p>
  2509.             <p><b>Blog status</b> {text:blog status}</p>
  2510.             <p><b>Disclaimer</b> {text:disclaimer}</p>
  2511.         </div>
  2512.  
  2513.     </div>
  2514. </div>
  2515. </div> <!-----------RESPONSIVE SIDE PANEL----------->
  2516.  
  2517. <header id="small-header"> <!-----------RESPONSIVE HEADER----------->
  2518.     <span class="header-title">{text:header title}</span>
  2519.     <span class="header-subtitle">{text:header subtitle}</span>
  2520.     <img src="{image:responsive header}" alt="header">
  2521. </header>
  2522.  
  2523. <header id="header"> <!-----------HEADER---------->
  2524. <div id="header-title-cont">
  2525.     <span class="header-title">{text:header title}</span>
  2526.     <span class="header-subtitle">{text:header subtitle}</span>
  2527. </div>
  2528.     <img src="{image:header}" alt="header">
  2529. </header> <!-----------RESPONSIVE HEADER----------->
  2530.  
  2531. <section class="wrap"> <!-----------POST CONTAINER----------->
  2532.  
  2533. <aside id="sidebar-container"> <!-----------SIDEBAR CONTAINER----------->
  2534.  
  2535. <aside class="sidebar"> <!-----------SIDEBAR | ABOUT----------->
  2536.     <div class="sidebar-content">
  2537.         {block:ifsidebarimage}
  2538.         <div class="sidebar-image"> <!-----------SIDEBAR IMAGE----------->
  2539.             <img src="{image:sidebar}" alt="sidebar-image">
  2540.         </div> <!-----------SIDEBAR IMAGE----------->
  2541.         {/block:ifsidebarimage}
  2542.     <section class="sidebar-header">
  2543.         <span class="sidebar-name">About</span>
  2544.     </section>
  2545.     <div class="description">{Description}</div> <!-----------SIDEBAR DESCRIPTION----------->
  2546.     <div class="nav-bar">
  2547.         <nav class="social-links"> <!-----------TUMBLR LINKS----------->
  2548.             <a href="{text:social media URL 2}" title="{text:social media name 2}"><i class="ph-twitter-logo"></i></a>
  2549.             <a href="{text:social media URL 1}" title="{text:social media name 1}"><i class="ph-instagram-logo"></i></a>
  2550.             <a href="{text:social media URL 3}" title="{text:social media name 3}"><i class="ph-youtube-logo"></i></a>
  2551.             <a href="{text:social media URL 4}" title="{text:social media name 4}"><i class="ph-tiktok-logo"></i></a>
  2552.             </nav> <!-----------TUMBLR LINKS----------->
  2553.     </div>
  2554.     </div>
  2555. </aside> <!-----------SIDEBAR | ABOUT----------->
  2556.  
  2557. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | NAVIGATION----------->
  2558.     <div class="sidebar-content">
  2559.  <section class="sidebar-header">
  2560.         <span class="sidebar-name">Navigation</span>
  2561.     </section>
  2562.    
  2563.     <nav class="morelinks"> <!-----------NAVIGATION LINKS----------->
  2564.     {block:ifLink1}<a href="{text:Custom Link1 URL}"><i class="ph-link"></i>{text:Custom Link1 Name}</a>{/block:ifLink1}
  2565.     {block:ifLink2}<a href="{text:Custom Link2 URL}"><i class="ph-link"></i>{text:Custom Link2 Name}</a>{/block:ifLink2}
  2566.     {block:ifLink3}<a href="{text:Custom Link3 URL}"><i class="ph-link"></i>{text:Custom Link3 Name}</a>{/block:ifLink3}
  2567.     {block:ifLink4}<a href="{text:Custom Link4 URL}"><i class="ph-link"></i>{text:Custom Link4 Name}</a>{/block:ifLink4}
  2568.     {block:ifLink5}<a href="{text:Custom Link5 URL}"><i class="ph-link"></i>{text:Custom Link5 Name}</a>{/block:ifLink5}
  2569.     {block:ifLink6}<a href="{text:Custom Link6 URL}"><i class="ph-link"></i>{text:Custom Link6 Name}</a>{/block:ifLink6}
  2570.     </nav> <!-----------NAVIGATION LINKS----------->
  2571.     </div>
  2572. </aside> <!-----------SIDEBAR | NAVIGATION----------->
  2573.  
  2574. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | EVENTS----------->
  2575.     <div class="sidebar-content">
  2576.  <section class="sidebar-header">
  2577.         <span class="sidebar-name">Events</span>
  2578.     </section>
  2579.        
  2580.         <section class="events"> <!-----------EVENTS ONE----------->
  2581.             <div class="event-date">
  2582.                 <span class="event-month">{text:event month one}</span>
  2583.                 <span class="event-day">{text:event day one}</span>
  2584.             </div>
  2585.             <div class="events-content">
  2586.                 <span class="events-title">{text:event title one}</span>
  2587.                 <span class="events-subtitle">{text:event description one}</span>
  2588.             </div>
  2589.         </section> <!-----------EVENTS ONE----------->
  2590.        
  2591.         <section class="events"> <!-----------EVENTS TWO----------->
  2592.             <div class="event-date">
  2593.                 <span class="event-month">{text:event month two}</span>
  2594.                 <span class="event-day">{text:event day two}</span>
  2595.             </div>
  2596.             <div class="events-content">
  2597.                 <span class="events-title">{text:event title two}</span>
  2598.                 <span class="events-subtitle">{text:event description two}</span>
  2599.             </div>
  2600.         </section> <!-----------EVENTS TWO----------->
  2601.        
  2602.         <section class="events"> <!-----------EVENTS THREE----------->
  2603.             <div class="event-date">
  2604.                 <span class="event-month">{text:event month three}</span>
  2605.                 <span class="event-day">{text:event day three}</span>
  2606.             </div>
  2607.             <div class="events-content">
  2608.                 <span class="events-title">{text:event title three}</span>
  2609.                 <span class="events-subtitle">{text:event description three}</span>
  2610.             </div>
  2611.         </section> <!-----------EVENTS THREE----------->
  2612.        
  2613.         <section class="events"> <!-----------EVENTS THREE----------->
  2614.             <div class="event-date">
  2615.                 <span class="event-month">{text:event month four}</span>
  2616.                 <span class="event-day">{text:event day four}</span>
  2617.             </div>
  2618.             <div class="events-content">
  2619.                 <span class="events-title">{text:event title four}</span>
  2620.                 <span class="events-subtitle">{text:event description four}</span>
  2621.             </div>
  2622.         </section> <!-----------EVENTS THREE----------->
  2623.     </div>
  2624. </aside> <!-----------SIDEBAR | EVENTS----------->
  2625.  
  2626. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | PROJECTS----------->
  2627.     <div class="sidebar-content">
  2628.    
  2629.     <!-----------PROJECTS CONTAINER START----------->
  2630.    
  2631.  <section class="sidebar-header">
  2632.         <span class="sidebar-name">Projects</span>
  2633.     </section>
  2634.    
  2635.     <!----------- PROJECTS TEMPLATE START
  2636.    
  2637.        <div class="project-cont">
  2638.            <img src="">
  2639.            <h2>Project title</h2>
  2640.            <p><b>Description:</b> Short description here</p>
  2641.            <p><b>Date:</b> 0.00.0000</p>
  2642.            <p><b>Status:</b> not started / in progress / complete / hiatus</p>
  2643.            <div class="project-links">
  2644.            <a href="/">link here</a> <a href="/">link here</a> <a href="/">link here</a>
  2645.            </div>
  2646.        </div>
  2647.        
  2648.       PROJECTS TEMPLATE END ----------->
  2649.        
  2650.         <div class="project-cont">
  2651.             <img src="https://static.tumblr.com/uh2chis/h0srgbkcj/anya.forger.full-2.png">
  2652.             <h2>Project title</h2>
  2653.             <p><b>Description:</b> Short description here</p>
  2654.             <p><b>Date:</b> 0.00.0000</p>
  2655.             <p><b>Status:</b> not started / in progress / complete / hiatus</p>
  2656.             <div class="project-links">
  2657.             <a href="/">link here</a> <a href="/">link here</a> <a href="/">link here</a>
  2658.             </div>
  2659.         </div>
  2660.        
  2661.         <div class="project-cont">
  2662.             <img src="https://static.tumblr.com/uh2chis/h0srgbkcj/anya.forger.full-2.png">
  2663.             <h2>Project title</h2>
  2664.             <p><b>Description:</b> Short description here</p>
  2665.             <p><b>Date:</b> 0.00.0000</p>
  2666.             <p><b>Status:</b> not started / in progress / complete / hiatus</p>
  2667.             <div class="project-links">
  2668.             <a href="/">link here</a> <a href="/">link here</a> <a href="/">link here</a>
  2669.             </div>
  2670.         </div>
  2671.  
  2672.  <!-----------PROJECTS CONTAINER END----------->      
  2673.     </div>
  2674. </aside> <!-----------SIDEBAR | PROJECTS----------->
  2675.  
  2676. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | MEMBERS----------->
  2677.     <div class="sidebar-content">
  2678.  <section class="sidebar-header">
  2679.         <span class="sidebar-name">Members</span>
  2680.     </section>
  2681.    
  2682.     <div class="member-section">
  2683.         <div class="member-image">
  2684.             <img src="https://static.tumblr.com/uh2chis/AnOrgbkzq/member-1.png">
  2685.         </div>
  2686.         <div class="member-content">
  2687.             <span class="member-title"><a href="/">Member Name</a></span>
  2688.             <span class="member-subtitle">Member description</span>
  2689.         </div>
  2690.     </div>
  2691.    
  2692.       <div class="member-section">
  2693.         <div class="member-image">
  2694.             <img src="https://static.tumblr.com/uh2chis/mMvrgbkzw/member-2.png">
  2695.         </div>
  2696.         <div class="member-content">
  2697.             <span class="member-title"><a href="/">Member Name</a></span>
  2698.             <span class="member-subtitle">Member description</span>
  2699.         </div>
  2700.     </div>
  2701.    
  2702.       <div class="member-section">
  2703.         <div class="member-image">
  2704.             <img src="https://static.tumblr.com/uh2chis/kX0rgbl01/member-3.png">
  2705.         </div>
  2706.         <div class="member-content">
  2707.             <span class="member-title"><a href="/">Member Name</a></span>
  2708.             <span class="member-subtitle">Member description</span>
  2709.         </div>
  2710.     </div>
  2711.  
  2712.  
  2713.     </div>
  2714. </aside> <!-----------SIDEBAR | MEMBERS----------->
  2715.  
  2716. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | AFFILIATES----------->
  2717.     <div class="sidebar-content">
  2718.  <section class="sidebar-header">
  2719.         <span class="sidebar-name">Affiliates</span>
  2720.     </section>
  2721.  
  2722.     <div class="affiliates">
  2723.        
  2724. <!-----------HERE IS WHERE YOU WILL BE ABLE TO EDIT YOUR AFFILIATES SECTION. iF YOU WOULD LIKE TO ADD A NEW AFFILIATES SECTION, PLEASE FEEL FREE TO COPY THE CODE BELOW AND PASTE IT BELOW. PLEASE MAKE SURE YOU PASTE IT AFTER THE FIRST ACTIVE AFFILIATES CODE TO PREVENT ANY DESIGN FLAWS. THIS WILL BE EXPLAINED FURTHER IN THE CUSTOMIZATION GUIDE----------->
  2725.        
  2726.     <!--
  2727.        
  2728. <a href="/" title="blog title"><img src=""></a>
  2729.        
  2730.    -->
  2731.                    
  2732. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2733. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2734. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2735. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2736. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2737. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2738. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2739. <a href="/" title="blog title"><img src="https://static.tumblr.com/uh2chis/oZqrgbl39/affiliates.png"></a>
  2740.            
  2741.     </div>
  2742.  
  2743.     </div>
  2744. </aside> <!-----------SIDEBAR | AFFILIATES----------->
  2745.  
  2746. <aside class="sidebar" style="margin-top:50px"> <!-----------SIDEBAR | SITE INFO----------->
  2747.     <div class="sidebar-content">
  2748.  <section class="sidebar-header">
  2749.         <span class="sidebar-name">Site Info</span>
  2750.     </section>
  2751.     <div class="blog-stats">
  2752.         <p><b>Established</b> {text:established}</p>
  2753.         <p><b>About</b> {text:about}</p>
  2754.         <p><b>Online</b> {text:online counter}</p>
  2755.         <p><b>Hits</b> {text:hit counter}</p>
  2756.         <p><b>Theme</b> Sheathemes</p>
  2757.         <p><b>Blog status</b> {text:blog status}</p>
  2758.         <p><b>Disclaimer</b> {text:disclaimer}</p>
  2759.     </div>
  2760.     </div>
  2761. </aside> <!-----------SIDEBAR | SITE INFO----------->
  2762.  
  2763. </aside> <!-----------SIDEBAR CONTAINER----------->
  2764.  
  2765. <section id="content"> <!-----------POST WRAPPER----------->
  2766.  
  2767. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2768.  
  2769. <article class="posts" id="{PostID}" post-type="{PostType}"> <!-----------POSTS----------->
  2770.  
  2771. {block:ContentSource}
  2772. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  2773. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  2774. {/block:SourceLogo}
  2775. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2776. {/block:ContentSource}
  2777.  
  2778. <!-- {block:NoRebloggedFrom}
  2779. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2780. {/block:NoRebloggedFrom} -->
  2781.  
  2782. <!-----------POST INFO/PERMALINKS----------->
  2783. {block:IndexPage}
  2784.  
  2785. <div class="top-info">
  2786. {block:Date}
  2787.  
  2788. <section class="permalink-cont">
  2789.  
  2790.     <span class="top-info-image">
  2791.         {block:RebloggedFrom}
  2792.         <img src="{ReblogParentPortraitURL-96}">
  2793.         {/block:RebloggedFrom}
  2794.         {block:NotReblog}
  2795.         <img src="{PortraitURL-96}">
  2796.         {/block:NotReblog}
  2797.     </span>
  2798.  
  2799.     <div class="time">
  2800.         <span class="reblog-cont">
  2801. {block:RebloggedFrom}reblogged from<a href="{ReblogParentURL}"> {ReblogParentName}</a>{/block:RebloggedFrom}
  2802. {block:NotReblog}<a href="{Permalink}" title="{Title}"> {Name}</a>{/block:NotReblog}</span>
  2803.  
  2804.         <span class="reblog-info">
  2805.             posted <a class="timestamp" href="{Permalink}">{Timestamp}</a> {block:NoteCount}with  <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  2806.         </span>
  2807.     </div>
  2808.  
  2809. </section>
  2810. {/block:Date}
  2811. </div>
  2812.  
  2813. {block:PinnedPostLabel} <!-----------PINNED POST----------->
  2814.     <section id="pinned">
  2815.         <a href="{Permalink}" title="{PinnedPostLabel}"><i class="ph-push-pin"></i></a>
  2816.     </section>
  2817. {/block:PinnedPostLabel} <!-----------PINNED POST----------->
  2818. {/block:IndexPage}
  2819. <!-----------POST INFO/PERMALINKS----------->
  2820.  
  2821. {block:Text}
  2822. <div class="text">
  2823. {block:IndexPage}
  2824. <a class="read-more" href="{Permalink}">keep reading</a>
  2825. {/block:IndexPage}
  2826. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2827. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2828.  
  2829. {block:Reblogs}
  2830. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  2831. <div class="source-head">
  2832. <div class="reblog-header">
  2833.  
  2834. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2835.  
  2836. {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}
  2837.  
  2838. {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>
  2839. {block:IndexPage}
  2840. <div class="post-cover"></div>
  2841. {/block:IndexPage}
  2842. </div>
  2843. {/block:Text}
  2844.  
  2845. {block:Photo}
  2846. <div class="photo">
  2847. {LinkOpenTag}
  2848. <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">
  2849. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  2850. </a>
  2851. {LinkCloseTag}
  2852. </div>
  2853. {block:IfShowCaptions}
  2854. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2855.  
  2856. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2857.  
  2858. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2859.  
  2860. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2861.  
  2862. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2863.  
  2864. {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}
  2865. {/block:IfShowCaptions}
  2866.  
  2867. {block:IfnotShowCaptions}
  2868. {block:PermalinkPage}
  2869. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2870.  
  2871. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2872.  
  2873. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2874.  
  2875. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2876.  
  2877. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2878.  
  2879. {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}
  2880. {/block:PermalinkPage}
  2881. {/block:IfnotShowCaptions}
  2882. {/block:Photo}
  2883.  
  2884. {block:Photoset}
  2885. <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>
  2886. {block:IfShowCaptions}
  2887. {block:Caption}
  2888. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2889. <div class="reblog-list">
  2890.  
  2891. {block:Reblogs}
  2892. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2893. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2894.  
  2895. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2896.  
  2897. {block:IsActive}
  2898. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2899.  
  2900. {block:IsDeactivated}
  2901. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2902. </div>
  2903. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2904. {/block:RebloggedFrom} </div>
  2905. {/block:Caption}
  2906. {/block:IfShowCaptions}
  2907.  
  2908. {block:IfnotShowCaptions}
  2909. {block:PermalinkPage}
  2910. {block:Caption}
  2911. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2912. <div class="reblog-list">
  2913.  
  2914. {block:Reblogs}
  2915. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2916. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2917.  
  2918. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2919.  
  2920. {block:IsActive}
  2921. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2922.  
  2923. {block:IsDeactivated}
  2924. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2925. </div>
  2926. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2927. {/block:RebloggedFrom} </div>
  2928. {/block:Caption}
  2929. {/block:PermalinkPage}
  2930. {/block:IfnotShowCaptions}
  2931. {/block:Photoset}
  2932.  
  2933. {block:Quote}
  2934. <div class="qt">
  2935. <div class="quote-box"><i class="ph-quotes"></i></div>
  2936. <div class="quote">
  2937. {Quote}
  2938. </div>
  2939. </div>
  2940. {block:Source}<div class="qtsource"><br><center>{Source}</center></div>{/block:Source}
  2941. {/block:Quote}
  2942.  
  2943. {block:Link}
  2944. {block:Thumbnail}
  2945. <div class="thumbnail"><img src="{Thumbnail-HighRes}" alt="{Name}"></div>
  2946. {/block:Thumbnail}
  2947.  
  2948. <div class="link"><a href="{URL}">{Name} <i class="ph-caret-double-right" style="vertical-align: middle;"></i></a> </div>
  2949. {block:Description}
  2950. <div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2951.  
  2952. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2953.  
  2954. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2955.  
  2956. {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}
  2957.  
  2958. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  2959. {/block:Description}
  2960. {/block:Link}
  2961.  
  2962. {block:Audio}
  2963. <div class="audiop">
  2964. <div class="audiowrapper">
  2965. {block:AudioPlayer}
  2966. {AudioPlayer}
  2967. <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;">
  2968.    <div class="audio_player">
  2969.     <span class="custom_audio_buttons"></span>
  2970. </div>
  2971. </div>
  2972. <div class="music_menu">
  2973. {block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}
  2974. {block:Artist}<p><span class="info">{Artist}</span></p>{/block:Artist}
  2975.  
  2976. <div class="seek-cont">
  2977.     <span class="custom_audio_current_time"></span>
  2978.     <div class="custom_audio_seekbar"></div>
  2979.     <span class="custom_audio_time_left"></span>
  2980.     </div>
  2981. </div>
  2982. {/block:AudioPlayer}
  2983. </div>
  2984. </div>
  2985.  
  2986. {block:IfShowCaptions}
  2987. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2988.  
  2989. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2990.  
  2991. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2992.  
  2993. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2994.  
  2995. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2996.  
  2997. {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}
  2998. {/block:IfShowCaptions}
  2999.  
  3000. {block:IfnotShowCaptions}
  3001. {block:PermalinkPage}
  3002. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  3003.  
  3004. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  3005.  
  3006. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  3007.  
  3008. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  3009.  
  3010. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  3011.  
  3012. {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}
  3013. {/block:PermalinkPage}
  3014. {/block:IfnotShowCaptions}
  3015. {/block:Audio}
  3016.  
  3017. {block:Video}
  3018. <div class="video">{Video-500}</div>
  3019. {block:IfShowCaptions}
  3020. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  3021.  
  3022. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  3023.  
  3024. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  3025.  
  3026. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  3027.  
  3028. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  3029.  
  3030. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  3031.  
  3032. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  3033. {/block:IfShowCaptions}
  3034.  
  3035. {block:IfnotShowCaptions}
  3036. {block:PermalinkPage}
  3037. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  3038.  
  3039. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  3040.  
  3041. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  3042.  
  3043. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  3044.  
  3045. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  3046.  
  3047. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  3048.  
  3049. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  3050. {/block:PermalinkPage}
  3051. {/block:IfnotShowCaptions}
  3052. {/block:Video}
  3053.  
  3054. {block:Chat}
  3055. {block:Title}<div class="title">{Title}</div>{/block:Title}
  3056. <div class="chatp">
  3057. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  3058. {Line}</div>{/block:Lines}</div>
  3059. </div>
  3060. {/block:Chat}
  3061.  
  3062. {block:Answer}
  3063. <div id="askcont">
  3064. <div class="asker-cont">
  3065. <div id="asker-image"><img src="{AskerPortraitURL-128}"></div>
  3066. <div id="asker">
  3067. <div class="asker-link">{Asker} asked</div>
  3068. <div class="question">{Question}</div>
  3069. </div>
  3070. </div>
  3071. </div>
  3072.  
  3073. {block:Answerer}
  3074. <div id="replycont">
  3075. <div class="replier-cont">
  3076. <div id="replier-image"><img src="{AnswererPortraitURL-128}"></div>
  3077. <div id="replier">
  3078. <div class="replier-link">{Answerer} replied</div>
  3079. <div class="answer">{Answer}</div>
  3080. </div>
  3081. </div>
  3082. </div>
  3083. {/block:Answerer}
  3084.  
  3085. {block:NotReblog}  <div class="caption"><figcaption> {Answer} </figcaption> </div> {/block:NotReblog}
  3086. {block:RebloggedFrom} <div class="reblog-list">
  3087. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  3088.  
  3089. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  3090.  
  3091. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  3092.  
  3093. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  3094.  
  3095. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div>
  3096.  
  3097. <div class="reblog-content">{Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom}
  3098. {/block:Answer}
  3099.  
  3100. {block:IndexPage}
  3101.  {block:HasTags} <!-----------POST TAGS----------->
  3102. <div class="post_tags">
  3103. {block:Tags}
  3104. <a href="{TagURL}"><i class="ph-hash-straight"></i>{Tag}</a>{/block:Tags}</div>
  3105. {/block:HasTags} <!-----------POST TAGS----------->
  3106.  
  3107. <div class="post-bottom">
  3108.     <div class="likereblog">
  3109.     <div class="controls">
  3110.     <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class="ph-arrows-clockwise"></i></a>
  3111.     <a title="like this post" class="like">{LikeButton size="15"}
  3112.     <i class="ph-heart-straight"></i></a>
  3113.     <div class="tag-button"><a href="javascript:;" title="click for tags"><i class="ph-hash"></i></a></div>
  3114. </div>
  3115. </div>
  3116. </div>
  3117. {/block:IndexPage}
  3118.  
  3119. </article> <!-----------POSTS----------->
  3120.  
  3121. <!-----------PERMALINK PAGE----------->
  3122. {block:PermalinkPage}
  3123. {block:Date}
  3124. <div id="perma">
  3125. <span>
  3126. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm} {DayOfWeek}
  3127. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  3128. </span>
  3129.  
  3130. {block:RebloggedFrom}
  3131. <div class="rb">
  3132. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>
  3133. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>
  3134. </div>
  3135. {/block:RebloggedFrom}
  3136.  
  3137. </div>
  3138.  
  3139. {block:HasTags}
  3140. <div id="permatg">
  3141. {block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  3142. </div>
  3143. {/block:HasTags}
  3144.  
  3145. {block:PostNotes}
  3146. <div id="notecontainer">{PostNotes}</div>
  3147. {/block:PostNotes}
  3148.  
  3149. {block:PermalinkPagination}
  3150. <div id="permpage">
  3151.     {block:NextPost}
  3152.         <a href="{NextPost}" title="Previous Post"><i class="ph-arrow-left"></i></a>
  3153.     {/block:NextPost}
  3154.    
  3155.     {block:PreviousPost}
  3156.         <a href="{PreviousPost}" title="Next Post"><i class="ph-arrow-right"></i></a>
  3157.     {/block:PreviousPost}
  3158. </div>
  3159. {/block:PermalinkPagination}
  3160. {/block:Date}
  3161. {/block:PermalinkPage}
  3162. <!-----------PERMALINK PAGE----------->
  3163. {/block:Posts}
  3164.  
  3165. {block:IndexPage}
  3166. <footer id="pagination"> <!-----------PAGINATION----------->
  3167. {block:Pagination}
  3168. {block:PreviousPage}
  3169. <a href="{PreviousPage}">Prev</a>
  3170. {/block:PreviousPage}
  3171. {block:JumpPagination length="3"}
  3172. {block:CurrentPage}
  3173. <span class="current_page">{CurrentPage}</a></span>
  3174. {/block:CurrentPage}
  3175. {block:JumpPage}
  3176. <a class="jump_page" href="{URL}">{PageNumber}</a>
  3177. {/block:JumpPage}
  3178. {/block:JumpPagination}
  3179. {block:NextPage}
  3180. <a href="{NextPage}">Next</a>
  3181. {/block:NextPage}
  3182. {/block:Pagination}
  3183. </footer> <!-----------PAGINATION----------->
  3184. {/block:IndexPage}
  3185.  
  3186. </section><!------------------POSTS WRAPPER----------------------->
  3187.  
  3188. <footer id="footer">
  3189.     <p><i class="ri-copyright-line"></i> {CopyrightYears} <a href="/">{Name}</a> - All rights reserved - Theme by <a href="https://sheathemes.tumblr.com">Sheathemes</a> - Powered by <a href="https://tumblr.com">Tumblr</a></p>
  3190. </footer>
  3191.  
  3192. </section>  <!--------- POSTS CONTAINER ----------->
  3193.  
  3194. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  3195.  
  3196. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3197.  
  3198. <!-----------Pixel Union photosets script----------->
  3199. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  3200. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  3201. <!-----------Pixel Union photosets script----------->
  3202.  
  3203. <!---------- Responsive tumblr videos and external iframes script ---------->
  3204. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  3205. <!---------- Responsive tumblr videos and external iframes script ---------->
  3206.  
  3207. <!--Time ago script by bychloethemes @ tumblr-->
  3208. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  3209. <!--Time ago script by bychloethemes @ tumblr-->
  3210.  
  3211. <!-----------Tooltips Script----------->
  3212. <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" />
  3213. <!-----------Tooltips Script----------->
  3214.  
  3215. <!-----------customaudio.js script by annasthms @ tumblr----------->
  3216. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  3217. <!-----------customaudio.js script by annasthms @ tumblr----------->
  3218.  
  3219. <script src="https://cdn.jsdelivr.net/gh/leafo/sticky-kit@v1.1.2/jquery.sticky-kit.min.js"></script>
  3220.  
  3221. <script src="https://unpkg.com/feather-icons"></script>
  3222.  
  3223. <script>
  3224. $(document).ready(function(){
  3225.     //pxu photosets by @ shythemes & bychloethemes
  3226.    $('.photo-slideshow').pxuPhotoset({
  3227.        lightbox: true,
  3228.        rounded: false,
  3229.        gutter: '{select:photoset gutter}px',
  3230.        photoset: '.photo-slideshow',
  3231.        photoWrap: '.photo-data',
  3232.        photo: '.pxu-photo'
  3233.    });
  3234.     $('img[src*="media.tumblr.com"]').each(function() {
  3235.         var newsrc = $(this).attr('src').replace('gifv','gif');
  3236.     $(this).attr('src', newsrc);
  3237.     });
  3238.     //.gifv to gif conversion script
  3239.     $('a[href*="media.tumblr.com"]').each(function() {
  3240.         var newhref = $(this).attr('href').replace('gifv','gif');
  3241.      $(this).attr('href', newhref);
  3242.     });
  3243.     $('.timestamp').timeAgo({
  3244.         time: "short",
  3245.         spaces: true,
  3246.         words: false,
  3247.         suffix: "ago",  
  3248.     });
  3249.     // tippy tooltips script
  3250.     tippy('a[title]', {
  3251.         theme: 'custom',
  3252.         arrow: tippy.roundArrow,
  3253.         zIndex: 9999999999,
  3254.         placement: 'auto',
  3255.         maxWidth: 300,
  3256.         content(reference) {
  3257.             const title = reference.getAttribute('title');
  3258.             reference.removeAttribute('title'); return title; },
  3259.     });
  3260.     //responsive tumblr videos and external iframes by @ nouvae
  3261.     function flexFrame() {
  3262.     $(".caption").each(function() {
  3263.         $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  3264.             flexibleFrames($(".capframe"));
  3265.         });
  3266.             flexibleFrames($(".video"));
  3267.     }
  3268.     $(document).ready(flexFrame);
  3269.     //customaudio.js script by annasthms @ tumblr
  3270.     customAudio({
  3271.     post: ".posts",
  3272.     wrappers: {
  3273.         audio: ".custom_audio_wrapper",
  3274.         buttons: ".custom_audio_buttons",
  3275.         duration: ".custom_audio_duration",
  3276.         timeCurrent: ".custom_audio_current_time",
  3277.         timeLeft: ".custom_audio_time_left",
  3278.         seekbar: ".custom_audio_seekbar"
  3279.     },
  3280.         default: false,
  3281.         pauseAll: true,
  3282.         playButton: "<i data-feather='play'></i>",
  3283.         pauseButton: "<i data-feather='pause'></i>",
  3284.         errorIcon: "<i data-feather='x'></i>",
  3285.         hideInfoIfError: true,
  3286.         callAfterLoad: () => {
  3287.             feather.replace();
  3288.         }
  3289.     });
  3290.     $("#sidebar-container").stick_in_parent();
  3291. });
  3292. </script>
  3293.  
  3294. <script>
  3295. // toggle dark/light
  3296. {block:ifdarkmode}
  3297. const toggle = document.getElementById("theme-toggle");
  3298.  
  3299. toggle.onclick = function () {
  3300.     document.documentElement.classList.add("theme-transition");
  3301.  
  3302.     let currentTheme = document.documentElement.getAttribute("data-theme");
  3303.     let targetTheme = "light";
  3304.  
  3305.     if (currentTheme === "light") {
  3306.         targetTheme = "dark";
  3307.     }
  3308.  
  3309.     window.setTimeout(function () {
  3310.         document.documentElement.classList.remove("theme-transition");
  3311.     }, 50);
  3312.  
  3313.     document.documentElement.setAttribute("data-theme", targetTheme);
  3314.     localStorage.setItem("theme", targetTheme);
  3315.     };
  3316. {/block:ifdarkmode}
  3317. </script>
  3318.  
  3319. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  3320.  
  3321. </body>
  3322. </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!