API tools faq
paste
iwtyhe

#17 - If it still hurts, you still care.

iwtyhe
Jun 12th, 2012
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.53 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3.  
  4.  
  5. <link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
  6. {block:indexpage}
  7. <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
  8.  
  9. <script src='http://static.tumblr.com/1s4z8hu/UTBlo4136/jquery.masonry.min.js' type='text/javascript'></script>
  10.  
  11. <script>
  12. jQuery(window).load(function(){
  13. var $wall = $('#content');
  14. $wall.imagesLoaded(function(){
  15. $wall.masonry({
  16. singleMode: true,
  17. columnWidth: 258,
  18. itemSelector: '#entry'
  19. });
  20. });
  21. $wall.infinitescroll({
  22. navSelector : '#page-nav',
  23. nextSelector : '#page-nav a',
  24. itemSelector : '#entry',
  25. },
  26.  
  27. function( newElements ){
  28. $(newElements).hide();
  29. setTimeout(function(){
  30. $wall.masonry({ appendedContent: $(newElements) });
  31. },2000);
  32. setTimeout(function(){
  33. $(newElements).fadeIn('slow');
  34. },2100);
  35. },1000);
  36. });
  37. </script>
  38.  
  39. <script>
  40. $.fn.imagesLoaded = function(callback){
  41. var elems = this.find('img'),
  42. len = elems.length,
  43. _this = this;
  44. if ( !elems.length ) {
  45. callback.call( this );}
  46. elems.bind('load',function(){
  47. if (--len <= 0){
  48. callback.call( _this );}
  49. }).each(function(){
  50. // cached images don't fire load sometimes, so we reset src.
  51. if (this.complete || this.complete === undefined){
  52. var src = this.src;
  53. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  54. // data uri bypasses webkit log warning (thx doug jones)
  55. this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  56. this.src = src;}
  57. });
  58. return this;};
  59. </script>
  60.  
  61. {/block:Indexpage}
  62.  
  63. {block:Description}
  64. <meta name="description" content="{MetaDescription}" />{/block:Description}
  65. <title>
  66. {block:PostSummary}
  67. {PostSummary} - {/block:PostSummary}{Title}</title>
  68.  
  69. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  70.  
  71. <style type="text/css">
  72.  
  73.  
  74. body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;}
  75.  
  76.  
  77. ::-webkit-scrollbar {width: 8px; height: 4px; background: #FFFFFF; }
  78. ::-webkit-scrollbar-thumb { background-color: #ffffff; -webkit-border-radius: 1ex; border: 1px solid black;}
  79.  
  80.  
  81. body {
  82. margin:0px;
  83. background-color: #000;
  84. background-image:url();
  85. background-attachment: fixed;
  86. background-repeat: repeat;}
  87. body, div, p, textarea, submit, input{font-family: cambria; font-size: 10px; line-height: 10px; letter-spacing:1px; color:#000;}
  88.  
  89. p {margin:0px; margin-top:5px;}
  90.  
  91. a:link, a:active, a:visited{color: #000; text-decoration: none;}
  92. a:hover {color:#000;}
  93.  
  94. #center {
  95. margin:auto;
  96. {block:IndexPage}width:774px;{/block:IndexPage}
  97. {block:PermalinkPage}width:508px; margin: auto;{/block:PermalinkPage}
  98. overflow:hidden;
  99. overflow-y:hidden;
  100. margin-top: 130px;
  101. }
  102.  
  103. #content {
  104. {block:IndexPage}width:774px;{/block:IndexPage}
  105. {block:PermalinkPage}width:508px{/block:PermalinkPage}
  106. }
  107.  
  108. #entry {
  109. margin-bottom: 2px;
  110. background: white;
  111. padding:2px;
  112. border: 1px solid black;
  113. {block:IndexPage}width: 250px;{/block:IndexPage}
  114. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  115. box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  116. }
  117.  
  118. #permalink {
  119. display: block;
  120. margin-top: 1px;
  121. text-align: right;
  122. }
  123.  
  124. #topbar {
  125. position:fixed;
  126. width: 100%;
  127. height: 120px;
  128. background-color:white;
  129. top: 0px;
  130. right: 0px;
  131. padding:2px;
  132. background-color: #fff;
  133. background-image:url();
  134. background-attachment: fixed;
  135. background-repeat: repeat;
  136. transition: all 0.5s ease-out;
  137. -o-transition-transition: all 0.5s ease-out;
  138. -webkit-transition: all 0.5s ease-out;
  139. -moz-transition: all 0.5s ease-out;
  140. opacity: .65;
  141. z-index: 1000;
  142. }
  143.  
  144. #topbar:hover{
  145. transition: all 0.5s ease-out;
  146. -o-transition-transition: all 0.5s ease-out;
  147. -webkit-transition: all 0.5s ease-out;
  148. -moz-transition: all 0.5s ease-out;
  149. opacity: 1;
  150. }
  151.  
  152. #pages {
  153. width: 770px;
  154. margin-bottom: 2px;
  155. background: white;
  156. border: 1px solid black;
  157. box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  158. height: auto;
  159. }
  160.  
  161. #postnotes{
  162. text-align: left;}
  163.  
  164. #postnotes blockquote{
  165. border: 0px;}
  166.  
  167. #mcc{background: white;
  168. position: fixed;
  169. opacity: .8;
  170. height: 15px;
  171. padding: 2px;
  172. line-height: 15px;
  173. bottom: 0px;
  174. right: 5px;
  175. -webkit-transition: all 0.4s ease-out;
  176. -moz-transition: all 0.4s ease-out;
  177. margin-left: 10px;
  178. font-family: tahoma;
  179. margin-top: 350px;
  180. margin-left: 223px; px;
  181. z-index: 2;}
  182.  
  183. #mcc:hover {background-color: #fff; height: 40px; color: transparent;}
  184.  
  185. .mcc {text-align: center; font-size: 9px; position: fixed; color: transparent; width: 90px; bottom: 20px;
  186. right: 5px;}
  187. .mcc:hover {color: #000; font-size: 9px; text-align: justify;}
  188.  
  189. @font-face {font-family: "04b03";
  190. src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype"); }
  191. @font-face {font-family: "charnarr";
  192. src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype");}
  193.  
  194. #linkbox {
  195. margin: 20px 0px 0px -20px;
  196. position: fixed;
  197. padding: 2px;
  198. width: 50px;
  199.  
  200.  
  201. }
  202.  
  203. #links a{
  204. width: 35px;
  205. height: 35px;
  206. background-color:#fff;
  207. font-size:8px;
  208. font-family:'04b03';
  209. text-transform: uppercase;
  210. margin-top:2px;
  211. margin-left: -4px;
  212. padding: 2px;
  213. line-height:35px;
  214. color: black;
  215. text-align:center;
  216. -webkit-transition-duration: 1s;
  217. border-top-right-radius:70px;
  218. border-bottom-right-radius:70px;
  219. border-top-left-radius:70px;
  220. border-bottom-left-radius:70px;
  221. display: inline-block;
  222. -webkit-transition-duration: 1s;
  223. -moz-transform: rotate(-90deg);
  224.  
  225. -webkit-transform: rotate(-90deg);
  226. }
  227.  
  228. #links a:hover {
  229. -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(-50px);
  230. -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(-50px);
  231. -o-transform: rotate(360deg) scale(1) skew(1deg) translate(-50px);
  232. }
  233. .menu{
  234. color: #000
  235.  
  236. width: 35px;
  237.  
  238. height: 25px;
  239.  
  240. background-color:#fff;
  241.  
  242. font-size:8px;
  243.  
  244. font-family:'04b03';
  245.  
  246. text-transform: uppercase;
  247.  
  248. margin-top:2px;
  249.  
  250. margin-left:1px;
  251.  
  252. z-index:-1;
  253.  
  254. padding: 2px;
  255.  
  256. line-height:25px;
  257.  
  258. text-align:center;
  259.  
  260. -webkit-transition-duration: 1s;
  261.  
  262. border-top-right-radius:90px;
  263.  
  264. border-bottom-right-radius:90px;
  265.  
  266. border-top-left-radius:90px;
  267.  
  268. border-bottom-left-radius:90px;
  269.  
  270. display: inline-block;
  271.  
  272. -moz-transform: rotate(-90deg);
  273.  
  274. -webkit-transform: rotate(-90deg);
  275.  
  276. }
  277.  
  278.  
  279.  
  280. .menu:hover {
  281.  
  282.  
  283. -webkit-transition-duration: 1s;
  284.  
  285. -moz-transform: rotate(360deg);
  286.  
  287. -webkit-transform: rotate(360deg);
  288.  
  289. }
  290.  
  291. .title{
  292. font-size: 12px;
  293. line-height: 9px;
  294. color: #000;
  295. font-weight: bold;
  296. }
  297.  
  298. .blogtitle a{
  299. font-family: 'Bad Script';
  300. font-size: 40px;
  301. line-height:50px;
  302. color: black;
  303. }
  304.  
  305. .desc {
  306. width: 364px;
  307. margin: auto;
  308. text-align: center;
  309. color: #FF1493;
  310. }
  311.  
  312. blockquote{
  313. padding:0px 0px 2px 5px;
  314. margin:2px 0px 2px 1px;
  315. border-left: 1px solid #000;}
  316. blockquote p, ul{margin:0px; padding:0px;}
  317.  
  318. .chat .line{
  319. background-color:#ffffff;
  320. margin: 0 0 1px;
  321. padding: 2px;
  322. }
  323. .chat .line.odd{
  324. background-color:#F0F0F0;
  325. }
  326.  
  327. .label {font-weight:bold; color:#000}
  328.  
  329. a img{border: 0px;}
  330.  
  331. .p { padding-top: 5px; }
  332. .ol, ul { margin-left: 10px; padding: 5px; }
  333. .ul { list-style-type: square; }
  334.  
  335. .albumart { margin-bottom: 0px; }
  336. .albumart img, .audio embed { width: 50px; }
  337.  
  338. .notes img{width:10px; position:left; top:3px;}
  339.  
  340. {font-size: 100%;}
  341.  
  342. {CustomCSS}
  343. </style>
  344. <link rel="shortcut icon" href="{Favicon}">
  345. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  346. <meta name="viewport" content="width=820" />
  347. {block:ifrainbowlinks}<script type="text/javascript" src="http://static.tumblr.com/jn17x0j/2Zvltn7mc/rainbow_links.txt
  348. "></script>{/block:ifrainbowlinks}
  349. </head>
  350. <body>
  351. <div id="center">
  352.  
  353. <div style="z-index: -1;">
  354. <div id="linkbox"><div id="links">
  355. <div id="menu"><a href="/">home</a></div>
  356. <div id="menu"><a href="/ask">ask</a></div>
  357. <div id="menu"><a href="/about">about</a></div>
  358. <div id="menu"><a href="http://tumblr.com/dashboard">xoxo</a></div>
  359. </div></div></div>
  360. <div id="topbar">
  361. <center>
  362. <div class="blogtitle"><a href="/">{Title}</a></div></center><br>
  363. <div class="desc"><div style="overflow: auto; auto; height: 60px;">{Description}</div></div>
  364. </div>
  365.  
  366. <div id="content">
  367. {block:Posts}
  368. <div id="entry">
  369.  
  370. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>{block:IndexPage}<div id="permalink"><a href="{Permalink}">+</a></div>{/block:IndexPage}{/block:text}
  371.  
  372. {block:Link}<a href="{URL}" class="title">{Name}</a>{block:Description}{Description}{/block:Description}{block:IndexPage}<div id="permalink"><a href="{Permalink}">+</a></div>{/block:IndexPage}{/block:link}
  373.  
  374. {block:Photo}{block:IndexPage}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=500px/>{/block:PermalinkPage}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Photo}
  375.  
  376. {block:Photoset}<center>{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center></span>{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{block:IndexPage}<div id="permalink"><a href="{permalink}">+</a></div>{/block:IndexPage}{/block:Photoset}
  377.  
  378. {block:Quote}<span class="title">{Quote}</span>{block:Source}<i><center> <br>- {Source}</i>{/block:Source}</center>{block:IndexPage}<div id="permalink"><a href="{Permalink}">+</a></div>{/block:IndexPage}{/block:Quote}
  379.  
  380. {block:Chat}{block:title}<div id="title"><center>{Title}<br></center></div>{/block:title}<div class="chat">{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}">
  381. {block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}{Line}</div></div></div>{/block:Lines}</div>{block:IndexPage}<div id="permalink"><a href="{Permalink}">+</a></div>{/block:IndexPage}{/block:Chat}
  382.  
  383. {block:Audio}<div style="width: 300px; height: 20px;">{AudioPlayerGrey}</div><BR>{block:TrackName}<span><strong>Title</strong>:
  384. {TrackName}</span>{/block:TrackName}<br>
  385. {block:Artist}<span><strong>Artist:</strong>
  386. {Artist}</span>{/block:Artist}<br>{block:IndexPage}<div id="permalink"><a href="{Permalink}">+</a></div>{/block:IndexPage}
  387. {/block:Audio}
  388.  
  389. {block:Video}<center>{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}<BR></center>{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{block:IndexPage}<div id="permalink"><a href="{permalink}">+</a></div>{/block:IndexPage}{/block:Video}
  390.  
  391. {block:PermalinkPage}
  392. <div id="permapage">{block:ifnotshowcaption}{block:caption}{caption}{/block:caption}{/block:ifnotshowcaption}<Br>{block:Date}{ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}{/block:Date}{block:NoteCount} · {NoteCountWithLabel}{/block:NoteCount}{block:HasTags} · Tags: {block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>
  393. {/block:PermalinkPage}
  394.  
  395. {block:PostNotes}{PostNotes}
  396. {/block:PostNotes}</div>{/block:Posts}
  397. </div>
  398. <div id="pages">
  399. <center>
  400. {block:PreviousPage} <a href="{PreviousPage}"><font size="2">← </font></a>{/block:PreviousPage}
  401. {block:NextPage}<a href="{NextPage}"><font size="2">→ </font></a>{/block:NextPage}</center></div>
  402. </div>
  403. <div id="mcc"><div class="mcc"><center><a href="http://y-ourpoison.tumblr.com/">+ </a> <a href="http://fearless-g1rl.tumblr.com">© </a> <a href="http://things-to-help-you.tumblr.com/">+ </a></center></div>
  404. <center>see the credits...</center></div>
  405. </body>
  406. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!