API tools faq
paste
bangyixing

Theme #17 - Perfection

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