API tools faq
paste
saestrah

sensitivity

saestrah
Oct 19th, 2020 (edited)
3,894
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.30 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. sensitivity · by saestrah · october 2020
  4.  
  5. · base code by sorrism
  6. · scroll to top by paul underwood
  7. · smoothscroll by balazs galambosi
  8. · flexible frames by nouvae
  9. · npf images readjustment by glenthemes
  10. · search, audio player, and notecount scripts by shythemes
  11. · photosets by annasthms and eggdesign
  12. · nightmode by eggdesign
  13. · icons by line-awesome
  14. · tooltips by malihu
  15.  
  16. || terms of use:
  17.  
  18. · don't remove credit
  19. · don't repost or redistribute
  20. · don't take parts of the code and use as your own
  21.  
  22. || notes:
  23.  
  24. · for customisation hints search for "a note from saestrah"
  25.  
  26. ---->
  27.  
  28. <!DOCTYPE html>
  29. <head>
  30.  
  31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32.  
  33. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  34.  
  35. <link rel="shortcut icon" href="{favicon}">
  36.  
  37. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  38. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  39.  
  40. <!---- defaults ---->
  41.  
  42. <meta name="image:Sidebar" content=""/>
  43.  
  44. <meta name="color:Background" content="#ffffff"/>
  45. <meta name="color:Night Background" content="#292f36"/>
  46. <meta name="color:Base" content="#e7e1d3"/>
  47. <meta name="color:Night Base" content="#21262c"/>
  48. <meta name="color:Sidebar" content="#cc3434"/>
  49. <meta name="color:Night Sidebar" content="#21262c"/>
  50. <meta name="color:Text" content="#606060"/>
  51. <meta name="color:Night Text" content="#cccccc"/>
  52. <meta name="color:Sidebar Text" content="#eeeeee"/>
  53. <meta name="color:Night Sidebar Text" content="#ffffff"/>
  54. <meta name="color:Link" content="#000000"/>
  55. <meta name="color:Night Link" content="#ffffff"/>
  56. <meta name="color:Accent" content="#fd9473"/>
  57. <meta name="color:Night Accent" content="#8ac39b"/>
  58. <meta name="color:Title"content="#ffffff"/>
  59. <meta name="color:Night Title" content="#ffffff"/>
  60. <meta name="color:Subtitle"content="#000000"/>
  61. <meta name="color:Night Subtitle"content="#ffffff"/>
  62. <meta name="color:Borders" content="#c6beab"/>
  63. <meta name="color:Night Borders" content="#eeeeee"/>
  64. <meta name="color:Tooltip Text" content="#ffffff"/>
  65. <meta name="color:Night Tooltip Text" content="#000000"/>
  66. <meta name="color:Scrollbar" content="#cccccc"/>
  67.  
  68. <meta name="select:Title Font" content="Big Shoulders Inline Display"/>
  69. <meta name="select:Title Font" content="Bungee"/>
  70. <meta name="select:Title Font" content="Bungee Shade"/>
  71. <meta name="select:Title Font" content="Codystar"/>
  72. <meta name="select:Title Font" content="EB Garamond"/>
  73. <meta name="select:Title Font" content="Ewert"/>
  74. <meta name="select:Title Font" content="Fredericka the Great"/>
  75. <meta name="select:Title Font" content="Grenze Gotisch"/>
  76. <meta name="select:Title Font" content="Inria Sans"/>
  77. <meta name="select:Title Font" content="Inria Serif"/>
  78. <meta name="select:Title Font" content="Karla"/>
  79. <meta name="select:Title Font" content="Kumar One Outline"/>
  80. <meta name="select:Title Font" content="La Belle Aurore"/>
  81. <meta name="select:Title Font" content="Lato"/>
  82. <meta name="select:Title Font" content="Lora"/>
  83. <meta name="select:Title Font" content="Modak"/>
  84. <meta name="select:Title Font" content="Monoton"/>
  85. <meta name="select:Title Font" content="Montserrat Subrayada"/>
  86. <meta name="select:Title Font" content="Nerko One"/>
  87. <meta name="select:Title Font" content="Playfair Display"/>
  88. <meta name="select:Title Font" content="Roboto Condensed"/>
  89. <meta name="select:Title Font" content="Roboto Slab"/>
  90. <meta name="select:Title Font" content="Sarina"/>
  91. <meta name="select:Title Font" content="Staatliches"/>
  92. <meta name="select:Title Font" content="UnifrakturCook"/>
  93.  
  94. <meta name="select:Body Font" content="Big Shoulders Inline Display"/>
  95. <meta name="select:Body Font" content="Bungee"/>
  96. <meta name="select:Body Font" content="Bungee Shade"/>
  97. <meta name="select:Body Font" content="Codystar"/>
  98. <meta name="select:Body Font" content="EB Garamond"/>
  99. <meta name="select:Body Font" content="Ewert"/>
  100. <meta name="select:Body Font" content="Fredericka the Great"/>
  101. <meta name="select:Body Font" content="Grenze Gotisch"/>
  102. <meta name="select:Body Font" content="Inria Sans"/>
  103. <meta name="select:Body Font" content="Inria Serif"/>
  104. <meta name="select:Body Font" content="Karla"/>
  105. <meta name="select:Body Font" content="Kumar One Outline"/>
  106. <meta name="select:Body Font" content="La Belle Aurore"/>
  107. <meta name="select:Body Font" content="Lato"/>
  108. <meta name="select:Body Font" content="Lora"/>
  109. <meta name="select:Body Font" content="Modak"/>
  110. <meta name="select:Body Font" content="Monoton"/>
  111. <meta name="select:Body Font" content="Montserrat Subrayada"/>
  112. <meta name="select:Body Font" content="Nerko One"/>
  113. <meta name="select:Body Font" content="Playfair Display"/>
  114. <meta name="select:Body Font" content="Roboto Condensed"/>
  115. <meta name="select:Body Font" content="Roboto Slab"/>
  116. <meta name="select:Body Font" content="Sarina"/>
  117. <meta name="select:Body Font" content="Staatliches"/>
  118. <meta name="select:Body Font" content="UnifrakturCook"/>
  119.  
  120. <meta name="if:Left Sidebar" content="1"/>
  121. <meta name="if:Search Bar" content="1"/>
  122. <meta name="if:Small Cursor" content="1"/>
  123. <meta name="if:Tags On Hover" content="1"/>
  124. <meta name="if:Uppercase Accents" content="1"/>
  125. <meta name="if:Invert Tumblr Controls" content="1"/>
  126. <meta name="if:Grayscale Image in Nightmode" content="1"/>
  127. <meta name="if:Invert Image in Nightmode" content="1"/>
  128.  
  129. <meta name="text:Body Font Size" content="12px"/>
  130. <meta name="text:Body Font Weight" content="400"/>
  131. <meta name="text:Title Font Size" content="20px"/>
  132. <meta name="text:Title Font Weight" content="400"/>
  133.  
  134. <meta name="text:Search Placeholder" content="search tags..."/>
  135. <meta name="text:Title Tooltip" content="refresh"/>
  136. <meta name="text:Enter Button Tooltip" content=""/>
  137.  
  138. <meta name="text:Home Title" content="home"/>
  139. <meta name="text:Ask Title" content="ask"/>
  140. <meta name="text:Archive Title" content="archive"/>
  141. <meta name="text:Random Title" content="shuffle"/>
  142.  
  143. <meta name="text:Link 1 Title" content=""/>
  144. <meta name="text:Link 1 URL" content=""/>
  145.  
  146. <meta name="text:Link 2 Title" content=""/>
  147. <meta name="text:Link 2 URL" content=""/>
  148.  
  149. <meta name="text:Link 3 Title" content=""/>
  150. <meta name="text:Link 3 URL" content=""/>
  151.  
  152. <!---- scripts ---->
  153.  
  154. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  155. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  156. <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
  157. <script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  158. <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  159. <script src="//static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  160. <script src="//static.tumblr.com/0podkko/qWqq8va08/photosets.js"></script>
  161. <link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  162. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  163. <link href="//maxst.icons8.com/vue-static/landings/line-awe
  164. some/line-awesome/1.3.0/css/line-awesome.min.css" rel="stylesheet">
  165. <script src="//saestrah.github.io/portfolio/sensitivity/sensitivity.js" type="text/javascript"></script>
  166. <link rel="stylesheet" type="text/css" href="//saestrah.github.io/portfolio/sensitivity/sensitivity.css"/>
  167.  
  168. <!---- fonts ---->
  169.  
  170. <link rel="preconnect" href="https://fonts.gstatic.com">
  171. <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@100;300;400;700;900&family=Bungee&family=Bungee+Shade&family=Codystar:wght@300;400&family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Ewert&family=Fredericka+the+Great&family=Grenze+Gotisch:wght@100;300;400;700&family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Kumar+One+Outline&family=La+Belle+Aurore&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Modak&family=Monoton&family=Montserrat+Subrayada:wght@400;700&family=Nerko+One&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Sarina&family=Staatliches&family=UnifrakturCook:wght@700&display=swap" rel="stylesheet">
  172.  
  173. <style type="text/css">
  174.  
  175. /* root variables */
  176.  
  177. :root {
  178. --background:{color:Background};
  179. --nightbackground:{color:Night Background};
  180. --rgbbackground:{RGBcolor:Background};
  181. --rgbnightbackground:{RGBcolor:Night Background};
  182. --sidebar:{color:Sidebar};
  183. --nightsidebar:{color:Night Sidebar};
  184. --base:{color:Base};
  185. --nightbase:{color:Night Base};
  186. --text:{color:Text};
  187. --nighttext:{color:Night Text};
  188. --sidebartext:{color:Sidebar Text};
  189. --nightsidebartext:{color:Night Sidebar Text};
  190. --links:{color:Link};
  191. --nightlinks:{color:Night Link};
  192. --accent:{color:Accent};
  193. --nightaccent:{color:Night Accent};
  194. --title:{color:Title};
  195. --nighttitle:{color:Night Title};
  196. --subtitle:{color:Subtitle};
  197. --nightsubtitle:{color:Night Subtitle};
  198. --borders:{color:Borders};
  199. --nightborders:{color:Night Borders};
  200. --tooltiptext:{color:Tooltip Text};
  201. --nighttooltiptext:{color:Night Tooltip Text};
  202. --scrollbar:{color:Scrollbar};
  203.  
  204. --bodyfont:{select:Body Font};
  205. --bodyfontsize:{text:Body Font Size};
  206. --bodyfontweight:{text:Body Font Weight};
  207. --titlefont:{select:Title Font};
  208. --titlefontsize:{text:Title Font Size};
  209. --titlefontweight:{text:Title Font Weight};
  210. }
  211.  
  212. /* css */
  213.  
  214. {block:ifLeftSidebar}
  215. sidebar { left:0%; }
  216. imgside { margin:0 0 0 49%; }
  217. .enter { left:74%; }
  218. .bfontbtn, .sfontbtn { left:2%; }
  219. .nightbtn, .daybtn { left:7.5%; }
  220. .home { left:21%; right:auto; }
  221. .ask { left:25%; right:auto; }
  222. .archive { left:29%; right:auto; }
  223. .random { left:33%; right:auto; }
  224. .link1 { left:37%; right:auto; }
  225. .link2 { left:41%; right:auto; }
  226. .link3 { left:45%; right:auto; }
  227. .cc, .top, .credit { color:var(--links); }
  228. section { margin:0 0 0 50%; }
  229.  
  230. @media only screen and (max-width:800px) {
  231. .bfontbtn, .sfontbtn { top:4%; left:auto; right:20px; }
  232. .nightbtn, .daybtn { top:4%; left:auto; right:70px; }
  233. section { margin:0 auto; }
  234. }
  235. {/block:ifLeftSidebar}
  236.  
  237. {block:ifUppercaseAccents}
  238. #s-m-t-tooltip, h1, h2, h3, h4, .updatetitle, .title, a.read_more, .label, .tags, a.more_notes_link { text-transform:uppercase; }
  239. {/block:ifUppercaseAccents}
  240.  
  241. {block:ifInvertTumblrControls}
  242. iframe.tmblr-iframe { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); }
  243. {/block:ifInvertTumblrControls}
  244.  
  245. {block:ifInvertImageinNightmode}
  246. body.night imgside img { filter:invert(100%); }
  247. {/block:ifInvertImageinNightmode}
  248.  
  249. {block:ifGrayscaleImageinNightmode}
  250. body.night imgside img { filter:grayscale(100%); }
  251. {/block:ifGrayscaleImageinNightmode}
  252.  
  253. {block:PermalinkPage}
  254. .top { opacity:0; }
  255. section { padding-bottom:50px; }
  256. .posts { margin-bottom:50px; }
  257. .tags { opacity:1; }
  258. {/block:PermalinkPage}
  259.  
  260. {block:ifTagsOnHover}
  261. .tags { opacity:0; }
  262. .posts:hover .tags {
  263. opacity:1;
  264. transition: all 0.5s ease-in-out;
  265. -webkit-transition: all 0.5s ease-in-out;
  266. -moz-transition: all 0.5s ease-in-out;
  267. -o-transition: all 0.5s ease-in-out;
  268. }
  269. {/block:ifTagsOnHover}
  270.  
  271. {block:ifSmallCursor}
  272. * { cursor:url(https://i.imgur.com/dHusUiR.png),auto }
  273. body { cursor:url(https://i.imgur.com/dHusUiR.png),auto }
  274. iframe.tmblr-iframe:hover, a, a:hover, ul.linksmenu .linksbutton, imgside img, .ph img { cursor:url(https://i.imgur.com/ZM41vky.png),progress!important; }
  275. [photoset-layout] div { cursor:url(https://i.imgur.com/ZM41vky.png),progress!important; }
  276. {/block:ifSmallCursor}
  277.  
  278. /* a note from saestrah:
  279.  
  280. to add or reduce the size of the gap between images or gifs in photosets, add the following to the css and change the pixel value to your liking:
  281.  
  282. [photoset-layout] { grid-gap:3px; }
  283.  
  284. you can move the content of your sidebar title and description by adding the following and changing the padding. the first percentage value indicates how far down the content starts
  285.  
  286. #sidebarcontent { padding:50% 25px 25px 50px; }
  287.  
  288. to add more links, please see this ask: https://saestrah.tumblr.com/post/638757757470851072/hi-i-love-your-sensitivity-theme-i-was-wondering
  289.  
  290. if you would like to have your sidebar image both invert and convert to grayscale in nightmode add the following:
  291.  
  292. body.night imgside img { filter:grayscale(100%) invert(100%); }
  293.  
  294. */
  295.  
  296. </style></head><body>
  297.  
  298. <!-------------------------------- header ---->
  299.  
  300. <header>
  301.  
  302. <a href="/" class="maintitle" {block:ifTitleTooltip}title="{text:Title Tooltip}"{/block:ifTitleTooltip}>{Title}</a>
  303.  
  304. </header>
  305.  
  306. <!---- mobile navigation ---->
  307.  
  308. <mobilenav>
  309.  
  310. <ul id="linksmenu" class="linksmenu">
  311. <li><div class="linksbutton"><span class="las la-bars"></span></div>
  312. <ul class="mobilelinksbox">
  313. <li class="mobilelinks">
  314. <li><span><a href="https://tumblr.com/follow/{Name}">follow</a></span></li>
  315. <li><span><a href="/">home</a></span></li>
  316. <li><span><a href="/ask">ask</a></span></li>
  317. <li><span><a href="/archive">archive</a></span></li>
  318. {block:ifLink1Title}<li><span><a href="{text:Link 1 URL}">{text:Link 1 Title}</a></span></li>{/block:ifLink1Title}
  319. {block:ifLink2Title}<li><span><a href="{text:Link 2 URL}">{text:Link 2 Title}</a></span></li>{/block:ifLink2Title}
  320. {block:ifLink3Title}<li><span><a href="{text:Link 3 URL}">{text:Link 3 Title}</a></span></li>{/block:ifLink3Title}
  321. </li>
  322. </ul>
  323. </li>
  324. </ul>
  325.  
  326. </mobilenav>
  327.  
  328. <!-------------------------------- sidebar ---->
  329.  
  330. <sidebar>
  331.  
  332. <div id="sidebarcontent"><a href="/" class="maintitle" {block:ifTitleTooltip}title="{text:Title Tooltip}"{/block:ifTitleTooltip}>{Title}</a><div class="description">{Description}</div>
  333. </div>
  334.  
  335. {block:ifSearchBar}<div class="search-wrapper"><form class="search" action="javascript:return false"><input type="text" class="query" placeholder="{text:Search Placeholder}"></form></div>{/block:ifSearchBar}
  336.  
  337. <!---- a note from saestrah:
  338.  
  339. to change the icons, visit https://icons8.com/line-awesome and change "las-la-[something]" to the code for the image you like. not all icons use the same format (e.g. the spotify icon is "lab-la-spotify"). to delete icon links, just delete the line of code you don't want from the html below ---->
  340.  
  341. <a class="home" id="iconlinks" href="/" title="{text:Home Title}"><span class="las la-home"></span></a>
  342.  
  343. <a class="ask" id="iconlinks" href="/ask" title="{text:Ask Title}"><span class="las la-comment-alt"></span></a>
  344.  
  345. <a class="archive" id="iconlinks" href="/archive" title="{text:Archive Title}"><span class="las la-archive"></span></a>
  346.  
  347. <a class="random" id="iconlinks" href="/random" title="{text:Random Title}"><span class="las la-map-marker-alt"></span></a>
  348.  
  349. <a class="link1" id="iconlinks" href="{text:Link 1 URL}" {block:ifLink1Title}title="{text:Link 1 Title}"{/block:ifLink1Title}><span class="las la-globe"></span></a>
  350.  
  351. <a class="link2" id="iconlinks" href="{text:Link 2 URL}" {block:ifLink2Title}title="{text:Link 2 Title}"{/block:ifLink2Title}><span class="las la-wind"></span></a>
  352.  
  353. <a class="link3" id="iconlinks" href="{text:Link 3 URL}" {block:ifLink3Title}title="{text:Link 3 Title}"{/block:ifLink3Title}><span class="las la-meteor"></span></a>
  354.  
  355. </sidebar>
  356.  
  357. <!-------------------------------- enter image ---->
  358.  
  359. {block:HomePage}
  360. {block:ifSidebarImage}
  361.  
  362. <imgside class="imgside page-{CurrentPage}">
  363.  
  364. <a href="/" {block:ifSidebarImageTooltip}title="{text:Sidebar Image Tooltip}"{/block:ifSidebarImageTooltip}><img src="{image:Sidebar}"/>
  365. <a class="enter page-{CurrentPage}" {block:ifEnterButtonTooltip}title="{text:enter button tooltip}"{/block:ifEnterButtonTooltip}><span class="las la-arrow-down"></span></a>
  366.  
  367. </imgside>
  368.  
  369. {/block:ifSidebarImage}
  370. {/block:HomePage}
  371.  
  372. <!-------------------------------- posts ---->
  373.  
  374. <section id="entries">{block:posts}
  375. <article class="posts {block:caption}captioned{/block:caption}" post-type="{PostType}">
  376.  
  377. <!---- textposts ---->
  378.  
  379. {block:Text}
  380. <div class="post text" id="{PostID}">
  381. {block:Title}<div class="title">{title}</div>{/block:Title}
  382. {block:RebloggedFrom}
  383. {block:Reblogs}
  384. {block:IsActive}
  385. <li class="comment {block:Title}ted{/block:Title}">
  386. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  387. <div class="tex">{body}</div>
  388. </li>
  389. {/block:IsActive}
  390. {block:IsDeactivated}
  391. <li class="comment">
  392. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">{username}</a>
  393. <div class="tex">{body}</div>
  394. </li>
  395. {/block:IsDeactivated}
  396. {/block:Reblogs}
  397. {/block:RebloggedFrom}
  398. {block:NotReblog}
  399. <li class="comment {block:Title}ted{/block:Title}">
  400. <div class="tex">{body}</div>
  401. </li>
  402. {/block:NotReblog}
  403. </div>
  404. {/block:Text}
  405.  
  406. <!---- quotes ---->
  407.  
  408. {block:Quote}
  409. <div class="post" id="{PostID}">
  410. <div class="quote">{quote}</div>
  411. {block:Source}<div class="source">{source}</div>{/block:Source}
  412. </div>
  413. {/block:Quote}
  414.  
  415. <!---- links ---->
  416.  
  417. {block:Link}
  418. <div class="post" id="{PostID}">
  419. <div class="title"><a href="{URL}">{name}</a></div>
  420. {block:Description}
  421. {block:NotReblog}
  422. <li class="comment ted">
  423. <div class="tex">{description}</div>
  424. </li>
  425. {/block:NotReblog}
  426. {/block:Description}
  427. {block:RebloggedFrom}
  428. {block:Reblogs}
  429. {block:IsActive}
  430. <li class="comment {block:Title}ted{/block:Title}">
  431. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  432. <div class="tex">{body}</div>
  433. </li>
  434. {/block:IsActive}
  435. {block:IsDeactivated}
  436. <li class="comment">
  437. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">{username}</a>
  438. <div class="tex">{body}</div>
  439. </li>
  440. {/block:IsDeactivated}
  441. {/block:Reblogs}
  442. {/block:RebloggedFrom}
  443. </div>
  444. {/block:Link}
  445.  
  446. <!---- asks ---->
  447.  
  448. {block:Answer}
  449. <div class="post" id="{PostID}">
  450. <div class="question"><span class="asker">{Asker} sent: </span><p>{Question}</div>
  451.  
  452. {block:NotReblog}
  453. <div class="answer">{Answer}</div>
  454. {/block:NotReblog}
  455.  
  456. {block:RebloggedFrom}
  457. {block:Answerer}
  458. <div class="answer">
  459. <span class="answerer">{Answerer} replied:</span><span class="tex">{Answer}</span>
  460. </div>
  461. {/block:Answerer}
  462. {block:Reblogs}
  463. {block:IsActive}
  464. <li class="comment">
  465. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Username}</a>
  466. <div class="tex">{Body}</div>
  467. </li>
  468. {/block:IsActive}
  469. {block:IsDeactivated}
  470. <li class="comment">
  471. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user deactivated" target="_blank">{Username}</a>
  472. <div class="tex">{Body}</div>
  473. </li>
  474. {/block:IsDeactivated}
  475. {/block:Reblogs}
  476. {/block:RebloggedFrom}
  477. </div>
  478. {/block:Answer}
  479.  
  480. <!---- chat ---->
  481.  
  482. {block:Chat}
  483. <div class="post" id="{PostID}">
  484. {block:Title}<div id="title">{title}</div>{/block:Title}
  485. <ol class="chat {block:Title}ted{/block:Title}">
  486. {block:lines}
  487. <li class="l {Alt}">
  488. {block:label}<span class="label">{label}</span>{/block:label} {line}
  489. </li>
  490. {/block:lines}
  491. </ol>
  492. </div>
  493. {/block:Chat}
  494.  
  495. <!---- photos and photosets ---->
  496.  
  497. <div class="post" id="{PostID}"><div class="ph">
  498.  
  499. {block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}
  500.  
  501. {block:Photoset}
  502. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div></div>
  503. {/block:Photoset}
  504.  
  505. <!---- video ---->
  506.  
  507. {block:Video}<div class="post video" id="{PostID}">{VideoEmbed-500}{/block:Video}
  508.  
  509. <!---- audio ---->
  510.  
  511. {block:Audio}
  512. <div class="post" id="{PostID}">
  513. {block:audioplayer}
  514. <div class="hold">
  515. <div class="player"><div class="play">{audioplayerblack}</div></div>
  516. <div class="audio_info">
  517. {block:trackname}<span class="track">{trackname}</span>{/block:trackname}
  518. {block:artist}<span class="artist">{artist}</span>{/block:artist}
  519. </div>
  520. </div>
  521. {/block:AudioPlayer}
  522. </div>
  523. {/block:Audio}
  524.  
  525. <!---- captions and reblogs ---->
  526.  
  527. {block:caption}
  528. {block:Reblogs}
  529. {block:IsActive}
  530. <li class="comment {block:Title}ted{/block:Title}">
  531. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  532. <div class="tex">{body}</div>
  533. </li>
  534. {/block:IsActive}
  535. {block:IsDeactivated}
  536. <li class="comment">
  537. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">{username}</a>
  538. <div class="tex">{body}</div>
  539. </li>
  540. {/block:IsDeactivated}
  541. {/block:Reblogs}
  542. {block:NotReblog}
  543. <li class="comment">
  544. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{name}</a>
  545. <div class="tex">{caption}</div>
  546. </li>
  547. {/block:NotReblog}
  548. {/block:caption}
  549.  
  550. </div>
  551.  
  552. <!---- permalinks and notes ---->
  553.  
  554. {block:date}
  555. <hr>
  556.  
  557. <div class="when">
  558. <span><a href="{permalink}">{shortmonth} {dayofmonthwithzero} {year}</a>{block:notecount} <span class="notecount">{NoteCountWithLabel}</span></span>{/block:notecount}</span>
  559.  
  560. <div style="float:right">
  561. <span><a href="{reblogurl}" target="_blank" class="reblog">reblog</a><span><a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  562. </div>
  563. </div>
  564.  
  565. {block:hastags}<div class="tags">{block:tags}<a href="{tagurl}">{tag}</a>{/block:tags}</div>{/block:hastags}
  566.  
  567. {/block:date}
  568.  
  569. </article>
  570.  
  571. {block:PostNotes}
  572. {block:RebloggedFrom}
  573. <div class="via">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} &nbsp&mdash;&nbsp source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}</div>
  574. {/block:RebloggedFrom}
  575.  
  576. {PostNotes}
  577.  
  578. </article>
  579.  
  580. {/block:PostNotes}
  581. {/block:Posts}
  582.  
  583. <!---- pagination ---->
  584.  
  585. <footer>
  586. {block:PreviousPage}
  587. <span><a class="prev" href="{PreviousPage}" title="previous page"><span class="las la-arrow-left"></span></a></span>
  588. {/block:PreviousPage}
  589. {block:NextPage}
  590. <span><a class="next" href="{NextPage}" title="next page"><span class="las la-arrow-right"></span></a></span>
  591. {/block:NextPage}
  592. </footer>
  593.  
  594. </section>
  595.  
  596. <!---- buttons ---->
  597.  
  598. <a class="nightbtn" id="iconlinks" title="night mode"><span class="las la-moon"></span></a>
  599. <a class="daybtn" id="iconlinks" title="day mode" hidden="hidden"><span class="las la-sun"></span></a>
  600. <a class="bfontbtn" id="iconlinks" title="change font size">Aa</a>
  601. <a class="sfontbtn" id="iconlinks" title="change font size" hidden="hidden">Aa</a>
  602. <a class="cc"><span class="las la-bars"></span></a>
  603. <a class="credit" href="https://saestrah.tumblr.com" title="saestrah themes" target="_blank"><span class="las la-hat-cowboy"></span></a>
  604. <a class="top" href="/" title="back to top"><span class="las la-arrow-up"></span></a>
  605.  
  606. <!-------------------------------- scripts ---->
  607.  
  608. <!---- search bar by @shythemes ---->
  609.  
  610. <script>
  611. $(document).ready(function(){
  612. $(".search").submit(function(event){
  613. var value = $("input:first").val();
  614. location.replace("https://{Name}.tumblr.com/tagged/" + value);
  615. });
  616. });
  617. </script>
  618.  
  619. <!---- scroll to top by paul underwood ---->
  620.  
  621. <script>
  622. $(document).ready(function(){
  623. $(window).scroll(function(){
  624. if ($(this).scrollTop() > 100) {
  625. $(".top").fadeIn();
  626. } else {
  627. $(".top").fadeOut();
  628. }
  629. });
  630.  
  631. $(".top").click(function(){
  632. $("html, body").animate({scrollTop : 0},800);
  633. return false;
  634. });
  635.  
  636. });
  637. </script>
  638.  
  639. <!---- audio player by @shythemes ---->
  640.  
  641. <script>
  642. $(document).ready(function(){
  643. $("iframe.tumblr_audio_player").load( function() {
  644. $("iframe.tumblr_audio_player").contents().find("head").append($("<style type="text/css"> .audio-player{background:transparent;!important}</style>"));
  645. });
  646. });
  647. </script>
  648.  
  649. <!---- photosets by @annasthms and @eggdesign ---->
  650.  
  651. <script>
  652. function gatherData(images, arr) {
  653. for (let i = 0; i < images.length; i++) {
  654. let currentData = {
  655. "width": images[i].getAttribute("data-width"),
  656. "height": images[i].getAttribute("data-height"),
  657. "low_res": images[i].getAttribute("data-lowres"),
  658. "high_res": images[i].getAttribute("data-highres")
  659. };
  660. arr.push(currentData);
  661. }
  662. }
  663. function getIndex(elem) {
  664. let i = 0;
  665. while( (elem = elem.previousElementSibling) != null ) i++;
  666. return i;
  667. }
  668. function lightbox(elem) {
  669. let currentPhotoset = elem.parentNode;
  670. let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  671. let data = [];
  672. gatherData(photosetPhotos, data);
  673. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  674. }
  675. $(document).ready(function(){
  676. undoPhotoset({
  677. "posts":".text",
  678. "text class":"",
  679. "photoset class":"ph"
  680. },false);
  681. });
  682. </script>
  683.  
  684. <!---- npf images readjustment by @glenthemes ---->
  685.  
  686. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  687. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  688. <script src="//dl.dropbox.com/s/aqo7pinjzfub4tn/npf-legacy.js"></script>
  689.  
  690. <style type="text/css">
  691. :root {
  692. --NPF-Image-Spacing:4px;
  693. --NPF-Bottom-Gap-From-Captions:0;
  694. }
  695. </style>
  696.  
  697. <!---- flexible frames by @nouvae ---->
  698.  
  699. <script>
  700. $(document).ready(function(){
  701. function flexFrame() {
  702. $("entries").each(function() {
  703. $(this).find("iframe").wrap("<div class="iframe-flex"></div>");
  704. flexibleFrames($(".iframe-flex"));
  705. });
  706. flexibleFrames($(".video"));}
  707. $(document).ready(flexFrame);
  708. });
  709. </script>
  710.  
  711. <!---- notecount shortener by @shythemes ---->
  712.  
  713. <script>
  714. var $container = $(".when");
  715. $container.find(".notecount").each(function(){
  716. var n = $(this).html().split(" ")[0].replace(/,/g, "");
  717. if (n > 999) {
  718. n = Math.floor(n / 100) / 10;
  719. $(this).text(n + "k notes");
  720. }
  721. });
  722. </script>
  723.  
  724. <!---- tooltips by malihu ---->
  725.  
  726. <script type="text/javascript">
  727. (function($){
  728. $(document).ready(function(){
  729. $("[title]").style_my_tooltips({
  730. tip_follows_cursor:true,
  731. tip_delay_time:200,
  732. tip_fade_speed:300
  733. });
  734. });
  735. })(jQuery);
  736. </script>
  737.  
  738. <!-------------------------------- end of scripts ---->
  739.  
  740. <body>
  741. </html>
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!