Belgrravia

Each Coming Night

Dec 19th, 2014
663
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.74 KB | None | 0 0
  1. <!--
  2. Each coming night
  3. theme by kalopsiathemes
  4. Please do not
  5. -remove the credit
  6. -steal parts of code
  7. -use as a base
  8.  
  9. Feel free to
  10. -edit parts of the theme
  11. -ask me any questions
  12. -->
  13. <!DOCTYPE html>
  14. <head>
  15. <link href='http://fonts.googleapis.com/css?family=Cabin|Arimo:400,700|Raleway:400,500|Open+Sans' rel='stylesheet' type='text/css'>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21. <meta name="image:header" content="">
  22. <meta name="color:title" content="#404040">
  23. <meta name="color:background" content="#ffffff">
  24. <meta name="color:sidebar background" content="#f1f1f1">
  25. <meta name="color:link" content="#838383">
  26. <meta name="color:link hover" content="#b8b8b8">
  27. <meta name="color:nav" content="#838383">
  28. <meta name="color:nav hover" content="#838383">
  29. <meta name="color:text" content="#838383">
  30.  
  31. <meta name="if:500px posts" content="1"/>
  32. <meta name="if:400px posts" content="0"/>
  33. <meta name="text:link1" content="">
  34.  
  35. <meta name="text:link1 url" content="/">
  36.  
  37. <meta name="text:link2" content="">
  38.  
  39. <meta name="text:link2 url" content="/">
  40. <meta name="text:link3" content="">
  41.  
  42. <meta name="text:link3 url" content="/">
  43.  
  44. <meta name="text:link4" content="">
  45.  
  46. <meta name="text:link4 url" content="/">
  47.  
  48. <meta name="text:link5" content="">
  49.  
  50. <meta name="text:link5 url" content="/">
  51.  
  52. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  54.  
  55. <script>
  56.  
  57. (function($){
  58.  
  59. $(document).ready(function(){
  60.  
  61. $("a[title]").style_my_tooltips({
  62.  
  63. tip_follows_cursor:true,
  64.  
  65. tip_delay_time:30,
  66.  
  67. tip_fade_speed:300,
  68.  
  69. attribute:"title"
  70.  
  71. });
  72.  
  73. });
  74.  
  75. })(jQuery);
  76.  
  77. </script>
  78.  
  79. <style type="text/css">
  80.  
  81. #s-m-t-tooltip {max-width:400px;
  82. padding:2px;
  83. margin:10px 0px 0px 10px;
  84. padding:1px 4px;
  85. background-color:{color:sidebar background};
  86. text-transform:uppercase;
  87. font-size:7px;
  88. letter-spacing:2px;
  89. font-weight:700;
  90. font-family: 'Arimo', sans-serif;
  91. color:{color:background};
  92. z-index:999;
  93.  
  94. }
  95.  
  96. body {
  97. background:{color:background};
  98. color:{color:text};
  99. font-size:11px;
  100. margin:0;
  101. font-weight:400;
  102. font-family: 'Open Sans', sans-serif;
  103. line-height:16px;}
  104.  
  105.  
  106. blockquote {
  107. border-left:1px solid {color:link};
  108. padding-left:5px;
  109. margin:5px;
  110. margin-left:20px;
  111. word-wrap:break-word;
  112. padding-top:2px;
  113. padding-bottom:2px;
  114. }
  115.  
  116. #posts {
  117. {block:If500pxposts}
  118. width:500px;
  119. {/block:If500pxposts}
  120. {block:If400pxposts}
  121. width:400px;
  122. {/block:If400pxposts}
  123. margin:auto;
  124. }
  125.  
  126. #posts img {
  127. {block:If500pxposts}
  128. max-width:500px;
  129. {/block:If500pxposts}
  130. {block:If400pxposts}
  131. max-width:400px;
  132. {/block:If400pxposts}
  133. }
  134.  
  135. #posts, #posts img, #posts blockquote {
  136. font-size:11px;
  137. color:{color:text};
  138. }
  139.  
  140.  
  141. small {
  142. font-size:10px;
  143. }
  144.  
  145. big {
  146. font-size:12px;
  147. }
  148.  
  149.  
  150. h2 {
  151. font-size:15px;
  152. color:{color:text};
  153. text-transform:uppercase;
  154. font-weight:700;
  155. font-family: 'Arimo', sans-serif;
  156. }
  157.  
  158. h1 {
  159. font-size:9px;
  160. text-transform:uppercase;
  161. Text-align:center;
  162. letter-spacing:1px;
  163. color:{color:text};
  164. }
  165.  
  166. h3 {
  167. font-size:13px;
  168. color:{color:text};
  169. letter-spacing:1px;
  170. text-transform:uppercase;
  171. font-weight:700;
  172. font-family: 'Arimo', sans-serif;
  173. }
  174.  
  175.  
  176.  
  177. #content {
  178. padding:0px;
  179.  
  180. width:100%;
  181.  
  182. width:500px;
  183.  
  184. margin:auto;
  185.  
  186. padding-top:150px;
  187. padding-bottom:80px;
  188. }
  189.  
  190. #sidebarimage {
  191. margin-top:0px;
  192. height:300px;
  193. width:100%;
  194. background-color:{color:sidebar background};
  195. }
  196.  
  197. #sidebarimage img {
  198. height:300px;
  199. width:100%;
  200. margin-top:0px;
  201. }
  202.  
  203. #top {
  204. width:100%;
  205. padding-top:15px;
  206. padding-bottom:10px;
  207. margin-top:0px;
  208. position:fixed;
  209. margin-top:0px;
  210. height:30px;
  211. word-wrap:break-word;
  212. background-color:{color:sidebar background};
  213. border-bottom:1px solid {color:sidebar background};
  214. z-index:99999;
  215. }
  216.  
  217. #nav {
  218. display:inline;
  219. font-size:11px;
  220. text-transform:uppercase;
  221. color:{color:nav};
  222. }
  223.  
  224. #nav a {
  225. color:{color:nav};
  226.  
  227. }
  228.  
  229. #nav a:hover {
  230. color:{color:nav hover};
  231. }
  232.  
  233. .title {
  234. padding-left:10px;
  235. display:inline;
  236. margin-right:2px;
  237. color:{color:title};
  238. text-transform:uppercase;
  239. font-size:18px;
  240. font-weight:700;
  241. font-family: 'Arimo', sans-serif;
  242.  
  243. }
  244.  
  245. .description {
  246. padding-left:10px;
  247. font-size:10px;
  248. display:inline;
  249. color:{color:title};
  250. padding-top:5px;
  251. text-align:center;
  252. }
  253.  
  254.  
  255. a:link, a:visited {
  256. text-decoration:none;
  257. color:{color:link};
  258. }
  259.  
  260. a:hover {
  261. font-style:italic;
  262. color:{color:link hover};
  263. }
  264.  
  265. #permalink {
  266. margin-top:20px;
  267. font-size:9px;
  268. font-weight:400;
  269. letter-spacing:1px;
  270. font-family: 'Arimo', sans-serif;
  271. text-transform:lowercase;
  272. padding-bottom:80px;
  273. }
  274.  
  275. #permalink a {
  276. margin:0px;
  277. float:left;
  278. }
  279.  
  280. #permalink a:hover {
  281. font-style:italic;
  282. }
  283.  
  284. .reblog {
  285. {block:IndexPage}
  286. display:inline;
  287. float:right;
  288. {/block:IndexPage}
  289. }
  290. .tags {
  291. text-transform:lowercase;
  292. letter-spacing:1px;
  293. word-break:break-word;
  294. font-size:8px;
  295. font-weight:400;
  296. font-family: 'Arimo', sans-serif;
  297. {block:If500pxposts}
  298. width:320px;
  299. text-align:right;
  300. {/block:If500pxposts}
  301. {block:If400pxposts}
  302. width:220px;
  303. text-align:right;
  304. {/block:If400pxposts}
  305. {block:IndexPage}
  306. display:none;
  307. {/block:IndexPage}
  308. {block:PermalinkPage}
  309. display:inline;
  310. float:right;
  311. text-align:right;
  312. {/block:PermalinkPage}
  313. }
  314.  
  315. #pagenotes{
  316. margin: 10px auto;
  317. font-size: 11px;
  318. {block:If500pxposts}
  319. width:500px;
  320. {/block:If500pxposts}
  321. {block:If400pxposts}
  322. width:400px;
  323. {/block:If400pxposts}
  324. }
  325.  
  326. #pagenotes img {
  327. display:none;}
  328. #pagenotes li {
  329. list-style-type:none;
  330. padding:5px 0px;
  331. margin:0 0 0 0px;
  332. }
  333.  
  334. .player {
  335. width:25px;
  336. height:25px;
  337. overflow:hidden;
  338. position:absolute;
  339. background:white;}
  340.  
  341. .audioinfo {
  342. margin-left:50px;
  343. font-size:12px;
  344. }
  345.  
  346. .q {
  347. text-align:center;
  348. font-weight:bold;
  349. }
  350.  
  351. .as {
  352. font-weight:bold;
  353. text-transform:uppercase;
  354. margin-bottom:10px;
  355. }
  356.  
  357.  
  358. .a {
  359. margin-top:10px;
  360.  
  361. }
  362.  
  363. .chat ol {
  364. padding:0;
  365. list-style:none;
  366. }
  367.  
  368. .label {font-weight:bold;
  369. }
  370.  
  371. .newplayerbutton {
  372. position: relative;
  373. width: 28px;
  374. height: 27px;
  375. overflow: hidden;
  376. }
  377.  
  378. .playerbuttonhug {
  379. position: absolute;
  380. top: -11px;
  381. left: -12px;
  382. }
  383.  
  384.  
  385. .tumblr_audio_player {
  386. border: none;
  387. padding: 0px;
  388. margin: 0px;
  389. height: 50px;
  390. width: 500px;
  391. }
  392.  
  393. .playerbuttonbg {
  394. position: absolute;
  395. z-index:999;
  396. left: 20px;
  397. top: 20px;
  398. width: 28px;
  399. height: 28px;
  400. background-color:#ffffff;
  401. padding: 10px;
  402. -webkit-border-radius: 40px;
  403. -moz-border-radius: 40px;
  404. border-radius: 40px;
  405. opacity: .4;
  406. filter: alpha(opacity=40);
  407. -moz-opacity: 0.4;
  408. -khtml-opacity: 0.4;
  409. transition: opacity .7s ease-in-out;
  410. -moz-transition: opacity .7s ease-in-out;
  411. -webkit-transition: opacity .7s ease-in-out;
  412. }
  413.  
  414. .playerbuttonbg:hover {
  415. opacity: 1;
  416. filter: alpha(opacity=100);
  417. -moz-opacity: 1;
  418. -khtml-opacity: 1;
  419. }
  420.  
  421. .audioimgwrapper {
  422. position: absolute;
  423. left: 0px;
  424. top: 0px;
  425. -webkit-border-radius: 50px;
  426. -moz-border-radius: 50px;
  427. border-radius: 50px;
  428. overflow: hidden;
  429. width: 88px;
  430. height: 88px;
  431. }
  432.  
  433. .audioimgwrapper img {
  434. width: 100%;
  435. height: auto;
  436. -webkit-border-radius: 50px;
  437. -moz-border-radius: 50px;
  438. border-radius: 50px;
  439. }
  440.  
  441. .trackdetails {
  442. width: auto;
  443. display:inline-block;
  444. margin-left: 100px;
  445. min-height: 85px;
  446. }
  447.  
  448. .audiowrapper {
  449. position: relative;
  450. display:inline-block;
  451. }
  452. #credit {
  453. position:fixed;
  454. color:{color:text};
  455. bottom:5px;
  456. right:10px;
  457. padding:4px;
  458. font-size:12px;
  459. }
  460.  
  461. #credit a {
  462. text-decoration:none;
  463. }
  464.  
  465.  
  466. </style>
  467. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript" ></script>
  468. <script type="text/javascript">
  469. $(function(){
  470. $('#sidebarimage').data('size','big');
  471. });
  472. $(window).scroll(function(){
  473. if($(document).scrollTop() > 0)
  474. {
  475. if($('#sidebarimage').data('size') == 'big')
  476. {
  477. $('#sidebarimage').data('size','small');
  478. $('#sidebarimage').stop().animate({
  479. height:'0px'
  480. },50);
  481. }
  482. }
  483. else
  484. {
  485. if($('#sidebarimage').data('size') == 'small')
  486. {
  487. $('#sidebarimage').data('size','big');
  488. $('#sidebarimage').stop().animate({
  489. height:'300px'
  490. },400);
  491. }
  492. }
  493. });
  494. </script>
  495. <script>
  496. $(window).scroll(function() {
  497. var pxFromBottom = 5500;
  498. if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
  499. $(".description").css({"display":"none"
  500. });
  501. {block:If500pxposts}
  502. $("#top").css({marginLeft:"309px",
  503. marginRight:"0px",
  504. width:"500px",
  505. });
  506. {/block:If500pxposts}
  507. {block:If400pxposts}
  508. $("#top").css({marginLeft:"359px",
  509. marginRight:"0px",
  510. width:"400px",
  511. });
  512. {/block:If400pxposts}
  513. }
  514. else {
  515. $(".description").css({"display":"inline"
  516. });
  517. $("#top").css({marginLeft:"0px",
  518. marginRight:"0px",
  519. width:"100%",
  520. });
  521. }
  522. });
  523. </script>
  524.  
  525. </head>
  526. <body>
  527. <div id="sidebar">
  528. <div id="sidebarimage"><img src="{image:header}"></div>
  529. <div id="top">
  530. <div class="title">{Title}</div>
  531. <div id="nav">
  532. <a href="{text:Link1 url}">{text:link1}</a>&nbsp;-
  533. <a href="{text:Link2 url}">{text:link2}</a>&nbsp;-
  534. <a href="{text:Link3 url}">{text:link3}</a>&nbsp;-
  535. <a href="{text:Link4 url}">{text:link4}</a>&nbsp;</div><br>
  536. <div class="description">{Description}</div>
  537. </div></div>
  538. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  539. <div id="content">
  540. <div class="autopagerize_page_element">
  541. {block:Posts}<div id="posts">
  542.  
  543. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  544.  
  545. {block:Quote}<h2>&#147;{Quote}&#148;</h2><h1>-{Source}</h1>{/block:Quote}
  546.  
  547. {block:Link}</div><a href="{URL}"><h3>{Name}</h3></a>
  548.  
  549. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  550.  
  551. {block:Photo} {block:If500pxposts}<img src="{PhotoURL-500}" />{block:Caption}{Caption}{/block:Caption} {/block:If500pxposts}{block:If400pxposts}<img src="{PhotoURL-400}" />{block:Caption}{Caption}{/block:Caption} {/block:If400pxposts}{/block:Photo}
  552.  
  553. {block:Photoset}
  554. {block:If500pxposts}
  555. <center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  556. {/block:If500pxposts}
  557. {block:If400pxposts}
  558. <center>{Photoset-400}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  559.  
  560. {/block:If400pxposts}
  561. {/block:Photoset}
  562.  
  563. {block:Chat}<ul class="chat">{block:Title}<h3>{Title}</h3>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}
  564.  
  565. {block:Video}
  566. {block:If500pxposts}
  567. {Video-500}{block:Caption}{Caption}{/block:Caption}
  568. {/block:If500pxposts}
  569. {block:If400pxposts}
  570. {Video-400}{block:Caption}{Caption}{/block:Caption}
  571. {/block:If400pxposts}
  572. {/block:Video}
  573. {block:Audio}{block:AudioPlayer}
  574. <div class="audiowrapper">
  575. {block:AlbumArt}
  576. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  577. {/block:AlbumArt}
  578.  
  579. <div class="playerbuttonbg">
  580. <div class="newplayerbutton">
  581. <div class="playerbuttonhug">
  582.  
  583. {AudioPlayerWhite}
  584.  
  585. </div>
  586. </div>
  587. </div>
  588.  
  589. <div class="trackdetails">
  590.  
  591. {block:TrackName}<strong>{TrackName}</strong>{/block:TrackName}<br/>
  592. {block:Artist}{Artist}{/block:Artist}<br/>
  593. {block:Album}<em>{Album}</em>{/block:Album}<br/>
  594. ({PlayCountWithLabel})
  595.  
  596. </div>
  597. </div>
  598. {/block:AudioPlayer}{/block:Audio}
  599.  
  600.  
  601.  
  602. {block:Answer}
  603. <div class="q">
  604. <div class="as">{Asker} inquired: </div>
  605. {Question}</div>
  606. <div class="a">{Answer}</div>
  607. {/block:Answer}
  608.  
  609.  
  610. {block:Date}
  611. <div id="permalink"><a href="{Permalink}">{ShortMonth}.&nbsp;{DayofMonth}.&nbsp;{ShortYear}<a href="{Permalink}">&nbsp;/ {NoteCount} notes&nbsp;/&nbsp; </a>{/block:NoteCount}&nbsp; <a href="{ReblogURL}">reblog</a>{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}&nbsp;</a>{/block:Tags}</div>{/block:HasTags}{block:RebloggedFrom}<div class="reblog"><a href="{ReblogParentURL}" title="{ReblogParentName}">via&nbsp;</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">&#8594;&nbsp;src</a>{/block:ContentSource}</div>{/block:RebloggedFrom}</div>
  612. {/block:Date}
  613.  
  614. {block:PostNotes}
  615. <div id="pagenotes">
  616. {PostNotes}
  617. </div>
  618. {/block:PostNotes}
  619. {/block:Posts}
  620. </div>
  621. </div>
  622. </div>
  623. {block:ContentSource}
  624. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  625. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  626. {/block:SourceLogo}
  627. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  628. {/block:ContentSource}
  629. <div id="credit">
  630. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  631.  
  632. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment