API tools faq
paste
Advertisement
Sky_Blue

GAYASS theme

Sky_Blue
May 30th, 2020 (edited)
1,825
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. GAYASS THEME by @puella
  7.  
  8. this theme is for all the gayasses out there... shoutouts...
  9.  
  10. stan miku
  11.  
  12. if you want to change the colors of the animated rainbow title, delete the colors from 'raincol' and add in your own colors. a good website for picking color tints and shades is https://www.tutorialrepublic.com/html-reference/html-color-picker.php
  13.  
  14. ----->
  15.  
  16. {block:ifanimatedrainbowtitle}
  17. <script type="text/javascript">
  18. // <![CDATA[
  19. var speed=100; // speed colours change, 1 second = 1000
  20. var glow=0; // can be set from '0' for no glow, to 10
  21. var raincol=new Array("#7F7F7F", "#8B8B8B", "#989898", "#A5A5A5", "#B2B2B2", "#BFBFBF", "#CBCBCB", "#D8D8D8", "#E5E5E5", "#F2F2F2", "#FFFFFF"); // change the colours if you want to
  22. var alink="/"; // page to link text to (set to ="" for no link)
  23.  
  24. /*****************************/
  25.  
  26. var rainbow, raintxt, raincnt=0;
  27.  
  28. function addLoadEvent(funky) {
  29.  var oldonload=window.onload;
  30.  if (typeof(oldonload)!='function') window.onload=funky;
  31.  else window.onload=function() {
  32.    if (oldonload) oldonload();
  33.    funky();
  34.  }
  35. }
  36.  
  37. addLoadEvent(regenbogen);
  38.  
  39. function regenbogen() { if (document.getElementById) {
  40.  var i, rainbeau;
  41.  rainbow=document.getElementById("rainbow");
  42.  raintxt=rainbow.firstChild.nodeValue;
  43.  while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
  44.  for (i=0; i<raintxt.length; i++) {
  45.    rainbeau=document.createElement("span");
  46.    rainbeau.setAttribute("id", "rain"+i);
  47.    rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
  48.    if (alink) {
  49.      rainbeau.style.cursor="pointer";
  50.      rainbeau.onclick=function() { top.location.href=alink; }
  51.    }
  52.    rainbow.appendChild(rainbeau);
  53.  }
  54.  rainbow=setInterval ("raining()", speed);
  55. }}
  56.  
  57. function raining() {
  58.  var i, c;
  59.  for (i=0; i<raintxt.length; i++) {
  60.    c=raincol[(i+raincnt)%raincol.length];
  61.    document.getElementById("rain"+i).style.color=c;
  62.    if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  63.  }
  64.  raincnt++;
  65. }
  66. // ]]>
  67. </script>
  68. {/block:ifanimatedrainbowtitle}
  69.  
  70. {block:ifhoverrainbowlinks}
  71. <script type='text/javascript'>
  72. //<![CDATA[
  73. var rate = 50;
  74. if (document.getElementById)
  75. window.onerror=new Function("return true")
  76.  
  77. var objActive; // The object which event occured in
  78. var act = 0; // Flag during the action
  79. var elmH = 0; // Hue
  80. var elmS = 128; // Saturation
  81. var elmV = 255; // Value
  82. var clrOrg; // A color before the change
  83. var TimerID; // Timer ID
  84. if (document.all) {
  85. document.onmouseover = doRainbowAnchor;
  86. document.onmouseout = stopRainbowAnchor;
  87. }
  88. else if (document.getElementById) {
  89. document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  90. document.onmouseover = Mozilla_doRainbowAnchor;
  91. document.onmouseout = Mozilla_stopRainbowAnchor;
  92. }
  93. function doRainbow(obj)
  94. {
  95. if (act == 0) {
  96. act = 1;
  97. if (obj)
  98. objActive = obj;
  99. else
  100. objActive = event.srcElement;
  101. clrOrg = objActive.style.color;
  102. TimerID = setInterval("ChangeColor()",100);
  103. }
  104. }
  105. function stopRainbow()
  106. {
  107. if (act) {
  108. objActive.style.color = clrOrg;
  109. clearInterval(TimerID);
  110. act = 0;
  111. }
  112. }
  113. function doRainbowAnchor()
  114. {
  115. if (act == 0) {
  116. var obj = event.srcElement;
  117. while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  118. obj = obj.parentElement;
  119. if (obj.tagName == 'A' || obj.tagName == 'BODY')
  120. break;
  121. }
  122. if (obj.tagName == 'A' && obj.href != '') {
  123. objActive = obj;
  124. act = 1;
  125. clrOrg = objActive.style.color;
  126. TimerID = setInterval("ChangeColor()",100);
  127. }
  128. }
  129. }
  130. function stopRainbowAnchor()
  131. {
  132. if (act) {
  133. if (objActive.tagName == 'A') {
  134. objActive.style.color = clrOrg;
  135. clearInterval(TimerID);
  136. act = 0;
  137. }
  138. }
  139. }
  140. function Mozilla_doRainbowAnchor(e)
  141. {
  142. if (act == 0) {
  143. obj = e.target;
  144. while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  145. obj = obj.parentNode;
  146. if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  147. break;
  148. }
  149. if (obj.nodeName == 'A' && obj.href != '') {
  150. objActive = obj;
  151. act = 1;
  152. clrOrg = obj.style.color;
  153. TimerID = setInterval("ChangeColor()",100);
  154. }
  155. }
  156. }
  157. function Mozilla_stopRainbowAnchor(e)
  158. {
  159. if (act) {
  160. if (objActive.nodeName == 'A') {
  161. objActive.style.color = clrOrg;
  162. clearInterval(TimerID);
  163. act = 0;
  164. }
  165. }
  166. }
  167. function ChangeColor()
  168. {
  169. objActive.style.color = makeColor();
  170. }
  171. function makeColor()
  172. {
  173. // Don't you think Color Gamut to look like Rainbow?
  174. // HSVtoRGB
  175. if (elmS == 0) {
  176. elmR = elmV; elmG = elmV; elmB = elmV;
  177. }
  178. else {
  179. t1 = elmV;
  180. t2 = (255 - elmS) * elmV / 255;
  181. t3 = elmH % 60;
  182. t3 = (t1 - t2) * t3 / 60;
  183. if (elmH < 60) {
  184. elmR = t1; elmB = t2; elmG = t2 + t3;
  185. }
  186. else if (elmH < 120) {
  187. elmG = t1; elmB = t2; elmR = t1 - t3;
  188. }
  189. else if (elmH < 180) {
  190. elmG = t1; elmR = t2; elmB = t2 + t3;
  191. }
  192. else if (elmH < 240) {
  193. elmB = t1; elmR = t2; elmG = t1 - t3;
  194. }
  195. else if (elmH < 300) {
  196. elmB = t1; elmG = t2; elmR = t2 + t3;
  197. }
  198. else if (elmH < 360) {
  199. elmR = t1; elmG = t2; elmB = t1 - t3;
  200. }
  201. else {
  202. elmR = 0; elmG = 0; elmB = 0;
  203. }
  204. }
  205. elmR = Math.floor(elmR).toString(16);
  206. elmG = Math.floor(elmG).toString(16);
  207. elmB = Math.floor(elmB).toString(16);
  208. if (elmR.length == 1) elmR = "0" + elmR;
  209. if (elmG.length == 1) elmG = "0" + elmG;
  210. if (elmB.length == 1) elmB = "0" + elmB
  211. elmH = elmH + rate;
  212. if (elmH >= 360)
  213. elmH = 0;
  214. return '#' + elmR + elmG + elmB;
  215. }
  216. //]]>
  217. </script>
  218. {/block:ifhoverrainbowlinks}
  219.  
  220. <meta charset="utf-8">
  221. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  222. {block:Description}
  223. <meta name="description" content="{MetaDescription}" />
  224. {/block:Description}
  225.    
  226. <title>{Title}</title>
  227.        
  228. <link rel="shortcut icon" href="{image:favicon}">
  229. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  230. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  231.  
  232. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  233.  
  234. {block:ifsmoothscrolling}
  235. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  236. {/block:ifsmoothscrolling}
  237.  
  238. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  239. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  240. <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>
  241.  
  242. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  243.        
  244. <meta name="image:favicon" content=""/>
  245. <meta name="image:sidebar icon" content=""/>
  246. <meta name="image:sidebar img" content=""/>
  247. <meta name="image:background" content=""/>
  248. <meta name="image:container background" content=""/>
  249. <meta name="image:footer pixel" content=""/>
  250.  
  251. <meta name="color:background" content=""/>
  252. <meta name="color:container background" content=""/>
  253. <meta name="color:post background" content=""/>
  254. <meta name="color:description background" content=""/>
  255. <meta name="color:footer background" content=""/>
  256. <meta name="color:text" content=""/>
  257. <meta name="color:title" content=""/>
  258. <meta name="color:title hover" content=""/>
  259. <meta name="color:title glow" content=""/>
  260. <meta name="color:title glow hover" content=""/>
  261. <meta name="color:title outline" content=""/>
  262. <meta name="color:title outline hover" content=""/>
  263. <meta name="color:links" content=""/>
  264. <meta name="color:links hover" content=""/>
  265. <meta name="color:links glow" content=""/>
  266. <meta name="color:links glow hover" content=""/>
  267. <meta name="color:links outline" content=""/>
  268. <meta name="color:links outline hover" content=""/>
  269. <meta name="color:post border color" content=""/>
  270. <meta name="color:container border color" content=""/>
  271. <meta name="color:selection background" content=""/>
  272. <meta name="color:selection text" content=""/>
  273.  
  274. <meta name="if:animated rainbow title" content=""/>
  275. <meta name="if:static rainbow title" content=""/>
  276. <meta name="if:title glow" content=""/>
  277. <meta name="if:title outline" content=""/>
  278. <meta name="if:hover rainbow links" content=""/>
  279. <meta name="if:rainbow links" content=""/>
  280. <meta name="if:links glow" content=""/>
  281. <meta name="if:links outline" content=""/>
  282. <meta name="if:smooth scrolling" content=""/>
  283. <meta name="if:redirect" content=""/>
  284. <meta name="if:tags" content=""/>
  285. <meta name="if:hover blur" content=""/>
  286. <meta name="if:captions" content=""/>
  287. <meta name="if:rainbow borders" content=""/>
  288. <meta name="if:footer pixels" content=""/>
  289. <meta name="if:background cover" content=""/>
  290. <meta name="if:container background cover" content=""/>
  291. <meta name="if:round borders" content=""/>
  292. <meta name="if:fade in out" content="1"/>
  293.  
  294. <meta name="select:post border style" content="solid"/>
  295. <meta name="select:post border style" content="dashed"/>
  296. <meta name="select:post border style" content="dotted"/>
  297. <meta name="select:post border style" content="double"/>
  298. <meta name="select:post border style" content="inset"/>
  299. <meta name="select:post border style" content="outset"/>
  300. <meta name="select:post border style" content="groove"/>
  301. <meta name="select:post border style" content="ridge"/>
  302. <meta name="select:post border style" content="none"/>
  303. <meta name="select:container border style" content="solid"/>
  304. <meta name="select:container border style" content="dashed"/>
  305. <meta name="select:container border style" content="dotted"/>
  306. <meta name="select:container border style" content="double"/>
  307. <meta name="select:container border style" content="inset"/>
  308. <meta name="select:container border style" content="outset"/>
  309. <meta name="select:container border style" content="groove"/>
  310. <meta name="select:container border style" content="ridge"/>
  311. <meta name="select:container border style" content="none"/>
  312.  
  313. <meta name="text:font size" content="20"/>
  314. <meta name="text:font" content=""/>
  315. <meta name="text:title font" content=""/>
  316. <meta name="text:title" content="title"/>
  317. <meta name="text:title size" content"60"/>
  318. <meta name="text:description" content="description"/>
  319. <meta name="text:post border width" content="4"/>
  320. <meta name="text:container border width" content="4"/>
  321. <meta name="text:sidebar icon hover" content="hello :)"/>
  322. <meta name="text:next" content="next"/>
  323. <meta name="text:previous" content="back"/>
  324. <meta name="text:redirect" content="">        
  325.        
  326. <style type="text/css">
  327.  
  328. ::selection {
  329.     background: {color:selection background};
  330.     color:{color:selection text};
  331. }
  332.  
  333. ::-moz-selection {
  334.     background: {color:selection background};
  335.     color:{color:selection text};
  336. }
  337.  
  338. ::-webkit-scrollbar {
  339. width: 16px;
  340. height: 10px;
  341. }
  342.  
  343. ::-webkit-scrollbar-thumb {
  344. background-color: #fff;
  345. background-image: url(https://i.imgur.com/Qtm9Z60.png);
  346. border-top: 1px solid #bdbdbd;
  347. border-left: 1px solid #bdbdbd;
  348. border-right: 1px solid black;
  349. border-bottom: 1px solid black;
  350. }
  351.  
  352. ::-webkit-scrollbar-track {
  353. background-color: #fff;
  354. background-image: url(https://i.imgur.com/IGXGYKz.png);
  355. }
  356.  
  357. ::-webkit-scrollbar-button:vertical:increment {
  358. background-image: url(https://i.imgur.com/WhC8iy3.png);
  359. width: 14px;
  360. height: 16px;
  361. border-top: 1px solid #bdbdbd;
  362. border-left: 1px solid #bdbdbd;
  363. border-right: 1px solid black;
  364. border-bottom: 1px solid black;
  365. }
  366.  
  367. ::-webkit-scrollbar-button:vertical:decrement {
  368. background-image: url(https://i.imgur.com/fQ18mrR.png);
  369. border-top: 1px solid #bdbdbd;
  370. border-left: 1px solid #bdbdbd;
  371. border-right: 1px solid black;
  372. border-bottom: 1px solid black;
  373. width: 14px;
  374. height: 16px;
  375. }
  376.  
  377. #s-m-t-tooltip {
  378.     z-index:99999999999999999;
  379.     background: {color:post background};
  380.     max-width: 300px;
  381.     margin: 20px;
  382.     padding: 5px;
  383.     border:{text:post border width}px {select:post border style} {color:post border color};
  384.     color:{color:text};
  385.     {block:ifrainbowborders}
  386.     border: {text:post border width}px {select:post border style} transparent;
  387.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  388.     border-image-slice: 1;
  389.     {block:ifroundborders}
  390.     border-radius:5px;
  391.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  392.     {/block:ifroundborders}
  393.     {/block:ifrainbowborders}
  394.     {block:ifroundborders}
  395.     border-radius:5px;
  396.     {/block:ifroundborders}
  397. }
  398.  
  399. body {
  400.     margin:0px;
  401.     background:{color:background};
  402.     background-image: url('{image:background}');
  403.     {block:ifbackgroundcover}
  404.     background-size: cover;
  405.     {/block:ifbackgroundcover}
  406.     {block:ifnotbackgroundcover}
  407.     background-repeat:repeat;
  408.     {/block:ifnotbackgroundcover}
  409.     background-attachment: fixed;
  410.     font-family:{text:font};
  411.     font-size:{text:font size}px;
  412.     color:{color:text};
  413.     word-wrap:break-word;
  414. }
  415.  
  416. p{
  417.     margin:0 0 10px 0;
  418.     padding:0;
  419. }
  420.  
  421. pre {
  422.     white-space: pre-wrap;
  423.     white-space: -moz-pre-wrap;
  424.     white-space: -pre-wrap;
  425.     white-space: -o-pre-wrap;
  426.     word-wrap: break-word;
  427. }
  428.  
  429. a{
  430.     text-decoration:none;
  431.     {block:ifnotrainbowlinks}
  432.     color:{color:links};
  433.     {block:iflinksglow}
  434.     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};
  435.     {/block:iflinksglow}
  436.     {block:iflinksoutline}
  437.     text-shadow: -1px 0 {color:links outline}, 0 1px {color:links outline}, 1px 0 {color:links outline}, 0 -1px {color:links outline};
  438.     {/block:iflinksoutline}
  439.     transition:0.5s;
  440.     {/block:ifnotrainbowlinks}
  441.    
  442.     {block:ifrainbowlinks}
  443.     background-image: linear-gradient(to left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  444.     -webkit-background-clip:text;
  445.     color:transparent;
  446.     {/block:ifrainbowlinks}
  447.    
  448.     transition:0.5s;
  449. }
  450.  
  451. a:hover{
  452.     {block:ifnotrainbowlinks}
  453.     color:{color:links hover};
  454.     {block:iflinksglow}
  455.     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};
  456.     {/block:iflinksglow}
  457.     {block:iflinksoutline}
  458.     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};
  459.     {/block:iflinksoutline}
  460.     {block:ifnothoverrainbowlinks}
  461.     transition:0.5s;
  462.     {/block:ifnothoverrainbowlinks}
  463.     {/block:ifnotrainbowlinks}
  464.    
  465.     transition:0.5s;
  466.    
  467.     {block:ifhoverblur}
  468.     -webkit-filter: blur(.9px);
  469.     {/block:ifhoverblur}
  470.     cursor:help;
  471. }
  472.  
  473. a.tumblr_blog{
  474.     display:inline-block;
  475.     margin-bottom:0px;
  476. }
  477.  
  478. li{
  479.     margin-left:-15px;
  480. }
  481.  
  482. #wrapper{
  483.     width:fit-content;
  484.     height:fit-content;
  485.     width: -moz-fit-content;
  486.     height: -moz-fit-content;
  487.     position:fixed;
  488.     display: inline-block;
  489.     top: 0;
  490.     bottom: 0;
  491.     left: 0;
  492.     right: 0;
  493.     margin: auto;
  494.     {block:iffadeinout}
  495.     animation: fadeEffect 1s;
  496.     {block:iffadeinout}
  497. }
  498.  
  499. @keyframes fadeEffect {
  500.   from {opacity: 0;}
  501.   to {opacity: 1;}
  502. }
  503.  
  504. #title{
  505.     font-family:{text:title font};
  506.     font-size:{text:title size}px;
  507.     max-width:900px;
  508.     z-index:999999999999999999;
  509.     text-align:center;
  510.     margin-bottom:20px;
  511.     {block:ifstaticrainbowtitle}
  512.     background-image: linear-gradient(to left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  513.     -webkit-background-clip:text;
  514.     color:transparent;
  515.     {/block:ifstaticrainbowtitle}
  516.     {block:ifnotstaticrainbowtitle}
  517.     {block:ifnotanimatedrainbowtitle}
  518.     color:{color:title};
  519.     {block:iftitleglow}
  520.     text-shadow:0 0 2px {color:title glow},0 0 2px {color:title glow},0 0 2px {color:title glow}, 0 0 1px {color:title glow};
  521.     {/block:iftitleglow}
  522.     {block:iftitleoutline}
  523.     text-shadow: -1px 0 {color:title outline}, 0 1px {color:title outline}, 1px 0 {color:title outline}, 0 -1px {color:title outline};
  524.     {/block:iftitleoutline}
  525.     {/block:ifnotanimatedrainbowtitle}
  526.     {/block:ifnotstaticrainbowtitle}
  527. }
  528.  
  529. #title a{
  530.     {block:ifnotstaticrainbowtitle}
  531.     {block:ifnotanimatedrainbowtitle}
  532.     color:{color:title};
  533.     {block:iftitleglow}
  534.     text-shadow:0 0 2px {color:title glow},0 0 2px {color:title glow},0 0 2px {color:title glow}, 0 0 1px {color:title glow};
  535.     {/block:iftitleglow}
  536.     {block:iftitleoutline}
  537.     text-shadow: -1px 0 {color:title outline}, 0 1px {color:title outline}, 1px 0 {color:title outline}, 0 -1px {color:title outline};
  538.     {/block:iftitleoutline}
  539.     {/block:ifnotanimatedrainbowtitle}
  540.     {/block:ifnotstaticrainbowtitle}
  541. }
  542.  
  543. #title a:hover{
  544.     {block:ifnotstaticrainbowtitle}
  545.     {block:ifnotanimatedrainbowtitle}
  546.     color:{color:title hover};
  547.     {block:iftitleglow}
  548.     text-shadow:0 0 2px {color:title glow hover},0 0 2px {color:title glow hover},0 0 2px {color:title glow hover},0 0 1px {color:title glow hover};
  549.     {/block:iftitleglow}
  550.     {block:iftitleoutline}
  551.     text-shadow: -1px 0 {color:title outline hover}, 0 1px {color:title outline hover}, 1px 0 {color:title outline hover}, 0 -1px {color:title outline hover};
  552.     {/block:iftitleoutline}
  553.     {block:ifnothoverrainbowlinks}
  554.     transition:0.5s;
  555.     {/block:ifnothoverrainbowlinks}
  556.     {/block:ifnotanimatedrainbowtitle}
  557.     {/block:ifnotstaticrainbowtitle}
  558.    
  559.     {block:ifhoverblur}
  560.     -webkit-filter: blur(.9px);
  561.     {/block:ifhoverblur}
  562.     cursor:help;
  563. }
  564.  
  565. #container{
  566.     width:840px;
  567.     height:650px;
  568.     overflow:auto;
  569.     {block:ifroundborders}
  570.     border-radius:5px;
  571.     {/block:ifroundborders}
  572.     border:{text:container border width}px {select:container border style} {color:container border color};
  573.    
  574.     {block:ifrainbowborders}
  575.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  576.     border-image-slice: 1;
  577.     {block:ifroundborders}
  578.     border-radius:5px;
  579.     background-image:url(https://i.imgur.com/GK9LBut.gif), url({image:container background});
  580.     background-attachment: fixed;
  581.     {/block:ifroundborders}
  582.     {block:ifnotroundborders}
  583.     background-image: url('{image:container background}');
  584.     {/block:ifnotroundborders}
  585.     background-color:{color:container background};
  586.     {block:ifcontainerbackgroundcover}
  587.     background-size: cover;
  588.     {/block:ifcontainerbackgroundcover}
  589.     {block:ifnotcontainerbackgroundcover}
  590.     background-repeat:repeat;
  591.     {/block:ifnotcontainerbackgroundcover}
  592.     background-attachment:fixed;
  593.     {/block:ifrainbowborders}
  594.    
  595.     {block:ifnotrainbowborders}
  596.     background-color:{color:container background};
  597.     background-image: url('{image:container background}');
  598.     {block:ifcontainerbackgroundcover}
  599.     background-size: cover;
  600.     {/block:ifcontainerbackgroundcover}
  601.     {block:ifnotcontainerbackgroundcover}
  602.     background-repeat:repeat;
  603.     {/block:ifnotcontainerbackgroundcover}
  604.     background-attachment:fixed;
  605.     {/block:ifnotrainbowborders}
  606. }
  607.  
  608. #sidebar{
  609.     width:250px;
  610.     text-align:center;
  611.     position:fixed;
  612.     margin-top:50px;
  613.     margin-left:50px;
  614. }
  615.  
  616. #sidebar img{
  617.     max-width:100%;
  618.     box-sizing:border-box;
  619.     padding:10px;
  620.     {block:ifroundborders}
  621.     border-radius:5px;
  622.     {/block:ifroundborders}
  623.     background:{color:post background};
  624.     border:{text:post border width}px {select:post border style} {color:post border color};
  625.     {block:ifrainbowborders}
  626.     border: {text:post border width}px {select:post border style} transparent;
  627.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  628.     border-image-slice: 1;
  629.     {block:ifroundborders}
  630.     border-radius:5px;
  631.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  632.     {/block:ifroundborders}
  633.     {/block:ifrainbowborders}
  634. }
  635.  
  636. #sideimg{
  637.     height:259px;
  638.     display:flex;
  639.     justify-content:center;
  640.     align-items: center;
  641. }
  642.  
  643. #sideimg img{
  644.     border:none;
  645.     background:none;
  646.     padding:none;
  647.     border-radius:none;
  648.     max-height:259px;
  649.     max-width:100%;
  650. }
  651.  
  652. #description{
  653.     width:250px;
  654.     max-height:75px;
  655.     box-sizing:border-box;
  656.     margin-top:10px;
  657.     overflow:auto;
  658.     padding:10px;
  659.     text-align:center;
  660.     {block:ifroundborders}
  661.     border-radius:5px;
  662.     {/block:ifroundborders}
  663.     font-size:{text:font size}px;  
  664.     background:{color:description background};
  665.     border:{text:post border width}px {select:post border style} {color:post border color};
  666.     {block:ifrainbowborders}
  667.     border: {text:post border width}px {select:post border style} transparent;
  668.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  669.     border-image-slice: 1;
  670.     {block:ifroundborders}
  671.     border-radius:5px;
  672.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  673.     {/block:ifroundborders}
  674.     {/block:ifrainbowborders}
  675. }
  676.  
  677. .post{
  678.     width:400px;
  679.     margin:0 0 50px 0;
  680.     margin-top:50px;
  681.     margin-left:348px;
  682.     padding:10px;
  683.     {block:ifroundborders}
  684.     border-radius:5px;
  685.     {/block:ifroundborders}
  686.     background:{color:post background};
  687.     border:{text:post border width}px {select:post border style} {color:post border color};
  688.     {block:ifrainbowborders}
  689.     border: {text:post border width}px {select:post border style} transparent;
  690.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  691.     border-image-slice: 1;
  692.     {block:ifroundborders}
  693.     border-radius:5px;
  694.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  695.     {/block:ifroundborders}
  696.     {/block:ifrainbowborders}
  697. }
  698.  
  699.  
  700. #content{
  701.     padding-bottom: 80px;
  702. }
  703.  
  704. .post img{
  705.     max-width:100%;
  706.     height:auto;
  707.     {block:ifroundborders}
  708.     border-radius:5px;
  709.     {/block:ifroundborders}
  710. }
  711.  
  712. .post .footer{
  713.     margin:5px 0 0px 0;
  714.     text-align:center;
  715.     padding:10px;
  716.     {block:ifroundborders}
  717.     border-radius:5px;
  718.     {/block:ifroundborders}
  719.     background:{color:footer background};
  720.     border:{text:post border width}px {select:post border style} {color:post border color};
  721.     {block:ifrainbowborders}
  722.     border: {text:post border width}px {select:post border style} transparent;
  723.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  724.     border-image-slice: 1;
  725.     {block:ifroundborders}
  726.     border-radius:5px;
  727.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  728.     {/block:ifroundborders}
  729.     {/block:ifrainbowborders}
  730. }
  731.  
  732. #nav{
  733.     width:424px;
  734.     margin-left:350px;
  735. }
  736.  
  737. video{
  738.     max-width:100%;
  739.     height:auto!important;
  740. }
  741.  
  742. .video-container {
  743.     overflow: hidden;
  744. }
  745.        
  746. .video-container iframe,
  747. .video-container object,
  748. .video-container embed {
  749.     position: center;
  750.     max-width: 400px;
  751.     max-height: 400px;
  752. }
  753.        
  754. .video-wrapper {
  755.     max-width: 400px;
  756.     max-height: 400px;
  757.  
  758. }
  759.  
  760. .media{
  761.     text-align:center;
  762.     margin:0px 0 6px 0;
  763.     {block:ifroundborders}
  764.     border-radius:5px;
  765.     {/block:ifroundborders}
  766. }
  767.  
  768. .media:hover{
  769.     {block:ifhoverblur}
  770.     -webkit-filter: blur(.9px);
  771.     {/block:ifhoverblur}
  772. }
  773.  
  774. .caption{
  775.     margin-bottom:15px;
  776. }
  777.  
  778. .title{
  779.     font-size:25px;
  780.     font-weight:normal;
  781.     margin:10px;
  782.     text-align:center;
  783.     color:{color:text};
  784. }
  785.  
  786. h1, h2, h3, h4, h5, h6{
  787.     font-size:25px;
  788.     font-weight:normal;
  789.     margin:10px;
  790.     text-align:center;
  791.     color:{color:text};
  792. }
  793.  
  794. .quote{
  795.     font-weight:normal;
  796.     font-size:{text:font size};
  797.     font-style:italic;
  798.     margin:0 0 10px 0;
  799. }
  800.  
  801. .question{
  802.     padding:10px 10px 0 10px;
  803.     border:0.5px dotted {color:post border color};
  804.     {block:ifrainbowborders}
  805.     border: {text:post border width}px {select:post border style} transparent;
  806.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  807.     border-image-slice: 1;
  808.     {block:ifroundborders}
  809.     border-radius:5px;
  810.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  811.     {/block:ifroundborders}
  812.     {/block:ifrainbowborders}
  813.     {block:ifroundborders}
  814.     border-radius:5px;
  815.     {/block:ifroundborders}
  816. }
  817.  
  818. blockquote{
  819.     margin:0 0 10px 10px;
  820.     padding:0 0 0 10px;
  821.     border-radius:5px;
  822.     border-left:dotted 0.5px {color:text};
  823. }
  824.  
  825. ol.notes{
  826.     list-style-type:none;
  827.     padding:7px;
  828.     margin-top:30px;
  829.     text-align:left;
  830. }
  831.  
  832. ol.notes li.note img{
  833.     width:10px;
  834.     height:10px;
  835.     margin-right:10px;
  836. }
  837.  
  838. ol.notes li.note{
  839.     margin:0px;
  840.     margin-left:5px;
  841. }
  842.  
  843. .tags {
  844.     text-align:center;
  845.     max-height:0px;
  846.     opacity:0;
  847.     -webkit-transition: all 0.7s ease;
  848.     transition: all 0.7s ease;
  849.     -moz-transition: all 0.7s ease;
  850.     -o-transition: all 0.7s ease;
  851. }    
  852.  
  853. .post:hover .tags{
  854.     {block:ifroundborders}
  855.     border-radius:5px;
  856.     {/block:ifroundborders}
  857.     margin-top:10px;
  858.     padding:10px;
  859.     background:{color:footer background};
  860.     border:{text:post border width}px {select:post border style} {color:post border color};
  861.     {block:ifrainbowborders}
  862.     border: {text:post border width}px {select:post border style} transparent;
  863.     border-image: linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  864.     border-image-slice: 1;
  865.     {block:ifroundborders}
  866.     border-radius:5px;
  867.     background-image:url(https://i.imgur.com/GK9LBut.gif), url();
  868.     {/block:ifroundborders}
  869.     {/block:ifrainbowborders}
  870.     opacity:1;
  871.     max-height:300px;
  872.     -webkit-transition: all 0.7s ease;
  873.     transition: all 0.7s ease;
  874.     -moz-transition: all 0.7s ease;
  875.     -o-transition: all 0.7s ease;
  876.     text-align:center;
  877. }
  878.  
  879. {block:ifnotrainbowlinks}
  880. .heartbeat:hover{
  881.     animation: heartbeat 1s infinite;
  882. }
  883.  
  884. @keyframes heartbeat
  885. {
  886.   0%
  887.   {
  888.     transform: scale( .90 );
  889.   }
  890.   20%
  891.   {
  892.     transform: scale( 1 );
  893.   }
  894.   40%
  895.   {
  896.     transform: scale( .90 );
  897.   }
  898.   60%
  899.   {
  900.     transform: scale( 1 );
  901.   }
  902.   80%
  903.   {
  904.     transform: scale( .90 );
  905.   }
  906.   100%
  907.   {
  908.     transform: scale( .90 );
  909.   }
  910. }
  911. {/block:ifnotrainbowlinks}
  912.  
  913. {CustomCSS}
  914. </style>
  915. </head>
  916.  
  917. <body>
  918.  
  919. {block:ifredirect}
  920. {block:IndexPage}
  921. <script type="text/javascript">
  922.     var url = location.href;
  923.     if (url == "{BlogURL}") {
  924.         window.location = "{BlogURL}tagged/{text:redirect}";
  925.     }
  926. </script>
  927. {/block:IndexPage}
  928. {/block:ifredirect}
  929.  
  930. <div id="wrapper">
  931.  
  932. {block:ifanimatedrainbowtitle}
  933. <div id="title"><span id="rainbow">{text:title}</span></div>
  934. {/block:ifanimatedrainbowtitle}
  935. {block:ifnotanimatedrainbowtitle}
  936. <div id="title"><a href="/">{text:title}</a></div>
  937. {/block:ifnotanimatedrainbowtitle}
  938.  
  939. <div id="container">
  940.  
  941. <div id="sidebar">
  942. <a title="{text:sidebar icon hover}" href="/"><img src="{image:sidebar icon}"></a>
  943. <div id="description">
  944. {text:description}
  945. </div>
  946. <div id="sideimg"><img src="{image:sidebar img}"></div>
  947. </div>
  948.  
  949. <div id="content">
  950. {block:Posts}
  951.  
  952. <div class="post">
  953.  
  954. {block:Text}
  955. {block:Title}
  956. <div class="title">{Title}</div>
  957. {/block:Title}
  958. {Body}
  959. {/block:Text}
  960.  
  961. {block:Photo}
  962. <div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  963. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  964. {/block:Photo}
  965.  
  966. {block:Photoset}
  967. <div class="media">{Photoset}</div>
  968. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  969. {/block:Photoset}
  970.  
  971. {block:Quote}
  972. <div class="quote">"{Quote}"</div>
  973. {block:Source}
  974. <div class="quotesource">{Source}</div>
  975. {/block:Source}
  976. {/block:Quote}
  977.  
  978. {block:Link}
  979. <div class="title"><a href="{URL}">{Name}</a></div>
  980. {block:Description}
  981. <div class="description">{Description}</div>
  982. {/block:Description}
  983. {/block:Link}
  984.  
  985. {block:Chat}
  986. {block:Title}
  987. <div class="title">{Title}</div>
  988. {/block:Title}
  989.  
  990. {block:Lines}
  991. <div class="{Alt} user_{UserNumber}">
  992. {block:Label}
  993. <b>{Label}</b>{/block:Label}
  994. &nbsp;{Line}
  995. </div>
  996. {/block:Lines}
  997. {/block:Chat}
  998.  
  999. {block:Video}
  1000. <div class="media" style="margin-bottom:10px"><div class="video-wrapper">
  1001. <div class="video-container">{video-400}</div>
  1002. </div></div>
  1003. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1004. {/block:Video}
  1005.  
  1006. {block:Audio}
  1007. <div class="media" style="margin-bottom:-82px">
  1008. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-400}</div></div>{/block:AudioEmbed}
  1009. </div>
  1010. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  1011. {/block:Audio}
  1012.                
  1013. {block:Answer}
  1014. <div class="question" style="font-style:italic;">{Asker}: {Question}</div>
  1015. <div class="caption">{Answer}</div>
  1016. {/block:Answer}
  1017.  
  1018. {block:Date}
  1019. <div class="footer">
  1020. {block:iffooterpixels}<img src="{image:footer pixel}">{/block:iffooterpixels} <a href="{Permalink}" title="{notecount}%">{24hourwithzero}:{minutes}</a> {block:iffooterpixels}<img src="{image:footer pixel}">{/block:iffooterpixels}
  1021.  
  1022. <!-- {block:NoRebloggedFrom}
  1023. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1024. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  1025. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1026. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1027. {/block:ContentSource}
  1028.  
  1029. </div>
  1030.  
  1031. {block:iftags}
  1032. {block:HasTags}<div class="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  1033. {/block:iftags}
  1034.  
  1035. {block:PermalinkPage}
  1036. {block:NoteCount}
  1037. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1038. {/block:NoteCount}
  1039. {/block:PermalinkPage}
  1040. {/block:Date}
  1041.  
  1042. </div>
  1043. {/block:Posts}
  1044.  
  1045. {block:Pagination}
  1046. <div id="nav">
  1047. <div style="float:left;">{block:PreviousPage}<a href="{PreviousPage}">{text:previous}</a>{/block:PreviousPage}</div>
  1048.  
  1049. <div style="float:right;">{block:NextPage}<a href="{NextPage}">{text:next}</a>{/block:NextPage}</div>
  1050. </div>
  1051. {/block:Pagination}
  1052. </div>
  1053. </div>
  1054. </div>
  1055.  
  1056.  
  1057.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  1058.         <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  1059.  
  1060. <a href="https://puella.tumblr.com" title="by @puella" style="position:fixed;left:12px;bottom:-12px;font-size:20px;"><div class="heartbeat"><3</div>️</a>
  1061.  
  1062.     </body>
  1063. </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!