Belgrravia

Small Hands

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