Advertisement
str-wrs

Typhon

Nov 26th, 2014
10,626
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.35 KB | None | 0 0
  1. <!--
  2.  
  3. THEME: TYPHON
  4. by acuite
  5.  
  6. - don't steal this pls
  7. - enjoy, ilu (ノ◕ヮ◕)ノ*:・゚✧
  8. - @acuite for more themes
  9.  
  10. -->
  11.  
  12. <html lang="en">
  13. <head>
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <meta name="if:Title" content="1"/>
  21. <meta name="if:Paginate" content="1"/>
  22. <meta name="if:Caption" content="1"/>
  23. <meta name="if:Helvetica" content="0"/>
  24.  
  25. <meta name="color:Background" content="#fff"/>
  26. <meta name="color:Border" content="#eee"/>
  27. <meta name="color:Accent" content="#fafafa"/>
  28. <meta name="color:Title" content="#222"/>
  29. <meta name="color:Link" content="#999"/>
  30. <meta name="color:Text" content="#555"/>
  31.  
  32. <meta name="select:Sidebar Align" content="left" title="Left">
  33. <meta name="select:Sidebar Align" content="center" title="Center">
  34. <meta name="select:Sidebar Align" content="right" title="Right">
  35. <meta name="select:Sidebar Align" content="justify" title="Justify">
  36. <meta name="select:Perma Align" content="left" title="Left">
  37. <meta name="select:Perma Align" content="center" title="Center">
  38. <meta name="select:Perma Align" content="right" title="Right">
  39. <meta name="select:Tags" content="" title="Show">
  40. <meta name="select:Tags" content="hide" title="Hide">
  41. <meta name="select:Tags" content="hover" title="Hover">
  42.  
  43. <meta name="text:Post" content="300"/>
  44. <meta name="text:Sidebar" content="130"/>
  45. <meta name="text:Margin" content="100"/>
  46.  
  47. <meta name="text:Link 1" content="/"/>
  48. <meta name="text:Link 1 Title" content="about"/>
  49. <meta name="text:Link 2" content="/" />
  50. <meta name="text:Link 2 Title" content="tags"/>
  51. <meta name="text:Link 3" content="/" />
  52. <meta name="text:Link 3 Title" content="self"/>
  53. <meta name="text:Link 4" content="/" />
  54. <meta name="text:Link 4 Title" content="blogroll"/>
  55.  
  56. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  57. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  58. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,600italic,700italic|Source+Code+Pro:400,600,700' rel='stylesheet' type='text/css'>
  59. <style type="text/css">
  60.  
  61. ::-webkit-scrollbar-thumb {background:{color:Border};}
  62. ::-webkit-scrollbar {width:5px;height:5px;background:{color:Background};}
  63.  
  64. .tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop, .tmblr-iframe, #tumblr_controls{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}
  65.  
  66. /* General */
  67.  
  68. body {
  69. margin:0px;
  70. background:{color:Background};
  71. font-family:'Source Sans Pro',Helvetica, sans-serif;font-size:10px;
  72. {block:ifHelvetica}font-family:Helvetica;font-size:9px;{/block:ifHelvetica}
  73. color:{color:Text};
  74. font-smooth:always;
  75. -webkit-font-smoothing:antialiased;
  76. -moz-osx-font-smoothing: grayscale;
  77. }
  78.  
  79. a:link, a:active, a:visited {text-decoration:none;}
  80. a,.playh,.tags{
  81. transition:0.5s ease;
  82. -o-transition:0.5s ease;
  83. -moz-transition:0.5s ease;
  84. -webkit-transition:0.5s ease;
  85. }
  86.  
  87. /* Containers */
  88.  
  89. .c{position:fixed;bottom:30px;right:30px;}
  90. .pag a{margin:0px 10px;}
  91. .pag {position:relative;text-align:center;}
  92. {block:ifnotPaginate}
  93. .pag,#infscr-loading {display:none!important;}
  94. {/block:ifnotPaginate}
  95.  
  96. #center {
  97. position:relative;
  98. width:{text:Post}px;
  99. margin:{text:Margin}px auto;
  100. }
  101.  
  102. .entry img {max-width:100%;height:auto;}
  103. .entry {{block:IndexPage}margin:{text:Margin}px 0px;{/block:IndexPage}}
  104.  
  105. /* Headers */
  106.  
  107. .sidebar {
  108. position:fixed;
  109. width:{text:Sidebar}px;
  110. margin-left:calc(-{text:Sidebar}px + -{text:Margin}px);
  111. text-align:{select:Sidebar Align};
  112. }
  113.  
  114. .desc {padding:15px 0px;letter-spacing:0.3px;}
  115. .links a, .lh{margin:0px 2px;font-weight:400;font-size:8.5px;}
  116. .links {margin-top:5px;text-transform:lowercase;}
  117. .lb {display:none;margin-top:5px;}
  118. .lb a{margin:0px;}
  119. .lb a:after {content:'·';margin-left:6px;}
  120. .lb a:last-of-type:after {display:none;}
  121.  
  122. /* Titles */
  123.  
  124. h1 {
  125. margin:0px;
  126. font-weight:400;
  127. font-size:10px;
  128. letter-spacing:1px;
  129. text-transform:uppercase;
  130. }
  131.  
  132. h2 {
  133. margin:0px 0px 10px;
  134. font-weight:600;
  135. font-size:9px;
  136. letter-spacing:1.5px;
  137. text-transform:uppercase;
  138. }
  139.  
  140. .qut {
  141. padding:15px;
  142. font-size:10px;
  143. font-style:italic;
  144. letter-spacing:0.5px;
  145. }
  146.  
  147. .src {margin:0px 0px 10px;}
  148.  
  149. /* Permalinks */
  150.  
  151. .tags {margin-top:5px;text-transform:lowercase;letter-spacing:0px;font-weight:400;}
  152. .tags a {margin:0px;}
  153. .tags a:after {content:'·';color:{color:Text};margin-left:5px;}
  154. .tags a:last-of-type:after{display:none;}
  155. .entry:hover .tags {opacity:1;}
  156. .hide {display:none;}
  157. .hover {opacity:0;}
  158. .p {text-align:{select:Perma Align};margin-top:10px;}
  159.  
  160. /* Chat */
  161.  
  162. .chat {border:1px solid {color:Border};}
  163. .lines:first-child{border-top:none;}
  164. .lines.odd{background:{color:Accent};}
  165. .lines{padding:8px 10px;border-top:1px solid {color:Border};}
  166. .lines b{display:block;}
  167.  
  168. /* Audio */
  169.  
  170. .play {
  171. float:left;
  172. padding:10px;
  173. background:#e4e4e4;
  174. margin-right:15px;
  175. height:27px;
  176. }
  177.  
  178. .audio {height:47px;padding:8px;}
  179. .au {padding:5px 0px;}
  180. .au span{display:block;margin:5px 0px;}
  181. .tumblr_audio_player {width:27px;height:27px;overflow:hidden;}
  182.  
  183. /* Asks */
  184.  
  185. .ask h2 {margin:0px 0px 5px}
  186. .ask {padding:10px;font-weight:400;}
  187.  
  188. /* Text */
  189.  
  190. pre, em, small, sub, sup, big {
  191. font-size:10px;
  192. {block:ifHelvetica}font-size:9px;{block:ifHelvetica}
  193. }
  194.  
  195. strong,b {font-weight:600;}
  196. p,blockquote {margin:10px;}
  197. ul {list-style-type:square;}
  198. blockquote p{margin:10px 0px;}
  199. blockquote p:first-child{margin:0px 0px 10px;}
  200. blockquote p:last-child{margin:10px 0px 0px;}
  201. blockquote p:only-child{margin:0px;}
  202. blockquote{padding:0px 10px;border-left:1px solid {color:Border};}
  203. pre {
  204. font-family:'Source Sans Pro',Helvetica, sans-serif;
  205. {block:ifHelvetica}font-family:Helvetica;{block:ifHelvetica}
  206. white-space:pre-wrap;
  207. white-space:-moz-pre-wrap;
  208. white-space:-pre-wrap;
  209. white-space:-o-pre-wrap;
  210. word-wrap:break-word;
  211. }
  212.  
  213. /* Postnotes */
  214.  
  215. #pnotes img {display:none;}
  216. #pnotes ol {margin:0;padding:0;}
  217. #pnotes li {list-style-type:none;margin:5px 0px;}
  218. #pnotes {font-size:8.5px;letter-spacing:0.5px;}
  219. .perma a,.perma span{margin-right:5px;}
  220. .perma {
  221. padding:10px 0px;
  222. margin:10px 0px;
  223. font-size:8px;
  224. text-transform:lowercase;
  225. border-top:1px solid {color:Border};
  226. border-bottom:1px solid {color:Border};
  227. }
  228.  
  229. /* Captions */
  230.  
  231. .cap {margin:10px 0px;}
  232. .cap iframe{display:block;max-width:100%;overflow:hidden;}
  233.  
  234. /* Video */
  235.  
  236. .video {overflow:hidden;}
  237. .vine-embed {margin-bottom:-3px;}
  238. .instagram-media {border-radius:0px!important;box-shadow:none!important;}
  239.  
  240. /* Photosets */
  241.  
  242. #tumblr_lightbox,.tmblr-lightbox {
  243. background:rgba({RGBcolor:Background},0.99)!important;
  244. }
  245.  
  246. #vignette,#tumblr_lightbox_caption,.vignette,.lightbox-caption{
  247. opacity:0!important;
  248. }
  249.  
  250. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image,
  251. #tumblr_lightbox_right_image, .lightbox-image {
  252. box-shadow:none!important;
  253. border-radius:0px!important;
  254. {block:ifRoundEdges}border-radius:4px!important;{/block:ifRoundEdges}
  255. }
  256.  
  257. /* Tooltips */
  258.  
  259. #s-m-t-tooltip{max-width:300px;margin:15px;z-index:9999;padding:5px;}
  260.  
  261. /* Common Styles */
  262.  
  263. .lines b,.tn,.src,.p {font-weight:600;}
  264. .lines b,.tn,.src,.p,.pag,.c,a.tumblr_blog {
  265. font-size:8px;
  266. letter-spacing:1px;
  267. text-transform:uppercase;
  268. }
  269.  
  270. .c {font-size:9px;font-weight:600;}
  271. .cap,#s-m-t-tooltip,.ask,.qut,.audio {
  272. background:{color:Accent};
  273. border:1px solid {color:Border};
  274. }
  275.  
  276. .links,.c,h1,h2,.p,.perma,.pag {
  277. font-family:'Source Code Pro',Consolas,sans-serif;
  278. }
  279.  
  280. .ask,p,.perma,blockquote,.lines,ul,.qut,.desc{line-height:160%;}
  281. a,.perma,.links,.ask {color:{color:Link};}
  282. a:hover,.lines b,.tn{color:{color:Title};}
  283.  
  284. /* Etc */
  285.  
  286. .notes img {width:0px;}
  287. img {display:block;margin:0px;}
  288.  
  289. </style>
  290. </head>
  291. <body>
  292.  
  293. <div id="center">
  294. <div class="sidebar">
  295. {block:ifTitle}<h1>{Title}</h1>{/block:ifTitle}
  296. <div class="links">
  297. <a href="/">home</a>
  298. <a href="/ask">ask</a>
  299. <a href="#" class="lh">links</a>
  300. <div class="lb">
  301. {block:ifLink1}
  302. <a href="{text:Link 1}">{text:Link 1 Title}</a>
  303. {/block:ifLink1}{block:ifLink2}
  304. <a href="{text:Link 2}">{text:Link 2 Title}</a>
  305. {/block:ifLink2}{block:ifLink3}
  306. <a href="{text:Link 3}">{text:Link 3 Title}</a>
  307. {/block:ifLink3}{block:ifLink4}
  308. <a href="{text:Link 4}">{text:Link 4 Title}</a>
  309. {/block:ifLink4}
  310. </div>
  311. </div>
  312. {block:Description}<div class="desc">{Description}</div>{/block:Description}
  313. </div>
  314.  
  315. <div id="content">
  316. {block:Posts}
  317. <div class="entry">
  318.  
  319. {block:Text}
  320. {block:Title}<h2>{Title}</h2>{/block:Title}
  321. <div class="cap">{Body}</div>
  322. {/block:Text}
  323.  
  324. {block:Link}
  325. <a title="{URL}" href="{URL}"><h2> {Name} &rarr;</h2></a>
  326. {block:Description}<div class="cap">{Description}</div>{/block:Description}
  327. {/block:Link}
  328.  
  329. {block:Photo}
  330. <a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
  331. {block:ifCaption}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaption}
  332. {/block:Photo}
  333.  
  334. {block:Photoset}
  335. <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>
  336. {block:ifCaption}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaption}
  337. {/block:Photoset}
  338.  
  339. {block:Quote}
  340. <div class="src">{Source}</div>
  341. <div class="qut">{Quote}</div>
  342. {/block:Quote}
  343.  
  344. {block:Chat}<div class="chat">
  345. {block:Title}<h2>{Title}</h2>{/block:Title}
  346. {block:Lines}<div class="lines {Alt}"><div class="{Alt} user_{UserNumber}">
  347. {block:Label}<b>{Label}</b> {/block:Label}{Line}</div></div>{/block:Lines}
  348. </div>{/block:Chat}
  349.  
  350.  
  351. {block:Audio}
  352. <div class="audio">
  353. {block:AudioPlayer}<div class="play">{AudioPlayerGrey}</div>{/block:AudioPlayer}
  354. <div class="au">
  355. {block:TrackName}<span class="tn">{TrackName}</span>{/block:TrackName}
  356. {block:Artist}<span>by {Artist}</span>{/block:Artist}
  357. </div>
  358. </div>
  359. {/block:Audio}
  360.  
  361.  
  362. {block:Video}
  363. <div class="video">{Video-500}</div>
  364. {block:ifCaption}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaption}
  365. {/block:Video}
  366.  
  367. {block:Answer}
  368. <div class="ask"><h2>{Asker}:</h2> {Question}</div>{Answer}
  369. {/block:Answer}
  370.  
  371. {block:IndexPage}<div class="p">
  372. <a href="{Permalink}">{NoteCount}n</a>
  373. {24HourWithZero}:{Minutes}
  374. <a href="{ReblogURL}">reblog</a>
  375. {block:HasTags}<div class="tags {select:Tags}">
  376. {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
  377. </div>{/block:HasTags}
  378. </div>{/block:IndexPage}
  379.  
  380. {block:PermalinkPage}
  381. {block:Date}
  382. <div class="perma">
  383. posted {TimeAgo} on {DayofMonthWithSuffix} {Month}
  384. {block:RebloggedFrom}<br>
  385. via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  386. origin: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  387. {/block:RebloggedFrom}
  388.  
  389. {block:HasTags}<br><span>tagged:</span>
  390. {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  391. {/block:HasTags}
  392.  
  393. </div>
  394. {/block:Date}
  395. {/block:PermalinkPage}
  396.  
  397. {block:PostNotes}
  398. <div id="pnotes">{PostNotes}</div>
  399. {/block:PostNotes}
  400.  
  401. {block:ContentSource}
  402. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  403. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  404. {/block:SourceLogo}
  405. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  406. {/block:ContentSource}
  407.  
  408. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  409.  
  410. </div>
  411. {/block:Posts}
  412.  
  413. {block:ifPaginate}
  414. {block:Pagination}
  415. <div class="pag">
  416. {block:PreviousPage}
  417. <a href="{PreviousPage}"><i class="fa fa-angle-left"></i> back</a>
  418. {/block:PreviousPage}
  419.  
  420. <span class="cp">{CurrentPage} / {TotalPages}</span>
  421.  
  422. {block:NextPage}
  423. <a href="{NextPage}">next <i class="fa fa-angle-right"></i></a>
  424. {/block:NextPage}
  425. </div>
  426. {/block:Pagination}
  427. {/block:ifPaginate}
  428.  
  429. </div>
  430.  
  431. {block:ifnotPaginate}
  432. {block:Pagination}
  433. <div class="pag">
  434. {block:PreviousPage}
  435. <a href="{PreviousPage}" class="prev">back</a>
  436. {/block:PreviousPage}
  437. {block:NextPage}
  438. <a href="{NextPage}" class="next">next</a>
  439. {/block:NextPage}
  440. </div>
  441. {/block:Pagination}
  442. {/block:ifnotPaginate}
  443.  
  444. </div>
  445.  
  446. <div class="c"><a href="http://acuite.tumblr.com/">acuite</a></div>
  447.  
  448. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  449. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  450. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  451. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  452. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  453.  
  454. <script>
  455. $(document).ready(function(){
  456. $('.photo-slideshow').pxuPhotoset({
  457. lightbox: true,
  458. rounded: false,
  459. gutter: '1px',
  460. photoset: '.photo-slideshow',
  461. photoWrap: '.photo-data',
  462. photo: '.pxu-photo'
  463. });
  464. {block:ifnotPaginate}
  465. var $container = $('#content');
  466. $container.infinitescroll({
  467. itemSelector: '.entry',
  468. navSelector: '.pag',
  469. nextSelector: '.next',
  470. loadingImg: ' ',
  471. loadingText: ' ',
  472. donetext: 'No more posts' ,
  473. bufferPx: 2000
  474. },
  475. function( newElements ) {
  476. var $newElems = $( newElements );
  477. $newElems.find('.photo-slideshow').pxuPhotoset({
  478. lightbox: true,
  479. rounded: false,
  480. gutter: '1px',
  481. photoset: '.photo-slideshow',
  482. photoWrap: '.photo-data',
  483. photo: '.pxu-photo'
  484. });
  485. resizeVideos();
  486. });
  487. {/block:ifnotPaginate}
  488. });
  489.  
  490. // minimal soundcloud player © eoxk.tumblr
  491. $(document).ready(function(){
  492. var color = '{color:Link}'; // color of play button (hex)
  493. $('.soundcloud_audio_player').each(function(){
  494. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  495. });
  496. });
  497.  
  498.  
  499. // drop links & post notes
  500. $(document).ready(function(){
  501. $(".lb").hide();
  502. $(".lh").show();$('.lh').toggle(function(){
  503. $(".lb").slideDown(function(){});
  504. },function(){
  505. $(".lb").slideUp(function(){});
  506. });
  507. });
  508.  
  509.  
  510. // tooltips
  511. (function($){
  512. $(document).ready(function(){
  513. $("[title]").style_my_tooltips({
  514. tip_delay_time:200,
  515. tip_fade_speed:300
  516. }
  517. );
  518. });
  519. })(jQuery);
  520.  
  521. </script>
  522.  
  523. </body>
  524. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement