Advertisement
Sky_Blue

GOD-ISH theme

May 8th, 2022 (edited)
1,571
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.61 KB | None | 0 0
  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