Advertisement
Laighlin

#9: Fission Mailed (Regular Version)

Nov 25th, 2016
1,202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.67 KB | None | 0 0
  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. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  4. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  7. <script type="text/javascript" src="http://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>
  8. <head><title>{Title}{block:PostSummary} // {PostSummary}{/block:PostSummary}</title>
  9. <link rel="shortcut icon" href="{image:favicon}">
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11. <link href="https://fonts.googleapis.com/css?family=Exo+2:400,400i,700,700i" rel="stylesheet">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14.  
  15. <!-------------- FISSION MAILED by Laighlin ------------------
  16.  
  17.  
  18. 1. leave the credit intact
  19. 2. don't redistribute or lift large chunks of code
  20. 3. this is my first theme that features jQuery of my own, so i'd
  21.   love to be informed of any bugs you come across
  22.  
  23.  
  24. -------------------------------------------------------------->
  25.  
  26.  
  27. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  28.  
  29. <script>
  30. $(document).ready(function() {
  31.     $("[title]").style_my_tooltips({
  32.         tip_follows_cursor:true,
  33.         tip_delay_time:100,
  34.         tip_fade_speed:300
  35.     });
  36.     $("#desc_label").click(function() {
  37.         $("#desc").slideToggle(200);
  38.         $(this).toggleClass("bordersapper");
  39.     });
  40.     function getTime() {
  41.     var dt = new Date();
  42.     var h = (dt.getHours() < 10 ? "0" : "") + dt.getHours();
  43.    var m = (dt.getMinutes() < 10 ? "0" : "") + dt.getMinutes();
  44.    var time = h + ":" + m;
  45.    document.getElementById('tim').innerHTML = time;
  46.    }
  47.    getTime();
  48.    setInterval(getTime, 15000);
  49. });
  50. </script>
  51.  
  52. <meta name="color:background color" content="#fff"/>
  53. <meta name="color:borders" content="#8bd4cc"/>
  54. <meta name="image:background" content="http://static.tumblr.com/7ed33f146bdad76530c57305db46bbfd/xwoxjom/3Ppoh7xdn/tumblr_static_2stt8agq2l2cgos8cookcs4k0.gif"/>
  55. <meta name="image:favicon" content="http://static.tumblr.com/90ce0af55c83719beaf8556ee1bd081f/xwoxjom/ynDoh7z7f/tumblr_static_1okf9nh9wra8g04w888wgwgow.png"/>
  56. <meta name="if:search bar" content="1"/>
  57. <meta name="if:no background dots" content="1"/>
  58. <meta name="if:blurry background" content="0"/>
  59. <meta name="select:background size" content="repeat" title ="tiled"/>
  60. <meta name="select:background size" content=";background-size:100% 100%" title="cover"/>
  61. <meta name="select:droid opacity" content=".75" title="translucent"/>
  62. <meta name="select:droid opacity" content="1" title="opaque"/>
  63.  
  64. <meta name="color:droid interface" content="#fff"/>
  65. <meta name="color:title" content="#5bada1"/>
  66. <meta name="color:desc text" content="#5bada1"/>
  67. <meta name="color:post text" content="#888"/>
  68. <meta name="color:accent" content="#40aa9e"/>
  69. <meta name="color:link" content="#247ea5"/>
  70. <meta name="color:link hover" content="#08404c"/>
  71. <meta name="color:tags" content="#098143"/>
  72. <meta name="color:tags hover" content="#90e5e2"/>
  73.  
  74. <!-- text fields -->
  75. <meta name="text:body font" content="consolas"/>
  76. <meta name="text:body font size" content="13px"/>
  77. <meta name="text:search bar label" content="search tags"/>
  78.  
  79. <style type="text/css">
  80.  
  81. body {
  82.     margin:0px;
  83.     color:{color:post text};
  84.     font-family:'{text:body font}';
  85.     font-size:{text:body font size};
  86.     line-height:130%;
  87.     background:{color:background color};
  88.     overflow:hidden;
  89.     word-wrap:break-word;
  90. }
  91.  
  92. #bgholder {
  93.     height:calc(100% + 20px);
  94.     width:calc(100% + 20px);
  95.     background:url({image:background}) fixed {select:background size};
  96.     top:-10px;
  97.     left:-10px;
  98.     position:absolute;
  99.     {block:ifBlurryBackground}
  100.     filter:blur(5px);
  101.     {/block:ifBlurryBackground}
  102.     z-index:-3;
  103. }
  104.  
  105. #yeehaw {
  106.     height:100%;
  107.     width:100%;
  108.     position:absolute;
  109. }
  110.  
  111. a, .links, .tags, .pag {
  112.     transition:.15s ease-in-out;
  113. }
  114.  
  115. b, strong {
  116.     color:{color:desc text};
  117. }
  118.  
  119.  
  120. i, em {
  121.     color:{color:accent};
  122. }
  123.  
  124. a {
  125.     text-decoration:none;
  126.     outline:none;
  127.     -moz-outline-style:none;
  128.     color:{color:link};
  129. }
  130.  
  131.  
  132. a:hover {
  133.     color:{color:link hover};
  134. }
  135.  
  136.  
  137. img {
  138.     border:none;
  139.     max-height:100%;
  140.     max-width:100%;
  141. }
  142.  
  143.  
  144. blockquote, blockquote blockquote {
  145.     padding-left:7px;
  146.     margin-left:7px;
  147.     border-left:1px solid {color:blockquotes};
  148.     margin-right:0px;
  149. }
  150.  
  151. h1 {
  152.     font:150% 'Exo 2';
  153.     font-variant:small-caps;
  154.     color:{color:accent};
  155.     font-weight:bold;
  156. }
  157.  
  158. h1 i { font-size:110%; }
  159.  
  160. .post ol {
  161.     list-style-type:lower-roman;
  162. }
  163.  
  164. .post ul li {
  165.     list-style-type:square;
  166.     list-style-color:{color:accent};
  167. }
  168.  
  169. .exc {
  170.     color:{color:accent};
  171. }
  172.  
  173. .qq {
  174.     display:inline;
  175.     font-family:'Exo 2';
  176. }
  177.  
  178. .rbans blockquote {
  179.     border-color:{color:accent};
  180. }
  181.  
  182. .rbans {
  183.     display:block;
  184.     padding:5px;
  185.     text-align:right;
  186. }
  187.  
  188. ::selection {
  189.     background:rgba({RGBcolor:accent},.7);
  190.     color:{color:droid interface};
  191. }
  192.  
  193. ::moz-selection {
  194.     background:rgba({RGBcolor:accent},.7);
  195.     color:{color:droid interface};
  196. }
  197.  
  198. ::-webkit-scrollbar {
  199.     width:7px;
  200.     height:7px;
  201. }
  202.  
  203. ::-webkit-scrollbar-thumb {
  204.     background:{color:accent};
  205.     background-clip:padding-box;
  206. }
  207.  
  208. /* Track */
  209. ::-webkit-scrollbar-track {
  210.     background:rgba({RGBcolor:accent},.4);
  211.     border:4px solid transparent;
  212.     background-clip:padding-box;
  213. }
  214.  
  215. ::-webkit-scrollbar-track-horizontal { border-right:none; }
  216.  
  217.  
  218. ::-webkit-scrollbar-track-vertical { border-bottom:none; }
  219.  
  220.  
  221. ::-webkit-scrollbar-corner {
  222.     background:{color:scroll thumb};
  223.     border-radius:50%;
  224.     margin:2px;
  225. }
  226.  
  227. #droidbg {
  228.     position:fixed;
  229.     width:700px;
  230.     height:100%;
  231.     left:50%;
  232.     transform:translateX(-50%);
  233.     top:0;
  234.     z-index:-1;
  235.     background:{color:droid interface} {block:ifNotNoBackgroundDots}url('https://68.media.tumblr.com/9bb15bad47269e843de3798b0e3c3df0/tumblr_inline_oh6vxh9Xxu1seajvs_540.png'){/block:ifNotNoBackgroundDots};
  236.     filter:opacity({select:droid opacity});
  237.     border-radius:2px;
  238. }
  239.  
  240. #flavor {
  241.     position:fixed;
  242.     margin-top:15px;
  243.     margin-left:10px;
  244. }
  245.  
  246. #flavor, #topbar, #corner {
  247.     font-family:'exo 2';
  248. }
  249.  
  250. #droid { /*the one i'm looking for ;3 */
  251.     position:fixed;
  252.     z-index:1;
  253.     width:670px;
  254.     height:calc(75% + 60px);
  255.     left:50%;
  256.     transform:translateX(-50%);
  257.     top:calc(15% - 40px);
  258. }
  259.  
  260. #s-m-t-tooltip {
  261.     margin:10px;
  262.     background:rgba({RGBcolor:post text},.8);
  263.     color:{color:droid interface};
  264.     padding:5px;
  265.     font-size:12px;
  266.     z-index:999!important;
  267. }
  268.  
  269. #entries {
  270.     width:425px;
  271.     float:right;
  272.     right:20px;
  273.     margin-top:20px;
  274.     height:calc(100% - 30px);
  275.     overflow-y:auto;
  276. }
  277.  
  278. .post {
  279.     width:400px;
  280.     margin-bottom:10px;
  281.     padding:7px;
  282.     position:relative;
  283. }
  284.  
  285. .quote {
  286.     font-family:'Exo 2';
  287.     font-size:110%;
  288. }
  289.  
  290. .tags {
  291.     display:inline-block;
  292.     padding:6px 3px;
  293. }
  294.  
  295. .tags a {
  296.     color:{color:tags};
  297. }
  298.  
  299. .tags a:hover {
  300.     color:{color:tags hover};
  301. }
  302.  
  303. #topbar {
  304.     width:100%;
  305.     margin-top:-20px;
  306.     position:fixed;
  307.     font-size:18px;
  308.     display:flex;
  309.     align-items:stretch;
  310. }
  311.  
  312. #title {
  313.     color:{color:title};
  314.     position:relative;
  315.     text-transform:uppercase;
  316.     border:1px solid rgba({RGBcolor:borders},.7);
  317.     border-bottom:transparent;
  318.     padding:4px;
  319. }
  320.  
  321. #title a, #title i { color:{color:title}; }
  322.  
  323. #title i { font-size:20px; }
  324.  
  325. #paddypad, #rest {
  326.     height:20px;
  327.     border-bottom:1px solid rgba({RGBcolor:borders},.7);
  328.     padding:4px 0;
  329.     position:relative;
  330.     color:transparent;
  331.     width:25px;
  332. }
  333.  
  334. #rest {
  335.     flex-grow:3;
  336. }
  337.  
  338. #desc {
  339.     color:{color:desc text};
  340.     position:relative;
  341.     padding:5px 0 0 22px;
  342.     box-sizing:border-box;
  343.     width:100%;
  344.     font-size:90%;
  345.     overflow-y:auto;
  346.     overflow-x:hidden;
  347.     display:none;
  348. }
  349.  
  350. .pag {
  351.     float:right;
  352.     padding:3px 8px;
  353.     /*margin-bottom:2px;*/
  354.     /*margin-top:-2px;*/
  355.     margin:-2px 2px 2px 2px;
  356.     border-radius:8px;
  357.     font-size:13px;
  358.     line-height:0;
  359.     border:1px solid {color:borders};
  360. }
  361.  
  362. .pag i { color:{color:title}; }
  363.  
  364. .pag:hover {
  365.     background:rgba({RGBcolor:accent},.7);
  366. }
  367.  
  368. #prev {
  369.     -moz-transform: scaleX(-1);
  370.     -o-transform: scaleX(-1);
  371.     -webkit-transform: scaleX(-1);
  372.     transform: scaleX(-1);
  373.     filter: FlipH;
  374.     -ms-filter: "FlipH";
  375. }
  376.  
  377. #info {
  378.     text-align:right;
  379.     font-family:consolas;
  380.     font-size:12px;
  381.     margin-bottom:20px;
  382.     width:400px;
  383.     padding:0 7px;
  384.     box-sizing:border-box;
  385.     position:relative;
  386. }
  387.  
  388. #note {
  389.     overflow-x:hidden;
  390.     text-align:center;
  391.     padding-top:10px;
  392.     width:380px;
  393.     margin:auto;
  394. }
  395.  
  396. #note ol.notes {
  397.     list-style-type:none;
  398.     margin:5px;
  399.     padding:5px;
  400. }
  401.  
  402. #note ol.notes img.avatar {
  403.     margin-right: 5px;
  404.     margin-bottom:-3px;
  405.     width: 16px;
  406.     height: 16px;
  407.     border-radius:50%;
  408. }
  409.  
  410. #note ol.notes li {
  411.     padding:3px;
  412. }
  413.  
  414. #asker {
  415.     float:left;
  416.     margin-right:5px;
  417. }
  418.  
  419. #asker img { border-radius:50%; }
  420.  
  421. .aud {
  422.     height:30px;
  423.     width:23px;
  424.     overflow:hidden;
  425.     position:relative;
  426.     margin-top:16px;
  427.     margin-left:14px;
  428. }
  429.  
  430. .audholder {
  431.     position:absolute;
  432.     z-index:30;
  433.     background:#f3f3f3;
  434.     margin-top:11px;
  435.     margin-left:11px;
  436.     width:60px;
  437.     height:60px;
  438.     opacity:.5;
  439.     border-radius:50%;
  440. }
  441.  
  442. #song {
  443.     height:51px;
  444.     padding:15px;
  445.     background:transparent;
  446. }
  447.  
  448. #cover {
  449.     margin-right:5px;
  450.     border-radius:3px;
  451.     width:81px;
  452.     height:81px;
  453.     float:left;
  454.     background-size:cover;
  455.     z-index:1;
  456. }
  457.  
  458. #cover img { border-radius:3px; }
  459.  
  460. .chat {
  461.     border-bottom:1px solid rgba({RGBcolor:borders},.7);
  462.     padding:2px 0;
  463. }
  464.  
  465. .chat:last-child {
  466.     border-bottom:none;
  467. }
  468.  
  469. #linkcont {
  470.     float:left;
  471.     height:calc(100%);
  472.     display:flex;
  473.     flex-direction:column;
  474.     position:fixed;
  475.     margin-top:15px;
  476.     width:230px;
  477.     padding:7px;
  478. }
  479.  
  480. .links {
  481.     padding:7px 5px;
  482.     font-variant:small-caps;
  483.     border-bottom:1px solid rgba({RGBcolor:borders},.7);
  484.     display:block;
  485.     color:{color:post text};
  486.     font-family:'Exo 2';
  487.     font-size:120%;
  488. }
  489.  
  490. .links:hover {
  491.     background:rgba({RGBcolor:post text},.5);
  492.     color:{color:droid interface};
  493. }
  494.  
  495. .links:last-child {
  496.     border-bottom:none;
  497. }
  498.  
  499. .links.search {
  500.     border-bottom:none;
  501. }
  502.  
  503. .hoo, #timebox { cursor:default; }
  504.  
  505. input {
  506.     border:none;
  507.     border-bottom:1px solid rgba({RGBcolor:borders},.7);
  508.     background:transparent;
  509.     min-height:25px;
  510.     margin-left:22px;
  511.     margin-top:-5px;
  512.     width:198px;
  513.     outline:none;
  514.     color:rgba({RGBcolor:post text},.7);
  515.     font-family:{text:body font};
  516. }
  517.  
  518. #corner {
  519.     bottom:calc(5% - 20px);
  520.     left:calc(50% + 200px);
  521.     position:fixed;
  522.     width:150px;
  523.     z-index:99;
  524. }
  525.  
  526. #timebox, #no {
  527.     background:rgba({RGBcolor:post text},.3);
  528.     padding:4px;
  529.     font-size:14px;
  530.     display:inline-block;
  531. }
  532.  
  533. #timebox i, #no i {
  534.     color:{color:post text};
  535.     font-size:14px;
  536. }
  537.  
  538. #no a { color:{color:post text}; }
  539.  
  540. #athing {
  541.     width:calc(100% - 2px);
  542.     height:4px;
  543.     border:solid {color:borders};
  544.     border-width:0 1px;
  545.     margin-top:8px;
  546.     position:fixed;
  547. }
  548.  
  549. #desc_label {
  550.     cursor:pointer;
  551. }
  552.  
  553. .bordersapper {
  554.     border-color:transparent!important;
  555. }
  556.  
  557. {CustomCSS}</style></head><body>
  558.  
  559. <div id="bgholder"></div>
  560. <div id="yeehaw">
  561. <div id="droidbg"></div>
  562. <div id="droid">
  563. <div id="topbar">
  564. <div id="paddypad"></div>
  565. <div id="title"><i class="fa fa-heart-o" aria-hidden="true"></i> <a href="/">{Title}</a></div>
  566. <div id="rest">
  567. {block:Pagination}
  568.     {block:NextPage}
  569.         <a href="{NextPage}" title="next page">
  570.         <div class="pag" id="next"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
  571.         </a>
  572.     {/block:NextPage}
  573.     {block:PreviousPage}
  574.     <a href="{PreviousPage}" title="previous page">
  575.         <div class="pag" id="prev"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
  576.     </a>
  577.     {/block:PreviousPage}
  578. {/block:Pagination}</div>
  579. </div>
  580. <div id="athing"></div>
  581.  
  582. <div id="linkcont">
  583.     {block:AskEnabled}
  584.     <a class="links" href="/ask"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Ask</a>
  585.     {/block:AskEnabled}
  586.     {block:SubmissionsEnabled}
  587.     <a class="links" href="/submit"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Submit</a>
  588.     {/block:SubmissionsEnabled}
  589.     {block:HasPages}{block:Pages}<a href="{URL}" class="links"><i class="fa fa-link fa-fw" aria-hidden="true"></i> {Label}</a>{/block:Pages}{/block:HasPages}
  590.     {block:ifSearchBar}
  591.     <div class="links search hoo"><i class="fa fa-search fa-fw" aria-hidden="true"></i> Search</div>
  592.     <form class="search" onsubmit="return tagSearch(this)">
  593.     <input type="text" name="tag" value="{text:search bar label}"
  594.  onfocus="if (this.value == '{text:search bar label}') {this.value=''}"
  595.  onblur="if (this.value == '') {this.value='{text:search bar label}'}" />
  596. </form>
  597.     {/block:ifSearchBar}
  598.     {block:Description}<div class="links hoo bordersapper" id="desc_label"><i class="fa fa-user fa-fw" aria-hidden="true"></i> Description</div>
  599.     <div id="desc">{Description}</div>
  600.     {/block:Description}
  601. </div>
  602.  
  603. <div id="entries">
  604.  
  605. {block:Posts}
  606.  
  607. <div class="post">
  608.  
  609. {block:RebloggedFrom}
  610. <i class="fa fa-retweet" aria-hidden="true"></i> <a href="{ReblogParentURL}"
  611. title="{ReblogParentTitle}">{ReblogParentName}</a><br/><br/>
  612. {/block:RebloggedFrom}
  613.  
  614. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  615.  
  616.  
  617. {block:Photo}
  618. {LinkOpenTag}
  619.    <img src="{PhotoURL-400}">
  620. {LinkCloseTag}{block:Caption}{Caption}{/block:Caption}
  621. {/block:Photo}
  622.  
  623. {block:Photoset}
  624.    {Photoset-400}
  625. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  626.  
  627.  
  628. {block:Quote}<div class="quote">“{Quote}”</div><p align="right">{block:Source} —{Source}{/block:Source}</p>{/block:Quote}
  629.  
  630.  
  631. {block:Link}<h1><i class="fa fa-link"></i> <a href="{URL}" {Target}>{Name}</a></h1>{block:Excerpt}<div class="exc">{Excerpt}</div>{/block:Excerpt}{block:Description}{Description}{/block:Description}{/block:Link}
  632.  
  633.  
  634. {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}
  635.  
  636.  
  637. {block:Audio}
  638.                                
  639. <div id="cover">
  640. {block:AlbumArt}
  641. <img src="{AlbumArtURL}">
  642. {/block:AlbumArt}                                    
  643. </div>
  644.                                
  645. <div class="audholder"><div class="aud">{AudioPlayerBlack}</div></div>
  646. <div id="song">{block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  647. {block:TrackName}<b>Title:</b> {TrackName}<p>{/block:TrackName}</div>
  648. {block:Caption}<p>{Caption}{/block:Caption}
  649. {/block:Audio}
  650.  
  651. {block:Video}
  652.    {Video-400}
  653. {block:Caption}{Caption}{/block:Caption}{/block:Video}
  654.  
  655. {block:Answer}
  656. <div class="qq"><div id="asker"><img src="{AskerPortraitURL-24}">
  657. </div>
  658. {Asker} said:<br><em>{Question}</em></div>
  659. {block:Answerer}<div class="rbans">{Answerer} replied: {Answer}</div>{/block:Answerer}
  660. <div class="rep">{Replies}</div>
  661. {/block:Answer}
  662.  
  663. </div>
  664.  
  665.  
  666. {block:Date}
  667. <div id="info">
  668. {block:HasTags}{block:Tags}<div class="tags"><a href="{TagURL}"><i class="fa fa-tag"></i> {Tag}</a></div> {/block:Tags}<p> {/block:HasTags}
  669. <a href="{Permalink}" title="posted {TimeAgo} on {DayOfMonth}.{MonthNumber}.{Year}"><i class="fa fa-clock-o" aria-hidden="true" style="color:{color:link}"></i></a><a href="{Permalink}">
  670. {NoteCountWithLabel}</a>{block:RebloggedFrom}<br><i class="fa fa-copyright" aria-hidden="true"></i> <a href="{ReblogRootURL}"title="{ReblogRoottitle}">{ReblogRootName}</a>{/block:RebloggedFrom}
  671. {/block:Date}
  672.  
  673.  
  674.     {block:PostNotes} <p><div id="note">{PostNotes}</div>{/block:PostNotes}
  675. </div>
  676.  
  677. {/block:Posts}</div>
  678.    </div>
  679.    <div id="corner">
  680.        <div id="timebox">
  681.             <i class="fa fa-clock-o" aria-hidden="true"></i> <span id="tim"></span>
  682.        </div>
  683.        <div id="no"> <!-- do not remove this -->
  684.             <a href="http://linthm.tumblr.com/thm" title="FISSION MAILED © Laighlin"><i class="fa fa-code" aria-hidden="true"></i> THEME
  685.        </div></a>
  686.    </div>
  687. </div>
  688. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement