API tools faq
paste
Advertisement
Laighlin

#21: RGBA(2)

Laighlin
Sep 29th, 2017
2,008
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. Red, Green, Blue, Alpha (2) 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, with an example
  9.       of your problem if possible
  10.    4. check my faq if you have questions about adding custom
  11.       links!
  12.  
  13.  
  14. -->
  15.  
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  
  19. <meta name="image:Favicon" content=""/>
  20.  
  21. <meta name="if:Custom favicon" content="0"/>
  22. <meta name="if:Gradient border" content="1"/>
  23. <meta name="if:Rounded corners" content="1"/>
  24. <meta name="if:Shadow effects" content="0"/>
  25.  
  26. <!-- text fields -->
  27. <meta name="text:Post width" content="400px"/>
  28. <meta name="text:Body font" content="Source Sans Pro"/>
  29. <meta name="text:Body font size" content="13px"/>
  30.  
  31.  
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  33. <head><title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}{block:SearchPage} &mdash; {lang:Search results for SearchQuery}{/block:SearchPage}</title>
  34.  
  35. {block:ifCustomFavicon}
  36. <link rel="shortcut icon" href="{image:favicon}"/>
  37. {/block:ifCustomFavicon}
  38. {block:ifNotCustomFavicon}
  39. <link rel="shortcut icon" href="{Favicon}"/>
  40. {/block:ifNotCustomFavicon}
  41.  
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44.  
  45. <link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i" rel="stylesheet">
  46. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  48. <script src="https://static.tumblr.com/pqsvrdz/rKBmvnjxz/jquery.fitvids.js"></script>
  49. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  50. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  51. <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>
  52.  
  53. <style type="text/css">
  54.  
  55. @font-face {
  56.     font-family: Calluna;
  57.     src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  58.     src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  59.     font-weight: 700;
  60.     font-style: italic;
  61. }
  62.  
  63. @font-face {
  64.     font-family: Fairwater;
  65.     src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  66.     font-weight: 400;
  67.     font-style: normal;
  68. }
  69. p.npf_quirky { font:1.7em Fairwater; }
  70. p.npf_chat { font:1.7em Courier; }
  71. p.npf_quote { font:1.7em Calluna; }
  72.  
  73. .tmblr-iframe {
  74.     position:absolute;
  75.     -webkit-transform:scale(.8) !important;
  76.     -moz-transform:scale(.8) !important;
  77.     -ms-transform:scale(.8) !important;
  78.     transform:scale(.8) !important;
  79.     margin-top:-7px !important;
  80.     margin-left:-23px !important;
  81. }
  82.  
  83. body, html {
  84.     margin:0;
  85.     padding:0;
  86. }
  87.  
  88. ::selection {
  89.     background:rgba({RGBAccentColor},.7);
  90.     color:{BackgroundColor};
  91. }
  92.  
  93. ::moz-selection {
  94.     background:rgba({RGBAccentColor},.7);
  95.     color:{BackgroundColor};
  96. }
  97.  
  98. #s-m-t-tooltip {
  99.     margin:0 16px;
  100.     z-index:999999999;
  101.     padding:5px 7px;
  102.     border:1px solid rgba({RGBAccentColor},.5);
  103.     background:{BackgroundColor};
  104.     pointer-events:none;
  105.     white-space:pre;
  106.     font-style:italic;
  107. }
  108.  
  109. a {
  110.     color:{AccentColor};
  111.     text-decoration:none;
  112. }
  113.  
  114. .post ol {
  115.     list-style-type:decimal-leading-zero;
  116.     padding-left:40px;
  117. }
  118.  
  119. .post ul {
  120.     list-style-type:none;
  121.     padding-left:35px;
  122. }
  123.  
  124. .post ul li { position:relative; }
  125. .post ul li:before {
  126.     font-family:'saturnicons';
  127.     content:'\e2be';
  128.     color:rgba({RGBAccentColor},.7);
  129.     position:absolute;
  130.     left:-25px;
  131.     top:1px;
  132.     font-size:.9em;
  133. }
  134.  
  135. h1, h2 {
  136.     margin:0;
  137.     font-weight:inherit;
  138. }
  139.  
  140. p:first-child { margin-top:0; }
  141. p:last-child { margin-bottom:0; }
  142.  
  143. blockquote, blockquote blockquote {
  144.     margin:1em 0 1em 10px;
  145.     padding-left:10px;
  146.     border-left:1px solid rgba({RGBAccentColor},.6);
  147. }
  148.  
  149. body {
  150.     color:{TitleColor};
  151.     font-family:'{text:body font}',sans-serif;
  152.     font-size:{text:body font size};
  153.     background-color:{BackgroundColor};
  154.     word-wrap:break-word;
  155.     overflow-y:scroll;
  156.     overflow-x:hidden;
  157.     line-height:1.5em;
  158. }
  159.  
  160. #border-holder {
  161.     z-index:99;
  162.     top:0;
  163.     bottom:0;
  164.     left:0;
  165.     right:0;
  166.     position:fixed;
  167.     border:40px solid;
  168.     pointer-events:none;
  169.     {block:ifGradientBorder}
  170.     border-image:linear-gradient(to bottom, rgba({RGBAccentColor},.5), {BackgroundColor});
  171.     border-image-slice:1;
  172.     {/block:ifGradientBorder}
  173.     {block:ifNotGradientBorder}
  174.     border-color:rgba({RGBAccentColor},.5);
  175.     {/block:ifNotGradientBorder}
  176. }
  177.  
  178. #top.strip { top:0; }
  179. #bottom.strip { bottom:0; }
  180. .strip {
  181.     position:fixed;
  182.     z-index:98;
  183.     background:{BackgroundColor};
  184.     height:40px;
  185.     left:0;
  186.     right:0;
  187. }
  188.  
  189. ::-webkit-scrollbar {
  190.     width:9px;
  191.     height:9px;
  192. }
  193.  
  194. ::-webkit-scrollbar-thumb {
  195.     background:{AccentColor};
  196.     border:3px solid {BackgroundColor};
  197. }
  198.  
  199. /* Track */
  200. ::-webkit-scrollbar-track {
  201.     background:{TitleColor};
  202.     border:3px solid {BackgroundColor};
  203. }
  204.  
  205. ::-webkit-scrollbar-corner {
  206.     background:{color:borders};
  207. }
  208.  
  209. #title {
  210.     position:fixed;
  211.     color:{TitleColor};
  212.     line-height:1em;
  213.     font:130% {TitleFont};
  214.     font-weight:{TitleFontWeight};
  215.     top:calc(20px - .7em);
  216.     left:20px;
  217.     /*text-transform:uppercase;*/
  218.     {block:ifShadowEffects}
  219.     text-shadow:1px 1px {BackgroundColor};
  220.     {/block:ifShadowEffects}
  221. }
  222.  
  223. .back-btn {
  224.     display:block;
  225.     margin:auto;
  226.     background:rgba({RGBAccentColor},.2);
  227.     text-transform:uppercase;
  228.     text-align:center;
  229.     color:{TitleColor};
  230.     position:relative;
  231.     max-width:70px;
  232.     padding:7px;
  233.     font-size:1.2em;
  234.     margin-top:15px;
  235.     cursor:pointer;
  236. }
  237.  
  238. #desc, #elinks-wrap {
  239.     position:fixed;
  240.     width:300px;
  241.     top:30%;
  242.     left:calc(50% - 150px);
  243.     display:none;
  244. }
  245.  
  246. .desc-line { border-top:1px solid {AccentColor}; }
  247. #user-avi {
  248.     width:100px;
  249.     border:20px solid {BackgroundColor};
  250.     border-radius:100%;
  251.     left:80px;
  252.     margin-top:-75px;
  253.     position:relative;
  254.    
  255. }
  256.  
  257. #elinks-wrap {
  258.     text-align:center;
  259. }
  260.  
  261. .elink {
  262.     display:inline-block;
  263.     margin:5px;
  264.     padding:5px 7px;
  265.     border:1px solid rgba({RGBAccentColor},.5);
  266.     font-size:1.3em;
  267. }
  268.  
  269. #link-wrap, #pag-wrap {
  270.     position:fixed;
  271.     top:40px;
  272.     bottom:40px;
  273.     width:40px;
  274.     display:flex;
  275.     flex-flow:column nowrap;
  276.     align-items:center;
  277.     justify-content:center;
  278. }
  279.  
  280. #link-wrap, #pag-wrap, #title, #cred { z-index:9999; }
  281.  
  282. #link-wrap { left:20px; }
  283. #pag-wrap { right:20px; }
  284.  
  285. .links {
  286.     background:{BackgroundColor};
  287.     font-size:21px;
  288.     padding:9px;
  289.     border-radius:50%;
  290.     margin:10px 0;
  291.     line-height:16px;
  292.     {block:ifShadowEffects}
  293.     box-shadow:1px 1px 2px rgba({RGBTitleColor},.5);
  294.     {/block:ifShadowEffects}
  295.     cursor:pointer;
  296. }
  297.  
  298. .inactive {
  299.     color:rgba({RGBTitleColor},.3);
  300.     pointer-events:none;
  301. }
  302.  
  303. #content {
  304.     margin:80px auto;
  305.     width:{text:post width};
  306. }
  307.  
  308. {block:ifRoundedCorners}
  309. #s-m-t-tooltip, .media-wrap, .aud-lbl, .que, .ans, .chat, .quote, .audholder, .elink, .back-btn, .more {
  310.     border-radius:3px;        
  311. }
  312. {/block:ifRoundedCorners}
  313.  
  314. .post {
  315.     margin:70px 0;
  316. }
  317.  
  318. .caption {
  319.     margin-top:10px;
  320. }
  321.  
  322. .caption a, .ans a, #desc a:not(.back-btn) {
  323.     border-bottom:1px solid rgba({RGBTitleColor},.5);
  324.     transition:.2s all ease;
  325. }
  326.  
  327. .caption a:hover {
  328.     border-color:transparent;
  329. }
  330.  
  331. .caption .tumblr_blog {
  332.     font-weight:bold;
  333. }
  334.  
  335. .chat { padding:3px 5px; }
  336. .chat.odd { background:rgba({RGBAccentColor},.2); }
  337. .chat.even { padding-left:20px; }
  338.  
  339. .more {
  340.     display:inline-block;
  341.     padding:5px 7px;
  342.     border:none !important;
  343.     color:{TitleColor};
  344.     text-transform:uppercase;
  345.     background:rgba({RGBAccentColor},.2);
  346. }
  347.  
  348. .quote {
  349.     font:1.3em {TitleFont};
  350.     background:rgba({RGBAccentColor},.2);
  351.     padding:10px;
  352. }
  353.  
  354. .post hr, #desc hr {
  355.     margin:1em 15%;
  356.     border:none;
  357.     border-top:1px solid rgba({RGBAccentColor},.5);
  358. }
  359.  
  360. .media-wrap {
  361.     width:{text:post width};
  362.     overflow:hidden;
  363.     margin:0;
  364. }
  365.  
  366. .media-wrap img {
  367.     max-width:{text:post width};
  368. }
  369.  
  370. .title {
  371.     font:1.5em {TitleFont};
  372.     font-weight:{TitleFontWeight};
  373.     color:{AccentColor};
  374.     text-align:right;
  375.     display:block;
  376.     transition:1.5s all ease;
  377. }
  378.  
  379. a .title:hover {
  380.     color:{TitleColor};
  381. }
  382.  
  383. /*Audio posts*/
  384.  
  385. .aud {
  386.     height:30px;
  387.     width:23px;
  388.     overflow:hidden;
  389.     position:relative;
  390.     margin-top:16px;
  391.     margin-left:14px;
  392. }
  393.  
  394. .audholder {
  395.     position:absolute;
  396.     z-index:30;
  397.     background:#f3f3f3;
  398.     margin-top:31px;
  399.     margin-left:31px;
  400.     width:60px;
  401.     height:60px;
  402.     opacity:.5;
  403.     filter:invert(100%);
  404. }
  405.  
  406. .song {
  407.     height:121px;
  408.     margin-left:135px;
  409.     display:flex;
  410.     flex-flow:column nowrap;
  411.     justify-content:center;
  412. }
  413.  
  414. .song > div {
  415.     margin:4px 0;
  416. }
  417.  
  418. .aud-lbl {
  419.     font-variant:small-caps;
  420.     padding:2px 4px;
  421.     margin-right:5px;
  422.     background:rgba({RGBAccentColor},.3);
  423. }
  424.  
  425. .cover {
  426.     margin-right:5px;
  427.     width:121px;
  428.     height:121px;
  429.     float:left;
  430.     background-size:cover;
  431.     z-index:1;
  432.     border-radius:50%;
  433. }
  434.  
  435. /*Ask posts*/
  436.  
  437. .que, .ans {
  438.     padding:10px;
  439.     position:relative;
  440. }
  441.  
  442. .que {
  443.     background:rgba({RGBAccentColor},.2);
  444. }
  445.  
  446. .que:before {
  447.     all:initial;
  448.     content:'';
  449.     position:absolute;
  450.     height:0px;
  451.     width:0px;
  452.     border:7px solid transparent;
  453.     border-top:7px solid rgba({RGBAccentColor},.2);
  454.     bottom:-14px;
  455.     right:30px;
  456. }
  457.  
  458. .askr {
  459.     position:relative;
  460.     margin-top:10px;
  461.     margin-right:20px;
  462.     text-align:right;
  463.     text-transform:uppercase;
  464. }
  465.  
  466. .ans {
  467.     border:1px solid rgba({RGBAccentColor},.5);
  468.     margin-bottom:20px;
  469. }
  470.  
  471. .ans:before, .ans:after {
  472.     all:initial;
  473.     content:'';
  474.     position:absolute;
  475.     height:0px;
  476.     width:0px;
  477.     border:7px solid transparent;
  478.     top:-14px;
  479.     left:30px;
  480. }
  481.  
  482. .ans:before {
  483.     border-bottom:7px solid rgba({RGBAccentColor},.5);
  484. }
  485.  
  486. .ans:after {
  487.     border-bottom:7px solid {BackgroundColor};
  488.     margin-top:1px;
  489. }
  490.  
  491. .answrr {
  492.     text-transform:uppercase;
  493.     margin:5px 0 10px 20px;
  494. }
  495.  
  496. .tag-wrap {
  497.     margin-top:10px;
  498. }
  499.  
  500. a.tags:hover {
  501.     color:rgba({RGBAccentColor},.7);
  502.     transition:.2s all ease;
  503. }
  504.  
  505. /*Post footers*/
  506.  
  507. .info {
  508.     font-size:92%;
  509.     text-transform:uppercase;
  510.     position:relative;
  511.     min-height:10px;
  512.     margin:20px auto 0;
  513. }
  514.  
  515. .controls {
  516.     font:initial;
  517.     position:absolute;
  518.     font-size:16px;
  519.     bottom:0;
  520.     right:0;
  521.     pointer-events:none;
  522.     /* ^ really nitpicky, sorry, i just hate that text cursor that pops up between the like and reblog buttons*/
  523. }
  524.  
  525. .controls * {
  526.     pointer-events:initial;
  527.     color:rgba({RGBAccentColor},.7);
  528. }
  529.  
  530. .like-wrap {
  531.     position:relative;
  532.     width:30px;
  533.     height:30px;
  534. }
  535.  
  536. .like_button {
  537.     position:absolute;
  538.     z-index:5;
  539.     top:-2px;
  540.     left:0;
  541.     opacity:0;
  542.     width:16px;
  543.     height:16px;
  544. }
  545.  
  546. .like_button iframe {
  547.     width:100% !important;
  548.     height:100% !important;
  549. }
  550.  
  551. .like-btn { z-index:1; }
  552.  
  553. .like_button.liked + .like-btn { color:#f55; }
  554.  
  555. .tumblr_video_iframe {
  556.     width:{text:post width} !important;
  557. }
  558.  
  559. #note blockquote { margin-left:9px; }
  560.  
  561. #note ol.notes {
  562.     list-style-type:none;
  563.     padding:0;
  564.     margin:0;
  565. }
  566.  
  567. li.note {
  568.     border-bottom:1px solid rgba({RGBAccentColor},.5);
  569.     padding:10px 5px;
  570. }
  571.  
  572. #note ol.notes li:last-child { border-bottom:none; }
  573.  
  574. #note ol.notes img.avatar {
  575.     margin-right:7px;
  576.     margin-top:calc(1em - 13px);
  577.     width:20px;
  578.     height:20px;
  579.     float:left;
  580.     border-radius:50%;
  581. }
  582.  
  583. {CustomCSS}
  584.  
  585. </style>
  586. </head>
  587.  
  588. <body class="background">
  589. <div id="top" class="strip"></div>
  590. <div id="bottom" class="strip"></div>
  591. <div id="border-holder"></div>
  592.  
  593. {block:ShowTitle}<h1 id="title">{Title}</h1>{/block:ShowTitle}
  594.  
  595. <nav id="link-wrap">
  596.     <a class="links sf sf-home-o" href="/" title="Home"></a>
  597.     {block:ShowDescription}{block:Description}<a class="links sf sf-user-o" id="desc-btn" title="About"></a>{/block:Description}{/block:ShowDescription}
  598.     {block:AskEnabled}<a class="links sf sf-chat-o" href="/ask" title="Ask"></a>{/block:AskEnabled}
  599.     {block:SubmissionsEnabled}<a class="links sf sf-envelope-3-o" href="/submit" title="Submit"></a>{block:SubmissionsEnabled}
  600.     {block:HasPages}<a class="links sf sf-list-o" id="elinks-btn" title="Links"></a>{/block:HasPages}
  601.     <a class="links sf sf-code-o" href="http://linthm.tumblr.com/tagged/thm" title="Theme by Laighlin"></a>
  602. </nav>
  603.  
  604. {block:ShowDescription}{block:Description}
  605. <aside id="desc">
  606.     {block:ShowAvatar}
  607.     <div class="desc-line"><img id="user-avi" src="{PortraitURL-128}"></div>
  608.     {/block:ShowAvatar}
  609.     {Description}<a class="back-btn">Back</a>
  610. </aside>
  611. {/block:Description}{/block:ShowDescription}
  612. {block:HasPages}
  613. <nav id="elinks-wrap">
  614.     {block:Pages}<a class="elink" href="{URL}">{Label}</a>{/block:Pages}
  615.     <a class="back-btn">Back</a>
  616. </nav>
  617. {/block:HasPages}
  618.  
  619. <main id="content">
  620.     {block:Posts inlineMediaWidth="380" inlineNestedMediaWidth="380"}
  621.     <article class="post">
  622.         {block:Text}
  623.         {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  624.         <div class="caption">{Body}</div>
  625.         {/block:Text}
  626.        
  627.         {block:Link}
  628.         <a href="{URL}"><h2 class="title"><span class="sf sf-link-2-o">&nbsp;</span> {Name}</h2></a>
  629.         <div class="caption">
  630.             {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
  631.             {block:Description}
  632.                 {Description}
  633.             {/block:Description}
  634.         </div>
  635.         {/block:Link}
  636.        
  637.         {block:Quote}
  638.         <div class="quote">&ldquo;{Quote}&rdquo;</div>
  639.         {block:Source}<div class="caption" style="margin-top:10px;text-align:right">&mdash; {Source}</div>{/block:Source}
  640.         {/block:Quote}
  641.        
  642.         {block:Chat}
  643.         {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  644.         {block:Lines}
  645.         <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
  646.         {/block:Lines}
  647.         {/block:Chat}
  648.        
  649.         {block:Photo}
  650.         <figure class="media-wrap">{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}</figure>
  651.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  652.         {/block:Photo}
  653.        
  654.         {block:Photoset}
  655.         <div class="media-wrap">
  656.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  657.             {block:Photos}
  658.             <div class="photo-data">
  659.                 <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>
  660.                 <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  661.             </div>
  662.             {/block:Photos}
  663.             </div>
  664.         </div>
  665.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  666.         {/block:Photoset}
  667.        
  668.         {block:Video}
  669.         <div class="media-wrap vid">{Video-500}</div>
  670.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  671.         {/block:Video}
  672.        
  673.         {block:Audio}
  674.         <div class="media-wrap audi">
  675.             {block:AlbumArt} <img src="{AlbumArtURL}" class="cover"> {/block:AlbumArt}
  676.             <div class="audholder">
  677.                 <div class="aud">
  678.                   {AudioPlayer}
  679.                 </div>
  680.             </div>
  681.             <div class="song">
  682.                 {block:Artist}<div>
  683.                     <span class="aud-lbl">Artist</span> {Artist}
  684.                 </div>{/block:Artist}
  685.                 {block:TrackName}<div>
  686.                     <span class="aud-lbl">Title</span> <i>{TrackName}</i>
  687.                 </div>{/block:TrackName}
  688.                 {block:Album}<div>
  689.                     <span class="aud-lbl">Album</span> {Album}
  690.                 </div>{/block:Album}
  691.                 <div><span class="aud-lbl">{PlayCountWithLabel}</span></div>
  692.             </div>
  693.         </div>
  694.         {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  695.         {/block:Audio}
  696.        
  697.         {block:Answer}
  698.         <div class="que">{Question}</div>
  699.         <div class="askr">{Asker}</div>
  700.         {block:Answerer}
  701.         <div class="answrr">{Answerer}</div>
  702.         <div class="ans">{Answer}</div>
  703.         {/block:Answerer}
  704.         <div class="caption">{Replies}</div>
  705.         {/block:Answer}
  706.        
  707.         {block:More}
  708.         <div class="caption" style="text-align:center"><a class="more" href="{Permalink}">{lang:Read more}</a></div>
  709.         {/block:More}
  710.        
  711.         {block:HasTags}
  712.         <div class="tag-wrap">
  713.             <span class="sf sf-tag-o" aria-label="Tags:"></span>
  714.             {block:Tags} <a href="{TagURL}" class="tags">#{Tag}</a>{/block:Tags}
  715.         </div>
  716.         {/block:HasTags}
  717.        
  718.         {block:Date}
  719.         <footer class="info">
  720.             {block:RebloggedFrom}
  721.             <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> //
  722.             <a href="{ReblogRootURL}" title="{ReblogRootName}">ori</a>
  723.             {block:ContentSource}
  724.              // <a href="{SourceURL}">src</a>
  725.             {/block:ContentSource}<br/>
  726.             {/block:RebloggedFrom}
  727.             <a href="{Permalink}" title="{TimeAgo}">{DayOfMonth}.{MonthNumber}.{Year} {block:NoteCount}</a> // <a href="{Permalink}" title="{lang:Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount}
  728.            
  729.             <div class="controls">
  730.                 <a href="{ReblogURL}"><span class="sf sf-reblog"></span></a>&nbsp;
  731.                 <span class="like-wrap">{LikeButton}<a class="like-btn sf sf-heart-2-o"></a></span>
  732.             </div>
  733.         </footer>
  734.         {/block:Date}
  735.         {block:PostNotes}
  736.         <footer class="post" id="note">
  737.                 {PostNotes-64}
  738.         </footer>
  739.         {/block:PostNotes}
  740.     </article>
  741.     {/block:Posts}
  742. </main>
  743.  
  744. <nav id="pag-wrap">
  745.     {block:Pagination}
  746.     {block:PreviousPage}<a class="links sf sf-arrow-left" href="{PreviousPage}" title="Previous"></a>{/block:PreviousPage}
  747.     {block:NextPage}<a class="links sf sf-arrow-right" href="{NextPage}" title="Next"></a>{/block:NextPage}
  748.     {/block:Pagination}
  749.     <a class="links sf sf-arrow-up inactive" href="" id="to-top" title="To top"></a>
  750. </nav>
  751.  
  752. </body>
  753.  
  754. <script type="text/javascript">
  755. $('article').fitVids();
  756. $(document).ready(function() {
  757.     $('.photo-slideshow').pxuPhotoset({
  758.         lightbox: true,
  759.         rounded: false,
  760.         gutter: '4px',
  761.         borderRadius: '0px',
  762.         photoset: '.photo-slideshow',
  763.         photoWrap: '.photo-data',
  764.         photo: '.pxu-photo'
  765.     }); // photoset resizing script
  766.     $('[title]').style_my_tooltips({
  767.         tip_follows_cursor:true,
  768.         tip_delay_time:100,
  769.         tip_fade_speed:300
  770.     }); // tooltip script
  771.     $('#desc-btn').click(function() {
  772.         $('#content').fadeOut(500);
  773.         $('#elinks-wrap').fadeOut(500);
  774.         $('#desc').delay(400).fadeIn(500);
  775.     });
  776.     $('#elinks-btn').click(function() {
  777.         $('#content').fadeOut(500);
  778.         $('#desc').fadeOut(500);
  779.         $('#elinks-wrap').delay(400).fadeIn(500);
  780.     });
  781.     $('.back-btn').click(function() {
  782.         $('#desc').fadeOut(500);
  783.         $('#elinks-wrap').fadeOut(500);
  784.         $('#content').delay(400).fadeIn(500);
  785.     });
  786.     $(window).scroll(function() {
  787.         if($(this).scrollTop() > 400) {
  788.             $("#to-top").removeClass("inactive");
  789.     }
  790.         else {
  791.             $("#to-top").addClass("inactive");
  792.         }
  793.     }); //renders the scroll to top button initially unclickable
  794.     $("#to-top").click(function() {
  795.         $("html, body").animate({ scrollTop: 0 }, 400);
  796.         return false;
  797.     });
  798. });
  799. </script>
  800. </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!