API tools faq
paste
Jyuubi

[Theme] → #22 Aesthetic

Jyuubi
Apr 10th, 2012
31,163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <!--
  5. PLEASE DO NOT REMOVE THIS.
  6. THE REMOVAL OF THIS PART WILL CONSIDER YOU A THIEF.
  7. IF YOU REMOVE CREDIT, MAKE SURE IT'S ON A CREDITS PAGE.
  8.  
  9. THEME: #22 AESTHETIC
  10. jyuubi.org | manatopia.org
  11.  
  12. --RULES--
  13. 1) DO NOT REMOVE CREDIT.
  14. 2) DO NOT USE TO MAKE YOUR OWN THEME TO RESDISTRIBUTE.
  15. 3) DO NOT USE TO MAKE YOUR OWN THEME AND REMOVE CREDIT.
  16. 4) IF YOU USE ANYTHING FROM MY THEMES, ALWAYS CREDIT.
  17. 5) DO USE ANY GRAPHICS MADE FOR A PREVIEW.
  18.  
  19. --CREDIT--
  20. [sidebar] ukekid.tumblr.com
  21. -->
  22.  
  23. <meta name="color:BackgroundM" content="#fff">
  24.  
  25. <meta name="color:Post Background" content="#f6f6f6">
  26. <meta name="color:Post Border" content="#dedede">
  27. <meta name="color:Post Text" content="#a8a8a8">
  28. <meta name="color:Post Bold" content="#8e8e8e">
  29. <meta name="color:Post Italic" content="#8e8e8e">
  30. <meta name="color:Post Link" content="#6f6f6f">
  31. <meta name="color:Post Title" content="#cdcdcd">
  32. <meta name="color:Post Blockquote" content="#dedede">
  33. <meta name="color:Post Question" content="#fbfbfb">
  34.  
  35. <meta name="color:Stats Background" content="#e4e4e4">
  36. <meta name="color:Stats Text" content="#a8a8a8">
  37.  
  38. <meta name="color:Sidebar Border" content="#727272">
  39. <meta name="color:Sidebar Title" content="#cdcdcd">
  40. <meta name="color:Sidebar Text" content="#a8a8a8">
  41. <meta name="color:Sidebar Bold" content="#8e8e8e">
  42. <meta name="color:Sidebar Italic" content="#8e8e8e">
  43. <meta name="color:Sidebar Link" content="#6f6f6f">
  44.  
  45. <meta name="color:Nav Background" content="#fff">
  46. <meta name="color:Nav Text" content="#cdcdcd">
  47. <meta name="color:Nav Text Hover" content="#818181">
  48.  
  49. <meta name="image:BackgroundM" content="http://static.tumblr.com/pdgxkke/GaEm2atn4/aesthetic.png">
  50. <meta name="image:Sidebar" content="http://static.tumblr.com/pdgxkke/fxfm2atns/aesthetic.png">
  51.  
  52. <meta name="if:Show Captions" content="0">
  53. <meta name="if:Photo Fading" content="1">
  54.  
  55. <meta name="text:Sidebar Title" content="">
  56.  
  57. <meta name="text:Name 1" content="">
  58. <meta name="text:URL 1" content="http://">
  59. <meta name="text:Name 2" content="">
  60. <meta name="text:URL 2" content="http://">
  61. <meta name="text:Name 3" content="">
  62. <meta name="text:URL 3" content="http://">
  63. <meta name="text:Name 4" content="">
  64. <meta name="text:URL 4" content="http://">
  65. <meta name="text:Name 5" content="">
  66. <meta name="text:URL 5" content="http://">
  67. <meta name="text:Name 6" content="">
  68. <meta name="text:URL 6" content="http://">
  69.  
  70. <head>
  71. <title>{Title}</title>
  72. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  73. <link rel="shortcut icon" href="{Favicon}">
  74.  
  75. <style type="text/css">
  76. /* BODY */
  77. body {
  78. background-image: url('{image:BackgroundM}');
  79. background-attachment: fixed;
  80. background-color: {color:BackgroundM};
  81. }
  82.  
  83. ::-webkit-scrollbar-thumb:vertical {
  84. background-color: {color:Post Bold};
  85. height: 50px;
  86. }
  87.  
  88. ::-webkit-scrollbar {
  89. height: 10px;
  90. width: 3px;
  91. background-color: {color:Post Background};
  92. }
  93.  
  94. /* SIDEBAR */
  95. #sidebar {
  96. position: fixed;
  97. left: 570px;
  98. top: 200px;
  99. }
  100.  
  101. #desc {
  102. width: 150px;
  103. font-family: tahoma, sans-serif;
  104. font-size: 9px;
  105. color: {color:Sidebar Text};
  106. text-align: justify;
  107. border-left: 3px solid {color:Sidebar Border};
  108. line-height: 10px;
  109. padding-left: 5px;
  110. }
  111.  
  112. #desc b, strong {
  113. color: {color:Sidebar Bold};
  114. }
  115.  
  116. #desc i, em {
  117. color: {color:Sidebar Italic};
  118. }
  119.  
  120. #desc a {
  121. color: {color:Sidebar Link};
  122. text-decoration: none;
  123. }
  124.  
  125. #desc img {
  126. max-width: 150px;
  127. margin-bottom: 1px;
  128. }
  129.  
  130. #header {
  131. font-family: georgia;
  132. font-size: 10px;
  133. color: {color:Sidebar Title};
  134. font-weight: normal;
  135. font-style: italic;
  136. letter-spacing: 2px;
  137. text-align: right;
  138. margin: 0;
  139. width: 160px;
  140. }
  141.  
  142. #main {
  143. text-align: center;
  144. margin-bottom: 2px;
  145. position: relative;
  146. z-index: 999;
  147. }
  148.  
  149. #main a {
  150. background-color: {color:Nav Background};
  151. border-bottom: 1px dotted {color:Nav Text};
  152. font-family: consolas;
  153. font-size: 8px;
  154. color: {color:Nav Text};
  155. text-decoration: none;
  156. text-transform: uppercase;
  157. display: inline-block;
  158. padding-top: 2px;
  159. width: 35px;
  160. text-align: center;
  161. -webkit-transition: all 0.5s ease-in-out;
  162. -moz-transition: all 0.5s ease-in-out;
  163. -o-transition: all 0.5s ease-in-out;
  164. -ms-transition: all 0.5s ease-in-out;
  165. transition: all 0.5s ease-in-out;
  166. }
  167.  
  168. #main a:hover {
  169. color: {color:Nav Text Hover};
  170. border-bottom: 1px dotted {color:Nav Text Hover};
  171. }
  172.  
  173. #nav {
  174. position: fixed;
  175. top: 230px;
  176. left: 735px;
  177. }
  178.  
  179. #nav a {
  180. background-color: {color:Nav Background};
  181. border-bottom: 1px dotted {color:Nav Text};
  182. font-family: consolas;
  183. font-size: 9px;
  184. color: {color:Nav Text};
  185. text-decoration: none;
  186. text-transform: uppercase;
  187. display: block;
  188. width: 51px;
  189. margin-bottom: 3px;
  190. text-align: center;
  191. -webkit-transition: all 0.5s ease-in-out;
  192. -moz-transition: all 0.5s ease-in-out;
  193. -o-transition: all 0.5s ease-in-out;
  194. -ms-transition: all 0.5s ease-in-out;
  195. transition: all 0.5s ease-in-out;
  196. }
  197.  
  198. #nav a:hover {
  199. color: {color:Nav Text Hover};
  200. border-bottom: 1px dotted {color:Nav Text Hover};
  201. }
  202.  
  203. .pagination {
  204. display:none;
  205. }
  206.  
  207. /* ENTRIES */
  208. #posts {
  209. {block:IndexPage}width: 600px;{/block:IndexPage}
  210. {block:PermalinkPage}width: 400px;{/block:PermalinkPage}
  211. float: left;
  212. }
  213.  
  214. .entry {
  215. background-color: {color:Post Background};
  216. {block:IndexPage}width: 250px;{/block:IndexPage}
  217. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  218. padding: 6px;
  219. position: relative;
  220. {block:IndexPage}float: left;{/block:IndexPage}
  221. margin: 5px;
  222. font-family: tahoma, sans-serif;
  223. {block:IndexPage}font-size: 9px;{/block:IndexPage}
  224. {block:PermalinkPage}font-size: 11px;{/block:PermalinkPage}
  225. color: {color:Post Text};
  226. text-align: justify;
  227. {block:PermalinkPage}margin-left: 30px;{/block:PermalinkPage}
  228. border: 1px solid #dedede;
  229. }
  230.  
  231. .entry b, strong {
  232. color: {color:Post Bold};
  233. }
  234.  
  235. .entry i, em {
  236. color: {color:Post Italic};
  237. }
  238.  
  239. .entry a {
  240. color: {color:Post Link};
  241. text-decoration: none;
  242. }
  243.  
  244. .entry h1 {
  245. font-family: georgia;
  246. font-size: 11px;
  247. color: {color:Post Title};
  248. font-weight: normal;
  249. font-style: italic;
  250. letter-spacing: 1px;
  251. text-transform: lowercase;
  252. text-align: right;
  253. margin: 0;
  254. }
  255.  
  256. .entry h1 a {
  257. color: {color:Post Title};
  258. }
  259.  
  260. .entry blockquote {
  261. border-left: 3px solid {color:Post Blockquote};
  262. padding-left: 8px;
  263. margin-left: 5px;
  264. }
  265.  
  266. .entry img {
  267. {block:IndexPage}max-width: 250px;{/block:IndexPage}
  268. {block:PermalinkPage}max-width: 500px;{/block:PermalinkPage}
  269. margin-bottom: -2px;
  270. {block:IfPhotoFading}opacity: .8;{/block:IfPhotoFading}
  271. -webkit-transition: all 0.5s ease-in-out;
  272. -moz-transition: all 0.5s ease-in-out;
  273. -o-transition: all 0.5s ease-in-out;
  274. -ms-transition: all 0.5s ease-in-out;
  275. transition: all 0.5s ease-in-out;
  276. }
  277.  
  278. .entry img:hover {
  279. opacity: 1;
  280. }
  281.  
  282. .photo {
  283. {block:IfPhotoFading}opacity: .8;{/block:IfPhotoFading}
  284. margin-bottom: -2px;
  285. -webkit-transition: all 0.5s ease-in-out;
  286. -moz-transition: all 0.5s ease-in-out;
  287. -o-transition: all 0.5s ease-in-out;
  288. -ms-transition: all 0.5s ease-in-out;
  289. transition: all 0.5s ease-in-out;
  290. }
  291.  
  292. .photo:hover {
  293. opacity: 1;
  294. }
  295.  
  296. /* QUOTE POST */
  297. .entry h2 {
  298. font-family: georgia;
  299. font-size: 9px;
  300. color: {color:Post Title};
  301. font-weight: normal;
  302. font-style: italic;
  303. text-transform: lowercase;
  304. letter-spacing: 2px;
  305. text-align: left;
  306. }
  307.  
  308. .quote {
  309. font-family: georgia;
  310. font-size: 20px;
  311. color: {color:Post Bold};
  312. float: left;
  313. margin-top: -1px;
  314. margin-right: 5px;
  315. }
  316.  
  317. /* QUESTIONS */
  318. .ask {
  319. background-color: {color:Post Question};
  320. padding: 2px;
  321. border-bottom: 1px dotted {color:Post Blockquote};
  322. }
  323.  
  324. .ask i {
  325. font-style: normal;
  326. }
  327.  
  328. /* STATS */
  329. .stats {
  330. background-color: {color:Stats Background};
  331. opacity: 0;
  332. width: 262px;
  333. height: 10px;
  334. position: absolute;
  335. left: 0px;
  336. top: 0px;
  337. font-family: consolas;
  338. font-size: 8px;
  339. color: {color:Stats Text};
  340. text-align: center;
  341. text-transform: uppercase;
  342. line-height: 10px;
  343. -webkit-transition: all 0.7s ease;
  344. -moz-transition: all 0.7s ease;
  345. -o-transition: all 0.7s ease;
  346. z-index: 999;
  347. letter-spacing: 2px;
  348. }
  349.  
  350. .stats a {
  351. color: {color:Stats Text};
  352. text-decoration: none;
  353. border-bottom: 0px;
  354. }
  355.  
  356. .entry:hover .stats {
  357. opacity: 1;
  358. }
  359.  
  360. /* PERMALINK PAGE */
  361. .permalink {
  362. font-family: consolas;
  363. font-size: 9px;
  364. color: {color:Sidebar Text};
  365. text-transform: uppercase;
  366. text-align: center;
  367. width: 518px;
  368. float: left;
  369. margin-left: 30px;
  370. }
  371.  
  372. .permalink b {
  373. color: {color:Sidebar Bold};
  374. font-weight: normal;
  375. }
  376.  
  377. #date {
  378. color: {color:Sidebar Italic};
  379. }
  380.  
  381. .permalink a {
  382. color: {color:Sidebar Link};
  383. text-decoration: none;
  384. }
  385.  
  386. ol.notes {
  387. padding: 0px;
  388. margin: 15px 0px;
  389. list-style-type: none;
  390. background: transparent;
  391. border: 0px;
  392. letter-spacing: 0px;
  393. }
  394.  
  395. ol.notes li.note {
  396. padding: 1px;
  397. text-align: left;
  398. letter-spacing: 0px;
  399. }
  400.  
  401. .notes img{
  402. width: 8px;
  403. position: relative;
  404. top: 1px;
  405. opacity: .5;
  406. }
  407.  
  408. /* FOLLOW CODE */
  409. iframe#tumblr_controls {
  410. right:3px !important;
  411. position: fixed !important;
  412. -webkit-transition: opacity 0.7s linear;
  413. opacity: 0.2;
  414. -webkit-transition: all 0.8s ease-out;
  415. -moz-transition: all 0.8s ease-out;
  416. transition: all 0.8s ease-out;
  417. }
  418.  
  419. iframe#tumblr_controls:hover {
  420. -webkit-transition: opacity 0.7s linear;
  421. opacity: 1;
  422. -webkit-transition: all 0.4s ease-out;
  423. -moz-transition: all 0.4s ease-out;
  424. transition: all 0.4s ease-out;
  425. }
  426. </style>
  427. {block:IndexPage}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  428.  
  429. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  430.  
  431. <script>
  432. $(function(){
  433. var $container = $('#posts');
  434. $container.imagesLoaded(function(){
  435. $container.masonry({
  436. itemSelector: '.entry',
  437. });
  438. });
  439. $container.infinitescroll({
  440. itemSelector : ".entry",
  441. navSelector : "div.pagination",
  442. nextSelector : ".pagination a#next",
  443. loadingImg : "",
  444. loadingText : "<em></em>",
  445. bufferPx : 10000,
  446. extraScrollPx: 12000,
  447. },
  448. // trigger Masonry as a callback
  449. function( newElements ) {
  450. var $newElems = $( newElements ).css({ opacity: 0 });
  451. // ensure that images load before adding to masonry layout
  452. $newElems.imagesLoaded(function(){
  453. $newElems.animate({ opacity: 1 });
  454. $container.masonry( 'appended', $newElems, true );
  455. });
  456. }
  457. );
  458. });
  459. </script>{/block:IndexPage}
  460. </head>
  461. <body>
  462.  
  463. <div id="sidebar">
  464. <div id="header">
  465. {text:Sidebar Title}
  466. </div>
  467. <div id="desc">
  468. {block:IfSidebarImage}<img src="{image:Sidebar}" alt=""><br />{/block:IfSidebarImage}
  469. <div id="main">
  470. <a href="/">return</a>
  471. <a href="/archive">archive</a>
  472. <a href="/ask">message</a>
  473. <a href="http://jyuubi.org">theme</a>
  474. </div>
  475. {Description}
  476. </div>
  477. <div class="pagination">
  478. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  479. </div>
  480. </div>
  481. <div id="nav">
  482. {block:IfName1}<a href="{text:URL 1}">{text:Name 1}</a>{/block:IfName1}
  483. {block:IfName2}<a href="{text:URL 2}">{text:Name 2}</a>{/block:IfName2}
  484. {block:IfName3}<a href="{text:URL 3}">{text:Name 3}</a>{/block:IfName3}
  485. {block:IfName4}<a href="{text:URL 4}">{text:Name 4}</a>{/block:IfName4}
  486. {block:IfName5}<a href="{text:URL 5}">{text:Name 5}</a>{/block:IfName5}
  487. {block:IfName6}<a href="{text:URL 6}">{text:Name 6}</a>{/block:IfName6}
  488. </div>
  489.  
  490. <div id="posts">
  491. {block:Posts}
  492.  
  493. <div class="entry">
  494.  
  495. {block:Text}
  496. {block:Title}<h1>{Title}</h1>{/block:Title}
  497. {Body}
  498. {/block:Text}
  499.  
  500. {block:Photo}
  501. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="">{LinkCloseTag}</center>
  502. {block:PermalinkPage}{block:HighRes}<a href="{PhotoURL-HighRes}">high resolution &raquo;</a>{/block:HighRes}{/block:PermalinkPage}
  503. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  504. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  505. {Caption}
  506. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  507. {/block:Photo}
  508.  
  509. {block:Photoset}
  510. <div class="photo">{block:IndexPage}{Photoset-250}{/block:IndexPage}
  511. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</div>
  512. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  513. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  514. {Caption}
  515. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  516. {/block:Photoset}
  517.  
  518. {block:Quote}
  519. <div class="quote">&#10077;</div>
  520. <h2>{Quote}</h2>
  521. {block:Source}<div style="border-right: 5px solid #dedede; text-align: right; padding-right: 2px; font-family: consolas; text-transform: uppercase; letter-spacing: 1px;">{Source}</div>{/block:Source}
  522. {/block:Quote}
  523.  
  524. {block:Link}
  525. <h1><a href="{URL}" target="{Target}">{Name}</a></h1>
  526. {block:Description}{Description}{/block:Description}
  527. {/block:Link}
  528.  
  529. {block:Chat}
  530. {block:Title}<h1>{Title}</h1>{/block:Title}
  531. {block:Lines}
  532. {block:Label}
  533. <b>{Label}</b>
  534. {/block:Label}
  535. {Line}<br />
  536. {/block:Lines}
  537. {/block:Chat}
  538.  
  539. {block:Audio}
  540. {block:AlbumArt}<div style="margin-bottom: 3px;"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  541. <div style="background-color: #fff; height: 27px; margin-bottom: 2px;">{AudioPlayer}</div>
  542. <div style="border-left: 5px solid #dedede; padding-left: 5px; font-family: consolas; text-transform: uppercase;">{block:TrackName}{TrackName} / {/block:TrackName}{block:Artist}{Artist}{/block:Artist}</div>
  543. {block:IfShowCaptions}{block:Caption}<br />{Caption}{/block:Caption}{/block:IfShowCaptions}
  544. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<br />
  545. {Caption}
  546. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  547. {/block:Audio}
  548.  
  549. {block:Video}
  550. {block:IndexPage}{Video-250}{/block:IndexPage}
  551. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  552. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  553. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  554. {Caption}
  555. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  556. {/block:Video}
  557.  
  558. {block:Answer}
  559. <div class="ask"><i>{Asker}</i> <b>sent:</b> {Question}</div>
  560. {Answer}
  561. {/block:Answer}
  562.  
  563. {block:IndexPage}<div class="stats">
  564. <a href="{Permalink}">{TimeAgo}{block:NoteCount} / {NoteCountWithLabel}{/block:NoteCount}</a>
  565. </div>{/block:IndexPage}
  566. </div>
  567.  
  568. {block:PermalinkPage}
  569. <div class="permalink">
  570. <center><div id="date">{block:Date}posted {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>{block:RebloggedFrom}<b>origin:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> &nbsp;|&nbsp; <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br />{/block:RebloggedFrom}
  571. {block:HasTags}<b>tags &raquo;</b> {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}</center>
  572. {block:PostNotes}
  573. {PostNotes}
  574. {/block:PostNotes}
  575. </div>
  576. {/block:PermalinkPage}
  577.  
  578. {/block:Posts}
  579. </div>
  580.  
  581. </body>
  582. </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!