API tools faq
paste
saestrah

tomorrow

saestrah
Mar 18th, 2021 (edited)
3,727
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.73 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. tomorrow · by saestrah · april 2021
  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 and notecount script by shythemes
  11. · photosets by annasthms and eggdesign
  12. · nightmode by eggdesign
  13. · icons by line-awesome
  14. · accordion menu script by fainder
  15. · tooltips by malihu
  16.  
  17. || terms of use
  18.  
  19. · don't remove credit
  20. · don't repost or redistribute
  21. · don't take parts of the code and use as your own
  22.  
  23. || notes
  24.  
  25. · for customisation hints, search for "a note from saestrah"
  26.  
  27. ---->
  28.  
  29. <!DOCTYPE html>
  30. <head>
  31.  
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.  
  34. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  35.  
  36. <link rel="shortcut icon" href="{Favicon}">
  37.  
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  39. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  40.  
  41. <!---- defaults ---->
  42.  
  43. <meta name="image:Sidebar" content=""/>
  44. <meta name="image:Tab One" content=""/>
  45. <meta name="image:Tab Four" content=""/>
  46.  
  47. <meta name="color:Background" content="#c3cebc"/>
  48. <meta name="color:Night Background" content="#292f36"/>
  49. <meta name="color:Base" content="#a0b096"/>
  50. <meta name="color:Night Base" content="#21262c"/>
  51. <meta name="color:Text" content="#565656"/>
  52. <meta name="color:Night Text" content="#cccccc"/>
  53. <meta name="color:Link" content="#000000"/>
  54. <meta name="color:Night Link" content="#ffffff"/>
  55. <meta name="color:Accent" content="#ffffff"/>
  56. <meta name="color:Night Accent" content="#b3f02e"/>
  57. <meta name="color:Title"content="#000000"/>
  58. <meta name="color:Night Title" content="#ffffff"/>
  59. <meta name="color:Borders" content="#7ca2a2"/>
  60. <meta name="color:Night Borders" content="#455e7b"/>
  61. <meta name="color:Tooltip Text" content="#000000"/>
  62. <meta name="color:Night Tooltip Text" content="#000000"/>
  63.  
  64. <meta name="select:Title Font" content="Big Shoulders Inline Display"/>
  65. <meta name="select:Title Font" content="Bungee"/>
  66. <meta name="select:Title Font" content="Bungee Shade"/>
  67. <meta name="select:Title Font" content="Codystar"/>
  68. <meta name="select:Title Font" content="EB Garamond"/>
  69. <meta name="select:Title Font" content="Ewert"/>
  70. <meta name="select:Title Font" content="Fredericka the Great"/>
  71. <meta name="select:Title Font" content="Grenze Gotisch"/>
  72. <meta name="select:Title Font" content="Inria Sans"/>
  73. <meta name="select:Title Font" content="Inria Serif"/>
  74. <meta name="select:Title Font" content="Karla"/>
  75. <meta name="select:Title Font" content="Kumar One Outline"/>
  76. <meta name="select:Title Font" content="La Belle Aurore"/>
  77. <meta name="select:Title Font" content="Lato"/>
  78. <meta name="select:Title Font" content="Lora"/>
  79. <meta name="select:Title Font" content="Modak"/>
  80. <meta name="select:Title Font" content="Monoton"/>
  81. <meta name="select:Title Font" content="Montserrat Subrayada"/>
  82. <meta name="select:Title Font" content="Nerko One"/>
  83. <meta name="select:Title Font" content="Playfair Display"/>
  84. <meta name="select:Title Font" content="Roboto Condensed"/>
  85. <meta name="select:Title Font" content="Roboto Slab"/>
  86. <meta name="select:Title Font" content="Sarina"/>
  87. <meta name="select:Title Font" content="Staatliches"/>
  88. <meta name="select:Title Font" content="UnifrakturCook"/>
  89.  
  90. <meta name="select:Body Font" content="Big Shoulders Inline Display"/>
  91. <meta name="select:Body Font" content="Bungee"/>
  92. <meta name="select:Body Font" content="Bungee Shade"/>
  93. <meta name="select:Body Font" content="Codystar"/>
  94. <meta name="select:Body Font" content="EB Garamond"/>
  95. <meta name="select:Body Font" content="Ewert"/>
  96. <meta name="select:Body Font" content="Fredericka the Great"/>
  97. <meta name="select:Body Font" content="Grenze Gotisch"/>
  98. <meta name="select:Body Font" content="Inria Sans"/>
  99. <meta name="select:Body Font" content="Inria Serif"/>
  100. <meta name="select:Body Font" content="Karla"/>
  101. <meta name="select:Body Font" content="Kumar One Outline"/>
  102. <meta name="select:Body Font" content="La Belle Aurore"/>
  103. <meta name="select:Body Font" content="Lato"/>
  104. <meta name="select:Body Font" content="Lora"/>
  105. <meta name="select:Body Font" content="Modak"/>
  106. <meta name="select:Body Font" content="Monoton"/>
  107. <meta name="select:Body Font" content="Montserrat Subrayada"/>
  108. <meta name="select:Body Font" content="Nerko One"/>
  109. <meta name="select:Body Font" content="Playfair Display"/>
  110. <meta name="select:Body Font" content="Roboto Condensed"/>
  111. <meta name="select:Body Font" content="Roboto Slab"/>
  112. <meta name="select:Body Font" content="Sarina"/>
  113. <meta name="select:Body Font" content="Staatliches"/>
  114. <meta name="select:Body Font" content="UnifrakturCook"/>
  115.  
  116. <meta name="select:Post Size" content="400px"/>
  117. <meta name="select:Post Size" content="500px"/>
  118. <meta name="select:Post Size" content="600px"/>
  119.  
  120. <meta name="if:Sidebar Image" content="1"/>
  121. <meta name="if:Small Cursor" content="1"/>
  122. <meta name="if:Search" content="1"/>
  123. <meta name="if:Tags On Hover" content="1"/>
  124. <meta name="if:Pinned Post Icon" content="1"/>
  125. <meta name="if:Uppercase Accents" content="1"/>
  126. <meta name="if:Invert Tumblr Controls" content="1"/>
  127. <meta name="if:Grayscale Image in Nightmode" content="1"/>
  128. <meta name="if:Invert Image in Nightmode" content="1"/>
  129.  
  130. <meta name="text:Body Font Size" content="14px"/>
  131. <meta name="text:Body Font Weight" content="400"/>
  132. <meta name="text:Title Font Size" content="32px"/>
  133. <meta name="text:Title Font Weight" content="400"/>
  134.  
  135. <meta name="text:Title Tooltip" content="refresh"/>
  136. <meta name="text:Sidebar Image Tooltip" content=""/>
  137.  
  138. <meta name="text:Home Tooltip" content="home"/>
  139. <meta name="text:Ask Tooltip" content="ask"/>
  140. <meta name="text:Archive Tooltip" content="archive"/>
  141. <meta name="text:Random Tooltip" content="shuffle"/>
  142.  
  143. <meta name="text:Tab One Title" content=""/>
  144. <meta name="text:Tab One Content" content=""/>
  145. <meta name="text:BYF Title" content=""/>
  146. <meta name="text:BYF Content" content=""/>
  147.  
  148. <meta name="text:Update One" content=""/>
  149. <meta name="text:Update One Content" content=""/>
  150.  
  151. <meta name="text:Update Two" content=""/>
  152. <meta name="text:Update Two Content" content=""/>
  153.  
  154. <meta name="text:Update Three" content=""/>
  155. <meta name="text:Update Three Content" content=""/>
  156.  
  157. <meta name="text:Update Four" content=""/>
  158. <meta name="text:Update Four Content" content=""/>
  159.  
  160. <meta name="text:Tab Two Title" content=""/>
  161. <meta name="text:Tab Two Content" content=""/>
  162.  
  163. <meta name="text:Navigation Title One" content=""/>
  164. <meta name="text:Navigation Link One" content=""/>
  165. <meta name="text:Navigation Link One URL" content=""/>
  166. <meta name="text:Navigation Link Two" content=""/>
  167. <meta name="text:Navigation Link Two URL" content=""/>
  168. <meta name="text:Navigation Link Three" content=""/>
  169. <meta name="text:Navigation Link Three URL" content=""/>
  170.  
  171. <meta name="text:Navigation Title Two" content=""/>
  172. <meta name="text:Navigation Tag One" content=""/>
  173. <meta name="text:Navigation Tag Two" content=""/>
  174. <meta name="text:Navigation Tag Three" content=""/>
  175. <meta name="text:Navigation Tag Four" content=""/>
  176. <meta name="text:Navigation Tag Five" content=""/>
  177. <meta name="text:Navigation Tag Six" content=""/>
  178.  
  179. <meta name="text:Search Placeholder" content="search..."/>
  180.  
  181. <meta name="text:Tab Three Title" content=""/>
  182. <meta name="text:Tab Three Content" content=""/>
  183.  
  184. <meta name="text:Project One Title" content=""/>
  185. <meta name="text:Project One Content" content=""/>
  186. <meta name="text:Project One URL" content=""/>
  187. <meta name="text:Project One Tooltip" content=""/>
  188.  
  189. <meta name="text:Project Two Title" content=""/>
  190. <meta name="text:Project Two Content" content=""/>
  191. <meta name="text:Project Two URL" content=""/>
  192. <meta name="text:Project Two Tooltip" content=""/>
  193.  
  194. <meta name="text:Project Three Title" content=""/>
  195. <meta name="text:Project Three Content" content=""/>
  196. <meta name="text:Project Three URL" content=""/>
  197. <meta name="text:Project Three Tooltip" content=""/>
  198.  
  199. <meta name="text:Tab Four Title" content=""/>
  200. <meta name="text:Tab Four Content" content=""/>
  201. <meta name="text:Tab Image Tooltip" content=""/>
  202. <meta name="text:Tab Four Image URL" content=""/>
  203.  
  204. <!---- scripts ---->
  205.  
  206. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  207. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  208. <script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
  209. <script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  210. <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  211. <script src="//static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  212. <script src="//static.tumblr.com/0podkko/qWqq8va08/photosets.js"></script>
  213. <link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  214. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  215. <link href="//maxst.icons8.com/vue-static/landings/line-awe
  216. some/line-awesome/1.3.0/css/line-awesome.min.css" rel="stylesheet">
  217. <script src="//saestrah.github.io/portfolio/tomorrow/tomorrow.js" type="text/javascript"></script>
  218. <link rel="stylesheet" type="text/css" href="//saestrah.github.io/portfolio/tomorrow/tomorrow.css"/>
  219.  
  220. <!---- fonts ---->
  221.  
  222. <link rel="preconnect" href="https://fonts.gstatic.com">
  223. <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">
  224.  
  225. <style type="text/css">
  226.  
  227. /* root variables */
  228.  
  229. :root {
  230. --background:{color:Background};
  231. --nightbackground:{color:Night Background};
  232. --rgbbackground:{RGBcolor:Background};
  233. --rgbnightbackground:{RGBcolor:Night Background};
  234. --base:{color:Base};
  235. --nightbase:{color:Night Base};
  236. --text:{color:Text};
  237. --nighttext:{color:Night Text};
  238. --link:{color:Link};
  239. --nightlink:{color:Night Link};
  240. --accent:{color:Accent};
  241. --nightaccent:{color:Night Accent};
  242. --title:{color:Title};
  243. --nighttitle:{color:Night Title};
  244. --borders:{color:Borders};
  245. --nightborders:{color:Night Borders};
  246. --tooltiptext:{color:Tooltip Text};
  247. --nighttooltiptext:{color:Night Tooltip Text};
  248.  
  249. --bodyfont:{select:Body Font};
  250. --bodyfontsize:{text:Body Font Size};
  251. --bodyfontweight:{text:Body Font Weight};
  252. --titlefont:{select:Title Font};
  253. --titlefontsize:{text:Title Font Size};
  254. --titlefontweight:{text:Title Font Weight};
  255.  
  256. --postsize:{select:Post Size};
  257. }
  258.  
  259. /* css */
  260.  
  261. {block:ifUppercaseAccents}
  262. #s-m-t-tooltip, h1, h2, h3, h4, .title, a.read_more, .label, .tags, a.more_notes_link, ul.accordion .navtitle { text-transform:uppercase; }
  263. {/block:ifUppercaseAccents}
  264.  
  265. {block:ifInvertTumblrControls}
  266. 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%); }
  267. {/block:ifInvertTumblrControls}
  268.  
  269. {block:ifInvertImageinNightmode}
  270. body.night sidebar img { filter:invert(100%); }
  271. {/block:ifInvertImageinNightmode}
  272.  
  273. {block:ifGrayscaleImageinNightmode}
  274. body.night sidebar img { filter:grayscale(100%); }
  275. {/block:ifGrayscaleImageinNightmode}
  276.  
  277. {block:ifTagsOnHover}
  278. .tags { opacity:0; }
  279. @media only screen and (max-width:800px) { .tags { opacity:1; } }
  280. .posts:hover .tags {
  281. opacity:1;
  282. transition: all 0.5s ease-in-out;
  283. -webkit-transition: all 0.5s ease-in-out;
  284. -moz-transition: all 0.5s ease-in-out;
  285. -o-transition: all 0.5s ease-in-out;
  286. }
  287. {/block:ifTagsOnHover}
  288.  
  289. {block:ifPinnedPostIcon}
  290. .pinned span { display:block; }
  291. {/block:ifPinnedPostIcon}
  292.  
  293. {block:ifSmallCursor}
  294. * { cursor:url(https://i.imgur.com/dHusUiR.png),auto }
  295. body { cursor:url(https://i.imgur.com/dHusUiR.png),auto }
  296. iframe.tmblr-iframe:hover, a, a:hover, sidebar img, .ph img, ul.accordion .navtitle { cursor:url(https://i.imgur.com/ZM41vky.png),progress!important; }
  297. [photoset-layout] div:hover { cursor:url(https://i.imgur.com/ZM41vky.png),progress!important; }
  298. {/block:ifSmallCursor}
  299.  
  300. {block:PermalinkPage}
  301. .top { opacity:0; }
  302. section { padding-bottom:50px; }
  303. .posts { margin-bottom:50px; }
  304. .tags { opacity:1; }
  305. {/block:PermalinkPage}
  306.  
  307. /* a note from saestrah:
  308.  
  309. the sidebar image is coded so tall and thin images will have the title and description at the side of the image, and short and wide images will have the title and description below the image. some images will look off with this, depending how wide your image is and how long your title is, so to override this and keep the title and description below the image regardless of your image size, add the following to the css:
  310.  
  311. sidebar img { display:block; float:none; }
  312.  
  313. to move the sidebar content up, add the following to the css and change the pixel value to your liking. the section padding-top is to keep the alignment for the top of the sidebar and the first post:
  314.  
  315. sidebar { top:100px; }
  316. section { padding-top:100px; }
  317.  
  318. you can adjust the size of your sidebar image by adding the following to the css and adjusting the maximum height and width of the image:
  319.  
  320. sidebar img { max-width:500px; max-height:500px; }
  321.  
  322. you can center the sidebar image by adding:
  323.  
  324. sidebar img { text-align:center; margin:0 auto 25px; }
  325.  
  326. if you would like to have your sidebar image both invert and convert to grayscale in nightmode add:
  327.  
  328. body.night sidebar img { filter:grayscale(100%) invert(100%); }
  329.  
  330. on smaller mobile devices, the font size of your header title will adjust for visibility. to change it, add the following and change the pixel value to your liking:
  331.  
  332. @media only screen and (max-width:500px) {
  333. .headertitle { font-size:20px; }
  334. }
  335.  
  336. to add or reduce the size of the gap between images or gifs in photosets, add the following and change the pixel value to your liking:
  337.  
  338. [photoset-layout] { grid-gap:3px; }
  339.  
  340. */
  341.  
  342. </style>
  343. </head>
  344. <body>
  345.  
  346. <!-------------------------------- html ---->
  347.  
  348. <!---- header ---->
  349.  
  350. <header>
  351. <a href="/" class="headertitle" {block:ifTitleTooltip}title="{text:Title Tooltip}"{/block:ifTitleTooltip}>{Title}</a></p>
  352. <div class="headerdescription">{Description}</div>
  353. </header>
  354.  
  355. <iconlinks>
  356.  
  357. <!---- a note from saestrah:
  358.  
  359. 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")
  360.  
  361. if you would rather the icons were links rather than sidebar tabs, remove the tab title blocks add the following to the html below, and a meta variable at the top of the code. change the classes of these link icons to start with "icon1" so that there isn't a gap between the other icons. remember to change "X" to the icon number
  362.  
  363. HTML:
  364.  
  365. href="{text:Custom Icon X URL}"
  366. href="{text:Custom Icon X Tooltip}"
  367.  
  368. for example:
  369.  
  370. <a class="icon1" id="iconlinks" title="{text:Custom Icon 1 Tooltip}" href="{text:Custom Icon 1 URL}"><span class="las la-seedling"></span></a>
  371.  
  372. META (remove *s):
  373.  
  374. <m*eta name="text:Custom Icon 1 URL" content=""/>
  375. <m*eta name="text:Custom Icon 1 Tooltip" content=""/>
  376.  
  377. ---->
  378.  
  379. <a class="home active" id="iconlinks" href="/" title="{text:Home Tooltip}"><span class="las la-home"></span></a>
  380.  
  381. <a class="ask" id="iconlinks" href="/ask" title="{text:Ask Tooltip}"><span class="las la-comment-alt"></span></a>
  382.  
  383. <a class="archive" id="iconlinks" href="/archive" title="{text:Archive Tooltip}"><span class="las la-archive"></span></a>
  384.  
  385. <a class="random" id="iconlinks" href="/random" title="{text:Random Tooltip}"><span class="las la-map-marker-alt"></span></a>
  386.  
  387. {block:ifTabOneTitle}<a class="icon1" id="iconlinks" title="{text:Tab One Title}"><span class="las la-globe"></span></a>{/block:ifTabOneTitle}
  388.  
  389. {block:ifTabTwoTitle}<a class="icon2" id="iconlinks" title="{text:Tab Two Title}"><span class="las la-wind"></span></a>{/block:ifTabTwoTitle}
  390.  
  391. {block:ifTabThreeTitle}<a class="icon3" id="iconlinks" title="{text:Tab Three Title}"><span class="las la-meteor"></span></a>{/block:ifTabThreeTitle}
  392.  
  393. {block:ifTabFourTitle}<a class="icon4" id="iconlinks" title="{text:Tab Four Title}"><span class="las la-seedling"></span></a>{/block:ifTabFourTitle}
  394.  
  395. </iconlinks>
  396.  
  397. <!-------------------------------- sidebar ---->
  398.  
  399. <div class="wrap">
  400. <div class="leftwrap">
  401. <sidebar>
  402.  
  403. <!---- sidebar home ---->
  404.  
  405. <div class="stcontainer" id="sidetab0C">
  406.  
  407. {block:ifSidebarImage}
  408. <div class="sideimg"><a href="/" {block:ifSidebarImageTooltip}title="{text:Sidebar Image Tooltip}"{/block:ifSidebarImageTooltip}><img src="{image:Sidebar}"/></div>
  409. {/block:ifSidebarImage}
  410.  
  411. <a href="/" class="maintitle" {block:ifTitleTooltip}title="{text:Title Tooltip}"{/block:ifTitleTooltip}>{Title}</a>
  412. <div class="description">{Description}</div>
  413.  
  414. </div>
  415.  
  416. <!---- sidebar tab one ---->
  417.  
  418. <div class="stcontainer" id="sidetab1C">
  419.  
  420. {block:ifTabOneTitle}
  421. <div class="sidetabtitle">{text:Tab One Title}</div>
  422. {/block:ifTabOneTitle}
  423.  
  424. <div class="tabone">
  425.  
  426. {block:ifTabOneImage}
  427. <img src="{image:Tab One}">
  428. {/block:ifTabOneImage}
  429.  
  430. {block:ifTabOneContent}
  431. {text:Tab One Content}
  432. {/block:ifTabOneContent}
  433.  
  434. </div>
  435.  
  436. <div class="byf">
  437. {block:ifBYFTitle}<span class="sidetabsub">{text:BYF Title}</span>{/block:ifBYFTitle}{block:ifBYFContent}{text:BYF Content}</p>{/block:ifBYFContent}
  438. </div>
  439.  
  440. {block:ifUpdateOneContent}<span class="sidetabsub">{text:Update One}</span> {text:Update One Content}</p>{/block:ifUpdateOneContent}
  441.  
  442. {block:ifUpdateTwoContent}<span class="sidetabsub">{text:Update Two}</span> {text:Update Two Content}</p>{/block:ifUpdateTwoContent}
  443.  
  444. {block:ifUpdateThreeContent}<span class="sidetabsub">{text:Update Three}</span> {text:Update Three Content}</p>{/block:ifUpdateThreeContent}
  445.  
  446. {block:ifUpdateFourContent}<span class="sidetabsub">{text:Update Four}</span> {text:Update Four Content}</p>{/block:ifUpdateFourContent}
  447.  
  448. </div>
  449.  
  450. <!---- sidebar tab two ---->
  451.  
  452. <div class="stcontainer" id="sidetab2C">
  453.  
  454. {block:ifTabTwoTitle}
  455. <div class="sidetabtitle">{text:Tab Two Title}</div>
  456. {/block:ifTabTwoTitle}
  457.  
  458. {block:ifTabTwoContent}
  459. <div class="sidetabblock">{text:Tab Two Content}</div>
  460. {/block:ifTabTwoContent}
  461.  
  462. <ul id="accordion" class="accordion">
  463.  
  464. {block:ifNavigationTitleOne}
  465. <li>
  466. <div class="navtitle">{text:Navigation Title One}</div>
  467. <ul class="navtags">
  468. <li><a href="{text:Navigation Link One URL}">{text:Navigation Link One}</a></li>
  469. <li><a href="{text:Navigation Link Two URL}">{text:Navigation Link Two}</a></li>
  470. <li><a href="{text:Navigation Link Three URL}">{text:Navigation Link Three}</a></li>
  471. </ul>
  472. </li>
  473. {/block:ifNavigationTitleOne}
  474.  
  475. {block:ifNavigationTitleTwo}
  476. <li>
  477. <div class="navtitle">{text:Navigation Title Two}</div>
  478. <ul class="navtags">
  479. <li><a href="/tagged/{text:Navigation Tag One}">{text:Navigation Tag One}</a></li>
  480. <li><a href="/tagged/{text:Navigation Tag Two}">{text:Navigation Tag Two}</a></li>
  481. <li><a href="/tagged/{text:Navigation Tag Three}">{text:Navigation Tag Three}</a></li>
  482. <li><a href="/tagged/{text:Navigation Tag Four}">{text:Navigation Tag Four}</a></li>
  483. <li><a href="/tagged/{text:Navigation Tag Five}">{text:Navigation Tag Five}</a></li>
  484. <li><a href="/tagged/{text:Navigation Tag Six}">{text:Navigation Tag Six}</a></li>
  485. </ul>
  486. </li>
  487. {/block:ifNavigationTitleTwo}
  488.  
  489. </ul>
  490.  
  491. <!----
  492.  
  493. a note from saestrah:
  494.  
  495. to add more tags under a navigation heading, use the template below and paste before the </ul>
  496.  
  497. <li><a href="/tagged/{text:Navigation Tag X}">{text:Navigation Tag X}</a></li>
  498.  
  499. then add the following template to the meta (remove the *)
  500.  
  501. <m*eta name="text:Navigation Tag X" content=""/>
  502.  
  503. remember to change X into a number
  504.  
  505. if you want the label for your tag to be differnet to the tags you use (for example, your tag looks like "theme: tomorrow" but you want the label in the navigation menu to simply read "tomorrow", change the href to "/tagged/THE TAG YOU USE" and keep the label as what you want to appear in the menu
  506.  
  507. for example:
  508.  
  509. <li><a href="/tagged/theme:+tomorrow">tomorrow</a></li>
  510.  
  511. remember to change any spaces to a +
  512.  
  513. ---->
  514.  
  515. {block:ifSearch}
  516. <div id="searchbar"><form class="search" action="/search" method="get"><input type="text" class="query" name="q" value="{SearchQuery}" placeholder="{text:Search Placeholder}"/></form></div>
  517. {/block:ifSearch}
  518.  
  519. </div>
  520.  
  521. <!---- sidebar tab three ---->
  522.  
  523. <div class="stcontainer" id="sidetab3C">
  524.  
  525. {block:ifTabThreeTitle}
  526. <div class="sidetabtitle">{text:Tab Three Title}</div>
  527. {/block:ifTabThreeTitle}
  528.  
  529. {block:ifTabTwoContent}
  530. <div class="sidetabblock">{text:Tab Three Content}</div>
  531. {/block:ifTabTwoContent}
  532.  
  533. {block:ifProjectOneContent}<span class="sidetabsub"><a {block:ifProjectOneURL}href="{text:Project One URL}"{/block:ifProjectOneURL} {block:ifProjectOneTooltip}title="{text:Project One Tooltip}"{/block:ifProjectOneTooltip}>{text:Project One Title}</a></span></br>
  534. {text:Project One Content}</p>{/block:ifProjectOneContent}
  535.  
  536. {block:ifProjectTwoContent}<span class="sidetabsub"><a {block:ifProjectTwoURL}href="{text:Project Two URL}"{/block:ifProjectTwoURL} {block:ifProjectTwoTooltip}title="{text:Project Two Tooltip}"{/block:ifProjectTwoTooltip}>{text:Project Two Title}</a></span></br>
  537. {text:Project Two Content}</p>{/block:ifProjectTwoContent}
  538.  
  539. {block:ifProjectThreeContent}<span class="sidetabsub"><a {block:ifProjectThreeURL}href="{text:Project Three URL}"{/block:ifProjectThreeURL} {block:ifProjectThreeTooltip}title="{text:Project Three Tooltip}"{/block:ifProjectThreeTooltip}>{text:Project Three Title}</a></span></br>
  540. {text:Project Three Content}</p>{/block:ifProjectThreeContent}
  541.  
  542. <!----
  543.  
  544. a note from saestrah: to add more projects, use the following template and remember to change "X" to a number:
  545.  
  546. {block:ifProjectXContent}<span class="sidetabsub"><a {block:ifProjectXURL}href="{text:Project X URL}"{/block:ifProjectXURL} {block:ifProjectXTooltip}title="{text:Project X Tooltip}"{/block:ifProjectXTooltip}>{text:Project X Title}</a></span></br>
  547. {text:Project X Content}</p>{/block:ifProjectXContent}
  548.  
  549. and add this to the meta at the top of the code (remove the *)
  550.  
  551. <m*eta name="text:Project X Title" content=""/>
  552. <m*eta name="text:Project X Content" content=""/>
  553. <m*eta name="text:Project X URL" content=""/>
  554. <m*eta name="text:Project X Tooltip" content=""/>
  555.  
  556. ---->
  557.  
  558. </div>
  559.  
  560. <!---- sidebar tab four ---->
  561.  
  562. <div class="stcontainer" id="sidetab4C">
  563.  
  564. {block:ifTabFourImage}
  565. <div class="sideimg" {block:ifTabFourImageURL}href="{text:Tab Four Image URL}"{/block:ifTabFourImageURL} {block:ifTabFourImageTooltip}title="{text:Tab Four Image Tooltip}"{/block:ifTabFourImageTooltip}><img src="{image:Tab Four}"/></div>
  566. {/block:ifTabFourImage}
  567.  
  568. {block:ifTabFourTitle}<span class="sidetabsub">{text:Tab Four Title}</span>{/block:ifTabFourTitle} {block:ifTabFourContent}<span class="sidetabblock">{text:Tab Four Content}</span>{/block:ifTabFourContent}
  569.  
  570. </div>
  571.  
  572. <!---- end of sidebar tabs ---->
  573.  
  574. </sidebar>
  575. </div>
  576.  
  577. <!-------------------------------- posts ---->
  578.  
  579. <div class="rightwrap">
  580.  
  581. <section id="entries">{block:Posts}
  582. <article class="posts {block:Caption}captioned{/block:Caption}" post-type="{PostType}">
  583.  
  584. <!---- pinned post ---->
  585.  
  586. <!---- a note from saestrah: you can change the icon for the pinned post using the same process as changing the icon for the icon links! ---->
  587.  
  588. {block:Homepage}
  589. {block:PinnedPostLabel}<span class="pinned"><span class="las la-thumbtack"></span></span>{/block:PinnedPostLabel}
  590. {/block:Homepage}
  591.  
  592. <!---- textposts ---->
  593.  
  594. {block:Text}
  595. <div class="post text" id="{PostID}">
  596. {block:Title}<div class="title">{Title}</div>{/block:Title}
  597. {block:RebloggedFrom}
  598. {block:Reblogs}
  599. {block:IsActive}
  600. <li class="comment">
  601. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Username}</a>
  602. <div class="tex">{Body}</div>
  603. </li>
  604. {/block:IsActive}
  605. {block:IsDeactivated}
  606. <li class="comment">
  607. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user deactivated" target="_blank">{Username}</a>
  608. <div class="tex">{Body}</div>
  609. </li>
  610. {/block:IsDeactivated}
  611. {/block:Reblogs}
  612. {/block:RebloggedFrom}
  613. {block:NotReblog}
  614. <li class="comment">
  615. <div class="tex">{Body}</div>
  616. </li>
  617. {/block:NotReblog}
  618. </div>
  619. {/block:Text}
  620.  
  621. <!---- quotes ---->
  622.  
  623. {block:Quote}
  624. <div class="post" id="{PostID}">
  625. <div class="quote">{Quote}</div>
  626. {block:Source}<div class="source">{Source}</div>{/block:Source}
  627. </div>
  628. {/block:Quote}
  629.  
  630. <!---- links ---->
  631.  
  632. {block:Link}
  633. <div class="post" id="{PostID}">
  634. <div class="title"><a href="{URL}">{Name}</a></div>
  635. {block:Description}
  636. {block:NotReblog}
  637. <li class="comment">
  638. <div class="tex">{Description}</div>
  639. </li>
  640. {/block:NotReblog}
  641. {/block:Description}
  642. {block:RebloggedFrom}
  643. {block:Reblogs}
  644. {block:IsActive}
  645. <li class="comment">
  646. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Username}</a>
  647. <div class="tex">{Body}</div>
  648. </li>
  649. {/block:IsActive}
  650. {block:IsDeactivated}
  651. <li class="comment">
  652. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user deactivated" target="_blank">{Username}</a>
  653. <div class="tex">{Body}</div>
  654. </li>
  655. {/block:IsDeactivated}
  656. {/block:Reblogs}
  657. {/block:RebloggedFrom}
  658. </div>
  659. {/block:Link}
  660.  
  661. <!---- asks ---->
  662.  
  663. {block:Answer}
  664. <div class="post" id="{PostID}">
  665. <div class="question"><span class="asker">{Asker} sent: </span><p>{Question}</div>
  666.  
  667. {block:NotReblog}
  668. <div class="answer">{Answer}</div>
  669. {/block:NotReblog}
  670.  
  671. {block:RebloggedFrom}
  672. {block:Answerer}
  673. <div class="answer">
  674. <span class="answerer">{Answerer} replied:</span><span class="tex">{Answer}</span>
  675. </div>
  676. {/block:Answerer}
  677. {block:Reblogs}
  678. {block:IsActive}
  679. <li class="comment">
  680. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Username}</a>
  681. <div class="tex">{Body}</div>
  682. </li>
  683. {/block:IsActive}
  684. {block:IsDeactivated}
  685. <li class="comment">
  686. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user deactivated" target="_blank">{Username}</a>
  687. <div class="tex">{Body}</div>
  688. </li>
  689. {/block:IsDeactivated}
  690. {/block:Reblogs}
  691. {/block:RebloggedFrom}
  692. </div>
  693. {/block:Answer}
  694.  
  695. <!---- chat ---->
  696.  
  697. {block:Chat}
  698. <div class="post" id="{PostID}">
  699. {block:Title}<div id="title">{Title}</div>{/block:Title}
  700. <ol class="chat">
  701. {block:Lines}
  702. <li class="l {Alt}">
  703. {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}
  704. </li>
  705. {/block:Lines}
  706. </ol>
  707. </div>
  708. {/block:Chat}
  709.  
  710. <!---- photos and photosets ---->
  711.  
  712. <div class="post" id="{PostID}"><div class="ph">
  713.  
  714. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}{/block:Photo}
  715.  
  716. {block:Photoset}
  717. <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>
  718. {/block:Photoset}
  719.  
  720. <!---- video ---->
  721.  
  722. {block:Video}<div class="post video" id="{PostID}">{VideoEmbed-500}</div>{/block:Video}
  723.  
  724. <!---- audio ---->
  725.  
  726. {block:Audio}
  727. <div class="post" id="{PostID}">
  728. {block:AudioPlayer}
  729. <div class="hold">
  730. <div class="player"><div class="play">{AudioPlayerBlack}</div></div>
  731. <div class="audio_info">
  732. {block:TrackName}<span class="track">{TrackName}</span>{/block:TrackName}
  733. {block:Artist}<span class="artist">{Artist}</span>{/block:Artist}
  734. </div>
  735. </div>
  736. {/block:AudioPlayer}
  737. </div>
  738. {/block:Audio}
  739.  
  740. <!---- captions and reblogs ---->
  741.  
  742. {block:Caption}
  743. {block:Reblogs}
  744. {block:IsActive}
  745. <li class="comment">
  746. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Username}</a>
  747. <div class="tex">{Body}</div>
  748. </li>
  749. {/block:IsActive}
  750. {block:IsDeactivated}
  751. <li class="comment">
  752. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user deactivated" target="_blank">{Username}</a>
  753. <div class="tex">{Body}</div>
  754. </li>
  755. {/block:IsDeactivated}
  756. {/block:Reblogs}
  757. {block:NotReblog}
  758. <li class="comment">
  759. <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink} class="user" target="_blank">{Name}</a>
  760. <div class="tex">{Caption}</div>
  761. </li>
  762. {/block:NotReblog}
  763. {/block:Caption}
  764.  
  765. </div>
  766.  
  767. <!---- post info ---->
  768.  
  769. {block:Date}
  770. <hr>
  771.  
  772. <div class="when">
  773.  
  774. <span><a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero} {Year}</a>{block:Notecount} <span class="notecount">{NoteCountWithLabel}</span></span>{/block:Notecount}</span>
  775.  
  776. <div style="float:right">
  777. <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>
  778.  
  779. </div>
  780.  
  781. {block:HasTags}<div class="tags">{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  782.  
  783. {/block:Date}
  784.  
  785. </article>
  786.  
  787. {block:PostNotes}
  788. {block:RebloggedFrom}
  789. <div class="via">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} &nbsp&mdash;&nbsp source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}</div>
  790. {/block:RebloggedFrom}
  791.  
  792. {PostNotes}
  793.  
  794. </article>
  795.  
  796. {/block:PostNotes}
  797. {/block:Posts}
  798.  
  799. <!---- pagination ---->
  800.  
  801. <footer>
  802. {block:PreviousPage}
  803. <span><a class="prev" href="{PreviousPage}" title="previous page"><span class="las la-arrow-left"></span></a></span>
  804. {/block:PreviousPage}
  805. {block:NextPage}
  806. <span><a class="next" href="{NextPage}" title="next page"><span class="las la-arrow-right"></span></a></span>
  807. {/block:NextPage}
  808. </footer>
  809.  
  810. </section>
  811. </div>
  812.  
  813. <!---- buttons ---->
  814.  
  815. <a class="cc"><span class="las la-bars"></span></a>
  816. <a class="mobilenav" title="mobile navigation"><span class="las la-bars"></span></a>
  817.  
  818. <a class="stclose" title="close sidebar" hidden="hidden"><span class="las la-times"></span></a>
  819. <a class="bfontbtn" title="change font size">Aa</a>
  820. <a class="sfontbtn" title="change font size" hidden="hidden">Aa</a>
  821. <a class="nightbtn" title="night mode"><span class="las la-moon"></span></a>
  822. <a class="daybtn" title="day mode" hidden="hidden"><span class="las la-sun"></span></a>
  823. <a class="followbtn" href="https://tumblr.com/follow/{Name}" title="follow {Name}"><span class="las la-plus"></span></a>
  824. <a class="top" href="/" title="back to top"><span class="las la-arrow-up"></span></a>
  825. <a class="credit" href="https://saestrah.tumblr.com" title="saestrah themes" target="_blank"><span class="las la-hat-cowboy"></span></a>
  826.  
  827. </div>
  828.  
  829. <!-------------------------------- scripts ---->
  830.  
  831. <!---- scroll to top by paul underwood ---->
  832.  
  833. <script>
  834. $(document).ready(function(){
  835. $(".rightwrap").scroll(function(){
  836. if ($(this).scrollTop() > 100) {
  837. $(".top").fadeIn();
  838. } else {
  839. $(".top").fadeOut();
  840. }
  841. });
  842.  
  843. $(".top").click(function(){
  844. $(".rightwrap").animate({scrollTop : 0},800);
  845. return false;
  846. });
  847.  
  848. });
  849. </script>
  850.  
  851. <!---- audio player by @shythemes ---->
  852.  
  853. <script>
  854. $(document).ready(function(){
  855. $("iframe.tumblr_audio_player").load( function() {
  856. $("iframe.tumblr_audio_player").contents().find("head").append($("<style type="text/css"> .audio-player{background:transparent;!important}</style>"));
  857. });
  858. });
  859. </script>
  860.  
  861. <!---- photosets by @annasthms and @eggdesign ---->
  862.  
  863. <script>
  864. function gatherData(images, arr) {
  865. for (let i = 0; i < images.length; i++) {
  866. let currentData = {
  867. "width": images[i].getAttribute("data-width"),
  868. "height": images[i].getAttribute("data-height"),
  869. "low_res": images[i].getAttribute("data-lowres"),
  870. "high_res": images[i].getAttribute("data-highres")
  871. };
  872. arr.push(currentData);
  873. }
  874. }
  875. function getIndex(elem) {
  876. let i = 0;
  877. while( (elem = elem.previousElementSibling) != null ) i++;
  878. return i;
  879. }
  880. function lightbox(elem) {
  881. let currentPhotoset = elem.parentNode;
  882. let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  883. let data = [];
  884. gatherData(photosetPhotos, data);
  885. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  886. }
  887. $(document).ready(function(){
  888. undoPhotoset({
  889. "posts":".text",
  890. "text class":"",
  891. "photoset class":"ph"
  892. },false);
  893. });
  894. </script>
  895.  
  896. <!---- npf images readjustment by @glenthemes ---->
  897.  
  898. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  899. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  900. <script src="//dl.dropbox.com/s/aqo7pinjzfub4tn/npf-legacy.js"></script>
  901.  
  902. <style type="text/css">
  903. :root {
  904. --NPF-Image-Spacing:4px;
  905. --NPF-Bottom-Gap-From-Captions:0;
  906. }
  907. </style>
  908.  
  909. <!---- flexible frames by @nouvae ---->
  910.  
  911. <script>
  912. $(document).ready(function(){
  913. function flexFrame() {
  914. $("entries").each(function() {
  915. $(this).find("iframe").wrap("<div class="iframe-flex"></div>");
  916. flexibleFrames($(".iframe-flex"));
  917. });
  918. flexibleFrames($(".video"));}
  919. $(document).ready(flexFrame);
  920. });
  921. </script>
  922.  
  923. <!---- notecount shortener by @shythemes ---->
  924.  
  925. <script>
  926. var $container = $(".when");
  927. $container.find(".notecount").each(function(){
  928. var n = $(this).html().split(" ")[0].replace(/,/g, "");
  929. if (n > 999) {
  930. n = Math.floor(n / 100) / 10;
  931. $(this).text(n + "k notes");
  932. }
  933. });
  934. </script>
  935.  
  936. <!---- tooltips by malihu ---->
  937.  
  938. <script type="text/javascript">
  939. (function($){
  940. $(document).ready(function(){
  941. $("[title]").style_my_tooltips({
  942. tip_follows_cursor:true,
  943. tip_delay_time:200,
  944. tip_fade_speed:300
  945. });
  946. });
  947. })(jQuery);
  948. </script>
  949.  
  950. <!-------------------------------- end of scripts ---->
  951.  
  952. </body>
  953. </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!