API tools faq
paste
Advertisement
kthms

linear theme

kthms
Mar 31st, 2015
14,380
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.73 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. linear @ shythemes
  11.  
  12.  
  13.  
  14.  
  15. -->
  16. <title>{Title}</title>
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  18. <link rel="shortcut icon" href="{Favicon}"/>
  19. {block:Description}
  20. <meta name="description" content="{MetaDescription}" />
  21. {/block:Description}
  22. <meta name="image:background" content=""/>
  23. <meta name="color:background" content="#f9f9f9"/>
  24. <meta name="color:text" content="#7f7f7f"/>
  25. <meta name="color:border" content="#ededed"/>
  26. <meta name="color:content bg" content="#ffffff"/>
  27. <meta name="color:accent" content="#adadad"/>
  28. <meta name="color:accent bg" content="#fafafa"/>
  29. <meta name="color:accent border" content="#ededed"/>
  30. <meta name="color:bold" content="#6a6a6a"/>
  31. <meta name="color:link" content="#adadad"/>
  32. <meta name="color:link hover" content="#6a6a6a"/>
  33. <meta name="color:post info" content="#adadad"/>
  34. <meta name="color:scrollbar" content="#dcdcdc"/>
  35. <meta name="select:post width" content="300" title="300px"/>
  36. <meta name="select:post width" content="350" title="350px"/>
  37. <meta name="select:post width" content="400" title="400px"/>
  38. <meta name="select:post width" content="450" title="450px"/>
  39. <meta name="select:post width" content="490" title="500px"/>
  40. <meta name="select:body font" content="lato" title="lato"/>
  41. <meta name="select:body font" content="open-sans" title="open sans"/>
  42. <meta name="select:body font" content="droid-sans" title="droid sans"/>
  43. <meta name="select:body font" content="pt-sans" title="pt sans"/>
  44. <meta name="select:body font" content="pt-serif" title="pt serif"/>
  45. <meta name="select:body font" content="lora" title="lora"/>
  46. <meta name="if:show avatar" content="1"/>
  47. <meta name="if:show title" content="1"/>
  48. <meta name="if:show description" content="1"/>
  49. <meta name="if:show captions" content="1"/>
  50. <meta name="if:show reblog" content="1"/>
  51. <meta name="if:show tags" content="1"/>
  52. <meta name="if:tile background" content="1"/>
  53. <meta name="if:letter spacing" content="0"/>
  54. <meta name="if:infinite scroll" content="1"/>
  55. <meta name="text:home link" content="home"/>
  56. <meta name="text:archive link" content="archive"/>
  57. <meta name="text:ask link" content="ask"/>
  58. <meta name="text:link 1" content=""/>
  59. <meta name="text:link 1 url" content=""/>
  60. <meta name="text:link 2" content=""/>
  61. <meta name="text:link 2 url" content=""/>
  62. <meta name="text:link 3" content=""/>
  63. <meta name="text:link 3 url" content=""/>
  64. <meta name="text:link 4" content=""/>
  65. <meta name="text:link 4 url" content=""/>
  66. <meta name="text:link 5" content=""/>
  67. <meta name="text:link 5 url" content=""/>
  68. <meta name="text:link 6" content=""/>
  69. <meta name="text:link 6 url" content=""/>
  70.  
  71. <script src="//use.edgefonts.net/{select:body font}:n4,i4;inconsolata:n5.js"></script>
  72. <link href="http://static.tumblr.com/fwgzvyf/9EEnzvxdr/k.css" rel="stylesheet" type="text/css"/>
  73.  
  74. <style type="text/css">
  75.  
  76. /* basic styles */
  77.  
  78. ::-webkit-scrollbar {
  79. width:4px;
  80. height:4px;
  81. }
  82. ::-webkit-scrollbar,
  83. ::-webkit-scrollbar-track {
  84. background-color:{color:background};
  85. }
  86. ::-webkit-scrollbar-thumb {
  87. background-color:{color:scrollbar};
  88. }
  89. body {
  90. font-size:9px;
  91. font-family:{select:body font}, 'trebuchet ms', sans-serif;
  92. line-height:15px;
  93. {block:ifLetterSpacing}letter-spacing:1px;{/block:ifLetterSpacing}
  94. color:{color:text};
  95. background-color:{color:background};
  96. {block:ifBackgroundImage}
  97. background-image:url({image:background});
  98. background-attachment:fixed;
  99. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}
  100. {/block:ifBackgroundImage}
  101. }
  102. a {
  103. -webkit-transition:all .3s ease-in-out;
  104. transition:all .3s ease-in-out;
  105. }
  106. blockquote {
  107. padding:0 1.5em;
  108. margin:0 0 0 1.5em;
  109. border-left:1px solid {color:accent border};
  110. }
  111. pre {
  112. font-family:consolas, inconsolata, monospace;
  113. }
  114. ol, ul {
  115. padding-left:3em;
  116. }
  117. b, strong {
  118. font-weight:400;
  119. color:{color:bold};
  120. }
  121. a b, a strong {
  122. color:inherit;
  123. }
  124. blockquote, ol, ul, p, pre {
  125. margin-top:1em;
  126. margin-bottom:1em;
  127. }
  128.  
  129. /* accents */
  130.  
  131. .accent {
  132. font-size:7px;
  133. font-family:'trebuchet ms', {select:body font}, sans-serif;
  134. letter-spacing:1px;
  135. text-transform:uppercase;
  136. color:{color:post info};
  137. }
  138. .block {
  139. padding:1em 1.25em;
  140. border-right:1px solid {color:accent border};
  141. border-bottom:1px solid {color:accent border};
  142. background-color:{color:accent bg};
  143. color:{color:accent};
  144. }
  145. .title {
  146. font-size:1.2em;
  147. font-family:{select:body font}, 'trebuchet ms', sans-serif;
  148. line-height:inherit;
  149. text-transform:uppercase;
  150. letter-spacing:1px;
  151. margin-bottom:.83em;
  152. color:{color:bold};
  153. }
  154. ul {
  155. position:relative;
  156. font-size:7px;
  157. font-family:'trebuchet ms', {select:body font}, sans-serif;
  158. letter-spacing:1px;
  159. text-transform:uppercase;
  160. border:0!important;
  161. color:{color:post info};
  162. }
  163. ul, .notes {
  164. list-style-type:none;
  165. }
  166. ul li, .notes li {
  167. position:relative;
  168. }
  169. ul li::before, .notes li::before, .question > .asker::before {
  170. content:" ";
  171. display:inline-block;
  172. position:absolute;
  173. left:-2em;
  174. top:1em;
  175. width:1em;
  176. height:1px;
  177. background-color:{color:border};
  178. }
  179.  
  180. /* container */
  181.  
  182. #main {
  183. margin:0 auto;
  184. padding:150px;
  185. min-height:calc(100% - 300px);
  186. text-align:center;
  187. width:{select:post width}px;
  188. background-color:{color:content bg};
  189. }
  190.  
  191. /* header/sidebar */
  192.  
  193. aside {
  194. margin:0 auto;
  195. width:133px;
  196. }
  197. aside .avatar {
  198. display:block;
  199. width:32px;
  200. height:32px;
  201. margin:0 auto 1.75em;
  202. border-radius:3px;
  203. overflow:hidden;
  204. }
  205. aside .avatar.circle {
  206. border-radius:16px;
  207. }
  208. aside .desc {
  209. margin-bottom:1em;
  210. }
  211. aside hr {
  212. margin:1em 0;
  213. height:1px;
  214. background-color:{color:border};
  215. }
  216. aside nav a {
  217. padding:0 .25em;
  218. display:inline-block;
  219. }
  220. aside nav a::after {
  221. content:"";
  222. display:inline-block;
  223. width:.25em;
  224. }
  225. aside nav a:last-child::after {
  226. width:0;
  227. }
  228.  
  229. /* posts */
  230.  
  231. #content {
  232. text-align:left;
  233. }
  234. .entry {
  235. position:relative;
  236. margin:150px 0;
  237. }
  238. .entry:last-of-type {
  239. margin-bottom:0;
  240. }
  241. .post {
  242. position:relative;
  243. }
  244.  
  245. /* info */
  246.  
  247. .info {
  248. position:absolute;
  249. top:0;
  250. bottom:0;
  251. left:100%;
  252. width:calc(150px - 3.5em);
  253. margin:0 0 0 1.75em;
  254. color:{color:post info};
  255. background-color:transparent;
  256. border-right:0 solid {color:border};
  257. -webkit-transition:opacity .5s ease-in-out;
  258. transition:opacity .5s ease-in-out;
  259. {block:IndexPage}opacity:0;{/block:IndexPage}
  260. }
  261. .entry:hover .info {
  262. opacity:1;
  263. }
  264. .info hr {
  265. margin:1em 1px;
  266. height:1px;
  267. border-left:3em solid {color:border};
  268. }
  269. .tags {
  270. {block:IndexPage}
  271. -webkit-transition:opacity .5s ease-in-out 0s;
  272. transition:opacity .5s ease-in-out 0s;
  273. opacity:0;
  274. {block:ifNotShowTags}display:none;{/block:ifNotShowTags}
  275. {/block:IndexPage}
  276. }
  277. .entry:hover .tags {
  278. -webkit-transition-delay:.25s;
  279. transition-delay:.25s;
  280. opacity:1;
  281. }
  282. .tags .comma {
  283. font-style:inherit;
  284. }
  285. .tags .comma:last-of-type {
  286. display:none;
  287. }
  288.  
  289. /* post titles */
  290.  
  291. .quote, .question {
  292. position:relative;
  293. }
  294. .question {
  295. overflow:auto;
  296. }
  297. .question > .asker {
  298. margin-left:4em;
  299. position:relative;
  300. font-style:inherit;
  301. float:right;
  302. }
  303. .question > .asker::before {
  304. width:2em;
  305. left:-3em;
  306. background-color:{color:accent border};
  307. }
  308.  
  309. /* text and captions */
  310.  
  311. .text a {
  312. position:relative;
  313. line-height:initial;
  314. display:inline-block;
  315. vertical-align:baseline;
  316. color:{color:link};
  317. border-bottom:1px solid {color:border};
  318. }
  319. .text a::before {
  320. content:"";
  321. position:absolute;
  322. bottom:-1px;
  323. left:50%;
  324. right:50%;
  325. height:1px;
  326. z-index:1;
  327. opacity:.75;
  328. background-color:{color:link hover};
  329. -webkit-transition:all .3s ease-in-out;
  330. transition:all .3s ease-in-out;
  331. }
  332. .text a:hover {
  333. color:{color:link hover};
  334. border-color:transparent;
  335. }
  336. .text a:hover::before {
  337. left:0;
  338. right:0;
  339. }
  340. .text a:hover::after {
  341. opacity:0;
  342. }
  343. .answer, .source {
  344. padding:1.75em 1.75em 0;
  345. }
  346. .caption {
  347. padding:1.75em 1.75em 0;
  348. {block:IndexPage}{block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}{/block:IndexPage}
  349. }
  350.  
  351. /* chat posts */
  352.  
  353. .chat .label {
  354. margin-right:.5em;
  355. }
  356.  
  357. /* audio posts */
  358.  
  359. .audiowrap {
  360. position:relative;
  361. padding:5px;
  362. height:27px;
  363. overflow:hidden;
  364. line-height:0;
  365. text-align:left;
  366. background-color:{color:accent bg};
  367. }
  368. .albumart {
  369. position:relative;
  370. z-index:1;
  371. display:inline-block;
  372. width:27px;
  373. height:27px;
  374. opacity:.9;
  375. background-size:cover;
  376. }
  377. .audio {
  378. position:absolute;
  379. display:inline-block;
  380. left:0px;
  381. top:0px;
  382. right:0px;
  383. bottom:0px;
  384. text-align:left;
  385. }
  386. .audio .player {
  387. width:27px;
  388. height:27px;
  389. left:37px;
  390. top:5px;
  391. opacity:.9;
  392. overflow:hidden;
  393. position:absolute;
  394. }
  395. .audio .track {
  396. overflow:hidden;
  397. position:absolute;
  398. top:0;
  399. left:67px;
  400. right:0;
  401. bottom:0;
  402. padding:5px;
  403. line-height:27px!important;
  404. background-color:{color:caption bg};
  405. }
  406.  
  407. /* photos and videos */
  408.  
  409. .media {
  410. overflow:hidden;
  411. }
  412.  
  413. /* pagination */
  414.  
  415. .pagination {
  416. margin-top:150px;
  417. {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
  418. }
  419. .pagination hr {
  420. display:inline-block;
  421. vertical-align:middle;
  422. margin:0 .75em;
  423. width:1em;
  424. height:1px;
  425. background-color:{color:border};
  426. }
  427.  
  428. /* post notes */
  429.  
  430. .notes {
  431. margin:0;
  432. list-style-type:none;
  433. }
  434. .notes a {
  435. border:0;
  436. text-decoration:none;
  437. color:inherit;
  438. }
  439. .notes img {
  440. display:none;
  441. }
  442. .notes li blockquote {
  443. margin:.75em;
  444. }
  445.  
  446. /* etc */
  447.  
  448. #stt {
  449. text-align:center;
  450. display:block;
  451. position:fixed;
  452. left:calc(50% - {select:post width}px/2 - 150px);
  453. bottom:50px;
  454. opacity:0;
  455. width:150px;
  456. }
  457. #stt.s {
  458. opacity:1;
  459. }
  460. #theme {
  461. background-color:{color:content bg};
  462. color:{color:post info};
  463. }
  464. #tumblr_lightbox, .tmblr-lightbox {
  465. background-color:rgba({RGBcolor:accent bg},.9)!important;
  466. }
  467.  
  468. </style>
  469. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  470. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  471. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  472. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  473. <script>
  474. $(document).ready(function(){
  475. $('.photo-slideshow').pxuPhotoset({
  476. lightbox: true,
  477. rounded: false,
  478. gutter: '5px',
  479. photoset: '.photo-slideshow',
  480. photoWrap: '.photo-data',
  481. photo: '.pxu-photo'
  482. });
  483. {block:ifInfiniteScroll}
  484. $('#stt').click(function(){
  485. $('html,body').animate({ scrollTop: 0 }, 1000);
  486. return false
  487. });
  488. $(document).scroll(function(){
  489. var t = $(document).scrollTop();
  490. if (t > 1000) $('#stt').addClass('s');
  491. else $('#stt').removeClass('s');
  492. });
  493. {/block:ifInfiniteScroll}
  494. });
  495. </script>
  496. </head>
  497. <body>
  498. <div id="main">
  499. <aside class="accent"><!-- sidebar -->
  500. {block:ifShowAvatar}<a href="/" class="avatar {AvatarShape}"><img src="{PortraitURL-64}"/></a>{/block:ifShowAvatar}
  501. {block:ifShowTitle}<div class="title"><a href="/">{Title}</a></div>{/block:ifShowTitle}
  502. {block:ifShowDescription}<div class="desc">{Description}</div>{/block:ifShowDescription}
  503. <hr/><nav><!-- navigation -->{block:ifHomeLink}<a href="/">{text:home link}</a> {/block:ifHomeLink}{block:ifArchiveLink}<a href="/archive">{text:archive link}</a> {/block:ifArchiveLink}{block:ifAskLink}<a href="/ask">{text:ask link}</a> {/block:ifAskLink}{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages}{/block:HasPages}{block:ifLink1}<a href="{text:link 1 url}">{text:link 1}</a> {/block:ifLink1}{block:ifLink2}<a href="{text:link 2 url}">{text:link 2}</a> {/block:ifLink2}{block:ifLink3}<a href="{text:link 3 url}">{text:link 3}</a> {/block:ifLink3}{block:ifLink4}<a href="{text:link 4 url}">{text:link 4}</a> {/block:ifLink4}{block:ifLink5}<a href="{text:link 5 url}">{text:link 5}</a> {/block:ifLink5}{block:ifLink6}<a href="{text:link 6 url}">{text:link 6}</a> {/block:ifLink6}</ol></nav>
  504. </aside>
  505. <div id="content"><!-- posts -->
  506. {block:Posts}
  507. <article class="entry">
  508. <div class="post">
  509. {block:Answer}<!-- answer --><div class="question accent block">{Question}<i class="asker">{Asker}</i></div><div class="answer text">{Answer}</div>{/block:Answer}{block:Audio}<!-- audio --><div class="audiowrap"><div class="albumart" style="{block:AlbumArt}background-image:url({AlbumArtURL});{/block:AlbumArt}"></div><div class="audio accent block">{block:AudioPlayer}<div class="player">{AudioPlayerWhite}</div>{/block:AudioPlayer}<div class="track">{block:Artist}{Artist}{block:TrackName} &mdash; {/block:TrackName}{/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}</div></div></div>{/block:Audio}{block:Chat}<!-- c h a t -->{block:Title}<h1 class="title">{Title}</h1>{/block:Title}<div class="chat text accent">{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 class="title"><a href="{URL}">{Name}</a></h1>{block:Description}<div class="text">{Description}</div>{/block:Description}{/block:Link}{block:Photo}<!-- photo --><div class="media">{LinkOpenTag}<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}"/>{LinkCloseTag}</div>{/block:Photo}{block:Photoset}<!-- photoset --><div class="media"><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></div>{/block:Photoset}{block:Quote}<!-- quote --><div class="quote accent block">{Quote}</div>{block:Source}<div class="source text">{Source}</div>{/block:Source}{/block:Quote}{block:Text}<!-- text -->{block:Title}<h1 class="title">{Title}</h1>{/block:Title}<div class="text">{Body}</div>{/block:Text}{block:Video}<!-- v i d e o --><div class="media video">{Video-500}</div>{/block:Video}
  510. {block:Caption}<!-- caption --><div class="caption text">{Caption}</div>{/block:Caption}
  511. </div>
  512. {block:Date}<!-- date --><div class="info accent">
  513. <a href="{Permalink}">{12Hour}.{Minutes} {AmPm}</a>
  514. {block:IndexPage}
  515. {block:ifShowReblog}<br/><a href="{ReblogURL}" class="reblog">reblog</a>{/block:ifShowReblog}{block:ifNotShowReblog}{block:NoteCount}<br/><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{/block:ifNotShowReblog}
  516. {/block:IndexPage}
  517. {block:PermalinkPage}
  518. {block:RebloggedFrom}<br/><a href="{ReblogParentURL}" class="rf">via {ReblogParentName}</a>{block:ContentSource} / <a href="{ReblogRootURL}" class="src">src</a>{/block:ContentSource}{/block:RebloggedFrom}
  519. {/block:PermalinkPage}
  520. <hr/>
  521. {block:HasTags}<!-- tags --><div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a><i class="comma">, </i>{/block:Tags}</div>{/block:HasTags}
  522. </div>{/block:Date}
  523. </article>
  524. {block:PostNotes}<!-- post notes --><article id="notes" class="entry"><div class="post"><h1 class="title">Notes</h1><div class="accent">{PostNotes}</div></div></article>{/block:PostNotes}
  525. {/block:Posts}
  526. <!-- {block:ContentSource}{SourceURL} {/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL} {ReblogParentURL}{/block:RebloggedFrom} -->
  527. </div><!-- end #content -->
  528. {block:Pagination}<!-- pagination --><div class="pagination accent">{block:PreviousPage}<a class="back" href="{PreviousPage}">{lang:Newer}</a>{block:NextPage}<hr/>{/block:NextPage}{/block:PreviousPage}{block:NextPage}<a class="next" href="{NextPage}">{lang:Older}</a>{/block:NextPage}</div>{/block:Pagination}
  529. {block:ifInfiniteScroll}<a id="stt" href="#" class="accent">scroll to top</a>{/block:ifInfiniteScroll}
  530. </div><!-- end #main -->
  531. <a href="http://shythemes.tumblr.com" id="theme" class="accent" title="theme">k.</a>
  532. {block:IndexPage}
  533. {block:ifInfiniteScroll}<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}
  534. <script>
  535. $(document).ready(function(){
  536. var $container = $('#content');
  537. {block:ifInfiniteScroll}
  538. $container.infinitescroll({
  539. itemSelector: '.entry',
  540. navSelector: '.pagination',
  541. nextSelector: '.next',
  542. loadingImg: '',
  543. loadingText: '<em></em>',
  544. bufferPx: 2000
  545. },
  546. function( newElements ) {
  547. var $newElems = $( newElements );
  548. $newElems.find('.photo-slideshow').pxuPhotoset({
  549. lightbox: true,
  550. rounded: false,
  551. gutter: '5px',
  552. photoset: '.photo-slideshow',
  553. photoWrap: '.photo-data',
  554. photo: '.pxu-photo'
  555. });
  556. resizeVideos();
  557. });
  558. {/block:ifInfiniteScroll}
  559. });
  560. </script>
  561. {/block:IndexPage}
  562. </body>
  563. </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!