Advertisement
kthms

cerulean theme

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