aretter

mosaic theme

Mar 19th, 2012
17,050
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.73 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5. mosaic theme, updated 19/3/2012: created by aretter
  6. -->
  7.  
  8. <meta name="color:text" content="#000">
  9. <meta name="color:links" content="#000">
  10. <meta name="color:background" content="#fff">
  11.  
  12. <meta name="if:show archive" content="1"/>
  13. <meta name="if:show ask" content="1" />
  14. <meta name="if:show captions" content="0" />
  15. <meta name="if:bigger posts with two columns" content="1" />
  16. <meta name="if:show portrait photo" content="0" />
  17. <meta name="if:endless scroll" content="1"/>
  18.  
  19. <meta name="font:title" content="Baskerville" />
  20. <meta name="font:body" content="Baskerville" />
  21.  
  22. <meta name="text:title font size" content="12px" />
  23. <meta name="text:font size" content="10px" />
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <title>{Title}</title>
  29. <link rel="shortcut icon" href="{Favicon}">
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  31.  
  32. {block:Description}
  33. <meta name="description" content="{MetaDescription}" />
  34. {/block:Description}
  35.  
  36.  
  37. <style type="text/css">
  38. body {margin-top:20px;
  39. font-family:{font:body};
  40. font-size:{text:font size};
  41. color:{color:text};
  42. background-color:{color:background};
  43. line-height:12px;}
  44.  
  45. .tumblrAutoPager_page_info,
  46. .tumblrAutoPager_page_separator {display:none;}
  47.  
  48. a {text-decoration:none; color:{color:links};}
  49. a img {border:0px;}
  50.  
  51. #infscr-loading {display:none;}
  52.  
  53. .bloglinks {position:fixed;
  54. right:50%;
  55. margin-right:400px;
  56. top:20px;
  57. padding-right:10px;
  58. padding-bottom:2px;
  59. position:fixed;
  60. width:200px;
  61. border-right: 1px solid {color:text};}
  62.  
  63. .blogtitle {font-family:{font:title};
  64. text-align:right;
  65. font-size:{text:title font size};
  66. letter-spacing:1px;
  67. font-weight:bold;}
  68.  
  69. .navlinks {padding-top:6px;
  70. text-align:right;}
  71.  
  72. .navlinks a {display:block;
  73. margin-right:2px;}
  74.  
  75. .description {position:fixed;
  76. right:50%;
  77. margin-right:400px;
  78. bottom:40px;
  79. padding-right:10px;
  80. padding-bottom:2px;
  81. position:fixed;
  82. width:200px;
  83. text-align:right;}
  84.  
  85. .cap {margin-top:-10px; padding:2px;}
  86.  
  87. .text,
  88. .quote,
  89. .answer,
  90. .chat,
  91. .link{{block:IndexPage}{block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  92. {block:ifbiggerpostswithtwocolumns}width:400px; {/block:ifbiggerpostswithtwocolumns}{/block:IndexPage}
  93. {block:PermalinkPage}width:500px;{/block:PermalinkPage}}
  94.  
  95. .body img {{block:IndexPage}
  96. {block:ifnotbiggerpostswithtwocolumns}max-width:250px;{block:ifnotbiggerpostswithtwocolumns}
  97. {block:ifbiggerpostswithtwocolumns}max-width:400px;{/block:ifbiggerpostswithtwocolumns}{/block:IndexPage}
  98. {block:PermalinkPage}max-width:500px;{/block:PermalinkPage}}
  99.  
  100. .wrap {width:900px;
  101. height:100%;
  102. margin:auto;}
  103.  
  104. .posts {float:right;
  105. width:840px;}
  106.  
  107. .post {{block:IndexPage}{block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  108. {block:ifbiggerpostswithtwocolumns}width:400px;{/block:ifbiggerpostswithtwocolumns}{/block:IndexPage}
  109. {block:PermalinkPage}width:500px{/block:PermalinkPage}
  110. float:left;
  111. margin: 0 20px 20px 0;
  112. position: relative;}
  113.  
  114. .photo img {{block:IndexPage}{block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  115. {block:ifbiggerpostswithtwocolumns}width:400px;{/block:ifbiggerpostswithtwocolumns}{/block:IndexPage}
  116. {block:PermalinkPage}width:620px{/block:PermalinkPage}
  117. margin:auto;}
  118.  
  119. div.video embed,
  120. div.post div.video object {{block:IndexPage}{block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  121. {block:ifbiggerpostswithtwocolumns}width:400px;{/block:ifbiggerpostswithtwocolumns} height:200px;{/block:IndexPage}
  122. {block:PermalinkPage}width:580px;
  123. height:500px;{/block:PermalinkPage}
  124. margin-bottom:10px;}
  125.  
  126. .player {background:#fff;
  127. margin:10px 0 10px 0;
  128. {block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  129. {block:ifbiggerpostswithtwocolumns}width:400px;{/block:ifbiggerpostswithtwocolumns}}
  130.  
  131. #portrait {-moz-border-radius:64px;
  132. -webkit-border-radius:64px;
  133. width:64px;
  134. height:64px;
  135. background-image:url({PortraitURL-64})}
  136.  
  137. .navigation {display:none;}
  138.  
  139. .pag {{block:IfNotEndlessScroll}position:fixed;
  140. right:50%;
  141. bottom:10px;
  142. margin-right:400px;
  143. padding-right:10px;
  144. padding-bottom:2px;
  145. width:200px;
  146. text-align:right;{/block:IfNotEndlessScroll}}
  147.  
  148. .textperma {text-align:right;
  149. opacity:0.4;
  150. -webkit-transition: 0.5s ease-in;}
  151. .textperma:hover {opacity:1;
  152. -webkit-transition: 0.5s ease-in;}
  153.  
  154. ol.notes {position:relative;
  155. margin-top:20px;
  156. margin-bottom: 10px;
  157. list-style-type: none;
  158. font-size:{text:font size};
  159. text-align:left;
  160. width:400px;
  161. {block:ifnotbiggerpostswithtwocolumns}width:250px;{block:ifnotbiggerpostswithtwocolumns}
  162. {block:ifbiggerpostswithtwocolumns}width:400px;{/block:ifbiggerpostswithtwocolumns}}
  163.  
  164. ol.notes li.note img.avatar {vertical-align:-4px;
  165. margin-right:10px;
  166. width:16px;
  167. height:16px;}
  168.  
  169. ol.notes li.note span.action {font-size:{text:font size};
  170. text-align:left;}
  171.  
  172. ol.notes li.note span.action a {font-size:{text:font size};
  173. text-align:left;}
  174.  
  175. ol.notes li.note .answer_content {font-size:{text:font size};}
  176.  
  177. ol.notes li.note blockquote {font-size:{text:font size};
  178. padding: 1px 3px;
  179. margin: 3px 0 3px 7px;}
  180.  
  181. ol.notes li.note blockquote a {font-size:{text:font size};}
  182.  
  183. blockquote {padding-left:7px;
  184. margin: 3px 10px 3px 7px;}
  185.  
  186.  
  187.  
  188. {CustomCSS}
  189. </style>
  190. <script type='text/javascript' src='http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js'></script>
  191.  
  192. <!-- {block:IndexPage} -->
  193. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  194. <script src="http://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>
  195.  
  196. <script type="text/javascript">
  197. $(window).load(function () {
  198. $('.posts').masonry(),
  199. $('.masonryWrap').infinitescroll({
  200. navSelector : "div.navigation",
  201. // selector for the paged navigation (it will be hidden)
  202. nextSelector : ".navigation a#next",
  203. // selector for the NEXT link (to page 2)
  204. itemSelector : ".post",
  205. // selector for all items you'll retrieve
  206. bufferPx : 10000,
  207. extraScrollPx: 10000,
  208. loadingImg : "http://static.tumblr.com/ry7nsix/S4Klhms7s/load.gif",
  209. loadingText : "<em></em>",
  210. },
  211. // call masonry as a callback.
  212. function() { $('.posts').masonry({ appendedContent: $(this) }); }
  213. );
  214. });
  215. </script>
  216. <!-- {/block:IndexPage} -->
  217.  
  218. <script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>
  219. <script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script>
  220. <script type="text/javascript" charset="utf-8">
  221. var $j = jQuery.noConflict();
  222. $j(function() {
  223. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  224. $j("img").lazyload({
  225. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  226. effect: "fadeIn",
  227. });
  228. });
  229. </script>
  230.  
  231. {block:IndexPage}
  232. <script type="text/javascript">
  233. $(window).load(function(){
  234. $("p").remove(":contains('Source:')");
  235. $("p").remove(":contains('(via')");
  236. });
  237. </script>
  238. {/block:IndexPage}
  239. </head>
  240. <body>
  241.  
  242.  
  243. <div class="wrap">
  244. <div class="navigation">
  245. <!--{block:Pagination}-->
  246. <!--{block:NextPage}-->
  247. <p id="page_nav">
  248. <a style="float:right" href="{NextPage}" id="next">Older</a>
  249. <!--{/block:NextPage}-->
  250. <!--{block:PreviousPage}-->
  251. <a style="float:left" href="{PreviousPage}">Newer</a>
  252. </p>
  253. <!--{/block:PreviousPage}-->
  254. <!--{/block:Pagination}-->
  255. </div>
  256.  
  257. <div class="bloglinks">
  258. {block:ifshowportraitphoto}
  259. <div align="right"><div id="portrait"></div></div>
  260. {/block:ifshowportraitphoto}
  261. <div class="blogtitle"><a href="/">{Title}</a></div>
  262. <div class="navlinks">{block:Ifshowarchive}<a href="/archive">history</a>{/block:Ifshowarchive}
  263. {block:Ifshowask}<a href="/ask">ask</a>{/block:Ifshowask}
  264. {block:HasPages}{block:Pages}<a href="{URL}">{Label} </a>{/block:Pages}{/block:HasPages}</div>
  265. <div class="description">{block:Description}{Description}{/block:Description}</div></div>
  266.  
  267. <div class="posts">
  268. {block:Posts}
  269.  
  270. {block:Text}
  271. <div class="post text">
  272. {block:Title}<b>{Title}</b>{/block:Title}
  273. {Body}
  274. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  275. </div>
  276. {/block:Text}
  277.  
  278. {block:Photo}<div class="post photo">
  279. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
  280. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  281. <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}" alt="{PhotoAlt}"/>
  282. {block:IndexPage}</a>{/block:IndexPage}
  283. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  284. {block:Ifshowcaptions}<div class="cap">{Caption}</div>{/block:Ifshowcaptions}
  285. </div>
  286. {/block:Photo}
  287.  
  288. {block:Photoset}
  289. <div class="post">
  290. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
  291. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  292. {block:ifnotbiggerpostswithtwocolumns}{Photoset-250}{block:ifnotbiggerpostswithtwocolumns}
  293. {block:ifbiggerpostswithtwocolumns}{Photoset-400}{/block:ifbiggerpostswithtwocolumns}
  294. {block:IndexPage}</a>{/block:IndexPage}
  295. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  296. {block:Ifshowcaptions}<div class="cap">{Caption}</div>{/block:Ifshowcaptions}
  297. </div>
  298. {/block:Photoset}
  299.  
  300. {block:Quote}<div class="post quote">
  301. <div id="entry">
  302. "{Quote}"
  303. <br>{block:Source}<b>—{Source}</b>{/block:Source}
  304. </div>
  305. </div>
  306. {/block:Quote}
  307.  
  308. {block:Link}<div class="post link">
  309. <a href="{URL}"><b>{Name}</b></a>
  310. {block:Description}{Description}{/block:Description}
  311. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  312. </div>
  313. {/block:Link}
  314.  
  315. {block:Chat}<div class="post chat">
  316. {block:Title}{Title}{/block:Title}
  317. {block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
  318. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  319. </div>
  320. {/block:Chat}
  321.  
  322. {block:Audio}
  323. <div class="post text">
  324. <div class="player">{AudioPlayerWhite}</div>
  325. {block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}
  326. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  327. </div>
  328. {/block:Audio}
  329.  
  330. {block:Answer}<div class="post answer">
  331. {Question} <i>asked by</i> <b>{Asker}</b>
  332. <i>{Answer}</i>
  333. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  334. </div>
  335. {/block:answer}
  336.  
  337. {block:Video}<div class="post text">
  338. <div class="video">
  339. {block:ifnotbiggerpostswithtwocolumns}{Video-250}{block:ifnotbiggerpostswithtwocolumns}
  340. {block:ifbiggerpostswithtwocolumns}{Video-400}{/block:ifbiggerpostswithtwocolumns}
  341. {block:IndexPage}<div class="textperma"><a href="{Permalink}">{24HourWithZero}<b>:</b>{Minutes}</a></div>{/block:IndexPage}
  342. </div>
  343. </div>
  344. {/block:Video}
  345.  
  346. {block:PermalinkPage}{block:NoteCount}<b>{NoteCountWithLabel}</b>{/block:NoteCount}{block:HasTags}<br>{block:Tags}<a href="TagURL">#{Tag}</a> {/block:Tags}{/block:hasTags}{/block:PermalinkPage}
  347.  
  348. {block:PostNotes}
  349. <br>
  350. {PostNotes}
  351. {/block:PostNotes}
  352.  
  353. {/block:Posts}
  354. </div>
  355.  
  356. {block:IfNotEndlessScroll}<div class="pag">
  357. {block:PreviousPage}<a href="{PreviousPage}" title="newer"><big>→/</big></a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}" title="older"><big>←</big></a>{/block:NextPage}{/block:IfNotEndlessScroll}</div>
  358.  
  359. <div style="bottom:2px; right:2px; position:fixed; opacity:0.4;"><a href="http://arreter.tumblr.com">theme</a></div>
  360.  
  361.  
  362. </body>
  363. </html>
Advertisement
Add Comment
Please, Sign In to add comment