purethought-s

Theme #8: Hateful

Apr 9th, 2013
1,312
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.77 KB | None | 0 0
  1. <!--
  2. Hateful theme by sleephy
  3.  
  4. please don't steal this c:
  5.  
  6. fixed on 29/09/2013 ~ there was an error with uploading a background image!
  7. -->
  8.  
  9. <html lang="en">
  10. <head>
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  12. <script src="http://static.tumblr.com/xrmodho/zoUmtvm6l/jquery.js"></script>
  13. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  14. <script>
  15. (function($){
  16. $(document).ready(function(){
  17. $("a[title]").style_my_tooltips({
  18. tip_follows_cursor:true,
  19. tip_delay_time:10,
  20. tip_fade_speed:400,
  21. attribute:"title"
  22. });
  23. });
  24. })(jQuery);
  25. </script>
  26.  
  27. <html lang="en">
  28. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  29. <html xmlns="http://www.w3.org/1999/xhtml">
  30. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  31.  
  32. <meta name="color:Title" content="#999999"/>
  33. <meta name="color:Link" content="#555555"/>
  34. <meta name="image:background" content="">
  35. <meta name="text:Link 1" content="/"/>
  36. <meta name="text:Link 1 Title" content="home"/>
  37. <meta name="text:Link 2" content="/ask" />
  38. <meta name="text:Link 2 Title" content="mssg"/>
  39. <meta name="text:Link 3" content="/etc" />
  40. <meta name="text:Link 3 Title" content="links"/>
  41. <meta name="image:Sidebar" content="" />
  42.  
  43. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  44. {block:Description}<meta name="description" content="{MetaDescription}" />
  45. {/block:Description}
  46. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  47. <link rel="shortcut icon" href="{Favicon}">
  48.  
  49. {block:indexpage}
  50. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  51.  
  52. <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
  53.  
  54. <script src='http://static.tumblr.com/1s4z8hu/UTBlo4136/jquery.masonry.min.js' type='text/javascript'></script>
  55.  
  56. <script type="text/javascript" src="http://static.tumblr.com/jnmer2r/WKhljk73d/jquery.infinitescroll.min.js"></script>
  57.  
  58. <script>
  59. jQuery(window).load(function(){
  60. var $wall = $('#content');
  61. $wall.imagesLoaded(function(){
  62. $wall.masonry({
  63. singleMode: true,
  64. columnWidth: 292,
  65. itemSelector: '#entry'
  66. });
  67. });
  68. $wall.infinitescroll({
  69. navSelector : '#page-nav',
  70. nextSelector : '#page-nav a',
  71. itemSelector : '#entry',
  72. },
  73.  
  74. function( newElements ){
  75. $(newElements).hide();
  76. setTimeout(function(){
  77. $wall.masonry({ appendedContent: $(newElements) });
  78. },2000);
  79. setTimeout(function(){
  80. $(newElements).fadeIn('slow');
  81. },2100);
  82. },1000);
  83. });
  84. </script>
  85.  
  86.  
  87. <script>
  88. $.fn.imagesLoaded = function(callback){
  89. var elems = this.find('img'),
  90. len = elems.length,
  91. _this = this;
  92. if ( !elems.length ) {
  93. callback.call( this );}
  94. elems.bind('load',function(){
  95. if (--len <= 0){
  96. callback.call( _this );}
  97. }).each(function(){
  98. // cached images don't fire load sometimes, so we reset src.
  99. if (this.complete || this.complete === undefined){
  100. var src = this.src;
  101. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  102. // data uri bypasses webkit log warning (thx doug jones)
  103. this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  104. this.src = src;}
  105. });
  106. return this;};
  107. </script>
  108.  
  109. {/block:Indexpage}
  110.  
  111. <style type="text/css">
  112. #s-m-t-tooltip{
  113. max-width:300px;
  114. padding:2px;
  115. margin:26px 0px 0px 8px;
  116. z-index:10;
  117. background-color:#fff;
  118. font-family:consolas;
  119. font-size:8.5px;
  120. letter-spacing:1px;
  121. text-transform:lowercase;
  122. -moz-box-shadow: 2px 2px 2px 0px #ddd;
  123.  
  124. }
  125.  
  126.  
  127.  
  128.  
  129.  
  130. ::-webkit-scrollbar {width:5px;height:5px;background:#fff;}
  131. ::-webkit-scrollbar-thumb {background:{color:Link};}
  132.  
  133. /* GENERAL */
  134.  
  135.  
  136. iframe#tumblr_controls {right:3px !important; position: fixed !important;bottom:5px !important;-webkit-transition: opacity 0.7s linear;opacity: 0.3;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;white-space:nowrap; filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);}
  137.  
  138. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  139.  
  140. body {margin:0px;background:#fff url({image:Background});}
  141. body, div, p, textarea, submit, input{
  142. font-family:calibri;
  143. font-size:10.5px;
  144. line-height:12px;
  145. color: {color:text};}
  146.  
  147. a:link, a:active, a:visited{text-decoration:none;
  148. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  149. -o-transition: 0.7s ease;-moz-transition: 0.7s ease;color:{color:Link};}
  150.  
  151. a:link:hover{
  152. color:#ddd;
  153. }
  154.  
  155.  
  156. /* POSTS */
  157.  
  158. #center{margin:auto;position:relative;width:600px;}
  159. #content{width:630px;margin-top:10px;}
  160. #entry{overflow:hidden;margin:5px;border:1px solid #DDD;border-radius:0px;background:#fff;
  161. {block:IndexPage}width:250px;padding:16px;{/block:IndexPage}
  162. {block:PermalinkPage}width:500px;padding:26px;{/block:PermalinkPage}; transition: 0.7s ease;
  163. -o-transition: 0.7s ease;
  164. -moz-transition: 0.7s ease;
  165. -webkit-transition: 0.7s ease; }
  166. #entry img{max-width:250px;border-radius:0px;opacity:0.7; transition: 0.7s ease;
  167. -o-transition: 0.7s ease;
  168. -moz-transition: 0.7s ease;
  169. -webkit-transition: 0.7s ease; }
  170.  
  171. #entry:hover img{
  172. opacity:1;
  173.  
  174. transition: 0.7s ease;
  175. -o-transition: 0.7s ease;
  176. -moz-transition: 0.7s ease;
  177. -webkit-transition: 0.7s ease;
  178. }
  179.  
  180.  
  181.  
  182.  
  183. /* SIDEBAR */
  184.  
  185.  
  186. #sidebar{
  187. position:fixed;
  188. width:265px;
  189. margin-top:40px;
  190. text-transform:uppercase;letter-spacing:3px;font-size:8px;
  191. margin-left:-280px;
  192. text-align:center;}
  193.  
  194. .desc{padding:14px;border:1px double #ddd;z-index:3;background:#fff;border-radius:0px;border-left:0px double #ddd;border-right:0px double #ddd;padding-right:54px;}
  195.  
  196. .links a{
  197. display:inline-block;
  198. background:#fff;
  199. font-size:8px;
  200. text-transform:uppercase;
  201. letter-spacing:1px;
  202. opacity:0;
  203. margin-top:0px;
  204. padding:3px 3px;
  205.  
  206. transition: 0.7s ease;
  207. -o-transition: 0.7s ease;
  208. -moz-transition: 0.7s ease;
  209. -webkit-transition: 0.7s ease;}
  210. #sidebar:hover .links a{
  211. opacity:1;
  212. margin-top:0px;
  213. transition: 0.7s ease;
  214. -o-transition: 0.7s ease;
  215. -moz-transition: 0.7s ease;
  216. -webkit-transition: 0.7s ease;
  217. }
  218.  
  219. .links:hover .links2{
  220. opacity:1;
  221. transition: 0.7s ease;
  222. -o-transition: 0.7s ease;
  223. -moz-transition: 0.7s ease;
  224. -webkit-transition: 0.7s ease;
  225. }
  226.  
  227.  
  228.  
  229.  
  230. /* TITLES */
  231.  
  232. .blogtitle{
  233. font-size:25px;
  234. line-height:26px;
  235. margin:5px;
  236.  
  237. font-family:calibri;
  238. color:{color:Title};}
  239.  
  240.  
  241. @font-face { font-family: "stars"; src: url('http://static.tumblr.com/hcfbjje/sfRlpm8t0/starsfromoureyes.ttf'); }
  242. @font-face {font-family: "Clearly"; src:url('http://static.tumblr.com/0o02lya/Tx2mhbph4/princ___.ttf');}
  243.  
  244. .title {
  245. font-family:calibri;
  246. font-size:15px;text-transform:uppercase;letter-spacing:3px;
  247. line-height:33px;
  248. color:{color:Title};}
  249.  
  250. .quote {
  251. padding:14px;
  252. letter-spacing:1px;
  253. text-transform:uppercase;opacity:0.6;font-weight:bold;
  254.  
  255. color:{color:Title};}
  256.  
  257. .source {
  258. text-align:right;
  259. font-style:italic;
  260. text-transform:none;
  261. letter-spacing:0px;}
  262.  
  263. /* PERMALINKS */
  264.  
  265. #entry:hover .p {{block:IndexPage}opacity:1;margin-left:0px;{/block:IndexPage}}
  266. #entry .p {{block:IndexPage}
  267. position:absolute;
  268. width:250px;
  269. margin-left:-0px;
  270. opacity:1;
  271. margin-top:6px;
  272. text-align:center;
  273. transition: 0.7s ease;
  274. -o-transition: 0.7s ease;
  275. -moz-transition: 0.7s ease;
  276. -webkit-transition: 0.7s ease;
  277. {block:IndexPage}}
  278.  
  279. .p a{
  280. display:inline-block;
  281. background:#fff;
  282. padding:2px 6px 1px 6px;
  283. border:1px solid #DDD;
  284. border-top:0px solid;
  285. letter-spacing:1px;
  286. font-size:8px;
  287. text-transform:uppercase;
  288. }
  289.  
  290. .pp{
  291. padding:5px;
  292. margin-top:10px;
  293. font-size:8px;
  294. letter-spacing:1px;
  295. text-transform:uppercase;
  296. text-align:center;
  297.  
  298. border:1px solid #DDD;}
  299.  
  300.  
  301.  
  302. /* AUDIO */
  303.  
  304. .artcover {position:absolute;}
  305. .artcover img {width:42px;height:42px;float:left;}
  306. .audioplayer {width:20px;padding:3px 5px 5px 3px;overflow:hidden;}
  307. .audioinfo {margin-left:45px;padding:0px;}
  308. .i{display:block;padding:2px;}
  309. .i b, strong{text-transform:uppercase;}
  310. .player {
  311. position:absolute;
  312. background:#FFF;
  313. width:30px;
  314. height:30px;
  315. opacity:0.75;
  316. padding:6px;
  317. overflow:hidden;}
  318.  
  319. /* ASK */
  320.  
  321. .answer{margin:5px;}
  322.  
  323.  
  324. .perma{
  325. opacity:.0;
  326. margin-top:10px;
  327. font-size:8.5px;
  328. border-right:3px solid {color:link};
  329. border-left:3px solid {color:link};
  330. background:#fff;
  331. padding:3px;
  332. letter-spacing:3px;
  333. padding-left:7px;
  334. padding-right:7px;
  335. text-transform:uppercase;
  336. position:absolute;
  337. width:auto;
  338. margin-left:10px;
  339. z-index:1;
  340. transition: 0.4s ease;
  341. -o-transition: 0.4s ease;
  342. -moz-transition: 0.4s ease;
  343. -webkit-transition: 0.4s ease;}
  344.  
  345. #entry:hover .perma{
  346. opacity:.9;
  347. margin-left:10px;
  348. transition: 0.4s ease;
  349. -o-transition: 0.4s ease;
  350. -moz-transition: 0.4s ease;
  351. -webkit-transition: 0.4s ease;
  352.  
  353. }
  354.  
  355. .perma2{
  356. opacity:.0;
  357. margin-top:30px;
  358. font-size:8.5px;
  359. letter-spacing:3px;
  360. border-right:3px solid {color:link};
  361. border-left:3px solid {color:link};
  362. background:#fff;
  363. padding:3px;
  364. padding-left:7px;
  365. padding-right:7px;
  366. text-transform:uppercase;
  367. position:absolute;
  368. width:auto;
  369. margin-left:10px;
  370. z-index:1;
  371. transition: 0.7s ease;
  372. -o-transition: 0.7s ease;
  373. -moz-transition: 0.7s ease;
  374. -webkit-transition: 0.7s ease;}
  375.  
  376. #entry:hover .perma2{
  377. opacity:.9;
  378. transition: 0.7s ease;
  379. -o-transition: 0.7s ease;
  380. -moz-transition: 0.7s ease;
  381. -webkit-transition: 0.7s ease;
  382.  
  383. }
  384.  
  385.  
  386.  
  387. /* MISC */
  388.  
  389. ::selection {color:#FFF;background:{color:Link};}
  390. ::-moz-selection {color:#FFF;background:{color:Link};}
  391. ::-webkit-selection{color:#FFF;background:{color:Link};}
  392.  
  393. i, em{color:{color:Title};letter-spacing:1px;}
  394. b, strong{color:{color:Title};}
  395. ul,ol{margin:0px;margin-left:-10px;}
  396. p{padding:0px;margin:5px;}
  397. u{text-decoration:none;color:{color:Title};
  398. border-bottom:1px dotted {color:Title};}
  399. blockquote {margin:2px 10px;padding:2px;
  400. padding-left:2px;border-left:3px solid #DDD;}
  401.  
  402. img{ margin-bottom:-2px;}
  403. .notes img { width:0px;}
  404.  
  405. /* FONTS */
  406.  
  407. @font-face {font-family:Five;
  408. src:url('http://static.tumblr.com/xrmodho/KkQmjca6j/triforce.ttf');}
  409.  
  410.  
  411.  
  412.  
  413.  
  414. .fuck{
  415. position:relative;
  416. border-right:1px #ddd solid;
  417. border-left:1px #ddd solid;
  418. padding:10px;
  419. margin-top:10px;
  420. color:{color:title};
  421. width:500px;
  422. margin-left:25px;
  423. text-align:center;
  424. font-size:13px;
  425. text-transform:uppercase;
  426. letter-spacing:8px;
  427. }
  428.  
  429.  
  430.  
  431. #s-m-t-tooltip{
  432. max-width:300px;
  433. margin:15px;
  434. padding:2px 4px;
  435. border:1px solid #DDD;
  436. border-radius:4px;
  437. background:#FFF;
  438. color:#AAA;
  439. z-index:999999;
  440. font-size:8px;
  441. font-style:italic;
  442. text-transform:lowercase;
  443. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  444.  
  445.  
  446.  
  447. </style>
  448. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
  449. <meta name="viewport" content="width=820" />
  450.  
  451. </head>
  452.  
  453. <body>
  454.  
  455.  
  456.  
  457.  
  458. <div id="center">
  459. <div class="fuck">{Title}</div>
  460. <div id="sidebar">
  461. <div class="desc">{block:ifsidebarimage}<img src="{image:Sidebar}" width="220px" style="border-radius:0px;padding-bottom:15px;padding:5px;border:1px solid #ddd;"><br>{/block:ifsidebarimage}<br><div style="border-right:1px solid #ddd;width:220px;text-align:right;padding-right:10px;font-size:8.5px;">{Description}
  462. <br><a href="{text:Link 1}">{text:Link 1 Title}</a> <a href="{text:Link 2}">{text:Link 2 title}</a> <a href="{text:Link 3}">{text:Link 3 Title}</a>
  463. </div>
  464.  
  465.  
  466.  
  467. </div>
  468. </div>
  469. <div id="content">
  470. {block:Posts}
  471.  
  472. <div id="entry">
  473.  
  474. {block:Text}
  475. <div class="title">{Title}</div>{Body}{block:IndexPage}<br><div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  476. {block:Tags}#{Tag} {/block:Tags}
  477. {/block:HasTags}</div>
  478. {/block:IndexPage}
  479. {/block:Text}
  480.  
  481. {block:Link}
  482. <a href="{URL}"><span class="title">{Name} &raquo;</span></a>
  483. {block:Description}{Description}{/block:Description}{block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  484. {block:Tags}#{Tag} {/block:Tags}
  485. {/block:HasTags}</div>{/block:IndexPage}
  486. {/block:Link}
  487.  
  488. {block:Photo}
  489. {block:IndexPage}<div class="perma"><a title="share this post" href="{ReblogURL}">reblog</a> / <a title="note count" href="{Permalink}">{Notecount}</a></div><div class="perma2"><a title="posted {TimeAgo}" href="{PermalinkPage}">{12Hour}:{Minutes} {AmPm} </a></div>
  490. <a title="{NoteCountWithLabel}" href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="250px" /></a>{/block:IndexPage}{block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px" />{/block:PermalinkPage}
  491. {/block:Photo}
  492.  
  493. {block:Photoset}{block:IndexPage}<div class="perma"><a title="share this post" href="{ReblogURL}">reblog</a> / <a title="note count" href="{Permalink}">{Notecount}</a></div><div class="perma2"><a title="posted {TimeAgo}" href="{PermalinkPage}">{12Hour}:{Minutes} {AmPm} </a></div>
  494. {Photoset-250}{/block:IndexPage}
  495. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  496. {/block:Photoset}
  497.  
  498. {block:Quote}
  499. <div class="quote">{Quote}<div class="source">{Source}</div></div>{block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  500. {block:Tags}#{Tag} {/block:Tags}
  501. {/block:HasTags}</div>{/block:IndexPage}
  502. {/block:Quote}
  503.  
  504. {block:Chat}
  505. <div class="title">{Title}</div>
  506. {block:Lines}<div class="i {Alt}"><div class="{Alt} user_{UserNumber}">
  507. {block:Label}<b>{Label}</b> {/block:Label}{Line}</div></div>{/block:Lines}{block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  508. {block:Tags}#{Tag} {/block:Tags}
  509. {/block:HasTags}</div>{/block:IndexPage}
  510. {/block:Chat}
  511.  
  512. {block:Audio}
  513. {block:AlbumArt}<div class="artcover">
  514. <img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  515. <div class="player"><div class="audioplayer">{AudioPlayerWhite}</div></div>
  516. <div class="audioinfo"><div class="i"><b>TITLE: </b><span{block:TrackName} style="display: none;"{block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}</div><div class="i"><b>ARTIST: </b><span{block:Artist} style="display: none;"{block:Artist}>Unknown</span> {block:Artist}{Artist}{/block:Artist}</div>
  517. <div class="i"><b>PLAYS: </b><span{block:PlayCount} style="display: none;"{block:PlayCount}>Unknown</span>{block:PlayCount}{PlayCount}{/block:PlayCount}</div></div>
  518. {block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  519. {block:Tags}#{Tag} {/block:Tags}
  520. {/block:HasTags}</div>{/block:IndexPage}
  521. {/block:Audio}
  522.  
  523. {block:Video}
  524. {block:IndexPage}{Video-250}{/block:IndexPage}
  525. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  526. {block:Caption}{Caption}{/block:Caption}
  527. {block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  528. {block:Tags}#{Tag} {/block:Tags}
  529. {/block:HasTags}</div>{/block:IndexPage}
  530. {/block:Video}
  531.  
  532. {block:Answer}
  533. <div class="quote"><b><img src="{AskerPortraitURL-40}" width="40" align="left"
  534. style="margin-right:4px; margin-left:-3px; margin-top:-3px; border:1px solid #ddd; border-radius:2px; padding:2px;"/> <center> <u>{Asker}</u></b> </center><br> {Question} </div>
  535. <div class="answer" style="border-top:1px solid #ddd;text-align:center;">{Answer}</div>
  536. {block:IndexPage}<div style="text-transform:uppercase;font-size:9px;letter-spacing:1px;text-align:center;"><a title="{Timeago}" href="{Permalink}">{notecountwithlabel}</a><br>{block:HasTags}
  537. {block:Tags}#{Tag} {/block:Tags}
  538. {/block:HasTags}</div>{/block:IndexPage}
  539. {/block:Answer}
  540.  
  541.  
  542.  
  543. {block:PermalinkPage}{block:Date}<div class="pp">
  544. posted {TimeAgo} with {NoteCountWithLabel}
  545.  
  546. {block:RebloggedFrom}<br>via:
  547. <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} / source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  548. {/block:ContentSource}{/block:RebloggedFrom}
  549.  
  550. {block:HasTags}<br>tagged: {block:Tags}
  551. <a href="{TagURL}" title="{Tag}">{Tag}, </a>
  552. {/block:Tags}{/block:HasTags}
  553. </div>{/block:Date}
  554.  
  555. {block:NoteCount}<div style="margin-top:10px;">
  556. {block:PostNotes}{PostNotes}{/block:PostNotes}
  557. </div>{/block:NoteCount}{/block:PermalinkPage}
  558. </div>
  559.  
  560. {/block:Posts}
  561. </div>
  562. </div>
  563.  
  564.  
  565.  
  566.  
  567. </body></html>
Add Comment
Please, Sign In to add comment