kuronoir

post

Sep 26th, 2018
1,187
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.60 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>{title}</title>
  8.  
  9. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13.  
  14. <!--meta stuff-->
  15. <meta name="color:background" content="#ffffff">
  16. <meta name="color:menu" content="#000000">
  17. <meta name="color:text" content="#7f7f7f">
  18. <meta name="color:light text" content="#f1f1f1">
  19. <meta name="color:accent" content="#72af8d">
  20. <meta name="color:link" content="#111111">
  21.  
  22.  
  23. <meta name="text:Link 1 Name" content="link 1">
  24. <meta name="text:Link 1 URL" content="link 1">
  25.  
  26. <meta name="text:Link 2 Name" content="link 2">
  27. <meta name="text:Link 2 URL" content="link 2">
  28.  
  29. <meta name="text:Link 3 Name" content="link 3">
  30. <meta name="text:Link 3 URL" content="link 3">
  31.  
  32. <meta name="text:Description Title" content="about">
  33.  
  34. <meta name="text:Ask Title" content="ask me anything">
  35. <meta name="text:FAQ Title" content="">
  36. <meta name="text:FAQ" content="">
  37.  
  38. <meta name="if:Full Height Menu" content="0"/>
  39.  
  40.  
  41. <!--jquery-->
  42.  
  43. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  44. <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  45.  
  46. <!--tooltips-->
  47.  
  48. <script src="https://static.tumblr.com/iyog0da/bF1pf6jgv/jquery.style-my-tooltips.js"></script>
  49.  
  50. <!--unnest-->
  51.  
  52. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  53.  
  54. <!--pxu photoset--->
  55.  
  56. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css" />
  57. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  58.  
  59.  
  60. <!--icons-->
  61.  
  62. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
  63.  
  64. <!--fonts-->
  65.  
  66. <link href="https://fonts.googleapis.com/css?family=Glegoo|Lato:300,700" rel="stylesheet">
  67.  
  68. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  69.  
  70.  
  71. <!--modals-->
  72.  
  73. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  74. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
  75.  
  76. <!--animate.css-->
  77.  
  78. <link rel="stylesheet"
  79. href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  80.  
  81. <!--WOW!-->
  82.  
  83. <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
  84.  
  85. <script>
  86. new WOW().init();
  87. </script>
  88.  
  89. <style type="text/css">
  90.  
  91. #s-m-t-tooltip{
  92. max-width:300px;
  93. z-index:100;
  94. margin-top:30px;
  95. margin-left: -23px;
  96. padding:3px 6px;
  97. background:{color:link};
  98. border-radius:3px;
  99. font-family:'Lato' , sans-serif;
  100. font-size:.9em;
  101. color:{color:background};
  102. }
  103.  
  104. .iframe-controls--desktop {
  105. display: none;
  106. }
  107.  
  108. * {
  109. -webkit-font-smoothing: antialiased;
  110. }
  111.  
  112. html, body {
  113. margin: 0;
  114. padding: 0;
  115. border: 0;
  116. vertical-align: baseline;
  117. font-family: 'Lato', serif;
  118. font-size: 13px;
  119. letter-spacing: 1px;
  120. line-height: 190%;
  121. color: {color:text};
  122. background: {color:background};
  123. }
  124.  
  125. body.open {
  126. overflow: hidden;
  127. }
  128.  
  129. ol, ul, p {
  130. margin: 10px 0;
  131. }
  132.  
  133. a {
  134. text-decoration: none;
  135. color: {color:link};
  136. }
  137.  
  138. a:hover {
  139. color: {color:accent};
  140. cursor: pointer;
  141. }
  142.  
  143. ul li{
  144. list-style-type:circle;
  145. }
  146.  
  147. ol li {
  148. list-style-type: decimal-leading-zero;
  149. }
  150.  
  151. h1 {
  152. font-size: 1.7em;
  153. font-family: 'Glegoo', sans-serif;
  154. }
  155.  
  156. h2 {
  157. font-size: 1.5em;
  158. font-family: 'Glegoo', sans-serif;
  159. }
  160.  
  161. b {
  162. font-weight: 600;
  163. }
  164.  
  165. em, i {
  166. font-style: italic;
  167. }
  168.  
  169. hr {
  170. width: 50%;
  171. margin: 0 auto;
  172. }
  173.  
  174. /*modal*/
  175.  
  176.  
  177. .blocker {
  178. background: transparent;
  179. z-index: 500;
  180. }
  181.  
  182. .modal {
  183. display: none;
  184. flex-direction: column;
  185. align-items: center;
  186. justify-content: center;
  187. line-height:180%;
  188. padding:10px;
  189. border-radius: 3px;
  190. box-shadow: 0 0 0px transparent;
  191. background-color: {color:background};
  192. width: 420px;
  193. margin: 0 auto;
  194. overflow: auto;
  195. z-index: 1000;
  196. }
  197.  
  198. .modal h2 {
  199. margin-bottom: 15px;
  200. color: {color:link};
  201. }
  202.  
  203. /*lightbox*/
  204.  
  205. .vignette, #vignette {
  206. opacity:0;
  207. }
  208.  
  209. .lightbox-image, #tumblr_lightbox img {
  210. box-shadow:none !important;
  211. border-radius: 5px !important;
  212. max-width:none;
  213. }
  214.  
  215. .tmblr-lightbox, #tumblr_lightbox {
  216. background-color:rgba(0,0,0,.8) !important;
  217. }
  218.  
  219.  
  220. #credit {
  221. position: fixed;
  222. bottom: 50px;
  223. right: 50px;
  224. z-index: 999999999;
  225. }
  226.  
  227. #credit a {
  228. color: {color:light text};
  229. font-size: .8em;
  230. }
  231.  
  232. #credit a:hover {
  233. color: {color:accent};
  234. }
  235.  
  236.  
  237. header {
  238. display: flex;
  239. flex-direction: column;
  240. align-items: center;
  241. position: fixed;
  242. top: 50px;
  243. right: 50px;
  244. z-index: 11;
  245. }
  246.  
  247.  
  248. header img {
  249. position: relative;
  250. border-radius: 3px;
  251. margin: 20px 0;
  252. }
  253.  
  254. header img:hover {
  255. animation: rubberBand 1s;
  256. }
  257.  
  258. .cross {
  259. position: relative;
  260. width: 1em;
  261. height: 1em;
  262. padding: 8px;
  263.  
  264. }
  265.  
  266. .cross:before,
  267. .cross:after {
  268. position: absolute;
  269. content: '';
  270. width: 1em;
  271. height: 1px;
  272. background: {color:text};
  273. transition: .2s;
  274. top: 50%;
  275. }
  276.  
  277. .cross:before {
  278. transform: rotate(90deg);
  279. }
  280.  
  281. .cross:hover:before,
  282. .cross:hover:after{
  283. background: {color:accent};
  284. }
  285.  
  286. .cross:hover:before{
  287. transform: rotate(0deg);
  288. }
  289.  
  290. .cross:hover:after {
  291. transform: rotate(90deg);
  292. }
  293.  
  294. #btn {
  295. position: relative;
  296. height: 1em;
  297. width: 1em;
  298. padding: 8px;
  299. cursor: pointer;
  300. }
  301.  
  302. .line {
  303. position: absolute;
  304. top: 50%;
  305. width: 1em;
  306. border-bottom: 1px solid transparent;
  307. }
  308.  
  309. .line:before,
  310. .line:after {
  311. position: absolute;
  312. content: '';
  313. width: 1em;
  314. height: 1px;
  315. background: {color:text};
  316. transition: .2s;
  317. }
  318.  
  319. .line:before {
  320. top: 3px;
  321. }
  322.  
  323. .line:after {
  324. top: -3px;
  325. }
  326.  
  327. #btn:hover .line:before {
  328. top: 0;
  329. transform: translateY(-3px);
  330. background-color: {color:accent};
  331. }
  332.  
  333. #btn:hover .line:after {
  334. top: 0;
  335. transform: translateY(3px);
  336. background-color: {color:accent};
  337. }
  338.  
  339.  
  340. #btn.open .line:before {
  341. top: 0;
  342. transform: rotate(45deg);
  343. }
  344.  
  345. #btn.open .line:after {
  346. top: 0;
  347. transform: rotate(135deg);
  348. }
  349.  
  350. #btn.open:hover .line:before{
  351. background-color: {color:accent};
  352. transform: rotate(135deg);
  353. }
  354.  
  355. #btn.open:hover .line:after {
  356. background-color: {color:accent};
  357. transform: rotate(45deg);
  358. }
  359.  
  360. #menu {
  361. height: 0%;
  362. width: 100%;
  363. position: fixed;
  364. display: flex;
  365. justify-content: flex-start;
  366. align-items: center;
  367. z-index: 10;
  368. left: 0;
  369. top: 0;
  370. background-color: {color:menu};
  371. overflow: hidden;
  372. {block:IfNotfullheightmenu}
  373. clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
  374. {/block:IfNotfullheightmenu}
  375. transition: .5s;
  376. }
  377.  
  378. #blocker {
  379. display: none;
  380. height: 100%;
  381. width: 100%;
  382. left: 0;
  383. top: 0;
  384. position: fixed;
  385. background: rgba(0,0,0,.8);
  386. z-index: 9;
  387. overflow: hidden;
  388. }
  389.  
  390. #blocker.open {
  391. display: block;
  392. }
  393.  
  394. #menu.open {
  395. {block:Iffullheightmenu}
  396. height: 100%;
  397. {/block:Iffullheightmenu}
  398.  
  399. {block:IfNotfullheightmenu}
  400. height: 50%;
  401. {block:IfNotfullheightmenu}
  402. }
  403.  
  404. .menu-content {
  405. display: flex;
  406. justify-content: center;
  407. align-items: flex-start
  408. width: 100%;
  409. height: 50%;
  410. max-height: calc(100% - 100px);
  411. color: {color:light text};
  412. }
  413.  
  414. #desc {
  415. display: flex;
  416. flex-direction: column;
  417. min-width: 300px;
  418. width: 10%;
  419. max-height: 90%;
  420. margin-right: 150px;
  421. padding: 20px;
  422. padding-right: 40px;
  423. justify-content: center;
  424. line-height: 200%;
  425. color: {color:light text};
  426. animation-delay: .3s;
  427. border-radius: 5px;
  428. overflow: auto;
  429. }
  430.  
  431. #desc h2 {
  432. font-size: 1.5em;
  433. }
  434.  
  435. #desc h2:before {
  436. position: relative;
  437. font-family: "Material Icons";
  438. content:"\E87C";
  439. color: {color:accent};
  440. bottom: -4px;
  441. margin-right: 10px;
  442. }
  443.  
  444.  
  445. #search {
  446. margin-top: 15px;
  447. }
  448.  
  449. .sform input {
  450. color: {color:light text};
  451. border: none;
  452. padding: 8px;
  453. padding-left: 12px;
  454. letter-spacing: 1px;
  455. background: transparent;
  456. width: 100%;
  457. background-color: {color:link};
  458. border-radius: 20px;
  459. }
  460.  
  461. .sform input:focus {
  462. outline: none;
  463. }
  464.  
  465. .sform input::placeholder {
  466. color: {color:text};
  467. letter-spacing: 2px;
  468. }
  469.  
  470. nav {
  471. display: flex;
  472. flex-direction: column;
  473. justify-content: center;
  474. height: auto;
  475. margin-right: 10%;
  476. animation-delay: .1s;
  477. }
  478.  
  479. nav a{
  480. font-size: 1.1em;
  481. font-family: 'Glegoo', sans-serif;
  482. line-height: 1.1;
  483. text-transform: lowercase;
  484. text-align: right;
  485. padding: 4px 8px;
  486. border-radius: 3px;
  487. margin: 2px 0;
  488. color: {color:light text};
  489. transition: .2s;
  490. }
  491.  
  492.  
  493. nav a:hover {
  494. color: {color:accent};
  495. }
  496.  
  497.  
  498. /***************POST GENERAL STYLES & CONTAINER***************/
  499.  
  500. /*posts*/
  501.  
  502. #postcontainer{
  503. margin-top: 100px;
  504. transition: .5s;
  505. }
  506.  
  507. #postcontainer.open {
  508. margin-top: 30%;
  509. }
  510.  
  511. .post{
  512. position: relative;
  513. display: flex;
  514. flex-direction: column;
  515. width: 400px;
  516. min-height: 195px;
  517. margin: 0 auto;
  518. margin-bottom: 250px;
  519. transition: all 2s ease .1s;
  520. }
  521.  
  522. .post img {
  523. max-width: 100%;
  524. height: auto;
  525. }
  526.  
  527. /*caption & reblogs*/
  528.  
  529. .caption{
  530. width: 100%;
  531. }
  532.  
  533. .caption ul, .caption ol{
  534. margin: 10px 0;
  535. margin-left: 20px;
  536. }
  537.  
  538.  
  539.  
  540. .avatar{
  541. width: 24px;
  542. border-radius: 5px;
  543. }
  544.  
  545. blockquote.reblog {
  546. border:0;
  547. margin:0;
  548. padding-top:15px;
  549. }
  550.  
  551. a.tumblr_blog{
  552. bottom:.6em;
  553. margin-left: 8px;
  554. position: relative;
  555. text-transform: lowercase;
  556. font-family: 'Glegoo' , sans-serif;
  557. letter-spacing: 1px;
  558. font-size: .9em;
  559. }
  560.  
  561.  
  562. .quote .tumblr_blog {
  563. bottom:0px;
  564. }
  565.  
  566. .ans .avatar {
  567. position: absolute;
  568. left: -50px;
  569. top: 20px;
  570. }
  571.  
  572. .ans .tumblr_blog::after {
  573. content:' replied:';
  574. }
  575.  
  576. /*postinfo*/
  577.  
  578. #postinfo{
  579. display: flex;
  580. justify-content: center;
  581. align-items: center;
  582. text-align: center;
  583. letter-spacing: 1px;
  584. transition: all .2s ease;
  585. font-size: .9em;
  586. margin-top: 10px;
  587. animation-delay: .5s;
  588. }
  589.  
  590. #postinfo a {
  591. color: {color:link};
  592. margin: 0 8px;
  593. width: 2em;
  594. padding: 4px 8px;
  595. border: 1px solid {color:light text};
  596. border-radius: 3px;
  597. font-size: .9em;
  598. transition: .2s;
  599. }
  600.  
  601. #postinfo a:hover {
  602. color: {color:accent};
  603. background: {color:light text};
  604. }
  605.  
  606. #date {
  607. position: absolute;
  608. left: 400px;
  609. text-transform: uppercase;
  610. margin: 4px 16px;
  611. font-size: .8em;
  612. writing-mode: vertical-rl;
  613. cursor: default;
  614. }
  615.  
  616. #date .far {
  617. transform: rotate(90deg);
  618. color: {color:link};
  619. }
  620.  
  621. /***************POST TYPES***************/
  622.  
  623.  
  624.  
  625. /*ask & answer*/
  626.  
  627.  
  628. .quest{
  629. display: flex;
  630. flex-direction: column;
  631. justify-content: center;
  632. width: 310px;
  633. padding: 20px;
  634. border: 1px solid {color:light text};
  635. border-radius: 5px;
  636. text-align: right;
  637. }
  638.  
  639. .quest::before {
  640. content: '';
  641. position: absolute;
  642. left: 352px;
  643. top: 25px;
  644. width: 0;
  645. height: 0;
  646. border-top: 8px solid transparent;
  647. border-bottom: 8px solid transparent;
  648. border-left:8px solid {color:light text};
  649. }
  650.  
  651. .quest::after {
  652. content: '';
  653. position: absolute;
  654. left: 351px;
  655. top: 26px;
  656. width: 0;
  657. height: 0;
  658. border-top: 7px solid transparent;
  659. border-bottom: 7px solid transparent;
  660. border-left:7px solid {color:background};
  661. }
  662.  
  663. .asker{
  664. margin-bottom: 10px;
  665. text-transform: lowercase;
  666. text-align: right;
  667. font-family: 'Glegoo' , sans-serif;
  668. font-size: .9em;
  669. }
  670.  
  671. .asker img{
  672. position: absolute;
  673. left: 365px;
  674. top: 15px;
  675. border-radius: 5px;
  676. }
  677.  
  678. .ans{
  679. position: relative;
  680. text-align: left;
  681. padding: 10px 20px;
  682. border: 1px solid {color:light text};
  683. width: 310px;
  684. margin-left: 50px;
  685. margin-top: 15px;
  686. border-radius: 5px;
  687. }
  688.  
  689. .ans::before {
  690. content: '';
  691. position: absolute;
  692. right: 351px;
  693. top: 20px;
  694. width: 0;
  695. height: 0;
  696. border-top: 8px solid transparent;
  697. border-bottom: 8px solid transparent;
  698. border-right:8px solid {color:light text};
  699. }
  700.  
  701. .ans::after {
  702. content: '';
  703. position: absolute;
  704. right: 350px;
  705. top: 21px;
  706. width: 0;
  707. height: 0;
  708. border-top: 7px solid transparent;
  709. border-bottom: 7px solid transparent;
  710. border-right:7px solid {color:background};
  711. }
  712.  
  713. /*audio*/
  714.  
  715. .audio{
  716. width:100%;
  717. }
  718.  
  719. .songart img{
  720. width: 205px;
  721. min-height: 205px;
  722. float:left;
  723. margin-right: 20px;
  724. border-radius: 5px;
  725. }
  726.  
  727. .songtitle, .songauthor{
  728. position: relative;
  729. }
  730.  
  731. .songtitle{
  732. padding: 20px 0 0 0;
  733. color: {color:link};
  734. margin-bottom: 5px;
  735. text-transform: uppercase;
  736. }
  737.  
  738. .play{
  739. position: relative;
  740. width: 2em;
  741. height: 2em;
  742. margin-top: 9px;
  743. overflow: hidden;
  744. opacity: .00000000001;
  745. }
  746.  
  747. .play:hover .fa-play {
  748. color: red;
  749. }
  750.  
  751. .fa-play {
  752. color: {color:link};
  753. position: absolute;
  754. left: 226px;
  755. top: 82px;
  756. font-size: 1em;
  757. }
  758.  
  759.  
  760. /*link post*/
  761.  
  762. .link{
  763. padding: 0 10px;
  764. }
  765.  
  766. .link a {
  767. font-size: .8em;
  768. line-height: 1.2;
  769. }
  770.  
  771. .link a:hover{
  772. color: {color:link};
  773. }
  774.  
  775. .link a .fas{
  776. transition: all .2s ease;
  777. margin-right: .5em;
  778. }
  779.  
  780. .link a:hover .fas{
  781. transform: rotate(45deg);
  782. color: {color:accent};
  783. }
  784.  
  785. /*quote*/
  786.  
  787. .quote{
  788. padding: 0 10px;
  789.  
  790. }
  791.  
  792. .quote h1{
  793. line-height: 100%;
  794. margin-bottom: 15px;
  795. letter-spacing: 2px;
  796. line-height: 1.6;
  797. font-size: 1.2em;
  798. color: {color:link};
  799. }
  800.  
  801. /*pagination*/
  802.  
  803. #pagi{
  804. position: relative;
  805. width: 500px;
  806. margin: 0 auto;
  807. display: flex;
  808. font-family: 'Glegoo', sans-serif;
  809. justify-content: space-around;
  810. align-items:center;
  811. padding: 25px 0;
  812. }
  813.  
  814. /***********TAGS AND SOURCE INFORMATION***********/
  815.  
  816. /*tags*/
  817.  
  818. .tags{
  819. text-transform: lowercase;
  820. margin-top: 10px;
  821. }
  822.  
  823. .tags a{
  824. margin-right: 15px;
  825. color: #898989;
  826. font-size: .9em;
  827. padding: 5px;
  828. border-radius: 3px;
  829. transition: .2s;
  830. }
  831.  
  832. .tags a:hover {
  833. background: #f0f0f0;
  834. }
  835.  
  836. .via {
  837. text-transform: lowercase;
  838. display:flex;
  839. justify-content: space-between;
  840. width: 400px;
  841. height: 2em;
  842. margin: 0 auto;
  843. margin-top: 10px;
  844. }
  845.  
  846. .via span {
  847. color: {color:link};
  848. }
  849.  
  850. .faq {
  851. max-height: 200px;
  852. overflow: auto;
  853. padding: 5px;
  854. }
  855.  
  856. </style>
  857.  
  858. </head>
  859.  
  860. <body>
  861.  
  862. <!--HEADER-->
  863.  
  864. <header class="animated flipInY">
  865. <div id="btn" title="menu">
  866. <div class="line"></div>
  867. </div>
  868. <a href ="/"><img src = "{portraiturl-24}" title="home"></a></li>
  869. <a href="http://www.tumblr.com/follow/{name}" title="follow"><div class="cross"></div></a>
  870. </header>
  871.  
  872. <!--MENU-->
  873. <div id="menu">
  874. <div class="menu-content">
  875. <nav>
  876. <a href="#msg" rel="modal:open" class="open-modal">inbox</a>
  877. <a href="http://www.tumblr.com/message/{name}">chat</a>
  878. <a href="/archive">archive</a><br>
  879. <a href="{text:link 1 url}">{text:link 1 name}</a>
  880. <a href="{text:link 2 url}">{text:link 2 name}</a>
  881. <a href="{text:link 3 url}">{text:link 3 name}</a>
  882. </nav>
  883. <div id="desc">
  884. <h2>{text:description title}</h2>
  885. <p>{description}</p>
  886. <div id="search">
  887. <form action="/search" method="get" class="sform">
  888. <input type="text" autocomplete="off" name="q" placeholder="search"/>
  889. </form>
  890. </div>
  891. </div>
  892. </div>
  893. </div>
  894.  
  895. <div id="blocker"></div>
  896.  
  897. <div id="credit"><a href="http://www.vocitates.tumblr.com"><i class="fas fa-code"></i></a></div>
  898.  
  899. <div id="postcontainer">
  900. {block:posts}
  901. <section class="post wow fadeIn">
  902.  
  903.  
  904. <!--photo-->
  905.  
  906. {block:Photo}
  907. <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}">
  908. </a> {block:Caption}
  909. <div class="caption">{Caption}</div>{/block:Caption} {/block:Photo}
  910.  
  911. <!--photoset-->
  912.  
  913. {block:Photoset}
  914. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  915. <div class="photo-data">
  916. <div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}
  917. </div>
  918. {block:Caption}
  919. <div class="caption">{Caption}</div>{/block:Caption} {/block:Photoset}
  920.  
  921. <!--text-->
  922.  
  923. {block:Text}
  924. {block:Title}
  925. <h1 class="text">{Title}</h1>{/block:Title}
  926. <div class="caption text">
  927. {Body}
  928. </div>
  929. {/block:Text}
  930.  
  931.  
  932. <!--ask&answer post-->
  933.  
  934. {block:Answer}
  935. <div class="ask">
  936. <div class="quest"><span class="asker"><img src="{AskerPortraitURL-30}">{asker} said:</span> {Question}</div>
  937. <div class="ans caption">{Answer}</div>
  938. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  939. </div>
  940. {/block:answer}
  941.  
  942. <!--audio-->
  943.  
  944. {block:Audio}
  945. <div class="audio">
  946. {block:AlbumArt}
  947. <div class="songart">
  948. <img src="{AlbumArtURL}">
  949. </div>
  950. {/block:AlbumArt}
  951. <div class="songtitle">
  952. {block:TrackName} <i class="fas fa-headphones-alt fa-fw"></i> {TrackName} {/block:TrackName}
  953. </div>
  954. <div class="songauthor">
  955. {block:Artist} {Artist} {/block:Artist}
  956. </div>
  957. <i class="fas fa-play"></i>
  958. <div class="play">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div>
  959.  
  960. </div>
  961. {/block:audio}
  962.  
  963. <!--video-->
  964.  
  965. {block:Video}{Video-400}{block:Caption}
  966. <div class="caption">{Caption}</div>{/block:Caption}{/block:Video}
  967.  
  968.  
  969. <!--quote-->
  970.  
  971. {block:Quote}
  972. <div class="quote">
  973. <h1><i class="fas fa-quote-left fa-fw "></i> {Quote}</h1>
  974. {Source}</div>{/block:Quote}
  975.  
  976. <!--links-->
  977.  
  978. {block:Link}
  979. <h1 class="link"><a href="{URL}"><i class="fas fa-location-arrow fa-fw"></i> {Name}</a>
  980. </h1> {block:Description}
  981. <div class="caption text" style="width:100%;">{Description}</div>{/block:Description} {/block:Link}
  982.  
  983. {block:PermalinkPage}
  984. <div class="via">
  985.  
  986. <p>{block:RebloggedFrom}<span>via</span>: <a href="{ReblogParentURL}">{ReblogParentName} </a>{/block:RebloggedFrom}</p>
  987.  
  988. <p>{block:ContentSource} <span>source</span>: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}</p>
  989. </div>
  990. {/block:PermalinkPage}
  991.  
  992. <div class="tags">{block:HasTags}
  993. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags} {/block:HasTags}
  994. </div>
  995.  
  996. <!--post info-->
  997.  
  998. {block:Date}
  999. <div id="postinfo" class="wow fadeInUp">
  1000. <a href="{permalink}" title="permalink"><i class="far fa-bookmark fa-fw"></i></a>
  1001. {block:NoteCount} <a href="{permalink}" title="{notecount} notes"><i class="far fa-sticky-note fa-fw"></i>{/block:NoteCount}</a>
  1002. <a href="{reblogURL}" title="reblog"><i class="fas fa-sync-alt fa-fw"></i></a>
  1003. {block:permalinkpage}
  1004. <a id="dash" title="view post on dash"><i class="fas fa-street-view"></i></a>
  1005. {/block:permalinkpage}
  1006. </div>
  1007.  
  1008. <div id="date" title="{timeago}"><i class="far fa-calendar"></i> &nbsp{ShortDayOfWeek}&nbsp {MonthNumberWithZero}|{dayofmonthwithzero}|{ShortYear} </div>
  1009.  
  1010. {/block:Date}
  1011.  
  1012. </section>
  1013.  
  1014. {/block:posts}
  1015.  
  1016. {block:Pagination}
  1017. <div id="pagi" class="wow fadeIn">{block:PreviousPage}
  1018. <a href="{PreviousPage}">previous page</a> {/block:PreviousPage}
  1019. {block:NextPage}
  1020. <a href="{NextPage}">next page</a> {/block:NextPage}
  1021. </div>{/block:Pagination}
  1022.  
  1023. </div>
  1024.  
  1025. <!--ask box-->
  1026.  
  1027. <div id="msg" class="modal">
  1028. <h2>{text:ask title}</h2>
  1029. <iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="400px" height="300px"></iframe>
  1030. <br>
  1031. <h2>{text:faq title}</h2>
  1032. <div class="faq">{text:faq}</div>
  1033. </div>
  1034.  
  1035. <!--unnest-->
  1036.  
  1037. <script>
  1038. $(function() {
  1039. $('.post').unnest({
  1040. yourCaption: ".caption",
  1041. wrapName: ".reblog",
  1042. newCaptionUsername: false,
  1043. originalPostCaptionUsername: false,
  1044. tumblrAvatars: true,
  1045. tumblrAvatarClass: ".avatar",
  1046. usernameColon: false
  1047. });
  1048. });
  1049. </script>
  1050.  
  1051. <!--pxu photoset-->
  1052.  
  1053. <script>
  1054. $(document).ready(function() {
  1055. $('.photo-slideshow').pxuPhotoset({
  1056. lightbox: true,
  1057. rounded: false,
  1058. gutter: '1px',
  1059. borderRadius: '0px',
  1060. photoset: '.photo-slideshow',
  1061. photoWrap: '.photo-data',
  1062. photo: '.pxu-photo'
  1063. });
  1064. });
  1065. </script>
  1066.  
  1067. <!--tooltips-->
  1068.  
  1069. <script>
  1070. (function($){
  1071. $(document).ready(function(){
  1072. $("[title]").style_my_tooltips({
  1073. tip_follows_cursor:true,
  1074. tip_delay_time:90,
  1075. tip_fade_speed:300,
  1076. attribute:"title"
  1077. });
  1078. });
  1079. })(jQuery);
  1080. </script>
  1081.  
  1082. <!--slide in menu-->
  1083.  
  1084. <script>
  1085. var menu = '#menu , #blocker , #postcontainer , body'
  1086. var menuContent = 'nav , #desc'
  1087. var fade = 'animated fadeInDown'
  1088.  
  1089. $( "#btn" ).click(function() {
  1090. $( this ).toggleClass( "open");
  1091. $( menu ).toggleClass( "open" );
  1092. $( menuContent ).toggleClass(fade);
  1093. });
  1094.  
  1095. $( "#blocker" ).click(function() {
  1096. $( menu ).removeClass( "open" );
  1097. $( "#btn" ).removeClass( "open" );
  1098. $( menuContent ).removeClass(fade);
  1099. });
  1100. </script>
  1101.  
  1102. <!--modal-->
  1103.  
  1104. <script>
  1105. $('a.open-modal').click(function(event) {
  1106. $(this).modal({
  1107. fadeDuration: 250,
  1108. fadeDelay: 0,
  1109. showClose: false,
  1110. });
  1111. return false;
  1112. });
  1113. </script>
  1114.  
  1115. <!--view on dash-->
  1116.  
  1117. <script>
  1118. var postId = {postID} + 1;
  1119. var url = 'http://tumblr.com/dashboard/2/';
  1120.  
  1121. $( '#dash' ).click(function(){
  1122. $(location).attr('href', url + postId);
  1123. });
  1124. </script>
  1125.  
  1126. </body>
  1127.  
  1128. </html>
Add Comment
Please, Sign In to add comment