codesbyjack

THEME #17 drip / made by jinsoouls

Dec 11th, 2019 (edited)
1,764
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.18 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. -` drip by jinsoouls ´-
  6. you know the deal, the usual rules
  7. apply, don't remove credit,
  8. repost or claim as your own!
  9.  
  10. -->
  11.  
  12.  
  13. <meta name="color:background" content="#eeeeee"/>
  14. <meta name="color:container" content="#f6f6f6"/>
  15. <meta name="color:posts" content="#ffffff"/>
  16. <meta name="color:border" content="#eeeeee"/>
  17. <meta name="color:accent 1" content="#65504b"/>
  18. <meta name="color:accent 2" content="#b09894"/>
  19. <meta name="color:accent 3" content="#282828"/>
  20. <meta name="color:title" content="#ffffff"/>
  21. <meta name="color:text" content="#424242"/>
  22. <meta name="color:accent text" content="#ffffff"/>
  23. <meta name="color:bold" content="#b09894"/>
  24. <meta name="color:italic" content="#7e7e7e"/>
  25. <meta name="color:link" content="#b09894"/>
  26. <meta name="color:hover link" content="#cfcfcf"/>
  27.  
  28. <meta name="image:background" content=""/>
  29. <meta name="image:sidebar" content=""/>
  30. <meta name="image:nav" content=""/>
  31.  
  32. <meta name="if:grayscale graphics" content="1"/>
  33. <meta name="if:grayscale posts" content="1"/>
  34. <meta name="if:jello effect on links" content="1"/>
  35.  
  36. <meta name="text:custom title" content="drip, drip, drip.">
  37. <meta name="text:extra link" content="/">
  38. <meta name="text:extra link title" content="extra">
  39. <meta name="text:custom description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  40. <meta name="text:nav desc" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  41. <meta name="text:nav link 1" content="/">
  42. <meta name="text:nav link 1 title" content="link one">
  43. <meta name="text:nav link 2" content="/">
  44. <meta name="text:nav link 2 title" content="link two">
  45. <meta name="text:nav link 3" content="/">
  46. <meta name="text:nav link 3 title" content="link three">
  47. <meta name="text:nav link 4" content="/">
  48. <meta name="text:nav link 4 title" content="link four">
  49. <meta name="text:nav link 5" content="/">
  50. <meta name="text:nav link 5 title" content="link five">
  51. <head>
  52.  
  53. <title>{Title}</title>
  54. <link rel="shortcut icon" href="{Favicon}">
  55. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  56. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  57.  
  58. <!-- jquery -->
  59. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  60.  
  61. <!-- script for tooltips -->
  62. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  63.  
  64. <!-- google fonts -->
  65. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Quicksand:300,400,500,700&display=swap" rel="stylesheet">
  66.  
  67. <!-- photoset.css by annathms and espoirthemes -->
  68. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  69.  
  70. <!-- autoresize video script by shythemes -->
  71. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  72.  
  73. <!-- honeybee by suiomi -->
  74. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  75.  
  76. <!-- animate.css -->
  77. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  78.  
  79. <style>
  80.  
  81. ::-webkit-scrollbar {
  82. width: 1px;
  83. height: 1px;
  84. background: transparent;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb {
  88. background: transparent;
  89. }
  90.  
  91. ::selection {
  92. color:{color:accent text};
  93. background-color: {color:accent 2};
  94. }
  95.  
  96. ::-moz-selection {
  97. color:{color:accent text};
  98. background-color: {color:accent 2};
  99. }
  100.  
  101. #s-m-t-tooltip {
  102. max-width:300px;
  103. padding:9px 10px 8px 10px;
  104. margin:20px 7px 2px 20px;
  105. background-color:{color:accent 2};
  106. font-size:11px;
  107. text-transform:lowercase;
  108. letter-spacing:0.5px;
  109. color:{color:accent text};
  110. z-index:999999999999999999999999999999999999;
  111. border-radius:5px;
  112. font-weight:500;
  113. }
  114.  
  115. body {
  116. background:{color:background};
  117. background-image:url({image:background});
  118. margin:0px;
  119. color:{color:text};
  120. font-family: 'Open Sans', sans-serif;
  121. font-size:10px;
  122. line-height:100%;
  123. }
  124.  
  125. blockquote {
  126. padding-left:20px;
  127. width:auto;
  128. margin-left:10px;
  129. border-left:1px solid {color:border};
  130. }
  131.  
  132. blockquote blockquote {
  133. padding-left:20px;
  134. margin-left:10px;
  135. border-left:1px solid {color:border};
  136. }
  137.  
  138. h1 {
  139. font-size:35px;
  140. color:{color:accent 2};
  141. text-align:center;
  142. line-height:100%;
  143. font-weight:lighter;
  144. margin:5px;
  145. text-transform:lowercase;
  146. font-family: 'Quicksand', sans-serif;
  147. }
  148.  
  149. h2 {
  150. font-size:18px;
  151. color:{color:accent 1};
  152. text-align:center;
  153. font-weight:lighter;
  154. text-transform:lowercase;
  155. font-family: 'Quicksand', sans-serif;
  156. }
  157.  
  158. a {
  159. text-decoration:none;
  160. color:{color:link};
  161. -moz-transition-duration:0.8s;
  162. -webkit-transition-duration:0.8s;
  163. -o-transition-duration:0.8s;
  164. }
  165.  
  166. a:hover {
  167. color:{color:hover link};
  168. -moz-transition-duration:0.8s;
  169. -webkit-transition-duration:0.8s;
  170. -o-transition-duration:0.8s;
  171. }
  172.  
  173. b {color:{color:bold};}
  174. strong {color:{color:bold}}
  175. i {color:{color:italic};}
  176. em {color:{color:italic};}
  177. sub {font-size:10px;}
  178. sup {font-size:10px;}
  179. small {font-size:10px;}
  180.  
  181. .container {
  182. width:900px;
  183. height:550px;
  184. background-color:{color:container};
  185. position: absolute;
  186. overflow:hidden;
  187. margin:auto;
  188. left:0px;right:0px;top:0px; bottom:0px;
  189. border-radius:7.5px;
  190. border:1px solid {color:border};
  191. }
  192.  
  193. #entries {
  194. position:absolute;
  195. width:550px;
  196. height:550px;
  197. z-index:2;
  198. display:block;
  199. overflow:scroll;
  200. left:0px;
  201. bottom:0px;
  202. }
  203.  
  204. .post {
  205. padding:20px;
  206. width:425px;
  207. background-color:{color:posts};
  208. margin:30px;
  209. margin-bottom:50px;
  210. line-height:130%;
  211. overflow:hidden;
  212. border:1px solid {color:border};
  213. border-radius:7.5px;
  214.  
  215. }
  216.  
  217. .post img {
  218. position:static;
  219. height:auto;
  220. width:auto;
  221. max-width:100%;
  222. border-radius:0px;
  223. {block:IfGrayscalePosts}
  224. -webkit-filter: grayscale(100%);
  225. filter: grayscale(100%);
  226. {/block:IfGrayscalePosts}
  227. }
  228.  
  229. .postinfo {
  230. text-transform:uppercase;
  231. font-size:10px;
  232. text-align:right;
  233. width:450px;
  234. letter-spacing:0.5px;
  235. padding:9px 7.5px 8px 7.5px;
  236. margin:-47px 0px 20px 30px;
  237. border-radius:7.5px;
  238. background-color:{color:posts};
  239. border:1px solid {color:border};
  240. }
  241.  
  242. .postinfo a {
  243. color:{color:accent 2};
  244. }
  245.  
  246. .postinfo a:hover {
  247. color:{color:accent 1};
  248. }
  249.  
  250. .postinfo div {
  251. display:inline-block;
  252. float:left;
  253. opacity:0;
  254. -moz-transition-duration:0.8s;
  255. -webkit-transition-duration:0.8s;
  256. -o-transition-duration:0.8s;
  257. }
  258.  
  259. .postinfo:hover div {
  260. opacity:1;
  261. -moz-transition-duration:0.8s;
  262. -webkit-transition-duration:0.8s;
  263. -o-transition-duration:0.8s;
  264. }
  265.  
  266. .postinfo div span {
  267. margin:0px 5px;
  268. }
  269.  
  270. .postinfo a {
  271. font-weight:500;
  272. }
  273.  
  274. .tags {
  275. width:455px;
  276. font-size:10px;
  277. padding:5px 5px 6px 5px;
  278. text-align:left;
  279. text-transform:lowercase;
  280. margin:-22px 0px 30px 30px;
  281. }
  282.  
  283. .tags b {
  284. color:{color:accent 1};
  285. margin-right:2px;
  286. text-transform:uppercase;
  287. }
  288.  
  289. .postnote {
  290. margin-top:10px;
  291. background-color:{color:posts};
  292. text-transform:lowercase;
  293. text-align:left;
  294. margin-top: 10px;
  295. background-color: #ffffff;
  296. width: 400px;
  297. padding: 10px;
  298. border-radius: 7.5px;
  299. margin: auto;
  300. margin-bottom:50px;
  301. border:1px solid {color:border};
  302. }
  303.  
  304. .postnote li {
  305. margin:5px 0px;
  306. }
  307.  
  308. /* different post types css */
  309.  
  310. .question {
  311. width:450px;
  312. padding:20px 10px 25px 10px;
  313. margin:-20px 0px 0px -20px;
  314. text-align:center;
  315. font-size:12px;
  316. border-bottom:1px solid {color:border};
  317.  
  318. }
  319.  
  320. .askerdiv {
  321. padding:5px;
  322. margin-top:-12.5px;
  323. max-width:225px;
  324. text-align:center;
  325. background-color:{color:accent 1};
  326. color:{color:accent text};
  327. text-transform:lowercase;
  328. font-size:13px;
  329. margin-left:95px;
  330. border-radius:40px;
  331. }
  332.  
  333. .askerdiv a {
  334. color:{color:accent text};
  335. font-weight:700;
  336. padding:none;
  337. border:none;
  338. }
  339.  
  340. .answer {margin:10px;}
  341.  
  342. .quotepost {text-align:center;}
  343.  
  344. .quotediv {
  345. font-size:20px;
  346. width:440px;
  347. text-align:center;
  348. border-bottom:1px solid {color:border};
  349. color:{color:accent 1};
  350. padding:15px 15px 30px 15px;
  351. text-transform:lowercase;
  352. margin:-20px 0px 0px -20px;
  353. line-height:110%;
  354. font-family: 'Quicksand', sans-serif;
  355. }
  356.  
  357. .quoteinfo {
  358. margin-top:-12.5px;
  359. color:{color:accent text};
  360. font-weight:600;
  361. padding:5px 10px;
  362. background-color:{color:accent 1};
  363. margin-bottom:10px;
  364. text-transform:lowercase;
  365. font-size:13px;
  366. border-radius:40px;
  367. font-family: 'Quicksand', sans-serif;
  368. }
  369.  
  370. .chats {
  371. font-size:13px;
  372. line-height:150%;
  373. }
  374.  
  375.  
  376. .audioplayer {
  377. text-align:left;
  378. padding:20px 10px 20px 10px;
  379. margin:-20px 0px 0px -20px;
  380. background-color:{color:accent 2};
  381. width:445px;
  382. font-size:13px;
  383. height:27.5px;
  384. }
  385.  
  386. .audioinfo {
  387. color:{color:accent 1};
  388. width:100%;
  389. font-size:10px;
  390. text-align:right;
  391. margin-top:-30px;
  392. letter-spacing:0.4px;
  393. font-weight:600;
  394. line-height:90%;
  395. }
  396.  
  397. .audioinfo div {
  398. font-size:13px;
  399. font-weight:lighter;
  400. font-family: 'Quicksand', sans-serif;
  401. }
  402.  
  403. .readmore {
  404. width:100%;
  405. text-transform:uppercase;
  406. text-align:center;
  407. padding:10px 0px;
  408. }
  409.  
  410. .readmore a {
  411. background-color:{color:accent 1};
  412. font-family: 'Quicksand', sans-serif;
  413. font-size:12px;
  414. padding:3px 15px;
  415. border:none;
  416. color:{color:accent text};
  417. border-radius:30px;
  418. font-weight:600;
  419. }
  420.  
  421. .readmore a:hover {
  422. border:none;
  423. background-color:{color:accent 2};
  424. }
  425.  
  426.  
  427. .photoset-grid {grid-gap: 5px;}
  428. [photoset-layout] div {
  429. cursor: pointer;
  430. }
  431.  
  432. [photoset-layout] img {
  433. border-radius: 2px;
  434. }
  435.  
  436. /* tumblr controls styling by cyantists */
  437. iframe.tmblr-iframe {
  438. z-index:99999999999999!important;
  439. top:0!important;
  440. right:0!important;
  441. opacity:0.4;
  442. /* delete invert(1) from here */
  443. filter:invert(1) contrast(150%);
  444. -webkit-filter:invert(1) contrast(150%);
  445. -o-filter:invert(1) contrast(150%);
  446. -moz-filter:invert(1) contrast(150%);
  447. -ms-filter:invert(1) contrast(150%);
  448. /* to here if your blog has a dark background */
  449. transform:scale(0.65);
  450. transform-origin:100% 0;
  451. -webkit-transform:scale(0.65);
  452. -webkit-transform-origin:100% 0;
  453. -o-transform:scale(0.65);
  454. -o-transform-origin:100% 0;
  455. -moz-transform:scale(0.65);
  456. -moz-transform-origin:100% 0;
  457. -ms-transform:scale(0.65);
  458. -ms-transform-origin:100% 0;}
  459.  
  460. iframe.tmblr-iframe:hover {
  461. opacity:0.6!important;}
  462. /* end control styling */
  463.  
  464.  
  465. /* side tab control css */
  466. .tabcontainer {
  467. position:absolute;
  468. width:525px;
  469. height:550px;
  470. z-index:999999999;
  471. left:0px;
  472. top:0px;
  473. display:none;
  474. }
  475.  
  476. .close {
  477. position:absolute;
  478. font-size:16px;
  479. color:{color:accent 1};
  480. border-radius:100%;
  481. right:72.5px;
  482. top:85px;
  483. z-index:9999999;
  484. -moz-transition-duration:0.8s;
  485. -webkit-transition-duration:0.8s;
  486. -o-transition-duration:0.8s;
  487. }
  488. .close:hover {
  489. cursor: pointer;
  490. color:{color:accent 2};
  491. -moz-transition-duration:0.8s;
  492. -webkit-transition-duration:0.8s;
  493. -o-transition-duration:0.8s;
  494. }
  495.  
  496. /* sidebar css */
  497.  
  498. .sidebar {
  499. position:absolute;
  500. width:325px;
  501. border-left:50px solid {color:accent 2};
  502. height:100%;
  503. z-index:2;
  504. right:0px;
  505. background-color:{color:accent 1};
  506. top:0px;
  507. text-align:center;
  508. }
  509.  
  510. .sideimg {
  511. position:absolute;
  512. width:250px;
  513. height:350px;
  514. border-radius:0px 0px 0px 30px;
  515. top:0px;
  516. z-index:1;
  517. right:0px;
  518. background-image:url({image:sidebar});
  519. background-size: 100% auto;
  520. {block:IfGrayscaleGraphics}
  521. -webkit-filter: grayscale(100%);
  522. filter: grayscale(100%);
  523. {/block:IfGrayscaleGraphics}
  524. }
  525.  
  526. .sidetitle {
  527. position:absolute;
  528. font-family: 'Quicksand', sans-serif;
  529. font-size:80px;
  530. z-index:4;
  531. line-height:100%;
  532. width:250px;
  533. text-align:left;
  534. top:100px;
  535. left:-40px;
  536. color:{color:title};
  537. text-shadow:0px 0px 7px rgb(0,0,0,0.3)
  538. }
  539.  
  540. .sidebox {
  541. position:absolute;
  542. z-index:3;
  543. width:250px;
  544. height:250px;
  545. top:70px;
  546. left:-20px;
  547. border:1px solid {color:accent 3};
  548. border-radius:20px;
  549. }
  550.  
  551. .sidelinks {
  552. position:absolute;
  553. padding:25px 10px 20px 20px;
  554. bottom:0px;
  555. border-radius:30px 0px 0px 0px;
  556. right:0px;
  557. border:1px solid {color:accent 2};
  558. border-right:0px;
  559. border-bottom:0px;
  560. }
  561.  
  562. .sidelinks div {
  563. width:100px;
  564. font-size:11px;
  565. text-transform:uppercase;
  566. color:{color:text};
  567. padding:6px 0px 4px 0px;
  568. margin:3px;
  569. font-weight:600;
  570. letter-spacing:0.5px;
  571. color:{color:accent 2};
  572. -moz-transition-duration:0.8s;
  573. -webkit-transition-duration:0.8s;
  574. -o-transition-duration:0.8s;
  575. }
  576.  
  577. .sidelinks div:hover {
  578. {block:IfJelloEffectOnLinks}
  579. animation:jello 1s;
  580. {/block:IfJelloEffectOnLinks}
  581. cursor: pointer;
  582. color:{color:accent 3};
  583. -moz-transition-duration:0.8s;
  584. -webkit-transition-duration:0.8s;
  585. -o-transition-duration:0.8s;
  586. }
  587.  
  588. .line {
  589. position:absolute;
  590. width:300px;
  591. height:100px;
  592. border-radius:0px 0px 50px 0px;
  593. border:1px solid {color:accent 1};
  594. border-top:0px;
  595. border-left:0px;
  596. }
  597.  
  598. .navbox {
  599. position:absolute;
  600. width:400px;
  601. height:400px;
  602. border-radius:7.5px;
  603. border:1px solid {color:border};
  604. background-color:{color:posts};
  605. margin:auto;
  606. overflow:hidden;
  607. left:0px;right:0px;top:0px; bottom:0px;
  608. }
  609.  
  610. .navimg {
  611. position:absolute;
  612. background-color:grey;
  613. width:200px;
  614. z-index:2;
  615. top:0px;
  616. left:0px;
  617. height:300px;
  618. overflow:hidden;
  619. border-radius:7.5px 0px 30px 0px;
  620. background-image:url({image:nav});
  621. background-size: 100% auto;
  622. {block:IfGrayscaleGraphics}
  623. -webkit-filter: grayscale(100%);
  624. filter: grayscale(100%);
  625. {/block:IfGrayscaleGraphics}
  626. }
  627.  
  628. .navdesc {
  629. position:absolute;
  630. background-color:{color:accent 2};
  631. width:360px;
  632. z-index:1;
  633. bottom:0px;
  634. left:0px;
  635. height:125px;
  636. border:20px solid {color:accent 2};
  637. color:{color:accent text};
  638. font-size:12px;
  639. line-height:205%;
  640. overflow:scroll;
  641. }
  642.  
  643. .placeholder {
  644. float:left;
  645. height:25px;
  646. width:175px;
  647. margin:10px;
  648. }
  649.  
  650. .navlinks {
  651. position:absolute;
  652. border:1px solid {color:accent 3};
  653. border-top:0px;
  654. border-right:0px;
  655. width:200px;
  656. padding:15px;
  657. z-index:3;
  658. top:0px;
  659. right:0px;
  660. height:220px;
  661. font-size:30px;
  662. line-height:150%;
  663. border-radius:0px 0px 0px 30px;
  664. font-family: 'Quicksand', sans-serif;
  665. }
  666.  
  667. .navlinks b {
  668. color:{color:accent 1};
  669. -moz-transition-duration:0.8s;
  670. -webkit-transition-duration:0.8s;
  671. -o-transition-duration:0.8s;
  672. }
  673.  
  674. .navlinks a {
  675. color:{color:text};
  676. }
  677.  
  678.  
  679. .navlinks div:hover b {
  680. color:{color:text};
  681. margin-right:5px;
  682. margin-left:-5px;
  683. -moz-transition-duration:0.8s;
  684. -webkit-transition-duration:0.8s;
  685. -o-transition-duration:0.8s;
  686. }
  687.  
  688. .navlinks div:hover a {
  689. color:{color:accent 2};
  690. margin-left:5px;
  691. }
  692.  
  693. .sidedesc {
  694. position:absolute;
  695. width:120px;
  696. height:140px;
  697. bottom:35px;
  698. left:35px;
  699. line-height:200%;
  700. overflow:scroll;
  701. text-transform:lowercase;
  702. letter-spacing:0.5px;
  703. color:{color:accent text};
  704. }
  705.  
  706. .pagi {
  707. position:absolute;
  708. bottom:165px;
  709. right:20px;
  710. }
  711.  
  712. .pagi a {
  713. background-color:{color:accent 3};
  714. color:{color:accent 2};
  715. font-size:17px;
  716. text-align:center;
  717. padding:5px 7px;
  718. border-radius:7.5px;
  719. margin:2px;
  720. }
  721.  
  722. /* pls do not touch thank you <3 */
  723.  
  724. .credit {
  725. position:fixed;
  726. bottom:10px;
  727. right:10px;
  728. width:80px;
  729. font-size:9px;
  730. text-align:center;
  731. text-transform:uppercase;
  732. font-weight:600;
  733. padding:5px 0px 4px 0px;
  734. border:1px solid {color:posts};
  735. color:{color:posts};
  736. border-radius:7.5px;
  737. font-family: 'Quicksand', sans-serif;
  738. -moz-transition-duration:0.8s;
  739. -webkit-transition-duration:0.8s;
  740. -o-transition-duration:0.8s;
  741. }
  742.  
  743. .credit:hover {
  744. background-color:{color:accent 2};
  745. -moz-transition-duration:0.8s;
  746. -webkit-transition-duration:0.8s;
  747. -o-transition-duration:0.8s;
  748. }
  749.  
  750. /* end of credit */
  751.  
  752. </style>
  753. </head>
  754. <body>
  755. <div class="container">
  756. <div class="line"></div>
  757. <div class="sidebar">
  758. <div class="sideimg"></div>
  759. <div class="sidetitle">{text:custom title}</div>
  760. <div class="sidebox"></div>
  761. <div class="sidelinks">
  762. <a href="/"><div>refresh</div></a>
  763. <a href="/ask"><div>inbox</div></a>
  764. <a onclick="openTab('navTab')"><div>navigate</div></a>
  765. <a href="{text:extra link}"><div>{text:extra link title}</div></a>
  766. </div>
  767. <div class="sidedesc">{text:custom description}</div>
  768. {block:Pagination}
  769. <div class="pagi">
  770. {block:PreviousPage}<a href="{PreviousPage}"><span class="th th-chevron-left"></span></a>{/block:PreviousPage}
  771. {block:NextPage}<a href="{NextPage}"><span class="th th-chevron-right"></span></a>{/block:NextPage}
  772. </div>
  773. {/block:Pagination}
  774. </div>
  775.  
  776.  
  777. <div id="navTab" class="tabcontainer">
  778. <div onclick="closeTab(this)" class="close">x</div>
  779. <div class="navbox">
  780. <div class="navimg"></div>
  781. <div class="navlinks">
  782. <div><b>01.</b> <a href="{text:nav link 1}">{text:nav link 1 title}</a></div>
  783. <div><b>02.</b> <a href="{text:nav link 2}">{text:nav link 2 title}</a></div>
  784. <div><b>03.</b> <a href="{text:nav link 3}">{text:nav link 3 title}</a></div>
  785. <div><b>04.</b> <a href="{text:nav link 4}">{text:nav link 4 title}</a></div>
  786. <div><b>05.</b> <a href="{text:nav link 5}">{text:nav link 5 title}</a></div>
  787. </div>
  788. <div class="navdesc">
  789. <div class="placeholder"></div>{text:nav desc}
  790. </div>
  791. </div>
  792.  
  793. </div>
  794.  
  795. <!-- entries start -->
  796. <div id="entries">
  797.  
  798. {block:Posts}
  799.  
  800. <div class="post" id="{PostID}">
  801.  
  802. {block:Text}
  803. {block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  804.  
  805. {block:Quote}
  806. <div class="quotediv">"{Quote}"</div>
  807. {block:Source}<div class="quoteborder"></div><div class="quoteinfo">— {Source}</div>{/block:Source}
  808. {/block:Quote}
  809.  
  810. {block:Chat}
  811. {block:Title}<h1>{Title}</h1>{/block:Title}
  812. {block:Lines}<div class="chats">{block:Label}<b>{Label}</b> {/block:Label}{Line}<br></div>{/block:Lines}
  813. {/block:Chat}
  814.  
  815. {block:Video}<div class="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  816.  
  817. {block:Photo}
  818. <img src="{PhotoURL-500}" style="width:100%">
  819. {block:Caption}{Caption}{/block:Caption}
  820. {/block:Photo}
  821.  
  822. {block:Photoset}
  823. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  824. {block:Caption}{Caption}{/block:Caption}
  825. {/block:Photoset}
  826.  
  827. {block:Link}
  828. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  829. {block:Description}{Description}{/block:Description}
  830. {/block:Link}
  831.  
  832. {block:More}<div class="readmore"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  833.  
  834. {block:AudioPlayer}
  835. <div class="audioplayer">{AudioPlayer}
  836. <div class="audioinfo">
  837. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  838. {block:Artist}<br/>{Artist}{/block:Artist}
  839. </div>
  840. </div>
  841. {block:Caption}{Caption}{/block:Caption}
  842. {/block:AudioPlayer}
  843.  
  844. {block:Answer}
  845. <div class="question">{Question}</div>
  846. <div class="askerdiv">asked by <b>{Asker}</b></div>
  847. <div class="answer">{Answer}</div>
  848. {/block:Answer}
  849.  
  850. <!-- to hide source and via on posts-->
  851. {block:ContentSource}
  852. <div style="display: none;">{SourceURL}</div>
  853. {/block:ContentSource}
  854.  
  855. {block:NoRebloggedFrom}
  856. <div style="display: none;">
  857. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  858. </div>
  859. {/block:NoRebloggedFrom}
  860.  
  861. </div>
  862.  
  863. {block:Date}<div class="postinfo">
  864. <div>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}"><span class="th th-link"></span></a> <a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><span class="th th-star-o"></span></a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post"><span class="th th-reblog"></span></a></div>
  865. posted <a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a>
  866. {block:NoteCount}with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  867. </div>{/block:Date}
  868.  
  869. {block:HasTags}<div class="tags"><b style="margin-right:5px">tagged as:</b>{block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  870.  
  871.  
  872. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  873.  
  874. {/block:Posts}
  875.  
  876. </div>
  877. </div>
  878.  
  879. <!-- do not touch pls -->
  880. <a href="https://jinsoouls.tumblr.com/"><div class="credit">with <span class="th th-heart-1"></span> by jinsoouls</div></a>
  881. <!-- credit end-->
  882.  
  883. </body>
  884.  
  885.  
  886. <script>
  887. /* photoset script by annathms and espoirthemes */
  888.  
  889. function gatherData(images, arr) {
  890. for (let i = 0; i < images.length; i++) {
  891. let currentData = {
  892. "width": images[i].getAttribute('data-width'),
  893. "height": images[i].getAttribute('data-height'),
  894. "low_res": images[i].getAttribute('data-lowres'),
  895. "high_res": images[i].getAttribute('data-highres')
  896. };
  897. arr.push(currentData);
  898. }
  899. }
  900. function getIndex(elem) {
  901. let i = 0;
  902. while( (elem = elem.previousElementSibling) != null ) i++;
  903. return i;
  904. }
  905. function lightbox(elem) {
  906. let currentPhotoset = elem.parentNode;
  907. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  908. let data = [];
  909. gatherData(photosetPhotos, data);
  910. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  911. }
  912.  
  913. /* tooltip script */
  914. (function($){
  915. $(document).ready(function(){
  916. $("a[title]").style_my_tooltips({
  917. tip_follows_cursor:true,
  918. tip_delay_time:90,
  919. tip_fade_speed:600,
  920. attribute:"title"
  921. });
  922. });
  923. })(jQuery);
  924.  
  925. /* audio player color script by shudesigns */
  926. ($(document).ready(function() {
  927. $('iframe.tumblr_audio_player').load( function() {
  928. $('iframe.tumblr_audio_player').contents().find("head")
  929. .append($("<style type='text/css'> .audio-player{background:{color:accent 2} !important} </style>"));
  930. });
  931. })
  932. )(jQuery);
  933.  
  934. /* tab script */
  935. function openTab(tabName) {
  936. $("#entries").fadeOut();
  937. $('.tabcontainer').each(function(index) {
  938. if (tabName == $(this).attr('id')) {
  939. $(this).fadeIn();
  940. } else {
  941. $(this).fadeOut();
  942. }
  943. });
  944. }
  945.  
  946. function closeTab(el) {
  947. $(el).parent().fadeOut();
  948. $('#entries').fadeIn();
  949. }
  950.  
  951. </script>
  952. </html>
Advertisement
Add Comment
Please, Sign In to add comment