Advertisement
Belgrravia

Skinny Love

Sep 1st, 2014
583
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.85 KB | None | 0 0
  1. <!--
  2. Skinny Love
  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=Josefin+Slab: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="#cecece"/>
  26. <meta name="color:link hover" content="#cecece"/>
  27. <meta name="color:nav" content="#eae9e9"/>
  28. <meta name="color:nav hover" content="#eae9e9"/>
  29. <meta name="color:text" content="#eae9e9"/>
  30.  
  31. <meta name="text:link1" content="" />
  32. <meta name="text:link1url" content="" />
  33. <meta name="text:link2" content="" />
  34. <meta name="text:link2url" content="" />
  35. <meta name="text:link3" content="" />
  36. <meta name="text:link3url" content="" />
  37. <meta name="text:link4" content="">
  38. <meta name="text:link4url" content="" />
  39.  
  40. <style type="text/css">
  41.  
  42.  
  43.  
  44. ::-webkit-scrollbar {height: 2px;
  45. width: 4px;
  46. -webkit-border-radius: 0px;
  47. background-color:{color:posts}}
  48. ::-webkit-scrollbar-thumb{background-color:#c4c4c4;
  49.  
  50. border:0px solid {color:scrollbar};}
  51. ::-webkit-scrollbar-track{background-color:{color:background};}
  52.  
  53. #s-m-t-tooltip {max-width:400px;
  54. padding:2px;
  55. margin:10px 0px 0px 10px;
  56. padding:1px 4px;
  57. background-color:#737373;
  58. text-transform:uppercase;
  59. font-size:7px;
  60. letter-spacing:2px;
  61. color:white;
  62. z-index:999
  63.  
  64. }
  65.  
  66. body {
  67. background:{color:background};
  68. color:{color:text};
  69. font-family:Arial, sans-serif;
  70. font-size:11px;
  71. margin:0;
  72. line-height:16px;}
  73.  
  74.  
  75. blockquote {
  76. border-left:1px solid {color:link};
  77. padding-left:5px;
  78. margin:5px;
  79. margin-left:20px;
  80. word-wrap:break-word;
  81. padding-top:2px;
  82. padding-bottom:2px;
  83. }
  84.  
  85. #posts {
  86. width:500px;
  87. margin-bottom:80px;
  88. margin-top:100px;
  89. }
  90.  
  91. #posts img {
  92. max-width:500px;
  93. }
  94.  
  95.  
  96. #posts, #posts img, #posts blockquote {
  97. font-size:11px;
  98. color:{color:text};
  99. }
  100.  
  101.  
  102. small {
  103. font-size:10px;
  104. }
  105.  
  106. big {
  107. font-size:12px;
  108. }
  109.  
  110.  
  111. h2 {
  112. font-size:12px;
  113. color:{color:title};
  114. text-transform:uppercase;
  115. }
  116.  
  117. h1 {
  118. font-size:9px;
  119. text-transform:uppercase;
  120. Text-align:center;
  121. letter-spacing:1px;
  122. color:{color:text};
  123. }
  124.  
  125. h3 {
  126. font-size:13px;
  127. color:{color:title};
  128. letter-spacing:1px;
  129. text-transform:uppercase;
  130. }
  131.  
  132. #content {
  133. padding:0px;
  134.  
  135. width:100%;
  136.  
  137. width:500px;
  138.  
  139. margin:auto;
  140.  
  141.  
  142. }
  143.  
  144. table {
  145. width:495px;
  146. border-spacing:0px;
  147. }
  148.  
  149. td {
  150. width:165px;
  151. }
  152.  
  153. #sidebar {
  154. width:500px;
  155. margin:auto;
  156. margin-top:110px;
  157. }
  158.  
  159.  
  160. #title {
  161. font-size:20px;
  162. text-align:center;
  163. word-break:break-word;
  164. line-height:120%;
  165. font-family:Arial, sans-serif;
  166. padding:5px;
  167. letter-spacing:1px;
  168. text-transform:uppercase;
  169. color:{color:title};
  170.  
  171. }
  172.  
  173. .description {
  174. padding-left:5px;
  175. padding-top:2px;
  176. margin-left:-5px;
  177. font-size:9px;
  178. word-wrap:break-word;
  179. opacity:0;
  180. -moz-transition-duration:all 1s ease-in-out;
  181. -webkit-transition-duration:all 1s ease-in-out;
  182. -o-transition-duration:all 1s ease-in-out;
  183.  
  184.  
  185. }
  186.  
  187. #sidebar:hover .description {
  188. margin-left:0px;
  189. opacity:1;
  190. -moz-transition-duration:1s;
  191. -webkit-transition-duration: 1s;
  192. -o-transition-duration:1s;
  193. }
  194.  
  195. .nav {
  196. text-align:right;
  197. word-spacing:1px;
  198. margin-right:-10px;
  199. font-size:10px;
  200. opacity:0;
  201. -moz-transition-duration:all 1s ease-in-out;
  202. -webkit-transition-duration:all 1s ease-in-out;
  203. -o-transition-duration:all 1s ease-in-out;
  204. }
  205.  
  206. #sidebar:hover .nav {
  207. margin-right:5px;
  208. opacity:1;
  209. -moz-transition-duration:1s;
  210. -webkit-transition-duration: 1s;
  211. -o-transition-duration:1s;
  212. }
  213.  
  214.  
  215. #postinfo {
  216. font-size:8px;
  217. letter-spacing:1px;
  218. border-bottom:1px solid {color:text};
  219. padding:5px;
  220. text-align:center;
  221. margin:auto;
  222. width:200px;
  223. letter-spacing:1px;
  224. text-transform:uppercase;
  225. opacity:0;
  226. -moz-transition-duration:all 1s ease-in-out;
  227. -webkit-transition-duration:all 1s ease-in-out;
  228. -o-transition-duration:all 1s ease-in-out;
  229. }
  230.  
  231. #posts:hover #postinfo {
  232. opacity:1;
  233. -moz-transition-duration:.1s;
  234. -webkit-transition-duration: 1s;
  235. -o-transition-duration:1s;
  236. }
  237.  
  238. .info {
  239. position:absolute;
  240. padding:5px;
  241. font-size:10px;
  242. font-family:Times,sans-serif;
  243. }
  244.  
  245. a:link, a:visited {
  246. text-decoration:none;
  247. color:{color:link};
  248. letter-spacing:0px;
  249. }
  250.  
  251. a:hover {
  252. text-decoration:none;
  253. color:{color:link hover};
  254. letter-spacing:.5px;
  255. }
  256.  
  257. .nav a, .nav a:visited {
  258. color:{color:nav};
  259. }
  260.  
  261. .nav a:hover {
  262. color:{color:nav hover};
  263. }
  264.  
  265. .pagenotes {
  266. {block:IndexPage}
  267. display: none;
  268. {/block:IndexPage}
  269. width:500px;
  270. margin-top:60px;
  271. text-transform:uppercase;
  272. font-size:9px;
  273. letter-spacing:1px;
  274. }
  275.  
  276. #permalink {
  277. font-size:9px;
  278. margin-top:5px;
  279. letter-spacing:1px;
  280. text-transform:uppercase;
  281. }
  282.  
  283.  
  284. .pagenotes img {
  285. display:none;}
  286. .pagenotes li {
  287. list-style-type:none;
  288. padding:5px 0px;
  289. text-align:left;
  290. border-bottom:1px solid {color:text};
  291. margin:0 0 0 0px;
  292. }
  293.  
  294.  
  295. #pagi {
  296. font-size:9px;
  297. width:100%;
  298. font-weight:normal;
  299. text-align:center;
  300. margin-bottom:50px;
  301. color:{color:links};
  302. letter-spacing:0px;
  303. }
  304.  
  305. #pagi a {
  306. display:inline-block;
  307. color:{color:links};
  308. }
  309.  
  310. #pagi a:hover {
  311. color:{color:links hover};
  312. font-style:bold;
  313. }
  314.  
  315.  
  316. .tags {
  317. text-align:center;
  318. margin-top:5px;
  319. font-size:9px;
  320. word-wrap:break-word
  321. text-transform:lowercase;
  322. opacity:0;
  323. -moz-transition-duration:all 1s ease-in-out;
  324. -webkit-transition-duration:all 1s ease-in-out;
  325. -o-transition-duration:all 1s ease-in-out;
  326. }
  327.  
  328. #posts:hover .tags {
  329. opacity:1;
  330. -moz-transition-duration:.1s;
  331. -webkit-transition-duration: 1s;
  332. -o-transition-duration:1s;
  333. }
  334.  
  335. .player {
  336. width:25px;
  337. height:25px;
  338. overflow:hidden;
  339. position:absolute;
  340. background:white;}
  341.  
  342. .audioinfo {
  343. margin-left:50px;
  344. font-size:12px;
  345. }
  346.  
  347. .q {
  348. text-align:center;
  349. font-weight:bold;
  350. }
  351.  
  352. .as {
  353. font-weight:bold;
  354. text-transform:uppercase;
  355. margin-bottom:10px;
  356. }
  357.  
  358.  
  359. .a {
  360. margin-top:10px;
  361.  
  362. }
  363.  
  364. .chat ol {
  365. padding:0;
  366. list-style:none;
  367. }
  368.  
  369. .label {font-weight:bold;
  370. }
  371.  
  372. .newplayerbutton {
  373. position: relative;
  374. width: 28px;
  375. height: 27px;
  376. overflow: hidden;
  377. }
  378.  
  379. .playerbuttonhug {
  380. position: absolute;
  381. top: -11px;
  382. left: -12px;
  383. }
  384.  
  385.  
  386. .tumblr_audio_player {
  387. border: none;
  388. padding: 0px;
  389. margin: 0px;
  390. height: 50px;
  391. width: 500px;
  392. }
  393.  
  394. .playerbuttonbg {
  395. position: absolute;
  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.  
  453. #credit {
  454. position:fixed;
  455. color:{color:text};
  456. bottom:5px;
  457. right:10px;
  458. padding:4px;
  459. font-size:12px;
  460. }
  461.  
  462. #credit a {
  463. text-decoration:none;
  464. }
  465.  
  466.  
  467.  
  468. </style>
  469. </head>
  470. <body>
  471.  
  472.  
  473.  
  474.  
  475. <div id="sidebar">
  476. <table>
  477. <tr>
  478. <td style="border-bottom:1px solid {color:text}; vertical-align:bottom;">
  479. <div class="nav">
  480. <a href="{text:Link1url}">{text:Link1}</a>
  481. <a href="{text:Link2url}" >{text:Link2}</a>
  482. <a href="{text:Link3url}">{text:Link3}</a>
  483. <a href="{text:Link4url}" >{text:Link4}</a></div></td>
  484. <td style="border:1px solid {color:text}">
  485. <div id="title">{Title}</div></td>
  486. <td style="border-top:1px solid {color:text}">
  487. <div class="description">{Description}</div></td></tr>
  488. </table>
  489. </div>
  490.  
  491.  
  492. <div id="content">
  493. {block:Posts}<div id="posts">
  494.  
  495.  
  496. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  497.  
  498. {block:Quote}<h2>&#147;{Quote}&#148;</h2><h1>-{Source}</h1>{/block:Quote}
  499.  
  500. {block:Link}</div><a href="{URL}"><h3>{Name}</h3></a>
  501.  
  502. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  503.  
  504. {block:Photo}<img src="{PhotoURL-500}" />{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  505.  
  506. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  507.  
  508. {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}
  509.  
  510. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  511.  
  512. {block:Audio}{block:AudioPlayer}
  513. <div class="audiowrapper">
  514. {block:AlbumArt}
  515. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  516. {/block:AlbumArt}
  517.  
  518. <div class="playerbuttonbg">
  519. <div class="newplayerbutton">
  520. <div class="playerbuttonhug">
  521.  
  522. {AudioPlayerWhite}
  523.  
  524. </div>
  525. </div>
  526. </div>
  527.  
  528. <div class="trackdetails">
  529.  
  530. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  531. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  532. {block:Album}Album: {Album}{/block:Album}<br/>
  533. {PlayCountWithLabel}
  534.  
  535. </div>
  536. </div>
  537. {/block:AudioPlayer}{/block:Audio}
  538.  
  539.  
  540. {block:Answer}
  541. <div class="q">
  542. <div class="as">{Asker} inquired: </div>
  543. {Question}</div>
  544. <div class="a">{Answer}</div>
  545. {/block:Answer}
  546.  
  547. {block:Date}<div id="postinfo">{ShortMonth}&nbsp;{DayOfMonth}{DayOfMonthSuffix}<a href="{permalink}">&nbsp;+ {NoteCount}</a>{block:PermalinkPage}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">&nbsp;&#151;via&nbsp;</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">&#x7c;&nbsp;src&nbsp;</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>{block:HasTags}<div class="tags"> {block:Tags}#<a href="{TagUrl}">{Tag},&nbsp;</a>{/block:Tags}</div>{/block:HasTags}{/block:Date}
  548.  
  549. </div>
  550. {/block:IndexPage}
  551. {/block:Date}
  552.  
  553. {block:PostNotes}
  554. <div class="pagenotes">
  555. {PostNotes}
  556. </div>
  557. {/block:PostNotes}
  558. {/block:Posts}
  559.  
  560.  
  561. </div>
  562. </div>
  563. <div id="pagi">
  564. {block:Pagination}
  565. {block:PreviousPage}
  566. <a href="{PreviousPage}">future &#151; &nbsp;</a>
  567. {/block:PreviousPage}
  568.  
  569.  
  570. {block:NextPage}
  571. <a href="{NextPage}">&#151; past</a>
  572. {/block:NextPage}
  573. {/block:Pagination}
  574. </div>
  575. </div>
  576.  
  577.  
  578. {block:ContentSource}
  579. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  580. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  581. {/block:SourceLogo}
  582. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  583. {/block:ContentSource}
  584.  
  585.  
  586. <div id="credit">
  587. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  588.  
  589. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement