API tools faq
paste
Advertisement
Sky_Blue

GOD-ISH theme

Sky_Blue
May 8th, 2022 (edited)
1,600
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. GOD-ISH theme by @mirainikki / @puella
  7.  
  8. umm.... listen to god-ish by pinocchio-p -_-
  9.  
  10. ----->
  11.  
  12. {block:ifblobs}
  13. <script>
  14. // <![CDATA[
  15. var colour="{color:blob color}"; // what colour are the blobs
  16. var speed=66; // speed of animation, lower is faster
  17. var blobs=20; // how many blobs are in the jar
  18. var charc="{text:blob}"; // a blob - can be changed to charc='hello' or charc='*' for a different effect
  19.  
  20. /***************************\
  21. * Blobs in a Jar Effect *
  22. * (c)2012 mf2fm web-design *
  23. * http://www.mf2fm.com/rv *
  24. * DON'T EDIT BELOW THIS BOX *
  25. \***************************/
  26.  
  27. window.onload=fill_the_jar;
  28. var div;
  29. var xpos=new Array();
  30. var ypos=new Array();
  31. var zpos=new Array();
  32. var dx=new Array();
  33. var dy=new Array();
  34. var dz=new Array();
  35. var blob=new Array();
  36. var swide=800;
  37. var shigh=600;
  38. function fill_the_jar() {
  39. var i, dvs;
  40. div=document.createElement('div');
  41. dvs=div.style;
  42. dvs.position='fixed';
  43. dvs.left='0px';
  44. dvs.top='0px';
  45. dvs.width='1px';
  46. dvs.height='1px';
  47. document.body.appendChild(div);
  48. set_width();
  49. for (i=0; i<blobs; i++) {
  50. add_blob(i);
  51. jamjar(i);
  52. }
  53. }
  54.  
  55. function add_blob(ref) {
  56. var dv, sy;
  57. dv=document.createElement('div');
  58. dv.appendChild(document.createTextNode(charc));
  59. sy=dv.style;
  60. sy.position='absolute';
  61. sy.textAlign="center";
  62. if (navigator.appName=="Microsoft Internet Explorer") {
  63. sy.fontSize="10px";
  64. sy.width="100px";
  65. sy.height="100px";
  66. sy.paddingTop="40px";
  67. sy.color=colour;
  68. }
  69. else sy.color='rgba(0,0,0,0)';
  70. ypos[ref]=Math.floor(shigh*Math.random());
  71. dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  72. xpos[ref]=Math.floor(swide*Math.random());
  73. dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  74. zpos[ref]=Math.random()*20;
  75. dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
  76. blob[ref]=dv;
  77. div.appendChild(blob[ref]);
  78. set_blob(ref);
  79. }
  80. function rejig(ref, xy) {
  81. if (xy=='y') {
  82. dx[ref]=(0.5+Math.random())*sign(dx[ref]);
  83. dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  84. }
  85. else {
  86. dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  87. dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  88. }
  89. }
  90. function sign(a) {
  91. if (a<0) return (-2);
  92. else if (a>0) return (2);
  93. else return (0);
  94. }
  95. function set_blob(ref) {
  96. var sy;
  97. sy=blob[ref].style;
  98. sy.top=ypos[ref]+'px';
  99. sy.left=xpos[ref]+'px';
  100. if (navigator.appName=="Microsoft Internet Explorer") {
  101. sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
  102. sy.fontSize=30-zpos[ref]+"px";
  103. }
  104. else {
  105. sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
  106. sy.fontSize=40+zpos[ref]+'px';
  107. }
  108. }
  109. function jamjar(ref) {
  110. if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
  111. ypos[ref]+=dy[ref];
  112. if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
  113. xpos[ref]+=dx[ref];
  114. if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
  115. zpos[ref]+=dz[ref];
  116. set_blob(ref);
  117. setTimeout("jamjar("+ref+")", speed);
  118. }
  119.  
  120. window.onresize=set_width;
  121. function set_width() {
  122. var sw_min=999999;
  123. var sh_min=999999;
  124. if (document.documentElement && document.documentElement.clientWidth) {
  125. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  126. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  127. }
  128. if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  129. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  130. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  131. }
  132. if (document.body.clientWidth) {
  133. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  134. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  135. }
  136. if (sw_min==999999 || sh_min==999999) {
  137. sw_min=800;
  138. sh_min=600;
  139. }
  140. swide=sw_min;
  141. shigh=sh_min;
  142. }
  143. // ]]>
  144. </script>
  145. {/block:ifblobs}
  146.  
  147. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  148.  
  149. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  150.  
  151. <meta charset="utf-8">
  152. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  153. {block:Description}
  154. <meta name="description" content="{MetaDescription}" />
  155. {/block:Description}
  156.    
  157. <title>{Title}</title>
  158.        
  159. <link rel="shortcut icon" href="{image:favicon}">
  160. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  161. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  162.  
  163. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  164.  
  165. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  166.  
  167. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  168. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  169. <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>
  170.  
  171. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  172.  
  173. <link rel="stylesheet" href="https://static.tumblr.com/p6yopnt/PxJr3vu6k/scrollbar.css">
  174.  
  175. <script>
  176. function gatherData(images, arr) {
  177.   for (let i = 0; i < images.length; i++) {
  178.    let currentData = {
  179.      "width": images[i].getAttribute('data-width'),
  180.      "height": images[i].getAttribute('data-height'),
  181.      "low_res": images[i].getAttribute('data-lowres'),
  182.      "high_res": images[i].getAttribute('data-highres')
  183.    };
  184.    arr.push(currentData);
  185.  }
  186. }
  187. function getIndex(elem) {
  188.  let i = 0;
  189.  while( (elem = elem.previousElementSibling) != null ) i++;
  190.  return i;
  191. }
  192. function lightbox(elem) {
  193.  let currentPhotoset = elem.parentNode;
  194.  let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  195.  let data = [];
  196.  gatherData(photosetPhotos, data);
  197.  Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  198. }
  199. </script>
  200.  
  201. <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">
  202.        
  203. <meta name="image:favicon" content=""/>
  204. <meta name="image:icon" content="https://64.media.tumblr.com/6520604c077856689112f73e36d36899/16578c11625771cf-ea/s2048x3072/f6c8d0a3d0d4fa43aa6aad2fe846084144b94e82.jpg"/>
  205. <meta name="image:background" content="https://64.media.tumblr.com/8d96a1a1257500666de011e757f31557/16578c11625771cf-88/s2048x3072/4b90424d1ec33b55be65a2af07984043c7921c63.png"/>
  206. <meta name="image:post background" content=""/>
  207.  
  208. <meta name="color:border" content="#fff"/>
  209. <meta name="color:inner border" content="#fff"/>
  210. <meta name="color:background" content="#c0c0c0"/>
  211. <meta name="color:post background" content="#000"/>
  212. <meta name="color:text" content="#fff"/>
  213. <meta name="color:links" content="#000"/>
  214. <meta name="color:links hover" content="#fff"/>
  215. <meta name="color:links glow" content=""/>
  216. <meta name="color:links glow hover" content=""/>
  217. <meta name="color:links outline" content="#fff"/>
  218. <meta name="color:links outline hover" content="#000"/>
  219. <meta name="color:title" content="#000"/>
  220. <meta name="color:title hover" content="#fff"/>
  221. <meta name="color:title glow" content=""/>
  222. <meta name="color:title glow hover" content=""/>
  223. <meta name="color:title outline" content="#fff"/>
  224. <meta name="color:title outline hover" content="#000"/>
  225. <meta name="color:box glow" content="#fff"/>
  226. <meta name="color:tooltip background" content="#000"/>
  227. <meta name="color:tooltip text" content="#fff"/>
  228. <meta name="color:selection background" content="#fff"/>
  229. <meta name="color:selection text" content="#000"/>
  230. <meta name="color:blob color" content="#000"/>
  231.  
  232. <meta name="if:redirect" content=""/>
  233. <meta name="if:box glow" content=""/>
  234. <meta name="if:links glow" content=""/>
  235. <meta name="if:links outline" content="1"/>
  236. <meta name="if:title glow" content=""/>
  237. <meta name="if:title outline" content="1"/>
  238. <meta name="if:hover blur" content=""/>
  239. <meta name="if:captions" content="1"/>
  240. <meta name="if:round borders" content=""/>
  241. <meta name="if:background cover" content=""/>
  242. <meta name="if:blobs" content="1"/>
  243.  
  244. <meta name="select:border style" content="solid"/>
  245. <meta name="select:border style" content="dashed"/>
  246. <meta name="select:border style" content="dotted"/>
  247. <meta name="select:border style" content="double"/>
  248. <meta name="select:border style" content="inset"/>
  249. <meta name="select:border style" content="outset"/>
  250. <meta name="select:border style" content="groove"/>
  251. <meta name="select:border style" content="ridge"/>
  252.  
  253. <meta name="select:inner border style" content="solid"/>
  254. <meta name="select:inner border style" content="dashed"/>
  255. <meta name="select:inner border style" content="dotted"/>
  256. <meta name="select:inner border style" content="double"/>
  257. <meta name="select:inner border style" content="inset"/>
  258. <meta name="select:inner border style" content="outset"/>
  259. <meta name="select:inner border style" content="groove"/>
  260. <meta name="select:inner border style" content="ridge"/>
  261.  
  262. <meta name="text:font size" content="20"/>
  263. <meta name="text:font" content="arial"/>
  264. <meta name="text:title size" content="45"/>
  265. <meta name="text:title font" content="aachen"/>
  266. <meta name="text:title" content="oh my god!"/>
  267. <meta name="text:border width" content="0"/>
  268. <meta name="text:link separator" content="⋅"/>
  269. <meta name="text:link 1" content="eins"/>
  270. <meta name="text:link 1 url" content=""/>
  271. <meta name="text:link 2" content="zwei"/>
  272. <meta name="text:link 2 url" content=""/>
  273. <meta name="text:link 3" content="drei"/>
  274. <meta name="text:link 3 url" content=""/>
  275. <meta name="text:link 4" content="vier"/>
  276. <meta name="text:link 4 url" content=""/>
  277. <meta name="text:blob" content="✟"/>
  278. <meta name="text:redirect" content=""/>  
  279.  
  280. </head>
  281.        
  282. <style type="text/css">
  283. .npf_row {
  284.     margin: 0 !important;
  285. }
  286.  
  287. .tmblr-full img{
  288.     border:0.5px {select:inner border style} {color:inner border} !important;
  289.     box-sizing:border-box !important;
  290. }
  291.  
  292. ::selection {
  293. background: {color:selection background};
  294. color:{color:selection text};
  295. }
  296.  
  297. ::-moz-selection {
  298. background: {color:selection background};
  299. color:{color:selection text};
  300. }
  301.  
  302. #s-m-t-tooltip{
  303.     margin: 20px 0 0 20px;
  304.     padding: 5px;
  305.     max-width: 300px;
  306.     background-color:{color:tooltip background};
  307.     color:{color:tooltip text};
  308.     border:{text:border width}px {select:border style} {color:border};
  309.     z-index: 9999;
  310.     {block:ifroundborders}
  311.     border-radius:10px;
  312.     {/block:ifroundborders}
  313. }
  314.  
  315. @font-face{
  316.     font-family: 'Magica';
  317.     src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  318. }
  319. @font-face{
  320.     font-family: 'DEAD END';
  321.     src: url(https://static.tumblr.com/pvnotae/DzVqdg2j5/dead_end.ttf);
  322. }
  323. @font-face{
  324.     font-family: 'Decibil';
  325.     src: url(https://static.tumblr.com/pvnotae/kwwqdg2pw/decibel_2.ttf);
  326. }
  327. @font-face{
  328.     font-family: 'Aachen';
  329.     src: url(https://static.tumblr.com/pvnotae/YIoqdg2yp/aachen-bold-opentype.otf);
  330. }
  331.  
  332. body {
  333.     margin:0px;
  334.     background:{color:background};
  335.     background-image: url('{image:background}');
  336.     {block:ifbackgroundcover}
  337.     background-size: cover;
  338.     {/block:ifbackgroundcover}
  339.     {block:ifnotbackgroundcover}
  340.     background-repeat:repeat;
  341.     {/block:ifnotbackgroundcover}
  342.     background-attachment:fixed;
  343.     font-family:{text:font};
  344.     font-size:{text:font size}px;
  345.     color:{color:text};
  346. }
  347.  
  348. p{
  349.     margin:5px 0px;
  350.     padding:0;
  351. }
  352.  
  353. pre {
  354.     white-space: pre-wrap;
  355.     white-space: -moz-pre-wrap;
  356.     white-space: -pre-wrap;
  357.     white-space: -o-pre-wrap;
  358.     word-wrap: break-word;
  359. }
  360.  
  361. a{
  362.     color:{color:links};
  363.     {block:iflinksglow}
  364.     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};
  365.     {/block:iflinksglow}
  366.     {block:iflinksoutline}
  367.     text-shadow: -1px 0 {color:links outline}, 0 1px {color:links outline}, 1px 0 {color:links outline}, 0 -1px {color:links outline};
  368.     {/block:iflinksoutline}
  369.     text-decoration:none;
  370.     transition:0.5s;
  371. }
  372.  
  373. a:hover{
  374.     color:{color:links hover};
  375.     {block:iflinksglow}
  376.     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};
  377.     {/block:iflinksglow}
  378.     {block:iflinksoutline}
  379.     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};
  380.     {/block:iflinksoutline}
  381.     {block:ifhoverblur}
  382.     -webkit-filter: blur(.9px);
  383.     {/block:ifhoverblur}
  384.     cursor:help;
  385. }
  386.  
  387. a.tumblr_blog{
  388.     display:inline-block;
  389.     margin-bottom:5px;
  390. }
  391.  
  392. li{
  393.     margin-left:-15px;
  394. }
  395.  
  396. #wrapper{
  397.     width:calc(825px + ({text:border width}px * 2));
  398.     margin:auto;
  399.     animation:fadeEffect 1s;
  400. }
  401.  
  402. @keyframes fadeEffect {
  403.   from {opacity: 0;}
  404.   to {opacity: 1;}
  405. }
  406.  
  407. #sidebar{
  408.     position:fixed;
  409.     display: flex;  
  410.     flex-direction:column;
  411.     height:fit-content;
  412.     height:-moz-fit-content;
  413.     top: 0;
  414.     bottom: 0;
  415.     margin: auto;
  416. }
  417.  
  418. #content{
  419.     float:right;
  420. }
  421.  
  422. #title{
  423.     width:275px;
  424.     font-size:{text:title size}px;
  425.     text-align:center;
  426.     padding-bottom:5px;
  427.     margin-top:calc(-{text:title size}px + -7.5px);
  428.     font-family:{text:title font};
  429. }
  430.  
  431. #title a{
  432.     color:{color:title};
  433.     {block:iftitleglow}
  434.     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};
  435.     {/block:iftitleglow}
  436.     {block:iftitleoutline}
  437.     text-shadow: -1px 0 {color:title outline}, 0 1px {color:title outline}, 1px 0 {color:title outline}, 0 -1px {color:title outline};
  438.     {/block:iftitleoutline}
  439. }
  440.  
  441. #title a:hover{
  442.     color:{color:title hover};
  443.     {block:iftitleglow}
  444.     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};
  445.     {/block:iftitleglow}
  446.     {block:iftitleoutline}
  447.     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};
  448.     {/block:iftitleoutline}
  449.     transition:0.5s;
  450.     cursor:help;
  451. }
  452.  
  453. #icon{
  454.     border:{text:border width}px {select:border style} {color:border};
  455.     width:275px;
  456.     {block:ifroundborders}
  457.     border-radius:10px;
  458.     {/block:ifroundborders}
  459.     {block:ifboxglow}
  460.     -webkit-box-shadow:0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  461.     -moz-box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  462.     box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  463.     {/block:ifboxglow}
  464.     background:{color:post background};
  465.     background-image:url('{image:post background}');
  466. }
  467.  
  468. #icon img{
  469.     display:block;
  470.     box-sizing:border-box;
  471.     border:0.5px {select:inner border style} {color:inner border};
  472.     {block:ifroundborders}
  473.     border-radius:10px;
  474.     {/block:ifroundborders}
  475. }
  476.  
  477. #hover{
  478.     max-height:0px;
  479.     text-align:center;
  480.     opacity:0;
  481.     -webkit-transition: all 0.7s ease;
  482.     transition: all 0.7s ease;
  483.     -moz-transition: all 0.7s ease;
  484.      -o-transition: all 0.7s ease;
  485.      overflow:hidden;
  486. }
  487.  
  488. #icon:hover #hover{
  489.     opacity:1;
  490.     max-height:500px;
  491.     -webkit-transition: all 0.7s ease;
  492.     transition: all 0.7s ease;
  493.     -moz-transition: all 0.7s ease;
  494.     -o-transition: all 0.7s ease;
  495. }
  496.  
  497. #links{
  498.     border-left:0.5px {select:inner border style} {color:inner border};
  499.     border-right:0.5px {select:inner border style} {color:inner border};
  500. }
  501.  
  502. .post{
  503.     width:500px;
  504.     margin:50px auto;
  505.     overflow:hidden;
  506.     border: {text:border width}px {select:border style} {color:border};
  507.     background:{color:post background};
  508.     background-image:url('{image:post background}');
  509.     box-sizing:border-box;
  510.     {block:ifroundborders}
  511.     border-radius:10px;
  512.     {/block:ifroundborders}
  513.     {block:ifboxglow}
  514.     -webkit-box-shadow:0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  515.     -moz-box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  516.     box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  517.     {/block:ifboxglow}
  518. }
  519.  
  520. .footer{
  521.     text-align:center;
  522.     margin:auto;
  523.     margin-top:20px;
  524.     border-left:0.5px {select:inner border style} {color:inner border};
  525.     border-right:0.5px {select:inner border style} {color:inner border};
  526.     width:200px;
  527. }
  528.  
  529. .answer .embed_iframe{
  530.     width: 340px;
  531. }
  532.  
  533. .nfp_row{
  534.     margin-left:0px;
  535.     margin-right:0px;
  536. }
  537.  
  538. #nav{
  539.     margin-bottom:50px;
  540.     text-align:center;
  541.     display:flex;
  542.     justify-content:space-evenly;
  543.     font-size:{text:title size}px;
  544. }
  545.  
  546. #navbutton{
  547.     padding:20px;
  548.     background-color:{color:post background};
  549.     border: {text:border width}px {select:border style} {color:border};
  550.     {block:ifroundborders}
  551.     border-radius:10px;
  552.     {/block:ifroundborders}
  553.     background-image:url('{image:post background}');
  554.     {block:ifboxglow}
  555.     -webkit-box-shadow:0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  556.     -moz-box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  557.     box-shadow: 0px 0px 10px 5px rgba({RGBcolor:box glow},0.5);
  558.     {/block:ifboxglow}
  559. }
  560.  
  561. video{
  562.     max-width:100%;
  563.     height:auto!important;
  564. }
  565.  
  566. .video-container {
  567.     overflow: hidden;
  568.     {block:ifroundborders}
  569.     border-radius:10px;
  570.     {/block:ifroundborders}
  571. }
  572.  
  573. .video-container iframe,
  574. .video-container object,
  575. .video-container embed {
  576.     position: center;
  577.     max-width: 460px;
  578.     max-height: 460px;
  579.     border:0.5px {select:inner border style} {color:inner border};
  580.     box-sizing:border-box;
  581.     {block:ifroundborders}
  582.     border-radius:10px;
  583.     {/block:ifroundborders}
  584. }
  585.  
  586. .video-wrapper {
  587.     max-width: 460px;
  588.     max-height: 460px;
  589.     {block:ifroundborders}
  590.     border-radius:10px;
  591.     {/block:ifroundborders}
  592.  
  593. }
  594.  
  595. iframe.tumblr_audio_player {
  596.     height: 85px;
  597.     border:0.5px {select:inner border style} {color:inner border};
  598.     box-sizing:border-box;
  599.     {block:ifroundborders}
  600.     border-radius:10px;
  601.     {/block:ifroundborders}
  602.    
  603. }
  604.  
  605. .media{
  606.     margin:0 0 0px 0;
  607.     text-align:center;
  608.     {block:ifroundborders}
  609.     border-radius:10px;
  610.     {/block:ifroundborders}
  611. }
  612.  
  613. .media:hover{
  614.     {block:ifhoverblur}
  615.     -webkit-filter: blur(.9px);
  616.     {/block:ifhoverblur}
  617. }
  618.  
  619. .media img{
  620.     border:0.5px {select:inner border style} {color:inner border};
  621.     display:block;
  622.     box-sizing:border-box;
  623.     {block:ifroundborders}
  624.     border-radius:10px;
  625.     {/block:ifroundborders}
  626. }
  627.  
  628. .title{
  629.     font-size:calc({text:font size}px * 2 - 10px);
  630.     font-weight:bold;
  631.     margin:10px 0 10px 0;
  632.     color:{color:text};
  633. }
  634.  
  635. h1, h2, h3, h4, h5, h6{
  636.     font-size:calc({text:font size}px * 2 - 10px);
  637.     font-weight:bold;
  638.     margin:10px 0 10px 0;
  639.     color:{color:text};
  640. }
  641.  
  642. .quote{
  643.     font-weight:normal;
  644.     font-size:{text:font size};
  645.     font-style:italic;
  646.     margin:0 0 10px 0;
  647. }
  648.  
  649. .question {
  650.     position: relative;
  651.     border:0.5px {select:inner border style} {color:inner border};
  652.     background-color:{color:post background};
  653.     {block:ifroundborders}
  654.     border-radius:10px;
  655.     {/block:ifroundborders}
  656.     padding: 20px;
  657.     margin-left:20px;
  658.     width:100%;
  659.     word-break: break-all;
  660. }
  661.  
  662. .asker{
  663.     display:flex;
  664.     align-items: flex-start;
  665. }
  666.  
  667. .asker img{
  668.     border:0.5px {select:inner border style} {color:inner border};
  669.     {block:ifroundborders}
  670.     border-radius:10px;
  671.     {/block:ifroundborders}
  672. }
  673.  
  674. .answer{
  675.     position: relative;
  676.     border:0.5px {select:inner border style} {color:inner border};
  677.     background-color:{color:post background};
  678.     {block:ifroundborders}
  679.     border-radius:10px;
  680.     {/block:ifroundborders}
  681.     padding: 20px;
  682.     margin-right:20px;
  683.     width:100%;
  684.     word-break: break-all;
  685. }
  686.  
  687. .answerer{
  688.     margin-top:20px;
  689.     display:flex;
  690.     align-items: flex-start;
  691. }
  692.  
  693. .answerer img{
  694.     border:0.5px {select:inner border style} {color:inner border};
  695.     {block:ifroundborders}
  696.     border-radius:10px;
  697.     {/block:ifroundborders}
  698. }
  699.  
  700. .caption{
  701.     margin-top:10px;
  702. }
  703.  
  704. blockquote{
  705.     margin:0px;
  706.     padding-left:10px;
  707.     border-left:0.5px {select:inner border style} {color:inner border};
  708. }
  709.  
  710. blockquote img{
  711.     max-width:100%;
  712.     height:auto;
  713.     object-fit:cover;
  714.     display: block;
  715.     border:0.5px {select:inner border style} {color:inner border};
  716.     box-sizing:border-box;
  717.     {block:ifroundborders}
  718.     border-radius:10px;
  719.     {/block:ifroundborders}
  720. }
  721.  
  722. img{
  723.     max-width:100%;
  724.     height:auto;
  725.     {block:ifroundborders}
  726.     border-radius:10px;
  727.     {/block:ifroundborders}
  728. }
  729.  
  730. ol.notes{
  731.     border:0.5px {select:inner border style} {color:inner border};
  732.     background-color:{color:post background};
  733.     {block:ifroundborders}
  734.     border-radius:10px;
  735.     {/block:ifroundborders}
  736.     margin-top:20px;
  737.     padding:20px;
  738.     list-style-type:none;
  739.     max-height:200px;
  740.     overflow:auto;
  741.     margin-bottom:0px;
  742. }
  743.  
  744. ol.notes li.note img{
  745.     width:16px;
  746.     height:16px;
  747.     margin-right:3px;
  748.     {block:ifroundborders}
  749.     border-radius:10px;
  750.     {/block:ifroundborders}
  751. }
  752.  
  753. ol.notes li.note{
  754.     margin:0px;
  755. }
  756.  
  757. .tags {
  758.     max-height:0px;
  759.     text-align:center;
  760.     opacity:0;
  761.     -webkit-transition: all 0.7s ease;
  762.     transition: all 0.7s ease;
  763.     -moz-transition: all 0.7s ease;
  764.     -o-transition: all 0.7s ease;
  765.     overflow:hidden;
  766. }
  767.  
  768. .post:hover .tags{
  769.    opacity:1;
  770.    max-height:300px;
  771.    -webkit-transition: all 0.7s ease;
  772.    transition: all 0.7s ease;
  773.    -moz-transition: all 0.7s ease;
  774.    -o-transition: all 0.7s ease;
  775. }
  776.  
  777. /***** the entire photoset/photoset container *****/
  778. [photoset-layout] {
  779.   grid-gap: 5px; /* this is the gap between both the rows and the columns; you should probably use this if they are the same value */
  780. }
  781.  
  782. /***** the image container *****/
  783. [photoset-layout] div {
  784.   padding: ##; /* padding in the each image's container */
  785.   border: _____; /* border around each image's container */
  786. }
  787.  
  788. /***** the image *****/
  789. [photoset-layout] img {
  790.     border:0.5px {select:inner border style} {color:inner border}; /* border around each image */
  791.     {block:ifroundborders}
  792.     border-radius:10px;
  793.     {/block:ifroundborders} /* each image's border radius */
  794.     display: block;
  795.     height: 100%;
  796.     width: 100%;
  797.     object-fit: cover;
  798.     background-color:{color:post background};
  799. }
  800.  
  801. [photoset-layout] div {
  802.   cursor: help;
  803. }
  804.  
  805. .answer .embed_iframe{
  806.     width: 240px;
  807. }
  808.  
  809. #heartbeat{
  810.     position:fixed;
  811.     left:12px;
  812.     bottom:6px;
  813.     font-size:18px !important;
  814. }
  815.  
  816. #heartbeat:hover{
  817.     animation: heartbeat 1s infinite;
  818. }
  819.  
  820. @keyframes heartbeat
  821. {
  822.   0%
  823.   {
  824.     transform: scale( .90 );
  825.   }
  826.   20%
  827.   {
  828.     transform: scale( 1 );
  829.   }
  830.   40%
  831.   {
  832.     transform: scale( .90 );
  833.   }
  834.   60%
  835.   {
  836.     transform: scale( 1 );
  837.   }
  838.   80%
  839.   {
  840.     transform: scale( .90 );
  841.   }
  842.   100%
  843.   {
  844.     transform: scale( .90 );
  845.   }
  846. }
  847.  
  848. </style>
  849. <body>
  850. {block:ifredirect}
  851. {block:IndexPage}
  852. <script type="text/javascript">
  853.     var url = location.href;
  854.     if (url == "{BlogURL}") {
  855.         window.location = "{BlogURL}tagged/{text:redirect}";
  856.     }
  857. </script>
  858. {/block:IndexPage}
  859. {/block:ifredirect}
  860.  
  861. <div id="wrapper">
  862. <div id="sidebar">
  863.     <div id="title"><a href="/">{text:title}</a></div>
  864.     <div id="icon">
  865.         <div style="padding:20px"><img src="{image:icon}"></div>
  866.         <div id="hover">
  867.         <div style="padding:0px 20px 20px 20px">
  868.             <div id="links">
  869.                 <a href="{text:link 1 url}">{text:link 1}</a> {text:link separator} <a href="{text:link 2 url}">{text:link 2}</a> {text:link separator} <a href="{text:link 3 url}">{text:link 3}</a>
  870.             </div>
  871.         </div>
  872.         </div>
  873.     </div>
  874. </div>
  875.    
  876. <div id="content">
  877. {block:Posts}
  878.  
  879. <div class="post" post-type="{PostType}">
  880.  
  881. <div style="padding:20px">
  882.  
  883. {block:Text}
  884. {block:Title}
  885. <div class="title">{Title}</div>
  886. {/block:Title}
  887. {Body}
  888. {/block:Text}
  889.  
  890. {block:Photo}
  891. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  892. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  893. {/block:Photo}
  894.  
  895. {block:Photoset}
  896. <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>
  897. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  898. {/block:Photoset}
  899.  
  900. {block:Quote}
  901. <div class="quote">"{Quote}"</div>
  902. {block:Source}
  903. <div class="quotesource">{Source}</div>
  904. {/block:Source}
  905. {/block:Quote}
  906.  
  907. {block:Link}
  908. <div class="title"><a href="{URL}">{Name}</a></div>
  909. {block:Description}
  910. <div class="description">{Description}</div>
  911. {/block:Description}
  912. {/block:Link}
  913.  
  914. {block:Chat}
  915. {block:Title}
  916. <div class="title">{Title}</div>
  917. {/block:Title}
  918.  
  919. {block:Lines}
  920. <div class="{Alt} user_{UserNumber}">
  921. {block:Label}
  922. <b>{Label}</b>{/block:Label}
  923. &nbsp;{Line}
  924. </div>
  925. {/block:Lines}
  926. {/block:Chat}
  927.  
  928. {block:Video}
  929. <div class="media"><div class="video-wrapper">
  930. <div class="video-container">{video-400}</div>
  931. </div></div>
  932. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  933. {/block:Video}
  934.  
  935. {block:Audio}
  936. <div class="media">
  937. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-500}</div></div>{/block:AudioEmbed}
  938. </div>
  939. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  940. {/block:Audio}
  941.  
  942. {block:Answer}
  943. <div class="asker"><img src="{AskerPortraitURL-48}"> <div class="question" style="font-style:italic">{Question}</div></div>
  944.  
  945. <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>
  946.  
  947. <div style="margin-top:20px;{block:NotReblog}display:none;{/block:NotReblog}">{Replies}</div>
  948. {/block:Answer}
  949.  
  950.  
  951. {block:Date}
  952. <div class="footer">
  953.  
  954. <a href="{Permalink}" title="{notecount} notes">{TimeAgo}</a>
  955.  
  956. <!-- {block:NoRebloggedFrom}
  957. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  958. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  959. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  960. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  961. {/block:ContentSource}
  962.  
  963. </div>
  964.  
  965. {block:HasTags}
  966.     {block:IndexPage}<div class="tags"><div style="margin-top:20px">{block:Tags}<a href="{TagURL}"><i class="fas fa-hashtag"></i>{Tag} </a>{/block:Tags}</div></div>{/block:IndexPage}
  967.     {block:PermalinkPage}<div style="margin-top:20px;text-align:center;">{block:Tags}<a href="{TagURL}"><i class="fas fa-hashtag"></i>{Tag} </a>{/block:Tags}</div>{/block:PermalinkPage}
  968. {/block:HasTags}
  969.  
  970. {block:PermalinkPage}
  971. {block:NoteCount}
  972. {block:PostNotes}{PostNotes}{/block:PostNotes}
  973. {/block:NoteCount}
  974. {/block:PermalinkPage}
  975. {/block:Date}
  976.  
  977. </div>
  978. </div>
  979.  
  980. {/block:Posts}
  981.  
  982. {block:Pagination}
  983. <div id="nav">
  984. {block:PreviousPage}<div id="navbutton"><a href="{PreviousPage}"><i class="fas fa-arrow-left"></i></a></div>{/block:PreviousPage}
  985.  
  986. {block:NextPage}<div id="navbutton"><a href="{NextPage}"><i class="fas fa-arrow-right"></i></a></div>{/block:NextPage}
  987. </div>
  988. {/block:Pagination}
  989.  
  990. </div>
  991.  
  992. <a id="heartbeat" href="https://mirainikki.tumblr.com" title="by @mirainikki / @puella"><i class="fas fa-heart"></i>️</a>
  993.  
  994. </body>
  995. </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!