API tools faq
paste
Advertisement
okesan

1,2,3 post theme

okesan
Jan 25th, 2015
207
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. <!--
  6.  
  7.  
  8.  
  9.  
  10. aurora theme by selkas
  11. http://selkas.tumblr.com
  12.  
  13.  
  14.  
  15.  
  16.  
  17. notes:
  18.  
  19. * the number of columns is just the /maximum/ number of columns. columns
  20. will not appear if they would run off the page. 'auto' means there
  21. will be as many columns as will fit on the screen.
  22.  
  23. * the font code option is for google/adobe fonts if you want to use
  24. them. copy the <link href="http://... code from the website and paste
  25. it in there. (!!!) change http to https if you want to see the font in
  26. the preview.
  27.  
  28. -->
  29.  
  30. <title>{Title}</title>
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  32. <link rel="shortcut icon" href="{Favicon}"/>
  33. {block:Description}
  34. <meta name="description" content="{MetaDescription}" />
  35. {/block:Description}
  36. <meta name="image:background" content=""/>
  37. <meta name="color:background" content="#ffffff"/>
  38. <meta name="color:text" content="#7e7e7e"/>
  39. <meta name="color:blockquote border" content="#ededed"/>
  40. <meta name="color:link" content="#7e7e7e"/>
  41. <meta name="color:link hover" content="#7e7e7e"/>
  42. <meta name="color:post info" content="#bebebe"/>
  43. <meta name="select:number of columns" content="0" title="auto"/>
  44. <meta name="select:number of columns" content="1" title="1"/>
  45. <meta name="select:number of columns" content="2" title="2"/>
  46. <meta name="select:number of columns" content="3" title="3"/>
  47. <meta name="select:number of columns" content="4" title="4"/>
  48. <meta name="select:number of columns" content="5" title="5"/>
  49. <meta name="select:number of columns" content="6" title="6"/>
  50. <meta name="select:post info align" content="left" title="left"/>
  51. <meta name="select:post info align" content="center" title="center"/>
  52. <meta name="select:post info align" content="right" title="right"/>
  53. <meta name="if:align left" content="0"/>
  54. <meta name="if:show captions" content="1"/>
  55. <meta name="if:show tags" content="1"/>
  56. <meta name="if:show reblog info" content="1"/>
  57. <meta name="if:gray audio player" content="0"/>
  58. <meta name="if:letter spacing" content="0"/>
  59. <meta name="if:tile background" content="1"/>
  60. <meta name="if:jump pagination" content="0"/>
  61. <meta name="if:infinite scroll" content="1"/>
  62. <meta name="text:post width" content="250"/>
  63. <meta name="text:post spacing" content="50"/>
  64. <meta name="text:font size" content=""/>
  65. <meta name="text:font family" content=""/>
  66. <meta name="text:font code" content=""/>
  67. <meta name="text:home link" content="home"/>
  68. <meta name="text:archive link" content="past"/>
  69. <meta name="text:ask link" content="mssg"/>
  70. <meta name="text:link 1" content=""/>
  71. <meta name="text:link 1 url" content=""/>
  72. <meta name="text:link 2" content=""/>
  73. <meta name="text:link 2 url" content=""/>
  74. <meta name="text:link 3" content=""/>
  75. <meta name="text:link 3 url" content=""/>
  76. <meta name="text:link 4" content=""/>
  77. <meta name="text:link 4 url" content=""/>
  78. <meta name="text:link 5" content=""/>
  79. <meta name="text:link 5 url" content=""/>
  80. <meta name="text:link 6" content=""/>
  81. <meta name="text:link 6 url" content=""/>
  82.  
  83. <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
  84. {text:font code}
  85.  
  86. <style type="text/css">
  87.  
  88. /* basic styles */
  89.  
  90. ::-webkit-scrollbar {
  91. width:3px;
  92. height:3px;
  93. }
  94. ::-webkit-scrollbar,
  95. ::-webkit-scrollbar-track {
  96. background-color:inherit;
  97. }
  98. ::-webkit-scrollbar-thumb {
  99. background-color:{color:link};
  100. }
  101. body {
  102. margin:0px;
  103. font-family:inconsolata, 'helvetica neue', arial, sans-serif;
  104. font-size:10px;
  105. line-height:1.6em;
  106. word-wrap:break-word;
  107. overflow-x:hidden;
  108. -moz-font-smoothing:subpixel-antialiased;
  109. -webkit-font-smoothing:subpixel-antialiased;
  110. font-smoothing:subpixel-antialiased;
  111. color:{color:text};
  112. font-family:{text:font family}, 'helvetica neue', arial, sans-serif;
  113. font-size:{text:font size}px;
  114. background-color:{color:background};
  115. background-attachment:fixed;
  116. {block:ifLetterSpacing}letter-spacing:1px;{/block:ifLetterSpacing}
  117. {block:ifBackgroundImage}background-image:url('{image:background}');{/block:ifBackgroundImage}
  118. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}
  119. }
  120. blockquote, ol, ul, p, pre {
  121. margin-top:.7em;
  122. margin-bottom:.7em;
  123. }
  124. blockquote {
  125. margin-left:1px;
  126. margin-right:0px;
  127. padding-left:.7em;
  128. border-left:1px solid {color:blockquote border};
  129. }
  130. pre {
  131. white-space:normal;
  132. font-family:consolas, 'courier new', courier, monospace;
  133. letter-spacing:0px;
  134. }
  135. img {
  136. border:0px;
  137. -webkit-filter: grayscale(45%);
  138. }
  139. img:hover {
  140. filter: none;
  141. -webkit-filter: grayscale(0);
  142. }
  143.  
  144. a {
  145. color:inherit;
  146. text-decoration:none;
  147. border-bottom:1px solid transparent;
  148.  
  149.  
  150. }
  151. a:hover {
  152. border-color:initial!important;
  153.  
  154. }
  155. ol, ul {
  156. padding-left:2.5em;
  157. }
  158. small, sub {
  159. font-size:1em;
  160. vertical-align:baseline;
  161. }
  162. h1, h2, h3, h4, h5, h6 {
  163. font-size:1em;
  164. font-weight:normal;
  165. }
  166.  
  167. /* container */
  168.  
  169. #main {
  170. margin:100px{block:ifNotAlignLeft} auto{/block:ifNotAlignLeft};
  171. width:250px;
  172. {block:ifPostWidth}width:{text:post width}px;{/block:ifPostWidth}
  173. }
  174.  
  175. /* header */
  176.  
  177. header {
  178. margin:100px 0;
  179. {block:ifNotAlignLeft}text-align:center;{/block:ifNotAlignLeft}
  180. }
  181. .title {
  182. display:inline-block;
  183. font-size:2.5em;
  184. line-height:initial;
  185. margin-bottom:2px;
  186. border-bottom:2px solid;
  187. color:{color:link};
  188. }
  189. header .desc,
  190. header nav {
  191. display:inline-block;
  192. max-width:200px;
  193. margin:1em 0 0;
  194. }
  195. nav ol {
  196. list-style-type:none;
  197. padding-left:0;
  198. margin:0;
  199. }
  200. nav ol li {
  201. display:inline;
  202. margin-right:.75em;
  203. }
  204. nav ol li:last-child {
  205. margin-right:0;
  206. }
  207. nav a {
  208. color:{color:post info};
  209. }
  210.  
  211. /* posts */
  212.  
  213. #content {
  214. margin:100px -50px 0 0;
  215. {block:ifPostSpacing}margin-right:-{text:post spacing}px;{/block:ifPostSpacing}
  216. }
  217. .entry {
  218. float:left;
  219. position:relative;
  220. margin-bottom:50px;
  221. margin-right:50px;
  222. width:250px;
  223. max-width:500px;
  224. {block:ifPostSpacing}margin-bottom:{text:post spacing}px;
  225. margin-right:{text:post spacing}px;{/block:ifPostSpacing}
  226. {block:ifPostWidth}width:{text:post width}px;{/block:ifPostWidth}
  227. }
  228. .entry:last-child {
  229. {block:IndexPage}{block:ifNotInfiniteScroll}margin-bottom:100px;{/block:ifNotInfiniteScroll}{/block:IndexPage}
  230. }
  231. .post {
  232. position:relative;
  233. overflow:hidden;
  234. }
  235. .post a {
  236. color:{color:link};
  237. border-color:initial;
  238. }
  239. .post a:hover {
  240. color:{color:link hover};
  241. }
  242. .post img {
  243. max-width:100%;
  244. height:auto;
  245.  
  246. }
  247.  
  248.  
  249.  
  250. /* post info */
  251.  
  252. .info {
  253. margin:1em 0 0;
  254. text-align:{select:post info align};
  255. color:{color:post info};
  256. }
  257. .info a {
  258. margin-right:.5em;
  259. }
  260. .info a:last-child {
  261. margin-right:0;
  262. }
  263. .info a:hover {
  264. border-color:{color:post info};
  265. }
  266. .tagged {
  267. display:inline;
  268. {block:IndexPage}{block:ifNotShowTags}display:none;{/block:ifNotShowTags}{/block:IndexPage}
  269. }
  270.  
  271.  
  272. /* post titles */
  273.  
  274. .post > h1,
  275. .quote {
  276. margin:0;
  277. font-size:1.6em;
  278. line-height:1.3em;
  279. }
  280. .question {
  281. font-weight:bold;
  282. font-size:1.1em;
  283. }
  284.  
  285. /* text and captions */
  286.  
  287. .caption,
  288. .body,
  289. .source {
  290. margin:1em 0 0;
  291. }
  292. .caption *:first-child,
  293. .body *:first-child,
  294. .source *:first-child {
  295. margin-top:0px;
  296. }
  297. .caption *:last-child,
  298. .body *:last-child,
  299. .source *:last-child {
  300. margin-bottom:0px;
  301. }
  302. .caption {
  303. {block:IndexPage}{block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}{/block:IndexPage}
  304. }
  305. .source {
  306. text-align:right;
  307. }
  308.  
  309. /* photos and videos */
  310.  
  311. .media {
  312.  
  313. }
  314. .media a {
  315. border:0;
  316. }
  317. .media img {
  318. display:block;
  319. max-width:100%;
  320. margin:0px auto;
  321. }
  322. .video iframe,
  323. .video .tumblr_video_container,
  324. .video .tumblr_video_container iframe {
  325. display:block;
  326. max-width:100%;
  327. max-height:{text:post width}px;
  328. }
  329. .video #youtube_iframe {
  330. display:block;
  331. max-width:100%;
  332. max-height:calc({text:post width}px * 0.67);
  333. }
  334.  
  335. /* chat posts */
  336.  
  337. .chat {
  338. display:table;
  339. border-spacing:5px;
  340. width:100%;
  341. }
  342. .chat .line {
  343. display:table-row;
  344. }
  345. .chat .label {
  346. display:table-cell;
  347. }
  348.  
  349. /* audio posts */
  350.  
  351. .audio {
  352. text-align:left;
  353. background-color:#000000;
  354. {block:ifGrayAudioPlayer}background-color:#e4e4e4;{/block:ifGrayAudioPlayer}
  355. padding:3px;
  356. height:27px;
  357. margin:auto;
  358. overflow:hidden;
  359. }
  360. .audio .player {
  361. width:27px;
  362. height:27px;
  363. overflow:hidden;
  364. position:absolute;
  365. }
  366. .audio .track {
  367. left:33px;
  368. top:3px;
  369. bottom:3px;
  370. right:3px;
  371. position:absolute;
  372. line-height:27px;
  373. height:27px;
  374. overflow:hidden;
  375. text-transform:uppercase;
  376. font-size:8px;
  377. font-family:inconsolata, monospace;
  378. letter-spacing:1px;
  379. color:#efefef;
  380. {block:ifGrayAudioPlayer}color:#707070;{/block:ifGrayAudioPlayer}
  381. }
  382.  
  383. /* post notes */
  384.  
  385. .n {
  386. margin-top:100px;
  387. }
  388. .notes {
  389. list-style-type:none;
  390. padding:0;
  391. margin:0;
  392. color:{color:post info};
  393. }
  394. .notes a {
  395. border-bottom:1px solid transparent;
  396. color:{color:post info};
  397. }
  398. .notes a:hover {
  399. border-color:initial;
  400. color:{color:post info};
  401. }
  402. .notes img {
  403. display:none;
  404. }
  405.  
  406. /* pagination */
  407.  
  408. .pagination {
  409. clear:left;
  410. margin:0 0 100px 0;
  411. text-align:center;
  412. text-transform:lowercase;
  413. color:{color:post info};
  414. {block:ifAlignLeft}text-align:right;{/block:ifAlignLeft}
  415. {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
  416. }
  417. .o .pagination {
  418. margin-top:100px;
  419. }
  420. .pagination a {
  421. color:{color:post info};
  422. border-bottom:1px solid transparent;
  423. }
  424. .pagination a:hover {
  425. border-color:initial;
  426. }
  427. .pagination .current {
  428. border-bottom:1px solid;
  429. }
  430. .pagination hr {
  431. border:0;
  432. margin:0;
  433. display:inline-block;
  434. width:1em;
  435. }
  436. .pagination hr:last-child {
  437. width:0;
  438. }
  439.  
  440.  
  441. #theme {
  442. position:fixed;
  443. bottom:10px;
  444. right:10px;
  445. display:inline-block;
  446. padding:5px;
  447. font:8px/5px 'helvetica neue', arial, sans-serif;
  448. letter-spacing:0;
  449. text-transform:none;
  450. background-color:white;
  451. color:#4f4f4f;
  452. }
  453. #infscr-loading {
  454. display:none!important;
  455. }
  456. #tumblr_controls {
  457. -webkit-filter:invert(100%);
  458. -webkit-backface-visibility:hidden;
  459. opacity:.67!important;
  460. padding:8px;
  461. }
  462. </style>
  463. </head>
  464. <body>
  465. <img src="http://media.tumblr.com/e8093cbd7e126b6bf3d16d48e3da51f8/tumblr_inline_ni3mgm8VaQ1qhqyii.png" style="position:fixed;bottom:0px;right:0px;z-index:-999"/>
  466. <div id="main"><!-- container -->
  467. <header><!-- header -->
  468. <a href="/" class="title">{Title}</a><br/>
  469. {block:Description}<div class="desc">{Description}</div><br/>{/block:Description}
  470. <nav><ol>{block:ifHomeLink}<li><a href="/">{text:home link}</a> </li>{/block:ifHomeLink}{block:ifArchiveLink}<li><a href="/archive">{text:archive link}</a> </li>{/block:ifArchiveLink}{block:ifAskLink}<li><a href="/ask">{text:ask link}</a> </li>{/block:ifAskLink}{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a> </li>{/block:Pages}{/block:HasPages}{block:ifLink1}<li><a href="{text:link 1 url}">{text:link 1}</a> </li>{/block:ifLink1}{block:ifLink2}<li><a href="{text:link 2 url}">{text:link 2}</a> </li>{/block:ifLink2}{block:ifLink3}<li><a href="{text:link 3 url}">{text:link 3}</a> </li>{/block:ifLink3}{block:ifLink4}<li><a href="{text:link 4 url}">{text:link 4}</a> </li>{/block:ifLink4}{block:ifLink5}<li><a href="{text:link 5 url}">{text:link 5}</a> </li>{/block:ifLink5}{block:ifLink6}<li><a href="{text:link 6 url}">{text:link 6}</a></li>{/block:ifLink6}</ol></nav>
  471. </header>
  472. <div id="content"><!-- posts -->
  473. {block:Posts}
  474. <article class="entry">
  475. <div class="post">
  476. {block:Answer}<!-- answer --><div class="ask"><div class="question">{Asker}: {Question}</div></div><div class="answer body">{Answer}</div>{/block:Answer}{block:Audio}<!-- audio --><div class="audio">{block:AudioPlayer}<div class="player">{block:ifGrayAudioPlayer}{AudioPlayerGrey}{/block:ifGrayAudioPlayer}{block:ifNotGrayAudioPlayer}{AudioPlayerBlack}{/block:ifNotGrayAudioPlayer}</div>{/block:AudioPlayer}<div class="track">{block:Artist}{Artist}{/block:Artist} &ndash; {block:TrackName}{TrackName}{/block:TrackName}</div></div>{/block:Audio}{block:Chat}<!-- chat -->{block:Title}<h1>{Title}</h1>{/block:Title}<div class="chat body">{block:Lines}<div class="line">{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</div>{/block:Lines}</div>{/block:Chat}{block:Link}<!-- link --><h1><a href="{URL}">{Name}</a></h1>{block:Description}<div class="body">{Description}</div>{/block:Description}{/block:Link}{block:Photo}<!-- photo --><div class="media">{LinkOpenTag}<img src="{PhotoURL-500}"/>{LinkCloseTag}</div>{/block:Photo}{block:Photoset}<!-- photoset --><div class="media"><div class="photoset-grid" data-layout="{PhotosetLayout}">{block:Photos}<img src="{PhotoURL-500}" width="0" height="0" {block:Caption}alt="{Caption}"{/block:Caption} />{/block:Photos}</div></div>{/block:Photoset}{block:Quote}<!-- quote --><div class="quote">{Quote}</div>{block:Source}<div class="source">{Source}</div>{/block:Source}{/block:Quote}{block:Text}<!-- text -->{block:Title}<h1>{Title}</h1>{/block:Title}<div class="body">{Body}</div>{/block:Text}{block:Video}<!-- video --><div class="media video">{Video-500}</div>{/block:Video}
  477. <!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->
  478. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  479. </div>
  480. {block:Date}<!-- post info --><div class="info"><a href="{Permalink}" class="permalink">{DayOfMonth} {Month} {Year}</a> {block:ifShowReblogInfo}{block:RebloggedFrom}<a href="{ReblogParentURL}">via {ReblogParentName}</a>{block:ContentSource} <a href="{ReblogRootURL}">src: {ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:ifShowReblogInfo}{block:HasTags}<div class="tagged"> {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div>{/block:Date}
  481. </article>
  482. {block:PostNotes}<!-- post notes --><article class="entry n"><div class="post"><h1>{NoteCountWithLabel}</h1><div class="body">{PostNotes}</div></div></article>{/block:PostNotes}
  483. {/block:Posts}
  484. </div>
  485. {block:Pagination}<div class="pagination">{block:PreviousPage}<a class="back" href="{PreviousPage}">{lang:Back}</a>{block:ifNotJumpPagination}{block:NextPage}<hr/>/<hr/>{/block:NextPage}{/block:ifNotJumpPagination}{/block:PreviousPage}{block:ifJumpPagination}<hr/>{block:JumpPagination length="5"}{block:CurrentPage}<span class="current">{PageNumber}</span><hr/>{/block:CurrentPage}{block:JumpPage}<a class="jump" href="{URL}">{PageNumber}</a><hr/>{/block:JumpPage}{/block:JumpPagination}{/block:ifJumpPagination}{block:NextPage}<a class="next" href="{NextPage}">{lang:Next}</a>{/block:NextPage}</div>{/block:Pagination}
  486. </div>
  487. <a href="http://selkas.tumblr.com" id="theme">ㅅ</a>
  488. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  489. <script src="http://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>
  490. {block:IndexPage}<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script><script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script><script src="http://static.tumblr.com/qudkd6d/BUPni2xyu/fit.js"></script>{/block:IndexPage}
  491. <script>
  492. $(document).ready(function(){
  493. {block:IndexPage}
  494. var w = $(window).width(){block:ifAlignLeft} - 200 + {text:post spacing}{/block:ifAlignLeft},
  495. p = {block:ifPostWidth}{text:post width}{/block:ifPostWidth}{block:ifNotPostWidth}250{/block:ifNotPostWidth},
  496. n = {select:number of columns},
  497. s = {block:ifPostSpacing}{text:post spacing}{/block:ifPostSpacing}{block:ifNotPostSpacing}50{/block:ifNotPostSpacing},
  498. m = true,
  499. i = false;
  500. {block:ifInfiniteScroll}i = true;{/block:ifInfiniteScroll}
  501. fit(w, p, n, s, m, i);
  502. $(window).resize(function(){
  503. w = $(window).width(){block:ifAlignLeft} - 200 + {text:post spacing}{/block:ifAlignLeft};
  504. fit(w, p, n, s, m, i);
  505. });
  506. {/block:IndexPage}
  507. {block:PermalinkPage}
  508. $('.photoset-grid').photosetGrid({ gutter: '2px' });
  509. {/block:PermalinkPage}
  510. });
  511. </script>
  512. </body>
  513. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!