API tools faq
paste
themesbydoori

Infamy

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