Advertisement
rowrz

Austere Theme

Apr 6th, 2014
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.24 KB | None | 0 0
  1. <!--                                  
  2. _ __ _____      ___ __ ____        
  3. | '__/ _ \ \ /\ / / '__|_  /        
  4. | | | (_) \ V  V /| |   / /        
  5. |_|  \___/ \_/\_/ |_|  /___|        
  6. | | | |                            
  7. | |_| |__   ___ _ __ ___   ___  ___
  8. | __| '_ \ / _ \ '_ ` _ \ / _ \/ __|
  9. | |_| | | |  __/ | | | | |  __/\__ \
  10. \__|_| |_|\___|_| |_| |_|\___||___/
  11.                              
  12. austere theme v1.6                                
  13. designed by andrew manufactured by alex
  14. http://rowrz.com/themes
  15. -->
  16. <!DOCTYPE html>
  17. <html>
  18. <head>
  19.  
  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="color:Background" content="#eeeeee"/>
  26. <meta name="color:Text" content="#000000"/>
  27. <meta name="color:Hover" content="#eeeeee"/>
  28. <meta name="color:Link" content="#000000"/>
  29. <meta name="color:accents" content="#eeeeee"/>
  30. <meta name="color:entrybg" content="#FFFFFF"/>
  31. <meta name="color:entryborbg" content="#000000"/>
  32. <meta name="image:Background" content="1"/>
  33.  
  34. <meta name="text:descfontsize" content="15px"/>
  35. <meta name="text:navfontsize" content="12px"/>
  36.  
  37. <meta name="text:homelinktitle" content="return"/>
  38.  
  39. <meta name="text:link1" content=""/>
  40. <meta name="text:link1title" content=""/>
  41.  
  42. <meta name="text:link2" content=""/>
  43. <meta name="text:link2title" content=""/>
  44.  
  45. <meta name="text:link3" content=""/>
  46. <meta name="text:link3title" content=""/>
  47.  
  48.  
  49. <script src="http://static.tumblr.com/ojd74qh/I6sn7c9hh/g.jquery.1.11.0.min.austere.js"></script>
  50.  
  51. <style type="text/css">
  52.  
  53.  ::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
  54. ::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
  55.  
  56.  
  57. -webkit-transition: all 0.4s ease-in-out;
  58.  
  59. -moz-transition: all 0.4s ease-in-out;
  60.  
  61. -o-transition: all 0.4s ease-in-out;
  62.  
  63. a {
  64. text-decoration:none;
  65. -webkit-transition: all 0.7s ease-out;
  66. -moz-transition: all 0.7s ease-out;
  67. transition: all 0.7s ease-out;
  68. }
  69.  
  70. a:hover {
  71. text-decoration:none;
  72. -webkit-transition: all 0.7s ease-out;
  73. -moz-transition: all 0.7s ease-out;
  74. transition: all 0.7s ease-out;
  75. }
  76.  
  77. #tumblr_controls{
  78. position:fixed !important;
  79. }
  80.  
  81.  
  82. #text img, #entry img {
  83.     height: auto;
  84.     max-width:100%;
  85. }
  86.  
  87. #center{
  88. padding-top:3px;
  89. padding-bottom:3px;
  90. position:fixed !important;
  91. width:250px;
  92. height:207px;
  93. background-color:#fff;
  94. {block:PermalinkPage}
  95. width:410px;
  96. height:207px;
  97. {/block:PermalinkPage}
  98. }
  99.  
  100. #posts{
  101. float:center;
  102. {block:indexpage}
  103. width:710px;
  104. {/block:indexpage}
  105. {block:permalinkpage}
  106. width:860px;
  107. {/block:permalinkpage}
  108. margin-left: 14%;
  109. margin-top: 0px;
  110. }
  111.  
  112. body {
  113. padding: 0px;
  114. margin: 0px;
  115. color:{color:text};
  116. font-family: georgia;
  117. font-size: 10px;
  118. line-height:14px;
  119. background-color: {color:Background};
  120. background-image:url({image:Background});
  121. background-attachment: fixed;
  122. background-size: cover;
  123. }
  124.  
  125. a:link, a:active, a:visited{
  126. text-decoration:none;
  127. color:{color:link};
  128. -webkit-transition: all 0.3s ease-out;
  129. -moz-transition: all 0.3s ease-out;
  130. transition: all 0.3s ease-out;}
  131.  
  132. a:hover{
  133. color:{color:accents};
  134. text-shadow:0px 0px 20px #fff;
  135. -webkit-transition: all 0.3s ease-out;
  136. -moz-transition: all 0.3s ease-out;
  137. transition: all 0.3s ease-out;
  138. }
  139. #entry blockquote {
  140.       border-left: solid 2px {color:accents};
  141.       margin: 0;
  142.       padding-left: 10px;
  143. }
  144. .text p{
  145.     text-align:left;
  146. }
  147. #entry {
  148. margin:16px;
  149. float:left;
  150. padding:9px;
  151. padding-bottom:6px;
  152. z-index:100;
  153. box-shadow:1px 1px 1px #ccc;
  154. border:1px solid {color:entryborbg};
  155. background-color: {color:entrybg};
  156. font-size: 12px;
  157. line-height:15px;
  158. {block:IndexPage}width:260px;{/block:IndexPage}
  159. {block:PermalinkPage}width:400px; margin-left:40px;{/block:PermalinkPage}
  160. }
  161.  
  162. #entry .perma{
  163. position:absolute;
  164. width: 100px;
  165. height: auto;
  166. float:right;
  167. overflow:hidden;
  168. top:0px;
  169. right:5;
  170. font-family: Palatino, 'Palatino Linotype', serif;
  171. font-size: 12px;
  172. line-height:14px;
  173. text-align: center;
  174. padding:3px;
  175. text-transform: uppercase;
  176. opacity:0.0;
  177. background-color: rgba(255,255,255,0.5);
  178. -webkit-transition: all 0.8s ease;
  179. -moz-transition: all 0.8s ease;
  180. transition: all 0.8s ease;
  181. -o-transition: all 0.8s ease;
  182. }
  183.  
  184. #entry:hover .perma{
  185. overflow:visible;
  186. top:9px;
  187.  
  188. opacity: 0.9;
  189. }
  190.  
  191. #entry:hover .perma:hover{
  192. width:110px;
  193. opacity:1;
  194. }
  195.  
  196. .perm{
  197. display: block;
  198. font-family:georgia;
  199. font-size:9px;
  200. line-height:13px;
  201. text-transform:uppercase;
  202. text-align: right;
  203. background-color:{color:accents};
  204. border-right:3px {color:accents} solid;
  205. padding:3px;
  206. opacity:.8;
  207. margin: 0px;
  208. margin-bottom:5px;
  209. -webkit-transition: all 1s ease;
  210. -moz-transition: all 1s ease;
  211. transition: all 1s ease;
  212. -o-transition: all 1s ease;
  213. }
  214.  
  215. .perm:hover{
  216. opacity:.6;
  217. }
  218.  
  219. .blogtitle{
  220. font-size:23px;
  221. line-height:27px;
  222.  
  223. font-family:Palatino, 'Palatino Linotype', serif;
  224. height:auto;
  225. letter-spacing:3px;
  226.  
  227. width:200px;
  228. z-index:99;
  229. opacity:.9;
  230. text-transform:uppercase;
  231. -webkit-transition: all 0.3s linear;
  232. -moz-transition: all 0.3s linear;
  233. transition: all 0.3s linear;
  234. }
  235.  
  236. .blogtitle:hover{
  237. text-shadow: 1px 0px #df8181, -1px 0px #54d2cb;
  238. -webkit-transition: all 0.3s linear;
  239. -moz-transition: all 0.3s linear;
  240. transition: all 0.3s linear;
  241. }
  242.  
  243. .title{
  244. font-family:georgia;
  245. text-transform:lowercase;
  246. font-size: 19px;
  247. line-height: 24px;
  248. color: {color:text};
  249. }
  250.  
  251. .sidebar{
  252. z-index:98;
  253. width:200px;
  254. height:100%;
  255. position:fixed;
  256. right:19%;
  257. padding:14px;
  258. margin-top:-6px;
  259. font-size:11px;
  260. line-height:15px;
  261. font-family:Georgia;
  262. padding-top:100px;
  263. overflow:hidden;
  264. text-align:left;
  265. opacity:1;
  266. -webkit-transition: all 0.8s linear;
  267. -moz-transition: all 0.8s linear;
  268. transition: all 0.8s linear;
  269. }
  270.  
  271. .titlelink:hover{
  272.   text-shadow: 1px 0px #df8181, -1px 0px #54d2cb;
  273. -webkit-transition: all 0.3s linear;
  274. -moz-transition: all 0.3s linear;
  275. transition: all 0.3s linear;  
  276. }
  277.  
  278. .nav {
  279.     font-style:italic;
  280.     font-size:{text:navfontsize};
  281. }
  282. .decline1 {
  283.     height:100px;
  284.     padding:5px;
  285.     border-left: 2px solid #000;
  286. }
  287. .decline2 {
  288.     height:100px;
  289.     padding:5px;
  290.     border-left: 2px solid #000;
  291. }
  292. .avatar {
  293.     display:none;
  294. }
  295. .pano img{
  296.     max-width:260px;
  297. }
  298.  
  299. {CustomCSS}
  300.  
  301. </style>
  302.  
  303. <title>{title}</title>
  304. <link rel="shortcut icon" href="{favicon}">
  305. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  306. <meta name="viewport" content="width=720" />
  307.  
  308. </head>
  309.  
  310. <body onkeydown="return false">
  311.  
  312. <div class="center">
  313. <div class="sidebar">
  314. <div class="decline1">
  315. <div class="decline2">
  316. <div class="blogtitle"><a class="titlelink" href="/">{title}</a></div>
  317.  
  318. <br />
  319.  
  320. <div class="desc" style="font-size:{text:descfontsize};">{description}</div>
  321.  
  322. <br />
  323.  
  324. <span><a class="nav" href="/">{text:homelinktitle}</a></span>
  325. <span><a class="nav" href="{text:link1}">{text:link1title}</a></span>
  326. <span><a class="nav" href="{text:link2}">{text:link2title}</a></span>
  327. <span><a class="nav" href="{text:link3}">{text:link3title}</a></span>
  328. <span class="inner"></span>
  329.  
  330. </div>
  331. </div>
  332. </div>
  333.  
  334.  
  335. <div class="content">
  336.  
  337. <div class="left">
  338.  
  339. <div id="posts">
  340.  
  341. {block:Posts}
  342. <div id="entry">
  343.  
  344. {block:Text}
  345. {block:Title}<span class="title">{Title}</span>{/block:Title}
  346. <span class="entrytext">{Body}</span></a>
  347. {block:IndexPage}
  348. <div class="perm"><a href="{Permalink}"><a href="{Permalink}">{notecount}</span></a></div>
  349. {/block:IndexPage}
  350. {/block:Text}
  351.  
  352. {block:Link}
  353. <a href="{URL}" class="title">{Name}</a>
  354. {block:Description}{Description}{/block:Description}
  355. {block:IndexPage}
  356. <div class="perm"><a href="{Permalink}">{notecount}</a></div>
  357. {/block:IndexPage}
  358. {block:Link}
  359.  
  360. {block:Photo}
  361. {block:IndexPage}
  362. <div class="perma"><a href="{Permalink}" target="_blank">{NoteCount}</a></div>
  363.  
  364. {/block:IndexPage}
  365. {block:IndexPage}<a href="{Permalink}"><div class="photo"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="260"/></div></a>
  366. {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  367. {/block:IndexPage}
  368. {block:PermalinkPage}{LinkOpenTag}<img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="400"/>{LinkCloseTag}{/block:PermalinkPage}
  369. {/block:Photo}
  370.  
  371. {block:Panorama}
  372. {block:IndexPage}
  373. <div class="perma"><a href="{Permalink}" target="_blank">{NoteCount}</a></div>
  374. {/block:IndexPage}
  375. {block:IndexPage}
  376.     {LinkOpenTag}<div class="photo"><img class="pano" src="{PhotoURL-Panorama}" alt="{PhotoAlt}" width="260"/></div>{LinkCloseTag}
  377.     {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  378.     {/block:IndexPage}
  379.     {block:PermalinkPage}
  380.     {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"  width="400"/>{LinkCloseTag}
  381.         {Caption}
  382.     {/block:PermalinkPage}
  383. {/block:Panorama}
  384.  
  385.  
  386. {block:Photoset}{block:IndexPage}
  387. <div class="perma"><a href="{Permalink}" target="_blank">{NoteCount}</a></div><center>{Photoset}</center></span>
  388. {block:ifshowcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifshowcaptions}
  389. {/block:IndexPage}
  390. {block:PermalinkPage}
  391. {Photoset}
  392. {/block:PermalinkPage}
  393. {/block:Photoset}
  394.  
  395. {block:Quote}
  396. <span class="title">{Quote}</span><br />
  397. {block:Source}{Source}{/block:Source}
  398. {block:IndexPage}
  399. <br /><div class="perm"><a href="{Permalink}">{notecount}</span></a></div>
  400. {/block:IndexPage}
  401. {/block:Quote}
  402.  
  403. {block:Chat}
  404. {block:Title}<span class="title">{Title}</span>{/block:Title}
  405. <ul class="chat">
  406. {block:Lines}
  407. <li class="user_{UserNumber}">
  408. {block:Label}
  409. <span class="label">{Label}</span>
  410. {/block:Label}
  411.  
  412. {Line}
  413. </li>
  414. {/block:Lines}
  415. </ul>
  416. {block:IndexPage}
  417. <div class="perm"><a href="{Permalink}">{notecount}</span></a></div>
  418. {/block:IndexPage}
  419. {/block:Chat}
  420.  
  421. {block:Audio}
  422. <center><div style="width:200px; height:20px;"><div style="float:left">{AudioPlayerWhite}</div><div style="margin-top:8px; float:right;"><small>
  423. {FormattedPlayCount} plays</small></div></div></center><br>
  424. {block:Caption}{Caption}{/block:Caption}
  425. {block:IndexPage}
  426. <div class="perm"><a href="{Permalink}">{notecount}</span></a></div>
  427. {/block:IndexPage}
  428. {/block:Audio}
  429.  
  430. {block:Video}{block:IndexPage}
  431. <div class="permalink">
  432. <a href="{permalink}">{NoteCount}</a></span></div>{/block:IndexPage}
  433. <center>
  434. <div class="videoperma">{Video-300}</div><BR>
  435. {block:Caption}{Caption}</a>{/block:Caption}</center>
  436. {block:Video}
  437.  
  438. {block:PermalinkPage}
  439.  
  440. {block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}
  441.  
  442. {/block:PermalinkPage}
  443.  
  444. {block:PostNotes}{PostNotes}
  445. {/block:PostNotes}
  446. </div>
  447.  
  448. {/block:Posts}
  449. </div>
  450. </div>
  451. </div>
  452. </div>
  453.  
  454. {block:indexpage}
  455. {block:NextPage}<div id="pagination"><a href="{NextPage}"></a></div>{/block:NextPage}
  456.  
  457. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  458. <script type="text/javascript" src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
  459. <script type="text/javascript" src="http://static.tumblr.com/4ra4qv5/8N8n57y0s/infinitescroll.min.js"></script>
  460. <script type="text/javascript" src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
  461. <script type="text/javascript">
  462. $(document).ready(function() {
  463. //http://www.shambix.com/en/isotope-twitter-bootstrap-infinite-scroll-fluid-responsive-layout/
  464.     var $container = $('#posts');
  465.        
  466.     // Fire Isotope only when images are loaded
  467.     $container.imagesLoaded(function(){
  468.         $container.isotope({
  469.             itemSelector : '#entry',
  470.             masonry: {
  471.             }
  472.         });
  473.     });
  474.  
  475.     // Infinite Scroll
  476.     $('#posts').infinitescroll({
  477.         navSelector  : '#pagination',
  478.         nextSelector : '#pagination a',
  479.         itemSelector : '#entry',
  480.         bufferPx     : 200,
  481.         loading: {
  482.             finishedMsg: '',
  483.         }
  484.     },
  485.  
  486.     // Infinite Scroll Callback
  487.     function( newElements ) {
  488.         var $newElems = jQuery( newElements ).hide();
  489.         $newElems.imagesLoaded(function(){
  490.             $newElems.fadeIn();
  491.             $container.isotope( 'appended', $newElems );
  492.         });
  493.     });
  494.  
  495. });
  496. </script>
  497.  
  498. {/block:indexpage}
  499.  
  500. </div>
  501. </body>
  502. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement