API tools faq
paste
themesbydoori

Metropolis

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