Advertisement
kthms

noir theme

Jul 25th, 2015
21,971
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.10 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <!--
  5.  
  6.  
  7.  
  8.  
  9. noir @ shythemes
  10.  
  11.  
  12.  
  13.  
  14. -->
  15. <title>{Title}</title>
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  17. <link rel="shortcut icon" href="{Favicon}"/>
  18. {block:Description}
  19. <meta name="description" content="{MetaDescription}" />
  20. {/block:Description}
  21. <meta name="viewport" content="width=device-width, initial-scale=1">
  22. <meta name="image:background" content=""/>
  23. <meta name="color:background" content="#ffffff"/>
  24. <meta name="color:title" content="#4f4f4f"/>
  25. <meta name="color:text" content="#6f6f6f"/>
  26. <meta name="color:accent" content="#9f9f9f"/>
  27. <meta name="color:accent border" content="#e9e9e9"/>
  28. <meta name="color:posts" content="#f8f8f8"/>
  29. <meta name="select:posts" content="250px" title="250px"/>
  30. <meta name="select:posts" content="300px" title="300px"/>
  31. <meta name="select:posts" content="350px" title="350px"/>
  32. <meta name="select:font" content="karla" title="Karla"/>
  33. <meta name="select:font" content="source-sans-pro" title="Source Sans Pro"/>
  34. <meta name="select:font" content="source-serif-pro" title="Source Serif Pro"/>
  35. <meta name="select:font" content="inconsolata" title="Inconsolata"/>
  36. <meta name="select:font" content="courier-prime" title="Courier Prime"/>
  37. <meta name="select:captions" content="" title="normal"/>
  38. <meta name="select:captions" content="inline" title="inline"/>
  39. <meta name="select:captions" content="inline clipped" title="clipped"/>
  40. <meta name="select:captions" content="hidden" title="hidden"/>
  41. <meta name="if:lowercase" content="0"/>
  42. <meta name="if:show description" content="0"/>
  43. <meta name="if:tile background" content="1"/>
  44. <meta name="if:infinite scroll" content="0"/>
  45. <meta name="text:other font" content=""/>
  46. <meta name="text:font size" content=""/>
  47. <meta name="text:home link" content=""/>
  48. <meta name="text:archive link" content=""/>
  49. <meta name="text:ask link" content="message"/>
  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. <script src="//use.edgefonts.net/{select:font}:n4,n5,i4,n7,i7.js"></script>
  63. <style type="text/css">
  64. ::-webkit-scrollbar {
  65. width:17px;
  66. height:17px;
  67. }
  68. ::-webkit-scrollbar {
  69. background-color:{color:background};
  70. }
  71. ::-webkit-scrollbar-track {
  72. border:8px solid {color:background};
  73. background-color:{color:background};
  74. }
  75. ::-webkit-scrollbar-thumb {
  76. border:8px solid {color:background};
  77. background-color:{color:accent border};
  78. min-height:24px;
  79. min-width:24px;
  80. }
  81. html {
  82. height:100%;
  83. }
  84. body {
  85. margin:0;
  86. height:100%;
  87. font-size:10px;
  88. font-family:{select:font}, sans-serif;
  89. {block:ifOtherFont}
  90. font-family:{text:other font}, {select:font}, sans-serif;
  91. {/block:ifOtherFont}
  92. {block:ifFontSize}
  93. font-size:{text:font size};
  94. {/block:ifFontSize}
  95. {block:ifLowercase}
  96. text-transform:lowercase;
  97. {/block:ifLowercase}
  98. line-height:1.67em;
  99. word-wrap:break-word;
  100. background-attachment:fixed;
  101. -moz-osx-font-smoothing:grayscale;
  102. -webkit-font-smoothing:antialiased;
  103. font-smoothing:antialiased;
  104. -ms-text-size-adjust:100%;
  105. -moz-text-size-adjust:100%;
  106. -webkit-text-size-adjust:100%;
  107. color:{color:text};
  108. background-color:{color:background};
  109. {block:ifBackgroundImage}
  110. background-image:url({image:background});
  111. {/block:ifBackgroundImage}
  112. {block:ifNotTileBackground}
  113. background-size:cover;
  114. {/block:ifNotTileBackground}
  115. }
  116. a, a b, a strong {
  117. color:inherit;
  118. text-decoration:none;
  119. }
  120. small, sub {
  121. font-size:1em;
  122. vertical-align:baseline;
  123. }
  124. blockquote {
  125. margin:0;
  126. padding:.67em 1.33em .67em 2.33em;
  127. border-left:1px solid rgba({RGBcolor:accent border},.67);
  128. }
  129. pre {
  130. font-family:inherit;
  131. white-space:normal;
  132. }
  133. ol {
  134. padding:0;
  135. list-style-type:none;
  136. }
  137. ol li {
  138. counter-increment:olist;
  139. }
  140. ol li::before {
  141. content:counter(olist, decimal-leading-zero) '.';
  142. margin-right:.33em;
  143. }
  144. li ol, li ul {
  145. margin:0;
  146. }
  147. blockquote, ol, ul, p, pre {
  148. margin-top:.33em;
  149. margin-bottom:.33em;
  150. }
  151. h1, h2, h3, h4, h5, h6 {
  152. font-size:1em;
  153. font-weight:normal;
  154. }
  155. hr {
  156. border:0;
  157. margin:0;
  158. -moz-box-sizing:content-box;
  159. box-sizing:content-box;
  160. }
  161. img {
  162. border:0;
  163. max-width:100%;
  164. height:auto;
  165. }
  166.  
  167. /* accents */
  168.  
  169. .title {
  170. font-weight:bold;
  171. font-size:1.5em;
  172. margin-top:0;
  173. margin-bottom:.9em;
  174. letter-spacing:-1px;
  175. color:{color:title};
  176. }
  177. .accent, .light, li::before, li::after {
  178. color:{color:accent};
  179. }
  180. .light a, .text .tumblr_blog {
  181. color:{color:accent};
  182. }
  183. .text a, .accent a, .title a, nav a {
  184. border-bottom:1px solid transparent;
  185. }
  186. .text a:hover, .accent a:hover, .title a:hover,
  187. nav a:hover, .light a:hover, .text .tumblr_blog:hover {
  188. border-color:{color:accent border};
  189. }
  190. ul {
  191. padding:0;
  192. list-style-type:none;
  193. }
  194. ul li, .question .sender {
  195. position:relative;
  196. padding-left:2.5em;
  197. }
  198. ul li::before, .question .sender::before {
  199. content:'';
  200. position:absolute;
  201. display:block;
  202. top:.835em;
  203. left:.835em;
  204. height:0;
  205. width:.835em;
  206. margin-top:-1px;
  207. border-top:1px solid {color:accent border};
  208. }
  209.  
  210. /* container */
  211.  
  212. #main {
  213. position:relative;
  214. margin:0 100px;
  215. height:100%;
  216. }
  217.  
  218. /* header */
  219.  
  220. aside {
  221. position:fixed;
  222. top:50%;
  223. margin-top:calc(-{select:posts}/2);
  224. left:0;
  225. z-index:5;
  226. width:149px;
  227. height:{select:posts};
  228. padding:0 100px;
  229. background-color:{color:background};
  230. border-right:1px solid rgba({RGBcolor:accent border},.67);
  231. }
  232. .sidebar {
  233. text-align:center;
  234. position:absolute;
  235. top:50%;
  236. -webkit-transform:translateY(-50%);
  237. transform:translateY(-50%);
  238. width:149px;
  239. }
  240. #title {
  241. margin-right:1px;
  242. }
  243. nav li {
  244. padding:0 0 .33em;
  245. display:block;
  246. }
  247. .desc {
  248. padding:0 0 1em;
  249. }
  250.  
  251. /* posts */
  252.  
  253. #content {
  254. position:absolute;
  255. left:350px;
  256. top:50%;
  257. margin-top:calc(-{select:posts}/2);
  258. height:{select:posts};
  259. {block:IndexPage}
  260. overflow:hidden;
  261. display:inline;
  262. margin-right:-99999px;
  263. width:auto;
  264. {/block:IndexPage}
  265. }
  266. .entry {
  267. position:relative;
  268. counter-increment:posts;
  269. width:{select:posts};
  270. {block:IndexPage}
  271. height:100%;
  272. {/block:IndexPage}
  273. }
  274. .post {
  275. position:relative;
  276. padding:1em 1.33em;
  277. min-height:calc(100% - 4.67em);
  278. background-color:{color:posts};
  279. overflow:hidden;
  280. {block:PermalinkPage}
  281. margin-bottom:100px;
  282. {/block:PermalinkPage}
  283. }
  284. .clip {
  285. position:absolute;
  286. bottom:0;
  287. left:0;
  288. right:0;
  289. height:1.33em;
  290. background-color:{color:posts};
  291. z-index:3;
  292. }
  293. .ph .clip {
  294. display:none;
  295. }
  296. {block:IndexPage}
  297. .entry {
  298. float:left;
  299. margin:0 100px 0 0;
  300. max-height:100%;
  301. }
  302. .ph, .ph .post, .ph .media, .ph .media img {
  303. width:auto;
  304. max-width:none;
  305. padding:0;
  306. height:100%;
  307. max-height:100%;
  308. }
  309. {/block:IndexPage}
  310.  
  311. /* info */
  312.  
  313. .info {
  314. margin-bottom:1em;
  315. }
  316. .info .permalink:before {
  317. content:counter(posts, decimal-leading-zero) '.';
  318. }
  319. .ph .info {
  320. margin:0;
  321. }
  322. .ph .info .permalink {
  323. position:absolute;
  324. top:0;
  325. left:0;
  326. z-index:2;
  327. width:100%;
  328. height:100%;
  329. background-color:transparent;
  330. }
  331. .ph .info .permalink:before {
  332. display:none;
  333. }
  334. .perma {
  335. position:absolute;
  336. top:0;
  337. width:100%;
  338. left:100%;
  339. margin:1em 1.33em;
  340. }
  341. .tags {
  342. {block:IndexPage}display:none;{/block:IndexPage}
  343. }
  344. .comma {
  345. font-style:inherit;
  346. }
  347. .comma:last-child {
  348. display:none;
  349. }
  350.  
  351. /* post titles */
  352.  
  353. .post > h1,
  354. .question,
  355. .quote {
  356.  
  357. }
  358. .quote * {
  359. margin:0;
  360. }
  361. .question {
  362. overflow:hidden;
  363. font-size:1em;
  364. }
  365. .question .sender {
  366. position:relative;
  367. display:inline-block;
  368. text-transform:lowercase;
  369. font-style:inherit;
  370. }
  371.  
  372. /* text */
  373.  
  374. .text *:first-child {
  375. margin-top:0;
  376. }
  377. .text *:last-child {
  378. margin-bottom:0;
  379. }
  380. .answer,
  381. .caption {
  382. margin-top:.67em;
  383. }
  384. .quote,
  385. .question {
  386. margin-bottom:.67em;
  387. }
  388.  
  389. /* captions */
  390. {block:IndexPage}
  391. .ph .caption {
  392. margin:0;
  393. opacity:0;
  394. position:absolute;
  395. top:50%;
  396. left:50%;
  397. z-index:3;
  398. padding:1em 1.33em;
  399. -webkit-transform:translate(-50%,-50%);
  400. transform:translate(-50%,-50%);
  401. max-width: calc(50% - 4px - 1.33em);
  402. max-height: calc(50% - 4px - 1em);
  403. overflow:hidden;
  404. background-color:{color:posts};
  405. -webkit-transition:opacity .3s ease-in-out;
  406. transition:opacity .3s ease-in-out;
  407. }
  408. .ph:hover .caption {
  409. opacity:1;
  410. }
  411. {/block:IndexPage}
  412. .caption.hidden {
  413. display:none;
  414. }
  415. .caption.inline * {
  416. display:inline;
  417. margin:0;
  418. }
  419. .caption.inline blockquote {
  420. padding:0;
  421. border:0;
  422. }
  423. .caption.inline *::after {
  424. content:' ';
  425. }
  426. .caption.inline a::after {
  427. display:none;
  428. }
  429. .caption.clipped {
  430. white-space:nowrap;
  431. overflow:hidden;
  432. text-overflow:ellipsis;
  433. max-height:1.6em;
  434. }
  435.  
  436. /* audio posts */
  437.  
  438. .audio {
  439. padding:.33em 0 0;
  440. }
  441. .audio .track {
  442. display:none;
  443. }
  444.  
  445. /* photos and videos */
  446.  
  447. .media {
  448. overflow:hidden;
  449. {block:PermalinkPage}margin:-1em -1.33em 1.33em;{/block:PermalinkPage}
  450. }
  451. .media img {
  452. display:block;
  453. margin:0;
  454. }
  455. .video iframe,
  456. .tumblr_video_container {
  457. display:block;
  458. max-height:100%;
  459. }
  460.  
  461. /* footer */
  462.  
  463. footer {
  464. width:auto!important;
  465. }
  466. .pagination {
  467. position:absolute;
  468. top:50%;
  469. -webkit-transform:translateY(-50%);
  470. transform:translateY(-50%);
  471. }
  472. .pagination .next {
  473. color:{color:text};
  474. }
  475. {block:ifInfiniteScroll}
  476. footer {
  477. display:none;
  478. }
  479. {/block:ifInfiniteScroll}
  480.  
  481. /* post notes */
  482.  
  483. .notes a {
  484. border:0;
  485. text-decoration:none;
  486. color:inherit;
  487. }
  488. .notes img {
  489. display:none;
  490. }
  491. .action > a:first-of-type {
  492. color:{color:text};
  493. }
  494. .clear {
  495. display:none;
  496. }
  497. .note {
  498. text-align:inherit!important;
  499. }
  500. .note::before {
  501. display:none;
  502. }
  503. .note blockquote {
  504. display:inline;
  505. padding:0;
  506. border:0;
  507. }
  508. .note blockquote::before {
  509. content:' ';
  510. }
  511.  
  512. /* etc */
  513.  
  514. #infscr-loading {
  515. display:none!important;
  516. }
  517. #tumblr_controls, .tmblr-iframe {
  518. position:fixed!important;
  519. opacity:.5!important;
  520. -webkit-filter:invert(100%);
  521. -webkit-backface-visibility:hidden;
  522. -webkit-transition:opacity .3s ease-in-out;
  523. transition:opacity .3s ease-in-out;
  524. -moz-box-sizing:content-box;
  525. box-sizing:content-box;
  526. padding:8px;
  527. }
  528. #tumblr_controls:hover, .tmblr-iframe:hover {
  529. opacity:.7!important;
  530. }
  531. #tumblr_lightbox, .tmblr-lightbox {
  532. background-color:rgba({RGBcolor:background},98)!important;
  533. }
  534. #vignette, .vignette {
  535. opacity:0;
  536. }
  537. #tumblr_lightbox img, .lightbox-image {
  538. box-shadow:none!important;
  539. border-radius:0!important;
  540. max-width:none;
  541. }
  542. #tumblr_lightbox_caption, .lightbox-caption {
  543. visibility:hidden;
  544. }
  545. #theme {
  546. position:fixed;
  547. display:inline-block;
  548. bottom:10px;
  549. right:34px;
  550. z-index:999;
  551. padding:5px;
  552. line-height:1em;
  553. background-color:{color:background};
  554. color:{color:accent};
  555. }
  556.  
  557. </style>
  558. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  559. </head>
  560. <body>
  561. <div id="main">
  562. <aside>
  563. <section class="sidebar">
  564. <div class="title"><a id="title" href="/">{Title}</a></div>
  565. {block:ifShowDescription}<div class="desc light">{Description}</div>{/block:ifShowDescription}
  566. <nav><!-- navigation -->
  567. {block:ifHomeLink}<li><a href="/">{text:home link}</a></li>{/block:ifHomeLink}
  568. {block:ifArchiveLink}<li><a href="/archive">{text:archive link}</a></li>{/block:ifArchiveLink}
  569. {block:ifAskLink}<li><a href="/ask">{text:ask link}</a></li>{/block:ifAskLink}
  570. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li> {/block:Pages}{/block:HasPages}
  571. {block:ifLink1}<li><a href="{text:link 1 url}">{text:link 1}</a></li>{/block:ifLink1}
  572. {block:ifLink2}<li><a href="{text:link 2 url}">{text:link 2}</a></li>{/block:ifLink2}
  573. {block:ifLink3}<li><a href="{text:link 3 url}">{text:link 3}</a></li>{/block:ifLink3}
  574. {block:ifLink4}<li><a href="{text:link 4 url}">{text:link 4}</a></li>{/block:ifLink4}
  575. {block:ifLink5}<li><a href="{text:link 5 url}">{text:link 5}</a></li>{/block:ifLink5}
  576. {block:ifLink6}<li><a href="{text:link 6 url}">{text:link 6}</a></li>{/block:ifLink6}
  577. </nav>
  578. </section>
  579. </aside>
  580. <div id="content"><!-- posts -->
  581. {block:Posts}
  582. <article class="entry{block:IndexPage}{block:Photo} ph{/block:Photo}{block:Photoset} ph{/block:Photoset}{block:Video} ph{/block:Video}{/block:IndexPage}">
  583. {block:IndexPage}
  584. {block:Date}
  585. <section class="info light">
  586. <a href="{Permalink}" class="permalink"></a>
  587. </section>
  588. {/block:Date}
  589. <div class="clip"></div>
  590. {/block:IndexPage}
  591. <section class="post">
  592. {block:Answer}<!-- answer --><div class="question text"><span>{Question}</span><i class="sender light">{lang:Asked by Asker 2}</i></div><div class="answer text">{Answer}</div>{/block:Answer}
  593. {block:Audio}<!-- audio --><div class="audio">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div>{/block:Audio}
  594. {block:Chat}<!-- chat -->{block:Title}<h1 class="title">{Title}</h1>{/block:Title}<div class="chat text"><ul>{block:Lines}<li class="line">{block:Label}<span class="label light">{Label}&nbsp; </span>{/block:Label}{Line}</li>{/block:Lines}</ul></div>{/block:Chat}
  595. {block:Link}<!-- link --><h1 class="title"><a href="{URL}">{Name}</a></h1>{block:Description}<div class="text">{Description}</div>{/block:Description}{/block:Link}
  596. {block:Photo}<!-- photo --><div class="media">{LinkOpenTag}<img src="{PhotoURL-HighRes}"/>{LinkCloseTag}</div>{/block:Photo}
  597. {block:Photoset}<!-- photoset --><div class="media photoset">{block:IndexPage}{block:Photos}<img src="{PhotoURL-HighRes}"/><!--{/block:Photos}-->{/block:IndexPage}{block:PermalinkPage}<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>{/block:PermalinkPage}</div>{/block:Photoset}
  598. {block:Quote}<!-- quote --><div class="quote text">{Quote}</div>{block:Source}<div class="source text light">{Source}</div>{/block:Source}{/block:Quote}
  599. {block:Text}<!-- text -->{block:Title}<h1 class="title">{Title}</h1>{/block:Title}<div class="text">{Body}</div>{/block:Text}
  600. {block:Video}<!-- video --><div class="media video">{Video-500}</div>
  601. {/block:Video}
  602. {block:Caption}<!-- caption --><div class="caption text{block:IndexPage} {select:captions}{/block:IndexPage}">{Caption}</div>{/block:Caption}
  603. </section>
  604. {block:PermalinkPage}{block:Date}
  605. <section class="perma light">{TimeAgo} with {NoteCountWithLabel}{block:RebloggedFrom}<div class="rb light"> via <a href="{ReblogParentURL}" class="rf">{ReblogParentName}</a>{block:ContentSource} (<a href="{ReblogRootURL}" class="src">source</a>){/block:ContentSource}</div>{/block:RebloggedFrom}
  606. {block:HasTags}
  607. <div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a><i class="comma"> / </i>{/block:Tags}</div>
  608. {/block:HasTags}
  609. </section>
  610. {/block:Date}
  611. {/block:PermalinkPage}
  612. </article>
  613. {block:PostNotes}<!-- post notes -->
  614. <article id="notes" class="entry">
  615. <section class="post">
  616. <div class="light text">{PostNotes}</div>
  617. </section>
  618. </article>
  619. {/block:PostNotes}
  620. {/block:Posts}
  621. <!-- {block:ContentSource}{SourceURL} {/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL} {ReblogParentURL}{/block:RebloggedFrom} -->
  622. {block:Pagination}<!-- pagination -->
  623. <footer class="entry light">
  624. <div class="pagination">
  625. {block:NextPage}<a class="next title" href="{NextPage}">&ctdot;</a>{/block:NextPage}
  626. {block:PreviousPage}<!--{block:NextPage}<br/>{/block:NextPage}<a class="back" href="{PreviousPage}">{lang:Back}</a>-->{/block:PreviousPage}
  627. </div>
  628. </footer>
  629. {/block:Pagination}
  630. </div><!-- end #content -->
  631. </div><!-- end #main -->
  632. <a href="http://shythemes.tumblr.com" target="_blank" id="theme">thm</a>
  633. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  634. {block:IndexPage}
  635. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  636. {block:ifInfiniteScroll}
  637. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  638. {/block:ifInfiniteScroll}
  639. {/block:IndexPage}
  640. {block:PermalinkPage}
  641. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  642. {/block:PermalinkPage}
  643. <script>
  644. $(document).ready(function(){
  645. {block:PermalinkPage}
  646. $('.photo-slideshow').pxuPhotoset({
  647. lightbox: true,
  648. rounded: false,
  649. gutter: '4px',
  650. photoset: '.photo-slideshow',
  651. photoWrap: '.photo-data',
  652. photo: '.pxu-photo'
  653. });
  654. {/block:PermalinkPage}
  655. {block:IndexPage}
  656. {block:ifInfiniteScroll}
  657. $('#content').infinitescroll({
  658. itemSelector: '.entry',
  659. navSelector: '.pagination',
  660. nextSelector: '.next',
  661. loadingImg: '',
  662. loadingText: '<em></em>',
  663. bufferPx: 2000
  664. },
  665. function( newElements ) {
  666. var $newElems = $( newElements );
  667. $newElems.find('.photo-slideshow').pxuPhotoset({
  668. lightbox: true,
  669. rounded: false,
  670. gutter: '4px',
  671. photoset: '.photo-slideshow',
  672. photoWrap: '.photo-data',
  673. photo: '.pxu-photo'
  674. });
  675. });
  676. {/block:ifInfiniteScroll}
  677. {/block:IndexPage}
  678. });
  679. </script>
  680. </body>
  681. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement