API tools faq
paste
codesbyjack

THEME #21 fauna / made by jinsoouls

codesbyjack
May 17th, 2020
3,529
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. fauna 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. <meta name="color:background" content="#eeeeee"/>
  13. <meta name="color:container" content="#f6f6f6"/>
  14. <meta name="color:posts" content="#ffffff"/>
  15. <meta name="color:border" content="#eeeeee"/>
  16. <meta name="color:accent 1" content="#becdd1"/>
  17. <meta name="color:accent 2" content="#797979"/>
  18. <meta name="color:accent text" content="#ffffff"/>
  19. <meta name="color:text" content="#313131"/>
  20. <meta name="color:title" content="#414141"/>
  21. <meta name="color:bold" content="#7e7e7e"/>
  22. <meta name="color:italic" content="#7e7e7e"/>
  23. <meta name="color:border" content="#eeeeee"/>
  24. <meta name="color:link" content="#4c4c4c"/>
  25. <meta name="color:hover link" content="#b0b0b0"/>
  26.  
  27. <meta name="image:background" content=""/>
  28. <meta name="image:sidebar" content=""/>
  29.  
  30. <meta name="text:title" content="got me stuck in a love loop."/>
  31.  
  32. <meta name="if:title shadow" content="0"/>
  33.  
  34. <meta name="text:title font size" content="55"/>
  35. <meta name="text:title margin bottom" content="25"/>
  36.  
  37. <meta name="text:description" content="hi i scroll! finally i can meet you, my only love i have always been looking for you the overflowing thought of love it looks like even from the beginning"/>
  38. <meta name="text:free link" content="/"/>
  39. <meta name="text:free link title" content="free"/>
  40. <meta name="text:navigation title" content="navigation."/>
  41.  
  42. <meta name="text:link 1" content="/1"/>
  43. <meta name="text:link 1 title" content="link one"/>
  44. <meta name="text:link 2" content="/2"/>
  45. <meta name="text:link 2 title" content="link two"/>
  46. <meta name="text:link 3" content="/3"/>
  47. <meta name="text:link 3 title" content="link three"/>
  48. <meta name="text:link 4" content="/4"/>
  49. <meta name="text:link 4 title" content="link four"/>
  50. <meta name="text:link 5" content="/5"/>
  51. <meta name="text:link 5 title" content="link five"/>
  52. <meta name="text:link 6" content="/6"/>
  53. <meta name="text:link 6 title" content="link six"/>
  54.  
  55. <meta name="select:free link icon" content="heart" title="heart">
  56. <meta name="select:free link icon" content="globe" title="globe">
  57. <meta name="select:free link icon" content="cloud" title="cloud">
  58. <meta name="select:free link icon" content="user" title="user">
  59. <meta name="select:free link icon" content="plus" title="plus">
  60. <meta name="select:free link icon" content="settings" title="settings">
  61. <meta name="select:free link icon" content="moon" title="moon">
  62. <meta name="select:free link icon" content="tag" title="tag">
  63.  
  64. <meta name="select:png width" content="100px" title="200px">
  65. <meta name="select:png width" content="150px" title="150px">
  66. <meta name="select:png width" content="200px" title="200px">
  67. <meta name="select:png width" content="250px" title="250px">
  68. <meta name="select:png width" content="300px" title="300px">
  69. <meta name="select:png width" content="350px" title="350px">
  70.  
  71. <head>
  72.  
  73. <title>{Title}</title>
  74. <link rel="shortcut icon" href="{Favicon}">
  75. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  76. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  77.  
  78. <!-- jquery -->
  79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  80.  
  81. <!-- script for tooltips -->
  82. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  83.  
  84. <!-- feather icons-->
  85. <script src="https://unpkg.com/feather-icons"></script>
  86.  
  87. <!-- linear icons -->
  88. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  89.  
  90. <!-- google fonts -->
  91. <link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
  92.  
  93. <!-- photoset.css by annathms and espoirthemes -->
  94. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  95.  
  96. <!-- autoresize video script by shythemes -->
  97. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  98.  
  99. <!-- animate.css -->
  100. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  101. <style>
  102.  
  103. @font-face { font-family: "dalmatins"; src: url(" https://dl.dropboxusercontent.com/s/40ajm3rqxt7dbpy/Dalmatins.otf"); }
  104.  
  105.  
  106.  
  107. @font-face { font-family: 'forta'; src: url('https://dl.dropboxusercontent.com/s/dnssa7msyhq6ipo/Forta.ttf') ;}
  108.  
  109. ::-webkit-scrollbar {
  110. width: 1px;
  111. height: 1px;
  112. background: transparent;
  113. }
  114.  
  115. ::-webkit-scrollbar-thumb {
  116. background: transparent;
  117. }
  118.  
  119. ::selection {
  120. color:{color:accent text};
  121. background-color: {color:accent 2};
  122. }
  123.  
  124. ::-moz-selection {
  125. color:{color:accent text};
  126. background-color: {color:accent 2};
  127. }
  128.  
  129.  
  130. body {
  131. background:{color:background};
  132. background-image:url({image:background});
  133. margin:0px;
  134. color:{color:text};
  135. font-family: 'Muli', sans-serif;
  136. font-size:11px;
  137. overflow:hidden;
  138. line-height:100%;
  139. }
  140.  
  141. #s-m-t-tooltip {
  142. max-width:300px;
  143. padding:8px 12px;
  144. margin:20px 7px 2px 20px;
  145. background-color:{color:accent 2};
  146. text-transform:lowercase;
  147. color:{color:accent text};
  148. z-index:999999999999999999999999999999999999;
  149. font-weight:500;
  150. border-radius:7.5px;
  151. box-shadow:0px 0px 10px rgba(0,0,0,0.02);
  152. }
  153.  
  154. blockquote {
  155. padding-left:20px;
  156. width:auto;
  157. margin-left:10px;
  158. border-left:1px solid {color:border};
  159. }
  160.  
  161. blockquote blockquote {
  162. padding-left:20px;
  163. margin-left:10px;
  164. border-left:1px solid {color:border};
  165. }
  166.  
  167. blockquote img {max-width:100%;}
  168.  
  169. h1 {
  170. font-size:30px;
  171. color:{color:accent 1};
  172. text-align:center;
  173. letter-spacing:1px;
  174. text-transform:lowercase;
  175. line-height:100%;
  176.  
  177. }
  178.  
  179. h2 {
  180. font-size:14px;
  181. color:{color:accent 2};
  182. text-align:center;
  183. line-height:100%;
  184. margin-right:20px;
  185. text-transform:lowercase;
  186. font-weight:normal;
  187. }
  188.  
  189. a {
  190. text-decoration:none;
  191. color:{color:link};
  192. -moz-transition-duration:0.8s;
  193. -webkit-transition-duration:0.8s;
  194. -o-transition-duration:0.8s;
  195. }
  196.  
  197. a:hover {
  198. color:{color:hover link};
  199. -moz-transition-duration:0.8s;
  200. -webkit-transition-duration:0.8s;
  201. -o-transition-duration:0.8s;
  202. }
  203.  
  204. b {color:{color:bold};}
  205. strong {color:{color:bold}}
  206. i {color:{color:italic};}
  207. em {color:{color:italic};}
  208. sub {font-size:11px;}
  209. sup {font-size:11px;}
  210. small {font-size:11px;}
  211.  
  212. .container {
  213. width:850px;
  214. height:550px;
  215. background-color:{color:container};
  216. position:absolute;
  217. margin:auto;
  218. top:50px; left:0; right:0; bottom:0;
  219. border-radius:20px;
  220. }
  221.  
  222. #entries {
  223. position: absolute;
  224. height:100%;
  225. width:480px;
  226. right:0;
  227. overflow:scroll;
  228. z-index:5;
  229. }
  230.  
  231. .post {
  232. padding:20px;
  233. width:380px;
  234. background-color:{color:posts};
  235. margin:30px;
  236. margin-bottom:50px;
  237. line-height:130%;
  238. border-radius:10px;
  239. overflow:hidden;
  240. box-shadow:0px 2.5px 10px rgba(0,0,0,0.02);
  241. }
  242.  
  243. .post img {
  244. position:static;
  245. height:auto;
  246. width:auto;
  247. }
  248.  
  249. /* post info styling */
  250. .postinfo-top {
  251. width:calc(100% + 20px);
  252. padding:7.5px 10px;
  253. letter-spacing:0.5px;
  254. border-bottom:1px solid {color:border};
  255. margin:-20px 0px 20px -20px;
  256. display:flex;
  257. justify-content:flex-start;
  258. align-items:center;
  259. }
  260.  
  261. .postinfo {
  262. width:calc(100% + 20px);
  263. padding:7.5px 10px;
  264. letter-spacing:0.5px;
  265. border-top:1px solid {color:border};
  266. margin:20px 0px -20px -20px;
  267. display:flex;
  268. justify-content:flex-end;
  269. align-items:center;
  270. }
  271.  
  272. .post-inner a {
  273. color:{color:text};
  274. text-transform:uppercase;
  275. font-size:9px;
  276. font-weight:700;
  277. display:flex;
  278. flex-direction:row;
  279. justify-content:center;
  280. align-items:center;
  281. }
  282.  
  283. .post-inner span {
  284. color:{color:accent 2};
  285. font-size:12px;
  286. margin-right:4px;
  287. }
  288.  
  289. .dotz {
  290. margin:0px 7.5px;
  291. font-size:6px;
  292. opacity:0.5;
  293. }
  294.  
  295. .reblog-icon {
  296. -moz-transition-duration:0.8s;
  297. -webkit-transition-duration:0.8s;
  298. -o-transition-duration:0.8s;
  299. }
  300.  
  301. #reblogz:hover .reblog-icon {
  302. transform:translate(1.5px,0);
  303. -moz-transition-duration:0.8s;
  304. -webkit-transition-duration:0.8s;
  305. -o-transition-duration:0.8s;
  306. }
  307.  
  308. .tags {
  309. font-size:10px;
  310. text-align:left;
  311. letter-spacing:0.5px;
  312. width:370px;
  313. text-align:center;
  314. line-height:120%;
  315. padding:5px 10px;
  316. margin:-50px 0px 0px 50px;
  317. }
  318.  
  319. .tags b {
  320. margin-right:2px;
  321. text-transform:uppercase;
  322. }
  323.  
  324. .postnote {
  325. background-color:{color:posts};
  326. text-transform:lowercase;
  327. text-align:left;
  328. margin: -20px 0px 50px 50px;
  329. width:370px;
  330. padding: 10px;
  331. border-radius:10px;
  332. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  333. }
  334.  
  335. .postnote li {
  336. margin:5px 0px;
  337. }
  338. /* end post info styling */
  339.  
  340. /* different post types styling */
  341. .question {
  342. padding:20px 10px;
  343. text-align:center;
  344. border:1px solid {color:accent 1};
  345. border-bottom:none;
  346. border-radius:10px 10px 0px 0px;
  347. }
  348.  
  349. .askerdiv {
  350. padding:5px 10px;
  351. text-align:right;
  352. border:1px solid {color:accent 1};
  353. color:{color:accent text};
  354. text-transform:uppercase;
  355. font-size:10px;
  356. letter-spacing:0.25px;
  357. background-color:{color:accent 1};
  358. border-radius:0px 0px 10px 10px;
  359. }
  360.  
  361. .askerdiv a {
  362. color:{color:accent text};
  363. font-weight:700;
  364. }
  365.  
  366. .quotediv {
  367. font-size:15px;
  368. text-align:center;
  369. border:1px solid {color:accent 1};
  370. border-bottom:none;
  371. padding:20px 10px;
  372. text-transform:lowercase;
  373. line-height:150%;
  374. border-radius:10px 10px 0px 0px;
  375. }
  376.  
  377. .quoteinfo {
  378. color:{color:accent text};
  379. font-weight:600;
  380. padding:5px 10px;
  381. background-color:{color:accent 1};
  382. border:1px solid {color:accent 1};
  383. text-transform:uppercase;
  384. font-size:10px;
  385. letter-spacing:0.25px;
  386. text-align:right;
  387. margin-bottom:20px;
  388. border-radius:0px 0px 10px 10px;
  389. }
  390.  
  391. .chats {
  392. font-size:13px;
  393. line-height:150%;
  394. }
  395.  
  396. .audioplayer {
  397. text-align:left;
  398. padding:20px;
  399. background-color:{color:accent 1};
  400. font-size:13px;
  401. height:27.5px;
  402. border-radius:20px;
  403. }
  404.  
  405. .audioinfo {
  406. color:{color:accent text};
  407. width:100%;
  408. text-align:right;
  409. margin-top:-30px;
  410. letter-spacing:0.4px;
  411. font-weight:600;
  412. line-height:70%;
  413. }
  414.  
  415. .audioinfo div {
  416. font-size:13px;
  417. font-weight:lighter;
  418. }
  419.  
  420. .readmore {
  421. width:100%;
  422. text-transform:uppercase;
  423. text-align:center;
  424. margin-bottom:10px;
  425. padding:10px 0px;
  426. }
  427.  
  428. .readmore a {
  429. font-size:10px;
  430. letter-spacing:1px;
  431. background-color:{color:accent 1};
  432. padding:5px 15px;
  433. color:{color:accent text};
  434. border-radius:15px;
  435. font-weight:800;
  436. }
  437.  
  438. .readmore:hover a {
  439. background-color:{color:accent 2};
  440. }
  441.  
  442. .photoset-grid {
  443. grid-gap: 1px;
  444. width:calc(100% + 40px);
  445. margin:-20px 0px 0px -20px;
  446. }
  447.  
  448. .photoset-grid img {
  449. max-width:100%;
  450. }
  451. [photoset-layout] div {
  452. cursor: pointer;
  453. }
  454. /* end different post types styling */
  455.  
  456. /* tumblr controls styling by cyantists */
  457. iframe.tmblr-iframe {
  458. z-index:99999999999999!important;
  459. top:0!important;
  460. right:0!important;
  461. opacity:0.4;
  462. /* delete invert(1) from here */
  463. filter:invert(1) contrast(150%);
  464. -webkit-filter:invert(1) contrast(150%);
  465. -o-filter:invert(1) contrast(150%);
  466. -moz-filter:invert(1) contrast(150%);
  467. -ms-filter:invert(1) contrast(150%);
  468. /* to here if your blog has a dark background */
  469. transform:scale(0.65);
  470. transform-origin:100% 0;
  471. -webkit-transform:scale(0.65);
  472. -webkit-transform-origin:100% 0;
  473. -o-transform:scale(0.65);
  474. -o-transform-origin:100% 0;
  475. -moz-transform:scale(0.65);
  476. -moz-transform-origin:100% 0;
  477. -ms-transform:scale(0.65);
  478. -ms-transform-origin:100% 0;}
  479.  
  480. iframe.tmblr-iframe:hover {
  481. opacity:0.6!important;}
  482. /* end control styling */
  483.  
  484. /* side tab control styling */
  485. .tabcontainer {
  486. position:absolute;
  487. right:0px;
  488. top:0px;
  489. width:500px;
  490. height:100%;
  491. display:none;
  492. z-index:9;
  493. }
  494.  
  495. .close {
  496. position:absolute;
  497. border-radius:100%;
  498. width:30px;
  499. height:30px;
  500. font-size:14px;
  501. background-color:{color:accent 1};
  502. color:{color:accent text};
  503. right:-12.5px;
  504. line-height:25px;
  505. top:-12.5px;
  506. text-align:center;
  507. z-index:999999999999;
  508. border-radius:100%;
  509. box-shadow:0px 5px 3px rgba(0,0,0,0.02);
  510. -moz-transition-duration:0.8s;
  511. -webkit-transition-duration:0.8s;
  512. -o-transition-duration:0.8s;
  513. }
  514.  
  515. .close .feather {
  516. width:16px;
  517. height:16px;
  518. margin-top:7px;
  519. }
  520.  
  521. .close:hover {
  522. cursor: pointer;
  523. background-color:{color:accent 2};
  524. -moz-transition-duration:0.8s;
  525. -webkit-transition-duration:0.8s;
  526. -o-transition-duration:0.8s;
  527. }
  528. /* end tab control styling */
  529.  
  530. /* sidebar styling */
  531. .sidebar {
  532. position:absolute;
  533. width:325px;
  534. height:325px;
  535. background-color:{color:accent 1};
  536. box-shadow:0px 2.5px 5px rgba(0,0,0,0.04);
  537. border-radius:30px;
  538. top:-25px;
  539. z-index:2;
  540. left:-25px;
  541. }
  542.  
  543. .box {
  544. position:absolute;
  545. width:195px;
  546. background-color:{color:posts};
  547. box-shadow:0px 2.5px 5px rgba(0,0,0,0.04);
  548. border-radius:20px;
  549. top:255px;
  550. left:0px;
  551. border:15px solid {color:posts};
  552. border-right:20px solid {color:posts};
  553. border-left:20px solid {color:posts};
  554. z-index:3;
  555. text-transform:uppercase;
  556. letter-spacing:1.25px;
  557. line-height:200%;
  558. font-size:8px;
  559. height:65px;
  560. text-align:justify;
  561. overflow:scroll;
  562. }
  563.  
  564. .title {
  565. position:absolute;
  566. bottom:{text:title margin bottom}px;
  567. left:-45px;
  568. width:395px;
  569. font-size:{text:title font size}px;
  570. line-height:100%;
  571. font-family: 'forta';
  572. color:{color:title};
  573. text-align:right;
  574. z-index:4;
  575. {block:IfTitleShadow}
  576. text-shadow:2.5px 2.5px 5px rgba(0,0,0,0.04);
  577. {/block:IfTitleShadow}
  578. }
  579.  
  580. .side-png {
  581. position:absolute;
  582. bottom:0px;
  583. left:25px;
  584. width:{select:png width};
  585. }
  586.  
  587. .links {
  588. position:absolute;
  589. z-index:5;
  590. width:45px;
  591. padding:7.5px 5px;
  592. text-align:center;
  593. left:275px;
  594. top:25px;
  595. display:flex;
  596. align-items:center;
  597. justify-content:center;
  598. flex-wrap: wrap;
  599. background-color:{color:posts};
  600. border-radius:20px;
  601. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  602. }
  603.  
  604. .link {
  605. width:40px;
  606. height:25px;
  607. color:{color:text};
  608. text-transform:uppercase;
  609. font-size:8px;
  610. letter-spacing:1px;
  611. font-weight:700;
  612. margin:10px 5px;
  613. cursor:pointer;
  614. }
  615.  
  616. .link p {
  617. margin:0px;
  618. }
  619.  
  620. .link .feather {
  621. width: 16px;
  622. height: 16px;
  623. stroke: {color:accent 1};
  624. stroke-width: 2;
  625. stroke-linecap: round;
  626. stroke-linejoin: round;
  627. fill: none;
  628. -moz-transition-duration:0.8s;
  629. -webkit-transition-duration:0.8s;
  630. -o-transition-duration:0.8s;
  631. }
  632.  
  633. .link:hover .feather {
  634. stroke: {color:accent 2};
  635. -moz-transition-duration:0.8s;
  636. -webkit-transition-duration:0.8s;
  637. -o-transition-duration:0.8s;
  638. }
  639. /* end sidebar styling */
  640.  
  641. /* nav tab styling */
  642. .nav-links {
  643. position:absolute;
  644. width:225px;
  645. height:300px;
  646. margin:auto;
  647. top:0;bottom:0;left:0;right:0;
  648. background-color:{color:posts};
  649. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  650. border-radius:20px;
  651. display:flex;
  652. flex-direction:column;
  653. align-items:center;
  654. justify-content:center;
  655. }
  656.  
  657. .nav-link {
  658. font-size:10px;
  659. text-transform:uppercase;
  660. font-weight:700;
  661. width:125px;
  662. letter-spacing:1px;
  663. color:{color:accent text};
  664. display:flex;
  665. align-items:center;
  666. justify-content:center;
  667. padding:0px 15px;
  668. border-radius:20px;
  669. background-color:{color:accent 2};
  670. margin:5px 0px;
  671. -moz-transition-duration:0.8s;
  672. -webkit-transition-duration:0.8s;
  673. -o-transition-duration:0.8s;
  674. }
  675.  
  676. .nav-link b {
  677. margin-right:5px;
  678. color:{color:accent 1};
  679. }
  680.  
  681. .nav-link:hover {
  682. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  683. -moz-transition-duration:0.8s;
  684. -webkit-transition-duration:0.8s;
  685. -o-transition-duration:0.8s;
  686. }
  687. .nav-title {
  688. font-size:40px;
  689. margin-top:-35px;
  690. margin-bottom:5px;
  691. line-height:100%;
  692. font-family: 'forta';
  693. color:{color:accent 1};
  694. text-align:right;
  695. z-index:4;
  696. {block:IfTitleShadow}
  697. text-shadow:2.5px 2.5px 5px rgba(0,0,0,0.04);
  698. {/block:IfTitleShadow}
  699. }
  700. /* end nav tab styling */
  701.  
  702. /* pagination styling */
  703. .pagi {
  704. text-align:center;
  705. width:calc(100% - 110px);
  706. margin:20px 50px;
  707. }
  708.  
  709. .pagi div {
  710. font-size:10px;
  711. width:75px;
  712. padding:5px;
  713. border-radius:20px;
  714. display:inline-block;
  715. color:{color:accent text};
  716. letter-spacing:1px;
  717. text-transform:uppercase;
  718. font-weight:600;
  719. line-height:150%;
  720. margin:0px 10px;
  721. background-color:{color:accent 2};
  722. -moz-transition-duration:0.8s;
  723. -webkit-transition-duration:0.8s;
  724. -o-transition-duration:0.8s;
  725. }
  726.  
  727. .pagi div:hover {
  728. box-shadow:0px 5px 10px rgba(0,0,0,0.05);
  729. -moz-transition-duration:0.8s;
  730. -webkit-transition-duration:0.8s;
  731. -o-transition-duration:0.8s;
  732. }
  733. /* end pagination styling */
  734.  
  735.  
  736. /* cried styling -- DO NOT TOUCH pls */
  737. .cred {
  738. background-color:{color:posts};
  739. position:absolute;
  740. z-index:10;
  741. bottom:15px;
  742. right:15px;
  743. padding:5px;
  744. height:20px;
  745. width:20px;
  746. border-radius:100%;
  747. display:flex;
  748. align-items:center;
  749. justify-content:center;
  750. background-color:{color:accent 2};
  751. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  752. }
  753.  
  754. .cred .feather {
  755. height:13px;
  756. width:13px;
  757. stroke:{color:accent text};
  758. }
  759.  
  760. .cred-prompt {
  761. position:absolute;
  762. bottom:20px;
  763. right:55px;
  764. width:65px;
  765. padding:0px 15px;
  766. border-radius:20px;
  767. height:20px;
  768. background-color:{color:posts};
  769. letter-spacing:0.5px;
  770. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  771. display:none;
  772. line-height:20px;
  773. font-size:9px;
  774. text-align:center;
  775. animation:fadeInDown 1s;
  776. }
  777.  
  778. </style>
  779. </head>
  780. <body>
  781.  
  782. <div class="container">
  783.  
  784. <div class="sidebar"><img src="{image:sidebar}" class="side-png"></div>
  785.  
  786. <div class="title">{text:title}</div>
  787. <div class="box">{text:description}</div>
  788.  
  789. <!-- side links -->
  790. <div class="links">
  791. <a href="/">
  792. <div class="link">
  793. <span data-feather="home"></span>
  794. <p>home</p>
  795. </div>
  796. </a>
  797. <a href="/ask">
  798. <div class="link">
  799. <span data-feather="message-circle"></span>
  800. <p>inbox</p>
  801. </div>
  802. </a>
  803. <a onclick="openTab('navTab')">
  804. <div class="link">
  805. <span data-feather="plus-circle"></span>
  806. <p>links</p>
  807. </div>
  808. </a>
  809. <a href="{text:free link}">
  810. <div class="link">
  811. <span data-feather="{select:free link icon}"></span>
  812. <p>{text:free link title}</p>
  813. </div>
  814. </a>
  815. </div>
  816.  
  817. <!-- nav tab start -->
  818. <div id="navTab" class="tabcontainer">
  819. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  820. <div class="nav-links">
  821. <div class="nav-title">{text:navigation title}</div>
  822. <a href="{text:link 1}">
  823. <div class="nav-link">
  824. <b>01</b>
  825. <p>{text:link 1 title}</p>
  826. </div>
  827. </a>
  828. <a href="{text:link 2}">
  829. <div class="nav-link">
  830. <b>02</b>
  831. <p>{text:link 2 title}</p>
  832. </div>
  833. </a>
  834. <a href="{text:link 3}">
  835. <div class="nav-link">
  836. <b>03</b>
  837. <p>{text:link 3 title}</p>
  838. </div>
  839. </a>
  840. <a href="{text:link 4}">
  841. <div class="nav-link">
  842. <b>04</b>
  843. <p>{text:link 4 title}</p>
  844. </div>
  845. </a>
  846. <a href="{text:link 5}">
  847. <div class="nav-link">
  848. <b>05</b>
  849. <p>{text:link 5 title}</p>
  850. </div>
  851. </a>
  852. <a href="{text:link 6}">
  853. <div class="nav-link">
  854. <b>06</b>
  855. <p>{text:link 6 title}</p>
  856. </div>
  857. </a>
  858. </div>
  859. </div>
  860.  
  861.  
  862. <div id="entries">
  863. <!-- posts start -->
  864. {block:Posts}
  865. <div class="post" id="{PostID}">
  866.  
  867. {block:RebloggedFrom}
  868. <div class="postinfo-top">
  869. <div class="post-inner">
  870. <a href="{ReblogRootURL}">
  871. <div>posted by {ReblogRootName}</div>
  872. </a>
  873. </div>
  874. </div>
  875. {/block:RebloggedFrom}
  876.  
  877. {block:Text}
  878. {block:Title}<h1>{Title}</h1>{/block:Title}
  879. {Body}
  880. {/block:Text}
  881.  
  882. {block:Quote}
  883. <div class="quotediv">"{Quote}"</div>
  884. {block:Source}
  885. <div class="quoteinfo">{Source}</div>
  886. {/block:Source}
  887. {/block:Quote}
  888.  
  889. {block:Chat}
  890. {block:Title}<h1>{Title}</h1>{/block:Title}
  891. {block:Lines}
  892. <div class="chats">
  893. {block:Label}<b>{Label}</b>{/block:Label}
  894. {Line}<br>
  895. </div>
  896. {/block:Lines}
  897. {/block:Chat}
  898.  
  899. {block:Video}
  900. <div class="video">{Video-500}</div>
  901. {block:Caption}{Caption}{/block:Caption}
  902. {/block:Video}
  903.  
  904. {block:Photo}
  905. <img src="{PhotoURL-500}" style="width:calc(100% + 40px);margin:-20px 0px -25px -20px">
  906. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  907. {/block:Photo}
  908.  
  909. {block:Photoset}
  910. <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>
  911. {block:Caption}{Caption}{/block:Caption}
  912. {/block:Photoset}
  913.  
  914. {block:Link}
  915. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  916. {block:Description}{Description}{/block:Description}
  917. {/block:Link}
  918.  
  919.  
  920. {block:AudioPlayer}
  921. <div class="audioplayer">{AudioPlayer}
  922. <div class="audioinfo">
  923. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  924. {block:Artist}<br/>{Artist}{/block:Artist}
  925. </div>
  926. </div>
  927. {block:Caption}{Caption}{/block:Caption}
  928. {/block:AudioPlayer}
  929.  
  930. {block:Answer}
  931. <div class="question">{Question}</div>
  932. <div class="askerdiv">
  933. asked by <b>{Asker}</b>
  934. </div>
  935. <div>{Answer}</div>
  936. {/block:Answer}
  937.  
  938.  
  939. {block:More}
  940. <div class="readmore">
  941. <a href="{Permalink}" class="more-btn">read more</a>
  942. </div>
  943. {/block:More}
  944.  
  945. <!-- to hide source and via on posts-->
  946. {block:ContentSource}
  947. <div style="display: none;">{SourceURL}</div>
  948. {/block:ContentSource}
  949.  
  950. {block:NoRebloggedFrom}
  951. <div style="display: none;">
  952. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  953. </div>
  954. {/block:NoRebloggedFrom}
  955.  
  956. {block:Date}
  957. <div class="postinfo">
  958. <div class="post-inner">
  959. <a href="{Permalink}" title="{TimeAgo}">
  960. <span class="lnr lnr-calendar-full" style="margin-right:6px"></span>
  961. <div>{MonthNumberWithZero}.{DayOfMonthWithZero}</div>
  962. </a>
  963. </div>
  964. {block:NoteCount}<span class="dotz">•</span>{/block:NoteCount}
  965. <div class="post-inner">
  966. {block:NoteCount}
  967. <a href="{Permalink}" title="likes & reblogs">
  968. <span class="lnr lnr-heart"></span>
  969. <div>{NoteCount}</div>
  970. </a>
  971. {/block:NoteCount}
  972. </div>
  973. <span class="dotz">•</span>
  974. <div class="post-inner">
  975. <a href="{ReblogURL}" id="reblogz">
  976. <div>reblog</div>
  977. <span class="lnr lnr-arrow-right reblog-icon" style="margin-right:2.5px; margin-left:4px"></span>
  978. </a>
  979. </div>
  980. </div>
  981. {/block:Date}
  982.  
  983. </div>
  984.  
  985. {block:HasTags}
  986. <div class="tags">
  987. {block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  988. </div>
  989. {/block:HasTags}
  990.  
  991. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  992.  
  993. {/block:Posts}
  994.  
  995. {block:Pagination}
  996. <div class="pagi">
  997. {block:PreviousPage}
  998. <a href="{PreviousPage}">
  999. <div>previous</div>
  1000. </a>
  1001. {block:PreviousPage}{block:NextPage}
  1002. <a href="{NextPage}">
  1003. <div>forward</div>
  1004. </a>
  1005. {block:NextPage}
  1006. </div>
  1007. {/block:Pagination}
  1008. </div>
  1009. </div>
  1010.  
  1011. <!-- my credit please do not touch thanks! -->
  1012. <a href="https://jinsoouls.tumblr.com/" >
  1013. <div class="cred" id="cred">
  1014. <span data-feather="cloud-rain"></span>
  1015. </div>
  1016. </a>
  1017. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1018. <!-- end of credit -->
  1019.  
  1020. <script>
  1021.  
  1022. feather.replace();
  1023.  
  1024. $("#cred").hover(
  1025. function() {
  1026. $("#cred-info").fadeIn();
  1027. }, function() {
  1028. $("#cred-info").fadeOut();
  1029. }
  1030. );
  1031.  
  1032. /* photoset script by annathms and espoirthemes */
  1033. function gatherData(images, arr) {
  1034. for (let i = 0; i < images.length; i++) {
  1035. let currentData = {
  1036. "width": images[i].getAttribute('data-width'),
  1037. "height": images[i].getAttribute('data-height'),
  1038. "low_res": images[i].getAttribute('data-lowres'),
  1039. "high_res": images[i].getAttribute('data-highres')
  1040. };
  1041. arr.push(currentData);
  1042. }
  1043. }
  1044. function getIndex(elem) {
  1045. let i = 0;
  1046. while( (elem = elem.previousElementSibling) != null ) i++;
  1047. return i;
  1048. }
  1049. function lightbox(elem) {
  1050. let currentPhotoset = elem.parentNode;
  1051. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1052. let data = [];
  1053. gatherData(photosetPhotos, data);
  1054. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1055. }
  1056.  
  1057. /* tooltip script */
  1058. (function($){
  1059. $(document).ready(function(){
  1060. $("a[title]").style_my_tooltips({
  1061. tip_follows_cursor:true,
  1062. tip_delay_time:90,
  1063. tip_fade_speed:600,
  1064. attribute:"title"
  1065. });
  1066. });
  1067. })(jQuery);
  1068.  
  1069. /* audio player color script by shudesigns */
  1070. ($(document).ready(function() {
  1071. $('iframe.tumblr_audio_player').load( function() {
  1072. $('iframe.tumblr_audio_player').contents().find("head")
  1073. .append($("<style type='text/css'> .audio-player{background:{color:accent 1} !important} </style>"));
  1074. });
  1075. })
  1076. )(jQuery);
  1077.  
  1078. /* tab script by me*/
  1079. function openTab(tabName) {
  1080. $("#entries").fadeOut();
  1081. $('.tabcontainer').each(function(index) {
  1082. if (tabName == $(this).attr('id')) {
  1083. $(this).fadeIn();
  1084. } else {
  1085. $(this).fadeOut();
  1086. }
  1087. });
  1088. }
  1089.  
  1090. function closeTab(el) {
  1091. $(el).parent().fadeOut();
  1092. $('#entries').fadeIn();
  1093. }
  1094.  
  1095. </script>
  1096. </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!