API tools faq
paste
Advertisement
Sky_Blue

QUIRKED UP WHITE BOY WITH A LITTLE BIT OF SWAG theme

Sky_Blue
Feb 13th, 2022 (edited)
3,246
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. QUIRKED UP WHITE BOY WITH A LITTLE BIT OF SWAG theme by @puella
  7.  
  8. happy valentine's day here is some chocolate -> 🍫
  9.  
  10. i love you all. thank you for sticking with me. <3
  11.  
  12. _____$$$$_________$$$$
  13. ___$$$$$$$$_____$$$$$$$$
  14. _$$$$$$$$$$$$_$$$$$$$$$$$$
  15. $$$$$$$$$$$$$$$$$$$$$$$$$$$
  16. $$$$$$$$$$$$$$$$$$$$$$$$$$$
  17. _$$$$$$$$$$$$$$$$$$$$$$$$$
  18. __$$$$$$$$$$$$$$$$$$$$$$$
  19. ____$$$$$$$$$$$$$$$$$$$
  20. _______$$$$$$$$$$$$$
  21. __________$$$$$$$
  22. ____________$$$
  23. _____________$
  24.  
  25. CREDITS:
  26. -inspiration: https://decaydog.tumblr.com/post/648066239989678080/l-o-v-e-c-o-n-n-e-c-t-i-o-n
  27.  
  28. -chatbox code by @cocorini
  29.  
  30. -photosets by @annasthms
  31.  
  32. -scrollbar from https://gist.github.com/Dakedres/0ccda599648833a1c2f65d3967aa131b
  33.  
  34. -like button code from https://stackoverflow.com/questions/21708662/customise-tumblrs-new-like-button-iframe-likebutton/21715659#21715659
  35.  
  36. ----->
  37.  
  38. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  39.  
  40. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  41.  
  42. <meta charset="utf-8">
  43. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  44. {block:Description}
  45. <meta name="description" content="{MetaDescription}" />
  46. {/block:Description}
  47.    
  48. <title>{Title}</title>
  49.        
  50. <link rel="shortcut icon" href="{image:favicon}">
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  52. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  53.  
  54. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  55.  
  56. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  57.  
  58. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  59. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  60. <script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  61.  
  62. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  63.  
  64. <link rel="stylesheet" href="https://static.tumblr.com/p6yopnt/PxJr3vu6k/scrollbar.css">
  65.  
  66.  
  67. <script>
  68. function gatherData(images, arr) {
  69.   for (let i = 0; i < images.length; i++) {
  70.    let currentData = {
  71.      "width": images[i].getAttribute('data-width'),
  72.      "height": images[i].getAttribute('data-height'),
  73.      "low_res": images[i].getAttribute('data-lowres'),
  74.      "high_res": images[i].getAttribute('data-highres')
  75.    };
  76.    arr.push(currentData);
  77.  }
  78. }
  79. function getIndex(elem) {
  80.  let i = 0;
  81.  while( (elem = elem.previousElementSibling) != null ) i++;
  82.  return i;
  83. }
  84. function lightbox(elem) {
  85.  let currentPhotoset = elem.parentNode;
  86.  let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  87.  let data = [];
  88.  gatherData(photosetPhotos, data);
  89.  Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  90. }
  91. </script>
  92.  
  93. <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">
  94.        
  95. <meta name="image:favicon" content=""/>
  96. <meta name="image:icon" content="https://64.media.tumblr.com/5db511f3abcb2fbe4110248031d882b1/31a9916396c213d2-f8/s2048x3072/e1c86ceef004fd181c0a6de818d480f2b91a52c3.png"/>
  97. <meta name="image:background" content=""/>
  98. <meta name="image:exe" content="https://64.media.tumblr.com/e78c0e2ae880e6dc8272d8e845290225/11a2edf1cf7a1131-8b/s2048x3072/8536d4fecf44288f89138c189eda11ceeefa16dc.png"/>
  99. <meta name="image:container header background" content=""/>
  100. <meta name="image:container footer background" content=""/>
  101. <meta name="image:sidebar background" content=""/>
  102. <meta name="image:content background" content=""/>
  103. <meta name="image:post header background" content=""/>
  104. <meta name="image:post footer background" content=""/>
  105. <meta name="image:chatbox header background" content=""/>
  106.  
  107. <meta name="color:background" content="#fef7f9"/>
  108. <meta name="color:buttons background" content="#f1c6d3"/>
  109. <meta name="color:post background" content="#fff"/>
  110. <meta name="color:border" content="#f1c6d3"/>
  111. <meta name="color:dotted border" content="#000"/>
  112. <meta name="color:container header" content="#feebf0"/>
  113. <meta name="color:container footer" content="#feebf0"/>
  114. <meta name="color:sidebar" content="#f1c6d3"/>
  115. <meta name="color:description" content="#fff"/>
  116. <meta name="color:content" content="#fff"/>
  117. <meta name="color:text" content="#000"/>
  118. <meta name="color:links" content="#f1c6d3"/>
  119. <meta name="color:links hover" content="#fff"/>
  120. <meta name="color:links glow" content=""/>
  121. <meta name="color:links glow hover" content=""/>
  122. <meta name="color:links outline" content="#fff"/>
  123. <meta name="color:links outline hover" content="#f1c6d3"/>
  124. <meta name="color:footer icons" content="#f1c6d3"/>
  125. <meta name="color:like button liked color" content="#ff8aa9"/>
  126. <meta name="color:post header" content="#f1c6d3"/>
  127. <meta name="color:post footer" content="#fff"/>
  128. <meta name="color:chatbox background" content="#fff"/>
  129. <meta name="color:chatbox header" content="#feebf0"/>
  130. <meta name="color:music player controls background" content="#feebf0"/>
  131. <meta name="color:music player background" content="#fff"/>
  132. <meta name="color:play pause color" content="#f1c6d3"/>
  133. <meta name="color:tooltip background" content="#fff"/>
  134. <meta name="color:tooltip text" content="#000"/>
  135. <meta name="color:selection background" content=""/>
  136. <meta name="color:selection text" content=""/>
  137.  
  138. <meta name="if:redirect" content=""/>
  139. <meta name="if:links glow" content=""/>
  140. <meta name="if:links outline" content="1"/>
  141. <meta name="if:captions" content="1"/>
  142. <meta name="if:round borders" content=""/>
  143. <meta name="if:background cover" content=""/>
  144.  
  145. <meta name="select:border style" content="solid"/>
  146. <meta name="select:border style" content="dashed"/>
  147. <meta name="select:border style" content="dotted"/>
  148. <meta name="select:border style" content="double"/>
  149. <meta name="select:border style" content="inset"/>
  150. <meta name="select:border style" content="outset"/>
  151. <meta name="select:border style" content="groove"/>
  152. <meta name="select:border style" content="ridge"/>
  153.  
  154. <meta name="text:browser title" content="diosa.exe"/>
  155. <meta name="text:font size" content="20"/>
  156. <meta name="text:font" content="bellota"/>
  157. <meta name="text:description" content="description here..."/>
  158. <meta name="text:border width" content="2"/>
  159. <meta name="text:link 1" content="file"/>
  160. <meta name="text:link 1 url" content=""/>
  161. <meta name="text:link 2" content="edit"/>
  162. <meta name="text:link 2 url" content=""/>
  163. <meta name="text:link 3" content="view"/>
  164. <meta name="text:link 3 url" content=""/>
  165. <meta name="text:link 4" content="history"/>
  166. <meta name="text:link 4 url" content=""/>
  167. <meta name="text:link 5" content="help"/>
  168. <meta name="text:link 5 url" content=""/>
  169. <meta name="text:mp3" content=""/>
  170. <meta name="text:song title" content="song title"/>
  171. <meta name="text:chatbox description" content="hello! please keep it appropriate <3"/>
  172. <meta name="text:chatbox code" content=""/>
  173. <meta name="text:redirect" content=""/>        
  174.        
  175. <style type="text/css">
  176.  
  177. .npf_row {
  178.     margin: 0 !important;
  179. }
  180.  
  181. .tmblr-full img{
  182.     border:0.5px dotted {color:dotted border} !important;
  183.     box-sizing:border-box !important;
  184. }
  185.  
  186. ::selection {
  187. background: {color:selection background};
  188. color:{color:selection text};
  189. }
  190.  
  191. ::-moz-selection {
  192. background: {color:selection background};
  193. color:{color:selection text};
  194. }
  195.  
  196. #s-m-t-tooltip{
  197.     margin: 20px 0 0 20px;
  198.     padding: 5px;
  199.     max-width: 300px;
  200.     background-color:{color:tooltip background};
  201.     color:{color:tooltip text};
  202.     border:0.5px dotted {color:dotted border};
  203.     z-index: 9999;
  204.     {block:ifroundborders}
  205.     border-radius:10px;
  206.     {/block:ifroundborders}
  207. }
  208.  
  209. @font-face{
  210.     font-family: 'Magica';
  211.     src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  212. }
  213. @font-face{
  214.     font-family: 'DEAD END';
  215.     src: url(https://static.tumblr.com/pvnotae/DzVqdg2j5/dead_end.ttf);
  216. }
  217. @font-face{
  218.     font-family: 'Decibil';
  219.     src: url(https://static.tumblr.com/pvnotae/kwwqdg2pw/decibel_2.ttf);
  220. }
  221. @font-face{
  222.     font-family: 'Aachen';
  223.     src: url(https://static.tumblr.com/pvnotae/YIoqdg2yp/aachen-bold-opentype.otf);
  224. }
  225.  
  226. body {
  227.     margin:0px;
  228.     background:{color:background};
  229.     background-image: url('{image:background}');
  230.     {block:ifbackgroundcover}
  231.     background-size: cover;
  232.     {/block:ifbackgroundcover}
  233.     {block:ifnotbackgroundcover}
  234.     background-repeat:repeat;
  235.     {/block:ifnotbackgroundcover}
  236.     background-attachment:fixed;
  237.     font-family:{text:font};
  238.     font-size:{text:font size}px;
  239.     color:{color:text};
  240. }
  241.  
  242. p{
  243.     margin:0 0 0px 0;
  244.     padding:0;
  245. }
  246.  
  247. pre {
  248.     white-space: pre-wrap;
  249.     white-space: -moz-pre-wrap;
  250.     white-space: -pre-wrap;
  251.     white-space: -o-pre-wrap;
  252.     word-wrap: break-word;
  253. }
  254.  
  255. a{
  256.     color:{color:links};
  257.     {block:iflinksglow}
  258.     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};
  259.     {/block:iflinksglow}
  260.     {block:iflinksoutline}
  261.     text-shadow: -1px 0 {color:links outline}, 0 1px {color:links outline}, 1px 0 {color:links outline}, 0 -1px {color:links outline};
  262.     {/block:iflinksoutline}
  263.     text-decoration:none;
  264.     transition:0.5s;
  265. }
  266.  
  267. a:hover{
  268.     color:{color:links hover};
  269.     {block:iflinksglow}
  270.     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};
  271.     {/block:iflinksglow}
  272.     {block:iflinksoutline}
  273.     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};
  274.     {/block:iflinksoutline}
  275.     cursor:help;
  276. }
  277.  
  278. a.tumblr_blog{
  279.     display:inline-block;
  280.     margin-bottom:5px;
  281. }
  282.  
  283. li{
  284.     margin-left:-15px;
  285. }
  286.  
  287. #wrapper{
  288.     width:fit-content;
  289.     height:fit-content;
  290.     width: -moz-fit-content;
  291.     height: -moz-fit-content;
  292.     position: fixed;
  293.     top: 50%;
  294.     left: 50%;
  295.     transform: translate(-50%, -50%);
  296.     margin: auto;
  297.     animation: fadeEffect 1s;
  298.     overflow: hidden;
  299.     border: {text:border width}px {select:border style} {color:border};
  300.     box-sizing:border-box;
  301.     {block:ifroundborders}
  302.     border-radius:10px;
  303.     {/block:ifroundborders}
  304.     background-color:{color:container header};
  305. }
  306.  
  307. @keyframes fadeEffect {
  308.   from {opacity: 0;}
  309.   to {opacity: 1;}
  310. }
  311.  
  312. #container{
  313.     height:450px;
  314.     width:700px;
  315.     border-top: {text:border width}px {select:border style} {color:border};
  316.     border-bottom: {text:border width}px {select:border style} {color:border};
  317.     display:flex;
  318. }
  319.  
  320. #containerheader{
  321.     background-color:{color:container header};
  322.     text-align:right;
  323.     cursor:move;
  324.     display:flex;
  325.     justify-content:space-between;
  326.     align-items:center;
  327.     min-width:700px;
  328.     background-image:url('{image:container header background}');
  329. }
  330.  
  331. #links{
  332.     border-top: {text:border width}px {select:border style} {color:border};
  333.     padding:10px;
  334.     background-color:{color:container header};
  335.     height:40px;
  336.     box-sizing:border-box;
  337.     display: flex;
  338.     align-items: center;
  339.     gap: 7px;
  340.     background-image:url('{image:container header background}');
  341. }
  342.  
  343. .buttons{
  344.     border-left: {text:border width}px {select:border style} {color:border};
  345.     background-color:{color:buttons background};
  346.     display:inline-block;
  347.     height:100%;
  348.     width:40px;
  349.     text-align:center;
  350.     padding:10px 0px;
  351.     cursor:help;
  352. }
  353.  
  354. .buttons:active{
  355.     background-color:rgba({RGBcolor:buttons background},0.7);
  356. }
  357.  
  358. #containerfooter{
  359.     background-color:{color:container footer};
  360.     padding:7px;
  361.     height:40px;
  362.     box-sizing:border-box;
  363.     display: flex;
  364.     align-items: center;
  365.     justify-content: flex-end;
  366.     background-image:url('{image:container footer background}');
  367. }
  368.  
  369. .shape{
  370.     border: 2px solid {color:buttons background};
  371.     width:8px;
  372.     height:20px;
  373.     background-color:{color:buttons background};
  374.     display:inline-block;
  375.     margin-left:10px;
  376. }
  377.  
  378. #sidebar{
  379.     padding:20px;
  380.     text-align:center;
  381.     box-sizing:border-box;
  382.     border-right: {text:border width}px {select:border style} {color:border};
  383.     width:245px;
  384.     background-color:{color:sidebar};
  385.     animation: fadeEffect 1s;
  386.     background-image:url('{image:sidebar background}');
  387. }
  388.  
  389. #sidebar img{
  390.     width:202px;
  391.     height:202px;
  392.     border: 0.5px dotted {color:dotted border};
  393.     display:block;
  394.     {block:ifroundborders}
  395.     border-radius:10px;
  396.     {/block:ifroundborders}
  397. }
  398.  
  399. #description{
  400.     height:124px;
  401.     overflow:auto;
  402.     margin-top:20px;
  403.     border:0.5px dotted {color:dotted border};
  404.     box-sizing:border-box;
  405.     padding:10px 5px 10px 10px;
  406.     overflow-wrap: break-word;
  407.     background-color:{color:description};
  408.     {block:ifroundborders}
  409.     border-radius:10px;
  410.     {/block:ifroundborders}
  411. }
  412.  
  413. #content{
  414.     padding:0px 20px;
  415.     overflow-y:scroll;
  416.     background-color:{color:content};
  417.     background-image:url('{image:content background}');
  418. }
  419.  
  420. .post{
  421.     width:400px;
  422.     margin:20px auto;
  423.     overflow:hidden;
  424.     border: {text:border width}px {select:border style} {color:border};
  425.     background:{color:post background};
  426.     box-sizing:border-box;
  427.     {block:ifroundborders}
  428.     border-radius:10px;
  429.     {/block:ifroundborders}
  430.     animation: fadeEffect 1s;
  431. }
  432.  
  433. .postheader{
  434.     background-color:{color:post header};
  435.     padding:10px;
  436.     text-align:center;
  437.     border-bottom: {text:border width}px {select:border style} {color:border};
  438.     background-image:url('{image:post header background}');
  439. }
  440.  
  441. .postheader::first-letter{
  442.     text-decoration:underline;
  443. }
  444.  
  445. .post img{
  446.     max-width:100%;
  447.     height:auto;
  448.     {block:ifroundborders}
  449.     border-radius:10px;
  450.     {/block:ifroundborders}
  451. }
  452.  
  453. .footer{
  454.     display:flex;
  455.     justify-content:space-between;
  456.     margin-top:20px;
  457.     padding:15px;
  458.     border:0.5px dotted {color:dotted border};
  459.     {block:ifroundborders}
  460.     border-radius:10px;
  461.     {/block:ifroundborders}
  462.     background-color:{color:post footer};
  463.     background-image:url('{image:post footer background}');
  464. }
  465.  
  466. .nfp_row{
  467.     margin-left:0px;
  468.     margin-right:0px;
  469. }
  470.  
  471. #nav{
  472.     margin:20px auto;
  473.     width:100px;
  474.     text-align:center;
  475.     display:flex;
  476.     justify-content:center;
  477.     gap:7px;
  478. }
  479.  
  480. video{
  481.     max-width:100%;
  482.     height:auto!important;
  483. }
  484.  
  485. .video-container {
  486.     overflow: hidden;
  487. }
  488.  
  489. .video-container iframe,
  490. .video-container object,
  491. .video-container embed {
  492.     position: center;
  493.     max-width: 355px;
  494.     max-height: 355px;
  495.     border:0.5px dotted {color:dotted border} !important;
  496.     box-sizing:border-box;
  497. }
  498.  
  499. .video-wrapper {
  500.     max-width: 355px;
  501.     max-height: 355px;
  502.  
  503. }
  504.  
  505. iframe.tumblr_audio_player {
  506.     height: 85px;
  507.     border:0.5px dotted {color:dotted border};
  508.     box-sizing:border-box;
  509.     {block:ifroundborders}
  510.     border-radius:10px;
  511.     {/block:ifroundborders}
  512.    
  513. }
  514.  
  515. .media{
  516.     margin:0 0 0px 0;
  517.     text-align:center;
  518.     {block:ifroundborders}
  519.     border-radius:10px;
  520.     {/block:ifroundborders}
  521. }
  522.  
  523. .media img{
  524.     border:0.5px dotted {color:dotted border};
  525.     display:block;
  526.     box-sizing:border-box;
  527. }
  528.  
  529. .title{
  530.     font-size:calc({text:font size}px * 2 - 10px);
  531.     font-weight:bold;
  532.     margin:10px 0 10px 0;
  533.     color:{color:text};
  534. }
  535.  
  536. h1, h2, h3, h4, h5, h6{
  537.     font-size:calc({text:font size}px * 2 - 10px);
  538.     font-weight:bold;
  539.     margin:10px 0 10px 0;
  540.     color:{color:text};
  541. }
  542.  
  543. .quote{
  544.     font-weight:normal;
  545.     font-size:{text:font size};
  546.     font-style:italic;
  547.     margin:0 0 10px 0;
  548. }
  549.  
  550. .question {
  551.     position: relative;
  552.     border:0.5px dotted {color:dotted border};
  553.     {block:ifroundborders}
  554.     border-radius:10px;
  555.     {/block:ifroundborders}
  556.     padding: 20px;
  557.     margin-left:22px;
  558.     width:100%;
  559.     word-break: break-all;
  560. }
  561.  
  562. .question:after{
  563.     content: '';
  564.     position: absolute;
  565.     border-style: solid;
  566.     border-width: 8px 15px 8px 0;
  567.     border-color: transparent {color:post background};
  568.     display: block;
  569.     width: 0;
  570.     z-index: 1;
  571.     left: -15px;
  572.     top: 16px;
  573. }
  574.  
  575. .question:before{
  576.     content: '';
  577.     position: absolute;
  578.     border-style: solid;
  579.     border-width: 8px 15px 8px 0;
  580.     border-color: transparent {color:dotted border};
  581.     display: block;
  582.     width: 0;
  583.     z-index: 0;
  584.     left: -16px;
  585.     top: 16px;
  586. }
  587.  
  588. .asker{
  589.     display:flex;
  590.     align-items: flex-start;
  591. }
  592.  
  593. .asker img{
  594.     border:0.5px dotted {color:dotted border};
  595. }
  596.  
  597. .answer{
  598.     position: relative;
  599.     border:0.5px dotted {color:dotted border};
  600.     {block:ifroundborders}
  601.     border-radius:10px;
  602.     {/block:ifroundborders}
  603.     padding: 20px;
  604.     margin-right:22px;
  605.     width:100%;
  606.     word-break: break-all;
  607. }
  608.  
  609. .answer:after{
  610.     content: '';
  611.     position: absolute;
  612.     border-style: solid;
  613.     border-width: 8px 0 8px 15px;
  614.     border-color: transparent {color:post background};
  615.     display: block;
  616.     width: 0;
  617.     z-index: 1;
  618.     right: -15px;
  619.     top: 16px;
  620. }
  621.  
  622. .answer:before{
  623.     content: '';
  624.     position: absolute;
  625.     border-style: solid;
  626.     border-width: 8px 0 8px 15px;
  627.     border-color: transparent {color:dotted border};
  628.     display: block;
  629.     width: 0;
  630.     z-index: 0;
  631.     right: -16px;
  632.     top: 16px;
  633. }
  634.  
  635. .answerer{
  636.     margin-top:20px;
  637.     display:flex;
  638.     align-items: flex-start;
  639. }
  640.  
  641. .answerer img{
  642.     border:0.5px dotted {color:dotted border};
  643. }
  644.  
  645. .caption{
  646.     margin-top:10px;
  647. }
  648.  
  649. blockquote{
  650.     margin:0px;
  651.     padding-left:10px;
  652.     border-left:dotted 0.5px {color:dotted border};
  653.     border-radius:5px;
  654. }
  655.  
  656. blockquote img{
  657.     max-width:100%;
  658.     height:auto;
  659.     object-fit:cover;
  660.     display: block;
  661.     border:0.5px dotted {color:dotted border};
  662.     box-sizing:border-box;
  663. }
  664.  
  665. img{
  666.     max-width:100%;
  667.     height:auto;
  668. }
  669.  
  670. ol.notes{
  671.     border:0.5px dotted {color:dotted border};
  672.     background-color:{color:post footer};
  673.     background-image:url('{image:post footer background}');
  674.     {block:ifroundborders}
  675.     border-radius:10px;
  676.     {/block:ifroundborders}
  677.     margin-top:20px;
  678.     padding:20px;
  679.     list-style-type:none;
  680.     max-height:100px;
  681.     overflow:auto;
  682.     margin-bottom:0px;
  683. }
  684.  
  685. ol.notes li.note img{
  686.     width:16px;
  687.     height:16px;
  688.     margin-right:3px;
  689. }
  690.  
  691. ol.notes li.note{
  692.     margin:0px;
  693. }
  694.  
  695. #heartbeat{
  696.     position:fixed;
  697.     left:12px;
  698.     bottom:6px;
  699.     font-size:18px !important;
  700. }
  701.  
  702. #heartbeat:hover{
  703.     animation: heartbeat 1s infinite;
  704. }
  705.  
  706. @keyframes heartbeat
  707. {
  708.   0%
  709.   {
  710.     transform: scale( .90 );
  711.   }
  712.   20%
  713.   {
  714.     transform: scale( 1 );
  715.   }
  716.   40%
  717.   {
  718.     transform: scale( .90 );
  719.   }
  720.   60%
  721.   {
  722.     transform: scale( 1 );
  723.   }
  724.   80%
  725.   {
  726.     transform: scale( .90 );
  727.   }
  728.   100%
  729.   {
  730.     transform: scale( .90 );
  731.   }
  732. }
  733.  
  734. .tags {
  735.     margin-top:20px;
  736.     padding:15px;
  737.     border:0.5px dotted {color:dotted border};
  738.     {block:ifroundborders}
  739.     border-radius:10px;
  740.     {/block:ifroundborders}
  741.     background-color:{color:post footer};
  742.     background-image:url('{image:post footer background}');
  743. }
  744.  
  745. [photoset-layout] {
  746.   grid-gap: 5px;
  747. }
  748.  
  749. [photoset-layout] img {
  750.     border: 0.5px dotted {color:dotted border};
  751.     {block:ifroundborders}
  752.     border-radius:10px;
  753.     {/block:ifroundborders}
  754.     display: block;
  755.     height: 100%;
  756.     width: 100%;
  757.     object-fit: cover;
  758.     background-color:{color:post background};
  759. }
  760.  
  761. [photoset-layout] div {
  762.   cursor: help;
  763. }
  764.  
  765. .customlike {
  766.   position: relative;
  767.   display: block;
  768.   width: 20px !important;
  769.   height: 20px !important;
  770.   color:{color:footer icons};
  771.   transition:0.5s;
  772. }
  773.  
  774. .like_button {
  775.   position: absolute;
  776.   top: 0;
  777.   left: 0;
  778.   right: 0;
  779.   bottom: 0;
  780.   width: 100%;
  781.   height: 100%;
  782.   opacity: 0;
  783.   z-index: 10;
  784. }
  785.  
  786. .like_button iframe {
  787.   width: 100% !important;
  788.   height: 100% !important;
  789. }
  790.  
  791. .mylike {
  792.   position: absolute;
  793.   top: 0;
  794.   left: 0;
  795.   right: 0;
  796.   bottom: 0;
  797.   width: 100%;
  798.   height: 100%;
  799.   z-index: 1;
  800.   transition:0.5s;
  801.   cursor:help;
  802. }
  803.  
  804. .like_button:hover + .mylike {
  805.   color:{color:footer icons};
  806.   transition:0.5s;
  807. }
  808.  
  809. .like_button.liked + .mylike{
  810.   color: {color:like button liked color};
  811. }
  812.  
  813. #bringback{
  814.     position:fixed;
  815.     top:10px;
  816.     left:10px;
  817.     display:none;
  818.     cursor:help;
  819.     padding:10px;
  820.     flex-direction:column;
  821.     align-items: center;
  822.     animation: fadeEffect 1s;
  823.     width:105px;
  824.     overflow-wrap: break-word;
  825.     text-align:center;
  826. }
  827.  
  828. #bringback img{
  829.     width:70px;
  830.     height:70px;
  831.     margin-bottom:10px;
  832.     box-sizing:border-box;
  833. }
  834.  
  835. #bringback:active{
  836.     border:0.5px dotted {color:dotted border};
  837. }
  838.  
  839. #musicplayer{
  840.     width:201px;
  841.     border: 0.5px dotted {color:dotted border};
  842.     background-color:{color:music player background};
  843.     {block:ifroundborders}
  844.     border-radius:10px;
  845.     {/block:ifroundborders}
  846.     margin-top:20px;
  847.     overflow:hidden;
  848. }
  849.  
  850. .controls{
  851.     padding:5px;
  852.     font-size:15px !important;
  853.     border-right:0.5px dotted {color:dotted border};
  854.     margin:-1px;
  855.     background-color:{color:music player controls background};
  856. }
  857.  
  858. .songtitle{
  859.     width:161px;
  860.     font-size:{text:font size}px;
  861.     display:flex;
  862.     color:{color:text};
  863. }
  864.  
  865. i.fas.fa-pause:hover{
  866.     cursor:help;
  867. }
  868.  
  869. i.fas.fa-play:hover{
  870.     cursor:help;
  871. }
  872.  
  873. i.fas.fa-pause{
  874.     padding:7px;
  875.     background-color:{color:music player controls background};
  876.     color:{color:play pause color};
  877.     font-size:15px !important;
  878. }
  879.  
  880. i.fas.fa-play{
  881.     padding:7px;
  882.     background-color:{color:music player controls background};
  883.     color:{color:play pause color};
  884.     font-size:15px !important;
  885. }
  886.  
  887. #cboxheader{
  888.     border-bottom:{text:border width}px {select:border style} {color:border};
  889.     font-size:20px !important;
  890.     background-color:{color:chatbox header};
  891.     background-image:url('{image:chatbox header background}');
  892.     width:250px;
  893.     animation: fadeEffect 1s;
  894.     {block:ifroundborders}
  895.     border-radius:10px 10px 0px 0px;
  896.     {/block:ifroundborders}
  897.     box-sizing: border-box;
  898.     display:flex;
  899.     justify-content:space-between;
  900.     align-items:center;
  901. }
  902.    
  903. #cbox {
  904.     right: 20px;
  905.     bottom: -354px;
  906.     z-index: 9999;
  907.     position: fixed;
  908.     -webkit-transition: all 0.8s ease-in-out;
  909.     -moz-transition: all 0.8s ease-in-out;
  910.     -o-transition: all 0.8s ease-in-out;
  911.     -ms-transition: all 0.8s ease-in-out;
  912.     transition: all 0.8s ease-in-out;
  913.     {block:ifroundborders}
  914.     border-top-left-radius: 10px;
  915.     border-top-right-radius: 10px;
  916.     {/block:ifroundborders}
  917.     border:{text:border width}px {select:border style} {color:border};
  918.     background:{color:chatbox background};
  919.     animation: fadeEffect 1s;
  920. }
  921.  
  922. #cbox:hover {
  923.     bottom: 0px;
  924. }
  925.  
  926. #cboxdesc {
  927.     width: 240px;
  928.     height: 35px;
  929.     padding: 5px;
  930.     display:flex;
  931.     align-items: center;
  932.     background-color: {color:chatbox background};
  933.     overflow: auto;
  934.     font-family: {text:font};
  935.     font-size: 13px !important;
  936.     text-align: center;
  937.     letter-spacing: 1px;
  938.     color: {color:text};
  939. }
  940.  
  941. .answer .embed_iframe{
  942.     width: 240px;
  943. }
  944.  
  945. i.fas{
  946.     font-size:20px !important;
  947. }
  948.  
  949. .arrows{
  950.     color:{color:footer icons};
  951. }
  952.  
  953. .rb:hover, .arrows:hover{
  954.     color:{color:footer icons};
  955. }
  956.  
  957. {CustomCSS}
  958. </style>
  959. </head>
  960.  
  961. <body>
  962.  
  963.  
  964. {block:ifredirect}
  965. {block:IndexPage}
  966. <script type="text/javascript">
  967.     var url = location.href;
  968.     if (url == "{BlogURL}") {
  969.         window.location = "{BlogURL}tagged/{text:redirect}";
  970.     }
  971. </script>
  972. {/block:IndexPage}
  973. {/block:ifredirect}
  974.  
  975. <div id="cbox">
  976. <div id="cboxheader">
  977. <span style="padding-left:10px;font-size:{text:font size}px;">chat</span>
  978. <span style="display:flex;">
  979. <i class="fas fa-window-minimize buttons"></i>
  980. <i class="fas fa-window-maximize buttons"></i>
  981. <i class="fas fa-times buttons"></i>
  982. </span>
  983. </div>
  984.  
  985. <div id="cboxdesc">
  986. {text:chatbox description}
  987. </div>
  988.  
  989. {text:chatbox code}
  990.  
  991. </div>
  992.  
  993. <div id="bringback" onclick="bringBack()"><img src="{image:exe}">{text:browser title}</div>
  994.  
  995. <div id="wrapper">
  996. <div id="containerheader">
  997. <span style="padding-left:10px">{text:browser title}</span>
  998. <span style="display:flex;">
  999. <i class="fas fa-window-minimize buttons" onclick="minimize()"></i>
  1000. <i class="fas fa-window-maximize buttons" onclick="maximize()"></i>
  1001. <i class="fas fa-times buttons" onclick="closeAll()"></i>
  1002. </span>
  1003.  
  1004. <script>
  1005.     function minimize(){
  1006.         $("#container").hide();
  1007.         $("#containerfooter").hide();
  1008.        
  1009.     }
  1010.    
  1011.     function maximize(){
  1012.         $("#container").show();
  1013.         $("#containerfooter").show();
  1014.     }
  1015.    
  1016.     function closeAll(){
  1017.         $("#wrapper").fadeOut(300);
  1018.         $("#container").fadeOut(300);
  1019.         $("#containerheader").fadeOut(300);
  1020.         $("#containerfooter").fadeOut(300);
  1021.         $("#bringback").css("display", "flex");
  1022.     }
  1023.    
  1024.     function bringBack(){
  1025.         $("#wrapper").show();
  1026.         $("#container").show();
  1027.         $("#containerheader").show();
  1028.         $("#containerfooter").show();
  1029.         $("#bringback").css("display", "none");
  1030.     }
  1031. </script>
  1032.  
  1033. </div>
  1034. <div id="links">
  1035.     <a href="{text:link 1 url}">{text:link 1}</a> <a href="{text:link 2 url}">{text:link 2}</a> <a href="{text:link 3 url}">{text:link 3}</a> <a href="{text:link 4 url}">{text:link 4}</a> <a href="{text:link 5 url}">{text:link 5}</a>
  1036. </div>
  1037. <div id="container">
  1038.  
  1039.  
  1040. <div id="sidebar">
  1041. <img src="{image:icon}">
  1042. <div id="description">
  1043. {text:description}
  1044. </div>
  1045. <div id="musicplayer">
  1046.     <table>
  1047.         <tr>
  1048.             <td>
  1049.                 <div class="controls"><div class="play" style="display:inline-block"><i class="fas fa-play" onclick="play()"></i></div></div>
  1050.             </td>
  1051.             <td>
  1052.             <div class="songtitle"><marquee scrollamount="10">{text:song title}</marquee></div>
  1053.             </td>
  1054.         </tr>
  1055.     </table>
  1056.     <audio id="music" src="{text:mp3}"></audio>
  1057. </div>
  1058.  
  1059. <script>
  1060. let player = document.getElementById("music");
  1061.  
  1062. function play(){
  1063.     player.play();
  1064.     document.querySelector('.play').innerHTML = "<i class='fas fa-pause' onclick='pause()'></i>";
  1065. }
  1066.  
  1067. function pause(){
  1068.     player.pause();
  1069.     document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  1070. }
  1071.  
  1072. player.onended = function(){
  1073.     document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  1074. }
  1075. </script>
  1076. </div>
  1077.  
  1078. <div id="content">
  1079. {block:Posts}
  1080.  
  1081. <div class="post" post-type="{PostType}">
  1082.  
  1083. {block:Date}
  1084. <div class="postheader"><a href="{Permalink}" title="posted {24hourwithzero}:{minutes} with {notecount} notes">{PostType}</a></div>
  1085. {/block:Date}
  1086.  
  1087. <div style="padding:20px">
  1088.  
  1089. {block:Text}
  1090. {block:Title}
  1091. <div class="title">{Title}</div>
  1092. {/block:Title}
  1093. {Body}
  1094. {/block:Text}
  1095.  
  1096. {block:Photo}
  1097. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  1098. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1099. {/block:Photo}
  1100.  
  1101. {block:Photoset}
  1102. <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>
  1103. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1104. {/block:Photoset}
  1105.  
  1106. {block:Quote}
  1107. <div class="quote">"{Quote}"</div>
  1108. {block:Source}
  1109. <div class="quotesource">{Source}</div>
  1110. {/block:Source}
  1111. {/block:Quote}
  1112.  
  1113. {block:Link}
  1114. <div class="title"><a href="{URL}">{Name}</a></div>
  1115. {block:Description}
  1116. <div class="description">{Description}</div>
  1117. {/block:Description}
  1118. {/block:Link}
  1119.  
  1120. {block:Chat}
  1121. {block:Title}
  1122. <div class="title">{Title}</div>
  1123. {/block:Title}
  1124.  
  1125. {block:Lines}
  1126. <div class="{Alt} user_{UserNumber}">
  1127. {block:Label}
  1128. <b>{Label}</b>{/block:Label}
  1129. &nbsp;{Line}
  1130. </div>
  1131. {/block:Lines}
  1132. {/block:Chat}
  1133.  
  1134. {block:Video}
  1135. <div class="media"><div class="video-wrapper">
  1136. <div class="video-container">{video-400}</div>
  1137. </div></div>
  1138. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1139. {/block:Video}
  1140.  
  1141. {block:Audio}
  1142. <div class="media">
  1143. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-400}</div></div>{/block:AudioEmbed}
  1144. </div>
  1145. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1146. {/block:Audio}
  1147.  
  1148. {block:Answer}
  1149. <div class="asker"><img src="{AskerPortraitURL-48}"> <div class="question" style="font-style:italic">{Question}</div></div>
  1150.  
  1151. <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>
  1152.  
  1153. <div style="margin-top:20px;{block:NotReblog}display:none;{/block:NotReblog}">{Replies}</div>
  1154. {/block:Answer}
  1155.  
  1156.  
  1157. {block:Date}
  1158. <div class="footer">
  1159.  
  1160. <div class="customlike">
  1161.     {LikeButton}
  1162.     <span class="mylike">
  1163.         <i class="fas fa-heart"></i>
  1164.     </span>
  1165. </div>
  1166.  
  1167. <a href="{ReblogURL}" class="reblog" target="_blank" style="text-shadow:none;"><i class="fas fa-retweet rb" style="color:{color:footer buttons}"></i></a>
  1168.  
  1169. <!-- {block:NoRebloggedFrom}
  1170. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1171. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  1172. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1173. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1174. {/block:ContentSource}
  1175.  
  1176. </div>
  1177.  
  1178. {block:HasTags}<div class="tags"><i class="fas fa-tags" style="color:{color:footer icons}"></i>: {block:Tags}<a href="{TagURL}">{Tag} </a>{/block:Tags}</div>{/block:HasTags}
  1179.  
  1180. {block:PermalinkPage}
  1181. {block:NoteCount}
  1182. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1183. {/block:NoteCount}
  1184. {/block:PermalinkPage}
  1185. {/block:Date}
  1186.  
  1187. </div>
  1188. </div>
  1189. {/block:Posts}
  1190.  
  1191. <div id="nav">
  1192. {block:Pagination}
  1193.                 {block:PreviousPage}
  1194.                     <a href="{PreviousPage}" class="arrows" style="text-shadow:none;"><i class="fas fa-arrow-left"></i></a>
  1195.                 {/block:PreviousPage}
  1196.                
  1197.            
  1198.                 {block:JumpPagination length="5"}
  1199.                
  1200.                     {block:CurrentPage}
  1201.                         <span class="current_page">{PageNumber}</span>
  1202.                     {/block:CurrentPage}
  1203.                     {block:JumpPage}
  1204.                         <a class="jump_page nohover" href="{URL}">{PageNumber}</a>
  1205.                     {/block:JumpPage}
  1206.                
  1207.                 {/block:JumpPagination}
  1208.                
  1209.  
  1210.                 {block:NextPage}
  1211.                 <a href="{NextPage}" class="arrows" style="text-shadow:none;"><i class="fas fa-arrow-right"></i></a>
  1212.                 {/block:NextPage}
  1213. {/block:Pagination}
  1214. </div>
  1215.  
  1216.  
  1217. </div>
  1218.  
  1219.  
  1220. </div>
  1221. <div id="containerfooter" style="padding-right:20px">
  1222.     <div class="shape"></div>
  1223.     <div class="shape"></div>
  1224. </div>
  1225. </div>
  1226. </div>
  1227.  
  1228. <script>
  1229.     // Make the DIV element draggable:
  1230. dragElement(document.getElementById("wrapper"));
  1231.  
  1232. function dragElement(elmnt) {
  1233.   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  1234.   if (document.getElementById("containerheader")) {
  1235.     // if present, the header is where you move the DIV from:
  1236.     document.getElementById("containerheader").onmousedown = dragMouseDown;
  1237.   } else {
  1238.     // otherwise, move the DIV from anywhere inside the DIV:
  1239.     elmnt.onmousedown = dragMouseDown;
  1240.   }
  1241.  
  1242.   function dragMouseDown(e) {
  1243.     e = e || window.event;
  1244.     e.preventDefault();
  1245.     // get the mouse cursor position at startup:
  1246.     pos3 = e.clientX;
  1247.     pos4 = e.clientY;
  1248.     document.onmouseup = closeDragElement;
  1249.     // call a function whenever the cursor moves:
  1250.     document.onmousemove = elementDrag;
  1251.   }
  1252.  
  1253.   function elementDrag(e) {
  1254.     e = e || window.event;
  1255.     e.preventDefault();
  1256.     // calculate the new cursor position:
  1257.     pos1 = pos3 - e.clientX;
  1258.     pos2 = pos4 - e.clientY;
  1259.     pos3 = e.clientX;
  1260.     pos4 = e.clientY;
  1261.     // set the element's new position:
  1262.     elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  1263.     elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  1264.   }
  1265.  
  1266.   function closeDragElement() {
  1267.     // stop moving when mouse button is released:
  1268.     document.onmouseup = null;
  1269.     document.onmousemove = null;
  1270.   }
  1271. }
  1272. </script>
  1273.  
  1274.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1275.         <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1276.  
  1277. <a id="heartbeat" href="https://puella.tumblr.com" title="by @puella"><i class="fas fa-heart"></i>️</a>
  1278.  
  1279.     </body>
  1280. </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!