API tools faq
paste
Advertisement
kthms

theme #13

kthms
Mar 24th, 2015
10,515
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.74 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. 13 @ 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}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20. <meta name="image:background" content="http://static.tumblr.com/631a73a25a5b08210c5f8550aa130f5c/qudkd6d/QQ2n9s9v9/tumblr_static_bkypsnu34u0wswgg0osk0kc8g.png"/>
  21. <meta name="color:background" content="#ffffff"/>
  22. <meta name="color:page border" content="#ffffff"/>
  23. <meta name="color:post bg" content="#fafafa"/>
  24. <meta name="color:post border" content="#ffffff"/>
  25. <meta name="color:title" content="#7f95aa"/>
  26. <meta name="color:title shadow" content="#ddf3f2"/>
  27. <meta name="color:text" content="#9a9a9a"/>
  28. <meta name="color:link border" content="#b3ead3"/>
  29. <meta name="color:link border hover" content="#c2e0ed"/>
  30. <meta name="color:permalink text" content="#adadad"/>
  31. <meta name="color:permalink bg" content="#e7fbf4"/>
  32. <meta name="color:tags" content="#adadad"/>
  33. <meta name="color:pages" content="#adadad"/>
  34. <meta name="color:pages shadow" content="#e7fbf4"/>
  35. <meta name="color:scrollbar" content="#7f95aa"/>
  36. <meta name="color:selection" content="#c2e0ed"/>
  37. <meta name="if:one column" content="1"/>
  38. <meta name="if:show captions" content="1"/>
  39. <meta name="if:show tags" content="1"/>
  40. <meta name="if:letter spacing" content="1"/>
  41. <meta name="if:uppercase" content="0"/>
  42. <meta name="if:tile background" content="1"/>
  43. <meta name="select:post width" content="256" title="250px"/>
  44. <meta name="select:post width" content="306" title="300px"/>
  45. <meta name="select:post width" content="356" title="350px"/>
  46. <meta name="select:post width" content="406" title="400px"/>
  47. <meta name="select:post width" content="456" title="450px"/>
  48. <meta name="select:post width" content="492" title="500px"/>
  49. <meta name="text:font size" content=""/>
  50. <meta name="text:font family" content=""/>
  51. <meta name="text:home link" content="refresh"/>
  52. <meta name="text:archive link" content="archive"/>
  53. <meta name="text:ask link" content="contact"/>
  54. <meta name="text:link 1" content=""/>
  55. <meta name="text:link 1 url" content=""/>
  56. <meta name="text:link 2" content=""/>
  57. <meta name="text:link 2 url" content=""/>
  58. <meta name="text:link 3" content=""/>
  59. <meta name="text:link 3 url" content=""/>
  60. <meta name="text:link 4" content=""/>
  61. <meta name="text:link 4 url" content=""/>
  62. <meta name="text:link 5" content=""/>
  63. <meta name="text:link 5 url" content=""/>
  64. <meta name="text:link 6" content=""/>
  65. <meta name="text:link 6 url" content=""/>
  66. <link href="http://static.tumblr.com/qudkd6d/Cn9nlhcbg/k.css" rel="stylesheet" type="text/css"/>
  67. <style type="text/css">
  68. ::selection {
  69. color:white;
  70. background-color:{color:selection};
  71. }
  72. ::-webkit-scrollbar {
  73. width:2px;
  74. height:2px;
  75. background-color:inherit;
  76. }
  77. ::-webkit-scrollbar-track {
  78. background-color:inherit;
  79. }
  80. ::-webkit-scrollbar-thumb {
  81. background-color:{color:scrollbar};
  82. }
  83. body {
  84. font-family:'trebuchet ms', arial, sans-serif;
  85. font-size:9px;
  86. line-height:1.5em;
  87. background-color:{color:page border};
  88. color:{color:text};
  89. font-family:{text:font family}, arial, sans-serif;
  90. font-size:{text:font size}px;
  91. {block:ifUppercase}text-transform:uppercase;{/block:ifUppercase}
  92. {block:ifLetterSpacing}letter-spacing:1px;{/block:ifLetterSpacing}
  93. }
  94. blockquote, ol, ul, p, pre {
  95. margin-top:.67em;
  96. margin-bottom:.67em;
  97. }
  98. pre {
  99. font-family:consolas, 'courier new', courier, monospace;
  100. padding:3px;
  101. letter-spacing:0;
  102. background-color:rgba(0,0,0,.03);
  103. }
  104. a {
  105. cursor:crosshair;
  106. -webkit-transition:color .15s linear, border-color .15s linear;
  107. transition:color .15s linear, border-color .15s linear;
  108. }
  109. ol, ul {
  110. padding-left:2.5em;
  111. }
  112. .accent {
  113. font-size:8px;
  114. font-style:italic;
  115. letter-spacing:1px;
  116. line-height:1.5em;
  117. }
  118. #main {
  119. position:absolute;
  120. top:30px;
  121. right:30px;
  122. bottom:30px;
  123. left:30px;
  124. padding:20px;
  125. overflow:auto;
  126. background-color:{color:background};
  127. {block:ifBackgroundImage}background-image:url('{image:background}');
  128. background-attachment:fixed;
  129. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}{/block:ifBackgroundImage}
  130. }
  131. #menu {
  132. position:fixed;
  133. top:30px;
  134. right:30px;
  135. bottom:30px;
  136. left:30px;
  137. padding:20px;
  138. overflow:auto;
  139. background-color:{color:background};
  140. {block:ifBackgroundImage}background-image:url('{image:background}');
  141. background-attachment:fixed;
  142. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}{/block:ifBackgroundImage}
  143. visibility:hidden;
  144. opacity:0;
  145. z-index:-99;
  146. -webkit-transition:opacity .3s linear, visibility 0s linear .3s, z-index 0s linear .3s;
  147. transition:opacity .3s linear, visibility 0s linear .3s, z-index 0s linear .3s;
  148. }
  149. .open #menu {
  150. visibility:visible;
  151. opacity:1;
  152. z-index:10000;
  153. -webkit-transition-delay:0s;
  154. transition-delay:0s;
  155. }
  156. #menu .co {
  157. position:absolute;
  158. top:50%;
  159. left:50%;
  160. z-index:10001;
  161. -webkit-transform:translate(-50%,-50%);
  162. transform:translate(-50%,-50%);
  163. width:200px;
  164. margin-bottom:10px;
  165. }
  166. #menu .box {
  167. width:200px;
  168. margin-top:10px;
  169. position:relative;
  170. border:3px solid {color:post border};
  171. background-color:{color:post bg};
  172. }
  173. #menu .box h1 {
  174. margin:0px;
  175. position:relative;
  176. font-style:italic;
  177. padding:14px;
  178. margin-bottom:5px;
  179. background-color:{color:post bg};
  180. border-bottom:3px solid {color:post border};
  181. }
  182. #menu .box .description {
  183. padding:14px;
  184. }
  185. #menu .box .links {
  186. overflow:auto;
  187. padding:14px;
  188. }
  189. #menu .links ol {
  190. padding:0;
  191. margin-bottom:-5px;
  192. }
  193. #menu .links li {
  194. display:block;
  195. width:80px;
  196. float:left;
  197. margin-bottom:5px;
  198. margin-right:5px;
  199. }
  200. #menu .links a {
  201. border-bottom:1px solid {color:link border};
  202. }
  203. #menu .links a:hover {
  204. border-color:{color:link border hover};
  205. }
  206. #menu .exit {
  207. position:absolute;
  208. top:0px;
  209. bottom:0px;
  210. left:0px;
  211. right:0px;
  212. }
  213. #top {
  214. position:fixed;
  215. z-index:100;
  216. top:50px;
  217. left:50px;
  218. }
  219. #title {
  220. display:inline-block;
  221. font-size:30px;
  222. line-height:1.15em;
  223. font-style:italic;
  224. letter-spacing:1px;
  225. color:{color:title};
  226. text-shadow:2px 2px 0px {color:title shadow};
  227. }
  228. #content {
  229. margin:0 auto;
  230. padding:50px 0px;
  231. width:306px;
  232. width:{select:post width}px;
  233. {block:IndexPage}
  234. {block:ifNotOneColumn}
  235. padding:50px 0px 50px 50px;
  236. {/block:ifNotOneColumn}
  237. {/block:IndexPage}
  238. }
  239. .entry {
  240. width:{select:post width}px;
  241. margin-bottom:50px;
  242. {block:IndexPage}
  243. {block:ifOneColumn}
  244. margin-bottom:30%;
  245. {/block:ifOneColumn}
  246. {block:ifNotOneColumn}
  247. margin-right:50px;
  248. display:inline-block;
  249. vertical-align:top;
  250. {/block:ifNotOneColumn}
  251. {/block:IndexPage}
  252. }
  253. .entry:last-child {
  254. margin-bottom:0;
  255. }
  256. .post {
  257. position:relative;
  258. overflow:hidden;
  259. padding:3px;
  260. background-color:{color:post border};
  261. }
  262. .date .bg {
  263. display:inline-block;
  264. padding:0px 3px 3px 0px;
  265. background-color:{color:post border};
  266. }
  267. .date .permalink {
  268. display:inline-block;
  269. margin:0px 0px 0px 3px;
  270. padding:2px 3px 1px 4px;
  271. color:{color:permalink text};
  272. background-color:{color:permalink bg};
  273. }
  274. .tagged {
  275. display:inline-block;
  276. padding:1px 4px 5px;
  277. -webkit-transition:opacity .15s linear;
  278. transition:opacity .15s linear;
  279. color:{color:tags};
  280. background-color:{color:post border};
  281. {block:IndexPage}
  282. opacity:0;
  283. position:absolute;
  284. {block:ifNotShowTags}display:none;{/block:ifNotShowTags}
  285. {/block:IndexPage}
  286. }
  287. .entry:hover .tagged {
  288. opacity:1;
  289. }
  290. .tagged .comma {
  291. margin-right:2px;
  292. }
  293. .tagged .comma:last-child {
  294. display:none;
  295. }
  296. .post > h1,
  297. .question,
  298. .quote {
  299. margin:0 0 3px 0;
  300. padding:14px;
  301. font-style:italic;
  302. background-color:{color:post bg};
  303. }
  304. .text {
  305. padding:14px;
  306. background-color:{color:post bg};
  307. }
  308. .text a {
  309. border-bottom:1px solid {color:link border};
  310. }
  311. .text a:hover {
  312. border-color:{color:link border hover};
  313. }
  314. .caption {
  315. margin-top:3px;
  316. {block:IndexPage}{block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}{/block:IndexPage}
  317. }
  318. .source {
  319. text-align:right;
  320. }
  321. .media {
  322. overflow:hidden;
  323. opacity:.9;
  324. }
  325. .video iframe,
  326. .tumblr_video_container {
  327. display:block;
  328. max-width:100%;
  329. max-height:{select:post width}px;
  330. {block:PermalinkPage}max-height:486px;{/block:PermalinkPage}
  331. }
  332. .video #youtube_iframe {
  333. {block:IndexPage}max-height:calc({select:post width}px * 0.667);{/block:IndexPage}
  334. {block:PermalinkPage}max-height:324px;{/block:PermalinkPage}
  335. }
  336. .video .instagram-media {
  337. max-height:none!important;
  338. box-shadow:none!important;
  339. }
  340. .chat .line {
  341. padding:3px;
  342. }
  343. .chat .label {
  344. margin-right:.5em;
  345. font-weight:bold;
  346. }
  347. .ask {
  348. position:relative;
  349. }
  350. .portrait {
  351. position:relative;
  352. display:block;
  353. width:42px;
  354. height:42px;
  355. background-size:cover;
  356. opacity:.9;
  357. }
  358. .question {
  359. position:absolute;
  360. display:inline-block;
  361. left:45px;
  362. top:0px;
  363. right:0px;
  364. bottom:0px;
  365. overflow:auto;
  366. line-height:14px;
  367. padding:7px;
  368. height: 28px;
  369. }
  370. .audiowrap {
  371. position:relative;
  372. }
  373. .albumart {
  374. position:relative;
  375. display:inline-block;
  376. width:42px;
  377. height:42px;
  378. margin-bottom:-3px;
  379. background-size:cover;
  380. opacity:.9;
  381. }
  382. .audio {
  383. position:absolute;
  384. display:inline-block;
  385. left:45px;
  386. top:0px;
  387. right:0px;
  388. bottom:1px;
  389. text-align:left;
  390. background-color:{color:post bg};
  391. padding:7px;
  392. overflow:hidden;
  393. }
  394. .audio .player {
  395. width:27px;
  396. height:27px;
  397. overflow:hidden;
  398. position:absolute;
  399. }
  400. .audio .track {
  401. height:27px;
  402. left:40px;
  403. right:7px;
  404. position:absolute;
  405. line-height:27px;
  406. overflow:hidden;
  407. font-style:italic;
  408. font-size:.9em;
  409. letter-spacing:1px;
  410. }
  411. #notes {
  412. line-height:1.67em;
  413. }
  414. #notes .text {
  415. max-height:150px;
  416. overflow:auto;
  417. }
  418. .notes {
  419. list-style-type:none;
  420. padding:14px;
  421. margin:3px 0px 0px 0px;
  422. }
  423. .notes a {
  424. border:0;
  425. }
  426. .notes img {
  427. display:none;
  428. }
  429. .pagination {
  430. position:fixed;
  431. bottom:25px;
  432. right:25px;
  433. margin:25px;
  434. }
  435. .pagination a,
  436. .pagination .current {
  437. font-size:12px;
  438. line-height:1.15em;
  439. font-style:italic;
  440. text-transform:none;
  441. letter-spacing:-1px;
  442. display:inline-block;
  443. margin:0px 10px 0px 0px;
  444. color:{color:pages};
  445. text-shadow:1px 1px 0px {color:pages shadow};
  446. }
  447. .pagination .current {
  448. color:{color:link border};
  449. }
  450. #tumblr_controls, .tmblr-iframe {
  451. position:fixed!important;
  452. opacity:.67!important;
  453. -webkit-filter:invert(100%);
  454. -webkit-backface-visibility:hidden;
  455. -moz-box-sizing:content-box;
  456. box-sizing:content-box;
  457. padding:2px;
  458. }
  459. #tumblr_lightbox, .tmblr-lightbox {
  460. top:30px!important;
  461. right:30px!important;
  462. bottom:30px!important;
  463. left:30px!important;
  464. background-color:{color:background}!important;
  465. {block:ifBackgroundImage}background-image:url('{image:background}')!important;
  466. background-attachment:fixed;
  467. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}{/block:ifBackgroundImage}
  468. }
  469. #vignette, .vignette {
  470. opacity:0;
  471. }
  472. #tumblr_lightbox img, .lightbox-image {
  473. box-shadow:5px 5px 0px {color:title shadow}!important;
  474. border-radius:0!important;
  475. max-width:none;
  476. }
  477. #tumblr_lightbox_caption, .lightbox-caption {
  478. visibility:hidden;
  479. }
  480. </style>
  481. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  482. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  483. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  484. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  485. <script>
  486. $(document).ready(function(){
  487. $('#title, .exit').click(function(){
  488. $('body').toggleClass('open');
  489. return false;
  490. });
  491. $('.photo-slideshow').pxuPhotoset({
  492. lightbox: true,
  493. rounded: false,
  494. gutter: '3px',
  495. borderRadius: '0px',
  496. photoset: '.photo-slideshow',
  497. photoWrap: '.photo-data',
  498. photo: '.pxu-photo'
  499. });
  500. });
  501. </script>
  502. </head>
  503. <body>
  504. <div id="main">
  505. <div id="top"><a href="#" id="title">{Title}</a></div>
  506. <div id="content">
  507. {block:Posts}<article class="entry"><div class="post">
  508. {block:Answer}<!-- answer --><div class="ask"><div class="portrait" style="background-image:url({AskerPortraitURL-128});"></div><div class="question">{Asker}: {Question}</div></div><div class="caption text">{Answer}</div>{/block:Answer}{block:Audio}<!-- audio --><div class="audiowrap"><div class="albumart" style="background-image:url(); {block:AlbumArt}background-image:url({AlbumArtURL});{/block:AlbumArt}"></div><div class="audio">{block:AudioPlayer}<div class="player">{AudioPlayerWhite}</div>{/block:AudioPlayer}<div class="track">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist} by {Artist}{/block:Artist}</div></div></div>{/block:Audio}{block:Chat}<!-- chat --> {block:Title}<h1>{Title}</h1>{/block:Title}<div class="chat text">{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 text">{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="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">{Quote}</div>{block:Source}<div class="source text">{Source}</div>{/block:Source}{/block:Quote}{block:Text}<!-- text -->{block:Title}<h1>{Title}</h1>{/block:Title}<div class="body text">{Body}</div>{/block:Text}{block:Video}<!-- video --><div class="media video">{Video-250}</div>{/block:Video}
  509. {block:Caption}<div class="caption text">{Caption}</div>{/block:Caption}
  510. <!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->
  511. </div>
  512. {block:Date}<div class="date accent"><span class="bg"><a href="{Permalink}" class="permalink">{ShortMonth} {DayOfMonth}</a>{block:IndexPage}<a href="{ReblogURL}" class="permalink">+</a>{/block:IndexPage}</span>{block:HasTags}<div class="tagged">{block:Tags}<a href="{TagURL}">{Tag}</a><i class="comma">,</i> {/block:Tags}</div>{/block:HasTags}</div>{/block:Date}
  513. </article>
  514. {block:PostNotes}<!-- post notes --><article class="entry" id="notes"><div class="post"><h1>{NoteCountWithLabel}</h1><div class="text">{PostNotes}</div></div></article>{/block:PostNotes}
  515. {/block:Posts}
  516. </div>
  517. {block:Pagination}<div class="pagination">{block:JumpPagination length="5"}{block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}" class="next" style="display:none"></a>{/block:NextPage}</div>{/block:Pagination}
  518. </div>
  519. <div id="menu"><div class="exit"></div><div class="co">{block:Description}<div class="box"><div class="description">{Description}</div></div>{/block:Description}<div class="box"><div class="links"><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}<li><a href="http://shythemes.tumblr.com">theme</a></li></ol></div></div></div></div>
  520. {block:IndexPage}
  521. {block:ifNotOneColumn}
  522. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  523. <script>
  524. $(document).ready(function(){
  525. var $container = $('#content');
  526. $container.css({opacity:0});
  527. $container.masonry({
  528. itemSelector: '.entry',
  529. columnWidth: {select:post width} + 50,
  530. isFitWidth: true
  531. });
  532. $container.imagesLoaded(function(){
  533. $container.masonry();
  534. });
  535. $container.animate({opacity:1});
  536. $(window).resize(function(){
  537. $container.masonry();
  538. });
  539. });
  540. </script>
  541. {/block:ifNotOneColumn}
  542. {/block:IndexPage}
  543. </body>
  544. </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!