API tools faq
paste
saestrah

tangerine

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