API tools faq
paste
Advertisement
Laighlin

#5: Melody

Laighlin
Aug 18th, 2016
4,723
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}{block:PostSummary} ♪ {PostSummary}{/block:PostSummary}</title>
  4. <link rel="shortcut icon" href="{image:favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. <link href='https://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  8. <link href="https://fonts.googleapis.com/css?family=Exo+2:400,400i,700,700i" rel="stylesheet">
  9. <link href="https://fonts.googleapis.com/css?family=Dosis:400,400i,700,700i" rel="stylesheet">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13. <!-------------------- Melody by Laighlin ---------------------
  14.  
  15. don't move the credit or lift large chunks of code from the theme!
  16. hmu if anything: customization, bugs, concrit, whatever.
  17.  
  18. note: there are no text fields for custom links. select the option
  19. at the top of every page editor that says "show a link to this
  20. page" and it will show up; if you want to link to a tag, create a
  21. page and have it redirect.
  22.  
  23. --------------------------------------------------------------->
  24.  
  25. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  26.  
  27. <script>
  28. (function($){
  29. $(document).ready(function(){
  30. $("a[title]").style_my_tooltips({
  31. tip_follows_cursor:true,
  32. tip_delay_time:0,
  33. tip_fade_speed:300,
  34. attribute:"title"
  35. });
  36. });
  37. })(jQuery);
  38. </script>
  39.  
  40. <meta name="color:background color" content="#0e3957"/>
  41. <meta name="color:interface" content="#fff"/>
  42. <meta name="image:background" content="http://static.tumblr.com/99813719461c8606b34d6f87d379c7b0/xwoxjom/9XYoc61ul/tumblr_static_9jn1sij4lywwsc4kgs04wscc.png"/>
  43. <meta name="image:favicon" content="http://static.tumblr.com/5d5d6b0ee99c0ab3869b126cc2c3b5dc/xwoxjom/M4Voc62d2/tumblr_static_ex28wvq5x340o4oc04ggwoo4g.png"/>
  44. <meta name="image:side img" content="http://static.tumblr.com/141687d511933fc8d9cdf3ac2e644e2b/xwoxjom/NCPoc61vc/tumblr_static_bcf1ogjmuxw0so8ckk8koo4wk.jpg"/>
  45. <meta name="if:black or white controls" content="0"/>
  46. <meta name="if:hover shadow effects" content="0"/>
  47. <meta name="if:caption" content="1"/>
  48.  
  49. <meta name="color:title" content="#10718f"/>
  50. <meta name="color:title bg" content="#fff"/>
  51. <meta name="color:desc bg" content="#fff"/>
  52. <meta name="color:post bg" content="##69abcc"/>
  53. <meta name="color:post text" content="#fff"/>
  54. <meta name="color:desc text" content="#8f2e56"/>
  55. <meta name="color:bold" content="#414141"/>
  56. <meta name="color:italic" content="#183f52"/>
  57. <meta name="color:link" content="#7e2832"/>
  58. <meta name="color:link hover" content="#fffec5"/>
  59. <meta name="color:selection text" content="#fff"/>
  60. <meta name="color:selection bg" content="#002f47"/>
  61. <meta name="color:scroll thumb" content="#cc6975"/>
  62. <meta name="color:extra links bg" content="#1c5b76"/>
  63. <meta name="color:extra links text" content="#000"/>
  64. <meta name="color:nav icons" content="#03577b"/>
  65. <meta name="color:blockquotes" content="#cc6975"/>
  66. <meta name="color:tags" content="#444"/>
  67. <meta name="color:tags hover" content="#f3e8b2"/>
  68.  
  69. <!-- text fields -->
  70. <meta name="text:title font" content="Amatic SC"/>
  71. <meta name="text:background blur" content="3"/>
  72. <meta name="text:body font" content="Dosis"/>
  73. <meta name="text:desc font" content="Dosis"/>
  74. <meta name="text:body font size" content="15px"/>
  75. <meta name="text:desc font size" content="13px"/>
  76. <meta name="text:desc max height" content="250px"/>
  77.  
  78. <style type="text/css">
  79.  
  80. {block:ifNotBlackOrWhiteControls}
  81. .tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop, .tmblr-iframe, #tumblr_controls {
  82.     -webkit-filter: invert(100%);
  83.     filter: invert(100%);
  84.     opacity:.6;
  85. }
  86. {/block:ifNotBlackOrWhiteControls}
  87.  
  88. body {
  89.     background-size:repeat;
  90.     margin:0px;
  91.     color:{color:post text};
  92.     font-family:'{text:body font}';
  93.     font-size:{text:body font size};
  94.     line-height:130%;
  95.     word-wrap:break-word;
  96.     background:{color:background color};
  97. }
  98.  
  99. body,html {
  100.     height:100%;
  101. }
  102.  
  103. #bgholder {
  104.     background:url({image:background}) {color:background color} fixed;
  105.     -webkit-filter:blur({text:background blur}px);
  106.     filter:blur({text:background blur}px);
  107.     height:100%;
  108.     width:100%;
  109.     z-index:0;
  110.     display:block;
  111.     overflow:hidden;
  112.     position:fixed;
  113. }
  114.  
  115. /*#alltogethernow {*/
  116. /*    z-index:2;*/
  117. /*    position:absolute;*/
  118. /*    overflow-y:auto;*/
  119. /*    height:100%;*/
  120. /*    width:100%;*/
  121. /*    background:rgba({RGBcolor:background},.3);*/
  122. /*}*/
  123.  
  124. b, strong {
  125.     color:{color:bold};
  126. }
  127.  
  128. i, em {
  129.     color:{color:italic};
  130. }
  131.  
  132. a {
  133.     text-decoration:none;
  134.     outline:none;
  135.     -moz-outline-style:none;
  136.     transition:.3s all ease;
  137. }
  138.  
  139. .post a, #desc a, .info a {
  140.     color:{color:link};
  141. }
  142.  
  143. .post a:hover, #desc a:hover, .info a:hover {
  144.     color:{color:link hover};
  145. }
  146.  
  147. img {
  148.     border:none;
  149.     max-height:100%;
  150.     max-width:100%;
  151. }
  152.  
  153. blockquote {
  154.     padding-left:7px;
  155.     margin-left:7px;
  156.     border-left:5px solid {color:blockquotes};
  157.     margin-right:0px;
  158. }
  159.    
  160. blockquote blockquote {
  161.     padding-left:7px;
  162.     margin-left:7px;
  163.     border-left:5px solid {color:blockquotes};
  164.     margin-right:0px;
  165. }
  166.  
  167. h1 {
  168.     font-size:140%;
  169.     line-height:130%;
  170.     text-align:center;
  171.     font-family:Dosis;
  172. }
  173.  
  174. ::selection {
  175.   background: {color:selection bg};
  176.   color: {color:selection text};
  177. }
  178. ::-moz-selection {
  179.   background: {color:selection bg};
  180.   color: {color:selection text};
  181. }
  182.  
  183. ::-webkit-scrollbar {
  184.     width:10px;
  185.     height:10px;
  186. }
  187.  
  188. /* Track */
  189. ::-webkit-scrollbar-track {
  190.     background:{color:background color};
  191. }
  192.  
  193. /* Handle */
  194. ::-webkit-scrollbar-thumb {
  195.     background: {color:scroll thumb};
  196.     border:2px solid transparent;
  197.     background-clip:content-box;
  198.     border-radius:7px;
  199. }
  200.  
  201. ::-webkit-scrollbar-corner {
  202.     background: {color:scroll bg};
  203. }
  204.  
  205. #s-m-t-tooltip {
  206.     background:rgba({RGBcolor:extra links text},.9);
  207.     color:{color:extra links bg};
  208.     margin:10px;
  209.     padding:7px;
  210.     {block:ifHoverShadowEffects}
  211.     box-shadow:0 0 8px 0px {color:interface} inset;
  212.     {/block:ifHoverShadowEffects}
  213.     font-family:'{text:desc font}';
  214.     font-size:{text:desc font size};
  215.     z-index:9999999;
  216.     border-radius:3px;
  217. }
  218.  
  219. #lrb {
  220.     opacity:.8;
  221.     display:inline-block;
  222.     padding:5px 3px 0px 3px;
  223.     z-index:9;
  224. }
  225.  
  226. #entries {
  227.     padding:35px 10px 10px;
  228.     width:430px;
  229.     margin:0 auto;
  230.     bottom:0px;
  231.     position:relative;
  232.     z-index:5;
  233.     overflow-x:hidden;
  234.     {block:PermalinkPage}
  235.     height:450px;
  236.     width:450px;
  237.     padding:0;
  238.     top:50%;
  239.     transform:translateY(-50%);
  240.     overflow-y:auto;
  241.     {/block:PermalinkPage}
  242. }
  243.  
  244. .via {
  245.    
  246. }
  247.  
  248. .post {
  249.     width:400px;
  250.     margin:auto;
  251.     margin-bottom:10px;
  252.     padding:15px;
  253.     background:{color:post bg};
  254.     position:relative;
  255.     z-index:6;
  256. }
  257.  
  258. .tags {
  259.     display:inline;
  260.     color:{color:tags};
  261.     padding:3px;
  262.     transition:.3s all ease;
  263. }
  264.  
  265. .tags a {
  266.     color:{color:tags};
  267.     transition:.3s all ease;
  268. }
  269.  
  270. .tags a:hover, .tags i {
  271.     color:{color:tags hover};
  272. }
  273.  
  274. #radio, #entries {
  275.     background:{color:interface};
  276.     background-clip:border-box;
  277. }
  278.  
  279. #radio {
  280.     width:900px;
  281.     padding:10px;
  282.     position:fixed;
  283.     top:50%;
  284.     left:50%;
  285.     transform: translate(-50%,-50%);
  286.     height:450px;
  287.     border-radius:6px;
  288. }
  289.  
  290. #title {
  291.     margin-bottom:10px;
  292.     font-size:24px;
  293.     color:{color:title};
  294.     font-family:'{text:title font}';
  295.     background:{color:title bg};
  296. }
  297.  
  298. {block:ifHoverShadowEffects}
  299. #title:hover, #desc:hover, #sideimg:hover { box-shadow:0 0 15px 0px {color:interface} inset; }
  300. {/block:ifHoverShadowEffects}
  301.  
  302. #desc {
  303.     font-family:'{text:desc font}';
  304.     color:{color:desc text};
  305.     background:{color:desc bg};
  306.     font-size:{text:desc font size};
  307.     margin-top:10px;
  308.     overflow-y:auto;
  309.     max-height:{text:desc max height};
  310. }
  311.  
  312. #d {
  313.     padding:4px;
  314.     position:relative;
  315.     vertical-align:middle;
  316.     display:table-cell;
  317. }
  318.  
  319. #title, #desc {
  320.     position:relative;
  321.     padding:10px;
  322.     line-height:150%;
  323.     text-align:center;
  324.     width:205px;
  325. }
  326.  
  327. #sideimg {
  328.     width:230px;
  329.     height:450px;
  330.     right:10px;
  331.     top:10px;
  332.     position:fixed;
  333.     overflow:hidden;
  334.     background:url('{image:side img}') center;
  335.     -webkit-filter:contrast(90%);
  336.     background-size:cover;
  337.     z-index:3;
  338. }
  339.  
  340. .info {
  341.     text-align:center;
  342.     font-family:Dosis;
  343.     font-size:14px;
  344.     letter-spacing:.5px;
  345.     margin:auto;
  346.     margin-top:10px;
  347.     {block:IndexPage}
  348.     margin-bottom:30px;
  349.     {/block:IndexPage}
  350.     width:400px;
  351.     padding:10px 15px;
  352.     background:{color:post bg};
  353.     z-index:6;
  354. }
  355.  
  356. .info a { padding:0 2px; }
  357.  
  358. #note {
  359.     overflow-x:hidden;
  360.     text-align:center;
  361.     padding-top:10px;
  362.     width:380px;
  363.     margin:auto;
  364. }
  365.  
  366. #note ol.notes {
  367.     list-style-type:none;
  368.     margin:5px;
  369.     padding:5px;
  370. }
  371.  
  372. #note ol.notes img.avatar {
  373.     margin-right: 5px;
  374.     margin-bottom:-3px;
  375.     width: 16px;
  376.     height: 16px;
  377.     border-radius:50%;
  378. }
  379.  
  380. #note ol.notes li {
  381.     padding:3px;
  382. }
  383.  
  384. #asker {
  385.     float:left;
  386.     margin-right:5px;
  387. }
  388.  
  389. .aud {
  390.     height:30px;
  391.     width:23px;
  392.     overflow:hidden;
  393.     position:relative;
  394.     margin: 14px 24px 13px 14px;
  395. }
  396.  
  397. .audholder {
  398.     position:absolute;
  399.     z-index:30;
  400.     background:#f3f3f3;
  401.     margin-top:11px;
  402.     margin-left:11px;
  403.     opacity:.8;
  404.     border-radius:50%;
  405. }
  406.  
  407. #song {
  408.     height:51px;
  409.     padding:15px;
  410. }
  411.  
  412. #cover {
  413.     margin-right:5px;
  414.     width:81px;
  415.     height:81px;
  416.     float:left;
  417.     background-size:cover;
  418.     z-index:1;
  419. }
  420.  
  421. #cover, #cover img { border-radius:3px; }
  422.  
  423. .chat { padding: 2px 4px; }
  424. .chat:nth-child(even) {
  425.     border:1px solid {color:interface};
  426.     border-radius:2px;
  427. }
  428.  
  429. .quote {
  430.     font-size:130%;
  431.     letter-spacing:.5px;
  432.     font-family:Dosis;
  433.     text-decoration:bold;
  434. }
  435.  
  436. #buttons {
  437.     float:left;
  438. }
  439.  
  440. #linkcont {
  441.     width:229px;
  442.     margin-left:-2px;
  443.     margin-top:8px;
  444.     background:#fff;
  445.     text-align:center;
  446.     display:flex;
  447.     flex-flow:row wrap;
  448. }
  449.  
  450. a.links {
  451.     flex-grow:3;
  452.     font-size:13px;
  453.     text-align:center;
  454.     float:left;
  455.     width:100px;
  456.     margin:2px;
  457.     padding:4px;
  458.     background:{color:extra links bg};
  459.     color:{color:extra links text};
  460.     display:inline-block;
  461. }
  462.  
  463. .links:hover {
  464.     background:{color:extra links text};
  465.     color:{color:extra links bg};
  466.     {block:ifHoverShadowEffects}
  467.     box-shadow:0 0 12px 0px {color:interface} inset;
  468.     {/block:ifHoverShadowEffects}
  469. }
  470.  
  471. .links:nth-child(odd) {
  472.     float:left;
  473. }
  474.  
  475. #linkcont, .links, .post, #title, #desc, .info, #sideimg img, .nav, .tags, .tags i, #sideimg {
  476.     transition:.3s all ease;
  477.     border-radius:3px;
  478. }
  479.  
  480. .nav {
  481.     width:30px;
  482.     display:block;
  483.     position:relative;
  484.     margin:7px;
  485.     padding:3px;
  486.     font-size:20px;
  487.     color:{color:nav icons};
  488.     text-align:center;
  489.     border:3px solid {color:interface};
  490.     border-radius:6px;
  491.     background:rgba({RGBcolor:interface},.6);
  492. }
  493.  
  494. .nav i { color:{color:nav icons}; }
  495.  
  496. .nav:hover {
  497.     {block:ifHoverShadowEffects}
  498.     box-shadow:0 0 15px 3px {color:interface} inset;
  499.     {block:ifHoverShadowEffects}
  500. }
  501.  
  502. #navcont {
  503.     position:fixed;
  504.     width:30px;
  505.     height:150px;
  506.     top:-7px;
  507.     right:-30px;
  508. }
  509.  
  510. {CustomCSS}</style></head><body>
  511.  
  512. <div id="bgholder"></div>
  513.  
  514. <div id="alltogethernow">
  515.  
  516. <div id="radio">
  517.  
  518. <div id="sideimg"></div>
  519.  
  520. <a href="/"><div id="title">{Title}</div></a>{/block:Title}
  521.  
  522. <div id="desc"><div id="d">{Description}</div></div>
  523.  
  524. {block:HasPages}
  525. <div id="linkcont">
  526.     {block:Pages}<a href="{URL}" class="links">{Label}</a>{/block:Pages}
  527. </div>
  528. {block:HasPages}
  529.  
  530. <div id="navcont">
  531.  
  532. <a href="/" title="index" class="nav"><i class="fa fa-play" aria-hidden="true"></i></a>
  533.     {block:AskEnabled}<a href="/ask" title="ask" class="nav"><i class="fa fa-pause" aria-hidden="true"></i></a>{/block:AskEnabled}
  534.     {block:SubmissionsEnabled}<a href="/submit" title="submit" class="nav"><i class="fa fa-stop" aria-hidden="true"></i></a>{/block:SubmissionsEnabled}
  535.     <a href="/archive" title="archive" class="nav"><i class="fa fa-random" aria-hidden="true"></i></a>
  536.     <a href="http://linthm.tumblr.com/thm" title="Melody © Laighlin" class="nav"><i class="fa fa-eject" aria-hidden="true"></i></a>
  537.  
  538. {block:Pagination}
  539.     {block:PreviousPage}
  540.     <a href="{PreviousPage}" title="previous page">
  541.         <div class="nav"><i class="fa fa-backward" aria-hidden="true"></i></div>
  542.     </a>
  543.     {/block:PreviousPage}
  544.    
  545.     {block:NextPage}
  546.         <a href="{NextPage}" title="next page">
  547.             <div class="nav"><i class="fa fa-forward" aria-hidden="true"></i></div>
  548.         </a>
  549.     {/block:NextPage}
  550. {/block:Pagination}
  551.  
  552. </div>
  553.  
  554. </div>
  555. <div id="ebgholder"></div>
  556. <div id="entries">
  557.  
  558. {block:Posts}
  559.  
  560. <div class="via"></div>
  561. <div class="src"></div>
  562.  
  563. <div class="post">
  564.  
  565. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  566.  
  567. {block:Photo}
  568. {LinkOpenTag}
  569.    <img src="{PhotoURL-400}">
  570. {LinkCloseTag}{block:Caption}{block:ifCaption}{Caption}{/block:ifCaption}{/block:Caption}
  571. {block:PermalinkPage}{block:ifNotCaption}{Caption}{/block:ifNotCaption}{/block:PermalinkPage}
  572. {/block:Photo}
  573.  
  574. {block:Photoset}
  575.    {Photoset-400}
  576. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  577. {block:ifNotCaption}{block:PermalinkPage}{Caption}{/block:PermalinkPage}{/block:ifNotCaption}{/block:Photoset}
  578.  
  579. {block:Quote}<div class="quote">“{Quote}”</div><p align="right">{block:Source} —{Source}{/block:Source}</p>{/block:Quote}
  580.  
  581. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  582.  
  583. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br></div>{/block:Lines}{/block:Chat}
  584.  
  585. {block:Audio}
  586.                                
  587.                <div id="cover">
  588.        {block:AlbumArt}
  589. <img src="{AlbumArtURL}">
  590. {/block:AlbumArt}                                    
  591.      </div>
  592.                                
  593.         <div class="audholder"><div class="aud">
  594.             {block:ifBlackOrWhiteControls}
  595.             {AudioPlayer}
  596.             {/block:ifBlackOrWhiteControls}
  597.             {block:ifNotBlackOrWhiteControls}
  598.             {AudioPlayerBlack}
  599.             {/block:ifNotBlackOrWhiteControls}
  600.         </div></div>
  601.                                 <div id="song">{block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  602.                                 {block:TrackName}<b>Title:</b> {TrackName}<p>{/block:TrackName}</div>
  603.                                 {block:ifCaption}{block:Caption}<p>{Caption}{/block:Caption}{/block:ifCaption}
  604.                                 {block:ifNotCaption}{block:PermalinkPage}{Caption}{/block:PermalinkPage}{/block:ifNotCaption}
  605.                         {/block:Audio}
  606.  
  607.  
  608. {block:Video}
  609.    {Video-400}
  610. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  611. {block:ifNotCaption}{block:PermalinkPage}{Caption}{/block:PermalinkPage}{/block:ifNotCaption}
  612. {/block:Video}
  613.  
  614. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-24}"></div>{Asker} whispered:<br><em>{Question}</em><br>{Answer}{/block:Answer}
  615.  
  616. {block:HasTags}<p>{block:Tags}<div class="tags"><a href="{TagURL}"><i class="fa fa-tag" aria-hidden="true"></i> {Tag}</a></div> {/block:Tags}{/block:HasTags}
  617.  
  618. </div>
  619.  
  620. {block:Date}
  621. <div class="info">
  622. posted {TimeAgo} on <a href="{Permalink}">{DayOfMonth}.{MonthNumber}.{Year}</a>{block:NoteCount} with <a href="{Permalink}">
  623. {NoteCountWithLabel}</a>{/block:NoteCount}
  624. {block:RebloggedFrom}<br>reblogged from <a href="{ReblogParentURL}"
  625. title="{ReblogParentTitle}">{ReblogParentName}</a> <strong>•</strong> originally by <a href="{ReblogRootURL}"title="{ReblogRoottitle}">{ReblogRootName}</a>{/block:RebloggedFrom}
  626. <br>
  627.     {block:ifBlackOrWhiteControls}
  628.     <div id="lrb">{ReblogButton color="white" size="16"}</div><div id="lrb">{LikeButton color="white" size="16"}</div>
  629.     {/block:ifBlackOrWhiteControls}
  630.     {block:ifNotBlackOrWhiteControls}
  631.     <div id="lrb">{ReblogButton color="black" size="16"}</div><div id="lrb">{LikeButton color="black" size="16"}</div>
  632.     {/block:ifNotBlackOrWhiteControls}
  633. {/block:Date}
  634.  
  635.     {block:PostNotes} <p><div id="note">{PostNotes-16}</div>{/block:PostNotes}
  636. </div>
  637.  
  638. {/block:Posts}</div>
  639.  
  640. </div>
  641.    
  642.  
  643. </body></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!