API tools faq
paste
sylphthm

ino theme revamp

sylphthm
Oct 27th, 2019
811
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5.  
  6. THEME 01 ― INO, REVAMP
  7. © SYLPHTHM 2019
  8. https://sylphthm.tumblr.com/
  9.  
  10.  
  11. -->
  12.  
  13. <head>
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{image:favicon}">
  16.  
  17. <!-- fonts + icons -->
  18.  
  19. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700|IBM+Plex+Mono:400,700|Karla:400,700|Noto+Serif:400,700|PT+Sans:400,700|PT+Serif:400,700|Roboto+Mono:400,700|Roboto+Slab:400,700|Source+Code+Pro:400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  20. <script src="https://unpkg.com/feather-icons"></script>
  21.  
  22.  
  23. <!-- meta tags -->
  24.  
  25. <meta name="color:background" content="#f9f9f9" />
  26. <meta name="color:text" content="#888" />
  27. <meta name="color:link" content="#000" />
  28. <meta name="color:link hover" content="#000" />
  29. <meta name="color:accent" content="#ccc" />
  30. <meta name="color:highlight" content="#ccc" />
  31.  
  32. <meta name="text:title" content="title" />
  33. <meta name="text:link1" content="link1" />
  34. <meta name="text:url1" content="url" />
  35. <meta name="text:link2" content="link2" />
  36. <meta name="text:url2" content="url" />
  37. <meta name="text:link3" content="link3" />
  38. <meta name="text:url3" content="url" />
  39. <meta name="text:link4" content="link4" />
  40. <meta name="text:url4" content="url" />
  41. <meta name="text:desc" content="description" />
  42. <meta name="text:title one" content="updates" />
  43. <meta name="text:content one" content="here is an update" />
  44. <meta name="text:title two" content="two" />
  45. <meta name="text:content two" content="here is text" />
  46. <meta name="text:title three" content="three" />
  47. <meta name="text:content three" content="here is text" />
  48.  
  49. <meta name="select:font family" title="karla" content="'Karla', sans-serif" />
  50. <meta name="select:font family" title="pt sans" content="'PT Sans', sans-serif" />
  51. <meta name="select:font family" title="fira sans" content="'Fira Sans', sans-serif" />
  52. <meta name="select:font family" title="roboto slab" content="'Roboto Slab', serif" />
  53. <meta name="select:font family" title="pt serif" content="'PT Serif', serif" />
  54. <meta name="select:font family" title="noto serif" content="'Noto Serif', serif" />
  55. <meta name="select:font family" title="roboto mono" content="'Roboto Mono', monospace" />
  56. <meta name="select:font family" title="sourse code pro" content="'Source Code Pro', monospace" />
  57. <meta name="select:font family" title="ibm plex mono" content="'IBM Plex Mono', monospace" />
  58. <meta name="select:font size" content="10px" />
  59. <meta name="select:font size" content="11px" />
  60. <meta name="select:font size" content="12px" />
  61. <meta name="select:font size" content="13px" />
  62. <meta name="select:font size" content="14px" />
  63. <meta name="select:post width" title="small" content="30%" />
  64. <meta name="select:post width" title="medium" content="40%" />
  65. <meta name="select:post width" title="large" content="50%" />
  66.  
  67. <meta name="image:favicon" content=".png" />
  68. <meta name="if:dark controls" content="" />
  69. <meta name="if:update tab" content="" />
  70. <meta name="if:infinite scroll" content="" />
  71. <meta name="if:captions" content="" />
  72. <meta name="if:link underline" content="" />
  73. <meta name="if:tags" content="" />
  74. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  75.  
  76.  
  77. <style type="text/css">
  78.  
  79. /* general */
  80. body {
  81. font-family: {select:font family};
  82. font-size: {select:font size};
  83. font-weight: normal;
  84. text-decoration: none;
  85. letter-spacing: 0.5px;
  86. line-height: 150%;
  87. text-transform: lowercase;
  88. overflow-x: hidden;
  89. background-color: {color:background};
  90. color: {color:text};
  91. }
  92.  
  93. a {
  94. color: {color:link};
  95. text-decoration: none;
  96. -webkit-transition-duration: 0.5s;
  97. -moz-transition-duration: 0.5s;
  98. -o-transition-duration: 0.5s;
  99. transition-duration: 0.5s;
  100. }
  101.  
  102. a:hover {
  103. color: {color:link hover};
  104. text-decoration: none;
  105. -webkit-transition-duration: 0.5s;
  106. -moz-transition-duration: 0.5s;
  107. -o-transition-duration: 0.5s;
  108. transition-duration: 0.5s;
  109. }
  110.  
  111. {block:iflinkunderline}
  112. .c a {
  113. border-bottom: 1px solid;
  114. }
  115. {/block:iflinkunderline}
  116.  
  117. h1, h2, h3, h4, h5, #title {
  118. margin: 0 0 10px 0;
  119. color: {color:link};
  120. letter-spacing: 1px;
  121. line-height: 200%;
  122. font-weight: bold;
  123. -webkit-transition-duration: 0.5s;
  124. -moz-transition-duration: 0.5s;
  125. -o-transition-duration: 0.5s;
  126. transition-duration: 0.5s;
  127. }
  128.  
  129. #title h3:hover {
  130. color: {color:link hover};
  131. -webkit-transition-duration: 0.5s;
  132. -moz-transition-duration: 0.5s;
  133. -o-transition-duration: 0.5s;
  134. transition-duration: 0.5s;
  135. }
  136.  
  137. blockquote {
  138. margin: 0;
  139. padding: 0;
  140. border: 0;
  141. }
  142.  
  143. blockquote blockquote {
  144. margin-left: 15px;
  145. padding-left: 7px;
  146. border-left: 1.5px solid {color:link hover};
  147. }
  148.  
  149. pre {
  150. padding: 5px 10px;
  151. display: block;
  152. overflow: scroll;
  153. color: {color:background};
  154. background-color: #4b535b;
  155. }
  156.  
  157. hr {
  158. width: 50%;
  159. height: 1.5px;
  160. border: 0;
  161. background-color: {color:link hover};
  162. }
  163.  
  164. u {
  165. text-decoration: none;
  166. border-bottom: 1.5px solid;
  167. }
  168.  
  169. blockquote { margin: 0; }
  170. ul { list-style: none;}
  171. ul li:before { content: "•"; padding-right: 5px; }
  172. a.tumblr_blog { font-weight: bold; border: 0;}
  173. .spotify_audio_player { height: 80px!important; width: 100%!important; }
  174.  
  175. .container {
  176. -webkit-animation: fadein 4s;
  177. -moz-animation: fadein 4s;
  178. -ms-animation: fadein 4s;
  179. -o-animation: fadein 4s;
  180. animation: fadein 4s;
  181. }
  182.  
  183. /* posts */
  184. .posts {
  185. width: {select:post width};
  186. margin-top: 250px;
  187. margin-bottom: 50px;
  188. margin-left: 15%;
  189. z-index: 10;
  190. }
  191.  
  192. .posts img:not(.tumblr_avatar), .p img, .t img, .tmblr-full img, .video {
  193. max-width: 100%;
  194. margin-bottom: 2px;
  195. height: auto;
  196. display: block;
  197. }
  198.  
  199. .ps .c, .p .c {
  200. margin-top: 10px;
  201. display: block!important
  202. }
  203.  
  204. .photo-slideshow {
  205. visibility: visible!important;
  206. display: block!important;
  207. }
  208.  
  209. .photo-slideshow img { margin-bottom: 2px; }
  210. .photo-data { margin-bottom: 8px; }
  211.  
  212. .lightbox-image, #tumblr_lightbox img {
  213. box-shadow: none !important;
  214. border-radius: 0 !important;
  215. max-width: none;
  216. }
  217.  
  218. .vignette, #vignette { opacity: 0; }
  219. .tmblr-lightbox, #tumblr_lightbox { background-color: rgba(255,255,255,.5) !important; }
  220.  
  221. #lt, #que, .audio {
  222. padding: 15px 20px;
  223. background-color: {color:accent};
  224. }
  225.  
  226. #lt h3 { margin-bottom: -10px; }
  227.  
  228. #pbu {
  229. background-color: transparent;
  230. width: 33px;
  231. max-height: 40px;
  232. overflow: hidden;
  233. }
  234.  
  235. #pb {
  236. background-color: transparent;
  237. position: absolute;
  238. margin-left: 0px;
  239. }
  240.  
  241. #aucap {
  242. line-height: 20%;
  243. margin: 0 0 5px 50px;
  244. }
  245.  
  246. .chat .even {
  247. display: block;
  248. margin: 5px 0;
  249. padding: 5px 10px;
  250. background-color: {color:accent};
  251. }
  252.  
  253. .tumblr_video_container {
  254. width: auto!important;
  255. height: auto!important;
  256. }
  257.  
  258. /* post info */
  259. .info {
  260. margin-top: 10px;
  261. z-index: 10;
  262. }
  263.  
  264. .info a { color: {color:italics}; }
  265. .info a:hover { color: {color:link}; }
  266.  
  267. /* header */
  268. .headwrap {
  269. position: fixed;
  270. width: 100%;
  271. height: 150px;
  272. top: 0;
  273. color: {color:link};
  274. background-color: {color:background};
  275. z-index: 19;
  276. }
  277.  
  278. .head {
  279. position: fixed;
  280. margin-top: 50px;
  281. left: 15%;
  282. }
  283.  
  284. #sti h3 { color: {color:link hover}; }
  285.  
  286. {block:ifnotinfinitescroll}
  287. /* footer */
  288. .foot {
  289. position: relative;
  290. left: 0; right: 0; bottom: 0;
  291. margin: 100px 0;
  292. font-weight: bold;
  293. z-index: 19;
  294. }
  295.  
  296. .foot a { color: {color:link hover}; }
  297. .foot a:hover { color: {color:link}; }
  298.  
  299. #pagiwrap {
  300. position: relative;
  301. left: 15%;
  302. max-width: {select:post width};
  303. }
  304.  
  305. #cp i {
  306. border-bottom: 1px solid {color:link hover};
  307. color: {color:link hover};
  308. }
  309. {/block:ifnotinfinitescroll}
  310.  
  311. {block:ifupdatetab}
  312. /* update tab */
  313. .updatetab {
  314. position: fixed;
  315. top: 50px;
  316. right: 15%;
  317. margin: 0;
  318. z-index: 1000;
  319. }
  320.  
  321. button, .button {
  322. position: fixed;
  323. margin: 0;
  324. padding: 0;
  325. top: 50px;
  326. right: 15%;
  327. border: 0;
  328. color: {color:link};
  329. background: transparent;
  330. -webkit-transition-duration: 0.5s;
  331. -moz-transition-duration: 0.5s;
  332. -o-transition-duration: 0.5s;
  333. transition-duration: 0.5s;
  334. }
  335.  
  336. button:hover, .button:hover {
  337. color: {color:link hover};
  338. cursor: pointer;
  339. border: 0;
  340. -webkit-transition-duration: 0.5s;
  341. -moz-transition-duration: 0.5s;
  342. -o-transition-duration: 0.5s;
  343. transition-duration: 0.5s;
  344. }
  345.  
  346. button:focus { outline: 0; }
  347.  
  348. #tabsec {
  349. position: fixed;
  350. top: 100px;
  351. right: 15%;
  352. text-align: right;
  353. line-height: 100%;
  354. background-color: {color:background};
  355. z-index: 1000;
  356. }
  357.  
  358. .tab {
  359. display: none;
  360. }
  361. {/block:ifupdatetab}
  362.  
  363. /* permalink */
  364. .perma {
  365. position: absolute;
  366. width: {select:post width};
  367. margin-top: 100px;
  368. margin-left: 15%;
  369. z-index: 9;
  370. }
  371.  
  372. a.more_notes_link {
  373. position: absolute;
  374. left: 0;
  375. margin-bottom: 50px;
  376. }
  377.  
  378. .perma ol { list-style: none; margin-left: -40px; }
  379. .perma h3 { margin: 0; }
  380. .perma img { display: none; }
  381.  
  382. /* error page */
  383. .wrapper_notfound {
  384. position: fixed;
  385. visibility: hidden;
  386. left: 0px;
  387. top: 0px;
  388. width: 100%;
  389. height: 100%;
  390. background-color: {color:background};
  391. z-index: 1000;
  392. }
  393.  
  394. .actual_notfound {
  395. position: absolute;
  396. left: 50%;
  397. top: 50%;
  398. width: 30%;
  399. padding: 20px;
  400. transform: translate(-50%, -50%);
  401. font-size: 2em;
  402. line-height: 150%;
  403. text-align: center;
  404. }
  405.  
  406. .actual_notfound h3 { color: {color:link hover}; }
  407.  
  408. /* mobile display */
  409. @media screen and (max-width: 700px) {
  410.  
  411. .headwrap {
  412. position: fixed;
  413. width: 100%;
  414. height: 100px;
  415. top: 0;
  416. left: 0;
  417. color: {color:link};
  418. background-color: {color:background};
  419. z-index: 19;
  420. }
  421.  
  422. #sti {
  423. position: fixed;
  424. top: 30px;
  425. left: 50px;
  426. }
  427.  
  428. #links {
  429. position: fixed;
  430. top: 30px;
  431. right: 50px;
  432. }
  433.  
  434. .posts {
  435. width: 80%;
  436. margin-top: 100px;
  437. margin-bottom: 50px;
  438. margin-left: 10%;
  439. }
  440.  
  441. #pagiwrap {
  442. max-width: 84%;
  443. left: 8%;
  444. }
  445.  
  446. .perma {
  447. width: 80%;
  448. margin-left: -8%;
  449. padding-top: 100px;
  450. z-index: 10;
  451. }
  452.  
  453. .cred, #scrollToTop {
  454. background-color: {color:background};
  455. padding: 0 5px;
  456. }
  457.  
  458. {block:ifupdatetab}
  459. .updatetab { right: 30px; }
  460. #tabsec { padding: 5px 10px; }
  461. {/block:ifupdatetab}
  462.  
  463. #desc { display: none; }
  464. .actual_notfound, .wrapper_notfound { width: 100%; }
  465. iframe.tmblr-iframe { display: none!important; }
  466. }
  467.  
  468.  
  469. /* extras */
  470.  
  471. * { cursor:url(https://i.imgur.com/dHusUiR.png),auto }
  472. a:hover { cursor:url(https://i.imgur.com/ZM41vky.png),progress!important }
  473.  
  474. ::-webkit-scrollbar {
  475. width: 2px;
  476. height: 3px;
  477. }
  478. ::-webkit-scrollbar-thumb {
  479. background-color: {color:link hover};
  480. }
  481.  
  482. ::-moz-selection {
  483. background-color: {color:highlight};
  484. color: {color:bold};
  485. }
  486. ::selection {
  487. background-color: {color:highlight};
  488. color: {color:bold};
  489. }
  490.  
  491. /* credit - DO NOT TOUCH! */
  492. .cred {
  493. position: fixed;
  494. bottom: 50px;
  495. right: 15%;
  496. z-index: 20;
  497. }
  498.  
  499. iframe.tmblr-iframe {
  500. z-index:99999999999999!important;
  501. top: 50px!important;
  502. {block:ifnotupdatetab}right: 15%!important;{/block:ifnotupdatetab}
  503. {block:ifupdatetab}right: 17%!important;{/block:ifupdatetab}
  504. opacity: 0.4;
  505. {block:ifdarkcontrols}
  506. filter: invert(1) contrast(150%);
  507. -webkit-filter: invert(1) contrast(150%);
  508. -o-filter: invert(1) contrast(150%);
  509. -moz-filter: invert(1) contrast(150%);
  510. -ms-filter: invert(1) contrast(150%);
  511. {/block:ifdarkcontrols}
  512. transform: scale(0.50);
  513. transform-origin: 100% 0;
  514. -webkit-transform: scale(0.50);
  515. -webkit-transform-origin: 100% 0;
  516. -o-transform: scale(0.50);
  517. -o-transform-origin: 100% 0;
  518. -moz-transform: scale(0.50);
  519. -moz-transform-origin: 100% 0;
  520. -ms-transform: scale(0.50);
  521. -ms-transform-origin: 100% 0;
  522. -webkit-transition-duration: 0.5s;
  523. -moz-transition-duration: 0.5s;
  524. -o-transition-duration: 0.5s;
  525. transition-duration: 0.5s;
  526. }
  527.  
  528. iframe.tmblr-iframe:hover {
  529. opacity: 0.7!important;
  530. -webkit-transition-duration: 0.5s;
  531. -moz-transition-duration: 0.5s;
  532. -o-transition-duration: 0.5s;
  533. transition-duration: 0.5s;
  534. }
  535.  
  536. .tmblr-iframe--app-cta-button { display: none!important; }
  537.  
  538. #scrollToTop:link,
  539. #scrollToTop:visited {
  540. display: none;
  541. position: fixed;
  542. bottom: 80px;
  543. right: 15%;
  544. z-index: 20;
  545. -webkit-animation: fadein 2s;
  546. -moz-animation: fadein 2s;
  547. -ms-animation: fadein 2s;
  548. -o-animation: fadein 2s;
  549. animation: fadein 2s;
  550. }
  551.  
  552. .feather {
  553. float: left;
  554. margin: 0;
  555. padding: 0;
  556. }
  557.  
  558. @keyframes fadein {
  559. from { opacity: 0; }
  560. to { opacity: 1; }
  561. }
  562. @-moz-keyframes fadein {
  563. from { opacity: 0; }
  564. to { opacity: 1; }
  565. }
  566. @-webkit-keyframes fadein {
  567. from { opacity: 0; }
  568. to { opacity: 1; }
  569. }
  570. @-ms-keyframes fadein {
  571. from { opacity: 0; }
  572. to { opacity: 1; }
  573. }
  574. @-o-keyframes fadein {
  575. from { opacity: 0; }
  576. to { opacity: 1; }
  577. }
  578.  
  579.  
  580. </style>
  581. </head>
  582.  
  583.  
  584. <body>
  585. <div class="container">
  586.  
  587.  
  588. <!-- sidebar -->
  589. <sidebar class="headwrap">
  590. <div class="head">
  591. <div id="sti"><a href="/" title="{text:title}"><h3>{text:title}</h3></a></div><p>
  592. <div id="links">
  593. <a href="{text:url1}" title="{text:link1}">{text:link1}&emsp;</a>
  594. <a href="{text:url2}" title="{text:link2}">{text:link2}&emsp;</a>
  595. <a href="{text:url3}" title="{text:link3}">{text:link3}&emsp;</a>
  596. <a href="{text:url4}" title="{text:link4}">{text:link4}&emsp;</a>
  597. </div><p>
  598. <div id="desc">
  599. {text:desc}
  600. </div>
  601. </div>
  602. </sidebar>
  603.  
  604.  
  605. {block:ifupdatetab}
  606. <!-- update tab -->
  607. <div class="updatetab">
  608. <button id="button" title="updates">
  609. <i data-feather="plus" width="12px"></i>
  610. </button>
  611. <div class="tab">
  612. <div id="tabsec">
  613. <b>{text:title one}</b>
  614. <p>{text:content one}</p><br>
  615. <b>{text:title two}</b>
  616. <p>{text:content two}</p><br>
  617. <b>{text:title three}</b>
  618. <p>{text:content three}</p>
  619. </div>
  620. </div>
  621. </div>
  622. {/block:ifupdatetab}
  623.  
  624. <!-- posts begin -->
  625. {block:Posts}
  626. <div class="posts" id="{PostID}">
  627.  
  628. {block:Text}
  629. <div class="t">
  630. {block:Title}
  631. <h3 id="title">{Title}</h3>
  632. {/block:Title}
  633. <div class="c">{Body}</div>
  634. </div>
  635. {/block:Text}
  636.  
  637. {block:Photo}
  638. <div class="p">
  639. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  640. {block:ifcaptions}{block:Caption}
  641. <div class="c">{Caption}</div>
  642. {/block:Caption}{/block:ifcaptions}
  643. </div>
  644. {/block:Photo}
  645.  
  646. {block:Photoset}
  647. <div class="ps">
  648. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}"><div class="photo-data">{block:Photos}
  649. <div class="pxu-photo" onclick="Tumblr.Lightbox.init([/*/**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif}/> </div>
  650. <div class="icons">{/block:Photos}
  651. </div></div></div></div>
  652. </div>
  653. {block:ifcaptions}{block:Caption}
  654. <div class="c">{Caption}</div>
  655. {/block:Caption}{/block:ifcaptions}
  656. {/block:Photoset}
  657.  
  658. {block:Quote}
  659. <div class="quote">
  660. <div id="qu">
  661. <i><h3 id="title">{Quote}</h3></i>
  662. </div>
  663. <div id="source">
  664. {block:Source}
  665. ― {Source}
  666. {/block:Source}
  667. </div>
  668. </div>
  669. {/block:Quote}
  670.  
  671. {block:Chat}
  672. <div class="chat">
  673. {block:Title}<h3 id="title">{Title}</h3></div>{/block:Title}
  674. {block:Lines}
  675. <span class="{Alt}">{block:Label}<b>{Label}</b>{/block:Label}
  676. {Line}</span>
  677. {/block:Lines}
  678. </div>
  679. {/block:Chat}
  680.  
  681. {block:Audio}
  682. <div class="audio">
  683. <div id="pb"><div id="pbu">
  684. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  685. </div></div>
  686. <div id="aucap">
  687. {block:TrackName}<div id="title">{TrackName}</div>{/block:TrackName}
  688. <br>{block:Artist}by {Artist}{/block:Artist}
  689. </div>
  690. {block:ifcaptions}{block:Caption}<p>
  691. <div class="c">{Caption}</div>
  692. {/block:Caption}{/block:ifcaptions}
  693. </div>
  694. {/block:Audio}
  695.  
  696. {block:Link}
  697. <div class="l">
  698. <div id="lt">
  699. {block:Host}<b>{Host}</b>{/block:Host}<br>
  700. <a href="{URL}" title="{Name}"><h3 id="title">{Name}</h3></div></a>
  701. </div>
  702. {block:ifcaptions}{block:Excerpt}<br>{Excerpt}{/block:Excerpt}{/block:ifcaptions}
  703. </div>
  704. {/block:Link}
  705.  
  706. {block:Video}
  707. <div class="video">
  708. {Video-500}
  709. {block:ifcaptions}{block:Caption}<p>
  710. <div class="c">{Caption}</div>
  711. {/block:Caption}{/block:ifcaptions}
  712. </div>
  713. {/block:Video}
  714.  
  715. {block:Answer}
  716. <div class="ask">
  717. <div id="que">
  718. <b>{Asker}&nbsp;</b>
  719. {Question}
  720. </div>
  721. <div id="an">
  722. {Answer}
  723. </div>
  724. </div>
  725. {/block:Answer}
  726.  
  727.  
  728. <!--{block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}{/block:ContentSource}--><!-- {block:NoRebloggedFrom}
  729. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  730. {/block:NoRebloggedFrom} -->
  731.  
  732. <!-- post info -->
  733. <div class="info">
  734. {block:Date}
  735. <a href="{Permalink}" title="{TimeAgo}">{TimeAgo}</a>&emsp;
  736. {/block:Date}
  737. {block:NoteCount}
  738. <a href="{Permalink}" title="{NoteCountWithLabel}">{NoteCountWithLabel}</a>&emsp;
  739. {/block:NoteCount}
  740. {block:iftags}{block:HasTags}{block:Tags}
  741. <a href="{TagURL}" title="{Tag}">#{Tag}</a>&emsp;
  742. {/block:Tags}{/block:HasTags}{/block:iftags}
  743. </div>
  744.  
  745. </div>
  746. {/block:Posts}
  747. <!-- posts end -->
  748.  
  749. <!-- footer -->
  750. {block:ifnotinfinitescroll}
  751. {block:Pagination}
  752. <div class="foot">
  753. <div id="pagiwrap">
  754. <div id="pagi">
  755. {block:Pagination}
  756. {block:JumpPagination length="5"}
  757. {block:CurrentPage}<span title="page {PageNumber}" id="cp"><i>{PageNumber}</i>&emsp;</span>{/block:CurrentPage}
  758. {block:JumpPage}<a title="page {PageNumber}" href="{URL}">{PageNumber}&emsp;</a>{/block:JumpPage}{/block:JumpPagination}
  759. {/block:Pagination}
  760. </div>
  761. </div>
  762. </div>
  763. {/block:Pagination}
  764. {/block:ifnotinfinitescroll}
  765.  
  766. <!-- pagination -->
  767.  
  768. {block:ifinfinitescroll}
  769. {block:Pagination}
  770. <div class="pagi">
  771. {block:NextPage}<a class="next" href="{NextPage}"></a>{/block:NextPage}
  772. </div>
  773. {/block:Pagination}
  774. {/block:ifinfinitescroll}
  775.  
  776. <!-- perma -->
  777. {block:PostNotes}
  778. {block:PermalinkPage}
  779. <div class="perma">
  780. <h3 id="title">info</h3>
  781. <ol>{PostNotes}</ol>
  782. </div>
  783. {/block:PermalinkPage}
  784. {/block:PostNotes}
  785.  
  786. <!-- error page -->
  787. <div class="wrapper_notfound">
  788. <div class="actual_notfound">
  789. <h3>not found</h3>
  790. sorry, but what you are looking for does not exist. please click <a href="javascript:history.back()" title="refresh">here</a> to get back to the previous page.
  791. </div>
  792. </div>
  793.  
  794. <!-- scroll to top -->
  795. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="up?"><i data-feather="arrow-up" width="12px"></i></a>
  796.  
  797. <!-- credit - DO NOT TOUCH! -->
  798. <a class="cred" href="https://sylphthm.tumblr.com/" title="code by sylph."><i data-feather="eye" width="12px"></i></a>
  799. </div></div>
  800.  
  801.  
  802. <!-- all scripts -->
  803.  
  804. <!-- scripts -->
  805. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  806. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  807. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  808. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  809. <script src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  810.  
  811. <!-- error page -->
  812. <script>
  813. $(document).ready(function() {
  814. if ($('p:contains("The URL you requested could not be found.")').html()) {
  815. $(".wrapper_notfound").css( "visibility", "visible" );
  816. $(".article_position").remove();
  817. $('title').prepend( "not found | " ); }
  818. });
  819. </script>
  820.  
  821. {block:ifupdatetab}
  822. <!-- update tab -->
  823. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  824. <script>
  825. $(document).ready(function(){
  826. $("button").click(function(){
  827. $(".tab").toggle(1000);
  828. });
  829. });
  830. </script>
  831. {/block:ifupdatetab}
  832.  
  833. <!-- unnest captions -->
  834. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  835. <script>
  836. $(function(){
  837. $('.posts').unnest({
  838. yourCaption: ".c",
  839. wrapName: ".user",
  840. usernameColon: true,
  841. newCaptionUsername: true,
  842. tumblrAvatars: false,
  843. tumblrAvatarClass: ".userimg"
  844. });
  845. });
  846. </script>
  847.  
  848. <!-- pxu photosets -->
  849. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  850. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  851. <script type="text/javascript" src="/path/to/js/bctphotoset.min.js"></script>
  852. <script type="text/javascript">
  853. $(document).ready(function() {
  854. $('.photo-slideshow').pxuPhotoset({
  855. lightbox: true,
  856. rounded: false,
  857. highRes: true,
  858. gutter: '2px',
  859. borderRadius: '0',
  860. photoset: '.photo-slideshow',
  861. photoWrap: '.photo-data',
  862. photo: '.pxu-photo'
  863. }, function() {
  864. $('.photo-slideshow').pxuPhotoset({
  865. lightbox: true,
  866. rounded: false,
  867. highRes: true,
  868. gutter: '2px',
  869. borderRadius: '0',
  870. photoset: '.photo-slideshow',
  871. photoWrap: '.photo-data',
  872. photo: '.pxu-photo'
  873. }, function() {
  874. $(this).animate({opacity:1});
  875. $('.container').infinitescroll({
  876. navSelector : "div.next",
  877. nextSelector : "div.next a:first",
  878. itemSelector : ".container div.posts"
  879. },function(newElements){
  880. $(newElements).find('.photo-slideshow').pxuPhotoset();
  881. }
  882. });
  883. });
  884. });
  885. </script>
  886.  
  887. {block:ifinfinitescroll}
  888. <!-- infinite scroll -->
  889. <script src="https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.js"></script>
  890. <script src="/path/to/infinite-scroll.pkgd.min.js"></script>
  891. <script>
  892. $('.container').infiniteScroll({
  893. path: '.next',
  894. append: '.posts',
  895. history: false
  896. },
  897. function( newElements ) {
  898. var $newElems = $( newElements ).css({ opacity: 0 });
  899. $newElems.unnest();
  900. $newElems.animate({ opacity: 1 });
  901. },
  902. function( newElements ) {
  903. var $newElems = $(newElements).css({ opacity: 0 });
  904. $('.photo-slideshow').pxuPhotoset({
  905. lightbox: true,
  906. rounded: false,
  907. gutter: '2px',
  908. borderRadius: '0',
  909. photoset: '.photo-slideshow',
  910. photoWrap: '.photo-data',
  911. photo: '.pxu-photo'
  912. }, function() {
  913. $(this).animate({opacity:1});
  914. });
  915. });
  916. </script>
  917. {/block:ifinfinitescroll}
  918.  
  919. <script>feather.replace()</script>
  920.  
  921. </div>
  922. </body>
  923. </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!