API tools faq
paste
odeysseus_thm

theme / MELODRAMA

odeysseus_thm
Dec 29th, 2017
14,447
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6.  
  7.  
  8. melodrama
  9.  
  10. @odeysseus
  11.  
  12.  
  13.  
  14.  
  15. - video resizing by @shythemes
  16. - unnest captions by @magnusthemes and @neothm
  17. - full credits listed at odeysseus.tumblr.com/credit
  18.  
  19. -->
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24. <title>{Title}</title>
  25.  
  26. <!--metas-->
  27.  
  28. <meta name="color:Text" content="#767676"/>
  29. <meta name="color:link" content="#444"/>
  30. <meta name="color:accent" content="#47acb7"/>
  31.  
  32. <meta name="if:hide caption" content="0"/>
  33. <meta name="if:infinite scroll" content="1"/>
  34. <meta name="if:load more" content="1"/>
  35. <meta name="if:scroll to top" content="1"/>
  36. <meta name="if:show tags" content="1"/>
  37.  
  38. <meta name="text:link 1 url" content=""/>
  39. <meta name="text:link 1" content=""/>
  40. <meta name="text:link 2 url" content=""/>
  41. <meta name="text:link 2" content=""/>
  42. <meta name="text:link 3 url" content=""/>
  43. <meta name="text:link 3" content=""/>
  44.  
  45. <meta name="text:font size" content="11px"/>
  46.  
  47. <meta name="select:font" content="PT Serif"/>
  48. <meta name="select:font" content="Source Sans Pro"/>
  49. <meta name="select:font" content="Source Serif Pro"/>
  50. <meta name="select:font" content="Open Sans"/>
  51. <meta name="select:font" content="Karla"/>
  52. <meta name="select:font" content="Maven Pro"/>
  53. <meta name="select:font" content="Mako"/>
  54. <meta name="select:font" content="Lora"/>
  55. <meta name="select:font" content="Lato"/>
  56.  
  57. <meta name="select:post width" content="300px"/>
  58. <meta name="select:post width" content="330px"/>
  59. <meta name="select:post width" content="350px"/>
  60. <meta name="select:post width" content="380px"/>
  61. <meta name="select:post width" content="400px"/>
  62. <meta name="select:post width" content="450px"/>
  63. <meta name="select:post width" content="500px"/>
  64. <meta name="select:post width" content="540px"/>
  65.  
  66. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  67.  
  68. <!--font-->
  69.  
  70. <link href='https://fonts.googleapis.com/css?family={select:font}|Inconsolata' rel='stylesheet' type='text/css'>
  71.  
  72. <!--videos-->
  73.  
  74. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  75.  
  76. <style type="text/css">
  77.  
  78.  
  79. /* general */
  80.  
  81. * { margin:0;padding:0; }
  82.  
  83. @-webkit-keyframes fadein {
  84. 0% {opacity: 0;}
  85. 100% { opacity: 1; }
  86. }
  87.  
  88. @-moz-keyframes fadein {
  89. 0% { opacity: 0; }
  90. 100% { opacity: 1; }
  91. }
  92.  
  93. @keyframes fadein {
  94. 0% { opacity: 0; }
  95. 100% { opacity: 1; }
  96. }
  97.  
  98.  
  99. ::-webkit-scrollbar{
  100. height:3px;
  101. width:7px;
  102. background:#fff;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb {background:rgba({RGBcolor:accent},0.5);border:3px solid #fff;}
  106. ::-webkit-scrollbar-track {background:#eee;border:3px solid #fff};}
  107.  
  108. ::-moz-selection{ background: rgba({RGBcolor:accent},.2); color:#444;}
  109. ::selection {background: rgba({RGBcolor:accent},.2); color:#444;}
  110.  
  111.  
  112. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;transform:scale(0.7,0.7);transform-origin:right top; } .tmblr-iframe:hover { opacity:1; }
  113.  
  114. #s-m-t-tooltip{
  115. position:absolute;
  116. margin:15px;
  117. max-width:250px;
  118. z-index:9999;
  119. color:#444;
  120. background:#fff;padding:2px 4px;
  121. border:1px solid #eee;
  122. }
  123.  
  124. blockquote { padding:0px 0px 0px 10px;margin:0px 0px 0px 10px;border-left:2px solid #eee;}
  125.  
  126. pre {
  127. white-space: pre-wrap; /* CSS 3 */
  128. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  129. white-space: -pre-wrap; /* Opera 4-6 */
  130. white-space: -o-pre-wrap; /* Opera 7 */
  131. word-wrap: break-word; /* Internet Explorer 5.5+ */
  132. color:#666;
  133. padding:10px;
  134. background:#f8f8f8;
  135. font-family:'Inconsolata',monospace;
  136. }
  137.  
  138. body {
  139. background:#fff;
  140. color:{color:text};
  141. font-family:'{select:font}',sans-serif;
  142. font-weight:400;
  143. font-size:{text:font size};
  144. text-align:left;
  145. line-height:180%;
  146. -moz-osx-font-smoothing:grayscale;
  147. -webkit-font-smoothing:antialiased;
  148. font-smoothing:antialiased;
  149. }
  150.  
  151.  
  152. a {
  153. color:{color:link};
  154. text-decoration:none;
  155. }
  156.  
  157. a,nav a:before { transition:0.25s ease-in-out;-webkit-transition:0.25s ease-in-out;-moz-transition:0.25s ease-in-out; }
  158.  
  159. a:hover { text-decoration:none;color:{color:accent};}
  160. b,strong { font-weight:600;color:#444; }
  161. ul li { list-style:square;} ul,ol { padding:10px 20px;}
  162. li { list-style-position:inside;list-style-position:inside;}
  163. p { margin:10px 0px 0px 0px; }
  164. img{ opacity:1;border:none;text-decoration:none;}
  165. small { font-size:calc({text:font size} - 0.5px); }
  166. hr { width:100%;background:#eee;height:1px;border:none;display:block;margin:10px 0px; }
  167. big { font-size:calc({text:font size} + 0.5px); }
  168. h1,h2,h3,h4,h5,h6 { padding:0;margin:5px 0px;font-size:13px;color:#444;font-weight:600;text-transform:lowercase;}
  169.  
  170.  
  171. /* posts */
  172.  
  173. .entries { margin:80px auto;width:{select:post width};}
  174. .posts img, .posts li, .posts blockquote { max-width: 100%;height:auto;}
  175.  
  176. .posts {
  177. position:relative;
  178. margin-bottom:80px;
  179. width:{select:post width};
  180. -webkit-animation-name: fadein;
  181. -webkit-animation-duration: 1.5s;
  182. }
  183.  
  184. /* captions */
  185.  
  186. .caption {
  187. {block:ifhidecaption}
  188. {block:indexpage}
  189. display:none;
  190. {/block:indexpage}
  191. {/block:ifhidecaption}
  192. margin-top:10px;
  193. padding:0px 10px 10px;
  194. border:1px solid #eee;
  195. border-radius:2px;
  196. }
  197.  
  198. a.tumblr_blog,.asker,.asker a,.quotesource { font-weight:600;color:#444; }
  199. .tumblr_parent { border:none;margin:0;padding:2px;display:block;}
  200. .tumblr_blog { top:10px; }
  201. .tumblr_blog { position:relative;margin:0; }
  202.  
  203. /* notes */
  204.  
  205. ol.notes { padding:0;margin:0;margin-top:15px;padding-top:15px;border-top:1px solid #eee;list-style-type:none;font-style:normal;}
  206. li.note { padding:0;margin:2px 0px;font-style:normal; }
  207. .notes_loading, .more_notes_link { font-weight:bold;float:left;text-align:left!important;text-transform:lowercase;}
  208. .notes img { display:none!important; }
  209. ol.notes li.note blockquote { padding:4px 10px;margin:5px 0px 0px 15px;}
  210.  
  211. /* quotes */
  212.  
  213. .quote { font-size:12px;margin-bottom:10px;color:#444;padding:10px;border:1px solid #eee;border-radius:2px; }
  214. .quotesource a.tumblr_blog { top:0px; }
  215.  
  216. /* chat */
  217.  
  218. .chat { line-height:180%;list-style:none;}
  219. .line { padding:4px;list-style:none; }
  220. .line.odd { background:rgba({RGBcolor:accent},.1);}
  221. .label { font-weight:700;color:#444;}
  222.  
  223. /* asks */
  224.  
  225. .question { border:1px solid #eee;padding:10px;border-radius:2px;margin-bottom:-20px; }
  226. /* audio */
  227.  
  228. .player { display:inline-block;width:50px;background:#fafafa;height:50px;overflow:hidden;margin-bottom:-5px;}
  229. .audio_d { float:right;padding:15px 10px;border:1px dotted #eee; width:calc({select:post width} - 90px );}
  230. .tumblr_audio_player { background:#fafafa!important; }
  231. .tumblr_audio_player { width:40px;margin:10px 7px;height:40px;overflow:hidden;}
  232.  
  233. /* lightboxes */
  234.  
  235. #vignette,.vignette { opacity:0!important; } .lightbox-image,#tumblr_lightbox img { box-shadow: none !important; border-radius:0 !important;} #tumblr_lightbox,.tmblr-lightbox { background:rgba(255,255,255,.7)!Important; } #tumblr_lightbox_left_link, #tumblr_lightbox_right_link { visibility: hidden; } .lightbox-caption,#tumblr_lightbox_caption { opacity:0; }
  236.  
  237. /* etc */
  238.  
  239. #fuckchad {
  240. bottom:27px;
  241. position:fixed;
  242. right:27px;
  243. }
  244.  
  245. .sc {
  246. bottom:15px;
  247. right:27px;
  248. text-align:right;
  249. position:fixed;
  250. display:none;
  251. font-weight:bold;
  252. cursor:help;
  253. }
  254.  
  255. .sc a { cursor:help;}
  256.  
  257. /* footer stuff */
  258.  
  259. #pagination { {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll} } #pagination a { margin:0px 5px; }
  260. .current_page { margin:0px 5px;font-weight:700;color:{color:accent}; }
  261. #infscr-loading { display:none!Important; }
  262. footer { width:{select:post width};margin:auto;text-align:center;margin-bottom:80px;} a#more { position:relative;text-align:center;}
  263.  
  264. /* post info */
  265.  
  266. .inf { text-transform:lowercase;margin-top:10px;} .up { text-transform:uppercase;letter-spacing:.5px;font-size:9px; } .tags a { margin-right:4px;word-wrap:break-word; }
  267.  
  268. /* sb */
  269.  
  270. aside { text-align:center;width:150px;top:80px;left:calc(50% - ({select:post width} / 2) - 250px);position:fixed;-webkit-animation-name: fadein;-webkit-animation-duration: 1.5s; }
  271. aside img { display:block;width:50px;border-radius:2px;margin:auto;border:1px solid #eee }
  272. a.t { display:block;font-size:13px;font-weight:600;color:#444;margin-top:10px;} a.t:hover { color:{color:accent}; } nav { margin:10px 0px;padding:10px;border:1px solid #eee;counter-reset:section;border-radius:2px; }
  273. nav a { display:inline-block;width:48%;text-align:left;}
  274. nav a:before { counter-increment: section;content:'0'counter(section);margin-right:5px;color:#444;font-weight:600;}
  275. nav a:hover:before,a.tumblr_blog:hover,.asker a:hover { color:{color:accent};}
  276.  
  277. </style>
  278.  
  279. <!--scripts-->
  280.  
  281. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  282.  
  283. <script>
  284. (function($){
  285. $(document).ready(function(){
  286. $("a[title]").style_my_tooltips({
  287. tip_follows_cursor:true,
  288. tip_delay_time:30,
  289. tip_fade_speed:300,
  290. attribute:"title"
  291. });
  292. });
  293. })(jQuery);
  294. </script>
  295.  
  296. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  297. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  298. <script src="https://dl.dropboxusercontent.com/s/lkc34gq5tgmwqj0/basics.js?dl=0"></script>
  299. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  300.  
  301. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  302. <script> $(function(){ $('.posts').unnest({
  303. yourCaption: ".caption,.cap",
  304. wrapName: ".tumblr_parent",
  305. newCaptionUsername: true,
  306. {block:indexpage}
  307. originalPostCaptionUsername: true,
  308. {/block:indexpage}
  309. tumblrAvatars: false,
  310. usernameColon: false
  311. }); }); </script>
  312.  
  313. </head>
  314.  
  315. <body>
  316.  
  317. <aside>
  318.  
  319. <img src="{PortraitURL-64}"/>
  320. <a href="/" class="t">{Title}</a>
  321. <nav>
  322. <a href="/">home</a> <a href="/ask">message</a> <a href="/archive">history</a> {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1} {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2} {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}
  323. </nav>
  324. <div class="d">{Description}</div>
  325. </aside>
  326.  
  327. <div class="stuff">
  328. <div class="entries">
  329.  
  330. {block:Posts}
  331. <div class="posts">
  332.  
  333. {block:Text}<div class="q">
  334. {block:Title}<h1>{Title}</h1>{/block:Title}
  335. <div class="txt cap">{Body}</div>
  336. </div>{/block:Text}
  337.  
  338. {block:Photo}
  339. <div class="q">
  340. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img style="margin-bottom:-5px" src="{PhotoURL-HighRes}"></a></div>{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  341. {/block:Photo}
  342.  
  343. {block:Photoset}<div class="q"><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:Caption}<div class="caption">{Caption}</div>{/block:Caption}</div>{/block:Photoset}
  344.  
  345.  
  346. {block:Quote}
  347. <div class="q txt">
  348. <div class="quote">{Quote}</div>
  349. {block:Source}<div class="quotesource">{Source}</div>{/block:Source}
  350. </div>{/block:Quote}
  351.  
  352.  
  353. {block:Link}
  354. <div class="q txt">
  355. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  356. {block:Description}{Description}{/block:Description}
  357. </div>
  358. {/block:Link}
  359.  
  360.  
  361. {block:Chat}
  362. <div class="q txt">
  363. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  364. </div>
  365. {/block:Chat}
  366.  
  367.  
  368. {block:Audio}
  369. <div class="q txt">
  370. {block:AudioPlayer}
  371. <div class="player"> {AudioPlayerWhite}</div>
  372. <div class="audio_d">
  373. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  374. {block:Artist} : {Artist} {/block:Artist}</div>
  375. {/block:AudioPlayer}
  376.  
  377. {block:Caption}
  378. <div class="caption">{Caption}</div>
  379. {/block:Caption}
  380. </div>
  381. {/block:Audio}
  382.  
  383.  
  384. {block:Video}
  385. <div class="q">
  386. <div class="video iframe">{Video-500}</div>
  387. <div class="caption">
  388. {block:Caption}{Caption}{/block:Caption}
  389. </div>
  390. </div>
  391. {/block:Video}
  392.  
  393.  
  394. {block:Answer}
  395. <div class="q txt">
  396. <div class="question"> <div class="asker">{asker}</div> {Question}</div><br>
  397. <div class="answer cap">
  398. {Answer}</div>
  399. </div>
  400. {/block:Answer}
  401.  
  402. {block:date}
  403. <div class="inf">
  404. {block:indexpage}
  405. <a class="up" href="{Permalink}">{DayOfWeek} / {NoteCountWithLabel}</a>
  406.  
  407. {block:ifshowtags}
  408. {block:HasTags}
  409. <div class="tags">
  410. {block:Tags}
  411. <a href="{TagURL}">#{Tag}</a>
  412. {/block:Tags}
  413. </div>
  414. {/block:HasTags}{/block:ifshowtags} {/block:indexpage}
  415.  
  416.  
  417. {block:PermalinkPage}<a class="up" href="{Permalink}">{DayOfWeek} / {TimeAgo} / {NoteCountWithLabel}</a>
  418. {block:RebloggedFrom} <br>
  419. via <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} / source <a href="{ReblogRootURL}" >{ReblogRootName}</a>
  420. {/block:ContentSource}
  421. {/block:RebloggedFrom}
  422. {block:HasTags}<br>
  423. <div class="tags">
  424. {block:Tags}
  425. <a href="{TagURL}">#{Tag}</a>
  426. {/block:Tags}
  427. </div>
  428. {/block:HasTags}
  429. {/block:PermalinkPage}
  430. </div>
  431. {/block:date}
  432.  
  433.  
  434. {block:PostNotes}{PostNotes}{/block:PostNotes}
  435. </div>
  436. {/block:Posts}
  437. </div>
  438.  
  439. {block:indexpage}
  440. <footer>
  441. {block:ifloadmore}
  442. <a id="more" style="cursor:help">load more posts</a>
  443. {/block:ifloadmore}
  444. {block:Pagination}
  445. <div id="pagination">
  446. {block:previouspage}
  447. <a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  448. {block:JumpPagination length="4"}{block:CurrentPage}
  449. <span class="current_page">{PageNumber}</span>
  450. {/block:CurrentPage}{block:JumpPage}
  451.  
  452. <a class="jump_page" href="{URL}">{PageNumber}</a>
  453. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  454. <a class="next" href="{NextPage}">next</a>
  455. {/block:nextpage}
  456. </div>
  457. {/block:Pagination}
  458. </footer>
  459. {/block:indexpage}
  460. </div>
  461.  
  462. {block:ContentSource}<!– {SourceURL}{block:SourceLogo}<img src=“{BlackLogoURL}” width=“{LogoWidth}” height=“{LogoHeight}” alt=“{SourceTitle}” />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} –> {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  463.  
  464.  
  465. <div id="fuckchad"><a href="http://odeysseus.tumblr.com">O</a></div> {block:ifscrolltotop}<div class="sc"> <a href="#">scroll to top</a></div>{/block:ifscrolltotop}
  466.  
  467. {block:indexpage}{block:ifinfinitescroll}
  468. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  469. {/block:ifinfinitescroll}{/block:indexpage}
  470.  
  471. <script>
  472. $(document).ready(function(){
  473. var $container = $('.entries');
  474. {block:ifinfinitescroll}
  475. $container.infinitescroll({
  476. itemSelector: '.posts',
  477. navSelector: '#pagination',
  478. nextSelector: '.next',
  479. loadingImg: '',
  480. loadingText: '',
  481. doneText: 'no more posts',
  482. bufferPx: 2000,
  483. {block:ifloadmore}
  484. errorCallback: function () {
  485. jQuery ('a#more').delay(50).fadeOut();
  486. $('.posts').last().after($('a#more'));
  487. }
  488. {/block:ifloadmore}
  489. },
  490. function( newElements ) {
  491. var $newElems = $( newElements );
  492. $newElems.find('.photo-slideshow').pxuPhotoset({
  493. lightbox: true,
  494. rounded: false,
  495. gutter: '1px',
  496. photoset: '.photo-slideshow',
  497. photoWrap: '.photo-data',
  498. photo: '.pxu-photo'
  499. })
  500. resizeVideos();
  501. $newElems.unnest({
  502. yourCaption: ".caption,.cap",
  503. wrapName: ".tumblr_parent",
  504. newCaptionUsername: true,
  505. originalPostCaptionUsername: true,
  506. tumblrAvatars: false,
  507. usernameColon: false
  508. });
  509. $newElems.find('iframe.tumblr_audio_player').load( function() {
  510. $('iframe.tumblr_audio_player').contents().find("head")
  511. .append($("<style type='text/css'> .audio-player{background:#fafafa !important} </style>"));
  512. });
  513.  
  514. });
  515. {block:ifloadmore}
  516. $(window).unbind('.infscr');
  517. $('a#more').click(function(){
  518. $container.infinitescroll('retrieve');return false;
  519. $('.posts').last().after($('a#more'));
  520. });
  521. {/block:ifloadmore}
  522. {/block:ifinfinitescroll}
  523. });
  524. </script>
  525. </body>
  526.  
  527. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!