API tools faq
paste
Advertisement
Laighlin

#22: Paleta

Laighlin
Oct 22nd, 2017
5,484
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.88 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Paleta by @Laighlin
  4.  
  5.    1. leave the credit intact
  6.    2. don't redistribute or lift large chunks of code
  7.    3. send me a message if you need any help, with an example
  8.       of your problem if possible
  9.    4. check my faq if you have questions about adding custom
  10.       links!
  11.  
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16.  
  17. <meta name="image:Favicon" content=""/>
  18. <meta name="image:Sidebar" content=""/>
  19.  
  20. <meta name="if:Custom favicon" content="0"/>
  21. <meta name="if:Shadows" content="1"/>
  22.  
  23. <meta name="color:Swatch links" content="#fff"/>
  24. <meta name="color:Swatch 1" content="#b81438"/>
  25. <meta name="color:Swatch 2" content="#252525"/>
  26. <meta name="color:Swatch 3" content="#313131"/>
  27. <meta name="color:Swatch 4" content="#4f4f4f"/>
  28. <meta name="color:Swatch 5" content="#737373"/>
  29. <meta name="color:Swatch 6" content="#a7a7a7"/>
  30. <meta name="color:Background" content="#ddd"/>
  31. <meta name="color:Sidebar background" content="#ddd"/>
  32. <meta name="color:Post background" content="#fff"/>
  33. <meta name="color:Odd text background" content="#dadada"/>
  34. <meta name="color:Even text background" content="#eaeaea"/>
  35. <meta name="color:Text highlight" content="#fff"/>
  36. <meta name="color:Text highlight bg" content="#a52751"/>
  37. <meta name="color:Shadows" content="#555"/>
  38. <meta name="color:Text" content="#444"/>
  39. <meta name="color:Bold" content="#330f16"/>
  40. <meta name="color:Italic" content="#b3244e"/>
  41. <meta name="color:Link" content="#815360"/>
  42. <meta name="color:Tags" content="#aa3c4d"/>
  43. <meta name="color:Tags hover" content="#942140"/>
  44.  
  45. <meta name="select:Sidebar BG size" title="cover" content="no-repeat;background-size:cover"/>
  46. <meta name="select:Sidebar BG size" title="tiled" content="repeat"/>
  47.  
  48. <!-- text fields -->
  49. <meta name="text:Subtitle" content=""/>
  50. <meta name="text:Post width" content="450px"/>
  51. <meta name="text:Accent font" content="Raleway"/>
  52. <meta name="text:Body font" content="Karla"/>
  53. <meta name="text:Body font size" content="13px"/>
  54. <meta name="text:Desc font size" content="13px"/>
  55.  
  56. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  57. <head><title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}{block:SearchPage} &mdash; {lang:Search results for SearchQuery}{/block:SearchPage}</title>
  58.  
  59. {block:ifCustomFavicon}
  60. <link rel="shortcut icon" href="{image:favicon}"/>
  61. {/block:ifCustomFavicon}
  62. {block:ifNotCustomFavicon}
  63. <link rel="shortcut icon" href="{Favicon}"/>
  64. {/block:ifNotCustomFavicon}
  65.  
  66. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  67. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  68.  
  69. <link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i|{text:Accent font}:400,400i,700,700i|Share:400i" rel="stylesheet">
  70. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  71. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  72. <script src="https://static.tumblr.com/pqsvrdz/rKBmvnjxz/jquery.fitvids.js"></script>
  73. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  74. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  75. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css"/>
  76. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  77.  
  78. <style type="text/css">
  79.  
  80. body, html {
  81.     margin:0;
  82.     padding:0;
  83. }
  84.  
  85. ::selection {
  86.     background:rgba({RGBcolor:text highlight bg},.7);
  87.     color:{color:text highlight};
  88. }
  89.  
  90. ::moz-selection {
  91.     background:rgba({RGBcolor:text highlight bg},.7);
  92.     color:{color:text highlight};
  93. }
  94.  
  95. * { transition:.2s all ease; }
  96.  
  97. #s-m-t-tooltip {
  98.     margin:0 16px;
  99.     z-index:999999999;
  100.     padding:5px 7px;
  101.     background:{color:swatch 4};
  102.     pointer-events:none;
  103.     white-space:pre;
  104.     font:italic .9em '{text:accent font}';
  105.     box-shadow:3px 3px 5px rgba({RGBcolor:shadows},.4);
  106.     transition:none;
  107. }
  108.  
  109. a {
  110.     color:{color:link};
  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.     content:'\2014';
  127.     color:rgba({RGBcolor:swatch 1},.7);
  128.     position:absolute;
  129.     left:-25px;
  130.     top:1px;
  131.     font-size:.9em;
  132. }
  133.  
  134. small { font-size:calc({text:body font size} - 1px); }
  135.  
  136. h1, h2 {
  137.     margin:0;
  138.     font-weight:inherit;
  139. }
  140.  
  141. b, strong { color:{color:bold}; }
  142. i, em { color:{color:italic}; }
  143.  
  144. p:first-child { margin-top:0; }
  145. p:last-child { margin-bottom:0; }
  146.  
  147. blockquote, blockquote blockquote {
  148.     margin:1em 0 1em 6px;
  149.     padding-left:10px;
  150.     border-left:2px solid rgba({RGBcolor:swatch 4},.6);
  151. }
  152.  
  153. blockquote:last-child { margin-bottom:2px; }
  154.  
  155. .tmblr-iframe {
  156.    
  157. }
  158.  
  159. body {
  160.     color:{color:text};
  161.     font-family:'{text:body font}',sans-serif;
  162.     font-size:{text:body font size};
  163.     word-wrap:break-word;
  164.     overflow-y:scroll;
  165.     overflow-x:hidden;
  166.     line-height:1.5em;
  167.     background:{color:background};
  168. }
  169.  
  170. ::-webkit-scrollbar {
  171.     width:8px;
  172.     height:8px;
  173. }
  174.  
  175. ::-webkit-scrollbar-thumb {
  176.     background:{color:swatch 1};
  177. }
  178.  
  179. /* Track */
  180. ::-webkit-scrollbar-track {
  181.     background:{color:swatch 4};
  182. }
  183.  
  184. ::-webkit-scrollbar-corner {
  185.     display:none;
  186. }
  187.  
  188. {block:ifShadows}
  189. #palette, .post, #sidebar {
  190.     box-shadow:0 3px 17px rgba({RGBcolor:shadows},.5);
  191. }
  192. {/block:ifShadows}
  193.  
  194. #palette {
  195.     position:fixed;
  196.     top:0;
  197.     bottom:0;
  198.     left:0;
  199.     display:flex;
  200.     flex-flow:column nowrap;
  201.     justify-content:center;
  202. }
  203.  
  204. .swatch:before {
  205.     content:'';
  206.     position:absolute;
  207.     background:rgba(0,0,0,.15);
  208.     top:15px;
  209.     left:15px;
  210.     right:15px;
  211.     bottom:15px;
  212.     z-index:-1;
  213. }
  214.  
  215. .swatch {
  216.     z-index:1;
  217.     display:flex;
  218.     flex-flow:column nowrap;
  219.     justify-content:center;
  220.     font:bold 16px '{text:accent font}';
  221.     flex-grow:3;
  222.     padding:25px;
  223.     width:120px;
  224.     box-sizing:border-box;
  225.     text-transform:uppercase;
  226. }
  227.  
  228. .swatch:after {
  229.     z-index:1;
  230.     font:15px 'Share';
  231.     color:rgba(255,255,255,.6);
  232.     display:block;
  233.     text-align:right;
  234.     position:relative;
  235. }
  236.  
  237. a.swatch:hover, a.links:hover, a .title:hover {
  238.     color:rgba({RGBcolor:swatch links},.5);
  239. }
  240.  
  241. .swatch#one { background:{color:swatch 1}; }
  242. .swatch#one:after { content:'{color:swatch 1}'; }
  243.  
  244. .swatch#two { background:{color:swatch 2}; }
  245. .swatch#two:after { content:'{color:swatch 2}'; }
  246.  
  247. .swatch#three { background:{color:swatch 3}; }
  248. .swatch#three:after { content:'{color:swatch 3}'; }
  249.  
  250. .swatch#four { background:{color:swatch 4}; }
  251. .swatch#four:after { content:'{color:swatch 4}'; }
  252.  
  253. .swatch#five { background:{color:swatch 5}; }
  254. .swatch#five:after { content:'{color:swatch 5}'; }
  255.  
  256. .swatch#six, .pag.lnr, .aud-lbl { background:{color:swatch 6}; }
  257. .swatch#six:after { content:'{color:swatch 6}'; }
  258. .swatch#six.inactive {
  259.     color:rgba({RGBcolor:swatch links},.5);
  260.     pointer-events:none;
  261. }
  262.  
  263. #sidebar {
  264.     background:{color:sidebar background} url({image:sidebar}) {select:sidebar bg size};
  265.     position:fixed;
  266.     top:0;
  267.     bottom:0;
  268.     right:0;
  269.     width:300px;
  270.     display:flex;
  271.     flex-flow:column nowrap;
  272.     align-items:center;
  273.     justify-content:center;
  274. }
  275.  
  276. #title, #subtitle, #desc {
  277.     padding:10px;
  278. }
  279.  
  280. #title:empty, #subtitle:empty, #desc:empty, .caption:empty {
  281.     display:none;
  282. }
  283.  
  284. #title, #subtitle, .swatch, .aud-lbl, .links, .pag, #s-m-t-tooltip, .title, .info > a {
  285.     color:{color:swatch links};
  286.     position:relative;
  287. }
  288.  
  289. #title, #subtitle {
  290.     width:220px;
  291. }
  292.  
  293. #title {
  294.     font:bolder 1.4em '{text:accent font}', sans-serif;
  295.     text-transform:uppercase;
  296.     text-align:right;
  297.     background:{color:swatch 1};
  298.     margin:0 20px 0 40px;
  299.     z-index:2;
  300.     order:-1; /* ensures it appears before the subtitle */
  301. }
  302.  
  303. #subtitle {
  304.     background:{color:swatch 2};
  305.     font:italic 1.1em '{text:accent font}', sans-serif;
  306.     margin:-12px 40px 0 20px;
  307.     padding-top:20px;
  308.     z-index:1;
  309. }
  310.  
  311. #subtitle:empty + #title {
  312.     margin:0 20px !important;
  313.     width:240px !important;
  314. }
  315.  
  316. #desc {
  317.     width:240px;
  318.     margin:20px 20px 0;
  319.     text-align:center;
  320. }
  321.  
  322. #link-wrap {
  323.     margin:15px 15px 0;
  324.     display:flex;
  325.     flex-flow:row wrap;
  326. }
  327.  
  328. .links {
  329.     margin:5px;
  330.     text-align:center;
  331.     background:{color:swatch 3};
  332.     flex-grow:3;
  333.     padding:7px;
  334.     min-width:100px;
  335.     max-width:260px;
  336.     text-transform:uppercase;
  337.     font:1em '{text:accent font}', sans-serif;
  338. }
  339.  
  340. #pagination {
  341.     margin-top:15px;
  342.     width:270px;
  343.     display:flex;
  344. }
  345.  
  346. .pag {
  347.     font-size:17px;
  348.     margin:0 5px;
  349.     padding:7px;
  350.     line-height:1em;
  351.     text-align:center;
  352. }
  353.  
  354. /*Post wrapper*/
  355.  
  356. #content-wrap {
  357.     position:absolute;
  358.     left:120px;
  359.     right:300px;
  360. }
  361.  
  362. #content {
  363.     position:relative;
  364.     margin-top:70px;
  365.     left:calc(50% - {text:post width}/2);
  366.     min-height:100%;
  367. }
  368.  
  369. .post-body, #desc {
  370.     background:{color:post background};
  371. }
  372.  
  373. .post {
  374.     margin:70px 0;
  375.     width:{text:post width};
  376. }
  377. .post:first-child { margin-top:0; }
  378.  
  379. .caption {
  380.     padding:10px;
  381. }
  382.  
  383. .caption img {
  384.     max-width:100%;
  385. }
  386.  
  387. .caption a, .ans a, #desc a, .que a {
  388.     border-bottom:1px solid rgba({RGBcolor:text},.5);
  389. }
  390.  
  391. .caption a:hover, .ans a:hover, #desc a:hover, .que a:hover {
  392.     border-color:transparent;
  393. }
  394.  
  395. .caption .tumblr_blog {
  396.     font-weight:bold;
  397. }
  398.  
  399. .chat.even, .chat.odd { padding:3px 5px; }
  400. .chat.even { background:{color:even text background}; }
  401. .chat.odd {
  402.     padding-left:20px;
  403.     background:{color:odd text background};
  404. }
  405.  
  406. .more {
  407.     display:inline-block;
  408.     padding:5px 7px;
  409.     border:none !important;
  410.     color:{color:text};
  411.     text-transform:uppercase;
  412. }
  413.  
  414. .quote {
  415.     font:italic 1.3em '{text:accent font}', sans-serif;
  416.     text-align:center;
  417.     display:block;
  418. }
  419.  
  420. .quote, .excerpt {
  421.     padding:10px;
  422.     background:rgba({RGBcolor:swatch 3},.7);
  423.     color:{color:swatch links};
  424. }
  425.  
  426. .post hr, #desc hr {
  427.     margin:1em 15%;
  428.     border:none;
  429.     border-top:1px solid rgba({RGBcolor:swatch 1},.5);
  430. }
  431.  
  432. .media-wrap {
  433.     width:{text:post width};
  434.     overflow:hidden;
  435.     margin:0;
  436. }
  437.  
  438. .media-wrap:not(.audi) {
  439.     line-height:0;
  440. }
  441.  
  442. figure.media-wrap img {
  443.     width:{text:post width};
  444. }
  445.  
  446. .title {
  447.     font:bold 1.4em {text:accent font}, sans-serif;
  448.     text-align:right;
  449.     padding:10px;
  450.     background:{color:swatch 1};
  451. }
  452.  
  453. a .title { background:{color:swatch 2}; }
  454.  
  455. /*Audio posts*/
  456.  
  457. .aud {
  458.     height:30px;
  459.     width:23px;
  460.     overflow:hidden;
  461.     position:relative;
  462.     margin-top:16px;
  463.     margin-left:14px;
  464. }
  465.  
  466. .audholder {
  467.     position:absolute;
  468.     z-index:30;
  469.     background:#f3f3f3;
  470.     margin-top:31px;
  471.     margin-left:31px;
  472.     width:60px;
  473.     height:60px;
  474.     opacity:.5;
  475.     filter:invert(100%);
  476. }
  477.  
  478. .song {
  479.     height:121px;
  480.     margin-left:135px;
  481.     display:flex;
  482.     flex-flow:column nowrap;
  483.     justify-content:center;
  484. }
  485.  
  486. .song > div {
  487.     margin:4px 0;
  488. }
  489.  
  490. .aud-lbl {
  491.     font-variant:small-caps;
  492.     padding:2px 4px;
  493.     margin-right:5px;
  494.     font-family:'{text:accent font}', sans-serif;
  495. }
  496.  
  497. .cover {
  498.     margin-right:5px;
  499.     width:121px;
  500.     height:121px;
  501.     float:left;
  502.     background-size:cover;
  503.     z-index:1;
  504. }
  505.  
  506. /*Ask posts*/
  507.  
  508. .que, .ans {
  509.     position:relative;
  510.     padding:10px;
  511. }
  512.  
  513. .que {
  514.     background:{color:odd text background};
  515. }
  516.  
  517. .asker-avi {
  518.     width:30px;
  519.     border-radius:50%;
  520.     float:left;
  521.     margin:0 10px 10px 0;
  522. }
  523.  
  524. .askr {
  525.     margin:5px 0;
  526.     text-transform:uppercase;
  527.     font:bold 1em '{text:accent font}', sans-serif;
  528. }
  529.  
  530. .askr a { color:{color:italic}; }
  531.  
  532. .ans {
  533.     text-align:right;
  534.     background:{color:even text background};
  535. }
  536.  
  537. .excerpt {
  538.     display:block;
  539. }
  540.  
  541. /*Tags*/
  542.  
  543. .tag-wrap {
  544.     padding:7px;
  545. }
  546.  
  547. .tags {
  548.     color:{color:tags};
  549.     margin-right:5px;
  550. }
  551.  
  552. .tags:hover { color:{color:tags hover}; }
  553.  
  554. /*Post footers*/
  555.  
  556. .info {
  557.     width:{text:post width};
  558.     text-transform:uppercase;
  559.     position:relative;
  560.     display:flex;
  561.     font:.8em '{text:accent font}', sans-serif;
  562. }
  563.  
  564. .info > a {
  565.     padding:7px;
  566.     margin:0;
  567. }
  568.  
  569. #date { background:{color:swatch 1}; }
  570. #via { background:{color:swatch 2}; }
  571. #ori, #src { background:{color:swatch 3}; }
  572. #perma, .stretch { background:{color:swatch 4}; }
  573. *.stretch { flex-grow:10; }
  574.  
  575. .lnr-redo, .pag.stretch { background:{color:swatch 5}; }
  576. .lnr-heart { background:{color:swatch 6}; }
  577.  
  578. .info .lnr {
  579.     padding:6px;
  580.     font-size:15px;
  581. }
  582.  
  583. .like-wrap {
  584.     position:relative;
  585.     padding:0 !important;
  586. }
  587.  
  588. .like_button {
  589.     position:absolute;
  590.     opacity:0;
  591.     z-index:5;
  592.     top:4px;
  593.     left:5px;
  594.     width:18px;
  595.     height:18px;
  596. }
  597.  
  598. .like_button iframe {
  599.     width:100% !important;
  600.     height:100% !important;
  601. }
  602.  
  603. .like-btn { z-index:1; }
  604.  
  605. .like_button.liked { opacity:1; }
  606.  
  607. .tumblr_video_iframe {
  608.     width:{text:post width} !important;
  609. }
  610.  
  611. /*Note box*/
  612.  
  613. #note {
  614.     padding:0; margin-top:20px;
  615.     background:{color:post background};
  616.     box-shadow:none;
  617. }
  618.  
  619. #note blockquote { margin-left:9px; }
  620.  
  621. #note ol.notes {
  622.     list-style-type:none;
  623.     padding:0;
  624.     margin:0;
  625. }
  626.  
  627. li.note {
  628.     padding:7px;
  629. }
  630.  
  631. li.note:nth-child(odd) {
  632.     background:{color:odd text background};
  633. }
  634.  
  635. li.note:nth-child(even) {
  636.     background:{color:even text background};
  637. }
  638.  
  639. #note ol.notes li:last-child { border-bottom:none; }
  640.  
  641. #note ol.notes img.avatar {
  642.     margin-right:7px;
  643.     margin-top:calc(1em - 13px);
  644.     width:20px;
  645.     height:20px;
  646.     float:left;
  647.     border-radius:50%;
  648. }
  649.  
  650. /*Fade in content aka something I should use more often lol flexbox takes a while to kick in*/
  651.  
  652. @-webkit-keyframes fade { from { opacity:0; } to { opacity:1; } }
  653. @-moz-keyframes fade { from { opacity:0; } to { opacity:1; } }
  654. @keyframes fade { from { opacity:0; } to { opacity:1; } }
  655.  
  656. #sidebar, #palette, #content {
  657.    opacity:0;
  658.    -webkit-animation:1.2s ease-in 1.1s 1 forwards fade;
  659.    -moz-animation:1.2s ease-in 1.1s 1 forwards fade;
  660.    animation:1.2s ease-in 1.1s 1 forwards fade;
  661. }
  662.  
  663. {CustomCSS}
  664.  
  665. </style>
  666. </head>
  667.  
  668. <body class="background">
  669.  
  670. <nav id="palette">
  671.     <a class="swatch" href="/" id="one">Home</a>
  672.     <a class="swatch" href="/ask" id="two">Ask</a>
  673.     <a class="swatch" href="/submit" id="three">Submit</a>
  674.     <a class="swatch" href="/archive" id="four">Archive</a>
  675.     <a class="swatch" href="http://linthm.tumblr.com/thm" title="Paleta &copy; Laighlin" id="five">Theme</a>
  676.     <a class="swatch inactive" href="#" id="six">To top</a>
  677. </nav>
  678.  
  679. <div id="content-wrap">
  680. <main id="content">
  681.     {block:SearchPage}
  682.     <div class="post">
  683.         <article class="post-body">
  684.             <h2 class="title">
  685.                 {block:SearchResults}
  686.             {lang:SearchResultCount results for SearchQuery 2}
  687.                 {/block:SearchResults}
  688.                 {block:NoSearchResults}
  689.             {lang:No search results for SearchQuery 2}
  690.                 <div class="caption">
  691.                     This blog might have search indexing disabled.
  692.                 </div>
  693.                 {/block:NoSearchResults}
  694.             </h2>
  695.         </article>
  696.     </div>
  697.     {/block:SearchPage}
  698.     {block:TagPage}
  699.     <div class="post">
  700.         <article class="post-body">
  701.             <h2 class="title">{lang:Posts tagged Tag 2}</h2>
  702.         </article>
  703.     </div>
  704.     {/block:TagPage}
  705.     {block:Posts inlineMediaWidth="380" inlineNestedMediaWidth="380"}
  706.     <div class="post">
  707.         <article class="post-body type-{PostType}">
  708.             {block:Text}
  709.             {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  710.             <div class="caption">{Body}</div>
  711.             {/block:Text}
  712.            
  713.             {block:Link}
  714.             <a href="{URL}"><h2 class="title"><span class="lnr lnr-link">&nbsp;</span> {Name}</h2></a>
  715.                 {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  716.             <div class="caption">
  717.                 {block:Description}
  718.                     {Description}
  719.                 {/block:Description}
  720.             </div>
  721.             {/block:Link}
  722.            
  723.             {block:Quote}
  724.             <q class="quote">{Quote}</q>
  725.             {block:Source}<div class="caption" style="text-align:right">&mdash; {Source}</div>{/block:Source}
  726.             {/block:Quote}
  727.            
  728.             {block:Chat}
  729.             {block:Title}<h2 class="title">{Title}</h2>{/block:Title}
  730.             {block:Lines}
  731.             <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
  732.             {/block:Lines}
  733.             {/block:Chat}
  734.            
  735.             {block:Photo}
  736.             <figure class="media-wrap">{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}</figure>
  737.             {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  738.             {/block:Photo}
  739.            
  740.             {block:Photoset}
  741.             <div class="media-wrap">
  742.                 <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  743.                 {block:Photos}
  744.                 <div class="photo-data">
  745.                     <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>
  746.                     <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  747.                 </div>
  748.                 {/block:Photos}
  749.                 </div>
  750.             </div>
  751.             {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  752.             {/block:Photoset}
  753.            
  754.             {block:Video}
  755.             <div class="media-wrap vid">{Video-500}</div>
  756.             {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  757.             {/block:Video}
  758.            
  759.             {block:Audio}
  760.             <div class="media-wrap audi">
  761.                 {block:AlbumArt} <img src="{AlbumArtURL}" class="cover"> {/block:AlbumArt}
  762.                 <div class="audholder">
  763.                     <div class="aud">
  764.                       {AudioPlayer}
  765.                     </div>
  766.                 </div>
  767.                 <div class="song">
  768.                     {block:Artist}<div>
  769.                         <span class="aud-lbl">Artist</span> {Artist}
  770.                     </div>{/block:Artist}
  771.                     {block:TrackName}<div>
  772.                         <span class="aud-lbl">Title</span> <i>{TrackName}</i>
  773.                     </div>{/block:TrackName}
  774.                     {block:Album}<div>
  775.                         <span class="aud-lbl">Album</span> {Album}
  776.                     </div>{/block:Album}
  777.                     <div><span class="aud-lbl">{PlayCountWithLabel}</span></div>
  778.                 </div>
  779.             </div>
  780.             {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  781.             {/block:Audio}
  782.            
  783.             {block:Answer}
  784.             <div class="que">
  785.                 <img class="asker-avi" src="{AskerPortraitURL-40}">
  786.                 <div class="askr">{Asker} &mdash;</div>
  787.                 {Question}
  788.             </div>
  789.             <div class="caption">{Answer}</div>
  790.             {/block:Answer}
  791.            
  792.             {block:More}
  793.             <div class="caption" style="text-align:center"><a class="more" href="{Permalink}">{lang:Read more}</a></div>
  794.             {/block:More}
  795.            
  796.             {block:HasTags}
  797.             <div class="tag-wrap">
  798.                 <span class="sf sf-tag-o" aria-label="Tags:"></span>
  799.                 {block:Tags} #<a href="{TagURL}" class="tags">{Tag}</a>{/block:Tags}
  800.             </div>
  801.             {/block:HasTags}
  802.         </article>
  803.        
  804.         {block:Date}
  805.         <footer class="info">
  806.             <a id="date" href="{Permalink}" title="{TimeAgo}">{DayOfMonth}.{MonthNumber}.{Year}</a>
  807.             {block:RebloggedFrom}
  808.             <a id="via" href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  809.             <a id="ori" href="{ReblogRootURL}" title="{ReblogRootName}" {block:ContentSource}style="display:none"{/block:ContentSource}>ori</a>
  810.             {/block:RebloggedFrom}
  811.             {block:ContentSource}<a id="src" href="{SourceURL}">src</a>{/block:ContentSource}
  812.             {block:NoteCount}<a id="perma" href="{Permalink}" title="{lang:Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount}
  813.             <a class="stretch"></a>
  814.             <a href="{ReblogURL}" class="lnr lnr-redo"></a>
  815.             <a class="like-wrap">{LikeButton}<a class="like-btn lnr lnr-heart"></a></a>
  816.         </footer>
  817.         {/block:Date}
  818.         {block:PostNotes}
  819.         <footer class="post" id="note">
  820.             {PostNotes-64}
  821.         </footer>
  822.         {/block:PostNotes}
  823.     </div>
  824.     {/block:Posts}
  825. </main>
  826. </div>
  827.  
  828. <aside id="sidebar">
  829.     <h2 id="subtitle">{text:subtitle}</h2>
  830.     <!-- the subtitle needs to come before the title in the DOM, otherwise it can't affect the styling of #title without unnecessary javascript -->
  831.     <h1 id="title">{Title}</h1>
  832.     <div id="desc">{Description}</div>
  833.     {block:HasPages}
  834.     <nav id="link-wrap">
  835.         {block:Pages}
  836.         <a class="links" href="{URL}">{Label}</a>
  837.         {/block:Pages}
  838.     </nav>
  839.     {/block:HasPages}
  840.    
  841.     {block:Pagination}
  842.     <nav id="pagination">
  843.         {block:PreviousPage}<a class="pag lnr lnr-arrow-left" title="{lang:Previous}" href="{PreviousPage}"></a>{/block:PreviousPage}
  844.         <span class="pag stretch">{CurrentPage} / {TotalPages}</span>
  845.         {block:NextPage}<a class="pag lnr lnr-arrow-right" title="{lang:Next}" href="{NextPage}"></a>{/block:NextPage}
  846.     </nav>
  847.     {/block:Pagination}
  848. </aside>
  849.  
  850. </body>
  851.  
  852. <script type="text/javascript">
  853. $('article').fitVids();
  854. $(document).ready(function() {
  855.     $('.photo-slideshow').pxuPhotoset({
  856.         lightbox: true,
  857.         rounded: false,
  858.         gutter: '5px',
  859.         borderRadius: '0px',
  860.         photoset: '.photo-slideshow',
  861.         photoWrap: '.photo-data',
  862.         photo: '.pxu-photo'
  863.     }); // photoset resizing script
  864.     $('[title]').style_my_tooltips({
  865.         tip_follows_cursor:true,
  866.         tip_delay_time:100,
  867.         tip_fade_speed:300
  868.     }); // tooltip script
  869.     $(window).scroll(function() {
  870.         if($(this).scrollTop() > 400) {
  871.             $("#six").removeClass("inactive");
  872.     }
  873.         else {
  874.             $("#six").addClass("inactive");
  875.         }
  876.     }); //renders the scroll to top button initially unclickable
  877.     $("#six").click(function() {
  878.         $("html, body").animate({ scrollTop: 0 }, 400);
  879.         return false;
  880.     });
  881. });
  882. </script>
  883. </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!