API tools faq
paste
iwtyhe

#21 So Sad

iwtyhe
Aug 6th, 2012
341
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.42 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. <meta name="color:background" content="#644F92"/>
  4. <meta name="color:text" content="#000000"/>
  5. <meta name="color:title" content="#000000"/>
  6. <meta name="color:link" content="#684B64"/>
  7. <meta name="color:hover" content="#000000"/>
  8. <meta name="color:menu" content="#000000"/>
  9. <meta name="color:fontmenu" content="#ffffff"/>
  10. <meta name="image:Background" content=""/>
  11. <meta name="image:Sidebar" content=""/>
  12. <meta name="if:Show Sidebar Image" content=""/>
  13. <meta name="if:Show Title" content="1"/>
  14. <meta name="if:Show caption" content=""/>
  15. <meta name="text:Link 1" content=""/>
  16. <meta name="text:Link 1 Title" content="Home"/>
  17. <meta name="text:Link 2" content="" />
  18. <meta name="text:Link 2 Title" content="Ask"/>
  19. <meta name="text:Link 3" content="" />
  20. <meta name="text:Link 3 Title" content="About"/>
  21. <meta name="text:Link 4" content="" />
  22. <meta name="text:Link 4 Title" content="Archive"/>
  23.  
  24. {block:Description}
  25. <meta name="description" content="{MetaDescription}" />{/block:Description}
  26. <title>
  27. {block:PostSummary}
  28. {PostSummary} - {/block:PostSummary}{Title}</title>
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
  31.  
  32. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  33.  
  34. {block:indexpage}
  35. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  36.  
  37. <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
  38.  
  39. <script src='http://static.tumblr.com/1s4z8hu/UTBlo4136/jquery.masonry.min.js' type='text/javascript'></script>
  40.  
  41. <script type="text/javascript" src="http://static.tumblr.com/jnmer2r/WKhljk73d/jquery.infinitescroll.min.js"></script>
  42.  
  43. <script>
  44. jQuery(window).load(function(){
  45. var $wall = $('#content');
  46. $wall.imagesLoaded(function(){
  47. $wall.masonry({
  48. singleMode: true,
  49. columnWidth: 553,
  50. itemSelector: '#entry'
  51. });
  52. });
  53. $wall.infinitescroll({
  54. navSelector : '#page-nav',
  55. nextSelector : '#page-nav a',
  56. itemSelector : '#entry',
  57. },
  58.  
  59. function( newElements ){
  60. $(newElements).hide();
  61. setTimeout(function(){
  62. $wall.masonry({ appendedContent: $(newElements) });
  63. },2000);
  64. setTimeout(function(){
  65. $(newElements).fadeIn('slow');
  66. },2100);
  67. },1000);
  68. });
  69. </script>
  70.  
  71. <script>
  72. $.fn.imagesLoaded = function(callback){
  73. var elems = this.find('img'),
  74. len = elems.length,
  75. _this = this;
  76. if ( !elems.length ) {
  77. callback.call( this );}
  78. elems.bind('load',function(){
  79. if (--len <= 0){
  80. callback.call( _this );}
  81. }).each(function(){
  82. // cached images don't fire load sometimes, so we reset src.
  83. if (this.complete || this.complete === undefined){
  84. var src = this.src;
  85. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  86. // data uri bypasses webkit log warning (thx doug jones)
  87. this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  88. this.src = src;}
  89. });
  90. return this;};
  91. </script>
  92.  
  93. {/block:Indexpage}
  94.  
  95. <style type="text/css">
  96.  
  97. body {
  98. margin:0px;
  99. background-color: {color:Background};
  100. background-image:url({image:Background});
  101. background-attachment: fixed;
  102. background-repeat: repeat;
  103. }
  104. body, div, p, textarea, submit, input{
  105. font-family: trebuchet ms;
  106. font-size: 10px;
  107. line-height: 10px;
  108. letter-spacing:0px;
  109. color:{color:Text};
  110. }
  111.  
  112. p {
  113. margin:0px;
  114. margin-top:5px;
  115. }
  116.  
  117. a:link, a:active, a:visited{
  118. color: {color:Link};
  119. text-decoration: none;
  120. transition: all 0.5s ease-out;
  121. -o-transition-transition: all 0.5s ease-out;
  122. -webkit-transition: all 0.5s ease-out;
  123. -moz-transition: all 0.5s ease-out;
  124. }
  125. a:hover {
  126. color:{color:Hover};
  127. text-shadow:0 0 8px #333333;
  128. transition: all 0.5s ease-out;
  129. -o-transition-transition: all 0.5s ease-out;
  130. -webkit-transition: all 0.5s ease-out;
  131. -moz-transition: all 0.5s ease-out;
  132. }
  133.  
  134. #center {
  135. margin:auto;
  136. position:relative;
  137. width: 816px;
  138. overflow:auto;
  139. overflow-y:hidden;
  140. overflow-x: hidden;
  141. }
  142.  
  143. #content {
  144. width:1106px;
  145. }
  146.  
  147. #entry {
  148. margin-top:5px;
  149. padding:5px;
  150. border: 1px solid #eee;
  151. background: white;
  152. {block:indexpage}width: 250px;{/block:indexpage}
  153. {block:permalinkpage}width: 500px;{/block:permalinkpage}
  154. }
  155.  
  156. .h1 {
  157. font-family: verdana;
  158. font-size: 12px;
  159. color: {color:text};
  160. }
  161.  
  162. #entry .perma {
  163. height: 15px;
  164. line-height: 15px;
  165. border-bottom-right-radius: 15px;
  166. border-top-right-radius: 15px;
  167. margin-left: 0px;
  168. background: white;
  169. opacity: 0;
  170. padding: 5px;
  171. position: absolute;
  172. margin-top: -50px;
  173. padding-left: 30px;
  174. transition: all 0.5s ease-out;
  175. -o-transition-transition: all 0.5s ease-out;
  176. -webkit-transition: all 0.5s ease-out;
  177. -moz-transition: all 0.5s ease-out;
  178. }
  179.  
  180. #entry .perma a{
  181. color: black;
  182. }
  183.  
  184. #entry:hover .perma {
  185. opacity: .8;
  186. transition: all 0.5s ease-out;
  187. -o-transition-transition: all 0.5s ease-out;
  188. -webkit-transition: all 0.5s ease-out;
  189. -moz-transition: all 0.5s ease-out;
  190. }
  191.  
  192. #entry .perma:hover{
  193. padding-left: 50px;
  194. transition: all 0.5s ease-out;
  195. -o-transition-transition: all 0.5s ease-out;
  196. -webkit-transition: all 0.5s ease-out;
  197. -moz-transition: all 0.5s ease-out;
  198. }
  199.  
  200. #permalink {
  201. display: block;
  202. margin-top: 5px;
  203. border-top: 1px solid #eee;
  204. text-align: center;
  205. padding-top: 2px;
  206. }
  207.  
  208. #permalink a{
  209. color: black;
  210. }
  211.  
  212. #sidebar {
  213. position:fixed !important;
  214. width: 180px;
  215. height: auto;
  216. background-color:white;
  217. padding:5px;
  218. border: 1px solid #eee;
  219. z-index: 1000;
  220. {block:indexpage}margin: 200px 0px 0px 312px;
  221. {/block:indexpage}
  222. {block:permalinkpage}margin: 200px 0px 0px 562px;
  223. {/block:permalinkpage}
  224. }
  225.  
  226. #postnotes{
  227. text-align: left;
  228. }
  229.  
  230. #postnotes blockquote{
  231. border: 0px;
  232. }
  233.  
  234. .title{
  235. font-size: 15px;
  236. line-height: 15px;
  237. display: block;
  238. font-style: italic;
  239. text-align: center;
  240. color: {color:Title};
  241. letter-spacing: 0;
  242. }
  243.  
  244. .blogtitle {
  245. font-family: 'great vibes';
  246. font-size: 34px;
  247. line-height: 34px;
  248. letter-spacing: 1px;
  249. color: {color:Title};
  250. border-bottom: 1px solid #eee;
  251. text-shadow:0 0 8px #333333;
  252. }
  253.  
  254. .blogtitle .linkbox {
  255. position: absolute;
  256. width: 50px;
  257. height: 50px;
  258. margin-left: 115px;
  259. margin-top: -4px;
  260. background: {color:menu};
  261. opacity: 0;
  262. transition: all 0.5s ease-out;
  263. -o-transition-transition: all 0.5s ease-out;
  264. -webkit-transition: all 0.5s ease-out;
  265. -moz-transition: all 0.5s ease-out;
  266. }
  267.  
  268. .blogtitle .linkbox a{
  269. color: {color:fontmenu};
  270. text-transform: uppercase;
  271. font-size: 8px;
  272. text-align: center;
  273. line-height: 12px;
  274. text-shadow:0 0 0px #333333;
  275. }
  276.  
  277. .arrow_box2 {
  278. position: absolute;
  279. margin-top: 20px;
  280. margin-left: 115px;
  281. opacity: 0;
  282. transition: all 0.5s ease-out;
  283. -o-transition-transition: all 0.5s ease-out;
  284. -webkit-transition: all 0.5s ease-out;
  285. -moz-transition: all 0.5s ease-out;
  286. background: {color:fundomenu};
  287. }
  288. .arrow_box2:after {
  289. right: 100%;
  290. border: solid transparent;
  291. content: " ";
  292. height: 0;
  293. width: 0;
  294. position: absolute;
  295. pointer-events: none;
  296. }
  297.  
  298. .arrow_box2:after {
  299. border-right-color: {color:menu};
  300. color:#fff;
  301. border-width: 15px;
  302. top: 50%;
  303. margin-top: -15px;
  304. }
  305.  
  306. .blogtitle:hover .linkbox {
  307. opacity: .8;
  308. transition: all 0.5s ease-out;
  309. -o-transition-transition: all 0.5s ease-out;
  310. -webkit-transition: all 0.5s ease-out;
  311. -moz-transition: all 0.5s ease-out;
  312. }
  313.  
  314. .blogtitle:hover .arrow_box2 {
  315. opacity: .8;
  316. transition: all 0.5s ease-out;
  317. -o-transition-transition: all 0.5s ease-out;
  318. -webkit-transition: all 0.5s ease-out;
  319. -moz-transition: all 0.5s ease-out;
  320. }
  321.  
  322. blockquote{
  323. padding:0px 0px 2px 5px;
  324. margin:2px 0px 2px 1px;
  325. border-left: 1px solid {color:Text};
  326. }
  327. blockquote p, ul{
  328. margin:0px;
  329. padding:0px;
  330. }
  331.  
  332. .chat .line{
  333. background-color:#ffffff;
  334. margin: 0 0 1px;
  335. padding: 5px;
  336. }
  337. .chat .line.odd{
  338. background-color:#F0F0F0;
  339. }
  340.  
  341. .label {
  342. font-weight:bold;
  343. color:{color:text};
  344. }
  345.  
  346. a img{
  347. border: 0px;
  348. }
  349.  
  350. .p {
  351. padding-top: 5px;
  352. }
  353. .ol, ul {
  354. margin-left: 10px;
  355. padding: 5px;
  356. }
  357. .ul {
  358. list-style-type: square;
  359. }
  360.  
  361. .audio {
  362. background: #e4e4e4;
  363. height: 27px;
  364. {block:indexpage}width: 250px;{/block:indexpage}
  365. {block:permalinkpage}width: 500px;{/block:permalinkpage}
  366. }
  367.  
  368. .arrow_box {
  369. position: relative;
  370. color: #fff;
  371. background: #e4e4e4;
  372. }
  373. .arrow_box:after {
  374. top: 100%;
  375. border: solid transparent;
  376. content: " ";
  377. height: 0;
  378. width: 0;
  379. position: absolute;
  380. pointer-events: none;
  381. }
  382.  
  383. .arrow_box:after {
  384. border-top-color: #e4e4e4;
  385. border-width: 10px;
  386. left: 10%;
  387. margin-left: -10px;
  388. }
  389.  
  390. .notes img{
  391. width:10px;
  392. position:left;
  393. top:3px;
  394. }
  395.  
  396.  
  397. {font-size: 100%;}
  398.  
  399. #tumblr_controls{position: fixed!important}
  400. #tumblr_controls{position: fixed!important}
  401. #tumblr_controls{position: fixed!important}
  402. #tumblr_controls{position: fixed!important}
  403.  
  404. ::-webkit-scrollbar{width:8px;height:8px;}
  405. ::-webkit-scrollbar-button:start:decrement
  406. ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
  407. ::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
  408. ::-webkit-scrollbar-thumb:vertical{height:50px; scrollbar-face-color:#000; background-color: #000;-webkit-border-radius:px;}
  409. ::-webkit-scrollbar-thumb:horizontal{width:50px; scrollbar-face-color:#666666; background-color:#000;-webkit-border-radius:px;}
  410.  
  411. {CustomCSS}
  412. </style>
  413. <link rel="shortcut icon" href="{Favicon}">
  414. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  415. <meta name="viewport" content="width=820" />
  416. </head>
  417. <body>
  418. <div id="center">
  419. <div id="sidebar">
  420. <div class="blogtitle"><div class="arrow_box2"></div><div class="linkbox"><center><a href="{text:Link 1}">{text:Link 1 Title}</a><br>
  421. <a href="{text:Link 2}">{text:Link 2 Title}</a><br>
  422. <a href="{text:Link 3}">{text:Link 3 Title}</a><br>
  423. <a href="{text:Link 4}">{text:Link 4 Title}</a><br>
  424. </center></div><center><a href="/">{Title}</a></center></div>{block:ifshowsidebarimage}<a href="/"><img style="margin-top: 0px;" src="{image:sidebar}" width=180px></a>{/block:ifshowsidebarimage}
  425.  
  426. <div style="overflow: auto; auto; height: 120px; margin-top: 2px;">{Description}</div><br>
  427. <big><center><a href="http://w-hisperss.tumblr.com" title="theme by w-hisperss, do not copy.">©</a></center></big>
  428. </div>
  429.  
  430. <div id="content">
  431. {block:Posts}
  432. <div id="entry">
  433.  
  434. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}<h1>{Body}</h1>{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{/block:text}
  435.  
  436. {block:Link}<a href="{URL}" class="title">{Name} »</a>{block:Description}{Description}{/block:Description}{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{/block:link}
  437.  
  438. {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:indexpage}<div class="perma"><a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Photo}
  439.  
  440. {block:Photoset}{block:IndexPage}{Photoset-250}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}{block:indexpage}<div class="perma"><a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{/block:Photoset}
  441.  
  442. {block:Quote}<span class="title">❝ {Quote} ❞</span>{block:Source}<div style="text-align: right;"><br> - {Source}</div>{/block:Source}{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{/block:Quote}
  443.  
  444. {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}">
  445. {block:Label}<span class="label"><b>{Label} </b></span>{/block:Label}{Line}</div></div></div>{/block:Lines}</div>{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{/block:Chat}
  446.  
  447. {block:Audio}<div class="audio">{AudioPlayerGrey}</div><div class="arrow_box"></div><BR>{block:TrackName}<span>
  448. "{TrackName}"{/block:TrackName}
  449. {block:Artist}by
  450. {Artist}{/block:Artist}<br>{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}
  451. {/block:Audio}
  452.  
  453. {block:Video}{block:IndexPage}{Video-250}{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}{block:ifshowcaption}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaption}{block:indexpage}<div id="permalink">Posted <a href="{permalink}">{timeago}</a> with <a href="{permalink}">{notecountwithlabel}</a></div>{/block:indexpage}{/block:Video}
  454.  
  455. {block:PermalinkPage}
  456. <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>
  457. {/block:PermalinkPage}
  458.  
  459. {block:PostNotes}{PostNotes}
  460. {/block:PostNotes}</div>{/block:Posts}
  461. </div></div>
  462. </div>
  463. </body>
  464. </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!