API tools faq
paste
Advertisement
cornetespoir

Andromeda

cornetespoir
Apr 24th, 2017
3,742
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.09 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // Andromeda by espoirthemes //
  4.  
  5. + feel free to edit this as much as you want! but don't remove credit
  6. + do not release as your own or use as a base
  7.  
  8. star code credit: http://codepen.io/lbebber/pen/xbZKvQ
  9.  
  10. -->
  11.  
  12.  
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  26.  
  27. <meta name="image:background" content="http://i.imgur.com/fikUEsX.png" />
  28.  
  29.  
  30.  
  31. <meta name="color:background" content="#f7f7f7" />
  32. <meta name="color:posts" content="#fff" />
  33. <meta name="color:border" content="#eee" />
  34. <meta name="color:text" content="#222" />
  35. <meta name="color:description" content="#fff"/>
  36.  
  37. <meta name="color:links" content="{AccentColor}" />
  38. <meta name="color:link underline" content="#ddd" />
  39. <meta name="color:link hover" content="#eee" />
  40. <meta name="color:scrollbar" content="{AccentColor}" />
  41.  
  42. <meta name="select:blockquote border style" content="solid" title="solid" />
  43. <meta name="select:blockquote border style" content="dotted" title="dotted" />
  44. <meta name="select:blockquote border style" content="dashed" title="dashed" />
  45.  
  46. <meta name="if:full background" content="" />
  47. <meta name="if:hover tags" content="" />
  48. <meta name="if:stars" content="" />
  49. <meta name="text:post width" content="400" />
  50.  
  51. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  52. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  53.  
  54. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  55.  
  56. <!-- I wrote so that the video posts will always be the same size as the container!
  57. (shythemes has a fancier script for this and this one is very specific to this base)
  58. -->
  59. {block:indexpage}
  60. <script>
  61. $(document).ready(function(){
  62. $('.tumblr_video_iframe, .embed_iframe, .tumblr_video_container ').css('width', '{text:post width}px');
  63. });
  64. </script>
  65.  
  66.  
  67. {/block:indexpage}
  68.  
  69. {block:ifstars}
  70. <script>
  71. $(document).ready(function(){
  72. var stars=1000;
  73. var $stars=$(".stars");
  74. var r=1000;
  75. for(var i=0;i<stars;i++){
  76. var $star=$("<div/>").addClass("star");
  77. $stars.append($star);
  78. }
  79. $(".star").each(function(){
  80. var cur=$(this);
  81. var s=0.2+(Math.random()*1);
  82. var curR=r+(Math.random()*500);
  83. cur.css({
  84. transformOrigin:"0 0 "+curR+"px",
  85. transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"
  86.  
  87. })
  88. })
  89. })
  90. </script>
  91. {/block:ifstars}
  92.  
  93. </head>
  94.  
  95. <style type="text/css">
  96.  
  97. /*scrollbar styling */
  98.  
  99. ::-webkit-scrollbar {
  100. width: 12px;
  101. height:6px;
  102.  
  103.  
  104. }
  105. ::-webkit-scrollbar-button {
  106. width: 0px;
  107. height: 0px;
  108. }
  109. ::-webkit-scrollbar-thumb {
  110. background: {color:scrollbar};
  111. border:4px solid {color:background};
  112. border-top:4px solid {color:background};
  113. border-bottom:4px solid {color:background};
  114. cursor:pointer;
  115. border-radius: 8px;
  116. }
  117. ::-webkit-scrollbar-track {
  118. background:#aaa;
  119. border: 5px solid {color:background};
  120. border-top:12px solid {color:background};
  121. border-bottom:12px solid {color:background};
  122.  
  123.  
  124. }
  125.  
  126.  
  127. /*body*/
  128.  
  129. body{
  130. margin: 0;
  131. font-family: Roboto, sans-serif;
  132. background:radial-gradient(220% 105% at top center, #1C1925 10%
  133. ,#583B7E
  134.  
  135. 40%,#E2869B,#FFE4AA);
  136. background-attachment: fixed;
  137. word-wrap: break-word;
  138. font-size: 16px;
  139. color: rgba(0,0,0,.8);
  140. }
  141.  
  142.  
  143. /*Links */
  144.  
  145. .caption a {
  146. color:#222;
  147. border-bottom:2px solid {color:links};
  148. }
  149.  
  150. a{
  151. color: {color:links};
  152. text-decoration: none;
  153. border-bottom: 1px solid {color:link underline};
  154. transition: .6s;
  155. }
  156.  
  157.  
  158. a:hover {
  159. color: {color:link hover};
  160. transition: .6s;
  161. }
  162.  
  163. /*Blockquotes */
  164.  
  165. blockquote{
  166.  
  167. border-left: 1px {select:blockquote border style} {color:border};
  168. padding-left: 4px;
  169.  
  170. }
  171.  
  172. /*prevents the blockquote images from going off of the post */
  173. blockquote img{
  174. max-width: 100%;}
  175.  
  176. /* Header */
  177.  
  178. header {
  179. position:relative;
  180. width:{text:post width}px;
  181. margin:100px auto;
  182. }
  183.  
  184.  
  185.  
  186. .avatar { background:white; width:70px; height:70px; transform:rotate(45deg) translate(-8px, -10px);; overflow:hidden;}
  187.  
  188. .avatar img {
  189. transform:rotate(-45deg) translate(0, -18px);
  190. }
  191.  
  192. .title {
  193. font-size:1.2em;
  194. border:none;
  195. margin-top:4px;
  196. font-family:{TitleFont};
  197. color:{TitleColor};
  198.  
  199. }
  200.  
  201. .description {
  202. padding:20px;
  203. margin-top:-22px;
  204. }
  205. .links a {
  206. border:none;
  207. margin:10px;
  208.  
  209. }
  210.  
  211. /* Sidebar */
  212.  
  213. /* if you wanted a sidebar, here's a vERY simple sidebar (just the shape) to get you started
  214.  
  215. #sidebar {
  216. width:240px;
  217.  
  218. if you want a 100% tall sidebar, set the height to 100vh (will adjust for every screen to be 100% tall)
  219. height:auto;
  220.  
  221. padding:10px;
  222. position:fixed;
  223.  
  224. i made the color the same as the posts so it can match, but if you'd rather it have its own color, you can change it/set it in the meta tags
  225. background:{color:posts};
  226. border:1px solid {color:border};
  227. left:100px;
  228. top:100px;
  229.  
  230. } */
  231.  
  232. /*Container and Posts*/
  233.  
  234. #container {
  235. width:500px;
  236. position:relative;
  237. margin:10px auto ;
  238. }
  239.  
  240.  
  241. .posts{
  242. position:relative;
  243. margin: 200px /*right*/ auto /*bottom*/ 200px /*and left */auto;
  244. width: {text:post width}px;
  245. border-radius:8px;
  246.  
  247. font-size:1em;
  248. min-width:250px;
  249.  
  250. {block:permalinkpage}
  251. width:500px;
  252. {/block:permalinkpage}
  253. }
  254.  
  255. .posts img {
  256. background: {color:posts};
  257. box-shadow:8px 8px rgba(0,0,0,.12);
  258. border-radius:80px;
  259. }
  260. /* headings, with h1 being the biggest/first heading */
  261.  
  262. h1{
  263. padding:20px;
  264. font-size:1.4em;
  265. text-align:center;
  266. border-bottom:1px solid {color:border};
  267.  
  268. }
  269.  
  270. h2 {
  271. font-size:1.3em;
  272. }
  273.  
  274. .posts img {
  275. display:block;
  276. max-width:100%;
  277. border-radius:6px;
  278.  
  279. }
  280.  
  281. /* Post Captions */
  282. .caption {
  283. background: {color:posts};
  284. padding:10px;
  285. margin-top:40px;
  286. border-radius:6px;
  287. box-shadow:8px 8px rgba(0,0,0,.12);
  288. }
  289.  
  290. /*Ask Posts */
  291.  
  292. /*styling for the speech bubble */
  293.  
  294. .speechbubble {
  295.  
  296. width:calc({text:post width}px - 150px);
  297. position: relative;
  298. left:80px;
  299. margin: 0;
  300. padding:16px;
  301. height: auto;
  302. border-radius:8px;
  303. background: white;
  304. border: {color:border} solid 1px;
  305. {block:permalinkpage}
  306. width:360px;
  307. {/block:permalinkpage}
  308. }
  309.  
  310. /* the before and after are the triangle part of the speech bubble */
  311. .speechbubble:after
  312. {
  313. content: '';
  314. position: absolute;
  315. border-style: solid;
  316. border-width: 12px 17px 12px 0;
  317. border-color: transparent white; /* keep same color as bubble */
  318. display: block;
  319. width: 0;
  320. z-index: 1;
  321. left: -16px;
  322. top: 10px;
  323. }
  324. .speechbubble:before
  325. {
  326.  
  327. content: '';
  328. position: absolute;
  329. border-style: solid;
  330. border-width: 12px 17px 12px 0;
  331. border-color: transparent {color:border}; /*keep same color as border */
  332. display: block;
  333. width: 0;
  334. z-index: 0;
  335. left: -17px;
  336. top: 10px;
  337. }
  338.  
  339. /* Chat Posts */
  340.  
  341. .chat {
  342. padding:5px;
  343. line-height:150%;
  344. }
  345.  
  346.  
  347. .chat:nth-of-type(odd) {
  348. background:{color:text};
  349. color:{color:posts};
  350. -webkit-transition:.5s;
  351. transition:.5s; }
  352.  
  353. .chat:nth-of-type(odd) b {
  354. color:{color:posts};
  355. -webkit-transition:.5s;
  356. transition:.5s; }
  357.  
  358. .chat:nth-of-type(even) {
  359. background:{color:posts};
  360. color:{color:text};
  361. -webkit-transition:.5s;
  362. transition:.5s; }
  363. .chat:nth-of-type(even) b{
  364. color:{color:text};
  365. -webkit-transition:.5s;
  366. transition:.5s; }
  367.  
  368. /* Audio Posts */
  369.  
  370.  
  371. #albumart{
  372. z-index:2;
  373. float:left;
  374. border-radius:100%;
  375. height:100px;
  376. border:1px solid {color:info border};
  377. width:100px;
  378.  
  379.  
  380.  
  381. }
  382.  
  383. /* circle inside the album art to make it look like a CD */
  384.  
  385. .playerbox {
  386. float:left;
  387. padding:6px;
  388. }
  389.  
  390.  
  391. .posts #albumart img{
  392.  
  393.  
  394. float:left;
  395. border-radius:100%;
  396. width:100px;
  397. height:100px;
  398. border-width:0px; transition:.6s;
  399.  
  400. }
  401.  
  402. .playerbox:hover #albumart img{
  403. transition:0.6s;
  404. transform:rotate(300deg); }
  405.  
  406. .player {
  407. width:20px;
  408. overflow:hidden;
  409. height:40px;
  410. transform:scale(1.2);
  411. border-radius:100%;
  412. top:8px;
  413. bottom:10px;
  414. left:4px;
  415.  
  416. padding:8px;
  417. padding-top:6px;
  418. padding-left:10px;
  419. padding-bottom:0px;
  420. border-radius:100%;
  421. position:absolute;
  422.  
  423. }
  424.  
  425.  
  426. .playercon {
  427. width:56px;
  428. height:56px;
  429. border-radius:100%;
  430. left:0px;
  431. background:white;
  432. top:22px;
  433. position:relative;
  434. border:1px solid {color:info border};
  435. -webkit-transition-duration:500ms;
  436. -moz-transition-duration:500ms;
  437. -o-transition-duration:500ms;
  438. -ms-transition-duration:500ms;
  439. }
  440. {/block:permalinkpage}
  441. .infobox {
  442. float:left top;
  443. margin-left:120px;
  444. background-color:transparent;
  445. padding:14px;
  446. padding-left:4px;
  447. max-height:140px;
  448. text-align:left;
  449. color:{color:text};
  450. }
  451.  
  452. .trackname {
  453.  
  454. letter-spacing:2px;
  455. padding:2px;
  456. font-size:1em;
  457. font-weight:300;
  458. color:#333;
  459. border-bottom:1px solid {color:border};
  460.  
  461.  
  462. }
  463. .artist {
  464. letter-spacing:2px;
  465. padding:2px;
  466. border-bottom:1px solid {color:border};
  467. }
  468.  
  469. .album {
  470. padding:2px;
  471. border-bottom:1px solid {color:border};
  472. }
  473.  
  474.  
  475.  
  476.  
  477. #audiopost {
  478. width:{text:post width}px;
  479. {block:permalinkpage}
  480. width:500px;
  481. {/block:permalinkpage}
  482.  
  483.  
  484. }
  485.  
  486.  
  487. /* post info */
  488. .info {
  489.  
  490. margin-top:20px;
  491.  
  492. }
  493. .info svg {
  494. width:16px;
  495. height:16px;
  496.  
  497. fill:white;
  498.  
  499. }
  500.  
  501. .info .like svg {
  502. width:1.5em;
  503. height:1.5em;
  504. border:2px solid white;
  505. padding:4px;
  506. box-shadow:1px 1px rgba(0,0,0,.2);
  507. line-height:250%;
  508. border-radius:100%; text-shadow:2px 2px rgba(0,0,0,.2);
  509. }
  510.  
  511. .info .like { /* Make a parent element */
  512.  
  513.  
  514.  
  515. }
  516.  
  517. .info li:last-child {
  518. transform:translate(0,8px);
  519. }
  520.  
  521. .info .like .like_button { /* Position like button above your custom one */
  522. position:absolute;
  523. margin-top:-28px;
  524. margin-left:64px;
  525. opacity: 0;
  526. }
  527. .info .like .like_button.liked { /* Keep the functionality active */
  528. opacity: 1;
  529. }
  530.  
  531. .info li {
  532. list-style:none;
  533. display:inline-block;
  534. width:30%;
  535. box-shadow:1px;
  536. overflow:hidden;
  537. transition:.6s;
  538. vertical-align:top;
  539. padding:10px;
  540. margin:0px -7px;
  541. transform:translate(7px,0);
  542. color:white;
  543. font-size:.8em;
  544. text-align:center;
  545. }
  546.  
  547.  
  548.  
  549. .info a {
  550. border:none;
  551. color:white;
  552. }
  553. .info span {
  554. font-size:1.6em;
  555. line-height:200%;
  556. border:2px solid white;
  557. border-radius:100%;
  558. padding:4px;box-shadow:1px 1px rgba(0,0,0,.2);
  559.  
  560. }
  561.  
  562.  
  563.  
  564.  
  565. /* Tags */
  566.  
  567. .tags {
  568. position:absolute;
  569. right:-250px;
  570. width:230px;
  571. {block:ifhovertags}
  572. opacity:0;
  573. transform:translate(100px /*x axis*/, 0px /* y axis */);
  574. transition:.6s;
  575. {/block:ifhovertags}
  576.  
  577. }
  578.  
  579. {block:ifhovertags}
  580. .posts:hover .tags{
  581. opacity:1;
  582. transform:translate(0,0); /* moves tags back to original spot */
  583. transition:.6s;
  584. }
  585.  
  586. {/block:ifhovertags}
  587. .tags a {
  588. border:none;
  589. }
  590.  
  591.  
  592. /* PostNotes */
  593.  
  594.  
  595.  
  596. ol.notes {
  597. margin:auto;
  598. position:relative;
  599. width:{text:post width}px;
  600. min-width:250px;
  601. list-style:none; /* removes bullet points */
  602. padding:none;
  603.  
  604.  
  605. }
  606.  
  607. ol.notes li {
  608. list-style:none;
  609. padding:10px;
  610. float:left;
  611. border:1px solid {color:border};
  612. padding-left:none;
  613. width:calc({text:post width}px - 20px);
  614. background:{color:posts};
  615. margin:10px 0px;
  616. transform:translate(-20px, 0px);
  617.  
  618. }
  619.  
  620. ol.notes img {
  621. transform:translate(-4px,4px);
  622. border-radius:4px;
  623. float:left;
  624. width:1em;
  625. height:1em;
  626. }
  627.  
  628.  
  629.  
  630. /* Pagination */
  631.  
  632. #pagination a {color:{AccentColor}}
  633. #pagination { text-align:center; font-size:.9em; margin:100px auto; position:relative;}
  634.  
  635. /* the next buttons */
  636. .jump_page {
  637. padding: 4px 6px;
  638. border:1px solid {color:info border};
  639. margin:2px;
  640. background:{color:posts};
  641. text-decoration:none;
  642. border-radius:4px;
  643. }
  644.  
  645. .jump_page a {
  646. border:none;
  647.  
  648. }
  649. /* current page */
  650. .current_page {
  651. padding: 4px 6px;
  652. border:1px solid {AccentColor};
  653. background:{AccentColor};
  654. opacity:.8;
  655. color:white;
  656. transition:.6s;
  657. border-radius:4px;
  658. margin:2px;
  659. text-decoration:none;
  660. }
  661.  
  662. .current_page:hover {
  663. opacity:1;
  664. transition:.6s;
  665. }
  666. #egg { opacity:1;right:10px; bottom:10px; position:fixed;display:block; width: 18px; height: 22px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  667. font-family: "bitxmap";
  668. border:1px solid #888; z-index:9999;
  669.  
  670. }
  671. #egg:hover { animation-name: egg;
  672. animation-duration: 1s;
  673. animation-iteration-count: infinite;}
  674. @keyframes egg{
  675. 0%{}
  676. 10%{transform:rotate(20deg)}
  677. 80%{transform:rotate(-20deg)}
  678. 100%{}
  679. }
  680.  
  681. @keyframes rotate{
  682. 0%{
  683. transform:perspective(360px) rotateZ(-20deg) rotateX(-40deg) rotateY(0);
  684. }
  685. 100%{
  686. transform:perspective(360px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  687. }
  688. }
  689.  
  690. @keyframes blink {
  691. 0% {
  692.  
  693. }
  694.  
  695. 50% {
  696. opacity:.2;
  697. }
  698.  
  699. 100% {
  700. opacity:1;
  701. }
  702. }
  703.  
  704. .star:nth-child(4) {
  705. animation-duration: 8s;
  706. }
  707.  
  708. .star:nth-child(2) {
  709. animation-duration: 1s;
  710. }
  711.  
  712. .star:nth-child(8), .star:nth-child(10), .star:nth-child(3) {
  713. animation-duration: 5s;
  714. }
  715. .stars{
  716. transform:perspective(500px);
  717. transform-style:preserve-3d;
  718. position:fixed;
  719. bottom:0;
  720. perspective-origin:50% 100%;
  721. left:50%;
  722.  
  723. animation:rotate 180s infinite linear;
  724. }
  725.  
  726.  
  727.  
  728. .star{
  729. width:2px;
  730. height:2px;
  731. background:#fff;
  732. border-radius:100%;
  733. position:absolute;
  734. top:0;
  735. animation:blink 4s infinite;
  736. left:0;
  737. transform-origin:0 0 -300px;
  738. transform:translate3d(0,0,-300px);
  739. backface-visibility:hidden;
  740.  
  741. }
  742.  
  743.  
  744. {CustomCSS}
  745. </style>
  746. <body>
  747. <div class="stars">
  748.  
  749. </div>
  750. <header>
  751. <center>
  752. <div class="avatar">
  753. <img src="{PortraitUrl-96}">
  754. </div>
  755.  
  756.  
  757. <a href="/"><h2 class="title">{Title}</h2></a>
  758.  
  759. <div style="color:{color:description}">
  760. {description}
  761. </div><br>
  762. <div class="links">
  763.  
  764. <a href="/">{lang:Home}</a>
  765.  
  766. {block:AskEnabled}
  767. <a href="/ask">{AskLabel}</a>
  768. {/block:AskEnabled}
  769. {block:SubmissionsEnabled}
  770. <a href="/submit">{SubmitLabel}</a>
  771. {/block:SubmissionsEnabled}
  772. <a href="/archive">{lang:Archive}</a>
  773.  
  774. <div style="margin-top:6px">
  775. {block:HasPages} {block:Pages}<a href="{URL}">{label}</a> {/block:Pages} {/block:HasPages}
  776. </div>
  777. </div>
  778. </center>
  779. </header>
  780.  
  781. <a href="http://espoirthemes.com"><div id="egg"></div></a>
  782.  
  783. <!-- container start -->
  784. <div id="container">
  785.  
  786.  
  787.  
  788.  
  789. {block:Posts}<div class="posts">
  790.  
  791. <!-- {block:NoRebloggedFrom}
  792. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  793. {/block:NoRebloggedFrom} -->
  794. {block:ContentSource}
  795. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  796. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  797. {/block:SourceLogo}
  798. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  799. {/block:ContentSource}
  800.  
  801. <!-- text post start -->
  802. {block:Text}
  803.  
  804. {block:Title}
  805. <h1><a href="{Permalink}">{Title}</a></h1>
  806. {/block:Title}
  807.  
  808. <div class="caption">{Body}</div>
  809.  
  810. {/block:Text} <!-- text post end -->
  811.  
  812. <!-- photo posts -->
  813. {block:Photo}
  814. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  815. {block:Caption}
  816. <div class="caption">{Caption}</div>
  817. {/block:Caption}
  818.  
  819. {/block:Photo}<!-- end photo posts -->
  820.  
  821. {block:Panorama}
  822. {LinkOpenTag}
  823. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  824. {LinkCloseTag}
  825.  
  826. {block:Caption}
  827. <div class="caption">{Caption}</div>
  828. {/block:Caption}
  829.  
  830. {/block:Panorama}
  831.  
  832. <!-- photoset posts -->
  833. {block:Photoset}
  834. {Photoset}
  835.  
  836. {block:Caption}
  837. <div class="caption">{Caption}</div>
  838. {/block:Caption}
  839.  
  840. {/block:Photoset}<!-- end photoset -->
  841.  
  842. <!-- quote posts -->
  843. {block:Quote}
  844. <div class="caption">
  845. "{Quote}"
  846.  
  847. {block:Source}
  848. <br> -{Source}
  849. {/block:Source}
  850. </div>
  851. {/block:Quote} <!-- end quote posts -->
  852.  
  853. <!-- link posts --> {block:Link}
  854.  
  855. <h1> <a href="{URL}" style="border:none" class="link" {Target}>{Name}</a></h1>
  856.  
  857. {block:Description}
  858. <div class="caption">{Description}</div>
  859. {/block:Description}
  860.  
  861. {/block:Link}
  862. <!-- end link posts -->
  863.  
  864. {block:Chat}
  865.  
  866.  
  867. <div class="caption">
  868. {block:Title}<a href="{Permalink}" style="background:transparent; padding:0;"><h1>{title}</h1></a>{/block:Title}
  869. {block:Lines} <div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}
  870.  
  871. </div>
  872.  
  873. {/block:Chat}{block:Video}
  874.  
  875. {Video-500}{block:Caption}
  876. <div class="caption">{Caption}</div>
  877. {/block:Caption}
  878.  
  879. {/block:Video}{block:Audio}
  880.  
  881. <div id="audiopost">
  882. <div class="playerbox">
  883. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  884.  
  885. <center><div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></center></div>
  886. <div class="infobox">
  887. <div class="trackname"> {block:TrackName}
  888. Track: {TrackName}
  889. {/block:TrackName} </div>
  890.  
  891.  
  892. <div class="artist">
  893. {block:Artist}
  894.  
  895. Artist: {Artist}
  896. {/block:Artist} </div>
  897.  
  898. <div class="album">
  899. {block:Album}
  900. Album: {Album}
  901. {/block:Album}
  902. </div>
  903.  
  904. </div></div> <br> {block:Caption}
  905. <div class="caption">{Caption}</div>
  906. {/block:Caption}
  907.  
  908. {/block:Audio}
  909.  
  910.  
  911.  
  912. {block:Answer}
  913. <div class="caption">
  914. <br>
  915. <div class="askerportrait"><img style="position:absolute; margin-left:10px" src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} said: {Question}</div> {answer}
  916.  
  917. </div>
  918. {/block:Answer}
  919.  
  920. {block:HasTags} <div class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div> {/block:HasTags}
  921.  
  922. {block:Date}
  923. <div class="info">
  924. <li>
  925. <a href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}" title="at {12hour}:{minutes}{AmPM}"> <span class="lnr lnr-star"></span> <br> {monthnumber} / {DayofMonth} / {ShortYear} </a> </li>
  926. <li> <a href="{permalink}" ><span class="lnr lnr-moon"></span> <br> {NoteCount}</a></li>
  927. <li><div class="like">
  928. <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  929. width="369.486px" height="369.486px" viewBox="0 0 369.486 369.486" style="enable-background:new 0 0 369.486 369.486;"
  930. xml:space="preserve">
  931. <g>
  932. <g>
  933. <path d="M184.743,357.351c-3.478,0-6.798-1.449-9.164-3.998l-147.67-159.16c-0.038-0.041-0.076-0.082-0.113-0.123
  934. C9.871,174.223,0,147.921,0,120.008c0-27.914,9.871-54.215,27.796-74.061l2.244-2.484c18.246-20.201,42.608-31.327,68.599-31.327
  935. s50.354,11.126,68.601,31.328l17.503,19.38l17.503-19.379c18.246-20.202,42.608-31.328,68.6-31.328s50.354,11.126,68.601,31.329
  936. l2.241,2.478c17.928,19.851,27.799,46.152,27.799,74.065s-9.872,54.215-27.796,74.061c-0.037,0.043-0.075,0.084-0.113,0.125
  937. l-147.671,159.16C191.541,355.901,188.221,357.351,184.743,357.351z M46.295,177.252l138.448,149.219l138.448-149.22
  938. c28.485-31.603,28.467-82.97-0.055-114.549l-2.239-2.478c-13.449-14.891-31.224-23.09-50.051-23.09
  939. c-18.828,0-36.603,8.199-50.048,23.085L194.02,89.869c-2.369,2.624-5.74,4.121-9.275,4.121s-6.906-1.497-9.276-4.121
  940. l-26.779-29.648c-13.446-14.887-31.22-23.086-50.048-23.086S62.039,45.333,48.594,60.22l-2.244,2.484
  941. C17.828,94.283,17.809,145.65,46.295,177.252z"/>
  942. </g>
  943. </g>
  944.  
  945.  
  946. </svg>
  947.  
  948. {LikeButton size="20"}<br> Like
  949. </div> </li>
  950.  
  951.  
  952.  
  953. </div> <!-- end info -->
  954. {block:permalinkpage}<div class="caption">
  955. {block:RebloggedFrom}<br> {lang:via} <a href="{ReblogParentURL}"> {ReblogParentName}</a> {lang:source} <a href="{ReblogRootURL}"> {ReblogRootName}</a>
  956. {/block:RebloggedFrom} </div>{/block:permalinkpage}
  957. {/block:Date}
  958.  
  959.  
  960.  
  961.  
  962. </div><!--posts end-->
  963. <div id="pagination"><!-- navigation for next post and previous post -->
  964. {block:PermalinkPagination}
  965. {block:PreviousPost}
  966. <a href="{PreviousPost}" class="jump_page">Previous Post</a>
  967. {/block:PreviousPost}
  968.  
  969. {block:NextPost}
  970. <a href="{NextPost}" class="jump_page">Next Post</a>
  971. {/block:NextPost}
  972. {/block:PermalinkPagination}
  973. </div>
  974.  
  975.  
  976. {block:PostNotes} {PostNotes-64} {/block:PostNotes} {/block:Posts}
  977.  
  978. <!-- pagination -->
  979. <div id="pagination">
  980.  
  981.  
  982. <!-- navigation for next day -->
  983. {block:DayPagination}{block:PreviousDayPage}
  984. <a href="{PreviousDayPage}" class="jump_page">
  985. &#171; {ShortMonth} {DayOfMonth}
  986. </a>
  987. {/block:PreviousDayPage}{block:NextDayPage}
  988. <a href="{NextDayPage}" class="jump_page">
  989. {ShortMonth} {DayOfMonth} &#187;
  990. </a>
  991. {/block:NextDayPage}{/block:DayPagination}
  992.  
  993. {block:PreviousPage}
  994. <a href="{PreviousPage}" class="jump_page">&#171; Previous</a>
  995. {/block:PreviousPage}{block:NextPage}
  996. <a href="{NextPage}" class="jump_page">Next &#187;</a>
  997. {/block:NextPage}
  998. </div><!-- pagination end -->
  999.  
  1000. </div><!--container end-->
  1001.  
  1002.  
  1003. </body>
  1004. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!