Advertisement
harreyeh

theme 10: higher

May 20th, 2014
1,166
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.25 KB | None | 0 0
  1. <!--
  2.  
  3. _____________ ¶¶¶¶¶¶¶¶
  4. _________¶¶¶¶¶ _______¶¶¶¶¶
  5. _______¶¶¶ ________________¶¶¶
  6. _____¶¶¶ ____________________¶¶¶
  7. ____¶¶ ________________________¶¶
  8. ___¶ ______¶¶¶_____¶¶¶__________¶¶
  9. __¶ _________¶¶______¶¶__________¶¶
  10. _¶¶ __________¶¶______¶¶_________¶¶
  11. _¶ ____________¶¶______¶¶___¶¶¶___¶¶
  12. ¶¶ _____¶¶_____¶¶______¶¶_____¶¶__¶¶
  13. ¶¶ ___¶¶¶______¶¶______¶¶______¶¶_¶¶
  14. ¶¶ __¶¶¶¶¶__________________¶¶_¶¶_¶¶
  15. _¶ __¶¶__¶¶_________________¶¶____¶¶
  16. _¶¶ ______¶¶______________¶¶¶____¶¶
  17. __¶¶ ______¶¶____________¶¶¶_____¶¶
  18. ___¶¶ _______¶¶¶¶_____¶¶¶¶______¶¶
  19. ____¶¶ _________¶¶¶¶¶¶¶________¶¶
  20. ______¶¶ ____________________¶¶
  21. ________¶¶¶ ______________¶¶¶
  22. __________ ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
  23.  
  24. themesbyzsu.tumblr.com !! hi friend hope you enjoy
  25.  
  26.  
  27. -->
  28.  
  29. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  30.  
  31. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  32.  
  33. <head>
  34.  
  35. <title>{Title}</title>
  36. <link rel="shortcut icon" href="{Favicon}">
  37. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  38.  
  39.  
  40. <meta name="color:Background" content="#fff" />
  41. <meta name="color:Body" content="#333" />
  42. <meta name="color:HeaderColor" content="#8d8c8d" />
  43. <meta name="image:Header" content="" />
  44.  
  45. <meta name="color:Title" content="#333" />
  46. <meta name="color:Link" content="#333" />
  47. <meta name="color:Link Hover" content="#aaa" />
  48.  
  49. <meta name="text:Link1" content="link" />
  50. <meta name="text:Link1 URL" content="/" />
  51. <meta name="text:Link2" content="link" />
  52. <meta name="text:Link2 URL" content="/" />
  53. <meta name="text:Link3" content="link" />
  54. <meta name="text:Link3 URL" content="/" />
  55. <meta name="text:Link4" content="link" />
  56. <meta name="text:Link4 URL" content="/" />
  57. <meta name="text:Link5" content="link" />
  58. <meta name="text:Link5 URL" content="/" />
  59.  
  60. <meta name="text:Header Top Margin" content="200px" />
  61. <meta name="text:Header Left Margin" content="400px" />
  62.  
  63. <meta name="if:Tree Gif" content="1" />
  64.  
  65.  
  66.  
  67. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Lora:400,700,400italic,700italic|Lato:300,400' rel='stylesheet' type='text/css'>
  68.  
  69. <script type="text/javascript" src="http://static.tumblr.com/iddq6cw/4Gum31dpt/modernise.js">
  70. </script>
  71. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type"text/javascript"></script>
  72. <script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js" type="text/javascript"></script>
  73.  
  74. <script>
  75. (function($){ $(document).ready(function() {
  76. $("[title]").style_my_tooltips();
  77. });
  78. })(jQuery);
  79. </script>
  80.  
  81.  
  82. <script type="text/javascript">
  83. $(window).scroll(function() {
  84.  
  85. var headerH = $('.header').outerHeight(true);
  86. //this will calculate header's full height, with borders, margins, paddings
  87. var scrollTopVal = $(this).scrollTop();
  88. if ( scrollTopVal > headerH ) {
  89. $('.titlebox').css({'position':'fixed','left' :'100px', 'top':'200px'});
  90. $('.links').css({'opacity':'1'});
  91. $('#image').css({'display':'none'});
  92. $('.liner').css({'width':'80px'});
  93. $('.desc').css({'color':'#333'});
  94. $('#title a').css({'color':'#333'});
  95.  
  96. } else {
  97. $('.titlebox').css({'position':'fixed','left':'{text:Header Left Margin}', 'top':'{text:Header Top Margin}'});
  98. $('#image').css({'display':'block'});
  99. $('.links').css({'opacity':'0'});
  100. $('.liner').css({'width':'0px'});
  101. $('.desc').css({'color':'{color:Title}'});
  102. $('#title a').css({'color':'{color:Title}'});
  103. }
  104.  
  105.  
  106. });
  107. </script>
  108.  
  109. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type"text/javascript"></script>
  110. <script type="text/javascript">
  111. var timeOut;
  112. function scrollToTop() {
  113. if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
  114. window.scrollBy(0,-50);
  115. timeOut=setTimeout('scrollToTop()',10);
  116. }
  117. else clearTimeout(timeOut);
  118. }
  119. </script>
  120.  
  121.  
  122.  
  123. <style type="text/css">
  124.  
  125. body {
  126. background: {color:Background};
  127. position:absolute;
  128. width:100%;
  129. margin:0;
  130. font-size:12px;
  131. font-family:'Lato', serif;
  132. color:{color:Body};
  133. }
  134.  
  135. #s-m-t-tooltip{
  136. z-index: 9999;
  137. background:#fff;
  138. text-transform:uppercase;
  139. margin:-10px 5px;
  140. color:#444;
  141. padding:5px;
  142. background:rgba(255,255,255,1);
  143. font-family:Lato;
  144. font-size:10px;
  145. letter-spacing:1px;
  146. }
  147.  
  148. @font-face {
  149. font-family: Didot;
  150. src: url(http://static.tumblr.com/heqtwlw/sCYn1zhhs/ufonts.com_didot.ttf);
  151. }
  152.  
  153. @font-face {
  154. font-family: Nexa;
  155. src: url(http://static.tumblr.com/ssqfxic/bFGn5tfcr/nexa_light.otf);
  156. }
  157.  
  158.  
  159. blockquote {
  160. border-left: 3px solid #f1f1f1;
  161. padding:0 5px 0 5px;
  162. text-align: left;
  163. }
  164.  
  165. blockquote img {
  166. max-width: 100%;
  167. display: block;
  168. margin-bottom: 5px;
  169. }
  170.  
  171. blockquote blockquote {
  172. margin: 10px;
  173. padding: 10px;
  174. }
  175.  
  176. a {
  177. text-decoration:none;
  178. outline:none;
  179. color:{color:Link};
  180. -webkit-transition: all 0.5s ease-in-out;
  181. -moz-transition: all 0.5s ease-in-out;
  182. -o-transition: all 0.5s ease-in-out;
  183. }
  184.  
  185. a:hover {
  186. color:{color:Link Hover};
  187. -webkit-transition: all 0.5s ease-in-out;
  188. -moz-transition: all 0.5s ease-in-out;
  189. -o-transition: all 0.5s ease-in-out;
  190. }
  191.  
  192. h1 {
  193. font-family:'Playfair Display';
  194. text-indent:55px;
  195. font-style:italic;
  196. }
  197.  
  198. h1:before{
  199. content:"";
  200. position:absolute;
  201. width:50px;
  202. margin-top:15px;
  203. margin-left:-55px;
  204. background:black;
  205. height:1px;
  206. }
  207.  
  208. h2 {
  209. font-family:tahoma;
  210. text-transform:uppercase;
  211. padding:5px;
  212. color:{color:Link};
  213. }
  214.  
  215. h3 {
  216. font-family:'Playfair Display';
  217. font-style:italic;
  218. text-transform:lowercase;
  219. font-size:20px;
  220. }
  221.  
  222. /* SIDEBAR */
  223.  
  224. #headercolor{
  225. position:absolute;
  226. height:380px;
  227. width:100%;
  228. background:{color:HeaderColor} url('{image:Header}') no-repeat;
  229. background-position:right;
  230.  
  231. }
  232.  
  233.  
  234. .titlebox{
  235. position:fixed;
  236. width:300px;
  237. left:{text:Header Left Margin};
  238. top:{text:Header Top Margin};
  239. transition:0.4s;
  240. -webkit-transition:0.4s;
  241. -moz-transition:0.4s;
  242. -o-transition:0.4s;
  243. -ms-transition:0.4s;
  244. transition-delay:0.3s;
  245. -webkit-transition-delay:0.3s;
  246. -moz-transition-delay:0.3s;
  247. -o-transition-delay:0.3s;
  248. -ms-transition-delay:0.3s;
  249. z-index:999;
  250. }
  251. .desc{
  252. text-align:justify;
  253. z-index:9;
  254. color:{color:Title};
  255. font-size:11px;
  256. transition:0.6s;
  257. -webkit-transition:0.6s;
  258. -moz-transition:0.6s;
  259. -o-transition:0.6s;
  260. -ms-transition:0.6s;
  261. transition-delay:0.8s;
  262. -webkit-transition-delay:0.8s;
  263. -moz-transition-delay:0.8s;
  264. -o-transition-delay:0.8s;
  265. -ms-transition-delay:0.8s;
  266. }
  267.  
  268. .liner{
  269. position:relative;
  270. width:0px;
  271. height:1px;
  272. background:#ccc;
  273. display:inline-block;
  274. top:-9px;
  275. margin-left:10px;
  276. transition:0.6s;
  277. -webkit-transition:0.6s;
  278. -moz-transition:0.6s;
  279. -o-transition:0.6s;
  280. -ms-transition:0.6s;
  281. transition-delay:0.6s;
  282. -webkit-transition-delay:0.6s;
  283. -moz-transition-delay:0.6s;
  284. -o-transition-delay:0.6s;
  285. -ms-transition-delay:0.6s;
  286. }
  287.  
  288. .pagi{
  289. margin-top:10px;
  290. text-align:center;
  291. text-transform:uppercase;
  292. padding:5px;
  293. width:500px;
  294. border-top:1px solid #ccc;
  295. }
  296.  
  297. .pagi span{
  298. display:inline-block;
  299. padding:2px;
  300. width:90px;
  301. }
  302. .next{text-align:right;}
  303. .prev{text-align:left;}
  304.  
  305. .links a{
  306. font:9px 'Nexa';
  307. text-transform:uppercase;
  308. display:inline-block;
  309. text-align:center;
  310. padding:5px;
  311. color:black;
  312. border-bottom:1px solid transparent;
  313. transition:0.6s;
  314. -webkit-transition:0.6s;
  315. -moz-transition:0.6s;
  316. -o-transition:0.6s;
  317. -ms-transition:0.6s;
  318. }
  319.  
  320. .links a:hover{
  321. border-bottom:1px solid #ccc;
  322. transition:0.6s;
  323. -webkit-transition:0.6s;
  324. -moz-transition:0.6s;
  325. -o-transition:0.6s;
  326. -ms-transition:0.6s;
  327. }
  328.  
  329. #open{
  330. }
  331.  
  332. .links{
  333. margin-top:10px;
  334. position:relative;
  335. margin-left:-10px;
  336. text-align:center;
  337. transition:0.3s;
  338. -webkit-transition:0.3s;
  339. -moz-transition:0.3s;
  340. -o-transition:0.3s;
  341. -ms-transition:0.3s;
  342. width:300px;
  343. opacity:0;
  344. }
  345.  
  346. #list1{
  347. width:200px;
  348. text-align:left;
  349. border-left:1px solid #ccc;
  350. border-top:1px solid #ccc;
  351.  
  352. }
  353.  
  354. #list1 li{
  355. list-style:none;
  356. }
  357.  
  358. #list1 a:hover{
  359. padding:5px;
  360. }
  361. .new{
  362. margin-top:-5px;
  363. font:30px 'Nexa';
  364. text-transform:uppercase;
  365. font-weight:100;
  366. padding-left:100px;
  367. width:450px;
  368. }
  369. #title a{
  370. color:{color:Title};
  371. margin-left:-120px;
  372. transition-delay:0.8s;
  373. -webkit-transition-delay:0.8s;
  374. -moz-transition-delay:0.8s;
  375. -o-transition-delay:0.8s;
  376. -ms-transition-delay:0.8s;
  377. }
  378.  
  379. #image {
  380. -moz-transform: scaleX(-1);
  381. -o-transform: scaleX(-1);
  382. -webkit-transform: scaleX(-1);
  383. transform: scaleX(-1);
  384. margin-left:50px;
  385. position:fixed;
  386. top:200px;
  387. left:430px;
  388. z-index:1;
  389. }
  390.  
  391. /* POSTS */
  392.  
  393.  
  394. #entries {
  395. font-size:10px;
  396. left: 470px;
  397. margin-top:400px;
  398. position:absolute;
  399. text-align: justify;
  400. }
  401.  
  402. #post {
  403. font-size:10px;
  404. width: 500px;
  405. padding:5px;
  406. color:{color:Body};
  407. text-align: left;
  408. overflow:hidden;
  409. border-left:none;
  410. }
  411.  
  412. #post:before{
  413. content:'';
  414. position:absolute;
  415. width:100px;
  416. height:1px;
  417. margin-left:410px;
  418. margin-top:-6px;
  419. background:#ccc;
  420. }
  421.  
  422. #info:before{
  423. content:'';
  424. position:absolute;
  425. height:100px;
  426. width:1px;
  427. float:right;
  428. margin-top:25px;
  429. margin-left:-6px;
  430. background:#ccc;
  431. }
  432.  
  433. #info {
  434. margin-left:510px;
  435. line-height:20px;
  436. border-bottom:1px solid #ccc;
  437. border-left:1px solid #ccc;
  438. font-family:Didot;
  439. text-transform:uppercase;
  440. letter-spacing:-3px;
  441. word-spacing:3px;
  442. font-size:20px;
  443. padding:5px;
  444. display:block;
  445.  
  446. }
  447.  
  448. #info a{
  449. color:black;
  450.  
  451. }
  452.  
  453. ol.notes {
  454. padding: 0px;
  455. margin: 10px 10px;
  456. list-style-type:upper-roman;
  457. text-align:left;
  458. position: relative;
  459. z-index: 2;
  460. text-transform: uppercase;
  461. font-size: 9px;
  462. letter-spacing:1px;
  463. clear:both;}
  464.  
  465. ol.notes a {color: {color:Link};}
  466.  
  467. ol.notes li.note {padding: 10px;}
  468.  
  469. ol.notes li.note img.avatar {
  470. vertical-align: -4px;
  471. margin-right: 10px;
  472. width: 16px;
  473. height: 16px;}
  474.  
  475. ol.notes li.note span.action {font-weight: normal;}
  476.  
  477. ol.notes li.note .answer_content {font-weight: normal;}
  478.  
  479. ol.notes li.note blockquote {
  480. border-color: #eee;
  481. padding: 4px 10px;
  482. margin: 10px 0px 0px 25px;}
  483.  
  484. ol.notes li.note blockquote a {text-decoration: none;}
  485.  
  486. /* QUESTION */
  487.  
  488. #question img{
  489. float:right;
  490. position:relative;
  491. margin-top:-5px;
  492. margin-right:-5px;
  493. border-radius:50%;
  494. }
  495.  
  496. #question {
  497. border-bottom:1px solid #ccc;
  498. padding:10px;
  499. }
  500.  
  501. .question{
  502. font-family:'Playfair Display';
  503. font-size:15px;
  504. color:#333;
  505. font-weight:700;
  506. }
  507.  
  508. .question a{
  509. color:#333;
  510. font-style:italic;
  511. }
  512.  
  513. .question blockquote{
  514. border-left-color:#ddd;
  515. }
  516.  
  517.  
  518.  
  519. /* AUDIO */
  520.  
  521. #audio{
  522. }
  523.  
  524. .albumart{
  525. width:100px;
  526. height:100px;
  527. background:url('http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg');
  528. background-size:100px 100px;
  529. }
  530.  
  531. #audio img{
  532. width:100px;
  533. height:100px;
  534. }
  535.  
  536. #audio:hover #audioplayer{
  537. opacity:1;
  538. -moz-transition-duration:.5s;
  539. -webkit-transition-duration:.5s;
  540. -o-transition-duration:.5s;
  541. }
  542.  
  543. #audioplayer{
  544. float:left;
  545. position:absolute;
  546. opacity:0;
  547. width:30px;
  548. margin-top:30px;
  549. background:white;
  550. border:5px solid white;
  551. margin-left:30px;
  552. overflow:hidden;
  553. -moz-transition-duration:.5s;
  554. -webkit-transition-duration:.5s;
  555. -o-transition-duration:.5s;
  556. }
  557.  
  558. #audiostuff{
  559. position:absolute;
  560. margin-top:-100px;
  561. width:380px;
  562. padding:10px;
  563. margin-left:100px;
  564. }
  565.  
  566. .track{
  567. font-family:'Playfair Display'; font-weight:700;font-style:italic; font-size:20px; margin-left:45px; text-transform:none;
  568. }
  569.  
  570. .track:before{
  571. content:"";
  572. position:absolute;
  573. width:35px;
  574. margin-top:15px;
  575. height:1px;
  576. margin-left:-40px;
  577. background:black;
  578. }
  579.  
  580. .otherstuff{
  581. border-left:1px solid black;
  582. margin-top:-11px;
  583. margin-left:20px;
  584. padding:15px 5px 8px 5px;
  585. font-family:'Lato';
  586. text-transform:uppercase;
  587. letter-spacing:1px;
  588. }
  589.  
  590. #tags {
  591. text-align:left;
  592. padding: 5px;
  593. border-top:none;
  594. border-top:1px solid #f0f0f0;
  595. width:500px;
  596. border-left:none;
  597. font-family:Playfair Display;
  598. margin-bottom:70px;
  599. }
  600.  
  601. #tags a{
  602. font-style:italic;
  603. }
  604.  
  605. .date {
  606. font-style:normal;
  607. font-family:Didot;
  608. }
  609.  
  610. #credit a{
  611. position:fixed;
  612. right:20px;
  613. bottom:20px;
  614. padding:4px 5px;
  615. background:black;
  616. font-size:11px;
  617. color:white;
  618. border:1px solid black;
  619. -moz-transition-duration:1s;
  620. -webkit-transition-duration:1s;
  621. -o-transition-duration:1s;
  622. }
  623.  
  624. #credit a:hover {
  625. opacity:1;
  626. color:black;
  627. background:white;
  628. border-color:black;
  629. -moz-transition-duration:1s;
  630. -webkit-transition-duration:1s;
  631. -o-transition-duration:1s;
  632. }
  633.  
  634. #topheader{
  635. width:100%;
  636. height:300px;
  637. }
  638.  
  639.  
  640.  
  641. </style>
  642. <style type="text/css">{CustomCSS}</style>
  643. </head>
  644.  
  645. <body>
  646.  
  647. <div id="headercolor"></div>
  648.  
  649. <div class="titlebox">
  650. <div class="new">
  651. <span id="title"><a href="/">{Title}</a></span>
  652. <div class="liner"></div>
  653. </div>
  654. <div class="desc">{description}
  655. </div>
  656. <div class="links">
  657. <a href="{text:Link1 URL}">{text:Link1}</a>
  658. <a href="{text:Link2 URL}">{text:Link2}</a>
  659. <a href="{text:Link3 URL}">{text:Link3}</a>
  660. <a href="{text:Link4 URL}">{text:Link4}</a>
  661. <a href="{text:Link5 URL}">{text:Link5}</a>
  662. </div>
  663. </div>
  664. </div>
  665. {block:IfTreeGif}
  666. <div id="image"><img src="http://media.giphy.com/media/i9zULAkEBgiJ2/giphy.gif"></div>
  667. {/block:IfTreeGif}
  668.  
  669. <div id="entries">
  670. {block:Posts}
  671.  
  672. <div id="info">
  673. <a href="{Permalink}">{NoteCountWithLabel}</a></div>
  674. <div id="post">
  675.  
  676. {block:Text}{block:Title}<h1>{title}</h1>{/block:Title}{Body}{/block:Text}
  677.  
  678. {block:Quote}<h3>“{Quote}” </h3>
  679. <div style="text-align:right; padding-bottom:5px;">— {Source}</div>{/block:Quote}
  680.  
  681. {block:Link}<a href="{URL}" class="link" {Target}> <h2>{Name}</h2></a>
  682. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  683.  
  684. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  685. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  686.  
  687. {block:Chat}{block:Title}<h1>{Title}</h1><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  688. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  689.  
  690. {block:Audio}
  691. <div id="audio">
  692. <div id="audioplayer">
  693. {block:AudioPlayer}
  694. {AudioPlayerWhite}
  695. {/block:AudioPlayer}</div>
  696. <div class="albumart">
  697. {block:AlbumArt}
  698. <img src="{AlbumArtURL}"/>
  699. {/block:AlbumArt}
  700. </div>
  701. <div id="audiostuff">
  702. {block:TrackName}<span class="track">{TrackName}{/block:TrackName}</span>
  703. <div class="otherstuff">
  704. {block:Artist}{Artist}{/block:Artist} <br>
  705. {block:Album}{Album}{/block:Album}<br>
  706. {block:Playcount}{FormattedPlayCount} plays{/block:Playcount}</div>
  707. </div>
  708. {block:Caption}{Caption}{/block:Caption}
  709. </div>
  710. {/block:Audio}
  711.  
  712. {block:Answer}
  713. <div id="question">
  714. <img src="{AskerPortraitURL-30}">
  715. <span class="question">
  716. {Asker}</span> asked:
  717. <blockquote>{Question}</blockquote>
  718. </div>
  719. {Answer}{/block:Answer}
  720.  
  721.  
  722. </div>
  723.  
  724. <div id="tags">
  725. {/block:NoteCount}{block:RebloggedFrom} {block:Date}<a class="date" href="{Permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} [<a href="{ReblogParentURL}">via</a>{block:ContentSource} / <a href="{SourceURL}">source</a>{block:ContentSource}]{/block:RebloggedFrom}{block:HasTags}
  726. {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  727. </div>
  728. {/block:Posts}
  729.  
  730. {block:PostNotes}{PostNotes}{/block:PostNotes}
  731.  
  732. <div class="pagi">{block:Pagination}
  733. <span class="prev">
  734. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  735. </span>
  736. <span class="pages">page {CurrentPage} of {TotalPages}</span>
  737.  
  738. <span class="next">{block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}</span>
  739. {/block:Pagination}</div>
  740. </div>
  741.  
  742.  
  743. <div id="credit"><a href="http://bonruffians.tumblr.com">✿</a></div>
  744. </body>
  745. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement