API tools faq
paste
os2d

junpei lovebot theme

os2d
Jul 24th, 2020 (edited)
1,462
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. theme by misha @ramdons
  6. dont steal + dont remove credit + dm me if u run in2 bugs
  7. ----->
  8.  
  9. <meta charset="utf-8">
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  12.  
  13.  
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17.  
  18. <title>{Title}</title>
  19.  
  20.  
  21. {block:ifredirect}
  22. {block:IndexPage}<script type="text/javascript">
  23. var url = location.href;
  24. if (url == "{BlogURL}") {
  25. window.location = "{BlogURL}tagged/{text:redirect tag}";
  26. }
  27. </script>{/block:IndexPage}
  28. {/block:ifredirect}
  29.  
  30.  
  31.  
  32. {block:ifsparkles}<script type="text/javascript">
  33. // <![CDATA[
  34. var colour="{color:sparkles}"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
  35. var sparkles=50;
  36.  
  37. /****************************
  38. * Tinkerbell Magic Sparkle *
  39. *(c)2005-13 mf2fm web-design*
  40. * http://www.mf2fm.com/rv *
  41. * DON'T EDIT BELOW THIS BOX *
  42. ****************************/
  43. var x=ox=400;
  44. var y=oy=300;
  45. var swide=800;
  46. var shigh=600;
  47. var sleft=sdown=0;
  48. var tiny=new Array();
  49. var star=new Array();
  50. var starv=new Array();
  51. var starx=new Array();
  52. var stary=new Array();
  53. var tinyx=new Array();
  54. var tinyy=new Array();
  55. var tinyv=new Array();
  56.  
  57. window.onload=function() { if (document.getElementById) {
  58. var i, rats, rlef, rdow;
  59. for (var i=0; i<sparkles; i++) {
  60. var rats=createDiv(3, 3);
  61. rats.style.visibility="hidden";
  62. rats.style.zIndex="999";
  63. document.body.appendChild(tiny[i]=rats);
  64. starv[i]=0;
  65. tinyv[i]=0;
  66. var rats=createDiv(5, 5);
  67. rats.style.backgroundColor="transparent";
  68. rats.style.visibility="hidden";
  69. rats.style.zIndex="999";
  70. var rlef=createDiv(1, 5);
  71. var rdow=createDiv(5, 1);
  72. rats.appendChild(rlef);
  73. rats.appendChild(rdow);
  74. rlef.style.top="2px";
  75. rlef.style.left="0px";
  76. rdow.style.top="0px";
  77. rdow.style.left="2px";
  78. document.body.appendChild(star[i]=rats);
  79. }
  80. set_width();
  81. sparkle();
  82. }}
  83.  
  84. function sparkle() {
  85. var c;
  86. if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
  87. ox=x;
  88. oy=y;
  89. for (c=0; c<sparkles; c++) if (!starv[c]) {
  90. star[c].style.left=(starx[c]=x)+"px";
  91. star[c].style.top=(stary[c]=y+1)+"px";
  92. star[c].style.clip="rect(0px, 5px, 5px, 0px)";
  93. star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
  94. star[c].style.visibility="visible";
  95. starv[c]=50;
  96. break;
  97. }
  98. }
  99. for (c=0; c<sparkles; c++) {
  100. if (starv[c]) update_star(c);
  101. if (tinyv[c]) update_tiny(c);
  102. }
  103. setTimeout("sparkle()", 40);
  104. }
  105.  
  106. function update_star(i) {
  107. if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  108. if (starv[i]) {
  109. stary[i]+=1+Math.random()*3;
  110. starx[i]+=(i%5-2)/5;
  111. if (stary[i]<shigh+sdown) {
  112. star[i].style.top=stary[i]+"px";
  113. star[i].style.left=starx[i]+"px";
  114. }
  115. else {
  116. star[i].style.visibility="hidden";
  117. starv[i]=0;
  118. return;
  119. }
  120. }
  121. else {
  122. tinyv[i]=50;
  123. tiny[i].style.top=(tinyy[i]=stary[i])+"px";
  124. tiny[i].style.left=(tinyx[i]=starx[i])+"px";
  125. tiny[i].style.width="2px";
  126. tiny[i].style.height="2px";
  127. tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
  128. star[i].style.visibility="hidden";
  129. tiny[i].style.visibility="visible"
  130. }
  131. }
  132.  
  133. function update_tiny(i) {
  134. if (--tinyv[i]==25) {
  135. tiny[i].style.width="1px";
  136. tiny[i].style.height="1px";
  137. }
  138. if (tinyv[i]) {
  139. tinyy[i]+=1+Math.random()*3;
  140. tinyx[i]+=(i%5-2)/5;
  141. if (tinyy[i]<shigh+sdown) {
  142. tiny[i].style.top=tinyy[i]+"px";
  143. tiny[i].style.left=tinyx[i]+"px";
  144. }
  145. else {
  146. tiny[i].style.visibility="hidden";
  147. tinyv[i]=0;
  148. return;
  149. }
  150. }
  151. else tiny[i].style.visibility="hidden";
  152. }
  153.  
  154. document.onmousemove=mouse;
  155. function mouse(e) {
  156. if (e) {
  157. y=e.pageY;
  158. x=e.pageX;
  159. }
  160. else {
  161. set_scroll();
  162. y=event.y+sdown;
  163. x=event.x+sleft;
  164. }
  165. }
  166.  
  167. window.onscroll=set_scroll;
  168. function set_scroll() {
  169. if (typeof(self.pageYOffset)=='number') {
  170. sdown=self.pageYOffset;
  171. sleft=self.pageXOffset;
  172. }
  173. else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
  174. sdown=document.body.scrollTop;
  175. sleft=document.body.scrollLeft;
  176. }
  177. else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  178. sleft=document.documentElement.scrollLeft;
  179. sdown=document.documentElement.scrollTop;
  180. }
  181. else {
  182. sdown=0;
  183. sleft=0;
  184. }
  185. }
  186.  
  187. window.onresize=set_width;
  188. function set_width() {
  189. var sw_min=999999;
  190. var sh_min=999999;
  191. if (document.documentElement && document.documentElement.clientWidth) {
  192. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  193. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  194. }
  195. if (typeof(self.innerWidth)=='number' && self.innerWidth) {
  196. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  197. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  198. }
  199. if (document.body.clientWidth) {
  200. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  201. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  202. }
  203. if (sw_min==999999 || sh_min==999999) {
  204. sw_min=800;
  205. sh_min=600;
  206. }
  207. swide=sw_min;
  208. shigh=sh_min;
  209. }
  210.  
  211. function createDiv(height, width) {
  212. var div=document.createElement("div");
  213. div.style.position="absolute";
  214. div.style.height=height+"px";
  215. div.style.width=width+"px";
  216. div.style.overflow="hidden";
  217. return (div);
  218. }
  219.  
  220. function newColour() {
  221. var c=new Array();
  222. c[0]=255;
  223. c[1]=Math.floor(Math.random()*256);
  224. c[2]=Math.floor(Math.random()*(256-c[1]/2));
  225. c.sort(function(){return (0.5 - Math.random());});
  226. return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
  227. }
  228. // ]]>
  229. </script>{/block:ifsparkles}
  230.  
  231.  
  232. <meta name="image:favicon" content="">
  233. <meta name="image:icon" content="">
  234. <meta name="image:side image" content=""/>
  235.  
  236. <meta name="image:pixel 1" content=""/>
  237. <meta name="image:pixel 2" content=""/>
  238. <meta name="image:pixel 3" content=""/>
  239. <meta name="image:pixel 4" content=""/>
  240. <meta name="image:pixel 5" content=""/>
  241. <meta name="image:pixel 6" content=""/>
  242. <meta name="image:pixel 7" content=""/>
  243. <meta name="image:perma pixel" content=""/>
  244.  
  245. <meta name="image:bg" content=""/>
  246. <meta name="image:post bg" content="">
  247. <meta name="image:text post bg" content="">
  248. <meta name="image:sidebar bg" content="">
  249.  
  250. <meta name="image:scrollbar thumb" content="">
  251. <meta name="image:scrollbar bg" content="">
  252.  
  253. <meta name="color:bg" content=""/>
  254. <meta name="color:post bg" content="">
  255. <meta name="color:text post bg" content="">
  256. <meta name="color:sidebar bg" content="#fff">
  257. <meta name="color:post glow" content="#999">
  258. <meta name="color:post hover" content="#999">
  259.  
  260. <meta name="color:scrollbar thumb" content="">
  261. <meta name="color:scrollbar bg" content="">
  262.  
  263. <meta name="color:sparkles" content="black">
  264. <meta name="color:border" content="">
  265. <meta name="color:inner border" content="">
  266. <meta name="color:sidebar border" content="">
  267.  
  268. <meta name="color:text" content="">
  269. <meta name="color:text glow" content="">
  270.  
  271. <meta name="color:link" content="">
  272. <meta name="color:link outline" content="">
  273. <meta name="color:link glow" content="">
  274. <meta name="color:link hover" content="">
  275. <meta name="color:link outline hover" content="">
  276. <meta name="color:link glow hover" content="">
  277.  
  278. <meta name="color:tooltip text" content="#000">
  279. <meta name="color:tooltip bg" content="#fff">
  280. <meta name="color:selection" content="#fff">
  281. <meta name="color:selection bg" content="#efefef">
  282.  
  283. <meta name="if:cover bg" content="">
  284.  
  285. <meta name="if:shake image" content="" >
  286. <meta name="if:image blur on hover" content="" >
  287.  
  288. <meta name="if:icon tooltip" content="" >
  289. <meta name="if:sparkles" content="">
  290. <meta name="if:fancy scrollbar" content="">
  291.  
  292. <meta name="if:pixel 4" content="">
  293. <meta name="if:pixel 5" content="">
  294. <meta name="if:pixel 6" content="">
  295. <meta name="if:pixel 7" content="">
  296.  
  297. <meta name="if:text glow" content="">
  298. <meta name="if:link glow" content="">
  299. <meta name="if:link outline" content="">
  300. <meta name="if:link drop" content="">
  301. <meta name="if:link blur" content="">
  302. <meta name="if:link strikethrough" content="">
  303. <meta name="if:link italic" content="">
  304. <meta name="if:link bold" content="">
  305. <meta name="if:rainbow links" content="">
  306. <meta name="if:pastel rainbow links" content="">
  307.  
  308. <meta name="if:post glow" content="" >
  309. <meta name="if:post drop shadow" content="" >
  310. <meta name="if:post hover" content="0">
  311.  
  312. <meta name="if:redirect" content="" >
  313. <meta name="if:search" content="" >
  314. <meta name="if:captions" content="" >
  315. <meta name="if:rounded" content="" >
  316. <meta name="if:fuzzy border" content="" >
  317. <meta name="if:rainbow border" content="" >
  318. <meta name="if:footer" content="" >
  319. <meta name="if:footer 2" content="" >
  320. <meta name="if:tags" content="" >
  321. <meta name="if:inner post" content="" >
  322. <meta name="if:500px posts" content="" >
  323.  
  324. <meta name="select:border" content="none">
  325. <meta name="select:border" content="solid">
  326. <meta name="select:border" content="dotted">
  327. <meta name="select:border" content="dashed">
  328. <meta name="select:border" content="outset">
  329. <meta name="select:border" content="double">
  330.  
  331. <meta name="select:innerborder" content="none">
  332. <meta name="select:innerborder" content="solid">
  333. <meta name="select:innerborder" content="dotted">
  334. <meta name="select:innerborder" content="dashed">
  335. <meta name="select:innerborder" content="outset">
  336. <meta name="select:innerborder" content="double">
  337.  
  338. <meta name="select:sidebar border" content="none">
  339. <meta name="select:sidebar border" content="solid">
  340. <meta name="select:sidebar border" content="dotted">
  341. <meta name="select:sidebar border" content="dashed">
  342. <meta name="select:sidebar border" content="outset">
  343. <meta name="select:sidebar border" content="double">
  344.  
  345. <meta name="select:font" content="arial">
  346. <meta name="select:font" content="ms pgothic">
  347. <meta name="select:font" content="times">
  348. <meta name="select:font" content="short stack">
  349. <meta name="select:font" content="bellota">
  350. <meta name="select:font" content="Liu Jian Mao Cao">
  351. <meta name="select:font" content="Playfair Display">
  352. <meta name="select:font" content="Pacifico">
  353. <meta name="select:font" content="Rajdhani">
  354. <meta name="select:font" content="Bebas Neue">
  355. <meta name="select:font" content="Advent Pro">
  356. <meta name="select:font" content="Orbitron">
  357. <meta name="select:font" content="Metal Mania">
  358. <meta name="select:font" content="MuseoModerno">
  359. <meta name="select:font" content="Press Start 2P">
  360. <meta name="select:font" content="Staatliches">
  361.  
  362. <meta name="select:navstyle" content="upright">
  363. <meta name="select:navstyle" content="mixed">
  364.  
  365. <meta name="text:font size" content="20">
  366.  
  367. <meta name="text:icon hover" content="hi hi ^_^">
  368. <meta name="text:note text" content="%">
  369.  
  370. <meta name="text:sidebar width" content="170">
  371. <meta name="text:search text" content=":zany_face:">
  372.  
  373. <meta name="text:link 1" content="">
  374. <meta name="text:link 1 url" content="">
  375. <meta name="text:link 2" content="">
  376. <meta name="text:link 2 url" content="">
  377. <meta name="text:link 3" content="">
  378. <meta name="text:link 3 url" content="">
  379.  
  380. <meta name="text:border width" content="2">
  381. <meta name="text:inner border width" content="2">
  382. <meta name="text:sidebar border width" content="1">
  383. <meta name="text:redirect tag" content="">
  384.  
  385. <meta name="text:side image width" content="auto">
  386. <meta name="text:side image right margin" content="0">
  387. <meta name="text:side image bottom margin" content="0">
  388.  
  389. <link rel="shortcut icon" href="{image:favicon}">
  390. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  391. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  392.  
  393. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  394.  
  395. <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">
  396.  
  397. <link href="https://fonts.googleapis.com/css2?family=Metal+Mania&family=MuseoModerno:wght@531&family=Press+Start+2P&family=Short+Stack&family=Staatliches&display=swap" rel="stylesheet">
  398.  
  399.  
  400. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  401.  
  402. <style type="text/css">
  403.  
  404. /*Scrollbar and Selection*/
  405.  
  406. ::selection {
  407. background: {color:selection bg};
  408. color: {color:selection};
  409. }
  410. ::-moz-selection {
  411. background: {color:selection bg};
  412. color: {color:selection};
  413. }
  414.  
  415.  
  416. {block:iffancyscrollbar}
  417. ::-webkit-scrollbar {
  418. width: 16px;
  419. height: 10px;
  420. }
  421. ::-webkit-scrollbar-thumb {
  422. background-color: #fff;
  423. background-image: url(https://i.imgur.com/Qtm9Z60.png);
  424. border-top: 1px solid #bdbdbd;
  425. border-left: 1px solid #bdbdbd;
  426. border-right: 1px solid black;
  427. border-bottom: 1px solid black;
  428. }
  429. ::-webkit-scrollbar-track {
  430. background-color: #fff;
  431. background-image: url(https://i.imgur.com/IGXGYKz.png);
  432. }
  433. ::-webkit-scrollbar-button:vertical:increment {
  434. background-image: url(https://i.imgur.com/WhC8iy3.png);
  435. width: 14px;
  436. height: 16px;
  437. border-top: 1px solid #bdbdbd;
  438. border-left: 1px solid #bdbdbd;
  439. border-right: 1px solid black;
  440. border-bottom: 1px solid black;
  441. }
  442. ::-webkit-scrollbar-button:vertical:decrement {
  443. background-image: url(https://i.imgur.com/fQ18mrR.png);
  444. border-top: 1px solid #bdbdbd;
  445. border-left: 1px solid #bdbdbd;
  446. border-right: 1px solid black;
  447. border-bottom: 1px solid black;
  448. width: 14px;
  449. height: 16px;
  450. }
  451. {/block:iffancyscrollbar}
  452.  
  453.  
  454. {block:ifnotfancyscrollbar}
  455. ::-webkit-scrollbar {
  456. width: 16px;
  457. height: 10px;
  458. }
  459. ::-webkit-scrollbar-thumb {
  460. background:{color:scrollbar thumb};
  461. background-image: url('{image:scrollbar thumb}');
  462. border: 1px outset {color:scrollbar thumb};
  463. {block:ifrounded}
  464. border-radius:12px;
  465. {/block:ifrounded}
  466. }
  467. ::-webkit-scrollbar-track {
  468. background:{color:scrollbar bg};
  469. background-image: url('{image:scrollbar bg}');
  470. }
  471.  
  472. ::-webkit-scrollbar-button:vertical:increment {
  473. background:{color:scrollbar thumb};
  474. background-image: url('{image:scrollbar thumb}');
  475. border: 1px outset {color:scrollbar thumb};
  476. width: 14px;
  477. height: 16px;
  478. }
  479. ::-webkit-scrollbar-button:vertical:decrement {
  480. background:{color:scrollbar thumb};
  481. background-image: url('{image:scrollbar thumb}');
  482. border: 1px outset {color:scrollbar thumb};
  483. width: 14px;
  484. height: 16px;
  485. }
  486. {/block:ifnotfancyscrollbar}
  487.  
  488. /*
  489. general text styles, fonts and colours
  490. */
  491.  
  492. *{
  493. padding:0;
  494. margin:0;
  495. }
  496.  
  497. body {
  498. margin:0px;
  499.  
  500. background:{color:bg};
  501. background-image: url('{image:bg}');
  502. {block:ifnotcoverbg}
  503. background-repeat: repeat;
  504. background-attachment: fixed;
  505. {/block:ifnotcoverbg}
  506. {block:ifcoverbg}
  507. background-size: cover;
  508. background-attachment: fixed;
  509. {/block:ifcoverbg}
  510.  
  511. font-family:{select:font}, arial;
  512. font-size:{text:font size}px;
  513. line-height:140%;
  514. color:{color:text};
  515.  
  516. {block:iftextglow}
  517. text-shadow: 0 0 2px {color:text glow};
  518. {/block:iftextglow}
  519. }
  520.  
  521. p{
  522. margin:0 0 0 0;
  523. padding:0;
  524. }
  525.  
  526. pre {
  527. white-space: pre-wrap;
  528. white-space: -moz-pre-wrap;
  529. white-space: -pre-wrap;
  530. white-space: -o-pre-wrap;
  531. word-wrap: break-word;
  532. }
  533.  
  534.  
  535. /*Links styling*/
  536. a{
  537. color:{color:link};
  538. text-decoration:none;
  539.  
  540. {block:iflinkglow}
  541. text-shadow:0 0 2px {color:link glow}, 0 0 2px {color:link glow};
  542. {/block:iflinkglow}
  543.  
  544. {block:iflinkoutline}
  545.  
  546. text-shadow: -1px 0 {color:link outline}, 0 1px {color:link outline}, 1px 0 {color:link outline}, 0 -1px {color:link outline}{block:iflinkglow}, 0 0 3px {color:link glow}, 0 0 3px {color:link glow} {/block:iflinkglow};
  547.  
  548. {/block:iflinkoutline}
  549.  
  550.  
  551. {block:iflinkbold}
  552. font-weight:bold;
  553. {/block:iflinkbold}
  554.  
  555. transition:0.3s;
  556. -o-transition: all 0.3s ease-out;
  557. -webkit-transition: all 0.3s ease-out;
  558. -moz-transition: all 0.3s ease-out;
  559.  
  560. }
  561.  
  562. a:hover{
  563. color:{color:link hover};
  564.  
  565. {block:iflinkglow}
  566. text-shadow:0 0 2px {color:link glow hover}, 0 0 2px {color:link glow hover};
  567. {/block:iflinkglow}
  568.  
  569. {block:iflinkstrikethrough}
  570. text-decoration: line-through;
  571. {/block:iflinkstrikethrough}
  572.  
  573. {block:iflinkitalic}
  574. font-style: italic;
  575. {/block:iflinkitalic}
  576.  
  577. {block:iflinkblur}
  578. filter: blur(1px);
  579. {/block:iflinkblur}
  580.  
  581. {block:ifrainbowlinks}
  582. -webkit-animation:rainbow 1s infinite;
  583. -ms-animation:rainbow 1s infinite;
  584. -o-animation:rainbow 1s infinite;
  585. animation:rainbow 1s infinite;
  586. {/block:ifrainbowlinks}
  587.  
  588. {block:ifpastelrainbowlinks}
  589. -webkit-animation:pastelrainbow 1s infinite;
  590. -ms-animation:pastelrainbow 1s infinite;
  591. -o-animation:pastelrainbow 1s infinite;
  592. animation:pastelrainbow 1s infinite;
  593. {/block:ifpastelrainbowlinks}
  594.  
  595.  
  596. {block:iflinkoutline}
  597. text-shadow: -1px 0 {color:link outline hover}, 0 1px {color:link outline hover}, 1px 0 {color:link outline hover}, 0 -1px {color:link outline hover}{block:iflinkglow}, 0 0 3px {color:link glow hover}, 0 0 3px {color:link glow hover} {/block:iflinkglow};
  598. {/block:iflinkoutline}
  599.  
  600.  
  601. {block:iflinkblur}
  602. filter: blur(1px);
  603. {/block:iflinkblur}
  604.  
  605. {block:iflinkdrop}
  606. text-shadow: 0 1px 1px {color:link outline hover}, 0 1px 1px {color:link outline hover}, 0 1px 0px{color:link outline hover}, 0px 1px 0px {color:link outline hover}, 0px 2px 0px {color:link outline hover}, 0px 3px 0px {color:link outline hover},0px 4px 0px {color:link outline hover};
  607. {/block:iflinkdrop}
  608.  
  609. transition:0.3s;
  610. -o-transition: all 0.3s ease-out;
  611. -webkit-transition: all 0.3s ease-out;
  612. -moz-transition: all 0.3s ease-out;
  613. cursor:help;
  614. }
  615.  
  616.  
  617. li{
  618. margin-left:-15px;
  619. }
  620.  
  621. img{
  622. transition:0.3s;
  623. margin-bottom:-10px;
  624. }
  625.  
  626. img:hover {
  627. {block:ifimagebluronhover}
  628. filter:blur(1px);
  629. {/block:ifimagebluronhover}
  630. transition:0.3s;
  631. {block:ifshakeimage}
  632. /* Start the shake animation and make the animation last for 0.5 seconds */
  633. animation: shake 0.5s;
  634.  
  635. /* When the animation is finished, start again */
  636. animation-iteration-count: infinite;
  637. {/block:ifshakeimage}
  638.  
  639. }
  640.  
  641.  
  642. @keyframes shake {
  643. 0% { transform: translate(1px, 1px) rotate(0deg); }
  644. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  645. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  646. 30% { transform: translate(3px, 2px) rotate(0deg); }
  647. 40% { transform: translate(1px, -1px) rotate(1deg); }
  648. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  649. 60% { transform: translate(-3px, 1px) rotate(0deg); }
  650. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  651. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  652. 90% { transform: translate(1px, 2px) rotate(0deg); }
  653. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  654. }
  655.  
  656.  
  657. /*
  658. containers etc
  659. */
  660. #wrapper{
  661. width:800px;
  662. margin:50px auto;
  663. {block:if500pxposts}
  664. width:900px;
  665. {/block:if500pxposts}
  666.  
  667. }
  668.  
  669. #sidebar{
  670. position:fixed;
  671. margin-top:10px;
  672. transition:0.3s;
  673. -o-transition: all 0.3s ease-out;
  674. -webkit-transition: all 0.3s ease-out;
  675. -moz-transition: all 0.3s ease-out;
  676. width:{text:sidebar width}px;
  677. margin-bottom:10px;
  678. {block:ifrounded}
  679. border-radius: 5px;
  680. {/block:ifrounded}
  681. {block:ifrainbowborder}
  682. border: {text:border width}px {select:border} transparent;
  683. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  684. border-image-slice: 1;
  685. {/block:ifrainbowborder}
  686. {block:ifnotrainbowborder}
  687. border: {text:border width}px {select:border} {color:border};
  688. {/block:ifnotrainbowborder}
  689. display: grid;
  690. grid-template-columns: auto 28px;
  691. align-items: center;
  692. margin-left: calc(800px - {text:sidebar width}px - {text:border width}px - {text:border width}px);
  693. {block:if500pxposts}
  694. margin-left: calc(900px - {text:sidebar width}px - {text:border width}px - {text:border width}px);
  695. {/block:if500pxposts}
  696. background:{color:sidebar bg};
  697. background-image: url('{image:sidebar bg}');
  698. {block:ifpostdropshadow}
  699. filter:drop-shadow(10px 10px rgba(0, 0, 0, 0.37));
  700. {/block:ifpostdropshadow}
  701.  
  702. {block:ifpostglow}
  703. box-shadow: 0 0 5px {color:post glow};
  704. {/block:ifpostglow}
  705. overflow:hidden;
  706.  
  707. }
  708.  
  709. #sidebar:hover{
  710. {block:ifposthover}
  711. box-shadow:0 0 5px {color:post hover};
  712. transition:0.3s;
  713. -o-transition: all 0.3s ease-out;
  714. -webkit-transition: all 0.3s ease-out;
  715. -moz-transition: all 0.3s ease-out;
  716. {/block:ifposthover}
  717. }
  718.  
  719. #icon{
  720. grid-column:1/2;
  721.  
  722. width: 100%;
  723.  
  724. height:100%;
  725. }
  726.  
  727. #icon a img{
  728. width:100%;
  729. }
  730.  
  731. #content{
  732. width:500px;
  733. overflow:hidden;
  734. padding:10px;
  735. {block:if500pxposts}
  736. width:600px;
  737. {/block:if500pxposts}
  738. }
  739.  
  740. .post{
  741. padding:0;
  742. width:400px;
  743.  
  744. -webkit-animation: fadeIn 0.3s;
  745. animation: fadeIn 0.3s;
  746.  
  747. {block:if500pxposts}
  748. width:500px;
  749. {/block:if500pxposts}
  750.  
  751. margin:0 0 50px 0;
  752. overflow:hidden;
  753. background:{color:post bg};
  754. background-image: url('{image:post bg}');
  755. border: {text:border width}px {select:border} {color:border};
  756. {block:ifrainbowborder}
  757. border: {text:border width}px {select:border} transparent;
  758. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  759. border-image-slice: 1;
  760. {/block:ifrainbowborder}
  761.  
  762. {block:ifpostdropshadow}
  763. filter:drop-shadow(10px 10px rgba(0, 0, 0, 0.37));
  764. {/block:ifpostdropshadow}
  765.  
  766. {block:ifpostglow}
  767. box-shadow: 0 0 5px {color:post glow};
  768. {/block:ifpostglow}
  769.  
  770.  
  771. {block:iffuzzyborder}
  772. border:none;
  773. box-shadow:0 0 5px 5px {color:post bg};
  774. {/block:iffuzzyborder}
  775.  
  776. padding: 10px calc(10px + {text:inner border width}px + {text:inner border width}px) 0 10px;
  777.  
  778. {block:ifrounded}
  779. border-radius: 5px;
  780. {/block:ifrounded}
  781. transition:0.3s;
  782. -o-transition: all 0.3s ease-out;
  783. -webkit-transition: all 0.3s ease-out;
  784. -moz-transition: all 0.3s ease-out;
  785.  
  786.  
  787. {block:iffooter}
  788. {block:ifnotfooter2}
  789. padding-top:0;
  790. {/block:ifnotfooter2}
  791. {/block:iffooter}
  792.  
  793. }
  794.  
  795.  
  796. .post:hover{
  797. {block:ifposthover}
  798. box-shadow:0 0 5px {color:post hover};
  799. transition:0.3s;
  800. -o-transition: all 0.3s ease-out;
  801. -webkit-transition: all 0.3s ease-out;
  802. -moz-transition: all 0.3s ease-out;
  803. {/block:ifposthover}
  804. }
  805.  
  806. .post img{
  807. max-width:100%;
  808. }
  809.  
  810.  
  811. @-webkit-keyframes fadeIn {
  812. from { opacity: 0; }
  813. to { opacity: 1; }
  814. }
  815. @keyframes fadeIn {
  816. from { opacity: 0; }
  817. to { opacity: 1; }
  818. }
  819. .insides{
  820. {block:ifinnerpost}
  821. background:{color:text post bg};
  822. background-image: url('{image:text post bg}');
  823. padding:10px;
  824. margin-bottom:10px;
  825. border: {text:inner border width}px {select:innerborder} {color:inner border};
  826. {block:ifrainbowborder}
  827. border: {text:inner border width}px {select:innerborder} transparent;
  828. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  829. border-image-slice: 1;
  830. {/block:ifrainbowborder}
  831. {block:ifrounded}
  832. border-radius: 5px;
  833. {/block:ifrounded}
  834. {/block:ifinnerpost}
  835. }
  836.  
  837. #sidebar img, .post img{
  838. max-width:100%;
  839. }
  840.  
  841. #nav{
  842. line-height:140%;
  843. writing-mode: vertical-rl;
  844. text-orientation: {select:navstyle};
  845. grid-column:2/3;
  846. grid-row:1/3;
  847. {block:ifsearch}
  848. grid-row:2/4;
  849. {/block:ifsearch}
  850.  
  851. height:100%;
  852. border-left: {text:sidebar border width}px {select:sidebar border} {color:sidebar border};
  853. display: flex;
  854. justify-content: space-around;
  855. align-items:center;
  856. {block:ifrainbowborder}
  857. border-left: {text:sidebar border width}px {select:sidebar border} transparent;
  858. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  859. border-image-slice: 1;
  860. {/block:ifrainbowborder}
  861. z-index:895;
  862.  
  863. }
  864.  
  865. #description{
  866. line-height:100%;
  867. transition:0.3s;
  868. -o-transition: all 0.3s ease-out;
  869. -webkit-transition: all 0.3s ease-out;
  870. -moz-transition: all 0.3s ease-out;
  871. max-height:100px;
  872. overflow-y:auto;
  873. padding:5px 0;
  874. grid-column:1/2;
  875. overflow:hidden;
  876. border-top: {text:sidebar border width}px {select:sidebar border} {color:sidebar border};
  877. {block:ifrainbowborder}
  878. border-bottom: {text:sidebar border width}px {select:sidebar border} transparent;
  879. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  880. border-image-slice: 1;
  881. {/block:ifrainbowborder}
  882. z-index:396584906;
  883. background:{color:sidebar bg};
  884. background-image: url('{image:sidebar bg}');
  885. margin-bottom: 1px;
  886.  
  887. }
  888.  
  889. .click{
  890. display: flex;
  891. align-items: center;
  892. justify-content: space-around;
  893. }
  894.  
  895. #description a img{
  896. height: 20px;
  897. display: inline-block;
  898. vertical-align: middle;
  899. margin-bottom: 0px;
  900. }
  901.  
  902.  
  903. @-webkit-keyframes fadeIn {
  904. from { opacity: 0; }
  905. to { opacity: 1; }
  906. }
  907. @keyframes fadeIn {
  908. from { opacity: 0; }
  909. to { opacity: 1; }
  910. }
  911.  
  912.  
  913. #s-m-t-tooltip {
  914. z-index: 9999;
  915. background: {color:tooltip bg};
  916. font-size: {text:font size}px;
  917. line-height: 140%;
  918. text-align:center;
  919. font-family:{text:font};
  920. letter-spacing: 1px;
  921. -o-transition: all 0.3s ease-out;
  922. -webkit-transition: all 0.3s ease-out;
  923. -moz-transition: all 0.3s ease-out;
  924. text-transform: normal;
  925. color: {color:tooltip text};
  926. border: {text:inner border width}px {select:innerborder} {color:inner border};
  927. {block:ifrounded}
  928. border-radius: 5px;
  929. {/block:ifrounded}
  930.  
  931. {block:iffuzzyborder}
  932. border:none;
  933. box-shadow:0 0 5px 5px {color:tooltip bg};
  934. {/block:iffuzzyborder}
  935. max-width: 300px;
  936. word-wrap: break-word;
  937. padding: 7px;
  938. display: block;
  939. margin: 24px 14px 7px 12px;
  940. }
  941.  
  942.  
  943. /*
  944. content in the body of the posts - quotes, asks, etc
  945. "media" contains photos, photosets, videos, audio posts
  946. */
  947. .media{
  948. margin:0 0 calc(10px + 0.2em) 0;
  949. }
  950.  
  951. h2{
  952. margin:10px 0;
  953. }
  954.  
  955. .media img{
  956.  
  957. {block:ifrounded}
  958. border-radius: 5px;
  959. {/block:ifrounded}
  960. }
  961.  
  962. .title{
  963. font-weight:normal;
  964. font-size:18px;
  965. margin:0 0 10px 0;
  966. }
  967.  
  968. .quote{
  969. font-weight:normal;
  970. font-size:16px;
  971. font-style:italic;
  972. margin:0 0 10px 0;
  973. }
  974.  
  975. .question{
  976. margin-bottom:10px;
  977. border: 1px outset gray;
  978. background-image: url(https://i.imgur.com/IGXGYKz.png);
  979. padding: 10px 10px 10px 10px;
  980. {block:ifrounded}
  981. border-radius: 5px;
  982. {/block:ifrounded}
  983. color:black;
  984. }
  985.  
  986. blockquote{
  987. margin:0 0 10px 10px;
  988. padding:0 0 0 10px;
  989. border-left:solid 1px #000;
  990. }
  991.  
  992. .html_photoset{
  993. margin-bottom:-10px;
  994. }
  995.  
  996. /*
  997. post footers - date, tags, via and source
  998. */
  999. .post .footer{
  1000. margin:0;
  1001. text-align:left;
  1002. }
  1003.  
  1004. .caption{
  1005. margin-top:10px;
  1006. }
  1007.  
  1008. #footer{
  1009.  
  1010. {block:iffooter2}
  1011. text-align:center;
  1012. display: grid;
  1013. grid-template-columns: 33% auto 33%;
  1014. align-items: center;
  1015.  
  1016. {block:ifnotinnerpost}
  1017. margin-bottom:10px;
  1018. {/block:ifnotinnerpost}
  1019.  
  1020. {/block:iffooter2}
  1021.  
  1022. }
  1023.  
  1024. #footer a img{
  1025. margin-bottom:0;
  1026. }
  1027.  
  1028. /*
  1029. post notes
  1030. */
  1031. ol.notes{
  1032. list-style-type: none;
  1033.  
  1034. padding: 10px;
  1035. {block:ifnotinnerpost}
  1036. padding:0;
  1037. {/block:ifnotinnerpost}
  1038. margin: 0;
  1039. max-height: 300px;
  1040. overflow: auto;
  1041. margin-bottom: 10px;
  1042.  
  1043. {block:ifinnerpost}
  1044. background:{color:text post bg};
  1045. background-image: url('{image:text post bg}');
  1046. margin-bottom:10px;
  1047. border: {text:inner border width}px {select:innerborder} {color:inner border};
  1048. {block:ifrounded}
  1049. border-radius: 5px;
  1050. {/block:ifrounded}
  1051. {/block:ifinnerpost}
  1052.  
  1053. }
  1054.  
  1055. ol.notes li.note img{
  1056. width: 1em;
  1057. height: 1em;
  1058. margin: 5px;
  1059. margin-bottom: -4px;
  1060. }
  1061.  
  1062. ol.notes li.note{
  1063. margin:0px;
  1064. }
  1065.  
  1066. /*AUDIO*/
  1067.  
  1068. .playbutton {
  1069. position:relative;
  1070. margin-top:45px;
  1071. margin-left:44px;
  1072. z-index:9;
  1073. width:33px;
  1074. height:30px;
  1075. overflow:hidden;
  1076.  
  1077. }
  1078.  
  1079. .albumart{
  1080. padding-bottom:-10px;
  1081. {block:ifnotinnerpost}
  1082. margin-top:10px;
  1083. {/block:ifnotinnerpost}
  1084. }
  1085.  
  1086. .albumart img {
  1087. background:url(https://i.imgur.com/IGXGYKz.png);
  1088. position:relative;
  1089. margin-top:-75px;
  1090. margin-left:0px
  1091. height:120px;
  1092. width:120px;
  1093.  
  1094. border: 1px outset #bdbdbd;
  1095.  
  1096. {block:ifrounded}
  1097. -webkit-border-top-left-radius: 5px;
  1098. -webkit-border-bottom-left-radius: 5px;
  1099. -moz-border-radius-topleft: 5px;
  1100. -moz-border-radius-bottomleft: 5px;
  1101. border-top-left-radius: 5px;
  1102. border-bottom-left-radius: 5px;
  1103. {/block:ifrounded}
  1104.  
  1105.  
  1106. }
  1107.  
  1108. .trackinfo {
  1109. border: 1px outset #bdbdbd;
  1110. background:#000;
  1111. background:url(https://i.imgur.com/IGXGYKz.png);
  1112. color:black;
  1113. top: calc(5px - ({text:font size}px / 5));
  1114. position:relative;
  1115. margin-left:120px;
  1116. height:120px;
  1117. margin-top:-120px;
  1118. font-size:15px;
  1119. {block:ifrounded}
  1120. -webkit-border-top-right-radius: 5px;
  1121. -webkit-border-bottom-right-radius: 5px;
  1122. -moz-border-radius-topright: 5px;
  1123. -moz-border-radius-bottomright: 5px;
  1124. border-top-right-radius: 5px;
  1125. border-bottom-right-radius: 5px;
  1126. {/block:ifrounded}
  1127.  
  1128. {block:ifnotinnerpost}
  1129. margin-bottom:10px;
  1130. {/block:ifnotinnerpost}
  1131.  
  1132. overflow:auto;
  1133.  
  1134. }
  1135.  
  1136. .trackname {
  1137. position:relative;
  1138. padding-top:10px;
  1139. text-align:center;
  1140. text-transform:uppercase;
  1141.  
  1142. }
  1143.  
  1144. .artist {
  1145. text-align:center;
  1146. text-transform:uppercase;
  1147. font-style: italic;
  1148. }
  1149.  
  1150.  
  1151. /*tags*/
  1152. .tags {
  1153.  
  1154. {block:ifinnerpost}
  1155. background:{color:text post bg};
  1156. background-image: url('{image:text post bg}');
  1157. border: {text:inner border width}px {select:innerborder} {color:inner border};
  1158. {block:ifrainbowborder}
  1159. border: {text:inner border width}px {select:innerborder} transparent;
  1160. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  1161. border-image-slice: 1;
  1162. {/block:ifrainbowborder}
  1163. {block:ifrounded}
  1164. border-radius: 5px;
  1165. {/block:ifrounded}
  1166. {/block:ifinnerpost}
  1167. max-height:0px;
  1168. line-height:140%;
  1169. text-align:left;
  1170. opacity:0;
  1171. -webkit-transition: all 0.5s ease;
  1172. transition: all 0.5s ease;
  1173. -moz-transition: all 0.5s ease;
  1174. -o-transition: all 0.5s ease;
  1175.  
  1176. }
  1177.  
  1178. .post:hover .tags{
  1179. opacity:1;
  1180. max-height:300px;
  1181. -webkit-transition: all 0.5s ease;
  1182. transition: all 0.5s ease;
  1183. -moz-transition: all 0.5s ease;
  1184. -o-transition: all 0.5s ease;
  1185. {block:ifinnerpost}
  1186. padding:10px;
  1187. {/block:ifinnerpost}
  1188. margin-bottom:10px;
  1189. overflow:auto;
  1190.  
  1191. }
  1192.  
  1193.  
  1194.  
  1195. /*search*/
  1196.  
  1197. #googoo{
  1198. grid-column: 1/3;
  1199. width: calc(100% - 1px);
  1200. border-bottom: {text:sidebar border width}px {select:sidebar border} {color:sidebar border};
  1201. margin-left: 0;
  1202. {block:ifrainbowborder}
  1203. border-bottom: {text:sidebar border width}px {select:sidebar border} transparent;
  1204. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  1205. border-image-slice: 1;
  1206. {/block:ifrainbowborder}
  1207. height:100%;
  1208. /*margin-bottom:{text:inner border width}px;*/
  1209. z-index: 49875;
  1210. background: white;
  1211.  
  1212. }
  1213. #googoo form{
  1214. height:100%;
  1215.  
  1216. }
  1217.  
  1218. input.search{
  1219. width: 100%;
  1220. box-sizing: border-box;
  1221. border: none;
  1222. height:100%;
  1223. }
  1224. input.search:focus{
  1225. outline:none;
  1226. }
  1227.  
  1228. @-webkit-keyframes rainbow {
  1229. 0% {color: #ff0000;}
  1230. 10% {color: #ff8000;}
  1231. 20% {color: #ffff00;}
  1232. 30% {color: #80ff00;}
  1233. 40% {color: #00ff00;}
  1234. 50% {color: #00ff80;}
  1235. 60% {color: #00ffff;}
  1236. 70% {color: #0080ff;}
  1237. 80% {color: #0000ff;}
  1238. 90% {color: #8000ff;}
  1239. 100% {color: #ff0080;}
  1240. }
  1241. @-ms-keyframes rainbow {
  1242. 0% {color: #ff0000;}
  1243. 10% {color: #ff8000;}
  1244. 20% {color: #ffff00;}
  1245. 30% {color: #80ff00;}
  1246. 40% {color: #00ff00;}
  1247. 50% {color: #00ff80;}
  1248. 60% {color: #00ffff;}
  1249. 70% {color: #0080ff;}
  1250. 80% {color: #0000ff;}
  1251. 90% {color: #8000ff;}
  1252. 100% {color: #ff0080;}
  1253. }
  1254. @-o-keyframes rainbow {
  1255. 0% {color: #ff0000;}
  1256. 10% {color: #ff8000;}
  1257. 20% {color: #ffff00;}
  1258. 30% {color: #80ff00;}
  1259. 40% {color: #00ff00;}
  1260. 50% {color: #00ff80;}
  1261. 60% {color: #00ffff;}
  1262. 70% {color: #0080ff;}
  1263. 80% {color: #0000ff;}
  1264. 90% {color: #8000ff;}
  1265. 100% {color: #ff0080;}
  1266. }
  1267. @keyframes rainbow {
  1268. 0% {color: #ff0000;}
  1269. 10% {color: #ff8000;}
  1270. 20% {color: #ffff00;}
  1271. 30% {color: #80ff00;}
  1272. 40% {color: #00ff00;}
  1273. 50% {color: #00ff80;}
  1274. 60% {color: #00ffff;}
  1275. 70% {color: #0080ff;}
  1276. 80% {color: #0000ff;}
  1277. 90% {color: #8000ff;}
  1278. 100% {color: #ff0080;}
  1279. }
  1280.  
  1281. /*PASTEL RAINBOW*/
  1282. @-webkit-keyframes pastelrainbow {
  1283. 0% {color: #ff9494; }
  1284. 16% {color: #ffbb94; }
  1285. 32% {color: #ffe194; }
  1286. 48% {color: #b1f2ba; }
  1287. 64% {color: #b8f5ff; }
  1288. 80% {color: #d8b8ff; }
  1289. 100% {color: #ffb8ee; }
  1290. }
  1291. @-ms-keyframes pastelrainbow {
  1292. 0% {color: #ff9494; }
  1293. 16% {color: #ffbb94; }
  1294. 32% {color: #ffe194; }
  1295. 48% {color: #b1f2ba; }
  1296. 64% {color: #b8f5ff; }
  1297. 80% {color: #d8b8ff; }
  1298. 100% {color: #ffb8ee; }
  1299. }
  1300. @-o-keyframes pastelrainbow {
  1301. 0% {color: #ff9494; }
  1302. 16% {color: #ffbb94; }
  1303. 32% {color: #ffe194; }
  1304. 48% {color: #b1f2ba; }
  1305. 64% {color: #b8f5ff; }
  1306. 80% {color: #d8b8ff; }
  1307. 100% {color: #ffb8ee; }
  1308. }
  1309. @keyframes pastelrainbow {
  1310. 0% {color: #ff9494; }
  1311. 16% {color: #ffbb94; }
  1312. 32% {color: #ffe194; }
  1313. 48% {color: #b1f2ba; }
  1314. 64% {color: #b8f5ff; }
  1315. 80% {color: #d8b8ff; }
  1316. 100% {color: #ffb8ee; }
  1317. }
  1318.  
  1319. .dropdown-content {
  1320. display: none;
  1321. border-top:{text:sidebar border width}px {select:sidebar border} {color:sidebar border};
  1322. grid-column:1/3;
  1323. padding:10px;
  1324. {block:ifrainbowborder}
  1325. border-top: {text:sidebar border width}px {select:sidebar border} transparent;
  1326. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  1327. border-image-slice: 1;
  1328. {/block:ifrainbowborder}
  1329. text-align:center;
  1330. }
  1331.  
  1332. .dropdown-content a{
  1333. display:block;
  1334. }
  1335.  
  1336. .show {display: block !important;}
  1337.  
  1338. {CustomCSS}
  1339. </style>
  1340. </head>
  1341.  
  1342. <body>
  1343.  
  1344.  
  1345.  
  1346. <div id="wrapper">
  1347.  
  1348. <a title='ramdons' href='https://ramdons.tumblr.com' style='filter:none;'><img style='position:fixed; bottom:15px; left:5px; width:20px; filter:none;' src='https://cdn.discordapp.com/attachments/392883996952100887/734223693206782025/723745494513221652.png'></a>
  1349.  
  1350. <img style='position:fixed; bottom:{text:side image bottom margin}px; right:{text:side image right margin}px; width:{text:side image width}px; z-index:-1;' src='{image:side image}'>
  1351.  
  1352.  
  1353. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  1354.  
  1355. <div id="sidebar">
  1356.  
  1357. {block:ifsearch}
  1358. <div id='googoo'>
  1359. <form action="/search" method="get" class="sfm" name="theform">
  1360. <input class="search" type="text" placeholder="{text:search text}" name="q">
  1361. </form>
  1362. </div>
  1363.  
  1364. {/block:ifsearch}
  1365. <div id='icon'>
  1366. {block:ifnoticontooltip}
  1367. <a href='/'><img src="{image:icon}"></a>
  1368. {/block:ifnoticontooltip}
  1369. {block:ificontooltip}
  1370. <a href='/' title='{text:icon hover}'><img src="{image:icon}"></a>
  1371. {/block:ificontooltip}
  1372. </div>
  1373. <div id="nav">
  1374. {block:PreviousPage}<a style='margin: 0 auto;' href="{PreviousPage}"<i class="fas fa-angle-up"></i></a>{/block:PreviousPage}
  1375. {block:JumpPagination length="5"}
  1376. {block:CurrentPage}
  1377. <span class="current_page">{PageNumber}</span>
  1378. {/block:CurrentPage}
  1379. {block:JumpPage}
  1380. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1381. {/block:JumpPage}
  1382. {/block:JumpPagination}
  1383.  
  1384. {block:NextPage}<a href="{NextPage}"><i class="fas fa-angle-down"></i></a>{/block:NextPage}
  1385. </div>
  1386. <div id='description' style='text-align:center;'>
  1387. <a onclick="myFunction()" class="dropbtn click">
  1388. <img class='dropbtn' src='{image:pixel 1}'>
  1389. <img class='dropbtn' src='{image:pixel 2}'>
  1390. <img class='dropbtn' src='{image:pixel 3}'>
  1391. {block:ifpixel4}
  1392. <img class='dropbtn' src='{image:pixel 4}'>
  1393. {/block:ifpixel4}
  1394. {block:ifpixel5}
  1395. <img class='dropbtn' src='{image:pixel 5}'>
  1396. {/block:ifpixel5}
  1397. {block:ifpixel6}
  1398. <img class='dropbtn' src='{image:pixel 6}'>
  1399. {/block:ifpixel6}
  1400. {block:ifpixel7}
  1401. <img class='dropbtn' src='{image:pixel 7}'>
  1402. {/block:ifpixel7}
  1403. </a>
  1404. </div>
  1405.  
  1406. <div id="myDropdown" class="dropdown-content">
  1407. <a href='{text:link 1 url}'>{text:link 1}</a>
  1408. <a href="{text:link 2 url}">{text:link 2}</a>
  1409. <a href="{text:link 3 url}">{text:link 3}</a>
  1410. </div>
  1411.  
  1412. </div>
  1413.  
  1414.  
  1415. <div id="content">
  1416.  
  1417.  
  1418.  
  1419. {block:Posts}
  1420.  
  1421.  
  1422.  
  1423.  
  1424.  
  1425. <div class="post">
  1426.  
  1427. {block:ifnotfooter2}
  1428. {block:iffooter}
  1429.  
  1430. <div id='footer' style='font-size:15px; margin-bottom: 10px; border-bottom: {text:border width}px {select:border} {color:border};
  1431. {block:ifrainbowborder}
  1432. border-bottom: {text:border width}px {select:border} transparent;
  1433. border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  1434. border-image-slice: 1;
  1435. {/block:ifrainbowborder} '>
  1436. <a><img height='15' src='{image:perma pixel}'></a>
  1437. <a href="{Permalink}" style='text-transform:uppercase;'> {12HourWithZero}{CapitalAmPm}://users/{name}</a>
  1438. <div style='display:inline; float:right;'>
  1439. <a href='{ReblogURL}'><img src='https://audial.ist/capture/load/u7svTEsfgTpAmiCD3YaouAOl.png'> </a>
  1440. <a href='{ReblogURL}'><img src='https://audial.ist/capture/load/TjkYvfNbXjYNGjfp0KHCEdgk.png'> </a>
  1441. <a href='{ReblogURL}'><img src='https://audial.ist/capture/load/p6UTmj7FootpcWgaTj4OLqzm.png'></a>
  1442. </div>
  1443. </div>
  1444.  
  1445. {/block:iffooter}
  1446. {/block:ifnotfooter2}
  1447.  
  1448. {block:Text}
  1449. <div class='insides'>
  1450. {block:Title}
  1451. <div class="title" style='font-size:1.25em;'><b>{Title}</b></div>
  1452. {/block:Title}
  1453. {Body}
  1454. </div>
  1455. {/block:Text}
  1456.  
  1457. {block:Photo}
  1458. <div class="media">
  1459. {LinkOpenTag}
  1460. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1461. {LinkCloseTag}
  1462.  
  1463. {block:ifcaptions}
  1464. {block:Caption}
  1465. <div class="caption insides">
  1466. {Caption}
  1467. </div>
  1468. {/block:Caption}
  1469. {/block:ifcaptions}
  1470.  
  1471. </div>
  1472.  
  1473. {/block:Photo}
  1474.  
  1475. {block:Photoset}
  1476. {block:ifnot500pxposts}
  1477. <div class="media">{Photoset-400}</div>
  1478. {/block:ifnot500pxposts}
  1479.  
  1480. {block:if500pxposts}
  1481. <div class="media">{Photoset-500}</div>
  1482. {/block:if500pxposts}
  1483.  
  1484. {block:Photos} {/block:Photos}
  1485.  
  1486. {block:Caption}
  1487. {block:ifcaptions}
  1488. {block:Caption}
  1489. <div class="caption insides">
  1490. {Caption}
  1491. </div>
  1492. {/block:Caption}
  1493. {/block:ifcaptions}
  1494. {/block:Caption}
  1495. {/block:Photoset}
  1496.  
  1497. {block:Quote}
  1498. <div class='insides'>
  1499.  
  1500. <div class="quote">"{Quote}"</div>
  1501. {block:Source}
  1502. <div class="quotesource">{Source}</div>
  1503. {/block:Source}
  1504. </div>
  1505. {/block:Quote}
  1506.  
  1507. {block:Link}
  1508. <div class='insides'>
  1509.  
  1510. <div class="title"><a href="{URL}">{Name}</a></div>
  1511. {block:Description}
  1512. <div class="description">{Description}</div>
  1513. {/block:Description}
  1514. </div>
  1515. {/block:Link}
  1516.  
  1517. {block:Chat}
  1518. <div class='insides'>
  1519.  
  1520. {block:Title}
  1521. <div class="title">{Title}</div>
  1522.  
  1523. {/block:Title}
  1524.  
  1525. {block:Lines}
  1526. <div class="{Alt} user_{UserNumber}">
  1527. {block:Label}
  1528. <b>{Label}</b>{/block:Label}
  1529. &nbsp;{Line}
  1530. </div>
  1531. {/block:Lines}
  1532. </div>
  1533. {/block:Chat}
  1534.  
  1535. {block:Video}
  1536. <div class="media">{Video-400}</div>
  1537. {block:Caption}<div class="caption insides">{Caption}</div>{/block:Caption}
  1538. {/block:Video}
  1539.  
  1540. {block:Audio}
  1541. <div class='insides'>
  1542. {block:AudioPlayer}
  1543. <div class='playbutton'>{AudioPlayerGrey}</div>
  1544. {block:AlbumArt}<div class='albumart'><img src='{AlbumArtURL}'></div>{/block:AlbumArt}
  1545. <div class='trackinfo'>
  1546. <div class='trackname'>
  1547. {block:TrackName}{TrackName}{/block:TrackName}
  1548. </div>
  1549. <div class='artist'>
  1550. {block:Artist}{Artist}{/block:Artist}
  1551. </div>
  1552. </div>
  1553. {block:Caption}{Caption}{/block:Caption}
  1554. {/block:AudioPlayer}
  1555. </div>
  1556. {/block:Audio}
  1557.  
  1558. {block:Answer}
  1559. <div class='insides'>
  1560.  
  1561. <div class="question">{Asker}: {Question}</div>
  1562. <div class="caption">{Answer}</div>
  1563. </div>
  1564. {/block:Answer}
  1565.  
  1566. {block:iffooter2}
  1567.  
  1568. <div id='footer' class='insides'>
  1569. <a style='text-align:left;' href="{Permalink}">{NoteCount}{text:note text}</a>
  1570. <a style='text-align:center;' href="{Permalink}"><img src='{image:perma pixel}'></a>
  1571. <a style='text-align:right;' href="{ReblogURL}">↻</a>
  1572. </div>
  1573.  
  1574.  
  1575. {/block:iffooter2}
  1576.  
  1577. {block:iftags}
  1578. {block:HasTags}
  1579. <div class='tags'>
  1580. {block:Tags}
  1581. <a href="{TagURL}">#{Tag}</a>
  1582. {/block:Tags}
  1583. </div>
  1584. {/block:HasTags}
  1585. {/block:iftags}
  1586.  
  1587.  
  1588. <!--{block:Date}-->
  1589. <!--<div class="footer">-->
  1590. <!--<a href="{Permalink}">{TimeAgo}{block:NoteCount} ({NoteCountWithLabel}){/block:NoteCount}</a>-->
  1591. <!--{block:HasTags}<br>{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}-->
  1592. <!--{block:RebloggedFrom}<br><a href="{ReblogParentURL}">{lang:Reblogged from ReblogParentName}</a>{/block:RebloggedFrom}-->
  1593. <!--{block:ContentSource}<br><a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>{/block:ContentSource}-->
  1594. <!--</div>-->
  1595. <!--{/block:Date}-->
  1596.  
  1597. {block:PermalinkPage}
  1598. {block:NoteCount}
  1599. {block:ifnotcaptions}
  1600. {block:Caption}
  1601. <div class="caption insides">
  1602. {Caption}
  1603. </div>
  1604. {/block:Caption}
  1605. {/block:ifnotcaptions}
  1606. {block:ifnottags}
  1607. {block:HasTags}
  1608. <div class='tags'>
  1609. {block:Tags}
  1610. <a href="{TagURL}">#{Tag}</a>
  1611. {/block:Tags}
  1612. </div>
  1613. {/block:HasTags}
  1614. {/block:ifnottags}
  1615. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1616. {/block:NoteCount}
  1617. {/block:PermalinkPage}
  1618.  
  1619. </div>
  1620.  
  1621. {/block:Posts}
  1622.  
  1623. </div>
  1624. </div>
  1625.  
  1626. </div>
  1627.  
  1628. <script>
  1629. /* When the user clicks on the button,
  1630. toggle between hiding and showing the dropdown content */
  1631. function myFunction() {
  1632. document.getElementById("myDropdown").classList.toggle("show");
  1633. }
  1634.  
  1635. // Close the dropdown if the user clicks outside of it
  1636. window.onclick = function(event) {
  1637. if (!event.target.matches('.dropbtn')) {
  1638. var dropdowns = document.getElementsByClassName("dropdown-content");
  1639. var i;
  1640. for (i = 0; i < dropdowns.length; i++) {
  1641. var openDropdown = dropdowns[i];
  1642. if (openDropdown.classList.contains('show')) {
  1643. openDropdown.classList.remove('show');
  1644. }
  1645. }
  1646. }
  1647. }
  1648. </script>
  1649.  
  1650. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1651. <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1652. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1653. <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1654. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1655. <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1656.  
  1657. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script><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>
  1658. </body>
  1659. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!