API tools faq
paste
Advertisement
kthms

lucent theme

kthms
Feb 7th, 2015
23,064
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.35 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. lucent @ shythemes
  10.  
  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="image:sidebar" content=""/>
  24. <meta name="color:background" content="#ffffff"/>
  25. <meta name="color:post border" content="#f0f0f0"/>
  26. <meta name="color:post bg" content="#fafafa"/>
  27. <meta name="color:text" content="#8f8f8f"/>
  28. <meta name="color:bold" content="#4f4f4f"/>
  29. <meta name="color:link hover" content="#4f4f4f"/>
  30. <meta name="color:blockquote border" content="#e9e9e9"/>
  31. <meta name="color:post info" content="#b9b9b9"/>
  32. <meta name="color:scrollbar" content="#dcdcdc"/>
  33. <meta name="select:post width" content="300" title="300"/>
  34. <meta name="select:post width" content="350" title="350"/>
  35. <meta name="select:post width" content="400" title="400"/>
  36. <meta name="select:post width" content="450" title="450"/>
  37. <meta name="select:post width" content="494" title="500"/>
  38. <meta name="select:layout" content="header" title="header"/>
  39. <meta name="select:layout" content="left" title="left sidebar"/>
  40. <meta name="select:layout" content="right" title="right sidebar"/>
  41. <meta name="select:post info" content="side" title="side"/>
  42. <meta name="select:post info" content="" title="below"/>
  43. <meta name="if:search bar" content="1"/>
  44. <meta name="if:show description" content="1"/>
  45. <meta name="if:show captions" content="1"/>
  46. <meta name="if:show tags" content="1"/>
  47. <meta name="if:lowercase" content="1"/>
  48. <meta name="if:underline links" content="0"/>
  49. <meta name="if:tile background" content="1"/>
  50. <meta name="if:infinite scroll" content="0"/>
  51. <meta name="text:home link" content="home"/>
  52. <meta name="text:archive link" content="archive"/>
  53. <meta name="text:ask link" content="ask"/>
  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.  
  67. <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic|Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72. /* basic styles */
  73.  
  74. ::-webkit-scrollbar {
  75. width:3px;
  76. height:3px;
  77. }
  78. ::-webkit-scrollbar,
  79. ::-webkit-scrollbar-track {
  80. background-color:inherit;
  81. }
  82. ::-webkit-scrollbar-thumb {
  83. background-color:{color:scrollbar};
  84. }
  85. body {
  86. margin:0px;
  87. font-family:'open sans', 'trebuchet ms', arial, sans-serif;
  88. font-size:9px;
  89. line-height:1.6em;
  90. word-wrap:break-word;
  91. -moz-font-smoothing:subpixel-antialiased;
  92. -webkit-font-smoothing:subpixel-antialiased;
  93. font-smoothing:subpixel-antialiased;
  94. color:{color:text};
  95. background-color:{color:background};
  96. background-attachment:fixed;
  97. {block:ifBackgroundImage}background-image:url('{image:background}');{/block:ifBackgroundImage}
  98. {block:ifNotTileBackground}background-size:cover;{/block:ifNotTileBackground}
  99. {block:ifLowercase}text-transform:lowercase;{/block:ifLowercase}
  100. }
  101. blockquote, ol, ul, p, pre {
  102. margin-top:.4em;
  103. margin-bottom:.4em;
  104. }
  105. blockquote {
  106. margin-left:0;
  107. margin-right:0;
  108. padding-left:1.2em;
  109. border-left:1px solid {color:blockquote border};
  110. }
  111. pre {
  112. white-space:normal;
  113. font-family:consolas, monospace;
  114. }
  115. img {
  116. border:0px;
  117. }
  118. a {
  119. color:inherit;
  120. text-decoration:none;
  121. -webkit-transition:all .25s linear;
  122. transition:all .25s linear;
  123. }
  124. a:hover {
  125. color:{color:text};
  126. }
  127. ol, ul {
  128. padding-left:2.5em;
  129. }
  130. li ol, li ul {
  131. margin:0;
  132. }
  133. small, sub {
  134. font-size:1em;
  135. vertical-align:baseline;
  136. }
  137. b, strong {
  138. font-weight:normal;
  139. color:{color:bold};
  140. }
  141. h1, h2, h3, h4, h5, h6 {
  142. font-size:1em;
  143. font-weight:normal;
  144. }
  145.  
  146. /* accent font */
  147.  
  148. .accent {
  149. font-size:8px;
  150. font-family:calibri, 'source sans pro', 'trebuchet ms', sans-serif;
  151. line-height:1.6em;
  152. text-transform:uppercase;
  153. letter-spacing:1px;
  154. }
  155.  
  156. /* container */
  157.  
  158. #main {
  159. margin:100px auto;
  160. width:{select:post width}px;
  161. }
  162.  
  163. /* sidebar/header */
  164.  
  165. aside {
  166. padding:20px;
  167. text-align:center;
  168. position:relative;
  169. margin-bottom:100px;
  170. background-color:{color:post bg};
  171. border-top:1px solid {color:post border};
  172. }
  173. .left aside,
  174. .right aside {
  175. position:fixed;
  176. width:80px;
  177. border-top:0;
  178. }
  179. .left aside {
  180. border-left:1px solid {color:post border};
  181. margin-left:-220px;
  182. }
  183. .right aside {
  184. border-right:1px solid {color:post border};
  185. margin-left:calc({select:post width}px + 100px);
  186. }
  187. aside .im {
  188. margin:-10px -10px 0;
  189. width:100px;
  190. height:100px;
  191. display:block;
  192. background-position:center;
  193. background-size:cover;
  194. background-image:url('{image:sidebar}');
  195. }
  196. .header .im {
  197. display:none;
  198. }
  199. aside .title {
  200. font-size:1.2em;
  201. font-weight:300;
  202. line-height:2em;
  203. margin:-.5em 0;
  204. letter-spacing:.25em;
  205. text-transform:uppercase;
  206. }
  207. .left .title,
  208. .right .title {
  209. {block:ifSidebarImage}display:none;{/block:ifSidebarImage}
  210. }
  211. .header .title {
  212. font-size:1.8em;
  213. }
  214. aside ol {
  215. list-style-type:none;
  216. padding-left:0;
  217. margin:20px 0 0;
  218. color:{color:post info};
  219. }
  220. .header ol {
  221. margin-top:10px;
  222. }
  223. aside ol li {
  224. display:inline;
  225. margin:0 1px;
  226. line-height:1.8em;
  227. }
  228. aside .desc {
  229. margin-top:18px;
  230. }
  231. .header .desc {
  232. margin-top:8px;
  233. }
  234. aside .search {
  235. position:absolute;
  236. top:100%;
  237. margin-top:2px;
  238. left:0;
  239. right:0;
  240. }
  241. .header .search {
  242. display:none;
  243. }
  244. .left .search {
  245. margin-left:-1px;
  246. }
  247. aside .search .query {
  248. width:106px;
  249. border:0;
  250. outline:0;
  251. padding:7px;
  252. color:{color:post info};
  253. background-color:{color:post bg};
  254. }
  255. ::-webkit-input-placeholder {color:{color:post info};}
  256. :-moz-placeholder {color:{color:post info};}
  257. ::-moz-placeholder {color:{color:post info};}
  258. :-ms-input-placeholder {color:{color:post info};}
  259. .left .search .query {
  260. text-align:left;
  261. border-left:1px solid {color:post border};
  262. }
  263. .right .search .query {
  264. text-align:right;
  265. border-right:1px solid {color:post border};
  266. }
  267.  
  268. /* posts */
  269.  
  270. .entry {
  271. margin:0 -1% 100px;
  272. padding:0 1%;
  273. position:relative;
  274. }
  275. .post {
  276. position:relative;
  277. }
  278. .post a:hover {
  279. color:{color:link hover};
  280. }
  281. .post img {
  282. max-width:100%;
  283. height:auto;
  284. }
  285.  
  286. /* info */
  287.  
  288. .info {
  289. padding:20px;
  290. border-top:1px solid {color:post border};
  291. background-color:{color:post bg};
  292. -webkit-transition:opacity .25s linear;
  293. transition:opacity .25s linear;
  294. }
  295. {block:IndexPage}
  296. .side {
  297. position:absolute;
  298. top:0;
  299. overflow:auto;
  300. opacity:0;
  301. max-height:100%;
  302. -moz-box-sizing:border-box;
  303. box-sizing:border-box;
  304. }
  305. .side {
  306. padding:15px;
  307. width:50%;
  308. max-width:200px;
  309. }
  310. .left .side {
  311. left:100%;
  312. border-top:0;
  313. border-right:1px solid {color:post border};
  314. }
  315. .header .side,
  316. .right .side {
  317. right:100%;
  318. border-top:0;
  319. border-left:1px solid {color:post border};
  320. }
  321. .side .caption blockquote {
  322. border:0;
  323. padding:0;
  324. }
  325. {/block:IndexPage}
  326. .entry:hover .info {
  327. opacity:1;
  328. }
  329. .info::-webkit-scrollbar {
  330. width:2px;
  331. }
  332. .info .caption {
  333. padding:0;
  334. margin:10px 0 0;
  335. }
  336. .info .t.caption {
  337. margin-bottom:10px;
  338. }
  339.  
  340. /* post info */
  341.  
  342. .date, .tags {
  343. color:{color:post info};
  344. }
  345. .tags {
  346. {block:IndexPage}{block:ifNotShowTags}display:none;{/block:ifNotShowTags}{/block:IndexPage}
  347. }
  348. .comma:last-child {
  349. display:none;
  350. }
  351.  
  352. /* post titles */
  353.  
  354. .post > h1,
  355. .quote,
  356. .question {
  357. margin:0;
  358. padding:20px 20px 0;
  359. line-height:1.5em;
  360. background-color:{color:post bg};
  361. }
  362. .post > h1 {
  363. font-size:1.15em;
  364. font-weight:300;
  365. text-transform:uppercase;
  366. letter-spacing:1px;
  367. }
  368. .quote {
  369. font-size:1.25em;
  370. font-weight:300;
  371. line-height:1.5em;
  372. }
  373. .quote * {
  374. margin:0;
  375. }
  376. .question i {
  377. font-style:inherit;
  378. display:block;
  379. text-align:right;
  380. margin-top:5px;
  381. color:{color:post info};
  382. }
  383.  
  384. /* text and captions */
  385.  
  386. .text {
  387. padding:20px;
  388. background-color:{color:post bg};
  389. }
  390. .text a {
  391. {block:ifUnderlineLinks}text-decoration:underline;{/block:ifUnderlineLinks}
  392. }
  393. .text a:hover {
  394. color:{color:link hover};
  395. }
  396. .text img {
  397. max-width:100%;
  398. height:auto;
  399. }
  400. .text *:first-child {
  401. margin-top:0px;
  402. }
  403. .text *:last-child {
  404. margin-bottom:0px;
  405. }
  406. .caption {
  407. {block:IndexPage}{block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}{/block:IndexPage}
  408. }
  409. .source {
  410. text-align:right;
  411. }
  412.  
  413. /* photos and videos */
  414.  
  415. .media img,
  416. .media .photoset {
  417. display:block;
  418. max-width:100%;
  419. margin:0px auto;
  420. }
  421. .video iframe,
  422. .tumblr_video_container {
  423. display:block;
  424. max-width:100%;
  425. max-height:{select:post width}px;
  426. }
  427. .video #youtube_iframe {
  428. max-height:calc({select:post width}px * 0.667);
  429. }
  430. .video .instagram-media {
  431. max-height:none!important;
  432. box-shadow:none!important;
  433. }
  434.  
  435. /* chat posts */
  436.  
  437. .chat {
  438. color:{color:post info};
  439. }
  440. .chat .label {
  441. padding-right:5px;
  442. }
  443.  
  444. /* audio posts */
  445.  
  446. .audiowrap {
  447. position:relative;
  448. height:73px;
  449. overflow:hidden;
  450. line-height:0;
  451. margin-bottom:-1px;
  452. border-bottom:1px solid {color:post border};
  453. background-color:{color:post bg};
  454. color:{color:post info};
  455. }
  456. .albumart {
  457. position:relative;
  458. display:inline-block;
  459. width:73px;
  460. height:73px;
  461. border-right:1px solid {color:post border};
  462. background-size:cover;
  463. }
  464. .audio {
  465. position:absolute;
  466. display:inline-block;
  467. left:0px;
  468. top:0px;
  469. right:0px;
  470. bottom:0px;
  471. text-align:left;
  472. }
  473. .audio .player {
  474. width:27px;
  475. height:27px;
  476. left:23px;
  477. top:23px;
  478. overflow:hidden;
  479. position:absolute;
  480. }
  481. .audio .track {
  482. position:absolute;
  483. top:23px;
  484. left:96px;
  485. right:23px;
  486. bottom:23px;
  487. overflow:hidden;
  488. line-height:14px!important;
  489. }
  490. .audio .track i {
  491. font-style:normal;
  492. display:block;
  493. position:relative;
  494. width:100%;
  495. height:14px;
  496. overflow:hidden;
  497. }
  498.  
  499. /* post notes */
  500.  
  501. .notes {
  502. list-style-type:decimal;
  503. padding:0 0 0 3.5em;
  504. margin:0;
  505. color:{color:post info};
  506. }
  507. .notes a {
  508. border:0;
  509. text-decoration:none;
  510. color:inherit;
  511. }
  512. .notes img {
  513. display:none;
  514. }
  515. .notes li blockquote {
  516. margin-bottom:.5em!important;
  517. }
  518.  
  519. /* pagination */
  520.  
  521. .pagination {
  522. margin:0 0 100px 0;
  523. padding:4%;
  524. text-align:center;
  525. letter-spacing:0;
  526. color:{color:post info};
  527. background-color:{color:post bg};
  528. border-bottom:1px solid {color:post border};
  529. {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
  530. }
  531. .pagination a {
  532. color:{color:post info};
  533. margin:0 .5em;
  534. }
  535. .pagination .current {
  536. color:{color:text};
  537. }
  538. .pagination .next, .pagination .back { display:none }
  539.  
  540. #infscr-loading {
  541. display:none!important;
  542. }
  543. #tumblr_controls, .tmblr-iframe {
  544. position:fixed!important;
  545. opacity:.67!important;
  546. -webkit-filter:invert(100%);
  547. -webkit-backface-visibility:hidden;
  548. -moz-box-sizing:content-box;
  549. box-sizing:content-box;
  550. padding:4px;
  551. }
  552. #tumblr_lightbox, .tmblr-lightbox {
  553. background-color:rgba({RGBcolor:background},.98)!important;
  554. }
  555. #vignette, .vignette {
  556. opacity:0;
  557. }
  558. #tumblr_lightbox img, .lightbox-image {
  559. box-shadow:none!important;
  560. border-radius:0!important;
  561. max-width:none;
  562. }
  563. #tumblr_lightbox_caption, .lightbox-caption {
  564. visibility:hidden;
  565. }
  566. #theme {
  567. position:fixed;
  568. bottom:10px;
  569. right:10px;
  570. display:inline-block;
  571. padding:5px 4px 5px 5px;
  572. background-color:{color:post bg};
  573. color:{color:post info};
  574. }
  575. </style>
  576. </head>
  577. <body class="{select:layout}">
  578. <div id="main">
  579. <aside>
  580. {block:ifSidebarImage}<a href="/" class="im"></a>{/block:ifSidebarImage}
  581. <div class="title"><a href="/">{Title}</a></div>
  582. <nav><!-- n a v i g a t i o n --><ol class="accent">{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>
  583. {block:ifShowDescription}<div class="desc">{Description}</div>{/block:ifShowDescription}
  584. {block:ifSearchBar}<form action="/search" method="get" class="search"><input type="text" name="q" value="{SearchQuery}" class="accent query" placeholder="Search tags"/></form>{/block:ifSearchBar}
  585. </aside>
  586. <div id="content"><!-- p o s t s -->
  587. {block:Posts}
  588. <article class="entry">
  589. <div class="post">
  590. {block:Answer}<!-- a n s w e r --><div class="ask"><div class="question">{Question}<i class="accent">asked by {Asker}</i></div></div><div class="answer text">{Answer}</div>{/block:Answer}{block:Audio}<!-- a u d i o --><div class="audiowrap"><div class="albumart" style="{block:AlbumArt}background-image:url({AlbumArtURL});{/block:AlbumArt}"></div><div class="audio">{block:AudioPlayer}<div class="player">{AudioPlayerGrey}</div>{/block:AudioPlayer}<div class="track accent">{block:TrackName}<i>Track: {TrackName}</i>{/block:TrackName}{block:Artist}<i>Artist: {Artist}</i>{/block:Artist}</div></div></div>{block:Caption}<!-- c a p t i o n --><div class="caption text">{Caption}</div>{/block:Caption}{/block:Audio}{block:Chat}<!-- c h a t -->{block:Title}<h1>{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}<!-- l i n k --><h1><a href="{URL}">{Name}</a></h1>{block:Description}<div class="text">{Description}</div>{/block:Description}{/block:Link}{block:Photo}<!-- p h o t o --><div class="media">{LinkOpenTag}<img src="{PhotoURL-HighRes}"/>{LinkCloseTag}</div>{/block:Photo}{block:Photoset}<!-- p h o t o s e t --><div class="media">{Photoset}</div>{/block:Photoset}{block:Quote}<!-- q u o t e --><div class="quote">{Quote}</div>{block:Source}<div class="source text">{Source}</div>{/block:Source}{/block:Quote}{block:Text}<!-- t e x t -->{block:Title}<h1>{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}
  591. </div>
  592. {block:Date}<div class="info {select:post info} {block:Photo}p{/block:Photo}{block:Photoset}p{/block:Photoset}"><!-- p o s t i n f o --><div class="date accent"><a href="{Permalink}" class="permalink">{DayOfWeek}, {Month} {DayOfMonth}</a>{block:IndexPage}{block:NoteCount}<br/><a href="{Permalink}" class="permalink">{NoteCountWithLabel}</a>{/block:NoteCount} / <a href="{ReblogURL}">Reblog</a>{/block:IndexPage}{block:PermalinkPage}{block:RebloggedFrom}<br/>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} &ndash; by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>
  593. {block:Caption}<!-- c a p t i o n --><div class="caption text {block:HasTags}{block:ifShowTags}t {/block:ifShowTags}{block:PermalinkPage}t{/block:PermalinkPage}{/block:HasTags}"{block:Audio} style="display:none"{/block:Audio}>{Caption}</div>{/block:Caption}
  594. {block:HasTags}<!-- t a g s --><div class="tags accent">tagged {block:Tags}<a href="{TagURL}">{Tag}</a><i class="comma">,</i> {/block:Tags}</div>{/block:HasTags}</div>{/block:Date}
  595. </article>
  596. {block:PostNotes}<!-- p o s t n o t e s -->
  597. <article id="notes" class="entry"><div class="post"><h1>{NoteCountWithLabel}</h1><div class="text accent">{PostNotes}</div></div></article>{/block:PostNotes}
  598. {/block:Posts}
  599. <!-- {block:ContentSource}{SourceURL} {/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL} {ReblogParentURL}{/block:RebloggedFrom} -->
  600. </div><!-- end #content -->
  601. {block:Pagination}<!-- p a g i n a t i o n --><div class="pagination accent">{block:PreviousPage}<a class="back" href="{PreviousPage}">{lang:Back}</a>{/block:PreviousPage}{block:JumpPagination length="9"}{block:CurrentPage}<a class="current">{PageNumber}</a>{/block:CurrentPage}{block:JumpPage}<a class="jump" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a class="next" href="{NextPage}">{lang:Next}</a>{/block:NextPage}</div>{/block:Pagination}
  602. </div><!-- end #main -->
  603. <a href="http://shythemes.tumblr.com" target="_blank" id="theme" class="accent">thm</a>
  604. {block:IndexPage}
  605. {block:ifInfiniteScroll}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  606. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script><script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  607. <script>
  608. $(document).ready(function(){
  609. $('#content').infinitescroll({
  610. itemSelector : ".entry",
  611. navSelector : ".pagination",
  612. nextSelector : ".next",
  613. loadingImg : "",
  614. loadingText : "<em></em>",
  615. bufferPx: 2000
  616. },
  617. function(){
  618. resizeVideos();
  619. });
  620. });
  621. </script>{/block:ifInfiniteScroll}
  622. {/block:IndexPage}
  623. </body>
  624. </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!