API tools faq
paste
Advertisement
Guest User

pastel skies by kuroneki

a guest
Nov 30th, 2015
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!-------
  5. theme by kuroneki. don't remove this part and don't remove my in-theme credit. u are allowed to change the colors/corner position, but nothing else.
  6.  
  7. feel free to send a msg to my blog if something doesnt work or if you need help with certain customization.
  8. <!------>
  9.  
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{image:FavIcon}" />
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  14.  
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  16.  
  17. {block:ifCursorTrail}
  18. <!-- start sparkle cursor trail script -->
  19. <script type="text/javascript">
  20. // <![CDATA[
  21. var colour="{color:Cursor Sparkles}"; // change ur sparkle colors here
  22. var sparkles=50;
  23.  
  24. /****************************
  25. * Tinkerbell Magic Sparkle *
  26. *(c)2005-13 mf2fm web-design*
  27. * http://www.mf2fm.com/rv *
  28. * DON'T EDIT BELOW THIS BOX *
  29. ****************************/
  30. var x=ox=400;
  31. var y=oy=300;
  32. var swide=800;
  33. var shigh=600;
  34. var sleft=sdown=0;
  35. var tiny=new Array();
  36. var star=new Array();
  37. var starv=new Array();
  38. var starx=new Array();
  39. var stary=new Array();
  40. var tinyx=new Array();
  41. var tinyy=new Array();
  42. var tinyv=new Array();
  43.  
  44. window.onload=function() { if (document.getElementById) {
  45. var i, rats, rlef, rdow;
  46. for (var i=0; i<sparkles; i++) {
  47. var rats=createDiv(3, 3);
  48. rats.style.visibility="hidden";
  49. rats.style.zIndex="999";
  50. document.body.appendChild(tiny[i]=rats);
  51. starv[i]=0;
  52. tinyv[i]=0;
  53. var rats=createDiv(5, 5);
  54. rats.style.backgroundColor="transparent";
  55. rats.style.visibility="hidden";
  56. rats.style.zIndex="999";
  57. var rlef=createDiv(1, 5);
  58. var rdow=createDiv(5, 1);
  59. rats.appendChild(rlef);
  60. rats.appendChild(rdow);
  61. rlef.style.top="2px";
  62. rlef.style.left="0px";
  63. rdow.style.top="0px";
  64. rdow.style.left="2px";
  65. document.body.appendChild(star[i]=rats);
  66. }
  67. set_width();
  68. sparkle();
  69. }}
  70.  
  71. function sparkle() {
  72. var c;
  73. if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
  74. ox=x;
  75. oy=y;
  76. for (c=0; c<sparkles; c++) if (!starv[c]) {
  77. star[c].style.left=(starx[c]=x)+"px";
  78. star[c].style.top=(stary[c]=y+1)+"px";
  79. star[c].style.clip="rect(0px, 5px, 5px, 0px)";
  80. star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
  81. star[c].style.visibility="visible";
  82. starv[c]=50;
  83. break;
  84. }
  85. }
  86. for (c=0; c<sparkles; c++) {
  87. if (starv[c]) update_star(c);
  88. if (tinyv[c]) update_tiny(c);
  89. }
  90. setTimeout("sparkle()", 40);
  91. }
  92.  
  93. function update_star(i) {
  94. if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  95. if (starv[i]) {
  96. stary[i]+=1+Math.random()*3;
  97. starx[i]+=(i%5-2)/5;
  98. if (stary[i]<shigh+sdown) {
  99. star[i].style.top=stary[i]+"px";
  100. star[i].style.left=starx[i]+"px";
  101. }
  102. else {
  103. star[i].style.visibility="hidden";
  104. starv[i]=0;
  105. return;
  106. }
  107. }
  108. else {
  109. tinyv[i]=50;
  110. tiny[i].style.top=(tinyy[i]=stary[i])+"px";
  111. tiny[i].style.left=(tinyx[i]=starx[i])+"px";
  112. tiny[i].style.width="2px";
  113. tiny[i].style.height="2px";
  114. tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
  115. star[i].style.visibility="hidden";
  116. tiny[i].style.visibility="visible"
  117. }
  118. }
  119.  
  120. function update_tiny(i) {
  121. if (--tinyv[i]==25) {
  122. tiny[i].style.width="1px";
  123. tiny[i].style.height="1px";
  124. }
  125. if (tinyv[i]) {
  126. tinyy[i]+=1+Math.random()*3;
  127. tinyx[i]+=(i%5-2)/5;
  128. if (tinyy[i]<shigh+sdown) {
  129. tiny[i].style.top=tinyy[i]+"px";
  130. tiny[i].style.left=tinyx[i]+"px";
  131. }
  132. else {
  133. tiny[i].style.visibility="hidden";
  134. tinyv[i]=0;
  135. return;
  136. }
  137. }
  138. else tiny[i].style.visibility="hidden";
  139. }
  140.  
  141. document.onmousemove=mouse;
  142. function mouse(e) {
  143. if (e) {
  144. y=e.pageY;
  145. x=e.pageX;
  146. }
  147. else {
  148. set_scroll();
  149. y=event.y+sdown;
  150. x=event.x+sleft;
  151. }
  152. }
  153.  
  154. window.onscroll=set_scroll;
  155. function set_scroll() {
  156. if (typeof(self.pageYOffset)=='number') {
  157. sdown=self.pageYOffset;
  158. sleft=self.pageXOffset;
  159. }
  160. else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
  161. sdown=document.body.scrollTop;
  162. sleft=document.body.scrollLeft;
  163. }
  164. else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  165. sleft=document.documentElement.scrollLeft;
  166. sdown=document.documentElement.scrollTop;
  167. }
  168. else {
  169. sdown=0;
  170. sleft=0;
  171. }
  172. }
  173.  
  174. window.onresize=set_width;
  175. function set_width() {
  176. var sw_min=999999;
  177. var sh_min=999999;
  178. if (document.documentElement && document.documentElement.clientWidth) {
  179. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  180. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  181. }
  182. if (typeof(self.innerWidth)=='number' && self.innerWidth) {
  183. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  184. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  185. }
  186. if (document.body.clientWidth) {
  187. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  188. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  189. }
  190. if (sw_min==999999 || sh_min==999999) {
  191. sw_min=800;
  192. sh_min=600;
  193. }
  194. swide=sw_min;
  195. shigh=sh_min;
  196. }
  197.  
  198. function createDiv(height, width) {
  199. var div=document.createElement("div");
  200. div.style.position="absolute";
  201. div.style.height=height+"px";
  202. div.style.width=width+"px";
  203. div.style.overflow="hidden";
  204. return (div);
  205. }
  206.  
  207. function newColour() {
  208. var c=new Array();
  209. c[0]=255;
  210. c[1]=Math.floor(Math.random()*256);
  211. c[2]=Math.floor(Math.random()*(256-c[1]/2));
  212. c.sort(function(){return (0.5 - Math.random());});
  213. return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
  214. }
  215. // ]]>
  216. </script>
  217. {/block:ifCursorTrail}
  218. <!-- end sparkle cursor trail script -->
  219.  
  220. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <!-- this is a font source, don't delete -->
  221.  
  222. <link href='https://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'> <!-- this is a font source, don't delete -->
  223.  
  224. <meta name="color:Background" content="#fff" />
  225. <meta name="color:Text" content="#797979"/>
  226. <meta name="image:Background" content=""/>
  227. <meta name="image:FavIcon" content=""/>
  228.  
  229. <meta name="color:Cursor Sparkles" content="#fff"/>
  230.  
  231. <meta name="color:Scrollbar" content="#000"/>
  232.  
  233. <meta name="color:Light Accents" content="#eee"/>
  234. <meta name="color:Regular Links" content="#d694b2"/>
  235.  
  236. <meta name="color:Title" content="#888"/>
  237.  
  238. <meta name="color:Navigation BG" content="#f2c9dc"/>
  239. <meta name="color:Navigation Text" content="#fff"/>
  240. <meta name="color:Navigation Text Shadow" content="#d694b2"/>
  241. <meta name="color:Navigation Border" content="#d694b2"/>
  242.  
  243. <meta name="color:Permalinks Text Shadow" content="#d694b2"/>
  244. <meta name="color:Permalinks Text" content="#fff"/>
  245. <meta name="color:Permalinks Border" content="#d694b2"/>
  246. <meta name="color:Permalinks BG" content="#f2c9dc"/>
  247.  
  248. <meta name="text:Link 1" content="link 1"/>
  249. <meta name="text:Link 1 url" content="/"/>
  250. <meta name="text:Link 2" content="link 2"/>
  251. <meta name="text:Link 2 url" content="/ask"/>
  252. <meta name="text:link 3" content="link 3"/>
  253. <meta name="text:Link 3 url" content="/archive"/>
  254. <meta name="text:Link 4" content="link 4"/>
  255. <meta name="text:Link 4 url" content="/"/>
  256. <meta name="text:Link 5" content="link 5"/>
  257. <meta name="text:Link 5 url" content="/"/>
  258.  
  259. <meta name="if:CursorTrail" content="1"/>
  260. <meta name="if:InfiniteScroll" content="1"/>
  261.  
  262.  
  263. <style type="text/css">
  264.  
  265. .top.media.photoset {
  266. line-height: 0;
  267. position: relative;
  268. display: inline-block;
  269. }
  270.  
  271. body {
  272. color: {color:Text};
  273. background-color: {color:Background};
  274. background-image: url({image:Background});
  275. background-size: 100% 100%;
  276. background-attachment: fixed;
  277. font: 11px 'source sans pro';
  278. line-height: 16px;
  279. overflow: hidden;
  280. }
  281.  
  282. a {
  283. text-decoration: none;
  284. color: {color:Regular Links};
  285. }
  286. a:hover {
  287. color: {color:Navigation Text Shadow};
  288. cursor: help;
  289. text-shadow: 1px 1px {color:Navigation Text};
  290. }
  291.  
  292. .img {
  293. max-width: 250px;
  294. }
  295.  
  296. h1 {
  297. font-size: 12px;
  298. color: {color:Title};
  299. }
  300.  
  301. ::-webkit-scrollbar {
  302. width: 3px;
  303. height: 5px;
  304. background: {color:Background};
  305. }
  306. ::-webkit-scrollbar-thumb {
  307. background: {color:Scrollbar};
  308. border-radius: 16px;
  309. border-top: 5px solid {color:Background};
  310. }
  311.  
  312. #content {
  313. {block:IndexPage}
  314. width: 250px;
  315. {/block:IndexPage}
  316. {block:PermalinkPage}
  317. width: 250px;
  318. {/block:PermalinkPage}
  319. padding-left: 30px;
  320. }
  321. .entry {
  322. margin-bottom: 60px;
  323. }
  324.  
  325. #perma {
  326. position: relative;
  327. margin-top: 10px;
  328. text-align: center;
  329. letter-spacing: 2px;
  330. text-transform: lowercase;
  331. background: {color:Permalinks BG};
  332. color: {color:Permalinks Text};
  333. padding: 5px;
  334. border: 1px dotted {color:Permalinks Border};
  335. border-radius: 5px;
  336. text-shadow: 1px 1px {color:Permalinks Text Shadow};
  337. }
  338.  
  339. #perma a {
  340. color: {color:Permalinks Text};
  341. }
  342.  
  343. #perma a:hover {
  344. color: {color:Permalinks Text Shadow};
  345. text-shadow: 1px 1px {color:Permalinks Text};
  346. }
  347.  
  348. .entry img {
  349. max-width: 100%;
  350. height:auto;
  351. border-radius: 5px;
  352. }
  353.  
  354.  
  355. /* sidebar might look a bit too far pushed down in the editor, it will look normal on your blog, so don't mess with the position */
  356. #side {
  357. top: 140px;
  358. margin-left: -255px;
  359. position: fixed;
  360. width: 180px;
  361. }
  362.  
  363. #navigation {
  364. top: 220px;
  365. margin-left: -255px;
  366. position: fixed;
  367. width: 180px;
  368. }
  369.  
  370. .sidebarlinks {
  371. display: block;
  372. margin-bottom: -13px;
  373. text-align: center;
  374. width: 120px;
  375. letter-spacing: 2px;
  376. text-transform: lowercase;
  377. text-decoration: none;
  378. background: {color:Navigation BG};
  379. color: {color:Navigation Text};
  380. padding: 5px;
  381. border: 1px dotted {color:Navigation Border};
  382. border-radius: 5px;
  383. text-shadow: 1px 1px {color:Navigation Text Shadow}
  384. }
  385.  
  386. .head {
  387. width: 130px;
  388. font-size: 26px;
  389. margin-bottom: 5px;
  390. color: {color:Title};
  391. font-family: 'marck script';
  392. text-align: center;
  393. }
  394.  
  395. #desc {
  396. width: 125px;
  397. height: 52px;
  398. text-align: left;
  399. padding-right: 5px;
  400. }
  401.  
  402. blockquote {
  403. border-left: 1px solid {color:Light Accents};
  404. margin-left: 6px;
  405. padding-left: 10px;
  406. }
  407.  
  408. img.avatar {display:none; }
  409. ol.notes {
  410. margin-top: 20px;
  411. }
  412.  
  413. #centering {
  414. width: 478px;
  415. margin: 0px auto;
  416. }
  417.  
  418. #container {
  419. position: absolute;
  420. background: #fff;
  421. width: 310px;
  422. height: 500px;
  423. margin-top: 135px;
  424. margin-left: 85px;
  425. z-index:999;
  426. overflow: auto;
  427. }
  428.  
  429. #clouds {
  430. position: absolute;
  431. margin-top: 60px;
  432. }
  433.  
  434. #sidebarclouds {
  435. margin-top: 80px;
  436. margin-left: -220px;
  437. position: absolute;
  438. }
  439.  
  440. .sideimg {
  441. position: absolute;
  442. bottom: 0px;
  443. margin-left: 0px;
  444. }
  445.  
  446. #credit { /* DO NOT REMOVE THIS */
  447. position:fixed;
  448. padding: 4px;
  449. bottom: 5px;
  450. left: 5px;
  451. font-size:18px;
  452. border-radius:10px;
  453. background: #d694b2; /* feel free to recolor this to fit the rest */
  454. }
  455.  
  456. #credit a {
  457. color: #fff; /* feel free to recolor this to fit the rest */
  458. font-style: normal;
  459. text-shadow: none;
  460. }
  461.  
  462. #pagination {
  463. width: 250px;
  464. text-align: center;
  465. padding: 3px 0;
  466. margin-top: -50px;
  467.  
  468. </style>
  469.  
  470. {block:ifInfiniteScroll}
  471. <script type="text/javascript" src="http://codes.bitshare.cm/infinitescrolling.js"></script>
  472. {/block:ifInfiniteScroll}
  473.  
  474. </head>
  475.  
  476. <body>
  477.  
  478.  
  479.  
  480. <div id="credit"><a href="http://kuroneki.tumblr.com/" title="theme by kuroneki">✿</a></div>
  481.  
  482. <div id="centering">
  483.  
  484. <div class="sideimg"><img src="/"></div>
  485.  
  486. <div id="sidebarclouds"><img src="http://i.imgur.com/FdZutyZ.png" draggable="false"></div>
  487.  
  488. <div id="clouds"><img src="http://i.imgur.com/kceIAAb.png" draggable="false"></div>
  489. <div id="container">
  490.  
  491. <!--sidebar-->
  492. <div id="side"><div class="head">{Title}</div>
  493. <div id="desc">{Description}</div></div>
  494.  
  495. <div id="navigation">
  496.  
  497. <a href="{text:Link 1 url}" class="sidebarlinks">{text:Link 1}</a><br>
  498. <a href="{text:Link 2 url}" class="sidebarlinks">{text:Link 2}</a><br>
  499. <a href="{text:Link 3 url}" class="sidebarlinks">{text:Link 3}</a><br>
  500. <a href="{text:Link 4 url}" class="sidebarlinks">{text:Link 4}</a><br></div>
  501.  
  502. <!----->
  503.  
  504. <div id="content">
  505. {block:Posts}
  506.  
  507. <!-- {block:NoRebloggedFrom}
  508. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  509. {/block:NoRebloggedFrom} -->
  510. <div class="entry">
  511.  
  512.  
  513. {block:Photo}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a> {block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}
  514.  
  515. {block:Photoset}
  516. <section class="top media photoset">
  517. {Photoset-250}
  518. </section>
  519. {block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  520. {/block:Photoset}
  521.  
  522. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body} {/block:Text}
  523.  
  524. {block:Link}<h1><a href="{URL}">{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  525.  
  526. {block:Quote}"{Quote}"{block:Source}<br>- {Source}{/block:Source}{/block:Quote}
  527.  
  528. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label} </b>{/block:Label}<span><i>{Line}</i><br></span>{/block:Lines}{/block:Chat}
  529.  
  530. {block:Audio}{AudioPlayerWhite}{block:IndexPage}<p>{block:TrackName}Track: {TrackName}<br>{/block:TrackName}{block:Artist}Artist: {Artist}<br>{/block:Artist}{block:Album}Album: {Album}<br>{/block:Album}{block:PlayCount}Played: {PlayCount}{/block:PlayCount}{/block:IndexPage}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Audio}
  531.  
  532. {block:Video}{block:IndexPage}{block:if250px}{Video-250}{/block:if250px}{block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}{/block:IndexPage}{block:PermalinkPage}{Video-400}{/block:PermalinkPage} {block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{block:Video}
  533.  
  534. {block:Answer}<b>{Asker}</b> asked: <br><i>{Question}</i><p>{Answer}{/block:Answer}
  535.  
  536. <!--permalink page-->
  537. {block:PermalinkPage}
  538. <center>{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}<p>{NoteCountwithLabel}</center>
  539. {block:PostNotes}{PostNotes}{/block:PostNotes}
  540. {/block:PermalinkPage}
  541.  
  542. <!--permalink-->
  543. {block:IndexPage}<div id="perma"><a href="{Permalink}">{MonthNumberwithZero}.{DayofMonthwithZero}.{Year}</a> // <a href="{Permalink}">{noteCount}</a> // <a href="{ReblogURL}">reblog</a></div>{/block:IndexPage}
  544. </div> <!---entry div--->
  545. {/block:Posts}
  546.  
  547. {block:ContentSource}<!-- {SourceURL}
  548. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  549. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  550. {/block:ContentSource}
  551.  
  552.  
  553. {block:Pagination}
  554. <div id="pagination">
  555. {block:PreviousPage}
  556. <a href="{PreviousPage}">Previous</a>
  557. {/block:PreviousPage}
  558.  
  559. {block:JumpPagination length="5"}
  560. {block:CurrentPage}
  561. <span class="current_page">{PageNumber}</span>
  562. {/block:CurrentPage}
  563.  
  564. {block:JumpPage}
  565. <a class="jump_page" href="{URL}">{PageNumber}</a>
  566. {/block:JumpPage}
  567. {/block:JumpPagination}
  568.  
  569. {block:NextPage}
  570. <a href="{NextPage}">Next</a>
  571. {/block:NextPage}
  572. </div>
  573. {/block:Pagination}
  574.  
  575. </div><!---content div--->
  576.  
  577. </div>
  578.  
  579.  
  580.  
  581.  
  582. </body>
  583.  
  584. </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!