Advertisement
kthms

base code

Oct 17th, 2015
9,378
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.74 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <!--
  5.  
  6.  
  7.  
  8.  
  9.  
  10. base code by shythemes
  11.  
  12.  
  13.  
  14.  
  15. for you:
  16. * tumblr documentation
  17. https://www.tumblr.com/docs/en/custom_themes
  18. * html reference
  19. http://www.w3schools.com/tags/default.asp
  20. * css reference
  21. http://www.w3schools.com/cssref/default.asp
  22.  
  23. credits:
  24. * photosets by pixel union
  25. https://github.com/PixelUnion/Extended-Tumblr-Photoset
  26. * infinite scroll by paul irish
  27. http://www.infinite-scroll.com/
  28.  
  29.  
  30. -->
  31. <title>{Title}</title>
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  33. <link rel="shortcut icon" href="{Favicon}">
  34. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  35. <meta name="viewport" content="width=device-width, initial-scale=1">
  36. <meta name="color:background" content="#ffffff">
  37. <meta name="color:text" content="#3f3f3f">
  38. <meta name="color:accent" content="#9f9f9f">
  39. <meta name="color:border" content="#ededed">
  40. <meta name="color:link" content="#dcdcdc">
  41. <meta name="color:link hover" content="#cbcbcb">
  42. <meta name="color:caption" content="#f9f9f9">
  43. <meta name="color:posts" content="#ffffff">
  44. <meta name="if:show captions" content="1">
  45. <meta name="if:show tags" content="1">
  46. <meta name="if:infinite scroll" content="0">
  47. <meta name="text:home link" content="">
  48. <meta name="text:archive link" content="">
  49. <meta name="text:ask link" content="contact">
  50. <meta name="text:link 1" content="">
  51. <meta name="text:link 1 url" content="">
  52. <meta name="text:link 2" content="">
  53. <meta name="text:link 2 url" content="">
  54. <meta name="text:link 3" content="">
  55. <meta name="text:link 3 url" content="">
  56. <meta name="text:link 4" content="">
  57. <meta name="text:link 4 url" content="">
  58. <meta name="text:link 5" content="">
  59. <meta name="text:link 5 url" content="">
  60. <meta name="text:link 6" content="">
  61. <meta name="text:link 6 url" content="">
  62. <style type="text/css">
  63. body {
  64. margin:0;
  65. font-size:10px;
  66. font-family:helvetica, sans-serif;
  67. line-height:1.6em;
  68. -moz-osx-font-smoothing:grayscale;
  69. -webkit-font-smoothing:antialiased;
  70. font-smoothing:antialiased;
  71. color:{color:text};
  72. background:{color:background};
  73. }
  74. a {
  75. color:inherit;
  76. text-decoration:none;
  77. -webkit-transition:all .2s linear;
  78. transition:all .2s linear;
  79. }
  80. small, sub {
  81. font-size:1em;
  82. vertical-align:baseline;
  83. }
  84. blockquote {
  85. padding:.6em .6em .6em 2em;
  86. border-left:1px solid {color:border};
  87. }
  88. blockquote, ol, ul, p, pre {
  89. margin:0 0 .6em;
  90. }
  91. h1, h2, h3, h4, h5, h6 {
  92. margin:0 0 .6em;
  93. font-size:1em;
  94. font-weight:inherit;
  95. }
  96. img {
  97. border:0;
  98. max-width:100%;
  99. height:auto;
  100. display:block;
  101. }
  102. hr {
  103. margin:1em 0;
  104. border:0;
  105. height:1px;
  106. -moz-box-sizing:border-box;
  107. box-sizing:border-box;
  108. background-color:{color:border};
  109. }
  110. .title {
  111. font-size:15px;
  112. font-weight:bold;
  113. }
  114. .accent,
  115. .tumblr_blog {
  116. color:{color:accent};
  117. }
  118. .main {
  119. margin:150px auto;
  120. width:350px;
  121. }
  122. aside {
  123. position:fixed;
  124. width:150px;
  125. margin-left:-225px;
  126. /* delete the three lines above if you want a header */
  127. }
  128. nav {
  129. margin:.6em 0 0;
  130. }
  131. nav li {
  132. display:inline;
  133. }
  134. .content {
  135. margin:150px 0;
  136. }
  137. .entry {
  138. position:relative;
  139. margin:0 0 150px;
  140. }
  141. .entry:last-child {
  142. margin-bottom:0;
  143. }
  144. .text {
  145. margin:1em 0 0;
  146. }
  147. .text:last-child,
  148. .text *:last-child {
  149. margin-bottom:0;
  150. }
  151. .date {
  152. margin:0 0 0 2em;
  153. position:absolute;
  154. top:0;
  155. left:100%;
  156. width:225px;
  157. /* delete the five lines above if you want the date under posts */
  158. }
  159. .tags {
  160. {block:IndexPage}{block:ifNotShowTags}display:none;{/block:ifNotShowTags}{/block:IndexPage}
  161. }
  162. .tags .comma:last-of-type {
  163. display:none;
  164. }
  165. .caption {
  166. {block:IndexPage}{block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}{/block:IndexPage}
  167. }
  168. .chat {
  169. padding:0;
  170. list-style-type:none;
  171. }
  172. .chat .label {
  173. font-weight:bold;
  174. }
  175. .quote {
  176. font-weight:bold;
  177. }
  178. .media {
  179. position:relative;
  180. display:inline-block;
  181. width:100%;
  182. }
  183. #tumblr_controls {
  184. position:fixed!important;
  185. opacity:.67!important;
  186. -webkit-filter:invert(100%);
  187. -webkit-backface-visibility:hidden;
  188. padding:4px;
  189. }
  190. {block:ifInfiniteScroll}
  191. .pagination,
  192. #infscr-loading {
  193. display:none!important;
  194. }
  195. {/block:ifInfiniteScroll}
  196. </style>
  197. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  198. </head>
  199. <body>
  200. <div class="main">
  201. <aside>
  202. <h1 class="title"><a href="/">{Title}</a></h1>
  203. <p>{Description}</p>
  204. <nav>
  205. {block:ifHomeLink}<li><a href="/">{text:home link}</a></li>{/block:ifHomeLink}
  206. {block:ifArchiveLink}<li><a href="/archive">{text:archive link}</a></li>{/block:ifArchiveLink}
  207. {block:ifAskLink}<li><a href="/ask">{text:ask link}</a></li>{/block:ifAskLink}
  208. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li> {/block:Pages}{/block:HasPages}
  209. {block:ifLink1}<li><a href="{text:link 1 url}">{text:link 1}</a></li>{/block:ifLink1}
  210. {block:ifLink2}<li><a href="{text:link 2 url}">{text:link 2}</a></li>{/block:ifLink2}
  211. {block:ifLink3}<li><a href="{text:link 3 url}">{text:link 3}</a></li>{/block:ifLink3}
  212. {block:ifLink4}<li><a href="{text:link 4 url}">{text:link 4}</a></li>{/block:ifLink4}
  213. {block:ifLink5}<li><a href="{text:link 5 url}">{text:link 5}</a></li>{/block:ifLink5}
  214. {block:ifLink6}<li><a href="{text:link 6 url}">{text:link 6}</a></li>{/block:ifLink6}
  215. </nav>
  216. </aside>
  217. <div class="content">
  218. {block:Posts}
  219. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">
  220. <section class="post">
  221. {block:Audio}
  222. <div class="audio">
  223. {block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}
  224. </div>
  225. {/block:Audio}
  226. {block:Photo}
  227. <div class="media">
  228. {LinkOpenTag}
  229. <img src="{PhotoURL-500}">
  230. {LinkCloseTag}
  231. </div>
  232. {/block:Photo}
  233. {block:Photoset}
  234. <div class="media photoset">
  235. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  236. </div>
  237. {/block:Photoset}
  238. {block:Video}
  239. <div class="media video">{Video-500}</div>
  240. {/block:Video}
  241. {block:Answer}
  242. <div class="question">
  243. <div class="sender">{lang:Asker asked}:</div>
  244. <span class="inquiry">{Question}</span>
  245. </div>
  246. <div class="answer text">{Answer}</div>
  247. {/block:Answer}
  248. {block:Chat}
  249. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  250. <ul class="chat text">
  251. {block:Lines}
  252. <li class="line">
  253. {block:Label}
  254. <span class="label">{Label}&nbsp; </span>
  255. {/block:Label}
  256. {Line}
  257. </li>
  258. {/block:Lines}
  259. </ul>
  260. {/block:Chat}
  261. {block:Link}
  262. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  263. {block:Description}<div class="text">{Description}</div>{/block:Description}
  264. {/block:Link}
  265. {block:Quote}
  266. <div class="quote text">{Quote}</div>
  267. {block:Source}
  268. <div class="source text">{Source}</div>
  269. {/block:Source}
  270. {/block:Quote}
  271. {block:Text}
  272. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  273. <div class="text">{Body}</div>
  274. {/block:Text}
  275. {block:Caption}
  276. <div class="caption text">{Caption}</div>
  277. {/block:Caption}
  278. {block:Date}
  279. <div class="date accent text">
  280. <a class="permalink" href="{Permalink}">{MonthNumber}.{DayOfMonthWithZero}</a>
  281. {block:HasTags}
  282. <div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a><i class="comma">, </i>{/block:Tags}</div>
  283. {/block:HasTags}
  284. </div>
  285. {/block:Date}
  286. </section>
  287. </article>
  288. {/block:Posts}
  289. <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
  290. </div>
  291. {block:Pagination}<div class="pagination">{block:PreviousPage}<a class="prev" href="{PreviousPage}">previous</a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}</div>{/block:Pagination}
  292. </div>
  293. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  294. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  295. <script src="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  296. {block:IndexPage}
  297. {block:ifInfiniteScroll}
  298. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  299. {/block:ifInfiniteScroll}
  300. {/block:IndexPage}
  301. <script>
  302. $(document).ready(function(){
  303. $('.photo-slideshow').pxuPhotoset({
  304. lightbox: true,
  305. rounded: false,
  306. gutter: '1px',
  307. photoset: '.photo-slideshow',
  308. photoWrap: '.photo-data',
  309. photo: '.pxu-photo'
  310. });
  311. var $container = $('.content');
  312. {block:ifInfiniteScroll}
  313. $container.infinitescroll({
  314. itemSelector: '.entry',
  315. navSelector: '.pagination',
  316. nextSelector: '.next',
  317. loadingImg: '',
  318. loadingText: '<em></em>',
  319. bufferPx: 2000
  320. },
  321. function( newElements ) {
  322. var $newElems = $( newElements );
  323. $newElems.find('.photo-slideshow').pxuPhotoset({
  324. lightbox: true,
  325. rounded: false,
  326. gutter: '1px',
  327. photoset: '.photo-slideshow',
  328. photoWrap: '.photo-data',
  329. photo: '.pxu-photo'
  330. });
  331. resizeVideos();
  332. });
  333. {/block:ifInfiniteScroll}
  334. });
  335. </script>
  336. </body>
  337. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement