API tools faq
paste
Advertisement
Sky_Blue

KIND OF A THEME. CODE theme

Sky_Blue
Jun 28th, 2022 (edited)
1,865
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. KIND OF A THEME. CODE theme by @mirainikki / @puella
  7.  
  8. umm.... hellaur 🤣🤣🤣🤣🤣🤣🤣🤣🤣
  9.  
  10. why am i coding in the middle of a hot summer day. something is wrong with me but you all knew that
  11.  
  12.  
  13. NOTES:
  14.  
  15. -the side image's dimensions are 550 x 300
  16.  
  17. -you can choose whether you want the side image to be anchored to the top, bottom, or center of the container
  18.  
  19. -the music player is completely optional
  20.  
  21. -you can have more than four songs for the music player, but basic html knowledge is needed
  22.  
  23. -music player tutorial: https://themepreviews.neocities.org/musicplayertutorial.html
  24.  
  25.  
  26. CREDITS:
  27. -photosets by @annasthms
  28.  
  29. -scrollbar from https://gist.github.com/Dakedres/0ccda599648833a1c2f65d3967aa131b
  30.  
  31. -infinite scroll from https://github.com/MatthewRayfield/tumblr-infinite-scrolling
  32.  
  33. -music layer code from https://www.geeksforgeeks.org/create-a-music-player-using-javascript/
  34.  
  35. ----->
  36.  
  37. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  38.  
  39. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  40.  
  41. <meta charset="utf-8">
  42. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  43. {block:Description}
  44. <meta name="description" content="{MetaDescription}" />
  45. {/block:Description}
  46.    
  47. <title>{Title}</title>
  48.        
  49. <link rel="shortcut icon" href="{image:favicon}">
  50. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  51. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  52.  
  53. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  54.  
  55. <link rel="stylesheet" href="https://static.tumblr.com/p6yopnt/PxJr3vu6k/scrollbar.css">
  56.  
  57. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  58.  
  59. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  60. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  61. <script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:100,attribute:"title"});});})(jQuery);</script>
  62.  
  63. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  64.  
  65. <script>
  66. function gatherData(images, arr) {
  67.   for (let i = 0; i < images.length; i++) {
  68.    let currentData = {
  69.      "width": images[i].getAttribute('data-width'),
  70.      "height": images[i].getAttribute('data-height'),
  71.      "low_res": images[i].getAttribute('data-lowres'),
  72.      "high_res": images[i].getAttribute('data-highres')
  73.    };
  74.    arr.push(currentData);
  75.  }
  76. }
  77. function getIndex(elem) {
  78.  let i = 0;
  79.  while( (elem = elem.previousElementSibling) != null ) i++;
  80.  return i;
  81. }
  82. function lightbox(elem) {
  83.  let currentPhotoset = elem.parentNode;
  84.  let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  85.  let data = [];
  86.  gatherData(photosetPhotos, data);
  87.  Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  88. }
  89. </script>
  90.  
  91. <link href="https://fonts.googleapis.com/css?family=Advent+Pro|Bebas+Neue|Bellota|Liu+Jian+Mao+Cao|Orbitron|Pacifico|Playfair+Display|Rajdhani&display=swap" rel="stylesheet">
  92.        
  93. <meta name="image:favicon" content=""/>
  94. <meta name="image:icon" content=""/>
  95. <meta name="image:background" content=""/>
  96. <meta name="image:left container background" content=""/>
  97. <meta name="image:content background" content=""/>
  98. <meta name="image:right container background" content=""/>
  99. <meta name="image:side image" content=""/>
  100.  
  101. <meta name="color:border" content="#000"/>
  102. <meta name="color:background" content=""/>
  103. <meta name="color:sidebar background" content="#fff"/>
  104. <meta name="color:container background" content="#fff"/>
  105. <meta name="color:content background" content="#fff"/>
  106. <meta name="color:post background" content="#fff"/>
  107. <meta name="color:description background" content="#fff"/>
  108. <meta name="color:links background" content="#fff"/>
  109. <meta name="color:text" content="#000"/>
  110. <meta name="color:links" content=""/>
  111. <meta name="color:links hover" content=""/>
  112. <meta name="color:links glow" content=""/>
  113. <meta name="color:links glow hover" content=""/>
  114. <meta name="color:links outline" content=""/>
  115. <meta name="color:links outline hover" content=""/>
  116. <meta name="color:song title background" content="#fff"/>
  117. <meta name="color:music controls background" content="#fff"/>
  118. <meta name="color:music controls" content="#000"/>
  119. <meta name="color:footer icons" content="#000"/>
  120. <meta name="color:tooltip background" content="#fff"/>
  121. <meta name="color:tooltip text" content="#000"/>
  122. <meta name="color:selection background" content=""/>
  123. <meta name="color:selection text" content=""/>
  124.  
  125. <meta name="if:music player" content="1"/>
  126. <meta name="if:content borders" content="1"/>
  127. <meta name="if:side image margin left" content=""/>
  128. <meta name="if:side image margin right" content=""/>
  129. <meta name="if:mirror side image" content=""/>
  130. <meta name="if:redirect" content="1"/>
  131. <meta name="if:links glow" content=""/>
  132. <meta name="if:links outline" content="1"/>
  133. <meta name="if:hover blur" content=""/>
  134. <meta name="if:captions" content="1"/>
  135. <meta name="if:round borders" content=""/>
  136. <meta name="if:background cover" content=""/>
  137.  
  138. <meta name="select:border style" content="solid"/>
  139. <meta name="select:border style" content="dashed"/>
  140. <meta name="select:border style" content="dotted"/>
  141. <meta name="select:border style" content="double"/>
  142. <meta name="select:border style" content="inset"/>
  143. <meta name="select:border style" content="outset"/>
  144. <meta name="select:border style" content="groove"/>
  145. <meta name="select:border style" content="ridge"/>
  146.  
  147. <meta name="select:side image position" content="flex-end"/>
  148. <meta name="select:side image position" content="flex-start"/>
  149. <meta name="select:side image position" content="center"/>
  150.  
  151. <meta name="text:font size" content="25"/>
  152. <meta name="text:font" content=""/>
  153. <meta name="text:description" content="the yoinky sploinky"/>
  154. <meta name="text:links title" content="links"/>
  155. <meta name="text:border width" content="4"/>
  156. <meta name="text:next" content="next"/>
  157. <meta name="text:previous" content="back"/>
  158. <meta name="text:link 1" content="eins"/>
  159. <meta name="text:link 1 url" content=""/>
  160. <meta name="text:link 2" content="zwei"/>
  161. <meta name="text:link 2 url" content=""/>
  162. <meta name="text:link 3" content="drei"/>
  163. <meta name="text:link 3 url" content=""/>
  164. <meta name="text:link 4" content="vier"/>
  165. <meta name="text:link 4 url" content=""/>
  166. <meta name="text:song 1 title" content="sample title"/>
  167. <meta name="text:song 1 mp3" content=""/>
  168. <meta name="text:song 2 title" content="sample title"/>
  169. <meta name="text:song 2 mp3" content=""/>
  170. <meta name="text:song 3 title" content="sample title"/>
  171. <meta name="text:song 3 mp3" content=""/>
  172. <meta name="text:song 4 title" content="sample title"/>
  173. <meta name="text:song 4 mp3" content=""/>
  174. <meta name="text:redirect" content=""/>  
  175.  
  176. </head>
  177.        
  178. <style type="text/css">
  179. .npf_row {
  180.     margin: 0 !important;
  181. }
  182.  
  183. .tmblr-full img{
  184.     border:{text:border width}px {select:border style} {color:border};
  185.     box-sizing:border-box !important;
  186.     {block:ifroundborders}
  187.     border-radius:10px;
  188.     {/block:ifroundborders}
  189. }
  190.  
  191. ::selection {
  192. background: {color:selection background};
  193. color:{color:selection text};
  194. }
  195.  
  196. ::-moz-selection {
  197. background: {color:selection background};
  198. color:{color:selection text};
  199. }
  200.  
  201. #content::-webkit-scrollbar {
  202.   display: none;
  203. }
  204.  
  205. #s-m-t-tooltip{
  206.     margin: 20px 0 0 20px;
  207.     padding: 5px;
  208.     max-width: 300px;
  209.     background-color:{color:tooltip background};
  210.     color:{color:tooltip text};
  211.     border:{text:border width}px {select:border style} {color:border};
  212.     z-index: 99999999999999999999999999999999999999999;
  213.     {block:ifroundborders}
  214.     border-radius:10px;
  215.     {/block:ifroundborders}
  216. }
  217.  
  218. body {
  219.     margin:0px;
  220.     font-family:{text:font};
  221.     font-size:{text:font size}px;
  222.     color:{color:text};
  223.     background-color: {color:background};
  224.     background-image: url('{image:background}');
  225.     {block:ifbackgroundcover}
  226.     background-size: cover;
  227.     {/block:ifbackgroundcover}
  228.     {block:ifnotbackgroundcover}
  229.     background-repeat:repeat;
  230.     {/block:ifnotbackgroundcover}
  231.     background-attachment:fixed;
  232. }
  233.  
  234. p{
  235.     margin:5px 0px;
  236.     padding:0;
  237. }
  238.  
  239. pre {
  240.     white-space: pre-wrap;
  241.     white-space: -moz-pre-wrap;
  242.     white-space: -pre-wrap;
  243.     white-space: -o-pre-wrap;
  244.     word-wrap: break-word;
  245. }
  246.  
  247. a{
  248.     color:{color:links};
  249.     {block:iflinksglow}
  250.     text-shadow:0 0 2px {color:links glow},0 0 2px {color:links glow},0 0 2px {color:links glow}, 0 0 1px {color:links glow};
  251.     {/block:iflinksglow}
  252.     {block:iflinksoutline}
  253.     text-shadow: -1px 0 {color:links outline}, 0 1px {color:links outline}, 1px 0 {color:links outline}, 0 -1px {color:links outline};
  254.     {/block:iflinksoutline}
  255.     text-decoration:none;
  256.     transition:0.5s;
  257. }
  258.  
  259. a:hover{
  260.     color:{color:links hover};
  261.     {block:iflinksglow}
  262.     text-shadow:0 0 2px {color:links glow hover},0 0 2px {color:links glow hover},0 0 2px {color:links glow hover},0 0 1px {color:links glow hover};
  263.     {/block:iflinksglow}
  264.     {block:iflinksoutline}
  265.     text-shadow: -1px 0 {color:links outline hover}, 0 1px {color:links outline hover}, 1px 0 {color:links outline hover}, 0 -1px           {color:links outline hover};
  266.     {/block:iflinksoutline}
  267.     {block:ifhoverblur}
  268.     -webkit-filter: blur(.9px);
  269.     {/block:ifhoverblur}
  270.     cursor: help;
  271. }
  272.  
  273. a.tumblr_blog{
  274.     display:inline-block;
  275.     margin-bottom:5px;
  276. }
  277.  
  278. li{
  279.     margin-left:-15px;
  280. }
  281.  
  282. #wrapper{
  283.     width:fit-content;
  284.     height:fit-content;
  285.     width: -moz-fit-content;
  286.     height: -moz-fit-content;
  287.     position:fixed;
  288.     display: inline-block;
  289.     top: 0;
  290.     bottom: 0;
  291.     left: 0;
  292.     right: 0;
  293.     margin: auto;
  294.     animation: fadeEffect 1s;
  295. }
  296.  
  297. @keyframes fadeEffect {
  298.   from {opacity: 0;}
  299.   to {opacity: 1;}
  300. }
  301.  
  302. #container{
  303.     height:550px;
  304.     overflow:hidden;
  305.     border:{text:border width}px {select:border style} {color:border};
  306.     display:flex;
  307.     background-color:{color:container background};
  308.     {block:ifroundborders}
  309.     border-radius:10px;
  310.     {/block:ifroundborders}
  311. }
  312.  
  313. #content{
  314.     {block:ifcontentborders}
  315.     border-left:{text:border width}px {select:border style} {color:border};
  316.     border-right:{text:border width}px {select:border style} {color:border};
  317.     {/block:ifcontentborders}
  318.     overflow:auto;
  319.     background-color:{color:content background};
  320.     background-image:url('{image:content background}');
  321. }
  322.  
  323. #right{
  324.     {block:ifsideimagemarginleft}
  325.     padding-left:15px;
  326.     {/block:ifsideimagemarginleft}
  327.     {block:ifsideimagemarginright}
  328.     padding-right:15px;
  329.     {/block:ifsideimagemarginright}
  330.     box-sizing:border-box;
  331.     width:300px;
  332.     background-image:url('{image:right container background}');
  333. }
  334.  
  335. #rightimg{
  336.     display:flex;
  337.     height:100%;
  338.     align-items: {select:side image position};
  339.     align-content: center;
  340.     justify-content: center;
  341. }
  342.  
  343. #rightimg img{
  344.     width:100%;
  345.     {block:ifmirrorsideimage}
  346.     transform: scaleX(-1);
  347.     {/block:ifmirrorsideimage}
  348.     height:auto;
  349. }
  350.  
  351. #sidebar{
  352.     display: flex;
  353.     flex-direction:column;
  354.     width:300px;
  355.     text-align:center;
  356.     padding:15px;
  357.     box-sizing:border-box;
  358.     background-image:url('{image:left container background}');
  359. }
  360.  
  361. #side{
  362.     border:{text:border width}px {select:border style} {color:border};
  363.     border-top:none;
  364.     padding:15px;
  365.     box-sizing:border-box;
  366.     background-color:{color:sidebar background};
  367.     {block:ifroundborders}
  368.     border-radius:0px 0px 10px 10px;
  369.     {/block:ifroundborders}
  370. }
  371.  
  372. .description{
  373.     height:79px;
  374.     text-align:center;
  375.     overflow:auto;
  376.     border:{text:border width}px {select:border style} {color:border};
  377.     padding:5px;
  378.     box-sizing:border-box;
  379.     margin-bottom:15px;
  380.     {block:ifroundborders}
  381.     border-radius:10px;
  382.     {/block:ifroundborders}
  383.     background-color:{color:description background};
  384. }
  385.  
  386. .icon{
  387.     display:block;
  388.     overflow:hidden;
  389.     box-sizing:border-box;
  390.     {block:ifroundborders}
  391.     border-radius:10px 10px 0px 0px;
  392.     {/block:ifroundborders}
  393.     border:{text:border width}px {select:border style} {color:border};
  394.     background-color:{color:sidebar background};
  395. }
  396.  
  397. .icon img{
  398.     width:270px;
  399.     height:270px;
  400.     display:block;
  401. }
  402.  
  403. select{
  404.     width:100%;
  405.     border:{text:border width}px {select:border style} {color:border};
  406.     text-align:center;
  407.     font-family:{text:font};
  408.     padding:5px;
  409.     font-size:{text:font size}px;
  410.     color:{color:text};
  411.     {block:ifroundborders}
  412.     border-radius:10px;
  413.     {/block:ifroundborders}
  414.     background-color:{color:links background};
  415. }
  416.  
  417. .musicplayer{
  418.     border:{text:border width}px {select:border style} {color:border};
  419.     margin-top:15px;
  420.     {block:ifroundborders}
  421.     border-radius:10px;
  422.     {/block:ifroundborders}
  423. }
  424.  
  425. .songtitle{
  426.     padding:5px;
  427.     border-bottom:{text:border width}px {select:border style} {color:border};
  428.     height:25px;
  429.     display:flex;
  430.     align-items: center;
  431.     background-color:{color:song title background};
  432. }
  433.  
  434. .controls{
  435.     font-size:20px !important;
  436.     color:{color:music controls};
  437.     background-color:{color:music controls background};
  438.     text-align:center;
  439.     width:100%;
  440.     height:25px;
  441. }
  442.  
  443. .controls td{
  444.     padding:5px;
  445. }
  446.  
  447. .post{
  448.     width:350px;
  449.     overflow:hidden;
  450.     border:{text:border width}px {select:border style} {color:border};
  451.     background:{color:post background};
  452.     box-sizing:border-box;
  453.     {block:ifroundborders}
  454.     border-radius:10px;
  455.     {/block:ifroundborders}
  456.     position:relative;
  457.     {block:ifcontentborders}
  458.     margin:15px;
  459.     {/block:ifcontentborders}
  460.     {block:ifnotcontentborders}
  461.     margin:15px 0px;
  462.     {/block:ifnotcontentborders}
  463.     word-break: break-word;
  464. }
  465.  
  466. .footer{
  467.     margin-top:15px;
  468.     display:flex;
  469.     justify-content:space-between;
  470. }
  471.  
  472. .answer .embed_iframe{
  473.     width: 340px;
  474. }
  475.  
  476. .nfp_row{
  477.     margin-left:0px;
  478.     margin-right:0px;
  479. }
  480.  
  481. #nav{
  482.     text-align:center;
  483.     display:flex;
  484.     justify-content:space-evenly;
  485.     margin-bottom:15px;
  486. }
  487.  
  488. #nav a{
  489.     border:{text:border width}px {select:border style} {color:border};
  490.     background-color:{color:post background};
  491.     padding:5px;
  492.     {block:ifroundborders}
  493.     border-radius:10px;
  494.     {/block:ifroundborders}
  495. }
  496.  
  497. video{
  498.     max-width:100%;
  499.     height:auto!important;
  500. }
  501.  
  502. .video-container {
  503.     overflow: hidden;
  504. }
  505.  
  506. .video-container iframe,
  507. .video-container object,
  508. .video-container embed {
  509.     position: center;
  510.     max-width: 312px;
  511.     max-height: 312px;
  512.     border:{text:border width}px {select:border style} {color:border};
  513.     box-sizing:border-box;
  514. }
  515.  
  516. .video-wrapper {
  517.     max-width: 312px;
  518.     max-height: 312px;
  519.  
  520. }
  521.  
  522. iframe.tumblr_audio_player {
  523.     height: 85px;
  524.     border:{text:border width}px {select:border style} {color:border};
  525.     box-sizing:border-box;
  526.     {block:ifroundborders}
  527.     border-radius:10px;
  528.     {/block:ifroundborders}
  529.    
  530. }
  531.  
  532. .media{
  533.     margin:0 0 0px 0;
  534.     text-align:center;
  535.     {block:ifroundborders}
  536.     border-radius:10px;
  537.     {/block:ifroundborders}
  538. }
  539.  
  540. .media:hover{
  541.     {block:ifhoverblur}
  542.     -webkit-filter: blur(.9px);
  543.     {/block:ifhoverblur}
  544. }
  545.  
  546. .media img{
  547.     border:{text:border width}px {select:border style} {color:border};
  548.     display:block;
  549.     box-sizing:border-box;
  550.     {block:ifroundborders}
  551.     border-radius:10px;
  552.     {/block:ifroundborders}
  553. }
  554.  
  555. .title{
  556.     font-size:35px;
  557.     text-transform:lowercase;
  558.     margin:10px 0 10px 0;
  559.     color:{color:text};
  560.     font-family:{text:title font};
  561. }
  562.  
  563. h1, h2, h3, h4, h5, h6{
  564.     font-size:35px;
  565.     text-transform:lowercase;
  566.     margin:10px 0 10px 0;
  567.     color:{color:text};
  568.     font-family:{text:title font};
  569. }
  570.  
  571. .quote{
  572.     font-weight:normal;
  573.     font-size:{text:font size};
  574.     font-style:italic;
  575.     margin:0 0 10px 0;
  576. }
  577.  
  578. .question {
  579.     position: relative;
  580.     border:{text:border width}px {select:border style} {color:border};
  581.     {block:ifroundborders}
  582.     border-radius:10px;
  583.     {/block:ifroundborders}
  584.     padding: 15px;
  585.     margin-left:15px;
  586.     width:100%;
  587.     word-break: break-word;
  588. }
  589.  
  590. .asker{
  591.     display:flex;
  592.     align-items: flex-start;
  593. }
  594.  
  595. .asker img{
  596.     border:{text:border width}px {select:border style} {color:border};
  597.     {block:ifroundborders}
  598.     border-radius:10px;
  599.     {/block:ifroundborders}
  600. }
  601.  
  602. .answer{
  603.     position: relative;
  604.     border:{text:border width}px {select:border style} {color:border};
  605.     {block:ifroundborders}
  606.     border-radius:10px;
  607.     {/block:ifroundborders}
  608.     padding: 15px;
  609.     margin-right:15px;
  610.     width:100%;
  611.     word-break: break-word;
  612. }
  613.  
  614. .answerer{
  615.     margin-top:15px;
  616.     display:flex;
  617.     align-items: flex-start;
  618. }
  619.  
  620. .answerer img{
  621.     border:{text:border width}px {select:border style} {color:border};
  622.     {block:ifroundborders}
  623.     border-radius:10px;
  624.     {/block:ifroundborders}
  625. }
  626.  
  627. .caption{
  628.     margin-top:10px;
  629. }
  630.  
  631. blockquote{
  632.     border-left:{text:border width}px solid {color:text};
  633.     margin:5px;
  634.     padding-left:10px;
  635. }
  636.  
  637. blockquote img{
  638.     max-width:100%;
  639.     height:auto;
  640.     object-fit:cover;
  641.     display: block;
  642.     box-sizing:border-box;
  643.     border:{text:border width}px {select:border style} {color:border};
  644. }
  645.  
  646. img{
  647.     max-width:100%;
  648.     height:auto;
  649. }
  650.  
  651. ol.notes{
  652.     border:{text:border width}px {select:border style} {color:border};
  653.     {block:ifroundborders}
  654.     border-radius:10px;
  655.     {/block:ifroundborders}
  656.     margin-top:15px;
  657.     padding:15px;
  658.     list-style-type:none;
  659.     max-height:200px;
  660.     overflow:auto;
  661.     margin-bottom:0px;
  662. }
  663.  
  664. ol.notes li.note img{
  665.     width:16px;
  666.     height:16px;
  667.     margin-right:3px;
  668. }
  669.  
  670. ol.notes li.note{
  671.     margin:0px;
  672. }
  673.  
  674. .tags {
  675.     margin-top:15px;
  676.     text-align:center;
  677. }
  678.  
  679. [photoset-layout] {
  680.   grid-gap: 15px;
  681. }
  682.  
  683. [photoset-layout] img {
  684.     {block:ifroundborders}
  685.     border-radius:10px;
  686.     {/block:ifroundborders}
  687.     border:{text:border width}px {select:border style} {color:border};
  688.     display: block;
  689.     height: 100%;
  690.     width: 100%;
  691.     object-fit: cover;
  692.     background-color:white;
  693. }
  694.  
  695. [photoset-layout] div {
  696.   cursor: help;
  697. }
  698.  
  699. .answer .embed_iframe{
  700.     width: 240px;
  701. }
  702.  
  703. .footer i.fas{
  704.     font-size:25px !important;
  705.     color:{color:footer icons};
  706.     text-shadow:none;
  707. }
  708.  
  709. i.fas:hover{
  710.     cursor:help;
  711. }
  712.  
  713. #heartbeat{
  714.     position:fixed;
  715.     left:12px;
  716.     bottom:6px;
  717.     font-size:18px !important;
  718. }
  719.  
  720. #heartbeat:hover{
  721.     animation: heartbeat 1s infinite;
  722. }
  723.  
  724. @keyframes heartbeat
  725. {
  726.   0%
  727.   {
  728.     transform: scale( .90 );
  729.   }
  730.   20%
  731.   {
  732.     transform: scale( 1 );
  733.   }
  734.   40%
  735.   {
  736.     transform: scale( .90 );
  737.   }
  738.   60%
  739.   {
  740.     transform: scale( 1 );
  741.   }
  742.   80%
  743.   {
  744.     transform: scale( .90 );
  745.   }
  746.   100%
  747.   {
  748.     transform: scale( .90 );
  749.   }
  750. }
  751.  
  752. </style>
  753. <body>
  754.  
  755. {block:ifredirect}
  756. {block:IndexPage}
  757. <script type="text/javascript">
  758.     var url = location.href;
  759.     if (url == "{BlogURL}") {
  760.         window.location = "{BlogURL}tagged/{text:redirect}";
  761.     }
  762. </script>
  763. {/block:IndexPage}
  764. {/block:ifredirect}
  765.  
  766. <div id="wrapper">
  767. <div id="container">
  768.  
  769. <div id="sidebar">
  770.     <div class="icon"><a href="/"><img src="{image:icon}"></a></div>
  771.     <div id="side">
  772.         <div class="description">{text:description}</div>
  773.         <div class="links">
  774.             <select onchange="location = this.value;">
  775.                 <option>{text:links title}</option>
  776.                 <option value="{text:link 1 url}">{text:link 1}</option>
  777.                 <option value="{text:link 2 url}">{text:link 2}</option>
  778.                 <option value="{text:link 3 url}">{text:link 3}</option>
  779.                 <option value="{text:link 4 url}">{text:link 4}</option>
  780.             </select>
  781.         </div>
  782.         {block:ifmusicplayer}
  783.         <div class="musicplayer">
  784.             <div>
  785.                 <marquee scrollamount="8" class="songtitle"></marquee>
  786.             </div>
  787.            
  788.             <table class="controls">
  789.                 <tr>
  790.                     <td>
  791.                         <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
  792.                     </td>
  793.                     <td>
  794.                         <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
  795.                     </td>
  796.                     <td>
  797.                         <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
  798.                     </td>
  799.                 </tr>
  800.             </table>
  801.                  
  802.             <audio id="music" src=""></audio>
  803.         </div>
  804.         {/block:ifmusicplayer}
  805.     </div>
  806. </div>
  807.  
  808. <script>
  809.     let track_name = document.querySelector(".songtitle");
  810.  
  811.     let playpause_btn = document.querySelector(".playpause-track");
  812.     let next_btn = document.querySelector(".next-track");
  813.     let prev_btn = document.querySelector(".prev-track");
  814.  
  815.     let track_index = 0;
  816.     let isPlaying = false;
  817.  
  818.     // Create new audio element
  819.     let curr_track = document.getElementById("music");
  820.  
  821.     // Define the tracks that have to be played
  822.     let track_list = [
  823.         {
  824.             name:"{text:song 1 title}",
  825.             path:"{text:song 1 mp3}"
  826.         },
  827.         {
  828.             name:"{text:song 2 title}",
  829.             path:"{text:song 2 mp3}"
  830.         },
  831.         {
  832.             name:"{text:song 3 title}",
  833.             path:"{text:song 3 mp3}"
  834.         },
  835.         {
  836.             name:"{text:song 4 title}",
  837.             path:"{text:song 4 mp3}"
  838.         },
  839.     ];
  840.  
  841.     function loadTrack(track_index) {
  842.       // Load a new track
  843.       curr_track.src = track_list[track_index].path;
  844.       curr_track.load();
  845.  
  846.       // Update details of the track
  847.       track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;
  848.  
  849.  
  850.       // Move to the next track if the current one finishes playing
  851.       curr_track.addEventListener("ended", nextTrack);
  852.  
  853.     }
  854.  
  855.     function playpauseTrack() {
  856.       if (!isPlaying) playTrack();
  857.       else pauseTrack();
  858.     }
  859.  
  860.     function playTrack() {
  861.       curr_track.play();
  862.       isPlaying = true;
  863.  
  864.       // Replace icon with the pause icon
  865.       playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
  866.     }
  867.  
  868.     function pauseTrack() {
  869.       curr_track.pause();
  870.       isPlaying = false;
  871.  
  872.       // Replace icon with the play icon
  873.       playpause_btn.innerHTML = '<i class="fas fa-play"></i>';
  874.     }
  875.  
  876.     function nextTrack() {
  877.       if (track_index < track_list.length - 1)
  878.        track_index += 1;
  879.      else track_index = 0;
  880.      loadTrack(track_index);
  881.      playTrack();
  882.    }
  883.  
  884.    function prevTrack() {
  885.      if (track_index > 0)
  886.         track_index -= 1;
  887.       else track_index = track_list.length;
  888.       loadTrack(track_index);
  889.       playTrack();
  890.     }
  891.  
  892.     // Load the first track in the tracklist
  893.     loadTrack(track_index);
  894. </script>
  895.    
  896. <div id="content">
  897. {block:Posts}
  898. <div class="post" post-type="{PostType}">
  899.  
  900. <div style="padding:15px">
  901.  
  902. {block:Text}
  903. {block:Title}
  904. <div class="title">{Title}</div>
  905. {/block:Title}
  906. {Body}
  907. {/block:Text}
  908.  
  909. {block:Photo}
  910. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  911. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  912. {/block:Photo}
  913.  
  914. {block:Photoset}
  915. <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>
  916. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  917. {/block:Photoset}
  918.  
  919. {block:Quote}
  920. <div class="quote">"{Quote}"</div>
  921. {block:Source}
  922. <div class="quotesource">{Source}</div>
  923. {/block:Source}
  924. {/block:Quote}
  925.  
  926. {block:Link}
  927. <div class="title"><a href="{URL}">{Name}</a></div>
  928. {block:Description}
  929. <div class="description">{Description}</div>
  930. {/block:Description}
  931. {/block:Link}
  932.  
  933. {block:Chat}
  934. {block:Title}
  935. <div class="title">{Title}</div>
  936. {/block:Title}
  937.  
  938. {block:Lines}
  939. <div class="{Alt} user_{UserNumber}">
  940. {block:Label}
  941. <b>{Label}</b>{/block:Label}
  942. &nbsp;{Line}
  943. </div>
  944. {/block:Lines}
  945. {/block:Chat}
  946.  
  947. {block:Video}
  948. <div class="media"><div class="video-wrapper">
  949. <div class="video-container">{video-500}</div>
  950. </div></div>
  951. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  952. {/block:Video}
  953.  
  954. {block:Audio}
  955. <div class="media">
  956. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-500}</div></div>{/block:AudioEmbed}
  957. </div>
  958. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  959. {/block:Audio}
  960.  
  961. {block:Answer}
  962. <div class="asker"><img src="{AskerPortraitURL-48}"> <div class="question" style="font-style:italic">{Question}</div></div>
  963.  
  964. <div class="answerer"><div class="answer">{Answer}</div>{block:Answerer}<img src="{AnswererPortraitURL-48}">{/block:Answerer}<img src="{PortraitURL-48}" style="{block:Answerer}display:none{/block:Answerer}"></div>
  965.  
  966. <div style="margin-top:20px;{block:NotReblog}display:none;{/block:NotReblog}">{Replies}</div>
  967. {/block:Answer}
  968.  
  969.  
  970. {block:Date}
  971. <div class="footer">
  972.  
  973. <a href="{Permalink}" title="{notecount} notes"><i class="fas fa-percentage"></i></a>
  974.  
  975. <a href="{ReblogURL}" class="reblog" title="reblog" target="_blank"><i class="fas fa-retweet rb" style="color:{color:footer buttons}"></i></a>
  976.  
  977. <!-- {block:NoRebloggedFrom}
  978. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  979. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  980. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  981. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  982. {/block:ContentSource}
  983.  
  984. </div>
  985.  
  986. {block:HasTags}
  987. <div class="tags">{block:Tags}<i class="fas fa-hashtag"></i><a href="{TagURL}">{Tag} </a>{/block:Tags}</div>
  988. {/block:HasTags}
  989.  
  990. {block:PermalinkPage}
  991. {block:NoteCount}
  992. {block:PostNotes}{PostNotes}{/block:PostNotes}
  993. {/block:NoteCount}
  994. {/block:PermalinkPage}
  995. {/block:Date}
  996.  
  997. </div>
  998. </div>
  999.  
  1000. {/block:Posts}
  1001.  
  1002. {block:Pagination}
  1003. <div id="nav">
  1004. {block:PreviousPage}<a href="{PreviousPage}">{text:previous}</a>{/block:PreviousPage}
  1005.  
  1006. {block:NextPage}<a href="{NextPage}">{text:next}</a>{/block:NextPage}
  1007. </div>
  1008. {/block:Pagination}
  1009.  
  1010. </div>
  1011. <div id="right">
  1012. <div id="rightimg">
  1013. <img src="{image:side image}">
  1014. </div>
  1015. </div>
  1016.  
  1017. </div>
  1018. </div>
  1019.  
  1020. <a id="heartbeat" href="https://mirainikki.tumblr.com" title="by @mirainikki / @puella"><i class="fas fa-heart"></i>️</a>
  1021.  
  1022. </body>
  1023. </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!