API tools faq
paste
Advertisement
southcodes

full moon | theme

southcodes
Jun 29th, 2021 (edited)
2,713
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 30.75 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - theme 'full moon' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - like button and single photo lightbox by @shythemes
  8.     - captions documentation and modified pxu script by @bychloethemes
  9.     - fade in effect by @yearsandsyears
  10.     - embed audio css and hide empty answers script by @gukthemes
  11.     - pxu photosets by pixel union, tutorial by @shythemes
  12.     - icons by https://feathericons.com/
  13.    
  14.    
  15. -->
  16. <!DOCTYPE html>
  17. <html>
  18. <head>
  19.  
  20.     <title>{Title}</title>
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <meta name="viewport" content="width=device-width">
  24.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  26.    
  27.     <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/n7gvaew/8gop026qc/normalize.css">
  28.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Source+Sans+Pro:400,600|Ubuntu:400,500|Montserrat:400,500,600,700" rel="stylesheet">
  29.     <!-- pxu photosets-->
  30.     <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  31.  
  32. <meta name="image:updates image" content=""/>
  33.  
  34. <meta name="color:background" content="#f8f8f8"/>
  35. <meta name="color:posts background" content="#ffffff"/>
  36. <meta name="color:topbar background" content="#f3f3ff"/>
  37. <meta name="color:text" content="#333333"/>
  38. <meta name="color:links" content="#a3b0c3"/>
  39. <meta name="color:links hover" content="#0000ff"/>
  40. <meta name="color:borders" content="#dbe2fb"/>
  41. <meta name="color:accent" content="#597be2"/>
  42. <meta name="color:caption background" content="#f8f8f8"/>
  43. <meta name="color:popup background" content="#ffffff"/>
  44.  
  45. <meta name="select:font" content="'Open Sans', sans-serif" title="Open Sans"/>
  46. <meta name="select:font" content="'Source Sans Pro', sans-serif" title="Source Sans Pro"/>
  47. <meta name="select:font" content="'Ubuntu', sans-serif" title="Ubuntu"/>
  48.  
  49. <meta name="select:post size" content="450px"/>
  50. <meta name="select:post size" content="350px"/>
  51. <meta name="select:post size" content="400px"/>
  52. <meta name="select:post size" content="500px"/>
  53.  
  54. <meta name="select:font size" content="13px"/>
  55. <meta name="select:font size" content="12px"/>
  56. <meta name="select:font size" content="14px"/>
  57. <meta name="select:font size" content="15px"/>
  58.  
  59. <meta name="select:navi icon" content="folder"/>
  60. <meta name="select:navi icon" content="more-vertical"/>
  61. <meta name="select:navi icon" content="map-pin"/>
  62.  
  63. <meta name="select:popup icon" content="plus"/>
  64. <meta name="select:popup icon" content="user"/>
  65. <meta name="select:popup icon" content="info"/>
  66.  
  67. <meta name="if:static topbar" content="0"/>
  68. <meta name="if:updates image" content="1"/>
  69. <meta name="if:topbar opacity" content="1"/>
  70. <meta name="if:popup tab" content="1"/>
  71. <meta name="if:dropdown menu" content="1"/>
  72.  
  73. <meta name="text:popup hover title" content="pop up hover title" />
  74. <meta name="text:nav hover title" content="show more" />
  75.  
  76. <meta name="text:Link 1" content="index" />
  77. <meta name="text:Link 1 URL" content="/" />
  78. <meta name="text:Link 2" content="mail" />
  79. <meta name="text:Link 2 URL" content="/ask" />
  80. <meta name="text:Link 3" content="" />
  81. <meta name="text:Link 3 URL" content="" />
  82. <meta name="text:Link 4" content="" />
  83. <meta name="text:Link 4 URL" content="" />
  84. <meta name="text:Link 5" content="" />
  85. <meta name="text:Link 5 URL" content="" />
  86.  
  87. <style type="text/css">
  88.  
  89. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  90. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  91. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  92. .fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.8s;
  93.     -moz-animation-duration:.8s;
  94.     animation-duration:.8s;
  95.     -webkit-animation-delay:1.8s;
  96.     -moz-animation-delay:1.8s;
  97.     animation-delay:1.8s;}
  98.  
  99. .tmblr-iframe {margin:0rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  100. .tmblr-iframe:hover {opacity:.8;}
  101.  
  102. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:accent};}
  103. ::-webkit-scrollbar {width:7px;background:inherit;}
  104. ::-webkit-scrollbar-track-piece{background:transparent;margin:5px 0;}
  105.  
  106. pre {font-family:consolas;
  107.     white-space: pre-wrap;       /* css-3 */
  108.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  109.     white-space: -pre-wrap;      /* Opera 4- */
  110.     white-space: -o-pre-wrap;    /* Opera 7 */
  111.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  112.  
  113. body, figure{margin:0px;padding:0}
  114. html{font: 13px {select:font};}
  115. body {font-size:{select:font size};color:{color:text};background:{color:background};}
  116. a {text-decoration: none;color:{color:links};word-break:break-word;}
  117. a:hover {color:{color:links hover};}
  118. blockquote {margin:0;padding:0;}
  119. img {max-width:100%;height: auto;display: block;margin: 0}
  120. hr {border:0;border-top:1px solid {color:borders};margin:0;}
  121. /*hr {border:0;border-top:1px solid red;margin:0;}*/
  122. b{font-weight: 600}
  123. .posts ul li {list-style-type:none;}
  124. .posts ul, .posts ol {padding-left:1.5rem;}
  125. .posts ul li:before{content:'›  ';font-size:1.3rem;color:{color:accent}; margin-right:.5rem;}
  126. .ui-tooltip {display: inline-block;
  127.     color:{color:text};
  128.     background:red;
  129.     z-index:99999999!important;
  130.     max-width:150px;
  131.     position:absolute;
  132.     padding:.3rem .5rem;
  133.     font: 1rem 'Montserrat', sans-serif;
  134.     background:rgba({RGBcolor:caption background}, .95);
  135.     text-transform:lowercase;}
  136. p {margin:.7rem 0;}
  137.  
  138.     /*      pop up      */
  139.  
  140. #popup {
  141.     position:fixed;
  142.     display:none;
  143.     width:calc({select:post size} + 5rem * 2);
  144.     margin-left:-5rem;
  145.     height:100vh;
  146.     box-sizing:border-box;
  147.     padding: 20rem 5rem 2rem;
  148.     background:{color:posts background};
  149.     z-index:1;
  150.     overflow:auto;
  151.     font-size:.95rem;}
  152. .upb {right:5rem;
  153.     -moz-transition-duration: 0.15s;
  154.     -o-transition-duration: 0.15s;
  155.     -webkit-transition-duration: 0.15s;
  156.     transition-duration: 0.15s;}
  157. .upb:hover{transform:rotate(45deg);}
  158.  
  159. .uimg {
  160.     width:13rem;
  161.     height:13rem;
  162.     margin:0rem auto 1rem;
  163.     border-radius:100%;
  164.     object-fit:cover;
  165.     }
  166.  
  167. .uptit {
  168.    
  169.     text-align:center;
  170.     text-transform:uppercase;
  171.     font: 600 1.1rem 'Montserrat', sans-serif;
  172.     letter-spacing:.04rem;
  173.     margin:4rem 0 2rem;
  174. }
  175. .uptit span {border-bottom: 2px solid {color:accent};
  176.     padding: 0 .7rem .3rem;}
  177.  
  178. /* topbar */
  179.  
  180. #topbar {
  181.     position:fixed;top:0;left:0;right:0;
  182.     width:100%;
  183.     z-index:2;
  184. }
  185. #topbar .ficon{cursor:pointer;width:2rem;color:{color:accent};position:absolute;top:4rem;}
  186. #tinside {
  187.     position:relative;
  188.     width:{select:post size};
  189.     margin:auto;
  190.     padding: 4rem 5rem 2rem;
  191.     background:rgba({RGBcolor:topbar background},{block:IfTopbarOpacity}0.95{/block:IfTopbarOpacity}{block:IfNotTopbarOpacity}1{/block:IfNotTopbarOpacity});}
  192.  
  193. #btitle {
  194.     margin:0;
  195.     font: 700 1.5rem 'Montserrat', sans-serif;
  196.     text-transform:uppercase;
  197.     text-align:center;}
  198. #btitle a{color:{color:text};}
  199. #name {
  200.     margin:.8rem 0 0;
  201.     text-align:center;
  202.     font-size:.9rem;
  203.     letter-spacing:.04rem;
  204.     font-style:italic;}
  205. #name a{color:#aaa;}
  206.  
  207. #desc {
  208.     margin-top:1rem;
  209.     text-align:center;
  210.     font-size:.9rem;
  211. }
  212.  
  213. /* nav */
  214.  
  215. .navb {left:5rem;}
  216.  
  217. #navi {
  218.     position:absolute;
  219.     left:0;right:0;
  220.     width:100%;
  221.     display: -webkit-flex;
  222.     display:flex;
  223.     justify-content:space-around;
  224.     background:rgba({RGBcolor:topbar background},{block:IfTopbarOpacity}0.95{/block:IfTopbarOpacity}{block:IfNotTopbarOpacity}1{/block:IfNotTopbarOpacity});
  225.     box-sizing:border-box;
  226.     margin-top:2rem;
  227. }
  228. #navi li {
  229.     padding:1rem;
  230. }
  231. #navi li a{
  232.     text-transform:uppercase;
  233.     font-size:.8rem;
  234.     letter-spacing:.04rem;
  235.     color:{color:text};
  236. }
  237. #navi li a:hover{color:{color:links};}
  238. #navi ul,nav li {margin:0;padding:0;list-style-type:none;display:inline-block;}
  239.  
  240. .stop {overflow:hidden;}
  241.  
  242.           /*    general      */
  243.  
  244. #container {
  245.     width:{select:post size};
  246.     min-height:100vh;
  247.     padding:0rem 5rem 0;
  248.     margin: 0rem auto;
  249.     background:{color:posts background};}
  250.  
  251. #main {
  252.     width:{select:post size};
  253.     margin:0 auto 0;
  254.     padding-top:20rem;
  255. }
  256.  
  257. .posts {
  258.     width:{select:post size};
  259.     margin:0 auto 0rem;}
  260. .posts:last-of-type{padding-bottom:3rem;margin-bottom:0;}
  261. .photo {display: block;margin: 0;}
  262. .posthr {margin:12rem 0;width:calc({select:post size} + (5rem * 2));margin-left:-5rem;border-top: 1px solid {color:borders};}
  263. .posts:last-of-type hr{display:none;}
  264.  
  265. .posttitle {
  266.     margin:0 0 1.5rem;
  267.     {block:AskPage}
  268.     {block:SubmitPage}
  269.     {/block:SubmitPage}
  270.     {/block:AskPage};}
  271.  
  272. /*  captions    */
  273.  
  274. .capt {
  275.     padding:.5rem 1rem;
  276.     background:{color:caption background};
  277.     border:1px solid {color:borders};
  278. }
  279. .cimg {width:2rem;height:2rem;border-radius:100%;margin-right:.8rem;display:inline-block;vertical-align:middle;border:4px solid {color:borders};}
  280. .user {display:inline-block;vertical-align:top;font-size:.9rem;margin-top:.6rem;font-weight:600;}
  281.  
  282. /*               posts              */
  283.  
  284.  
  285.  
  286. /*      links      */
  287.  
  288.  
  289.  
  290. /*      photosets      */
  291.  
  292. .photo-slideshow {width:{select:post size};}
  293.  
  294. /*      asks        */
  295.  
  296. .ask-post {
  297.     margin-bottom:1rem;
  298. }
  299. .ask-post a {
  300.     margin:0;
  301. }
  302. .asker-image {
  303.     width:4rem;height:4rem;
  304.     border-radius:100%;
  305.     display:inline-block;
  306.     border:7px solid {color:borders};vertical-align:middle;
  307. }
  308. .ask-triangle {width:1rem;height:1rem;background:{color:borders};display:inline-block;vertical-align:middle;transform:rotate(45deg);margin-left:-.75rem;z-index:-1;position:relative;}
  309. .question {
  310.     display:inline-block;
  311.     vertical-align:top;
  312.     width:calc(100% - 7rem);
  313.     background:{color:caption background};
  314.     margin:0 0 1rem 1rem;
  315.     padding:1rem;
  316.     box-sizing:border-box;
  317.     border-radius:4px;
  318. }
  319.  
  320. .user-answerer {
  321.     display:inline-block;
  322.     background:{color:caption background};
  323.     margin:0;
  324.     width:100%;
  325.     padding:1rem 1rem 0;
  326.     box-sizing:border-box;
  327.     margin-top:2rem;
  328. }
  329.  
  330. .user-answerer img{
  331.     display:inline-block;
  332.     width:3rem;
  333.     vertical-align:middle;
  334.     margin-right:1rem;
  335.     border-radius:100%;
  336. }
  337.  
  338. .reply {
  339.     background:{color:caption background};
  340.     padding:1rem;
  341. }
  342.  
  343. .answer-body {
  344.     background:{color:caption background};
  345.     padding:0 1rem 1rem;
  346.     margin:0;
  347. }
  348.  
  349. .answer-body hr{
  350.     margin:1rem 0;
  351. }
  352. .answer-body hr:last-of-type,.answer-body hr:first-of-type {
  353.     border:0;margin:0;
  354. }
  355.  
  356.  
  357.  
  358. /*    chat    */
  359.  
  360. .label_odd {color:#000;font-weight:600;}
  361. .label_even{font-weight:600;}
  362.  
  363. .label-odd,.label-even {
  364.     background:{color:borders};
  365.     padding:.3rem .5rem;
  366.     border-radius:5px;
  367.     font-weight:600;
  368.     margin-right:.3rem;
  369. }
  370. .chat-line {
  371.     margin:1.3rem;
  372. }
  373. .chat-dialogue{
  374.     font-style:italic;
  375.     letter-spacing:.03rem;
  376.     margin-left:.3rem;
  377. }
  378.  
  379. /*    quotes    */
  380.  
  381.  
  382. .npf_quote {
  383.     font-family:'Open Sans', sans-serif!important;
  384.     line-height:180%;
  385.     position:relative;
  386.     font-style:italic;
  387.     letter-spacing:.03rem;
  388.     word-wrap: break-word;
  389. }
  390. .npf_quote:before,.npf_quote,.npf_quote p,.npf_quote * {
  391. }
  392.  
  393. .npf_quote:first-of-type:before {
  394.     content:'❝';
  395.     font-size:6rem;
  396.     color:{color:borders};
  397.     font-weight:600;
  398.     position:absolute;
  399.     margin:-.9rem 0 0 -3rem;
  400. }
  401.  
  402. .npf_quote:first-letter {
  403.     font-weight:600;
  404.     text-transform:uppercase;
  405.     font-size:2rem;
  406.     color:{color:links};
  407. }
  408.  
  409. /* links */
  410.  
  411. .link {
  412.     position:relative;
  413.     margin-bottom:1rem;
  414. }
  415.  
  416. .link a {margin-left:2rem;display:block;
  417.     font-size:1.3rem;
  418.     font-weight:600;
  419.     text-transform:uppercase;
  420.     letter-spacing:.03rem
  421. }
  422.  
  423. .link:hover .link-feather {
  424.     width:2.5rem;
  425.     transition-duration:.5s;
  426. }
  427.  
  428. .link-feather {
  429.     width:2rem;
  430.     color:{color:links};
  431.     font-weight:600;
  432.     position:absolute;
  433.     left:0;top:-.8rem;
  434.     transition-duration:.5s;
  435. }
  436.  
  437. .excerpt {
  438.     font-style:italic;
  439.     font-size:1rem;
  440.     margin-bottom:1rem;
  441.     letter-spacing:.03rem;
  442. }
  443.  
  444. /*  audio   */
  445.  
  446. iframe.spotify_audio_player {height:85px;overflow:hidden;}
  447.  
  448.  
  449. /* extras */
  450.  
  451. date {display:block;}
  452.  
  453. .tmblr-attribution {
  454.    background:transparent;width:inherit;margin:0 0 1rem;font-size:.8rem;letter-spacing:.03rem;display:block;text-transform:lowercase;
  455. }
  456.  
  457. .pnotes {
  458.     font-size:.8rem;
  459. }
  460.  
  461. .rl {
  462.     margin-right:1rem;
  463. }
  464. .reblog-button {
  465.     margin-right:1rem;
  466. }
  467. .reblogb{
  468.     display:inline-block;
  469.     color:{color:accent};
  470.     width:1rem;
  471.     vertical-align:bottom;
  472. }
  473.  
  474. svg {width:10px;height:auto;opacity:.5;display:block;overflow:visible;}
  475. .controls {display:inline-block;position:absolute;margin-top:.45rem; padding-right:1rem;}
  476. .controls .like .liked + svg {opacity:1;}
  477. .controls .like .liked + svg path {fill:#ec5a5a;}
  478. .controls .like .like_button {position:relative;}
  479. .controls .like .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:2;opacity:0;}
  480.  
  481. .like {
  482.     margin-right:1rem;
  483. }
  484. .tags {
  485.     margin-top:2rem;
  486. }
  487. .tags a{
  488.     margin-right:1.5rem;
  489.     border:1px solid {color:borders};
  490.     background:{color:posts background};
  491.     padding:.3rem.5rem .4rem;
  492.     border-radius:5px;
  493. }
  494.  
  495. .via {
  496.     margin:2rem 0 0;
  497.     float:right;
  498. }
  499.  
  500. .feather-via {
  501.     display:inline-block;
  502.     width:1.1rem;
  503.     margin-right:.7rem;
  504. }
  505.  
  506.  
  507. .via-reblog {
  508.     margin-right:1rem;
  509. }
  510. .via-reblog,.via-source {
  511.    
  512.     display:inline-block;
  513. }
  514.  
  515. .notes {
  516.     padding:1rem;
  517.     margin:4rem 0 0;
  518.     list-style-type:none;
  519.     font-size:1rem;
  520.     background:{color:topbar background};
  521.     border:1px solid {color:borders};
  522.     font-style:italic;
  523.     position:relative;
  524.     letter-spacing:.03rem;
  525. }
  526. .notes li {
  527.     margin:1rem 0 1rem 1rem;
  528. }
  529.  
  530. .notes li:before {
  531.     content:' ';
  532.     width:8px;
  533.     height:8px;
  534.     background:{color:links};
  535.     position:absolute;
  536.     left:1rem;
  537.     margin-top:.4rem;
  538.     border-radius:100%;
  539. }
  540.  
  541. .notes img{display:none;}
  542.  
  543. .navigation-arrow-next,.navigation-arrow-back {
  544.     width:2rem;
  545. }
  546. .pagi {
  547.     padding:2rem 0;
  548. }
  549. .jump_page2 {
  550.     /*position:absolute;*/
  551.    
  552.     margin:2rem 0;
  553.     float:right;
  554.     /*background:blue;*/
  555. }
  556. .jump_page {
  557.     /*position:absolute;*/
  558.     margin:2rem 0;
  559.     /*background:red;*/
  560.     float:left;
  561. }
  562.  
  563. .ttop {
  564.     display:none;
  565.     position:fixed;
  566.     bottom:3.4rem;
  567.     right:1.3rem;
  568.     z-index:99999;}
  569. .ttop .ficon{width:1.7rem;color:{color:accent};}
  570.  
  571. {CustomCSS}
  572.  
  573. {block:Ifstatictopbar}
  574. #topbar {
  575.     position:relative;top:0;left:0;right:0;
  576.     z-index:10;}
  577. #topbar .ficon{cursor:pointer;width:2rem;color:{color:accent};position:absolute;top:4rem;}
  578. #tinside {
  579.     position:relative;
  580.     width:calc(100% + 10rem);
  581.     margin:0 0 0 -5rem;
  582.     padding: 4rem 0 2rem;
  583.     background:rgba({RGBcolor:topbar background},{block:IfTopbarOpacity}0.95{/block:IfTopbarOpacity}{block:IfNotTopbarOpacity}1{/block:IfNotTopbarOpacity});}
  584.  
  585. #main {
  586.     width:{select:post size};
  587.     margin:0 auto;
  588.     padding-top:0;
  589.     margin-top:5rem;
  590. }
  591.    
  592. {/block:Ifstatictopbar}
  593.  
  594. .post-permalink {
  595.     background:{color:topbar background};
  596.     padding:1rem;
  597.     border:1px solid {color:borders};
  598.     font-size:1rem;
  599.     font-style:italic;
  600.     margin-top:-1px;
  601. }
  602.  
  603. .notes-date {
  604.    
  605.     float:left;
  606. }
  607.  
  608. .rl {
  609.     float:right;
  610. }
  611. .pnotes {
  612. }
  613. .permalink-date {
  614.     text-transform:lowercase;
  615. }
  616.  
  617. .newer-post,.older-post {
  618.     background:{color:topbar background};
  619.     border:1px solid {color:borders};
  620.     padding:.3rem .8rem;
  621.     border-radius:5px;
  622.     margin-top:4rem;
  623.     font-weight:600;
  624.     line-height:2rem
  625. }
  626.  
  627. .feather-arrow {
  628.     width:2rem;
  629.     display:inline-block;
  630.     vertical-align:top;
  631. }
  632.  
  633. .newer-post {
  634.     float:left
  635. }
  636.  
  637. .older-post {
  638.     float:right
  639. }
  640.  
  641. </style>
  642. </head>
  643. <body id="top">
  644. <section id="container" class="fade-in">
  645.  
  646. <div id="popup">
  647. <!--  POPUP TEXT GOES HERE
  648.   remember to wrap your paragraphs between <p> and </p>    -->
  649.    
  650.     {block:Ifupdatesimage}<figure class="uimg"><img class="uimg" src="{image:updates image}"/></figure>{/block:Ifupdatesimage}
  651.    
  652.     <h2 class="uptit"><span>pop up</span></h2>
  653.    
  654.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  655.    
  656.    
  657.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  658.    
  659. </div>
  660.  
  661. <!-- END POP UP-->
  662.  
  663. <header id="topbar"><div id="tinside">
  664.     {block:IfDropdownMenu}
  665.         <a class="nav" title="{text:nav hover title}"><i data-feather="{select:navi icon}" class="ficon navb"></i></a>
  666.     {/block:IfDropdownMenu}
  667.  
  668.     {block:IfPopupTab}
  669.     <a class="upb" title="{text:popup hover title}"><i data-feather="{select:popup icon}" class="ficon upb"></i></a>
  670.     {/block:IfPopupTab}
  671.    
  672.     <h1 id="btitle"><a href="/">{Title}</a></h1>
  673.    
  674.     <p id="name"><a href="/">{Name}</a></p>
  675.    
  676.     <p id="desc">{description}</p>
  677.    
  678.     <nav id="navi" {block:IfDropdownMenu} style="display:none"{/block:IfDropdownMenu}>
  679.     {block:iflink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:iflink1}
  680.     {block:iflink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:iflink2}
  681.     {block:iflink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:iflink3}
  682.     {block:iflink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:iflink4}
  683.     {block:iflink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:iflink5}
  684.     </nav>
  685. </div></header>
  686.  
  687. <main id="main">
  688.  
  689. {block:Posts}
  690. <article class="posts" id="{PostID}">
  691.  
  692. {block:Text}
  693. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  694. {block:Body}<div class="capt">
  695. {block:NotReblog}{Body}{/block:NotReblog}
  696. {block:RebloggedFrom}{block:Reblogs}
  697. {block:HasAvatar}
  698.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  699.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  700.     {/block:HasAvatar}
  701.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  702.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  703.         {Body}
  704. {/block:Reblogs}{/block:RebloggedFrom}
  705. </div>{/block:Body}
  706. {/block:Text}
  707.  
  708. {block:Answer}<div class="ask-post">
  709. <img src="{AskerPortraitURL-96}" class="asker-image">
  710.     <div class="ask-triangle"></div>
  711.     <div class="question">
  712.         <div class="user">{Asker} asked:</div>
  713.         <div style="margin-top:1rem">{Question}</div>
  714.     </div>
  715. {block:Answerer}
  716. <div>
  717.         <div class="user-answerer user"><img src="{AnswererPortraitURL-96}" alt="">{Answerer} answered:</div>
  718.         <div class="reply">{Answer}</div>
  719. </div>
  720. </div>
  721. {/block:Answerer}
  722.     {block:NotReblog}
  723.         {Replies}
  724.     {/block:NotReblog}
  725.  
  726. {block:RebloggedFrom}
  727.  
  728. {block:Reblogs}
  729.  
  730. <hr style="margin:1rem 0">
  731.  
  732.     {block:HasAvatar}
  733.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  734.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  735.     {/block:HasAvatar}
  736.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  737.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  738. {Body}
  739. {/block:Reblogs}
  740. {/block:RebloggedFrom}
  741. {/block:Answer}
  742.  
  743. {block:Quote}
  744. {Quote}
  745. {block:Source}{Source}{/block:Source}
  746. {/block:Quote}
  747.  
  748. {block:Link}<div class="link">
  749.     <i data-feather="link" class="link-feather"></i>
  750.    
  751.     <a href="{URL}">{Name}</a>
  752. </div>
  753. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}</a>
  754. {block:Description}<div class="capt">
  755. {block:NotReblog}{Description}{/block:NotReblog}
  756. {block:RebloggedFrom}{block:Reblogs}
  757.  
  758. {block:HasAvatar}
  759.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  760.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  761.     {/block:HasAvatar}
  762.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  763.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  764.         {Body}
  765.  
  766. {/block:Reblogs}{/block:RebloggedFrom}
  767. </div>{/block:Description}
  768. {/block:Link}
  769.  
  770. {block:Chat}
  771. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  772. {block:Lines}
  773. <div class="chat-line">
  774.    
  775.     {block:Label}
  776.         <span class="label-{alt}">{Label}</span>
  777.     {/block:Label}
  778.    
  779.     <span class="chat-dialogue">{Line}</span>
  780.    
  781. </div>    
  782. {/block:Lines}
  783. {/block:Chat}
  784.  
  785. {block:Photo}
  786. <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"><img src="{PhotoURL-HighRes}" class="photo"></a>
  787. {block:Caption}<div class="capt">
  788. {block:NotReblog}{Caption}{/block:NotReblog}
  789. {block:RebloggedFrom}{block:Reblogs}
  790. {block:HasAvatar}
  791.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  792.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  793.     {/block:HasAvatar}
  794.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  795.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  796.         {Body}
  797. {/block:Reblogs}{/block:RebloggedFrom}
  798. </div>{/block:Caption}
  799. {/block:Photo}
  800.  
  801. {block:Photoset}
  802. <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>
  803. {block:Caption}<div class="capt">
  804. {block:NotReblog}{Caption}{/block:NotReblog}
  805. {block:RebloggedFrom}{block:Reblogs}
  806. {block:HasAvatar}
  807.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  808.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  809.     {/block:HasAvatar}
  810.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  811.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  812.         {Body}
  813. {/block:Reblogs}{/block:RebloggedFrom}
  814. </div>{/block:Caption}
  815. {/block:Photoset}
  816.  
  817. {block:Audio}
  818. {block:AudioEmbed}<div style="height:85px;overflow:hidden;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  819. {block:Caption}<div class="capt">
  820. {block:NotReblog}{Caption}{/block:NotReblog}
  821. {block:RebloggedFrom}{block:Reblogs}
  822. {block:HasAvatar}
  823.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  824.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  825.     {/block:HasAvatar}
  826.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  827.     {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
  828.         {Body}
  829. {/block:Reblogs}{/block:RebloggedFrom}
  830. </div>{/block:Caption}
  831. {/block:Audio}
  832.  
  833. {block:Video}
  834. <div class="video">{Video-500}</div>
  835. {block:Caption}<div class="capt">
  836. {block:NotReblog}{Caption}{/block:NotReblog}
  837. {block:RebloggedFrom}{block:Reblogs}
  838. {block:HasAvatar}
  839.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  840.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  841.     {/block:HasAvatar}
  842.     {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  843.     {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  844.         {Body}
  845. {/block:Reblogs}{/block:RebloggedFrom}
  846. </div>{/block:Caption}
  847. {/block:Video}
  848.  
  849. {block:Date}
  850. <div class="post-permalink">
  851.  
  852. <div class="rl">
  853. <a class="reblog-button" href="{ReblogURL}" title="reblog" target="_blank"><i data-feather="repeat" class="reblogb"></i></a>
  854.  
  855. <div class="controls"><a class="like">{LikeButton}<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewbox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg></a></div>
  856. </div>
  857.  
  858. <date class="notes-date">
  859. {block:NoteCount}<a class="pnotes" href="{Permalink}">{NoteCount}</a>
  860.  &nbsp;<span style="font-style:normal;color:{color:links}">l</span> &nbsp; {/block:NoteCount}
  861.  
  862. <a class="permalink-date" href="{Permalink}" title="{ShortMonth} {DayOfMonthWithSuffix}">{DayOfWeek}</a>
  863. </date>
  864. <div style="clear:both"></div>
  865. {/block:Date}
  866.  
  867. {block:PermalinkPage}
  868. {block:RebloggedFrom}<div class="via">
  869.    
  870.     <div class="via-reblog" title="via: {ReblogParentTitle}">
  871.         <i data-feather="refresh-ccw" class="feather-via"></i>
  872.         <a href="{ReblogParentURL}">{ReblogParentName}</a>
  873.     </div>
  874.    
  875.     <div class="via-source" title="source: {ReblogRootTitle}">
  876.         <i data-feather="user" class="feather-via"></i>
  877.         <a href="{ReblogRootURL}">{ReblogRootName}</a>
  878.     </div>
  879. </div>{/block:RebloggedFrom}
  880. <div style="clear:both"></div>
  881. {/block:PermalinkPage}
  882.  
  883. {block:HasTags}<div class="tags">{block:Tags}
  884. <a href="{TagURL}">{Tag} </a>
  885. {/block:Tags}</div>{/block:HasTags}
  886. </div>
  887. {block:PermalinkPage}
  888. {block:PermalinkPagination}
  889. {block:PreviousPost}<a class="older-post" href="{PreviousPost}">Older post <i data-feather="arrow-right" class="feather-arrow"></i></a>{/block:PreviousPost}
  890. {block:NextPost}<a href="{NextPost}" class="newer-post"><i data-feather="arrow-left" class="feather-arrow"></i> Newer post</a>{/block:NextPost}
  891. <div style="clear:both"></div>
  892. {/block:PermalinkPagination}   
  893. {/block:PermalinkPage}
  894.  
  895. <!-- {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} -->
  896.  
  897. <hr class="posthr">
  898.  
  899. {block:PostNotes}
  900. {PostNotes}
  901. {/block:PostNotes}
  902.  
  903. </article> <!--posts-->
  904. {/block:Posts}
  905.  
  906.  
  907. {block:Pagination}<div class="pagi">
  908. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><i class="navigation-arrow-back" data-feather="chevron-left"></i></a>{/block:PreviousPage}
  909. {block:NextPage}<a href="{NextPage}" class="jump_page2"><i class="navigation-arrow-next" data-feather="chevron-right"></i></a>{/block:NextPage}</div>
  910. <div style="clear:both"></div>
  911. {/block:Pagination}
  912.  
  913.  
  914. <a href="#top" class="achl ttop" title="go to top"><i data-feather="chevron-up" class="ficon"></i></a>
  915. </main>
  916.  
  917. </section> <!--container-->
  918.  
  919. <a style="position:fixed;bottom:1.3rem;right:1.3rem;font-family:calibri;font-size:15px;line-height:14px;height:14px;padding:3px;color:#555;text-align:center;letter-spacing:.7px;color:{color:links}" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  920.  
  921. <!-- scripts -->
  922. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  923. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  924. <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
  925. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  926. <script type="text/javascript">
  927.  
  928. $(document).ready(function(){
  929.    
  930. feather.replace();
  931.  
  932. $('.upb').click(function(){
  933.     $('#popup').fadeToggle(300);
  934.     return false;
  935. });
  936.  
  937.  
  938. $('.photo-slideshow').pxuPhotoset({
  939.    lightbox: true,
  940.    rounded: false,
  941.    gutter: '2px',
  942.    borderRadius: '0px',
  943.    photoset: '.photo-slideshow',
  944.    photoWrap: '.photo-data',
  945.    photo: '.pxu-photo'
  946. });
  947.  
  948. $( function() { $( document ).tooltip({
  949.     track:true,
  950.     position: {my: 'left+20 top+15'}});
  951. });
  952.  
  953. $(document).scroll(function() {
  954.   var y = $(this).scrollTop();
  955.   if (y > 500) {
  956.     $('.ttop').fadeIn();
  957.   } else {
  958.     $('.ttop').fadeOut();}});
  959.  
  960. $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  961.  
  962. $( ".ask-post div.reply:empty" ).parent().hide();
  963.  
  964. $('.nav').click(function() {
  965.     $('#navi').slideToggle(600);
  966. });
  967.  
  968. $('.achl').click(function(){
  969. $('html, body').animate({
  970.     scrollTop: $( $(this).attr('href') ).offset().top
  971. }, 450); return false;
  972. });
  973.  
  974. });
  975. </script>
  976. </body>
  977. </html>
  978.  
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!