Advertisement
rowrz

Chemos Theme

Apr 6th, 2014
125
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.00 KB | None | 0 0
  1. <!--                                  
  2.  _ __ _____      ___ __ ____        
  3. | '__/ _ \ \ /\ / / '__|_  /        
  4. | | | (_) \ V  V /| |   / /        
  5. |_|  \___/ \_/\_/ |_|  /___|        
  6. | | | |                            
  7. | |_| |__   ___ _ __ ___   ___  ___
  8. | __| '_ \ / _ \ '_ ` _ \ / _ \/ __|
  9. | |_| | | |  __/ | | | | |  __/\__ \
  10.  \__|_| |_|\___|_| |_| |_|\___||___/
  11.                    
  12. chemos theme v1.62
  13.                                    
  14. designed by andrew manufactured by alex
  15. http://rowrz.tumblr.com/themes
  16. -->
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  21. {block:Description}
  22.             <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <meta name="font:posts" content="arial"/>
  26. <meta name="font:posttitle" content="arial"/>
  27. <meta name="color:blogtitle" content=""/>
  28. <meta name="color:Background" content="#eeeeee"/>
  29. <meta name="color:Text" content="#000000"/>
  30. <meta name="color:Hover" content="#eeeeee"/>
  31. <meta name="color:Link" content="#000000"/>
  32. <meta name="color:accents" content="#eeeeee"/>
  33. <meta name="color:linkhover" content="#eeeeee"/>
  34. <meta name="color:title" content="#000000"/>
  35. <meta name="color:entrybg" content="#FFFFFF"/>
  36. <meta name="color:homebg" content="#FFFFFF"/>
  37. <meta name="color:link1bg" content="#dddddd"/>
  38. <meta name="color:link2bg" content="#b9b9b9" />
  39. <meta name="color:link3bg" content="#afafaf" />
  40. <meta name="color:link4bg" content="#989898" />
  41. <meta name="color:link5bg" content="#808080" />
  42. <meta name="image:Background" content="1"/>
  43. <meta name="image:sidebar" content="http://static.tumblr.com/264466c423a280025f87a11d077d6dfe/4ra4qv5/Ymgn2oz7p/tumblr_static_tumblr_n0fk3sgfhg1rj5baro1_1280.jpg"/>
  44.  
  45. <meta name="text:home link title" content="return"/>
  46.  
  47. <meta name="text:descfontsize" content="14px"/>
  48.  
  49.  
  50. <meta name="text:link one" content=""/>
  51. <meta name="text:link one title" content=""/>
  52.  
  53. <meta name="text:link two" content=""/>
  54. <meta name="text:link two title" content=""/>
  55.  
  56. <meta name="text:link three" content=""/>
  57. <meta name="text:link three title" content=""/>
  58.  
  59. <meta name="text:link four" content=""/>
  60. <meta name="text:link four title" content=""/>
  61.  
  62. <meta name="if:showcaptions" content="1" />
  63.  
  64.  
  65.  
  66.  
  67. <script src="http://static.tumblr.com/ojd74qh/dIVn7c97d/jquery.1.11.0.min.chemos.js"></script>
  68.  
  69. <style type="text/css">
  70. @font-face
  71. {
  72. font-family: typewriter1;
  73. src: url(http://static.tumblr.com/4ra4qv5/7yOn2otg5/fragmentcore.otf);
  74. }
  75.  
  76. -webkit-transition: all 0.4s ease-in-out;
  77.  
  78. -moz-transition: all 0.4s ease-in-out;
  79.  
  80. -o-transition: all 0.4s ease-in-out;
  81.  
  82. a {
  83. text-decoration:none;
  84. -webkit-transition: all 0.7s ease-out;
  85. -moz-transition: all 0.7s ease-out;
  86. transition: all 0.7s ease-out;
  87. }
  88.  
  89. a:hover {
  90. text-decoration:none;
  91. -webkit-transition: all 0.7s ease-out;
  92. -moz-transition: all 0.7s ease-out;
  93. transition: all 0.7s ease-out;
  94. }
  95.  
  96. iframe#tumblr_controls, #ib{
  97. position:fixed !important;
  98. -webkit-filter: invert(100%)
  99. }
  100.  
  101. #center{
  102. padding-top:3px;
  103. padding-bottom:3px;
  104. position:fixed !important;
  105. width:250px;
  106. height:207px;
  107. background-color:#fff;
  108. {block:PermalinkPage}
  109. width:410px;
  110. height:207px;
  111. {/block:PermalinkPage}
  112. }
  113.  
  114. #posts{
  115. font-family:{font:posts};
  116. float:center;
  117. {block:indexpage}
  118. width:710px;
  119. {/block:indexpage}
  120. {block:permalinkpage}
  121. width:860px;
  122. {/block:permalinkpage}
  123. margin-left: 30%;
  124. margin-top: 0px;
  125. padding-top:80px;
  126. }
  127.  
  128. body {
  129. padding: 0px;
  130. margin: 0px;
  131. color:{color:text};
  132. font-size: 10px;
  133. line-height:14px;
  134. background-color: {color:Background};
  135. background-image:url({image:Background});
  136. background-attachment: fixed;
  137. background-size: cover;
  138. }
  139.  
  140. a:link, a:active, a:visited{
  141. text-decoration:none;
  142. color:{color:link};
  143. -webkit-transition: all 0.3s ease-out;
  144. -moz-transition: all 0.3s ease-out;
  145. transition: all 0.3s ease-out;}
  146.  
  147. a:hover{
  148. color:{color:linkhover};
  149. text-shadow:0px 0px 20px #fff;
  150. -webkit-transition: all 0.3s ease-out;
  151. -moz-transition: all 0.3s ease-out;
  152. transition: all 0.3s ease-out;
  153. }
  154.  
  155. #entry {
  156. margin:16px;
  157. float:left;
  158. z-index:10;
  159. box-shadow:1px 1px 5px #ccc;
  160. background-color: {color:entrybg};
  161. font-size: 12px;
  162. line-height:15px;
  163. {block:IndexPage}width:260px;{/block:IndexPage}
  164. {block:PermalinkPage}width:400px; margin-left:40px;{/block:PermalinkPage}
  165. border:solid 6px {color:entrybg};
  166. }
  167.  
  168. #entry .perma{
  169. position:absolute;
  170. width: 260px;
  171. height: auto;
  172. overflow:hidden;
  173. bottom:0px;
  174. font-family: consolas;
  175. font-size: 12px;
  176. line-height:14px;
  177. text-align: center;
  178. padding:0px;
  179. text-transform: uppercase;
  180. opacity:0.0;
  181. background-color: rgba(255,255,255,0.5);
  182. -webkit-transition: all 0.8s ease;
  183. -moz-transition: all 0.8s ease;
  184. transition: all 0.8s ease;
  185. -o-transition: all 0.8s ease;
  186. }
  187.  
  188. #entry:hover .perma{
  189. overflow:visible;
  190. width: 260px;
  191.  
  192. opacity: 0.9;
  193. }
  194.  
  195. #entry:hover .perma:hover{
  196. padding-left:15px;
  197. width:245px;
  198. opacity:1;
  199. }
  200.  
  201. .perm{
  202. display: block;
  203. font-family:consolas;
  204. font-size:9px;
  205. line-height:13px;
  206. text-transform:uppercase;
  207. text-align: right;
  208. background-color:{color:accents};
  209. border-right:3px {color:accents} solid;
  210. padding:3px;
  211. opacity:.8;
  212. margin: 0px;
  213. margin-bottom:5px;
  214. -webkit-transition: all 1s ease;
  215. -moz-transition: all 1s ease;
  216. transition: all 1s ease;
  217. -o-transition: all 1s ease;
  218. }
  219.  
  220. .perm:hover{
  221. opacity:.6;
  222. }
  223.  
  224. .blogtitle{
  225. font-size:70px;
  226. line-height:27px;
  227. position:fixed;
  228. font-family:typewriter1;
  229. height:50;
  230. letter-spacing:3px;
  231. text-align:center;
  232. border-bottom:solid 4px #bbbbbb;
  233. width:100%;
  234. z-index:90;
  235. opacity:.9;
  236. text-transform:uppercase;
  237. -webkit-transition: all 0.3s linear;
  238. -moz-transition: all 0.3s linear;
  239. transition: all 0.3s linear;
  240. background-color:white;
  241. padding-top:30px;
  242. padding-bottom:20px;
  243. letter-spacing:15px;
  244. text-align:center;
  245. }
  246.  
  247. .blogtitle a:link, .blogtitle a, .blogtitle{
  248.     color:{color:blogtitle};
  249. }
  250. .blogtitle:hover{
  251. text-shadow: 1px 0px #df8181, -1px 0px #54d2cb;
  252. -webkit-transition: all 0.3s linear;
  253. -moz-transition: all 0.3s linear;
  254. transition: all 0.3s linear;
  255. }
  256.  
  257. .title{
  258. font-family:{font:posttitle};
  259. text-transform:lowercase;
  260. font-size: 19px;
  261. line-height: 24px;
  262. color: {color:text};
  263. }
  264.  
  265. .sidebar{
  266. z-index:999999999;
  267. width:100px;
  268. height:100%;
  269. position:fixed;
  270. background-color:(255,255,255,0);
  271. background-size:cover;
  272. margin-left:0;
  273. padding:14px;
  274. margin-top:0;
  275. font-size:11px;
  276. line-height:15px;
  277. font-family:arial;
  278. padding-top:50px;
  279. overflow:hidden;
  280. border-right:solid 4px #bbbbbb;
  281. text-align:center;
  282. opacity:1;
  283. -webkit-transition: all 0.8s linear;
  284. -moz-transition: all 0.8s linear;
  285. transition: all 0.8s linear;
  286. }
  287.  
  288. .imgside {
  289.     padding-bottom:10px
  290.     width:90px;
  291. }
  292.  
  293. .titlelink:hover{
  294.   text-shadow: 1px 0px #df8181, -1px 0px #54d2cb;
  295. -webkit-transition: all 0.3s linear;
  296. -moz-transition: all 0.3s linear;
  297. transition: all 0.3s linear;  
  298. }
  299.  
  300.  
  301.  
  302. .text img, #entry img {
  303.     height: auto;
  304.     max-width:100%;
  305. }
  306.  
  307.  
  308. .nav0, .nav1, .nav2, .nav3, .nav3, .nav4, .nav5 {
  309.     float:right;
  310.     width:70px;
  311.     margin-right:-20px;
  312.     margin-left:-10px;
  313.     text-align: left;
  314.     list-style-type: none;
  315.     font-family:'courier new';
  316.     background-color:(255,255,255,0.95);
  317.     /*width:70px;
  318.     margin-left:-15;
  319.     margin-right:-10px;*/
  320.     -webkit-transition: all 0.3s linear;
  321.     -moz-transition: all 0.3s linear;
  322.     transition: all 0.3s linear;  
  323.  
  324. }
  325.  
  326. .nav0 {
  327.  
  328.    background-color:{color:homebg};
  329. }
  330. .nav1 {
  331.    background-color:{color:link1bg};
  332. }
  333. .nav2 {
  334.    background-color:{color:link2bg};
  335. }
  336. .nav3{
  337.    background-color:{color:link3bg};  
  338. }
  339.  
  340. .nav4 {
  341.    background-color:{color:link4bg};  
  342. }
  343. .nav5 {
  344.    background-color:{color:link5bg};  
  345. }
  346.  
  347. .nav0:hover {
  348.     width:84px;
  349.     color:white;
  350.     -webkit-transition: all 0.3s linear;
  351.     -moz-transition: all 0.3s linear;
  352.     transition: all 0.3s linear;  
  353.  
  354. }
  355. .nav1:hover {
  356.     width:82px;
  357.     color:white;
  358.     -webkit-transition: all 0.3s linear;
  359.     -moz-transition: all 0.3s linear;
  360.     transition: all 0.3s linear;  
  361.  
  362. }
  363. .nav2:hover {
  364.     width:80px;
  365.     color:white;
  366.     -webkit-transition: all 0.3s linear;
  367.     -moz-transition: all 0.3s linear;
  368.     transition: all 0.3s linear;  
  369. }
  370. .nav3:hover {
  371.     width:78px;
  372.     color:white;
  373.     -webkit-transition: all 0.3s linear;
  374.     -moz-transition: all 0.3s linear;
  375.     transition: all 0.3s linear;  
  376. }
  377. .nav4:hover {
  378.     width:74px;
  379.     color:white;
  380.     -webkit-transition: all 0.3s linear;
  381.     -moz-transition: all 0.3s linear;
  382.     transition: all 0.3s linear;  
  383. }
  384. .nav5:hover {
  385.     width:72px;
  386.     color:white;
  387.     -webkit-transition: all 0.3s linear;
  388.     -moz-transition: all 0.3s linear;
  389.     transition: all 0.3s linear;  
  390. }
  391.  
  392. .sideimgdesc {
  393.     position:fixed;
  394.     z-index:9999999999;
  395.     width:200px;
  396.     text-align:justify;
  397.     background-color:white;
  398.     top:110px;
  399.     left:12%;
  400.     padding:10px;
  401.     font-family:'courier new';
  402.     font-size:{text:descfontsize};
  403.     letter-spacing:2px;
  404.    
  405.  
  406. }
  407.  
  408. .avatar {
  409.     display:none;
  410. }
  411.  
  412. {CustomCSS}
  413. </style>
  414.  
  415. <title>{title}</title>
  416. <link rel="shortcut icon" href="{favicon}">
  417. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  418. <meta name="viewport" content="width=720" />
  419.  
  420. </head>
  421.  
  422. <body onkeydown="return false">
  423.  
  424.  
  425.  
  426. <div class="blogtitle"><a class="titlelink" href="/">{title}</a></div>
  427. <div class="sideimgdesc">
  428. <a href="/"><img class="imgside" src="{image:sidebar}" width="190px" /></a>
  429. <br />
  430. <br />
  431. <div id="desc">
  432. {description}
  433.  
  434. <br />
  435.  
  436. </div>
  437. </div>
  438.  
  439. <div class="center">
  440.  
  441. <div class="sidebar">
  442. <br />
  443. <br />
  444. <br />
  445. <br />
  446. <br />
  447. <br />
  448. <br />
  449. <br />
  450. <br />
  451. <br />
  452. <br />
  453. <br />
  454. <br />
  455. <br />
  456. <br />
  457. <br />
  458. <div class="nav0"><a href="/">{text:home link title}</a></div>
  459. {block:iflinkone}<br />
  460. <br />
  461. <div class="nav1"><a href="{text:link one}">{text:link one title}</a></div>{/block:iflinkone}
  462. {block:iflinktwo}<br />
  463. <br />
  464. <div class="nav2"><a href="{text:link two}">{text:link two title}</a></div>{/block:iflinktwo}
  465. {block:iflinkthree}
  466. <br />
  467. <br />
  468. <div class="nav3"><a href="{text:link three}">{text:link three title}</a></div>{/block:iflinkthree}
  469. {block:iflinkfour}
  470. <br />
  471. <br />
  472. <div class="nav4"><a href="{text:link four}">{text:link four title}</a></div>{/block:iflinkfour}
  473. <br />
  474. <br />
  475. <span class="inner"></span>
  476. </div>
  477. </div>
  478.  
  479. <div class="content">
  480.  
  481. <div class="left">
  482.  
  483. <div id="posts">
  484.  
  485. {block:Posts}
  486. <div id="entry">
  487. <div class="text">
  488. {block:Text}
  489. {block:Title}<span class="title">{Title}</span>{/block:Title}
  490. <span class="entrytext">{Body}</span></a>
  491. {block:IndexPage}
  492. <div class="perm"><a href="{Permalink}">{TimeAgo}</a> &nbsp;|&nbsp; <a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</span></a></div>
  493. {/block:IndexPage}
  494. {/block:Text}
  495. </div>
  496.  
  497. {block:Link}
  498. <a href="{URL}" class="title">{Name}</a>
  499. {block:Description}{Description}{/block:Description}
  500. {block:IndexPage}
  501. <div class="perm"><a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</span></a></div>
  502. {/block:IndexPage}
  503. {block:Link}
  504.  
  505. {block:Photo}
  506. {block:IndexPage}
  507. <div class="perma"><a href="{reblogurl}">reblog</a> &nbsp;|&nbsp; <a href="{Permalink}" target="_blank">{NoteCountWithLabel}</a></div>
  508.  
  509. {/block:IndexPage}
  510. {block:IndexPage}{LinkOpenTag}<div class="photo"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="260"/></div>{LinkCloseTag}
  511. {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  512. {/block:IndexPage}
  513. {block:PermalinkPage}{LinkOpenTag}<img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="400"/>{LinkCloseTag}{/block:PermalinkPage}
  514. {/block:Photo}
  515.  
  516. {block:Panorama}
  517. {block:IndexPage}
  518. <div class="perma"><a href="{Permalink}" target="_blank">{NoteCount}</a></div>
  519. {/block:IndexPage}
  520. {block:IndexPage}
  521.     {LinkOpenTag}<div class="photo"><img class="pano" src="{PhotoURL-Panorama}" alt="{PhotoAlt}" width="260"/></div>{LinkCloseTag}
  522.     {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  523.     {/block:IndexPage}
  524.     {block:PermalinkPage}
  525.     {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"  width="400"/>{LinkCloseTag}
  526.         {Caption}
  527.     {/block:PermalinkPage}
  528. {/block:Panorama}
  529.  
  530. {block:Photoset}
  531. {block:IndexPage}
  532. <div class="perma">
  533. <a href="{reblogurl}">reblog</a> &nbsp;|&nbsp;
  534. <a href="{Permalink}">{NoteCountWithLabel}</a></div>
  535. <center>{Photoset}</center>
  536. {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  537. {/block:IndexPage}
  538. {block:PermalinkPage}
  539. {Photoset}
  540. {/block:PermalinkPage}
  541. {/block:Photoset}
  542.  
  543. {block:Quote}
  544. <span class="title">{Quote}</span><br />
  545. {block:Source}{Source}{/block:Source}
  546. {block:IndexPage}
  547. <br /><div class="perm"><a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</span></a></div>
  548. {/block:IndexPage}
  549. {/block:Quote}
  550.  
  551. {block:Chat}
  552. {block:Title}<span class="title">{Title}</span>{/block:Title}
  553. <ul class="chat">
  554. {block:Lines}
  555. <li class="user_{UserNumber}">
  556. {block:Label}
  557. <span class="label">{Label}</span>
  558. {/block:Label}
  559.  
  560. {Line}
  561. </li>
  562. {/block:Lines}
  563. </ul>
  564. {block:IndexPage}
  565. <div class="perm"><a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</span></a></div>
  566. {/block:IndexPage}
  567. {/block:Chat}
  568.  
  569. {block:Audio}
  570. <center><div style="width:200px; height:20px;"><div style="float:left">{AudioPlayerWhite}</div><div style="margin-top:8px; float:right;"><small>
  571. {FormattedPlayCount} plays</small></div></div></center><br>
  572. {block:Caption}{Caption}{/block:Caption}
  573. {block:IndexPage}
  574. <div class="perm"><a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</span></a></div>
  575. {/block:IndexPage}
  576. {/block:Audio}
  577.  
  578. {block:Video}{block:IndexPage}
  579. <div class="permalink">
  580. <a href="{permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogURL}" target="_blank"> REBLOG </a> / <a href="{permalink}">{TimeAgo}</a></span></div>{/block:IndexPage}
  581. <center>
  582. <div class="videoperma">{Video-300}</div><BR>
  583. {block:Caption}{Caption}</a>{/block:Caption}</center>
  584. {block:Video}
  585.  
  586. {block:PermalinkPage}
  587.  
  588. {block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}
  589.  
  590. {/block:PermalinkPage}
  591.  
  592. {block:PostNotes}{PostNotes}
  593. {/block:PostNotes}
  594. </div>
  595.  
  596. {/block:Posts}
  597. </div>
  598. </div>
  599. </div>
  600. </div>
  601.  
  602. {block:indexpage}
  603.  
  604. {block:NextPage}<div id="pagination"><a href="{NextPage}"></a></div>{/block:NextPage}
  605.  
  606. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  607. <script type="text/javascript" src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
  608. <script type="text/javascript" src="http://static.tumblr.com/4ra4qv5/8N8n57y0s/infinitescroll.min.js"></script>
  609. <script type="text/javascript" src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
  610. <script type="text/javascript">
  611. $(document).ready(function() {
  612. //http://www.shambix.com/en/isotope-twitter-bootstrap-infinite-scroll-fluid-responsive-layout/
  613.     var $container = $('#posts');
  614.        
  615.     // Fire Isotope only when images are loaded
  616.     $container.imagesLoaded(function(){
  617.         $container.isotope({
  618.             itemSelector : '#entry',
  619.             masonry: {
  620.             }
  621.         });
  622.     });
  623.  
  624.     // Infinite Scroll
  625.     $('#posts').infinitescroll({
  626.         navSelector  : '#pagination',
  627.         nextSelector : '#pagination a',
  628.         itemSelector : '#entry',
  629.         bufferPx     : 200,
  630.         loading: {
  631.             finishedMsg: '',
  632.         }
  633.     },
  634.  
  635.     // Infinite Scroll Callback
  636.     function( newElements ) {
  637.         var $newElems = jQuery( newElements ).hide();
  638.         $newElems.imagesLoaded(function(){
  639.             $newElems.fadeIn();
  640.             $container.isotope( 'appended', $newElems );
  641.         });
  642.     });
  643.  
  644. });
  645. </script>
  646.  
  647. {/block:indexpage}
  648.  
  649. </div>
  650.  
  651.  
  652. </body>
  653. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement