API tools faq
paste
Advertisement
southcodes

wip new sc theme

southcodes
May 13th, 2019
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     add hr before replies in asks
  4.    
  5.    
  6.     - like button & photo lightbox by @shythemes
  7.    
  8.     - particles.js by https://marcbruederlin.github.io/particles.js/
  9.        
  10.     - popups by http://demos.inspirationalpixels.com/popup-modal/
  11.    
  12.     - captions documentation by @bychloethemes
  13.    
  14.     - embed audio css and hide empty answers script by @gukthemes
  15.    
  16.    
  17.     - redirect ask by https://html-tutorials.tumblr.com/post/86762537678/how-to-redirect-your-ask-to-faq-or-other-page
  18.    
  19.     - pxu photosets by pixel union https://github.com/PixelUnion/Extended-Tumblr-Photoset
  20.         tutorial by @shythemes https://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets
  21.         modified pxu script by @bychloethemes https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  22.    
  23. -->
  24.  
  25. <!DOCTYPE html>
  26. <html>
  27. <head>
  28.  
  29.     <title>{Title}</title>
  30.  
  31.     <link rel="shortcut icon" href="{favicon}">
  32.     <meta name="viewport" content="width=device-width">
  33.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  34.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  35.     <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/n7gvaew/8gop026qc/normalize.css">
  36.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Inconsolata" rel="stylesheet">
  37.    
  38.     <link href="//static.tumblr.com/0podkko/1C9otjxkc/jquery-ui.structure.css" rel="stylesheet">
  39.     <!--  PXU Photoset CSS -->
  40.     <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  41.     <!-- icons -->
  42.     <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  43.  
  44. <style type="text/css">
  45. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  46. .tmblr-iframe:hover {opacity:.8;}
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid #aaa;}
  49. ::-webkit-scrollbar {width:6px}
  50. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  51.  
  52. pre {font-family:consolas;
  53.     white-space: pre-wrap;       /* css-3 */
  54.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  55.     white-space: -pre-wrap;      /* Opera 4- */
  56.     white-space: -o-pre-wrap;    /* Opera 7 */
  57.     word-wrap: break-word;
  58.     background: #fbfbfb;
  59.     padding: .7rem;
  60.     border: 1px solid #ddd;
  61. }      /* Internet Explorer 5.5+ */
  62.  
  63. body, figure{margin:0;padding:0}
  64. html{font: 14px 'Open Sans', sans-serif;}
  65. body {font-size:1rem;color:#333;background:#fff;}
  66. a {text-decoration: none;color:#a30123;word-break:break-word;}
  67. a:hover {color:#000;}
  68. blockquote {margin:0;padding:0 0 0 .5rem;border-left:1px solid #ccc}
  69. /*blockquote blockquote{}*/
  70. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  71. hr {border:0;border-top:1px solid #aaa;margin:0;}
  72. b{font-weight: 600}
  73. nav li {margin:0;padding:0;list-style-type:none;display:inline-block;}
  74. video { max-width:100%;}
  75. small {font-size:.9rem}
  76.  
  77.  
  78. #container {
  79.     margin:auto;
  80.     min-height:100vh;
  81. }
  82.  
  83.  
  84.  
  85. #main {margin-top:12rem;}
  86.  
  87.     #in {
  88.         font-weight:600;
  89.         letter-spacing:.2rem;
  90.         font-size:1.7rem;
  91.         text-align:center;
  92.         margin-top:0rem;
  93.        
  94.     }
  95.    
  96.     #sc {
  97.         display:block;
  98.         font:400 .9rem 'Open Sans', sans-serif;
  99.         color:#bbb;
  100.         text-transform:lowercase;
  101.         font-style:italic;
  102.         letter-spacing:.05rem;
  103.         margin-top:.7rem;
  104.     }
  105.  
  106.  
  107.  
  108. #hinside {margin:2.5rem 0 0 2rem}
  109. #desc {color:#000;margin:0;font: 1.5rem/180% 'Inconsolata', sans-serif;padding-left:1rem;border-left:2px solid #a30123;width:16rem;}
  110. #hbg {
  111.     position:absolute;
  112.     top:-14rem;
  113.     left:-8rem;
  114.     width:31rem;
  115.     height:29rem;
  116.     background:rgba(104, 6, 6,.09);
  117.     border-radius:100%;}
  118.  
  119.  
  120.  
  121. .posttitle {
  122.     {block:AskPage}
  123.     {/block:AskPage}
  124.     {block:SubmitPage}
  125.     {/block:SubmitPage}
  126. }
  127.  
  128. /*  header  */
  129.  
  130. #navi {
  131.     position:sticky;
  132.     top:0;
  133.     max-width:100vw;
  134.     background:rgba(255, 255, 255,.9);
  135.     z-index:9;
  136.     font:600 1.1rem 'Open Sans', sans-serif;
  137.     text-transform:uppercase;
  138.     margin:5rem auto 5rem;
  139.     letter-spacing: .05rem;
  140.     padding:1rem;
  141.     text-align:center;
  142. }
  143.  
  144. #navi ul {
  145.     padding:0;
  146.     margin:0;
  147. }
  148. #navi ul li {
  149.     margin:1rem 3rem 0;
  150.     border-bottom: 1px solid #ddd;
  151.     transition-duration: .2s;
  152.     padding: .3rem .4rem;
  153. }
  154.  
  155. #navi ul li:last-of-type {
  156. }
  157.  
  158. #navi ul li:hover{
  159.     background:rgba(104, 6, 6,.1);
  160.     border:0;}
  161.    
  162. #navi ul li:hover a{
  163.     color:#a30123;
  164. }
  165.  
  166.  
  167. /* main */
  168.  
  169. #main {
  170.     width:500px;
  171.     margin: auto;
  172. }
  173.  
  174. .posts {
  175.     width:500px;
  176.     margin:0 auto 13rem;
  177. }
  178. .photo {display: block;margin: 0;}
  179.  
  180. /*               posts              */
  181.  
  182. /*      photosets      */
  183.  
  184.  
  185. .photo-slideshow {
  186.     width:500px;
  187. }
  188.  
  189. .photo-slideshow img {margin:0;}
  190.  
  191.  
  192. /*    chat    */
  193. .chat {
  194.     margin-bottom:1rem;}
  195.  
  196. .label_odd {color:#000;font-weight:600;line-height:200%;}
  197. .label_even{font-weight:600;line-height:120%;}
  198.  
  199. /*    quotes    */
  200. .quote {
  201.     margin-bottom:1rem;
  202. }
  203. .qsrc {
  204.     margin-bottom:1rem;
  205.     font-size:.9rem;
  206.     text-align:right;
  207. }
  208. .quote p br {display:none}
  209.  
  210. /*  audio   */
  211.  
  212. iframe.spotify_audio_player {height:85px;overflow:hidden;}
  213.  
  214.  
  215.  
  216. /*      asks        */
  217.  
  218. .ask {font-size:.9rem;}
  219.  
  220. .reply {display:block;}
  221.  
  222. .asker,.answerer {
  223.     font:400 1.1rem 'Open Sans', sans-serif;
  224.     font-style:italic;
  225. }
  226.  
  227. .asker,.answerer a{font-weight:600}
  228. .asker {    margin: 0 0 1rem 0;}
  229.  
  230. .q {
  231.     padding: 1rem;
  232.     background:rgba(104, 6, 6,.09);
  233. }
  234. .question {margin:0;line-height:180%;}
  235.  
  236.  
  237. /*  captions    */
  238.  
  239. .capt {
  240.     margin-top:1rem;
  241.     font-size:.9rem;
  242. }
  243. .cimg {    margin: 0 .3rem 0 0;
  244.     width: 1.5rem;
  245.     border-radius: 100%;
  246.     display: inline;
  247.     vertical-align: middle;}
  248. .user{    font-size: .85rem;
  249.     display: inline-block;
  250.     vertical-align: middle;}
  251. .userd:after {
  252.     color:#aaa;
  253.     margin-left:.5rem;
  254.     content:' (deactivated)';
  255.     display:inline-block;
  256. }
  257.  
  258. /* extras */
  259.  
  260.  
  261.  
  262. .ui-tooltip {
  263. display: inline-block;
  264. color:#333333;
  265. z-index:99999999!important;
  266. max-width:150px;
  267. position:absolute;
  268. padding:.3rem .5rem;
  269. line-height:150%;
  270. font-size:.8rem;
  271. background:rgba(255,255,255, 1);
  272. text-transform:lowercase;}
  273.  
  274.  
  275. .like-b {
  276.   position:relative;
  277.   display:inline-block;
  278.   vertical-align:bottom;
  279.   height:1rem;
  280.   line-height:110%;
  281.   overflow:hidden;
  282. }
  283. .like-b .like_button iframe {
  284.    position:absolute;
  285.    top:0;
  286.    left:0;
  287.    bottom:0;
  288.    right:0;
  289.    z-index:2;
  290.    opacity:0;
  291. }
  292. .like-b .liked + .b {
  293.   color:inherit;
  294. }
  295. .like-b .liked + .b:after {
  296.    content:'d';
  297. }
  298.  
  299. .via {
  300.     float:right;
  301.     height:1.4rem;
  302.     vertical-align:middle;
  303. }
  304.  
  305. .srcimg,.vimg{
  306.     display:block;
  307.     width:1.4rem;
  308.     height:1.4rem;
  309.     border-radius:4px;
  310.     border:1px solid rgba(209, 161, 171,.3);}
  311. .srcimg{
  312.     margin-top:-.5rem;
  313. }
  314. .vimg {
  315.     position:absolute;
  316.     z-index:2;
  317.     margin:.15rem 0 0 -.95rem;
  318. }
  319.  
  320. .time {
  321.     float:left;
  322.     vertical-align:middle;
  323.     text-transform:lowercase;
  324.     font-size:.85rem;
  325. }
  326.  
  327. .noteco {
  328.     float:left;
  329.     letter-spacing:.03rem;
  330.     font-size:.8rem;
  331. }
  332.  
  333.  
  334. .rl {
  335.     float:right;
  336.     font-size:.85rem;
  337.     letter-spacing:.04rem;
  338. }
  339.  
  340.  
  341.  
  342. .tags {
  343.     color:#666;
  344.     font-size:.9rem;
  345.     margin-top:.8rem;}
  346. .tags a{margin:0 .8rem 0 .2rem;
  347.     font-size:.9rem;}
  348.  
  349.  
  350. .notes {
  351.     font-size:1rem;
  352.     line-height:2rem;
  353.     margin:6rem auto;
  354.     box-sizing:border-box;}
  355. .notes ol{max-height:30rem;overflow:auto;padding:.2px;}
  356. .notes a{font-weight:600;}
  357. .notes img{display:none;}
  358. .notes li, .notes ol {margin:0;padding:0;list-style-type:none;}
  359.  
  360. .jump_page,.jump_page2 {
  361.     display:block;
  362.     margin:0 0 4rem;
  363.     font-size:.9rem;
  364. }
  365.  
  366. .jump_page {float:left;}
  367. .jump_page2 {float:right;}
  368.  
  369. .ttop {
  370.     display:none;
  371.     position:fixed;
  372.     bottom:2rem;
  373.     right:3rem;
  374.     z-index:99999;
  375.     font-size:.9rem;
  376.     font-weight:300;
  377.     letter-spacing:.07rem;
  378. }
  379.  
  380.  
  381. .pcontainer {
  382.   width: 100%;
  383.   height: 84px;
  384.   margin: 0 0 -95px;
  385.   padding: 0;
  386.     background:rgba(104, 6, 6,.09);
  387. }
  388. .pbackground {
  389.     margin-bottom:-5px;
  390. }
  391.  
  392.  
  393.   /*      popups      */
  394.  
  395. .popup .sf {
  396.     font-size:.8rem;
  397.     margin:.6rem .6rem 0 0;
  398. }
  399. .popup {
  400.     display:none;
  401.     background: rgba(0,0,0,.03);
  402.     z-index:10;
  403.     position:fixed;top:0;left: 0;right: 0;bottom: 0;
  404.     width:100%;}
  405. .popup-close {position:absolute;top:0rem;right:0rem;}.popup .ficon {width:1.4rem;height:1.4rem;padding:.4rem .4rem 0 0;}
  406. .popup-inner {
  407.     background: #fff;
  408.     position: fixed;
  409.     width:90%;max-width:40rem;
  410.     top:50%;
  411.     left:50%;
  412.     -webkit-transform:translateX(-50%) translateY(-50%);
  413.     -moz-transform: translateX(-50%) translateY(-50%);
  414.     -ms-transform: translateX(-50%) translateY(-50%);
  415.     transform:translateX(-50%) translateY(-50%);}
  416. .askbx {
  417.     padding:1rem;
  418.     border-bottom:5px solid #a30123;
  419.     line-height:150%;}
  420. #fask {margin-top:.5rem;}
  421. .coding {
  422.     display:flex;
  423.     flex-flow:row nowrap;
  424.     justify-content: space-around;
  425.     padding:4rem 0;
  426.     border-bottom:5px solid #a30123;}
  427. .coding a{color:#555;}
  428. /*  popup title  */
  429. .popupt {margin:0 0 1.5rem;
  430.     font:600 1.15rem 'Open Sans', sans-serif;
  431.     text-transform:uppercase;
  432.     letter-spacing:.06rem;
  433.     text-align:center;
  434.     color:{color:links};}
  435. .popuplist li,.popuplist {text-align:center;padding:0;margin:0;list-style-type:none;transition: all 0.35s ease-in-out}
  436. .popuplist li:before {
  437.     content:'— ';
  438.     position:absolute;
  439.     margin-left:-1.5rem;
  440.     display:none;}
  441. .popuplist li:hover:before {display:block;}
  442. .popuplist li:hover {
  443.     transition-duration: 0.2s}
  444. .popuplist li{
  445.     line-height:270%;
  446.     text-transform:uppercase;
  447.     font-size:.9rem;
  448.     letter-spacing:.06rem;}
  449.    
  450. .link a{
  451.     display:block;
  452.     font-size:1.5rem;
  453.     font-weight:600;
  454. }
  455.  
  456. .link{
  457.     padding:.7rem;
  458.     border-radius:4px;
  459.     border:1px solid #ccc;
  460.     font-size:.85rem;
  461.     color:#aaa;
  462.    
  463. }
  464.  
  465. {CustomCSS}
  466.  
  467.  
  468.  
  469. @media only screen and (min-width:0) and (max-width:846px) {
  470.    
  471.     #hinside {margin:0}
  472.     #desc {
  473.         color:#000;
  474.         margin:0 0 2rem ;
  475.         font: 1.5rem/180% 'Inconsolata', sans-serif;
  476.         padding:4rem .5rem 1rem;
  477.         border-left:none;
  478.         width:100%;
  479.         background:rgba(104, 6, 6,.09);
  480.         text-align:center;
  481.     }
  482.    
  483.     #hbg {
  484.     display:none;
  485.     }
  486. #navi ul li {
  487.     margin:1rem 1rem 0;}
  488.    
  489. }
  490.  
  491.  
  492. @media only screen and (min-width:847px) and (max-width:1090px) {
  493.    
  494. #navi ul li {
  495.     margin:1rem 1rem 0;}
  496.    
  497. #hinside {margin:0}
  498. #desc {
  499.     color:#000;
  500.     margin:0rem 0 2rem ;
  501.     font: 1.5rem/180% 'Inconsolata', sans-serif;
  502.     padding:4rem 0 1rem;
  503.     border-left:none;
  504.     width:100%;
  505.     background:rgba(104, 6, 6,.09);
  506.     text-align:center;
  507. }
  508.  
  509. #hbg {
  510. display:none;
  511. }
  512.  
  513.  
  514. </style>
  515. </head>
  516. <body id="top">
  517.  
  518. <section id="container">
  519.  
  520. <header id="header">
  521.  
  522.  
  523. <div id="hbg"></div>
  524. <div id="hinside">
  525.     <p id="desc">
  526.     themes, pages, and
  527.     web design resources.
  528.     curated by <a href="//transgerard.tumblr.com">skye</a>
  529.     </p>
  530. </div>
  531. </header>
  532.  
  533.  
  534.  
  535. <nav id="navi">
  536.     <p id="in">insomnia
  537.         <span id="sc">southcodes − since 2017</span>
  538.     </p>
  539.    
  540.     <ul><li><a class="nlink" href="/">index</a></li>
  541.     <li><a class="nlink" data-popup-open="popup-2" href="#">askbox</a></li>
  542.     <li><a class="nlink" href="/tagged/coding">codes</a></li>
  543.     <li><a class="codeslink" data-popup-open="popup-1" href="#">more</a></li>
  544. </ul></nav>
  545.  
  546. <main id="main">
  547. {block:Posts}
  548. <article class="posts" id="{PostID}">
  549.  
  550. {block:Date}<div style="width:100%;height:1rem"></div>
  551.     {block:RebloggedFrom}<div class="via">
  552.     <a target="_blank" href="{ReblogParentURL}" title="via: {ReblogParentName}"><img class="vimg" src="{ReblogParentPortraitURL-48}"/></a>
  553.     <a target="_blank" href="{ReblogRootURL}" title="source: {ReblogRootName}"><img class="srcimg" src="{ReblogRootPortraitURL-48}"/></a></a>
  554.     </div>{/block:RebloggedFrom}
  555.    
  556.     <date class="time"><a href="{Permalink}" title="{TimeAgo}">{ShortDayOfWeek} {DayOfMonthWithSuffix}</a></date>
  557.  
  558. <div style="clear:both;"></div>
  559.  
  560. <hr style="border-color:#ddd;margin: 1rem 0 1.5rem;width:calc(500px + 2rem);margin-left:-1rem;">
  561. {/block:Date}
  562.  
  563. {block:Answer}<div class="ask" >
  564. <div class="q">
  565.     <p class="asker">{Asker} sent:</p>
  566.     <p class="question">{Question}</p>
  567. </div>
  568. <div class="answer">
  569. {block:Answerer}
  570.     <p class="answerer">{Answerer} replied:</p>
  571. {/block:Answerer}
  572.     <span class="reply">{Answer}</span>
  573. </div>
  574. </div>
  575. {block:Answerer}<hr style="border:0;border-top:1px solid #ddd;margin:1.5rem auto; width:250px">
  576. {block:Reblogs}<div class="capt">
  577.  
  578.  
  579.  
  580. {block:HasAvatar}
  581.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  582.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  583.     {/block:HasAvatar}
  584.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  585.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  586.    
  587.         {Body}
  588. </div>{/block:Reblogs}
  589. {/block:Answerer}
  590. {/block:Answer}
  591.  
  592.  
  593. {block:Text}
  594. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  595. {block:Body}<div class="capt">
  596. {block:NotReblog}{Body}{/block:NotReblog}
  597. {block:RebloggedFrom}{block:Reblogs}
  598. {block:HasAvatar}
  599. {block:HasPermalink}<a href="{Permalink}" target="_blank" class="cimg"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  600. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  601. {/block:HasAvatar}
  602. {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  603. {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  604. {Body}
  605. {/block:Reblogs}{/block:RebloggedFrom}
  606. </div>{/block:Body}
  607. {/block:Text}
  608.  
  609.  
  610. {block:Quote}
  611. <div class="quote">{Quote}</div>
  612. {block:Source}<div class="qsrc">{Source}</div>{/block:Source}
  613. {/block:Quote}
  614.  
  615. {block:Link}
  616. <div class="link"><a href="{URL}">{Name}</a>
  617. {block:Excerpt}<div style="margin-top:.6rem">{Excerpt}</div>{/block:Excerpt}</div>
  618. {block:Description}<div class="capt">
  619. {block:NotReblog}{Description}{/block:NotReblog}
  620. {block:RebloggedFrom}{block:Reblogs}
  621. {block:HasAvatar}
  622.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  623.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  624.     {/block:HasAvatar}
  625.     {block:HasPermalink}<a target="_blank" class="user  {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  626.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  627.         {Body}
  628. {/block:Reblogs}{/block:RebloggedFrom}
  629. </div>{/block:Description}
  630. {/block:Link}
  631.  
  632. {block:Chat}<div class="chat">
  633. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  634. {block:Lines}{block:Label}
  635. <span class="label_{alt}">{Label}</span>{/block:Label} {Line}<br>
  636. {/block:Lines}
  637. </div>{/block:Chat}
  638.  
  639. {block:Photo}
  640. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  641.     <img class="photo" src="{PhotoURL-HighRes}">
  642. </a>
  643. {block:Caption}<div class="capt">
  644. {block:NotReblog}{Caption}{/block:NotReblog}
  645. {block:RebloggedFrom}{block:Reblogs}
  646. {block:HasAvatar}
  647.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  648.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  649.     {/block:HasAvatar}
  650.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  651.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  652.         {Body}
  653. {/block:Reblogs}{/block:RebloggedFrom}
  654. </div>{/block:Caption}
  655. {/block:Photo}
  656.  
  657. {block:Photoset}
  658. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  659. {block:Caption}<div class="capt">
  660. {block:NotReblog}{Caption}{/block:NotReblog}
  661. {block:RebloggedFrom}{block:Reblogs}
  662. {block:HasAvatar}
  663.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  664.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  665.     {/block:HasAvatar}
  666.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  667.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  668.         {Body}
  669. {/block:Reblogs}{/block:RebloggedFrom}
  670. </div>{/block:Caption}
  671. {/block:Photoset}
  672.  
  673. {block:Audio}
  674. {block:AudioEmbed}<div style="height:85px;overflow:hidden;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  675. {block:Caption}<div class="capt">
  676. {block:NotReblog}{Caption}{/block:NotReblog}
  677. {block:RebloggedFrom}{block:Reblogs}
  678. {block:HasAvatar}
  679.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  680.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  681.     {/block:HasAvatar}
  682.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  683.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  684.         {Body}
  685. {/block:Reblogs}{/block:RebloggedFrom}
  686. </div>{/block:Caption}
  687. {/block:Audio}
  688.  
  689. {block:Video}
  690. <div class="video">{Video-500}</div>
  691. {block:Caption}<div class="capt">
  692. {block:NotReblog}{Caption}{/block:NotReblog}
  693. {block:RebloggedFrom}{block:Reblogs}
  694. {block:HasAvatar}
  695.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  696.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  697.     {/block:HasAvatar}
  698.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  699.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  700.         {Body}
  701. {/block:Reblogs}{/block:RebloggedFrom}
  702. </div>{/block:Caption}
  703. {/block:Video}
  704.  
  705.  
  706. <hr style="border-color:#ddd;margin:1.5rem 0 1rem;width:calc(500px + 2rem);margin-left:-1rem">
  707.  
  708.     {block:NoteCount}<div class="noteco"><a href="{Permalink}" title="notes">{NoteCount}N.</a></div>{/block:NoteCount}
  709.    
  710.     {block:IndexPage}
  711.     <div class="rl">
  712.     <span><a class="rbg" href="{ReblogURL}" target="_blank">reblog</a> or
  713.     <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a></span>
  714.     </div>
  715.     {/block:IndexPage}
  716.    
  717.     <div style="clear:both"></div>
  718.      
  719.     {block:HasTags}<div class="tags">tagged: {block:Tags}
  720.     <span style="font-size:.8rem;margin-left:.6rem">#</span><a href="{TagURL}">{Tag} </a>
  721.     {/block:Tags}</div>{/block:HasTags}
  722. {/block:Date}
  723.  
  724. <!-- {block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  725.  
  726. </article> <!--posts-->
  727.  
  728. {block:PostNotes}
  729. <div class="notes">{PostNotes}</div>
  730. {/block:PostNotes}
  731. {/block:Posts}
  732.  
  733. {block:Pagination}<div class="pagi">
  734. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">back</a>{/block:PreviousPage}
  735. {block:NextPage}<a href="{NextPage}" class="jump_page2">next</a>{/block:NextPage}</div>
  736. {/block:Pagination}
  737.  
  738. <div style="clear:both"></div>
  739.  
  740. <a href="#top" class="achl ttop">go to top</a>
  741. </main>
  742.  
  743. </section> <!--container-->
  744.  
  745.  
  746. <!--        pop ups         -->
  747.  
  748. <div class="popup" data-popup="popup-2"><div class="popup-inner askbx">
  749.    
  750.     <h3 class="popupt">need help?</h3>
  751.    
  752.     <p>
  753.         Shoot me an ask or <a href="https://tumblr.com/message/{Name}" target="_blank">send me a message</a>! Please add which code you're having trouble with and include a link where the problem is so I can help you faster, thank you!
  754.    </p>
  755.    
  756.    <iframe id="fask" frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  757.    
  758. <a class="popup-close" data-popup-close="popup-2" href="#" title="close"><div class="sf sf-cross"></div></a></div></div>
  759.  
  760.  
  761. <div class="popup" data-popup="popup-1"><div class="popup-inner coding">
  762.    <div id="codes">
  763.    <h3 class="popupt">skye</h3>
  764.    <ol class="popuplist">
  765.        <li><a href="/a">about</a></li>
  766.        <li><a href="/n">full navigation</a></li>
  767.        <li><a href="https://transgerard.tumblr.com/">main blog</a></li>
  768.        <li><a href="https://twitter.com/mousekat_">twitter</a></li>
  769.    </ol>
  770.    </div>
  771.    
  772. <a class="popup-close" data-popup-close="popup-1" href="#" title="close"><div class="sf sf-cross"></div></a></div></div>
  773.  
  774. <div class="pcontainer" style="position:absolute;">
  775.  <canvas class="pbackground" style="postion:relative;bottom:0"></canvas>
  776. </div>
  777.  
  778. <!-- scripts -->
  779. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  780. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  781. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  782. <script src ="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  783. <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
  784. <script type="text/javascript">
  785.  
  786. if(window.location.pathname == '/ask') location.replace('/');
  787.  
  788. var particles = Particles.init({
  789.    selector: '.pbackground',
  790.    color: '#a30123',
  791.    maxParticles: 70,
  792.    
  793. });
  794.  
  795. $(document).ready(function(){
  796.    
  797.    $(document).tooltip({track:true,position: {my: 'left+20 top+15'}});
  798.    
  799.    // photosets
  800.    
  801.    $('.photo-slideshow').pxuPhotoset({
  802.    lightbox: true,
  803.    rounded: false,
  804.    gutter: '2px',
  805.    borderRadius: '0px',
  806.    photoset: '.photo-slideshow',
  807.    photoWrap: '.photo-data',
  808.    photo: '.pxu-photo'});
  809.    
  810.    // to top
  811.  
  812.    $(document).scroll(function() {
  813.    var y = $(this).scrollTop();
  814.    if (y > 500) {$('.ttop').fadeIn();}
  815.    else {$('.ttop').fadeOut();}});
  816.    
  817.    // audio iframes
  818.  
  819.    $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  820.    
  821.    // empty answers
  822.  
  823.    $( ".answer span.reply:empty" ).parent().hide();
  824.  
  825.    // anchor animation
  826.  
  827.    $('.achl').click(function(){
  828.    $('html, body').animate({
  829.    scrollTop: $( $(this).attr('href') ).offset().top
  830.    }, 450); return false;});
  831.    
  832.    // pop ups
  833.    
  834.        //----- OPEN
  835.    $('[data-popup-open]').on('click', function(e)  {
  836.    var targeted_popup_class = jQuery(this).attr('data-popup-open');
  837.    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
  838.    e.preventDefault();});
  839.    //----- CLOSE
  840.    $('[data-popup-close]').on('click', function(e)  {
  841.    var targeted_popup_class = jQuery(this).attr('data-popup-close');
  842.    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
  843.    e.preventDefault();});
  844.    $(".popup").click(function(){
  845.    $(".popup").fadeOut(350).removeClass("active");});
  846.    $(".popup-inner").click(function(e){e.stopPropagation();});
  847.    
  848. });
  849. </script>
  850. </body>
  851. </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!