API tools faq
paste
feiinho

Theme #24: Jul by @Laighlin

feiinho
Jun 16th, 2018
347
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.02 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. Theme #24: Jul by @Laighlin
  6.  
  7. Don't mess with the credit, don't redistrubute, don't straight up copy the layout or lift large chunks of code. Be nice pls xoxo
  8. Check my FAQ on @linthm if you have questions about anything!
  9.  
  10. -->
  11.  
  12. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  13.  
  14. <meta name="image:Favicon" content=""/>
  15. <meta name="image:Icon" content=""/>
  16.  
  17. <meta name="color:Background top" content="#030918"/>
  18. <meta name="color:Background bottom" content="#122125"/>
  19. <meta name="color:Titles" content="#4bcee5"/>
  20. <meta name="color:Text" content="#fff"/>
  21. <meta name="color:Bold" content="#bacccb"/>
  22. <meta name="color:Italic" content="#93c1e2"/>
  23. <meta name="color:Link" content="#4eb2e5"/>
  24. <meta name="color:Tags" content="#619f9f"/>
  25. <meta name="color:Navigation link borders" content="#4e8f8f"/>
  26. <meta name="color:Scrollbar" content="#35a4a8"/>
  27. <meta name="color:Text highlight" content="#fff"/>
  28. <meta name="color:Text highlight background" content="#388484"/>
  29. <meta name="color:Content background" content="#658789"/>
  30. <meta name="color:String" content="#6e8086"/>
  31. <meta name="color:Lights 1" content="#ff0"/>
  32. <meta name="color:Lights 2" content="#71baff"/>
  33. <meta name="color:Lights 3" content="#a1e7ff"/>
  34.  
  35. <meta name="if:Custom favicon" content="0"/>
  36. <meta name="if:Collapsed links" content="1"/>
  37. <meta name="if:Icon" content="0"/>
  38. <meta name="if:Twinkle" content="0"/>
  39. <meta name="if:Glow" content="1"/>
  40. <meta name="if:400px posts" content="1"/>
  41. <meta name="if:Hide captions" content="0"/>
  42.  
  43. <meta name="select:Sidebar position" content="left"/>
  44. <meta name="select:Sidebar position" content="right"/>
  45.  
  46. <meta name="select:Rounded corners" title="none" content="0"/>
  47. <meta name="select:Rounded corners" title="subtle" content="2px"/>
  48. <meta name="select:Rounded corners" title="round" content="5px"/>
  49.  
  50. <meta name="select:Twinkle pattern" content="twinkle1" title="glow"/>
  51. <meta name="select:Twinkle pattern" content="twinkle2" title="on and off"/>
  52.  
  53. <meta name="select:Content background opacity" content=".5" title="translucent"/>
  54. <meta name="select:Content background opacity" content=".2" title="see-thru"/>
  55. <meta name="select:Content background opacity" content="0" title="transparent"/>
  56.  
  57. <meta name="text:Sidebar width" content="200px"/>
  58. <meta name="text:Title font" content="Raleway"/>
  59. <meta name="text:Accent font" content="Nunito"/>
  60. <meta name="text:Body font" content="Karla"/>
  61. <meta name="text:Font size" content="13px"/>
  62.  
  63. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  64.  
  65. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  66. <head><title>{block:SearchPage}{lang:Search results for SearchQuery} &mdash; {/block:SearchPage}{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
  67.  
  68. {block:ifCustomFavicon}
  69. <link rel="shortcut icon" href="{image:favicon}"/>
  70. {/block:ifCustomFavicon}
  71. {block:ifNotCustomFavicon}
  72. <link rel="shortcut icon" href="{Favicon}"/>
  73. {/block:ifNotCustomFavicon}
  74.  
  75. <link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i|{text:Accent font}:400,400i,700,700i|{text:Title font}" rel="stylesheet">
  76. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  77.  
  78. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  79. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  80. <script src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  81.  
  82. <style>
  83.  
  84. body, html {
  85.     margin:0;
  86.     padding:0;
  87.     font:{text:font size} '{text:Body font}';
  88.     color:{color:text};
  89.     line-height:1.5em;
  90. }
  91.  
  92. body {
  93.     overflow-x:hidden;
  94.     overflow-y:scroll;
  95. }
  96.  
  97. .tmblr-iframe {
  98.     top:33px !important;
  99.     opacity:.5 !important;
  100. }
  101.  
  102. .tmblr-iframe:hover { opacity:.9 !important; }
  103.  
  104. .background:before {
  105.     content:'';
  106.     position:fixed;
  107.     top:0; bottom:0; left:0; right:0;
  108.     background-image:linear-gradient(
  109.         /*top,*/
  110.         {color:background top},
  111.         {color:background bottom});
  112.     z-index:-50;
  113. }
  114.  
  115. *:not(#s-m-t-tooltip) {
  116.     transition:.3s all ease;
  117. }
  118.  
  119. ::-webkit-scrollbar {
  120.     width:10px;
  121.     height:10px;
  122. }
  123.  
  124. ::-webkit-scrollbar-track, .background:before {
  125.     background-image:linear-gradient(
  126.         /*top,*/
  127.         {color:background top},
  128.         {color:background bottom});
  129. }
  130.  
  131. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner {
  132.     background:{color:scrollbar} padding-box;
  133.     border-radius:{select:rounded corners};
  134.     border:3px solid transparent;
  135. }
  136.  
  137. ::selection {
  138.     background:{color:text highlight background};
  139.     color:{color:text highlight};
  140. }
  141.  
  142. ::moz-selection {
  143.     background:{color:text highlight background};
  144.     color:{color:text highlight};
  145. }
  146.  
  147. h1:not(#title), h2, h3, h4, h5 {
  148.     margin:.2em 0 .8em;
  149.     font-family:'{text:title font}';
  150.     color:{color:titles};
  151.     text-align:center;
  152. }
  153.  
  154. a h2.title:hover {
  155.     color:{color:text};
  156. }
  157.  
  158. hr {
  159.     height:0;
  160.     margin:1em 90px 1em 70px;
  161.     position:relative;
  162.     border:none;
  163.     border-top:2px solid;
  164.     color:{color:scrollbar};
  165.     overflow:visible;
  166. }
  167.  
  168. hr:before, hr:after {
  169.     content:'';
  170.     position:absolute;
  171.     height:6px;
  172.     width:6px;
  173.     border-radius:50px;
  174.     line-height:0;
  175.     border:2px solid;
  176.     top:-6px;
  177. }
  178.  
  179. hr:before {
  180.     color:{color:lights 2};
  181.     right:-20px;
  182. }
  183.  
  184. hr:after {
  185.     color:{color:lights 3};
  186.     right:-10px;
  187. }
  188.  
  189. small { font-size:.9em; }
  190.  
  191. b, strong {
  192.     color:{color:bold};
  193. }
  194.  
  195. i, em {
  196.     color:{color:italic};
  197. }
  198.  
  199. u, a {
  200.     color:{color:link};
  201. }
  202.  
  203. p:first-child { margin-top:0; }
  204. p:last-child { margin-bottom:0; }
  205.  
  206. ul li { list-style-type:none; position:relative; }
  207. main ul li:before, aside ul li:before {
  208.     content:'\2014 ';
  209.     position:absolute;
  210.     color:{color:scrollbar};
  211.     margin-left:-1.5em;
  212. }
  213.  
  214. ol:not(.notes) li { list-style-type:decimal-leading-zero; }
  215.  
  216. a {
  217.     text-decoration:none;
  218.     outline:none;
  219. }
  220.  
  221. #s-m-t-tooltip {
  222.     margin:14px;
  223.     background:{color:text highlight background};
  224.     color:{color:text highlight};
  225.     font-family:'{text:accent font}';
  226.     padding:5px 8px;
  227.     z-index:9999;
  228.     pointer-events:none;
  229. }
  230.  
  231. @font-face {
  232.     font-family: Calluna;
  233.     src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  234.     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");
  235.     font-weight: 700;
  236.     font-style: italic;
  237. }
  238.  
  239. @font-face {
  240.     font-family: Fairwater;
  241.     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");
  242.     font-weight: 400;
  243.     font-style: normal;
  244. }
  245. p.npf_quirky { font:1.7em Fairwater; }
  246. p.npf_chat { font:1.7em Courier; }
  247. p.npf_quote { font:1.7em Calluna; }
  248.  
  249. #side-img, #notes ol.notes img.avatar, #link-wrap, .post, #s-m-t-tooltip {
  250.     border-radius:{select:rounded corners};
  251. }
  252.  
  253. /*Light string*/
  254.  
  255. #string {
  256.     position:fixed;
  257.     z-index:75;
  258.     height:100px;
  259.     top:0;
  260.     padding:0;
  261.     margin:0;
  262.     overflow:hidden;
  263.     width:100%;
  264.     text-align:center;
  265.     white-space:nowrap;
  266.     pointer-events:none;
  267. }
  268.  
  269. .lightrope li {
  270.     list-style-type:none;
  271.     display:inline-block;
  272.     height:25px;
  273.     width:13px;
  274.     border-radius:50%;
  275.     margin:5px 20px;
  276.     position:relative;
  277.     {block:ifNotTwinkle}{block:ifGlow}
  278.     box-shadow:0 0 20px 1px;
  279.     {/block:ifGlow}{/block:ifNotTwinkle}
  280. }
  281.  
  282. .lightrope li:before, .lightrope li:after {
  283.     content:'';
  284.     position:absolute;
  285. }
  286.  
  287. .lightrope li:after {
  288.     width:11px;
  289.     height:14px;
  290.     top:-11px;
  291.     left:1px;
  292.     border-radius:2px;
  293.     background:{color:string};
  294. }
  295.  
  296. .lightrope li:before {
  297.     width:48px;
  298.     height:25px;
  299.     border:2px solid {color:string};
  300.     left:-48px;
  301.     border-radius:50%;
  302.     top:-22px;
  303. }
  304.  
  305. .lightrope li:nth-child(3n) {
  306.     background:{color:lights 1};
  307.     color:{color:lights 1};
  308.     {block:ifTwinkle}
  309.     animation:{select:twinkle pattern}1 .7s ease-in-out infinite alternate;
  310.     {/block:ifTwinkle}
  311. }
  312.  
  313. .lightrope li:nth-child(3n+1) {
  314.     background:{color:lights 2};
  315.     color:{color:lights 2};
  316.     {block:ifTwinkle}
  317.     animation:{select:twinkle pattern}2 .7s ease-in-out .3s infinite alternate;
  318.     {/block:ifTwinkle}
  319. }
  320.  
  321. .lightrope li:nth-child(3n+2) {
  322.     background:{color:lights 3};
  323.     color:{color:lights 3};
  324.     {block:ifTwinkle}
  325.     animation:{select:twinkle pattern}3 .7s ease-in-out .6s infinite alternate;
  326.     {/block:ifTwinkle}
  327. }
  328.  
  329. /*Twinkling animations*/
  330.  
  331. @keyframes twinkle11 {
  332.     0% { box-shadow:0 0 5px 1px; }
  333.     100% { box-shadow:0 0 25px 3px; }
  334. }
  335. @keyframes twinkle12 {
  336.     0% { box-shadow:0 0 5px 1px; }
  337.     100% { box-shadow:0 0 25px 3px; }
  338. }
  339. @keyframes twinkle13 {
  340.     0% { box-shadow:0 0 5px 1px; }
  341.     100% { box-shadow:0 0 25px 3px; }
  342. }
  343.  
  344. @keyframes twinkle21 {
  345.     0% { background:rgba({RGBcolor:lights 1},.4); }
  346.     100% { background:rgba({RGBcolor:lights 1},1); }
  347. }
  348. @keyframes twinkle22 {
  349.     0% { background:rgba({RGBcolor:lights 2},.4); }
  350.     100% { background:rgba({RGBcolor:lights 2},1); }
  351. }
  352. @keyframes twinkle23 {
  353.     0% { background:rgba({RGBcolor:lights 3},.4); }
  354.     100% { background:rgba({RGBcolor:lights 3},1); }
  355. }
  356.  
  357. /*Sidebar*/
  358.  
  359. #sidebar {
  360.     position:fixed;
  361.     {block:if400pxposts}
  362.     {select:sidebar position}:calc(50% - 270px - {text:sidebar width}/2);
  363.     {/block:if400pxposts}
  364.     {block:ifnot400pxposts}
  365.     {select:sidebar position}:calc(50% - 320px - {text:sidebar width}/2);
  366.     {/block:ifnot400pxposts}
  367. }
  368.  
  369. #title, #desc, #link-wrap, #basic {
  370.     width:calc({text:sidebar width} + 20px);
  371.     box-sizing:border-box;
  372.     margin:0 0 10px;
  373.     position:relative;
  374. }
  375.  
  376. #side-img {
  377.     width:55px;
  378.     float:left;
  379.     margin-right:13px;
  380.     padding:10px;
  381. }
  382.  
  383. #side-img, .post {
  384.     background:rgba({RGBcolor:content background},{select:content background opacity});
  385. }
  386.  
  387. #title {
  388.     font:bold 1.5em '{text:title font}';
  389.     line-height:1.2em;
  390.     /*text-align:justify;*/
  391.     {block:ifIcon}
  392.     margin-top:10px;
  393.     {/block:ifIcon}
  394.     {block:ifNotIcon}
  395.     margin-bottom:-5px;
  396.     {/block:ifNotIcon}
  397. }
  398.  
  399. #title, .title { color:{color:titles}; }
  400.  
  401. #desc, #info, blockquote, blockquote blockquote {
  402.     padding:0 0 0 7px;
  403.     margin-left:2px;
  404.     margin-right:0;
  405.     border-left:2px solid {color:string};
  406. }
  407.  
  408. blockquote:only-child { margin:0 0 0 2px; }
  409. #desc { margin-top:20px; }
  410. .linx { display:block; }
  411.  
  412. {block:ifCollapsedLinks}
  413. #link-wrap {
  414.     background:rgba({RGBcolor:content background},{select:content background opacity});
  415.     border-radius:{select:rounded corners};
  416. }
  417.  
  418. #link-wrap.collapsed {
  419.     pointer-events:none;
  420.     opacity:0;
  421. }
  422.  
  423. #link-wrap:before {
  424.     content:'';
  425.     position:absolute;
  426.     border:6px solid transparent;
  427.     border-bottom-color:rgba({RGBcolor:content background},{select:content background opacity});
  428.     right:9px;
  429.     top:-12px;
  430. }
  431.  
  432. .linx {
  433.     padding:5px 7px;
  434. }
  435. {/block:ifCollapsedLinks}
  436.  
  437. {block:ifNotCollapsedLinks}
  438. .linx:before {
  439.     content:'';
  440.     position:absolute;
  441.     margin-left:-25px;
  442.     border-radius:50%;
  443.     line-height:0;
  444.     height:1em;
  445.     width:1em;
  446.     margin-top:.2em;
  447.     box-sizing:border-box;
  448.     border:2px solid {color:navigation link borders};
  449. }
  450.  
  451. .linx {
  452.     background:rgba({RGBcolor:content background},{select:content background opacity});
  453.     border-radius:{select:rounded corners};
  454.     margin:0 0 5px 20px;
  455.     padding:5px 7px;
  456. }
  457. {/block:ifNotCollapsedLinks}
  458.  
  459. #link-wrap { margin-top:20px; }
  460.  
  461. .linx:hover {
  462.     background:rgba({RGBcolor:content background},.6);
  463. }
  464.  
  465. #basic {
  466.     display:flex;
  467.     justify-content:space-between;
  468. }
  469.  
  470. #basic a, .controls a, li.note:before {
  471.     font-size:17px;
  472.     line-height:16px;
  473.     text-align:center;
  474.     height:17px;
  475.     width:17px;
  476.     padding:6px;
  477.     border:2px solid {color:navigation link borders};
  478.     border-radius:50%;
  479.     color:{color:text};
  480. }
  481.  
  482. /*Posts*/
  483.  
  484.  
  485. header .src { float:right; }
  486. #sidebar, #content { top:90px; }
  487. #content header { margin-bottom:10px; }
  488.  
  489. #content header .lnr-sync, #content header .lnr-user, .info .lnr-calendar-full, .info .lnr-bookmark, .info .lnr-pushpin {
  490.     font-size:.9em;
  491. }
  492.  
  493. #content {
  494.     position:absolute;
  495.     {select:sidebar position}:calc(50% + 120px - {block:if400pxposts}200px{/block:if400pxposts}{block:ifnot400pxposts}250px{/block:ifnot400pxposts});
  496. }
  497.  
  498. .media-wrap, .post, #notes, #content {
  499.     {block:if400pxposts}
  500.     width:400px;
  501.     {/block:if400pxposts}
  502.     {block:ifnot400pxposts}
  503.     width:500px;
  504.     {/block:ifnot400pxposts}
  505. }
  506.  
  507. .post { overflow:hidden; }
  508. .post h1, h2, h3, h4, h5, .caption, .tag-wrap, .ques { padding:10px; }
  509. .title { padding-bottom:0; }
  510. .caption a, #desc a { border-bottom:1px solid rgba({RGBcolor:text},.5); }
  511. .caption a:hover, #desc a:hover { border-color:transparent; }
  512.  
  513. .more {
  514.     margin:-10px 9px 10px;
  515.     text-align:center;
  516.     display:inline-block;
  517.     text-transform:uppercase;
  518.     font-family:'{text:accent font}';
  519.     padding:3px;
  520. }
  521.  
  522. .more:hover {
  523.     background:rgba({RGBcolor:link},.5);
  524.     color:{color:background bottom};
  525. }
  526.  
  527. .media-wrap, .quote { margin:0; }
  528. .media-wrap.no-text { line-height:0; }
  529. .chat { padding:7px; }
  530. .chat.even { background:rgba({RGBcolor:titles},.2); }
  531. a.tumblr_blog { font-weight:bold; }
  532.  
  533. .a-url {
  534.     position:relative;
  535.     text-transform:uppercase;
  536. }
  537.  
  538. .a-url img {
  539.     float:left;
  540.     border-radius:50%;
  541.     margin-right:10px;
  542.     margin-top:-2px;
  543. }
  544.  
  545. /*Post footers*/
  546.  
  547. .tag {
  548.     margin-right:7px;
  549.     color:{color:tags};
  550. }
  551.  
  552. .tag:hover {
  553.     background:{color:tags};
  554.     color:{color:background top};
  555. }
  556.  
  557. .tag-wrap .lnr-tag {
  558.     font-size:.8em;
  559. }
  560.  
  561. .info, #content header, .linx {
  562.     font-family:'{text:accent font}';
  563.     position:relative;
  564.     text-transform:uppercase;
  565. }
  566.  
  567. .info { margin:30px auto 70px; }
  568. .info a:hover, #content header a:hover { color:{color:text}; }
  569. .info .lnr-bookmark, .info .lnr-pushpin { margin-left:10px; }
  570.  
  571. /*Like and reblog buttons*/
  572.  
  573. .controls {
  574.     float:right;
  575. }
  576.  
  577. .controls a {
  578.     color:{color:text};
  579.     border-radius:50%;
  580. }
  581.  
  582. .lnr-redo {
  583.     margin-right:10px;
  584. }
  585.  
  586. .like-wrap {
  587.     position:relative;
  588.     width:30px;
  589.     height:30px;
  590. }
  591.  
  592. .like_button {
  593.     position:absolute;
  594.     z-index:5;
  595.     top:-3px;
  596.     left:8px;
  597.     opacity:0;
  598.     width:16px;
  599.     height:16px;
  600. }
  601.  
  602. .like_button iframe {
  603.     width:100% !important;
  604.     height:100% !important;
  605. }
  606.  
  607. .like-btn { z-index:1; }
  608.  
  609. .like_button.liked + .like-btn { color:#f55; }
  610.  
  611. /*Notes on permalink pages*/
  612.  
  613. #notes {
  614.     margin-bottom:50px;
  615.     margin-top:-50px;
  616.     padding-left:32px;
  617.     padding-top:50px;
  618.     box-sizing:border-box;
  619. }
  620.  
  621. #notes blockquote { margin-left:9px; }
  622. li.note { padding:5px; position:relative }
  623.  
  624. #notes ol.notes {
  625.     list-style-type:none;
  626.     padding:0;
  627.     margin:0;
  628. }
  629.  
  630. li.note:before {
  631.     position:absolute;
  632.     left:-32px;
  633.     font-family:'Linearicons-Free';
  634.     font-size:1em;
  635.     height:1em;
  636.     width:1em;
  637.     padding:4px;
  638.     line-height:1em;
  639.     top:2px;
  640. }
  641.  
  642. a.avatar_frame { display:none !important; }
  643.  
  644. li.note.reblog.without_commentary:before { content:'\e861'; }
  645. li.note.like:before { content:'\e813'; }
  646. li.note.reblog.with_commentary:before, li.note.reply:before { content:'\e83f'; }
  647. li.note.original_post { content:'\e82a'; }
  648.  
  649. #notes .tumblelog, #notes .source_tumblelog, .note.like a {
  650.     font-family:'{text:accent font}';
  651. }
  652.  
  653. .caption:empty, #title:empty, .post-title:empty, #desc:empty {
  654.     display:none;
  655. }
  656.  
  657. {block:IndexPage}
  658. {block:ifHideCaptions}
  659. .caption:not(.text-body) { display:none; }
  660. /*keeps the captions on text posts for obvious reasons*/
  661. {/block:ifHideCaptions}
  662. {/block:IndexPage}
  663.  
  664. #pagination {
  665.     position:fixed;
  666.     bottom:20px;
  667.     right:15px;
  668. }
  669.  
  670. .pag {
  671.     display:block;
  672.     font-size:15px;
  673.     color:{color:text};
  674.     border-radius:50%;
  675.     line-height:1em;
  676.     padding:5px;
  677.     margin-top:15px;
  678.     border:2px solid {color:navigation link borders};
  679. }
  680.  
  681. .inactive { color:rgba({RGBcolor:text},.3); }
  682.  
  683. .post:not(.not-page) { margin-bottom:50px; }
  684.  
  685. .clear { clear:both; }
  686.  
  687. .notwink, .linkbtn, .lightbtn {
  688.     cursor:pointer;
  689. }
  690.  
  691. .notwink { animation-play-state:paused !important; }
  692.    
  693. {CustomCSS}
  694.  
  695. </style>
  696. </head>
  697.  
  698. <body class="background">
  699.  
  700. <ul id="string" class="lightrope">
  701.     <li></li> <li></li> <li></li> <li></li>
  702.     <li></li> <li></li> <li></li> <li></li>
  703.     <li></li> <li></li> <li></li> <li></li>
  704.     <li></li> <li></li> <li></li> <li></li>
  705.     <li></li> <li></li> <li></li> <li></li>
  706.     <li></li> <li></li> <li></li> <li></li>
  707.     <li></li> <li></li> <li></li> <li></li>
  708.     <li></li> <li></li> <li></li> <li></li>
  709.     <li></li> <li></li> <li></li> <li></li>
  710.     <li></li> <li></li> <li></li> <li></li>
  711.     <li></li> <li></li> <li></li> <li></li>
  712. </ul>
  713.  
  714. <aside id="sidebar">
  715.     {block:ifIcon}
  716.     <img id="side-img" src="{image:icon}">
  717.     {block:ifIcon}
  718.     <h1 id="title">{Title}</h1>
  719.     <div class="clear"></div>
  720.     {block:Description}
  721.     <section id="desc">{Description}</section>
  722.     {/block:Description}
  723.     <nav id="basic">
  724.         <a class="lnr lnr-home" title="Index" href="/" aria-label="index"></a>
  725.         <a class="lnr lnr-pencil" title="Message" href="/ask" aria-label="ask"></a>
  726.         <a class="lnr lnr-envelope" title="Submit" href="/submit" aria-label="submit"></a>
  727.         {block:ifTwinkle}<a class="lnr lnr-sun lightbtn" title="Toggle twinkling" aria-label="toggle twinkling"></a>{/block:ifTwinkle}
  728.         {block:ifNotTwinkle}<a class="lnr lnr-clock" title="Archive" aria-label="archive"></a>{/block:ifNotTwinkle}
  729.         <a class="lnr lnr-code" title="Jul &copy; Laighlin" href="http://linthm.tumblr.com/thm" aria-label="theme credit"></a>
  730.         {block:ifCollapsedLinks}{block:HasPages}<a class="lnr lnr-menu linkbtn" title="Links" aria-label="links"></a>{/block:HasPages}{/block:ifCollapsedLinks}
  731.     </nav>
  732.     <nav id="link-wrap" {block:ifCollapsedLinks}class="collapsed"{/block:ifCollapsedLinks}>
  733.         {block:HasPages}
  734.         {block:Pages}
  735.         <a class="linx" href="{URL}">{Label}</a>
  736.         {/block:Pages}
  737.         {/block:HasPages}
  738.     </nav>
  739. </aside>
  740.  
  741. <main id="content">
  742.     {block:SearchPage}
  743.     <h2 class="title">
  744.         {block:SearchResults}
  745.             {lang:SearchResultCount results for SearchQuery 2}
  746.         {/block:SearchResults}
  747.         {block:NoSearchResults}
  748.             {lang:No search results for SearchQuery 2}
  749.         {/block:NoSearchResults}
  750.     </h2>
  751.     {/block:SearchPage}
  752.     {block:TagPage}
  753.     <h2 class="title">
  754.         {lang:Posts tagged Tag 3}
  755.     </h2>
  756.     {/block:TagPage}
  757.     {block:Posts inlineMediaWidth="500" nestedMediaWidth="480"}
  758.     {block:Reblog}
  759.     <header>
  760.         <span class="lnr lnr-sync" aria-label="reblogged from"></span>&nbsp;&nbsp;<a href="{ReblogParentURL}">{ReblogParentName}</a>
  761.         {block:RebloggedFrom}
  762.         <span class="src"><span class="lnr lnr-user" aria-label="originally posted by"></span>&nbsp;&nbsp;<a href="{ReblogRootURL}">{ReblogRootName}</a></span>
  763.         {/block:RebloggedFrom}
  764.     </header>
  765.     {/block:Reblog}
  766.     <article class="post {block:Date}not-page{/block:Date}">
  767.         {block:Title}
  768.         <h2 class="title">{Title}</h2>
  769.         {/block:Title}
  770.        
  771.         {block:Text}
  772.         <div class="text-body caption">{Body}</div>
  773.         {/block:Text}
  774.        
  775.         {block:Answer}
  776.         <div class="ques">
  777.         <div class="a-url"><img src="{AskerPortraitURL-24}"> <span class="askr">{Asker}</span> says &mdash;</div>
  778.             {Question}
  779.         </div>
  780.         <div class="caption">{Answer}</div>
  781.         {/block:Answer}
  782.        
  783.         {block:Chat}
  784.         {block:Lines}
  785.         <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
  786.         {/block:Lines}
  787.         {/block:Chat}
  788.        
  789.         {block:Link}
  790.         <a href="{URL}">
  791.         <h2 class="title">
  792.             <span class="lnr lnr-link"></span>&nbsp;{Name}&nbsp;&raquo;
  793.         </h2></a>
  794.         <div class="caption">
  795.             {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
  796.             {block:Description}{Description}{/block:Description}
  797.         </div>
  798.         {/block:Link}
  799.        
  800.         {block:Quote}
  801.         <h2 class="post-title quote">&raquo; {Quote}</h2>
  802.         {block:Source}<div class="caption" style="text-align:right">— {Source}</div>{/block:Source}
  803.         {/block:Quote}
  804.        
  805.         {block:Photo}
  806.         <figure class="media-wrap no-text">
  807.             {LinkOpenTag}<img src="{PhotoURL-500}" width="100%">{LinkCloseTag}
  808.         </figure>
  809.         {block:Caption}
  810.         <div class="caption">{Caption}</div>
  811.         {/block:Caption}
  812.         {/block:Photo}
  813.        
  814.         {block:Photoset}
  815.         <figure class="media-wrap no-text">
  816.         {block:if400pxposts}
  817.             {Photoset-400}
  818.         {/block:if400pxposts}
  819.         {block:ifnot400pxposts}
  820.             {Photoset-500}
  821.         {/block:ifnot400pxposts}
  822.         </figure>
  823.         {block:Caption}
  824.         <div class="caption">{Caption}</div>
  825.         {/block:Caption}
  826.         {/block:Photoset}
  827.        
  828.         {block:Audio}
  829.         <figure class="media-wrap no-text">
  830.         {block:if400pxposts}
  831.             {AudioEmbed-400}
  832.         {/block:if400pxposts}
  833.         {block:ifnot400pxposts}
  834.             {AudioEmbed-500}
  835.         {/block:ifnot400pxposts}
  836.         </figure>
  837.         {block:Caption}
  838.         <div class="caption">{Caption}</div>
  839.         {/block:Caption}
  840.         {/block:Audio}
  841.        
  842.         {block:Video}
  843.         <figure class="media-wrap no-text">
  844.         {block:if400pxposts}
  845.             {Video-400}
  846.         {/block:if400pxposts}
  847.         {block:ifnot400pxposts}
  848.             {Video-500}
  849.         {/block:ifnot400pxposts}
  850.         </figure>
  851.         {block:Caption}
  852.         <div class="caption">{Caption}</div>
  853.         {/block:Caption}
  854.         {/block:Video}
  855.        
  856.         {block:More}
  857.         <a class="more" href="{Permalink}">{lang:Keep reading}</a>
  858.         {/block:More}
  859.        
  860.         {block:HasTags}
  861.         <footer class="tag-wrap">
  862.             {block:Tags}<span class="lnr lnr-tag"> </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
  863.         </footer>
  864.         {/block:HasTags}
  865.     </article>
  866.     {block:Date}
  867.     <footer class="info">
  868.         <span class="lnr lnr-calendar-full" aria-label="posted on"></span>&nbsp;&nbsp;<a href="{Permalink}" title="{TimeAgo}">{DayofMonth}.{MonthNumber}.{Year}</a>
  869.         {block:NoteCount}
  870.         <span class="lnr lnr-bookmark" aria-hidden="true"></span>&nbsp;&nbsp;<a href="{Permalink}#notes">{NoteCountWithLabel}</a>
  871.         {/block:NoteCount}
  872.         {block:ContentSource}
  873.         <span class="lnr lnr-pushpin" aria-label="source"></span>&nbsp;&nbsp;<a href="{SourceURL}">SRC</a>
  874.         {/block:ContentSource}
  875.        
  876.         <div class="controls">
  877.             <a href="{ReblogURL}" class="lnr lnr-redo"></a>
  878.             <span class="like-wrap">{LikeButton}<a class="like-btn lnr lnr-heart"></a></span>
  879.         </div>
  880.     </footer>
  881.     {/block:Date}
  882.     {block:PostNotes}
  883.     <footer id="notes" name="notes">
  884.         {PostNotes}
  885.     </footer>
  886.     {/block:PostNotes}
  887.     {/block:Posts}
  888. </main>
  889.  
  890. {block:Pagination}
  891. <nav id="pagination">
  892.     {block:PreviousPage}
  893.     <a class="pag lnr lnr-arrow-left" title="Previous" aria-label="previous page" href="{PreviousPage}"></a>
  894.     {/block:PreviousPage}
  895.     {block:NextPage}
  896.     <a class="pag lnr lnr-arrow-right" title="Next" aria-label="next page" href="{NextPage}"></a>
  897.     {/block:NextPage}
  898. </nav>
  899. {/block:Pagination}
  900.  
  901. </body>
  902.  
  903. <script>
  904. $(document).ready(function() {
  905.     $('iframe.tumblr_audio_player').load(function() {
  906.         $('iframe.tumblr_audio_player').height(85).contents().find("head")
  907.            .append($("<style type='text/css'> .audio-player { background:transparent !important; } .audio-player * { color:{color:text} !important } .audio-player .play-pause { color:{color:links} } </style>"));
  908.     });
  909.     $("[title]").style_my_tooltips({
  910.         tip_follows_cursor:true,
  911.         tip_delay_time:200,
  912.         tip_fade_speed:200
  913.     });
  914.     $(".lightbtn").click(function() {
  915.         $(this).toggleClass("inactive");
  916.         $(".lightrope li").toggleClass("notwink");
  917.     })
  918.     $(".linkbtn").click(function() {
  919.         $("#link-wrap").toggleClass("collapsed");
  920.     })
  921. });
  922. </script>
  923.  
  924. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!