API tools faq
paste
Advertisement
Laighlin

#20: RGBA(1) (Mobile colors)

Laighlin
Jul 19th, 2017
2,570
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.91 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. Red, Green, Blue, Alpha by @Laighlin
  5.  
  6. 1. leave the credit intact
  7. 2. don't redistribute or lift large chunks of code
  8. 3. send me a message if you need any help! (an example of
  9.   your problem would be preferred)
  10. 4. check my faq if you have questions about adding custom links!
  11.  
  12. Last update: 02.08.17 - Search bar was not properly inheriting body text color. This has been fixed.
  13.  
  14.  
  15. -->
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  19.  
  20. <meta name="image:Favicon" content=""/>
  21.  
  22. <meta name="if:Custom favicon" content="0"/>
  23. <meta name="if:Gradient background" content="1"/>
  24. <meta name="if:Plain background" content="0"/>
  25. <meta name="if:Borders" content="1"/>
  26. <meta name="if:Rounded corners" content="1"/>
  27. <meta name="if:Search bar" content="1"/>
  28.  
  29. <!-- text fields -->
  30. <meta name="text:Post width" content="400px"/>
  31. <meta name="text:Body font" content="Inconsolata"/>
  32. <meta name="text:Body font size" content="13px"/>
  33.  
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. <head><title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}{block:SearchPage} &mdash; {lang:Search results for SearchQuery}{/block:SearchPage}</title>
  37.  
  38. {block:ifCustomFavicon}
  39. <link rel="shortcut icon" href="{image:favicon}"/>
  40. {/block:ifCustomFavicon}
  41. {block:ifNotCustomFavicon}
  42. <link rel="shortcut icon" href="{Favicon}"/>
  43. {/block:ifNotCustomFavicon}
  44.  
  45. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  46. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  47.  
  48. <link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i" rel="stylesheet">
  49. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  51. <script src="https://static.tumblr.com/pqsvrdz/rKBmvnjxz/jquery.fitvids.js"></script>
  52. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  53. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  54. <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>
  55.  
  56. <style type="text/css">
  57.  
  58. .tmblr-iframe {
  59.     position:absolute;
  60. }
  61.  
  62. body, html { margin:0; padding:0; }
  63.  
  64. body {
  65.     color:{TitleColor};
  66.     font-family:'{text:body font}',sans-serif;
  67.     font-size:{text:body font size};
  68.     background-color:{BackgroundColor};
  69.     word-wrap:break-word;
  70.     overflow-y:auto;
  71.     overflow-x:hidden;
  72.     line-height:1.5em;
  73. }
  74.  
  75. .background { z-index:-99999; }
  76.  
  77. {block:ifNotPlainBackground}
  78. .background:before {
  79.     content:'';
  80.     position:fixed;
  81.     top:0; left:0; bottom:0; right:0;
  82.     {block:ifGradientBackground}
  83.     background-image:linear-gradient(rgba({RGBAccentColor},.7) 0,rgba({RGBAccentColor},.2) 100%);
  84.     {/block:ifGradientBackground}
  85.     {block:ifNotGradientBackground}
  86.     background-color:rgba({RGBAccentColor},.6);
  87.     {/block:ifNotGradientBackground}
  88. }
  89. {/block:ifNotPlainBackground}
  90.  
  91. #cred {
  92.     position:fixed;
  93.     bottom:20px;
  94.     left:20px;
  95.     font-weight:bold;
  96.     font-size:20px;
  97.     padding:5px;
  98.     color:rgba({RGBTitleColor},.7);
  99.     z-index:999999;
  100. }
  101.  
  102. #cred:hover { color:{AccentColor}; }
  103.  
  104. p:first-child, p>p:first-child { margin-top:2px; }
  105. p:last-child, p>p:last-child { margin-bottom:2px; }
  106.  
  107. a, .links, .tags, .pag {
  108.     transition:.15s ease-in-out;
  109. }
  110.  
  111. a {
  112.     text-decoration:none;
  113.     outline:none;
  114.     -moz-outline-style:none;
  115.     color:rgba({RGBAccentColor},.8);
  116.     padding:0;
  117. }
  118.  
  119. a:hover {
  120.     color:rgba({RGBTitleColor},.7);
  121. }
  122.  
  123. .caption a:hover:not(.more), #desc a:hover, .question a:hover, .answer a:hover {
  124.     border-bottom:1px solid {TitleColor};
  125. }
  126.  
  127. .caption a, #desc a, .question a, .answer a {
  128.     color:{TitleColor};
  129.     border-bottom:1px solid rgba({RGBAccentColor},.5);
  130. }
  131.  
  132. .caption hr, #desc hr {
  133.     border:none;
  134.     border-top:1px solid rgba({RGBAccentColor},.5);
  135.     margin:.5em 20%;
  136. }
  137.  
  138. img {
  139.     border:none;
  140.     max-width:100%;
  141. }
  142.  
  143. blockquote, blockquote blockquote {
  144.     padding:4px 4px 4px 10px;
  145.     margin:0;
  146.     margin-left:1px;
  147.     border-left:2px solid rgba({RGBAccentColor},.5);
  148.     background:rgba({RGBAccentColor},.05);
  149. }
  150.  
  151. h1 i { font-size:110%; }
  152.  
  153. ::selection {
  154.     background:rgba({RGBAccentColor},.7);
  155.     color:{BackgroundColor};
  156. }
  157.  
  158. ::moz-selection {
  159.     background:rgba({RGBAccentColor},.7);
  160.     color:{BackgroundColor};
  161. }
  162.  
  163. ::-webkit-scrollbar {
  164.     width:8px;
  165.     height:8px;
  166. }
  167.  
  168. ::-webkit-scrollbar-thumb {
  169.     background:{AccentColor} padding-box;
  170.     {block:ifRoundedCorners}
  171.     border-radius:10px;
  172.     {/block:ifRoundedCorners}
  173.     border:2px solid transparent;
  174. }
  175.  
  176. /* Track */
  177. ::-webkit-scrollbar-track {
  178.     border:solid rgba({RGBAccentColor},.3);
  179.     border-width:0 2px;
  180.     background:{BackgroundColor};
  181. }
  182.  
  183. ::-webkit-scrollbar-corner {
  184.     background:transparent;
  185. }
  186.  
  187. #s-m-t-tooltip, #side-content, #link-menu, .post, .nav, #cred, #search {
  188.     {block:ifRoundedCorners}
  189.     border-radius:7px;
  190.     {/block:ifRoundedCorners}
  191.     {block:ifBorders}
  192.     border:3px solid rgba({RGBAccentColor},.3);
  193.     {/block:ifBorders}
  194.     background:{BackgroundColor};
  195. }
  196.  
  197. #s-m-t-tooltip {
  198.     margin:0 15px;
  199.     padding:.5em;
  200.     font-size:95%;
  201.     line-height:1em;
  202.     z-index:9999999;
  203.     pointer-events:none;
  204. }
  205.  
  206. #sidebar {
  207.     width:250px;
  208.     position:fixed;
  209.     top:0;
  210.     bottom:0;
  211.     left:calc(50% - ({text:post width})/2 - 250px);
  212.     display:flex;
  213.     flex-flow:column nowrap;
  214.     align-items:center;
  215.     justify-content:center;
  216. }
  217.  
  218. #side-content {
  219.     box-sizing:border-box;
  220.     width:250px;
  221.     padding:10px;
  222.     text-align:center;
  223.     position:relative;
  224. }
  225.  
  226. #side-img {
  227.     background:{BackgroundColor};
  228.     height:100px;
  229.     width:100px;
  230.     margin:-70px auto 10px;
  231.     padding:5px;
  232.     {block:ifBorders}
  233.     border:3px solid rgba({RGBAccentColor},.3);
  234.     {/block:ifBorders}
  235. }
  236.  
  237. #side-img.circle { border-radius:50%; }
  238. #side-img.square {
  239.     {block:ifRoundedCorners}
  240.     border-radius:7px;
  241.     {/block:ifRoundedCorners}
  242. }
  243.  
  244. #navbar {
  245.     position:fixed;
  246.     left:calc(50% + ({text:post width})/2 + 100px);
  247.     top:0;
  248.     bottom:0;
  249.     display:flex;
  250.     flex-flow:column nowrap;
  251.     justify-content:center;
  252. }
  253.  
  254. #nav-measure {
  255.     position:relative;
  256.     display:flex;
  257.     flex-flow:column nowrap;
  258.     justify-content:center;
  259. }
  260.  
  261. .nav {
  262.     text-transform:uppercase;
  263.     margin:10px 0;
  264.     color:{TitleColor};
  265.     text-align:center;
  266.     padding:5px;
  267.     width:55px;
  268.     height:55px;
  269. }
  270.  
  271. .nav .fa {
  272.     font-size:24px;
  273.     margin-top:5px;
  274.     color:rgba({RGBAccentColor},.7);
  275. }
  276.  
  277. .nav .fa-home {
  278.     font-size:28px;
  279.     margin-top:3px;
  280.     margin-bottom:-3px;
  281. }
  282.  
  283. .lbl {
  284.     line-height:10px;
  285.     font-size:12px;
  286. }
  287.  
  288. #blog-name {
  289.     display:block;
  290.     font-size:1.5em;
  291. }
  292.  
  293. #title, .title, #menu-lbl, .lbl {
  294.     font-family:{TitleFont},'{text:body font}';
  295.     font-weight:{TitleFontWeight};
  296. }
  297.  
  298. #title {
  299.     font-size:1.1em;
  300.     font-weight:bold;
  301.     color:rgba({RGBTitleColor},.8);
  302. }
  303.  
  304. #desc {
  305.     margin-top:10px;
  306.     text-align:left;
  307. }
  308.  
  309. #search {
  310.     display:block;
  311.     margin:10px 0 0;
  312.     {block:ifBorders}width:234px;{/block:ifBorders}
  313.     {block:ifNotBorders}width:240px;{/block:ifNotBorders}
  314.     padding:5px;
  315. }
  316.  
  317. #search input, #search button {
  318.     outline:none;
  319.     border:none;
  320.     background:none;
  321. }
  322.  
  323. #search input { font:inherit; color:inherit; }
  324. #search button { color:rgba({RGBAccentColor},.7); }
  325.  
  326. #link-menu {
  327.     margin:10px 0 0;
  328.     position:relative;
  329.     width:250px;
  330.     box-sizing:border-box;
  331.     font-size:1.1em;
  332. }
  333.  
  334. #dropdown {
  335.     border-top:3px solid rgba({RGBAccentColor},.3);
  336.     display:none;
  337. }
  338.  
  339. .links {
  340.     padding:5px;
  341.     text-transform:uppercase;
  342.     display:block;
  343.     text-align:right;
  344. }
  345.  
  346. #menu-lbl {
  347.     color:rgba({RGBTitleColor},.8);
  348.     cursor:pointer;
  349.     text-align:left;
  350. }
  351.  
  352. #menu-lbl .fa {
  353.     float:right;
  354.     margin-right:3px;
  355. }
  356.  
  357. /* Post styling */
  358. #content {
  359.     left:calc(50% - ({text:post width})/2 + 50px);
  360.     position:absolute;
  361.     z-index:999;
  362.     width:{text:post width};
  363.     min-width:300px;
  364. }
  365.  
  366. .post {
  367.     margin:50px 0;
  368.     position:relative;
  369.     background:{BackgroundColor};
  370.     overflow:hidden;
  371. }
  372.  
  373. .rb-from {
  374.     padding:10px;
  375.     line-height:1em;
  376.     border-bottom:3px solid rgba({RGBAccentColor},.3);
  377. }
  378.  
  379. .rb-from a { font-size:1.2em; }
  380. .rb-from .post-type { float:right; }
  381.  
  382. .title {
  383.     line-height:1.2em;
  384.     font-size:1.7em;
  385.     margin:0;
  386.     text-align:center;
  387.     color:{AccentColor};
  388. }
  389.  
  390. .media-wrap { line-height:0; }
  391.  
  392. .chat { padding:.2em .5em; }
  393. .chat.even { background:rgba({RGBAccentColor},.1) }
  394.  
  395. .caption { padding:10px; }
  396. .caption:empty { display:none; }
  397. .caption a.tumblr_blog { font-weight:bold; }
  398. .caption .read-more {
  399.     display:inline-block;
  400.     margin:auto;
  401.     text-transform:uppercase;
  402.     text-decoration:none;
  403.     padding:7px;
  404.     border:1px solid rgba({RGBcolor:link},.5);
  405. }
  406.  
  407. .caption h1, .caption h2, .caption h3, .caption h4, .caption h5 {
  408.     margin:0;
  409.     color:rgba({RGBAccentColor},.8);
  410.     font-family:{TitleFont};
  411.     font-weight:{TitleFontWeight};
  412.     text-align:center;
  413. }
  414.  
  415. .caption h1 { font-size:1.5em; }
  416.  
  417. .caption ul li {
  418.     list-style-type:none;
  419.     position:relative;
  420. }
  421.  
  422. .caption ul li:before {
  423.     content:'\2014';
  424.     position:absolute;
  425.     left:-15px;
  426.     color:{AccentColor};
  427. }
  428.  
  429. .caption ol li {
  430.     margin-left:10px;
  431. }
  432.  
  433. .caption ol {
  434.     list-style-type:decimal-leading-zero;
  435. }
  436.  
  437. .caption ol li:before, .caption ul li:before {
  438.     font-weight:bold;
  439. }
  440.  
  441. .quest, .rb-ans {
  442.     padding:10px 10px 0;
  443. }
  444.  
  445. .quest { text-align:right; }
  446.  
  447. .avi {
  448.     border-radius:50%;
  449.     width:35px;
  450. }
  451.  
  452. .quest .avi {
  453.     float:right;  
  454. }
  455. .rb-ans .avi {
  456.     float:left;
  457. }
  458.  
  459. .question, .answer {
  460.     {block:ifRoundedCorners}
  461.     border-radius:4px;
  462.     {/block:ifRoundedCorners}
  463.     position:relative;
  464.     padding:7px;
  465.     background:rgba({RGBAccentColor},.1);
  466. }
  467.  
  468. .question:before, .answer:before {
  469.     content:'';
  470.     position:absolute;
  471.     height:0;
  472.     width:0;
  473.     border:8px solid transparent;
  474.     background-color:rgba({RGBAccentColor},.1);
  475.     background-clip:padding-box;
  476.     top:10px;
  477. }
  478.  
  479. .question:before {
  480.     right:-16px;
  481.     border-left-color:rgba({RGBAccentColor},.1);
  482. }
  483.  
  484. .answer:before {
  485.     left:-16px;
  486.     border-right-color:rgba({RGBAccentColor},.1);
  487. }
  488.  
  489. .question {
  490.     margin-right:50px;
  491. }
  492.  
  493. .answer {
  494.     margin-left:50px;
  495. }
  496.  
  497. .quote {
  498.     padding:10px;
  499.     font:{TitleFontWeight} 1.4em {TitleFont};
  500.     color:{TitleColor};
  501.     text-indent:10px;
  502.     position:relative;
  503. }
  504.  
  505. .quote .fa {
  506.     position:absolute;
  507.     font-size:40px;
  508.     color:rgba({RGBAccentColor},.15);
  509.     left:0;
  510.     top:5px;
  511. }
  512.  
  513. .more {
  514.     text-transform:uppercase;
  515.     padding:10px;
  516.     border:1px solid rgba({RGBAccentColor},.5);
  517.     display:inline-block;
  518. }
  519.  
  520. .more:hover {
  521.     border-color:rgba({RGBTitleColor},.5);
  522. }
  523.  
  524. .tag-wrap {
  525.     padding:10px;
  526. }
  527.  
  528. .tag-wrap .fa-tags, .rb-from .fa {
  529.     color:rgba({RGBTitleColor},.5);
  530. }
  531.  
  532. .tags { color:{AccentColor}; }
  533. .tags:hover { text-decoration:underline; }
  534.  
  535. .info {
  536.     padding:10px;
  537.     border-top:3px solid rgba({RGBAccentColor},.3);
  538. }
  539.  
  540. .controls {
  541.     float:right;
  542.     position:relative;
  543.     font-size:16px;
  544. }
  545.  
  546. .controls a {
  547.    position:relative;
  548.    display:inline-block;
  549. }
  550.  
  551. .controls .fa-retweet {
  552.     font-size:20px;
  553.     line-height:20px;
  554. }
  555.  
  556. .like-wrap {
  557.     position:relative;
  558.     width:30px;
  559.     height:30px;
  560. }
  561.  
  562. .like_button {
  563.     position: absolute;
  564.     z-index:5;
  565.     top:-2px;
  566.     left:0;
  567.     opacity:0;
  568.     width:16px;
  569.     height:16px;
  570. }
  571.  
  572. .like_button iframe {
  573.     width:100% !important;
  574.     height:100% !important;
  575. }
  576.  
  577. .like-btn {
  578.     position:absolute;
  579.     top:-2px;
  580.     z-index:1;
  581. }
  582.  
  583. .like_button.liked + .like-btn {
  584.     color:#f55;
  585. }
  586.  
  587. #note {
  588.     margin-bottom:50px;
  589.     padding:10px;
  590. }
  591.  
  592. #note blockquote { margin-left:9px; }
  593.  
  594. #note ol.notes {
  595.     list-style-type:none;
  596.     padding:0;
  597.     margin:0;
  598. }
  599.  
  600. li.note {
  601.     border-bottom:1px solid rgba({RGBcolor:borders},.5);
  602.     padding:5px;
  603. }
  604.  
  605. #note ol.notes li:last-child { border-bottom:none; }
  606.  
  607. #note ol.notes img.avatar {
  608.     margin-right:7px;
  609.     margin-top:calc(1em - 15px);
  610.     width:20px;
  611.     height:20px;
  612.     float:left;
  613.     border-radius:50%;
  614. }
  615.  
  616. @media all and (max-height:630px) {
  617.     #top { display:none; }
  618. }
  619.  
  620. #top.inactive {
  621.     opacity:0;
  622.     pointer-events:none;
  623. }
  624.  
  625. {CustomCSS}
  626.  
  627. </style>
  628.  
  629. <script>
  630. $(document).ready(function() {
  631.     $('.media-wrap').fitVids(); // video resizing script
  632.     $('.photo-slideshow').pxuPhotoset({
  633.        lightbox: true,
  634.        rounded: false,
  635.        gutter: '4px',
  636.        borderRadius: '0px',
  637.        photoset: '.photo-slideshow',
  638.        photoWrap: '.photo-data',
  639.        photo: '.pxu-photo'
  640.     }); // photoset resizing script
  641.     $('[title]').style_my_tooltips({
  642.         tip_follows_cursor:true,
  643.         tip_delay_time:100,
  644.         tip_fade_speed:300
  645.     }); // tooltip script
  646.     $('#menu-lbl').click(function() {
  647.         $('#dropdown').slideToggle(200);
  648.         if($('#desc').height() > 300) {
  649.             $('#desc').slideToggle(200);
  650.         }
  651.         $('#menu-lbl .fa-caret-down').toggleClass('fa-rotate-180');
  652.     });
  653.     $('iframe.tumblr_audio_player').load( function() {
  654.         $('iframe.tumblr_audio_player').height(85).contents().find("head")
  655.            .append($("<style type='text/css'> .audio-player { background:rgba({RGBAccentColor},.3) !important; width:calc({text:post width} - 6px) !important } .audio-player * { color:{TitleColor} !important } </style>"));
  656.     }); //changes music player colors
  657.     $(window).scroll(function() {
  658.         if($(this).scrollTop() > 400) {
  659.             $("#top").removeClass("inactive");
  660.     }
  661.         else {
  662.             $("#top").addClass("inactive");
  663.         }
  664.     }); //renders the scroll to top button initially invisible
  665.     $("#top").click(function() {
  666.         $("html, body").animate({ scrollTop: 0 }, 400);
  667.         return false;
  668.     });
  669. });
  670. </script>
  671.    
  672. </head>
  673.  
  674. <body class="background">
  675.  
  676. <a id="cred" title="Theme by Laighlin" href="http://linthm.tumblr.com/thm">@L</a>
  677.  
  678. <div id="sidebar">
  679.     <div id="side-content">
  680.         <a href="/">
  681.         {block:ShowAvatar}
  682.             <img id="side-img" class="{AvatarShape}" src="{PortraitURL-128}">
  683.         {/block:ShowAvatar}
  684.         </a>
  685.         <a id="blog-name" href="/">@{Name}</a>
  686.         {block:ShowTitle}
  687.             <div id="title">{Title}</div>
  688.         {/block:ShowTitle}
  689.         {block:ShowDescription}{block:Description}
  690.             <div id="desc">{Description}</div>
  691.         {/block:Description}{/block:ShowDescription}
  692.     </div>
  693.     {block:ifSearchBar}
  694.     <form id="search" action="/search" method="get">
  695.         <button type="submit" value="search" title="{lang:Search}"><span class="fa fa-search"></span></button>
  696.         <input type="text" name="q" value="{URLSafeSearchQuery}"/>
  697.     </form>
  698.     {/block:ifSearchBar}
  699.     {block:HasPages}
  700.     <div id="link-menu">
  701.         <div id="menu-lbl" class="links"><span class="fa fa-caret-down" aria-label="hidden"></span>Navigation</div>
  702.         <div id="dropdown">
  703.             {block:Pages}<a class="links" href="{URL}" target="_blank">{Label}</a>{/block:Pages}
  704.         </div>
  705.     </div>
  706.     {/block:HasPages}
  707. </div> <!-- End of sidebar -->
  708.  
  709. <!-- Posts -->
  710. <div id="content">
  711.     {block:SearchPage}
  712.     <article class="post">
  713.         <div class="caption">
  714.             <h2 class="title">
  715.                 {block:SearchResults}
  716.                     {lang:SearchResultCount results for SearchQuery 2}
  717.                 {/block:SearchResults}
  718.                 {block:NoSearchResults}
  719.                     {lang:No search results for SearchQuery 2}
  720.                 {/block:NoSearchResults}
  721.             </h2>
  722.         </div>
  723.     </article>
  724.     {/block:SearchPage}
  725.     {block:TagPage}
  726.     <article class="post">
  727.         <div class="caption">
  728.             <h2 class="title">
  729.                 {lang:Posts tagged Tag 3}
  730.             </h2>
  731.         </div>
  732.     </article>
  733.     {/block:TagPage}
  734.     {block:Posts inlineMediaWidth="400" inlineNestedMediaWidth="370"}
  735.     <article class="post">
  736.         {block:RebloggedFrom}
  737.         <div class="rb-from">
  738.             <span class="fa fa-retweet" aria-label="Reblogged from"></span> <a href="{ReblogParentURL}">{ReblogParentName}</a>
  739.             <span class="fa
  740.            {block:Text}fa-align-left{/block:Text}
  741.            {block:Answer}fa-question{/block:Answer}
  742.            {block:Chat}fa-comments-o{/block:Chat}
  743.            {block:Quote}fa-quote-right{/block:Quote}
  744.            {block:Link}fa-link{/block:Link}
  745.            {block:Photo}fa-camera{/block:Photo}
  746.            {block:Photoset}fa-camera{/block:Photoset}
  747.            {block:Audio}fa-music{/block:Audio}
  748.            {block:Video}fa-video-camera{/block:Video}
  749.            fa-fw post-type" aria-label="{PostTypeNoun}"></span>
  750.         </div>
  751.         {/block:RebloggedFrom}
  752.         {block:Text}
  753.         <div class="caption">
  754.             {block:Title}<h2 class="title">{Title}</h1>{/block:Title}
  755.             {Body}
  756.         </div>
  757.         {/block:Text}
  758.        
  759.         {block:Answer}
  760.         <div class="quest">
  761.             <img class="avi" src="{AskerPortraitURL-40}">
  762.             <div class="question">
  763.                 <p>{Question}</p>&mdash; {Asker}
  764.             </div>
  765.         </div>
  766.         {block:Answerer}
  767.         <div class="rb-ans">
  768.             <img class="avi" src="{AnswererPortraitURL-40}">
  769.             <div class="answer">
  770.                 {Answerer} replied &mdash;<p>{Answer}
  771.             </div>
  772.         </div>
  773.         {/block:Answerer}
  774.         <div class="caption">{Replies}</div>
  775.         {/block:Answer}
  776.        
  777.         {block:Chat}
  778.         {block:Title}<h2 class="title">{Title}</h1>{/block:Title}
  779.         {block:Lines}
  780.         <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
  781.         {/block:Lines}
  782.         {/block:Chat}
  783.        
  784.         {block:Quote}
  785.         <div class="quote">
  786.             <i class="fa fa-quote-left" aria-hidden="true"></i>
  787.             {Quote}
  788.         </div>
  789.         {block:Source}
  790.         <div class="caption" style="text-align:right">&mdash; {Source}</div>
  791.         {/block:Source}
  792.         {/block:Quote}
  793.        
  794.         {block:Link}
  795.         <div class="caption">
  796.             <a href="{URL}"><h2 class="title"><span class="fa fa-external-link"></span> {Name}</h2></a>
  797.             {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
  798.             {block:Description}{Description}{/block:Description}
  799.         </div>
  800.         {/block:Link}
  801.        
  802.         {block:Photo}
  803.         <div class="media-wrap">
  804.             {LinkOpenTag}<center><img src="{PhotoURL-500}"></center>{LinkCLoseTag}
  805.         </div>
  806.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  807.         {/block:Photo}
  808.        
  809.         {block:Photoset}
  810.         <div class="media-wrap">
  811.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  812.             {block:Photos}
  813.             <div class="photo-data">
  814.                 <div class="pxu-photo"><img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  815.                 <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  816.             </div>
  817.             {/block:Photos}
  818.             </div>
  819.         </div>
  820.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  821.         {/block:Photoset}
  822.        
  823.         {block:Audio}
  824.         <div class="media-wrap">
  825.             {AudioEmbed-500}
  826.         </div>
  827.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  828.         {/block:Audio}
  829.        
  830.         {block:Video}
  831.         <div class="media-wrap">{VideoEmbed-500}</div>
  832.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  833.         {/block:Video}
  834.        
  835.         {block:More}
  836.         <div class="caption"><center><a class="more lbl" href="{Permalink}">{lang:Read more}</a></center></div>
  837.         {/block:More}
  838.        
  839.         {block:HasTags}
  840.         <div class="tag-wrap">
  841.             <span class="fa fa-tags"></span>
  842.             {block:Tags}#<a href="{TagURL}" class="tags">{Tag}</a> {/block:Tags}
  843.         </div>
  844.         {/block:HasTags}
  845.        
  846.         {block:Date}
  847.         <footer class="info">
  848.             {block:ContentSource}
  849.             {lang:Source}: <a href="{SourceURL}" style="line-height:1em">{SourceTitle}</a><br/>
  850.             {/block:ContentSource}
  851.             <a href="{ShortURL}" title="{TimeAgo}">{DayOfMonth}.{MonthNumber}.{Year}</a>
  852.             {block:NoteCount} // <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  853.             <span class="controls">
  854.                 <a class="fa fa-retweet" title="Reblog" href="{ReblogURL}"></a>
  855.                 <span class="like-wrap" title="Like">{LikeButton}<a class="like-btn"><i class="fa fa-heart"></i></a></span>
  856.             </span>
  857.         </footer>
  858.         {/block:Date}
  859.     </article>
  860.    
  861.     {block:PostNotes}
  862.     <footer class="post" id="note">
  863.         <div class="note-border">
  864.             {PostNotes-64}
  865.         </div>
  866.     </footer>
  867.     {/block:PostNotes}
  868.     {/block:Posts}
  869. </div>
  870.  
  871.        
  872. <div id="navbar">
  873.     <div id="nav-measure">
  874.     <a class="nav" href="/">
  875.         <i class="fa fa-home fa-fw"></i>
  876.         <h3 class="lbl">{lang:Home}</h3>
  877.     </a>
  878.     {block:AskEnabled}
  879.     <a class="nav" href="/ask" target="_blank">
  880.         <i class="fa fa-pencil fa-fw"></i>
  881.         <h3 class="lbl">{lang:Mail}</h3>
  882.     </a>
  883.     {/block:AskEnabled}
  884.     {block:SubmissionsEnabled}
  885.     <a class="nav" href="/submit" target="_blank">
  886.         <i class="fa fa-envelope fa-fw"></i>
  887.         <h3 class="lbl">Submit</h3>
  888.     </a>
  889.     {/block:SubmissionsEnabled}
  890.     <a class="nav" href="/archive" target="_blank">
  891.         <i class="fa fa-calendar fa-fw"></i>
  892.         <h3 class="lbl">{lang:Archive}</h3>
  893.     </a>
  894.     {block:PreviousPage}
  895.     <a class="nav" href="{PreviousPage}">
  896.         <i class="fa fa-arrow-left fa-fw"></i>
  897.         <h3 class="lbl">{lang:Prev}</h3>
  898.     </a>
  899.     {/block:PreviousPage}
  900.     {block:NextPage}
  901.     <a class="nav" href="{NextPage}">
  902.         <i class="fa fa-arrow-right fa-fw"></i>
  903.         <h3 class="lbl">{lang:Next}</h3>
  904.     </a>
  905.     {/block:NextPage}
  906.     <a class="nav inactive" href="#" id="top">
  907.         <i class="fa fa-arrow-up fa-fw"></i>
  908.         <h3 class="lbl">To Top</h3>
  909.     </a>
  910.     </div>
  911. </div>
  912.  
  913. </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!