API tools faq
paste
silvercybermen

Theme 20: Windchimes

silvercybermen
Oct 11th, 2015
440
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.  
  5.  
  6. <!--
  7.  
  8. THEME 21: WINDCHIMES BY LUNECERISE AKA ROMULVS
  9.  
  10. You can edit as much as you want, as long as you:
  11. -keep the credit intact
  12. -don't steal any code
  13. -don't use as a base code
  14.  
  15. -->
  16.  
  17.  
  18.  
  19. <head>
  20.  
  21. <title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25.  
  26. <meta name="color:Background" content="#ffffff"/>
  27. <meta name="color:Header" content="#bbbbbb"/>
  28. <meta name="color:Title" content="#ffffff"/>
  29. <meta name="color:Post" content="#ffffff"/>
  30. <meta name="color:Text" content="#bbbbbb"/>
  31. <meta name="color:Accent" content="#A987E2"/>
  32. <meta name="color:Link" content="#aaaaaa"/>
  33. <meta name="color:Hover" content="#b3b3b3"/>
  34. <meta name="color:Line" content="#f3f3f3"/>
  35. <meta name="color:Border" content="#eeeeee"/>
  36. <meta name="color:Tooltip" content="#777777"/>
  37. <meta name="color:Scrollbar" content="#eeeeee"/>
  38.  
  39. <meta name="image:Header" content=""/>
  40.  
  41. <meta name="if:Title Image" content="0"/>
  42. <meta name="if:Contained" content="1"/>
  43.  
  44. <meta name="text:Blog Title" content="">
  45. <meta name="text:linkA" content="">
  46. <meta name="text:linkA url" content="/">
  47. <meta name="text:linkB" content="">
  48. <meta name="text:linkB url" content="/">
  49. <meta name="text:linkC" content="">
  50. <meta name="text:linkC url" content="/">
  51. <meta name="text:linkD" content="">
  52. <meta name="text:linkD url" content="/">
  53. <meta name="text:linkE" content="">
  54. <meta name="text:linkE url" content="/"/>
  55.  
  56. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  57. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  58. <script>
  59. (function($){
  60. $(document).ready(function(){
  61. $("[title]").style_my_tooltips({
  62. tip_follows_cursor:true,
  63. tip_delay_time:1,
  64. tip_fade_speed:100,
  65. attribute:"title"
  66. });
  67. });
  68. })(jQuery);
  69. </script>
  70.  
  71. <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600|Roboto:400,500' rel='stylesheet' type='text/css'>
  72.  
  73. <style type="text/css">
  74.  
  75. ::-webkit-scrollbar {width:4px; height:auto; background:{color:background};}
  76. ::-webkit-scrollbar-corner {background:{color:background};}
  77. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar};}
  78. ::-webkit-scrollbar-thumb:horizontal {background:{color:scrollbar};}
  79. ::-webkit-scrollbar-increment {width:4px; height:4px; background-color:#fff;}
  80.  
  81. iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
  82. white-space:nowrap;
  83. -webkit-filter: invert(100%);
  84. -moz-filter: invert(100%);
  85. -o-filter: invert(100%);
  86. -ms-filter: invert(100%);
  87. filter: invert(100%);
  88. opacity:.2;transition: .8s ease-in-out;
  89. -webkit-transition: .8s ease-in-out;
  90. -moz-transition: .8s ease-in-out;
  91. -o-transition: .8s ease-in-out;
  92. }
  93.  
  94. iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop:hover {opacity:0.8;}
  95.  
  96. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  97. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  98. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  99.  
  100. .fade-in {
  101. opacity:0;
  102. -webkit-animation:fadeIn ease-in 1;
  103. -moz-animation:fadeIn ease-in 1;
  104. animation:fadeIn ease-in 1;
  105. -webkit-animation-fill-mode:forwards;
  106. -moz-animation-fill-mode:forwards;
  107. animation-fill-mode:forwards;
  108. -webkit-animation-duration:1s;
  109. -moz-animation-duration:1s; animation-duration:1s; }
  110.  
  111. .fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }
  112.  
  113. ::selection {background:{color:Accent};color:#fff;text-shadow:none;}
  114. ::-moz-selection {background:{color:Accent};color:#fff;text-shadow:none;}
  115. ::-webkit-selection {background:{color:Accent};color:#fff;text-shadow:none;}
  116.  
  117. #s-m-t-tooltip {
  118. max-width:300px;
  119. padding: 5px 8px;
  120. margin:10px;
  121. background-color:{color:background};
  122. font-size:8px;
  123. letter-spacing:1px;
  124. text-transform:uppercase;
  125. color:{color:tooltip};
  126. box-shadow:2px 2px 0.2em #eee;
  127. border-radius:2px;
  128. z-index:100000000000000000000000000000000000000000;
  129. transition:0.5s ease-in-out;
  130. -webkit-transition:0.5s ease-in-out;
  131. -moz-transition:0.5s ease-in-out;
  132. -ms-transition:0.5s ease-in-out;
  133. -o-transition:0.5s ease-in-out;
  134. }
  135.  
  136. *, body, a, a:hover, a:active { cursor:url(https://31.media.tumblr.com/4b32a8c60c9e7a01890827f616c6ed74/tumblr_inline_n7563jM9Gt1qcs1bb.png), auto;}
  137.  
  138. body {
  139. background:{color:background};
  140. margin:0px;
  141. color:{color:text};
  142. font-family:'Open Sans', sans-serif;
  143. font-size:9px;
  144. line-height:115%;
  145. }
  146.  
  147. a {
  148. text-decoration:none;
  149. -moz-outline-style:none;
  150. color:{color:link};
  151. transition:0.5s ease-in-out;
  152. -webkit-transition:0.5s ease-in-out;
  153. -moz-transition:0.5s ease-in-out;
  154. -ms-transition:0.5s ease-in-out;
  155. -o-transition:0.5s ease-in-out;}
  156.  
  157. a:hover {color:{color:hover};}
  158. img {border:none;max-width:100%;}
  159. h1 {font-size:12px;text-transform:uppercase;line-height:110%;}
  160. h2 {font-size:17px;line-height:110%;}
  161. b, strong {font-weight:700;}
  162. ol {list-style:lower-roman;line-height:123%;}
  163. li {list-style:circle;line-height:123%;}
  164. blockquote {padding-left:5px;border-left:1px dotted {color:line};margin-right:10px;margin-left:10px;}
  165. blockquote blockquote {padding-left:5px;border-left:1px dotted {color:line};margin-right:10px;margin-left:20px;}
  166.  
  167. pre {
  168. padding:3px 5px;
  169. width:100%;
  170. text-transform:uppercase;
  171. font-family:consolas;
  172. white-space: pre-wrap;
  173. white-space: -moz-pre-wrap;
  174. white-space: -pre-wrap;
  175. white-space: -o-pre-wrap;
  176. word-wrap: break-word;
  177. }
  178.  
  179. #header {
  180. position:fixed;
  181. width:500px;
  182. height:200px;
  183. top:0;
  184. border-top:25px solid {color:background};
  185. left:50%;
  186. margin-left:-250px;
  187. opacity:1;
  188. z-index:2;
  189. background:{color:header} {block:ifnotTitleImage}url('{image:header}') no-repeat center bottom{/block:ifnotTitleImage};
  190. background-size:cover;
  191. }
  192.  
  193. #title {
  194. font-size:25px;
  195. font-family:'Lato', sans-serif;
  196. max-width:175px;
  197. text-transform:uppercase;
  198. padding:10px;
  199. text-align:left;
  200. line-height:110%;
  201. margin-top:80px;
  202. margin-left:40px;
  203. display:block;
  204. float:left;
  205. z-index:4;
  206. }
  207.  
  208. #title a {
  209. letter-spacing:2px;
  210. padding-bottom:1px;
  211. padding-right:7px;
  212. border-bottom:1px solid {color:title};
  213. margin-left:2px;
  214. color:{color:title};
  215. {block:ifTitleImage}
  216. -webkit-text-fill-color: transparent;
  217. background: -webkit-linear-gradient(transparent, transparent), url({image:header});
  218. background: -o-linear-gradient(transparent, transparent);
  219. -webkit-background-clip: text;
  220. -webkit-background-clip: text;
  221. background-size:cover;
  222. background-position:center;
  223. {/block:ifTitleImage}
  224. text-shadow:0px 0px 0.2em transparent;
  225. transition:0.5s ease-in-out;
  226. -webkit-transition:0.5s ease-in-out;
  227. -moz-transition:0.5s ease-in-out;
  228. -ms-transition:0.5s ease-in-out;
  229. -o-transition:0.5s ease-in-out;
  230. }
  231.  
  232. #title a:hover {
  233. text-decoration:none;
  234. color:#fff;
  235. text-shadow:0px 0px 0.2em #fff;
  236. }
  237.  
  238. .desc {
  239. display:block;
  240. float:left;
  241. margin-top:100px;
  242. border-left:1px solid {color:title};
  243. border-bottom:1px solid {color:title};
  244. margin-left:-11px;
  245. line-height:110%;
  246. font-size:9px;
  247. font-style:italic;
  248. text-transform:uppercase;
  249. width:210px;
  250. height:auto;
  251. padding:10px;
  252. text-align:left;
  253. color:{color:title};
  254. z-index:3;
  255. }
  256.  
  257. .links {
  258. display:inline-block;
  259. margin-top:115px;
  260. margin-left:-490px;
  261. width:230px;
  262. padding:10px 20px;
  263. word-spacing:1em;
  264. text-align:right;
  265. text-transform:uppercase;
  266. }
  267.  
  268. .links a, .links a:hover {font-size:9px;color:{color:title};}
  269. .links a, #details a {
  270. display: inline-block;
  271. vertical-align: middle;
  272. -webkit-transform: translateZ(0);
  273. transform: translateZ(0);
  274. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  275. -webkit-backface-visibility: hidden;
  276. backface-visibility: hidden;
  277. -moz-osx-font-smoothing: grayscale;
  278. position: relative;
  279. overflow: hidden;
  280. }
  281.  
  282. .links a:before, #details a:before {
  283. content: "";
  284. position: absolute;
  285. z-index: -1;
  286. left: 50%;
  287. right: 50%;
  288. bottom: 0;
  289. background:{color:title};
  290. height: 1px;
  291. -webkit-transition-property: left, right;
  292. transition-property: left, right;
  293. -webkit-transition-duration: 0.3s;
  294. transition-duration: 0.3s;
  295. -webkit-transition-timing-function: ease-out;
  296. transition-timing-function: ease-out;
  297. }
  298. .links a:hover:before, .links a:focus:before, .links a:active:before, #details a:hover:before, #details a:focus:before, #details a:active:before {
  299. left: 0;
  300. right: 0;
  301. }
  302.  
  303. #pagi{
  304. position:fixed;
  305. width:30px;
  306. padding:3px;
  307. border:1px solid {color:line};
  308. height:10px;
  309. background:{color:background};
  310. font-size:8px;
  311. text-align:center;
  312. letter-spacing:0px;
  313. {block:ifnotContained}
  314. left:50%;
  315. margin-left:-15px;
  316. bottom:0px;
  317. {/block:ifnotContained}
  318. {block:ifContained}
  319. left:50%;
  320. margin:484px 0 0 -250px;
  321. {/block:ifContained}
  322. z-index:1;
  323. }
  324.  
  325. #all {
  326. width:272px;
  327. font-size:8.5px;
  328. z-index:2;
  329. {block:ifContained}
  330. padding:0px 40px 50px;
  331. margin:0px auto 0px;{/block:ifContained}
  332. {block:ifnotContained}
  333. padding:10px 50px;
  334. margin-top:220px;
  335. margin-bottom:20px;
  336. {/block:ifnotContained}
  337. }
  338.  
  339. #thing {
  340. {block:ifContained}
  341. margin:225px auto 0px;
  342. width:498px;
  343. height:500px;
  344. overflow-y:scroll;
  345. overflow-x:hidden;
  346. border:1px solid {color:line};
  347. {/block:ifContained}
  348. {block:ifnotContained}margin:auto auto 100px; width:372px;{/block:ifnotContained}
  349. }
  350.  
  351. #posts {
  352. width:250px;
  353. padding:10px;
  354. position:relative;
  355. float:left;
  356. margin-top:80px;
  357. background-color:{color:post};
  358. border:dotted 1px {color:line};
  359. z-index:1;
  360. -ms-word-break: break-all;
  361. word-break: break-all;
  362. word-break: break-word;
  363. -webkit-hyphens: auto;
  364. -moz-hyphens: auto;
  365. -ms-hyphens: auto;
  366. hyphens: auto;
  367. }
  368.  
  369. #posts:last-child {margin-bottom:100px;}
  370.  
  371. #caption {
  372. width:250px;
  373. padding:5px 5px 0;
  374. -ms-word-break: break-all;
  375. word-break: break-all;
  376. word-break: break-word;
  377. -webkit-hyphens: auto;
  378. -moz-hyphens: auto;
  379. -ms-hyphens: auto;
  380. hyphens: auto;
  381. }
  382.  
  383. #posts:hover #details {opacity:1;margin-left:-10px;}
  384.  
  385. #details {
  386. opacity:0;
  387. max-width:50px;
  388. text-align:left;
  389. margin-top:-17px;
  390. margin-left:-30px;
  391. text-transform:uppercase;
  392. padding:3px 3px 3px 10px;
  393. font-size:8px;
  394. font-style:italic;
  395. background:{color:background};
  396. transition:0.5s ease-in-out;
  397. -webkit-transition:0.5s ease-in-out;
  398. -moz-transition:0.5s ease-in-out;
  399. -ms-transition:0.5s ease-in-out;
  400. -o-transition:0.5s ease-in-out;
  401. }
  402.  
  403. #details a {display:inline-block;padding:0px;}
  404.  
  405. #dets {padding:5px;border-top:1px solid {color:border};font-size:8px;}
  406. #dets a {display:inline-block;}
  407.  
  408. #tags {display:inline-block;opacity:0.9;}
  409. #tags a {display:inline-block;}
  410. #tags .comma:last-child {display:none;}
  411.  
  412. #question {
  413. width:210px;
  414. padding:40px 20px;
  415. margin:0px 0 10px;
  416. line-height:115%;
  417. text-align:center;
  418. color:#fff;
  419. background-color:{color:header};
  420. }
  421.  
  422. #akport {
  423. width:190px;
  424. text-align:center;
  425. height:12px;
  426. padding:5px 10px;
  427. color:#fff;
  428. opacity:1;
  429. font-style:bold;
  430. background-color:{color:header};
  431. z-index:99999;
  432. margin-bottom:3px;
  433. }
  434.  
  435. #akport a {color:#fff;text-align:center;}
  436. #akport a:hover {text-decoration:none;letter-spacing:0.6em;}
  437.  
  438. .tumblr_audio_player {width:100%;margin-top:2px;}
  439.  
  440. .player {
  441. width:30px;
  442. height:30px;
  443. padding:10px;
  444. border:solid 1px {color:header};
  445. overflow:hidden;
  446. margin:0;
  447. display:inline-block;
  448. }
  449.  
  450. .audioinfo {
  451. color:#fff;
  452. display:inline-block;
  453. padding:15px;
  454. text-align:left;
  455. font-size:10px;
  456. background:{color:header};
  457. width:160px;
  458. float:right;
  459. margin:0px 0 -54px -2px;
  460. border:solid 1px {color:header};
  461. }
  462.  
  463. .chat li {list-style:none;line-height:110%;}
  464. .line.odd {border-left:1px solid {color:line};padding:3px 5px;}
  465. .line.even {border-left:1px solid transparent;padding:3px 5px;}
  466.  
  467. #notecontain {
  468. width:220px;
  469. max-height:150px;
  470. padding:20px 15px;
  471. margin:auto;
  472. border:dotted 1px {color:border};
  473. }
  474.  
  475. .notes {
  476. width:200px;
  477. max-height:150px;
  478. padding:5px 10px;
  479. margin:auto 15px auto 5px;
  480. overflow-y:scroll;
  481. overflow-x:hidden;
  482. text-align:left;
  483. font-size:8px;
  484. line-height:125%;
  485. }
  486.  
  487. .notes img {display:none;}
  488. .notes ol, .notes li {list-style:circle;line-height:125%;}
  489.  
  490. #credit, #credit a {
  491. position:fixed;
  492. bottom:5px;
  493. right:5px;
  494. padding:5px 4px;
  495. font-family: helvetica;
  496. text-transform:uppercase;
  497. color:#bbb;
  498. font-size:8px;
  499. -moz-transition-duration:0.3s;
  500. -webkit-transition-duration:0.3s;
  501. -o-transition-duration:0.3s;
  502. -ms-transition-duration:0.3s;
  503. }
  504.  
  505. #credit:hover, #credit a:hover {
  506. font-family: helvetica;
  507. color:#000;
  508. background-color:#fff;
  509. text-shadow:#aaa 2px 2px 0.2em;
  510. -moz-transition-duration:0.4s;
  511. -webkit-transition-duration:0.4s;
  512. -o-transition-duration:0.4s;
  513. -ms-transition-duration:0.4s;
  514. }
  515.  
  516.  
  517. {CustomCSS}</style></head><body>
  518.  
  519.  
  520. <div id="header">
  521. <div id="title"><a href="/">{text:Blog Title}</a></div>
  522. <div class="links">
  523. {block:iflinkA}<a href="{text:linkA url}" title="{text:linkA}">i</a>{/block:iflinkA}
  524. {block:iflinkB}<a href="{text:linkB url}" title="{text:linkB}">ii</a>{/block:iflinkB}
  525. {block:iflinkC}<a href="{text:linkC url}" title="{text:linkC}">iii</a>{/block:iflinkC}
  526. {block:iflinkD}<a href="{text:linkD url}" title="{text:linkD}">iv</a>{/block:iflinkD}
  527. {block:iflinkE}<a href="{text:linkE url}" title="{text:linkE}">v</a>{/block:iflinkE}
  528. </div>
  529. <div class="desc">{Description}</div>
  530. </div>
  531.  
  532. {block:Pagination}<div id="pagi">
  533. {block:PreviousPage}<a href="{PreviousPage}">←&nbsp;|&nbsp;</a>{/block:PreviousPage}
  534. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  535. </div>{/block:Pagination}
  536.  
  537. <div id="thing">
  538. <div id="all" class="box fade-in one">
  539. {block:Posts}<div id="posts">
  540.  
  541.  
  542. {block:IndexPage}<div id="details">
  543. {block:Date}<a href="{Permalink}" title="{12HourWithZero}:{Minutes}{AmPm}">{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a>{/block:Date}
  544. </div>
  545. {/block:IndexPage}
  546.  
  547.  
  548. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  549.  
  550. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-250}">{LinkCloseTag}</center>{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  551.  
  552. {block:Link}<h1>[ <a href="{URL}" {Target}>{Name}</a> ]</h1>{block:Description}{Description}{/block:Description}{/block:Link}
  553.  
  554. {block:Photoset}<center>{Photoset-250}</center>{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Photoset}
  555.  
  556. {block:Quote}<div style="text-align:center"><h2>{Quote}</h2><br>↳ {Source}</div><br>{/block:Quote}
  557.  
  558. {block:Audio}
  559. <div class="player">{AudioPlayerWhite}</div>
  560. <div class="audioinfo">
  561. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
  562. </div>
  563. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  564.  
  565. {block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  566.  
  567. {block:Chat}<div class="chat">{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<li class="line {Alt}">{block:Label}<b>{Label}</b>{/block:Label} {Line}</li><br>{/block:Lines}</div>{/block:Chat}
  568.  
  569. {block:Answer}<div id="question"><span style="text-transform:uppercase;font-size:10px; padding-bottom:10px"><div id="akport">{Asker}</div></span>{Question}</div><left>{Answer}</left>{/block:Answer}
  570.  
  571. {block:PermalinkPage}
  572. <div id="dets">{block:Date}{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}{/block:Date}&emsp;{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}{block:ContentSource}&emsp;<a href="{SourceURL}" title="{SourceTitle}">src</a>{/block:ContentSource}{block:NoteCount}&emsp;+{NoteCount}{/block:NoteCount}{block:HasTags}<br>&emsp;<i>— filed under:</i> {block:Tags}<div id="tags"><a href="{TagURL}">{Tag}</a><span class="comma">, </span></div>{/block:Tags}{/block:HasTags}</div>
  573. {/block:PermalinkPage}
  574.  
  575. </div>
  576. {/block:Posts}
  577. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  578. {/block:Posts}
  579. </div>
  580.  
  581.  
  582. </div>
  583.  
  584. <div id="credit"><a href="http://lunecerise.co.vu" title="lunecerise">LC</a></div>
  585.  
  586.  
  587. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!