API tools faq
paste
bangyixing

Theme #19 - Monochrome

bangyixing
Aug 31st, 2013
464
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.84 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <head>
  4.  
  5. <!--
  6. ᴛʜᴇᴍᴇ 19: ᴅɪʟᴜᴛᴇ
  7. ᴅᴇsɪɢɴᴇᴅ ᴀɴᴅ ᴄᴏᴅᴇᴅ ʙʏ ᴀɴᴅʀᴇᴀ @ ᴍʟɪᴋʙᴏʏ
  8. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛs. ᴛʜᴀɴᴋ ʏᴏᴜ.
  9. -->
  10.  
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  13. <head><title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18. <!--Default Variables-->
  19. <!--Colors-->
  20.  
  21. <meta name="color:Background" content="#ffffff"/>
  22. <meta name="color:Title" content="#9c9c9c"/>
  23. <meta name="color:Border" content="#f5f5f5"/>
  24. <meta name="color:Link" content="#c5c2c1"/>
  25. <meta name="color:Scrollbar" content="#fbfbfb"/>
  26. <meta name="color:Link Hover" content="#d7d9da"/>
  27. <meta name="color:Hover" content="#f5f3f3"/>
  28. <meta name="color:Description" content="#fafafa"/>
  29. <meta name="color:Asker" content="#fafafa"/>
  30. <meta name="color:Quote" content="#fafafa"/>
  31. <meta name="color:Info" content="#fafafa"/>
  32. <meta name="color:Hover" content="#cfcfcf"/>
  33. <meta name="color:Tags" content="#d7d9da"/>
  34. <meta name="color:Text" content="#7e7d7d"/>
  35.  
  36. <!--Images-->
  37.  
  38. <meta name="image:Background" content="/"/>
  39. <meta name="image:Sidebar" content=""/>
  40.  
  41. <!--Links-->
  42.  
  43. <meta name="text:Link1" content="" />
  44. <meta name="text:Link1 Title" content="" />
  45. <meta name="text:Link2" content="" />
  46. <meta name="text:Link2 Title" content="" />
  47. <meta name="text:Link3" content="" />
  48. <meta name="text:Link3 Title" content="" />
  49.  
  50. <!--Functions-->
  51.  
  52. <meta name="if:Lazy Load" content="1"/>
  53. <meta name="if:Infinite Scroll" content="1"/>
  54. <meta name="if:Pagination" content="0"/>
  55.  
  56. <!--Fonts-->
  57.  
  58. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
  59.  
  60. <!--Lazy Load-->
  61.  
  62. {block:IfLazyLoad}
  63. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  64. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  65. <script type="text/javascript" charset="utf-8">
  66. var $j = jQuery.noConflict();
  67. $j(function() {
  68. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  69. $j("img").lazyload({
  70. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  71. effect: "fadeIn",
  72. });
  73. });
  74. </script>
  75.  
  76. </style>
  77. {/block:IfLazyLoad}
  78.  
  79. <!--qTip-->
  80.  
  81. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  82.  
  83. <style type="text/css">
  84.  
  85. ::-webkit-scrollbar-thumb:vertical {
  86. background: {color:Border};
  87. height: 80px;
  88. }
  89.  
  90. ::-webkit-scrollbar {
  91. height: 10px;
  92. width: 10px;
  93. background: {color:Scrollbar};
  94. }
  95.  
  96.  
  97. body {
  98. background-image: url("{image:background}");
  99. background-attachment: fixed;
  100. font-family:Helvetica;
  101. font-size:9px;
  102. margin:50px;
  103. text-align:justify;
  104. letter-spacing:0px;
  105. line-height:140%;
  106. background:{color:background};
  107. color:{color:text};
  108. cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;
  109. }
  110.  
  111. a {
  112. text-decoration:none;
  113. outline:none;
  114. -moz-outline-style:none;
  115. color:{color:Text};
  116. -webkit-transition: all 0.5s ease;
  117. -moz-transition: all 0.5s ease;
  118. -o-transition: all 0.5s ease;
  119. }
  120.  
  121. img {
  122. border:none;
  123. }
  124.  
  125. blockquote blockquote {
  126. padding-left:5px;
  127. border-left:1px solid;
  128. }
  129.  
  130. h1 {
  131. font-size:20px;
  132. font-family:Playfair Display;
  133. text-transform:lowercase;
  134. font-style:italic;
  135. line-height:140%;
  136. text-align:center;
  137. color:{color:Title};
  138. }
  139.  
  140. a:hover {
  141. color: {color:Link Hover};
  142. }
  143.  
  144. small{
  145. font-size:9px;
  146. line-height:140%;
  147. }
  148.  
  149. big {
  150. font-size:12px;
  151. line-height:140%;
  152. }
  153.  
  154. b, strong{
  155. color:{color:Text};
  156. }
  157. i, em {
  158. color:{color:Text};
  159. }
  160. p{
  161. margin-top:5px;
  162. margin-bottom:5px;
  163. }
  164.  
  165. blockquote {
  166. padding:0px;
  167. padding-left:5px;
  168. margin:5px;
  169. border-left:1px solid {color:Border};
  170. }
  171.  
  172. .audio { height:60px; padding:5px; margin-bottom:5px;}
  173. .audio-album { position:absolute; width:60px; }
  174. .audio-player { position:absolute; width:25px; height:25px; margin-left:15px; margin-top:15px; opacity:0.9; overflow:hidden; border:2px solid {color:Border}; }
  175. .audio-info { margin-top:-2px; position:relative; margin-left:70px; padding:5px; }
  176.  
  177. #entries {
  178. margin-left:430px;
  179. letter-spacing:1px;
  180. }
  181.  
  182. #post {
  183. margin-top:20px;
  184. margin:15px;
  185. padding-left:15px;
  186. padding-right:15px;
  187. padding:25px;
  188. width:250px;
  189. border:3px double {color:Border};
  190. }
  191.  
  192. #post img{
  193. opacity:0.8;
  194. -webkit-transition: all 0.6s ease-in-out;
  195. -moz-transition: all 0.6s ease-in-out;
  196. -o-transition: all 0.6s ease-in-out;
  197. -ms-transition: all 0.6s ease-in-out;
  198. transition: all 0.6s ease-in-out;
  199. }
  200.  
  201. #post img:hover {
  202. opacity:1;
  203. -webkit-transition: all 0.6s ease-in-out;
  204. -moz-transition: all 0.6s ease-in-out;
  205. -o-transition: all 0.6s ease-in-out;
  206. -ms-transition: all 0.6s ease-in-out;
  207. transition: all 0.6s ease-in-out;
  208. }
  209.  
  210. #quote {
  211. padding:10px;
  212. margin-bottom:5px;
  213. background:{color:Quote};
  214. font-family:Times New Roman;
  215. font-size:10px;
  216. font-style:italic;
  217. letter-spacing:1px;
  218. -webkit-border-radius:2px;
  219. -moz-border-radius:2px;
  220. border-radius:2px;
  221. }
  222.  
  223. #chat {
  224. text-transform:lowercase;
  225. }
  226.  
  227. #website {
  228. font-style:italic;
  229. text-align:right;
  230. font-size:12px;
  231. color:{color:Text};
  232. }
  233.  
  234. #sidebar {
  235. position:fixed;
  236. margin-left:750px;
  237. margin-top:-50px;
  238. }
  239.  
  240. #sidebarimage img {
  241. width:145px;
  242. height:190px;
  243. position:fixed;
  244. bottom:160px;
  245. margin-left:-520px;
  246. padding:15px;
  247. border:3px double {color:Border};
  248. }
  249.  
  250. #sidebarimage img{
  251. opacity:0.8;
  252. -webkit-transition: all 0.6s ease-in-out;
  253. -moz-transition: all 0.6s ease-in-out;
  254. -o-transition: all 0.6s ease-in-out;
  255. -ms-transition: all 0.6s ease-in-out;
  256. transition: all 0.6s ease-in-out;
  257. }
  258.  
  259. #sidebarimage img:hover {
  260. opacity:1;
  261. -webkit-transition: all 0.6s ease-in-out;
  262. -moz-transition: all 0.6s ease-in-out;
  263. -o-transition: all 0.6s ease-in-out;
  264. -ms-transition: all 0.6s ease-in-out;
  265. transition: all 0.6s ease-in-out;
  266. }
  267.  
  268. #rules {
  269. font-size:25px;
  270. position:fixed;
  271. margin-left:-290px;
  272. margin-top:120px;
  273. font-family:Times New Roman;
  274. font-style:italic;
  275. text-align:right;
  276. line-height:40%;
  277. width:460px;
  278. opacity:0.9;
  279. padding:20px;
  280. padding-top:75px;
  281. padding-bottom:30px;
  282. letter-spacing:0px;
  283. text-transform:lowercase;
  284. color:{color:Text};
  285. background:{color:Background};
  286. }
  287.  
  288. #qTip {
  289. padding: 5px;
  290. display: none;
  291. text-align: center;
  292. position:fixed;
  293. font-size:9px;
  294. text-transform:uppercase;
  295. font-family:Calibri;
  296. border:3px double {color:Border};
  297. background: {color:Background};
  298. color: {color:Text};
  299. font-style:none;
  300. letter-spacing: 0px;
  301. }
  302.  
  303. #links {
  304. width:200px;
  305. font-size:9px;
  306. font-family:Times New Roman;
  307. font-style:italic;
  308. text-align:center;
  309. text-transform:lowercase;
  310. opacity:0.8;
  311. position:fixed;
  312. margin-left:-545px;
  313. bottom:210px;
  314. letter-spacing:0px;
  315. }
  316.  
  317. #links a {
  318. display:block;
  319. width:10px;
  320. height:4px;
  321. padding:5px;
  322. margin-right:15px;
  323. margin-bottom:10px;
  324. color:{color:Link};
  325. }
  326.  
  327. #links img{
  328. opacity: 0.9;
  329. -webkit-transition: all 0.7s ease-in-out;
  330. -moz-transition: all 0.7s ease-in-out;
  331. -o-transition: all 0.7s ease-in-out;
  332. -ms-transition: all 0.7s ease-in-out;
  333. transition: all 0.7s ease-in-out;
  334. }
  335.  
  336. #links img:hover{
  337. opacity: 0.3;
  338. -webkit-transition: all 0.7s ease-in-out;
  339. -moz-transition: all 0.7s ease-in-out;
  340. -o-transition: all 0.7s ease-in-out;
  341. -ms-transition: all 0.7s ease-in-out;
  342. transition: all 0.7s ease-in-out;
  343. }
  344.  
  345. #description {
  346. font-size:12px;
  347. width:151px;
  348. height:60px;
  349. padding:15px;
  350. font-family:Libre Baskerville;
  351. text-transform:none;
  352. position:fixed;
  353. font-style:italic;
  354. text-align:justify;
  355. line-height:100%;
  356. bottom:50px;
  357. margin-left:-520px;
  358. letter-spacing:0px;
  359. opacity:1;
  360. position:fixed;
  361. -moz-transition-duration:1s;
  362. -webkit-transition-duration:1s;
  363. -o-transition-duration:1s;
  364. background:{color:Description};
  365. }
  366.  
  367. #pagination {
  368. width:120px;
  369. font-size:10px;
  370. text-align:center;
  371. padding:8px;
  372. margin-top:610px;
  373. margin-left:-500px;
  374. letter-spacing:0px;
  375. position:fixed;
  376. font-family:Libre Baskerville;
  377. font-style:italic;
  378. color:black;
  379. }
  380.  
  381. #pagination a:hover {
  382. color:{color:Hover};
  383. -webkit-transition: all 0.5s ease-out;
  384. -moz-transition: all 0.5s ease-out;
  385. transition: all 0.5s ease-out;
  386.  
  387. }
  388.  
  389. #info {
  390. font-family:Trebuchet MS;
  391. margin-top:12px;
  392. font-size:7px;
  393. color:{color:Text};
  394. text-transform:uppercase;
  395. font-style:normal;
  396. text-align:center;
  397. -moz-transition-duration:0.5s;
  398. -webkit-transition-duration:0.5s;
  399. -o-transition-duration:0.5s;
  400. }
  401.  
  402. #info a {
  403. color:{color:Link};
  404. }
  405.  
  406. #info a:hover {
  407. color:{color:Hover};
  408. }
  409.  
  410. #tags {
  411. font-family:Trebuchet MS;
  412. text-transform:uppercase;
  413. font-style:none;
  414. color:{color:Tags};
  415. line-height:120%;
  416. font-size:7px;
  417. opacity:1;
  418. text-align:center;
  419. padding-top:5px;
  420. -moz-transition-duration:.5s;
  421. -webkit-transition-duration:.5s;
  422. -o-transition-duration:.5s;
  423. }
  424.  
  425.  
  426. #tags a {
  427. color:{color:Text};
  428. }
  429.  
  430. #tags a:hover {
  431. color:{color:Hover};
  432. }
  433.  
  434. #notes {
  435. text-transform:uppercase;
  436. font-size:7px;
  437. font-family:Trebuchet MS;
  438. }
  439.  
  440. #question {
  441. float:left;
  442. line-height:130%;
  443. }
  444.  
  445. #question img {
  446. margin-right:11px;
  447. border:1px solid {color:Border};
  448. padding:2px;
  449. border-radius:400px;
  450. }
  451.  
  452.  
  453.  
  454. #view a {
  455. padding: 5px;
  456. width:auto;
  457. display: inline-block;
  458. text-align: center;
  459. font-size:9px;
  460. text-transform:uppercase;
  461. font-family:Calibri;
  462. border:3px double {color:Border};
  463. background: {color:Background};
  464. color: {color:Text};
  465. font-style:none;
  466. letter-spacing: 0px;
  467. }
  468.  
  469. #credit {
  470. font-family:Calibri;
  471. font-size:9px;
  472. letter-spacing:1px;
  473. float:right;
  474. position:fixed;
  475. bottom:15px;
  476. right:10px;
  477. }
  478.  
  479. #credit a {
  480. color:{color:Background};
  481. padding:5px;
  482. text-transform:uppercase;
  483. background:{color:Link};
  484. }
  485.  
  486. #credit a:hover {
  487. color:{color:Link};
  488. text-transform:uppercase;
  489. font-style:none;
  490. background:{color:Background};
  491. }
  492.  
  493. {CustomCSS}</style>{block:IfInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScroll}</head><body>
  494.  
  495. <div id="sidebar">
  496. <div id="sidebarimage"><img src="{image:Sidebar}"></div>
  497. <div id="links">
  498. <a href="/" title="refresh"><img src="http://static.tumblr.com/p7wg3p9/TP5moktey/home.png"></a>
  499. <a href="/ask" title="message"><img src="http://static.tumblr.com/p7wg3p9/3Wdmoktn4/message.png"></a>
  500. {block:ifLink1}<a href="{text:Link1}" title="{text:Link2 Title}"><img src="http://static.tumblr.com/p7wg3p9/kuGmrbe84/user.png"></a>{/block:ifLink1}
  501. {block:ifLink2}<a href="{text:Link2}" title="{text:Link2 Title}"><img src="http://static.tumblr.com/p7wg3p9/w2jmoktxx/heart.png"></a>{/block:ifLink2}
  502. {block:ifLink3}<a href="{text:Link3}" title="{text:Link3 Title}"><img src="http://static.tumblr.com/p7wg3p9/88tmokts4/plus.png"></a>{/block:ifLink3}
  503. </div>
  504. <div id="description">{Description}</div>
  505.  
  506. <div id="pagination">
  507. <center>{block:IfPagination}{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">fall</a>{/block:PreviousPage} — {block:NextPage}<a href="{NextPage}">jump</a>{/block:NextPage}{/block:Pagination}{/block:IfPagination} </center>
  508. </div>
  509. </div>
  510.  
  511. <div id="entries">
  512. {block:IfInfiniteScroll}<div class="autopagerize_page_element">{/block:IfInfiniteScroll}{block:Posts}
  513. <div id="post">
  514.  
  515. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  516.  
  517. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-250}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  518.  
  519. {block:Photoset}{Photoset-250}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  520.  
  521. {block:Quote}<div id="quote">❝{Quote}</i>❞{block:Source} — <i>{Source}</i></div>{/block:Source}{/block:Quote}
  522.  
  523. {block:Link}<div id="website"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}{/block:Link}
  524.  
  525. <div id="chat">
  526. {block:Chat}
  527. {block:Title}
  528. <h1>{Title}</h1>
  529. {/block:Title}
  530. {block:Lines}
  531. <blockquote>{block:Label}<b>{Label}</b>{/block:Label} -
  532. {Line}</blockquote><br>
  533. {/block:Lines}{/block:Chat}
  534. </div>
  535.  
  536. {block:Audio}
  537. <div class="audio">
  538. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  539. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  540. <div class="audio-info">
  541. {block:TrackName}<b>Title:</b> {TrackName}<br>{/block:TrackName}
  542. {block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  543. {block:Album}<b>Album:</b> {Album}<br>{/block:Album}
  544. {block:PlayCount}<b>Plays:</b> {PlayCount}<br>{/block:PlayCount}
  545. </div></div>
  546. {/block:Audio}
  547.  
  548. {block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  549.  
  550. {block:Answer}<div id="question"<div id="question"><img src="{AskerPortraitURL-24}"></div> "{Question}"<br>
  551. — <b><i>{Asker}</i></b><br><br>
  552. {Answer}<br>{/block:Answer}
  553.  
  554. {block:Date}<div id="info"> posted <a href="{Permalink}">{TimeAgo}</a>
  555. {/block:Date} {block:RebloggedFrom} <a href="{ReblogParentURL}">via </a> ‧ {/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">source</a> — {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a> {/block:RebloggedFrom} with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  556. </div>
  557. {block:HasTags}
  558. <div id="tags">
  559. {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  560. {/block:HasTags}
  561. <div id="notes">
  562. {block:PostNotes}{PostNotes}{/block:PostNotes}
  563. </div>
  564. </div>
  565. {/block:Posts}{block:IfInfiniteScroll}</div>{/block:IfInfiniteScroll}
  566.  
  567. <div id="credit"><a href="http://mlikboy.tumblr.com/">mlikboy</a></div>
  568.  
  569. </body>
  570. </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!