kuronoir

lemons

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