API tools faq
paste
saestrah

wishbone

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