Advertisement
faedethemes

Solitude Theme

Jan 19th, 2013
31,549
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.55 KB | None | 0 0
  1. <!--
  2. Solitude Theme by faede - inspired by sunrisen.tumblr.com
  3. ---------------------------------
  4. main blog: faede.tumblr.com
  5. theme blog: faedethemes.tumblr.com
  6. -->
  7. <html lang="en">
  8. <head>
  9.  
  10. </script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11.  
  12. <link href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
  13.  
  14.  
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml">
  17. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script type="text/javascript"
  21. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22.  
  23. <title>{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <meta name="font:sidebar" content="courier new"/>
  28. <meta name="font:links" content=""/>
  29. <meta name="font:posts" content=""/>
  30.  
  31. <meta name="color:background" content="#ffffff"/>
  32. <meta name="color:body" content="#000000"/>
  33. <meta name="color:hover" content="#ffffff"/>
  34. <meta name="color:links" content="#000"/>
  35.  
  36.  
  37. <meta name="text:link one" content=""/>
  38. <meta name="text:link one title" content=""/>
  39. <meta name="text:link two" content=""/>
  40. <meta name="text:link two title" content=""/>
  41. <meta name="text:link three" content=""/>
  42. <meta name="text:link three title" content=""/>
  43. <meta name="text:link four" content=""/>
  44. <meta name="text:link four title" content=""/>
  45.  
  46. <style type="text/css">
  47.  
  48. ::-webkit-scrollbar-thumb:vertical{
  49. background-color:#C2C8CF;
  50. -moz-border-radius:10px;
  51. -webkit-border-radius:10px;
  52. }
  53.  
  54. iframe#tumblr_controls{
  55.  
  56. -webkit-filter:invert(95%);
  57.  
  58. margin-top:0px;
  59. position:fixed !important;
  60.  
  61. opacity:0.7;-webkit-transition: all 0.5s ease-out;
  62. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  63.  
  64. }
  65.  
  66. iframe#tumblr_controls:hover{
  67. margin-top:0px;
  68.  
  69. opacity:1;-webkit-transition: all 0.5s ease-out;
  70. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  71.  
  72. }
  73.  
  74. .wrapper{
  75. width:1000px;
  76. margin:0px auto;
  77. }
  78.  
  79. ::-webkit-scrollbar {width: 6px; height: 4px; background: #d8d8d8; }
  80. ::-webkit-scrollbar-thumb { background-color: #130C11;}
  81.  
  82. body{
  83. margin:0px;
  84. background-attachment: fixed;
  85. background-repeat: repeat;
  86. background-color:{color:background};
  87. background-attachment: fixed;
  88. background-repeat: repeat;
  89. font-size: 11px;
  90. font-family: Lucida Sans;
  91. line-height:11px;
  92. color: {color:body};
  93. }
  94.  
  95. a:link, a:active, a:visited{
  96. color: {color:links};
  97. text-decoration: none;
  98. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  99. }
  100.  
  101. a:hover{
  102. color: {color:hover};
  103. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  104. }
  105.  
  106. .entry {
  107. margin:8px;
  108. padding: 5px;
  109. float:left;
  110. background-color:transparent;
  111. {block:IndexPage}
  112. width:230px;
  113. {/block:IndexPage}
  114. {block:PermalinkPage}
  115. width:650px;
  116. {/block:PermalinkPage}
  117. padding-bottom:0px;
  118. font-family:{font:posts};
  119. font-size: 10px;
  120. line-height:14px;
  121. }
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130. .entry:hover{{block:indexpage} {color:post border hover};{/block:indexpage}-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}
  131.  
  132.  
  133.  
  134. #sidebar{
  135. opacity:1;
  136. border: 0px solid #888;
  137. background:transparent;
  138. margin-top: 0px;
  139. margin-left: 100px;
  140. overflow:hidden;
  141. font-family:{font:sidebar};
  142. text-transform:undercase;
  143. font-size: 10px;
  144. padding-top:0px;
  145. width: 800px;
  146. text-align:center;
  147. padding: 4px;
  148. height:auto;
  149. z-index:1;
  150. position:relative;
  151. }
  152.  
  153. #posts {
  154. width: 1040px;
  155. background: transparent;
  156. margin-left:0px;
  157. padding-left: 2px;
  158. padding-right: 2px;
  159. padding-top:10px;
  160. margin-top:0px;
  161. float:left;
  162. }
  163.  
  164. .img{{block:ifimagefade}opacity:0.7;background-color:white;{/block:ifimagefade}}-webkit-transition: all .6s ease-out;-moz-transition: all .6s ease-out;transition: all .6s ease-out;}
  165.  
  166. .img:hover{opacity:1;}
  167.  
  168. #infscr-loading{
  169. bottom: -70px;
  170. position: absolute;
  171. left: 50%;
  172. margin-left:-8px;
  173. width:16px;
  174. height:11px;
  175. overflow:hidden;
  176. margin-bottom: 50px;
  177. }
  178.  
  179. .credit {opacity:0.7;font-size:23px;position:fixed;bottom:11px;right:5px;color:#000;}
  180.  
  181.  
  182. .title{
  183. font-family:{font:sidebar};
  184. font-size: 13px;
  185. line-height:15px;
  186. color: ;
  187. text-transform:uppercase;
  188. font-weight: ;
  189. }
  190.  
  191. blockquote{
  192. padding:0px 0px 2px 5px;
  193. margin:0px 0px 2px 10px;
  194. border-left: 1px dotted #555555;
  195. }
  196.  
  197. a img{border: 0px;}
  198.  
  199. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  200. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  201. .user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
  202. .notes img{width:10px; position:relative; top:3px;}
  203.  
  204. <--ses-->
  205. small{font-size: 90%;}
  206.  
  207.  
  208.  
  209. .blogtitle{
  210. font-family: 'Oleo Script', cursive;
  211. font-size:47px;
  212. width:auto;
  213. padding:3px;
  214. letter-spacing:-1px;
  215. text-transform:none;
  216. text-align:center;
  217. line-height:60px;
  218. -webkit-transition: all 1s ease-out;
  219. -moz-transition: all 1s ease-out;transition: all 1s ease-out;
  220. }
  221.  
  222. .blogtitle:hover{
  223. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  224. }
  225.  
  226. .info{margin-left:0px;padding-top:5px;padding-bottom:8px;}
  227.  
  228.  
  229. .navi{padding-top:5px;padding-bottom:8px;}
  230.  
  231. .nav{font-family:{font:links};font-size:10px;font-style:none;text-transform:uppercase;text-align:center;float:center;}
  232.  
  233. .navi a{background:#ffffff;color:;padding:5px;}
  234. .navi a:hover{background:#000;color:white;}
  235.  
  236. .entry .perma a {
  237. color: #000;
  238. }
  239.  
  240. .entry .perma{
  241. position:absolute;
  242. margin-top: -10px;
  243. margin-left:0px;
  244.  
  245. width:220px;
  246.  
  247. color: #000;
  248. height:18px;
  249. background:#fff;
  250. overflow:hidden;
  251. font-size:10px;
  252. line-height:18px;
  253. padding-left:5px;
  254. padding-bottom:2px;
  255. padding-right:5px;
  256. padding-top:2px;
  257. text-align:center;
  258. letter-spacing:2px;
  259. font-family: {font:posts};
  260. text-transform:uppercase;
  261. opacity:0.0;
  262. -webkit-transition: all 0.4s ease-in-out;
  263. -moz-transition: all 0.4s ease-in-out;
  264. transition: all 0.4s ease-in-out;
  265. }
  266.  
  267. .entry:hover .perma{
  268. margin-top: 0px;
  269. margin-left: 0px;
  270. opacity:1;
  271. -webkit-transition: all 0.4s ease-in-out;
  272. -moz-transition: all 0.4s ease-in-out;
  273. transition: all 0.4s ease-in-out;
  274. }
  275.  
  276. .entry:hover .perma:hover a{
  277. color: #fff;
  278. -webkit-transition: all 0.3s linear;
  279. -moz-transition: all 0.3s linear;
  280. transition: all 0.3s linear;
  281. }
  282.  
  283. .entry:hover .perma:hover{
  284. opacity: 1;
  285. color: #fff;
  286. background: #000;
  287. opacity:1;
  288. -webkit-transition: all 0.3s linear;
  289. -moz-transition: all 0.3s linear;
  290. transition: all 0.3s linear;
  291. }
  292.  
  293.  
  294. </style>
  295.  
  296. {block:IndexPage}
  297. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  298. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  299.  
  300. <script type="text/javascript">
  301. $(window).load(function () {
  302. var $content = $('#posts');
  303. $content.masonry({itemSelector: '.entry'}),
  304. $content.infinitescroll({
  305. navSelector : 'div#pagination',
  306. nextSelector : 'div#pagination a#nextPage',
  307. itemSelector : '.entry',
  308. loading: {
  309. finishedMsg: '',
  310. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  311. },
  312. bufferPx : 600,
  313. debug : false,
  314. },
  315. // call masonry as a callback.
  316. function( newElements ) {
  317. var $newElems = $( newElements );
  318. $newElems.hide();
  319. // ensure that images load before adding to masonry layout
  320. $newElems.imagesLoaded(function(){
  321. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  322. });
  323. });
  324. });
  325. </script>
  326.  
  327. {/block:IndexPage}
  328.  
  329. <meta name="viewport" content="width=800" />
  330.  
  331. </head>
  332. <body>
  333.  
  334. <div class="wrapper">
  335. <div id="sidebar">
  336. <div class="blogtitle"><a href="/">{Title}</a></div>
  337. <div class="navi">
  338. <a href="/" class="nav">home</a> <a href="/ask" class="nav">message</a> {block:iflinkonetitle} <a href="{text:link one}" class="nav">{text:link one title}</a>{/block:iflinkonetitle} {block:iflinktwotitle} <a href="{text:link two}" class="nav">{text:link two title} </a>{/block:iflinktwotitle} {block:iflinkthreetitle} <a href="{text:link three}" class="nav">{text:link three title}</a>{/block:iflinkthreetitle} {block:iflinkfourtitle} <a href="{text:link four}" class="nav">{text:link four title}</a>{/block:iflinkfourtitle} <a href="http://faede.tumblr.com" class="nav">credit</a>
  339. </div>
  340. <div class="info">{description}</div>
  341.  
  342.  
  343. </div></div>
  344. <div class="wrapper">
  345. <div class="header">
  346.  
  347. <div class="left">
  348.  
  349. <div id="posts">
  350.  
  351. {block:Posts}
  352. <div class="entry">
  353.  
  354. {block:Text}
  355. {block:IndexPage}
  356. {/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
  357. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> • <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  358. {/block:Text}
  359.  
  360. {block:Link}
  361. {block:IndexPage}
  362. {/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
  363. {block:Description}{Description}{/block:Description}
  364. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> • <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  365. {block:Link}
  366.  
  367. {block:Photo}
  368. {block:IndexPage}
  369. <div class="perma">
  370. <a href="{ReblogURL}" target="blank">reblog</a> • <a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  371. {/block:IndexPage}
  372. {block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="230"/></a></div>{LinkCloseTag}{/block:IndexPage}
  373. {block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="800px"/></a>{LinkCloseTag}{/block:PermalinkPage}
  374. {/block:Photo}
  375.  
  376.  
  377. {block:Photoset}
  378. <center>
  379. {block:IndexPage}
  380. {Photoset-205}
  381. {block:IndexPage}
  382. {/block:IndexPage}
  383. </center>
  384. <center>{block:PermalinkPage}{Photoset-410}{/block:PermalinkPage}</center>
  385. {/block:Photoset}
  386.  
  387. {block:Quote}
  388. {block:IndexPage}
  389. {/block:IndexPage}
  390. {Quote}</span>
  391. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> • <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  392. {/block:Quote}
  393.  
  394. {block:Chat}
  395. {block:IndexPage}
  396. {/block:IndexPage}
  397. {block:Title}<span class="title">{Title}</span>{/block:Title}
  398. <ul class="chat">
  399. {block:Lines}
  400. <li class="user_{UserNumber}">
  401. {block:Label}
  402. <span class="label">{Label}</span>
  403. {/block:Label}
  404.  
  405. {Line}
  406. </li>
  407. {/block:Lines}
  408. </ul>
  409. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> • <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  410. {/block:Chat}
  411.  
  412. {block:Audio}
  413. {block:IndexPage}
  414. {/block:IndexPage}
  415. <center><div style="width:230px; height:28px;"><div style="float:left">{AudioPlayerBlack}</div><div style="margin-top:10px; float:right;">
  416. {block:ExternalAudio}{/block:ExternalAudio}</div></div></center>
  417. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> • <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  418. {/block:Audio}
  419.  
  420. {block:Video}
  421. {block:IndexPage}
  422. {/block:IndexPage}
  423. <center>
  424. {block:IndexPage}
  425. {Video-250}
  426. {/block:IndexPage}
  427. </center>
  428. <center>{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>
  429. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a> / <a href="{ReblogURL}">REBLOG</a></div>{/block:IndexPage}
  430. {block:Video}
  431.  
  432. {block:Answer}
  433. {block:IndexPage}
  434. {/block:IndexPage}
  435. <img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;"/>
  436. <b>{Asker}</b>: <b>{Question}</b>{Answer}
  437. {block:IndexPage}<div class="perm"><a href="{Permalink}">{NoteCount}</a></div>{/block:IndexPage}
  438. {/block:Answer}
  439.  
  440.  
  441. {block:PermalinkPage}
  442. {block:Date}
  443. <center>
  444. {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
  445. <br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
  446. {/block:Date}
  447.  
  448. {/block:PermalinkPage}
  449.  
  450. {block:PostNotes}{PostNotes}
  451. {/block:PostNotes}
  452. </div>
  453.  
  454.  
  455. {/block:Posts}
  456. </div>
  457. </div>
  458. <div class="right">
  459. </div>
  460. <div class="footer">
  461. <br>
  462. </div>
  463. </div>
  464. </body>
  465. </html>
  466. <div style="position:fixed;right:0px;bottom:-425px;">
  467. <---DONT REMOVE---->
  468. {block:IndexPage}
  469. {block:Pagination}
  470. <div id="pagination">
  471. {block:NextPage}
  472. <a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
  473. {/block:NextPage}
  474. {block:PreviousPage}
  475. <a href="{PreviousPage}">&larr;&nbsp;</a>
  476. {/block:PreviousPage}
  477. </div>
  478. {/block:Pagination}
  479. {/block:IndexPage}</div>
  480. </div>
  481. <div class="credit"><a href="http://faedethemes.tumblr.com/">ƒ</a></div>
  482.  
  483. </body>
  484. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement