API tools faq
paste
southcodes

theme pack #1 theme saline

southcodes
Oct 28th, 2020 (edited)
621
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 29.42 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - theme 'saline' 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.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icons by https://honeybee.suiomi.com/
  10.     - like button & video resizing by @shythemes
  11.     - captions documentation by @bychloethemes
  12.     - embed audio css and hide empty answers script by @gukthemes
  13.     - css photosets by https://annasthms.github.io/photosets/
  14.    
  15. -->
  16.  
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.  
  21.     <title>{Title}</title>
  22.  
  23.     <link rel="shortcut icon" href="{favicon}">
  24.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  25.     <meta name="description" content="{MetaDescription}"/>
  26.    
  27.     <!-- normalize css -->
  28.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
  29.    
  30.     <!-- icon font -->
  31. <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  32.    
  33.     <!-- fonts -->
  34.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Dancing+Script:wght@500;700&display=swap" rel="stylesheet">
  35.    
  36.     <!--  Photoset CSS -->
  37.     <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  38.    
  39.    
  40. <meta name="image:icon" content=""/>
  41.  
  42. <meta name="color:background" content="#fdfdff"/>
  43. <meta name="color:text" content="#333333"/>
  44. <meta name="color:links" content="#130a73"/>
  45. <meta name="color:links hover" content="#477edc"/>
  46. <meta name="color:description background" content="#f8f7ff"/>
  47. <meta name="color:posts" content="#ffffff"/>
  48. <meta name="color:accents" content="#e3eafe"/>
  49. <meta name="color:icons" content="#4160a2"/>
  50. <meta name="color:borders" content="#aebbf5"/>
  51.  
  52. <meta name="select:post size" content="400px"/>
  53. <meta name="select:post size" content="350px"/>
  54. <meta name="select:post size" content="450px"/>
  55. <meta name="select:post size" content="500px"/>
  56.  
  57. <meta name="select:font size" content="13px"/>
  58. <meta name="select:font size" content="12px"/>
  59. <meta name="select:font size" content="14px"/>
  60. <meta name="select:font size" content="15px"/>
  61.  
  62. <meta name="text:Link 1" content="index" />
  63. <meta name="text:Link 1 URL" content="/" />
  64. <meta name="text:Link 2" content="mail" />
  65. <meta name="text:Link 2 URL" content="/ask" />
  66. <meta name="text:Link 3" content="" />
  67. <meta name="text:Link 3 URL" content="" />
  68. <meta name="text:Link 4" content="" />
  69. <meta name="text:Link 4 URL" content="" />
  70. <meta name="text:Link 5" content="" />
  71. <meta name="text:Link 5 URL" content="" />
  72.  
  73.  
  74. <style type="text/css">
  75.  
  76. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  77. .tmblr-iframe:hover {opacity:.8;}
  78.  
  79. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:links};}
  80. ::-webkit-scrollbar {width:6px;height:0;}
  81. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  82.  
  83. pre {font-family:consolas;
  84.     white-space: pre-wrap;       /* css-3 */
  85.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  86.     white-space: -pre-wrap;      /* Opera 4- */
  87.     white-space: -o-pre-wrap;    /* Opera 7 */
  88.     word-wrap: break-word;      /* Internet Explorer 5.5+ */
  89.     background:#fafafa;
  90.     border:1px solid {color:borders};
  91.     padding:1rem;
  92. }
  93.  
  94.  
  95. body, figure{margin:0;padding:0}
  96. html{font: 14px 'Open Sans', sans-serif;}
  97. body {font-size:{select:font size};color:{color:text};background:{color:background};}
  98. a {text-decoration: none;color:{color:links};word-break:break-word;}
  99. a:hover {color:{color:links hover};}
  100. blockquote {margin:0;padding:0;}
  101. blockquote blockquote {border-left:1px solid {color:borders};padding:.1rem 0 .1rem .7rem;}
  102. img {max-width:100%;height: auto;display: block;margin: 0}
  103. hr {border:0;border-top:1px solid {color:borders};margin:1rem 0;}
  104. video { max-width:100%;}
  105.  
  106. /*  header  */
  107.  
  108.  
  109. #top-header {
  110.     width:{select:post size};
  111.     margin:1.5rem auto;
  112.     box-sizing:border-box;
  113.     text-align:center;
  114. }
  115.  
  116. #blog-title {
  117.     margin:4rem 0 2rem;
  118.     font:700 4rem 'Dancing Script', cursive;
  119.     text-shadow: 2px 2px {color:borders};
  120. }
  121.  
  122. #blog-title a {
  123.     color:{color:text};
  124. }
  125. #description {
  126.     font-style:italic;
  127.     background:{color:description background};
  128.     margin:.5rem 0 0;
  129.     padding:2rem 2rem 2rem;
  130.     font-size:{select:font size};
  131.     letter-spacing:.06rem;
  132.     line-height:180%;
  133.     border:1px solid {color:borders};
  134.     border-right:3px solid {color:borders};
  135.     border-left:3px solid {color:borders};
  136.     color:{color:text};
  137.     position:relative;
  138. }
  139. #description div {
  140.     padding-bottom:1rem;
  141.     border-bottom:3px double {color:borders};  
  142. }
  143.  
  144.  
  145. nav ul, nav ul li {list-style-type:none; margin:0;padding:0;}
  146.  
  147. #top-nav {
  148.     position:sticky;top:0rem;
  149.     width:{select:post size};
  150.     margin:1.5rem auto 5rem;
  151.     background:{color:background};
  152.     padding:4rem 1rem 4rem;
  153.     box-sizing:border-box;
  154.     text-align:center;
  155.     z-index:9;
  156. }
  157.  
  158. #top-nav ul {
  159.     display:flex;
  160.     flex-flow:row nowrap;
  161.     justify-content:space-around
  162. }
  163. #top-nav ul li {display:inline-block;
  164.     text-transform:uppercase;
  165.     letter-spacing:.05rem;
  166.     font:600 .9rem 'Montserrat', sans-serif;
  167.     font-style:normal;
  168. }
  169. #top-nav .th, .link-number  {
  170.     display:block;
  171.     font-size:18px;
  172.     color:{color:icons};
  173.     padding-bottom: .6rem
  174. }
  175.  
  176. /* bottom navi */
  177.  
  178.  
  179. #bottom-header {
  180.     padding:.5rem 2rem;
  181.     position:fixed;bottom:0;left:0;right:0;
  182.     background:{color:accents};
  183.     z-index:99999;
  184.     border-top:1px solid {color:borders};
  185.     text-align:center;
  186. }
  187.  
  188. #bottom-nav ul,#bottom-nav ul li {margin:0;padding:0;vertical-align:middle;}
  189.  
  190. #bottom-nav ul {
  191.     font:600 {select:font size} 'Montserrat', sans-serif;
  192.     text-transform:uppercase;
  193.     margin:auto;
  194.     max-width:40rem;
  195.     display:flex;
  196.     flex-flow:row wrap;
  197.     justify-content:space-around;
  198.     align-items:center;
  199.     letter-spacing:.04rem;
  200. }
  201. #bottom-nav .th {
  202.     font-size:1.2rem;
  203.     display:block;
  204.     margin: 0 auto .5rem;
  205.     border-radius:100%;
  206.     padding:.4rem;
  207.     height:2rem;width:2rem;
  208.     line-height:2.4rem;
  209.     background:white;
  210.     color:{color:icons};
  211.     border:1px solid {color:borders};
  212. }
  213.  
  214. figure.bottom-header-icon {
  215.     margin:0 auto 1rem;
  216.     width:4rem;
  217.     height:4rem;
  218. }
  219.  
  220. img.bottom-header-icon {
  221.     width:100%;
  222.     height:100%;
  223.     object-fit:cover;
  224.     border-radius:100%;
  225.     border:2px solid white;
  226. }
  227. .bottom-header-icon {transition-duration:.4s;}
  228. .bottom-header-icon:hover {opacity:.8;}
  229.  
  230.  
  231. /* container*/
  232.  
  233. #container {
  234.     width:{select:post size};
  235.     margin:0 auto 10rem;
  236. }
  237.  
  238. /* main */
  239.  
  240. .posttitle {
  241.     margin:0;
  242.     line-height:170%;
  243.     {block:AskPage}
  244.     background:{color:accents};
  245.     border:1px solid {color:borders};
  246.     border-bottom:0;
  247.     padding:1rem;
  248.     {/block:AskPage}
  249.     {block:SubmitPage}
  250.     background:{color:accents};
  251.     border:1px solid {color:borders};
  252.     border-bottom:0;
  253.     padding:1rem;
  254.     {/block:SubmitPage}
  255. }
  256.  
  257. #pinned-post {
  258.     position:relative;
  259.     margin-left:3rem;
  260.     margin-bottom:1.2rem;
  261.     font-weight:600;
  262.     text-transform:uppercase;
  263.     letter-spacing:.03rem;
  264.    
  265. }
  266.  
  267. #pinned-post span {
  268.     background:{color:accents};
  269.     padding:.3rem .5rem;
  270.     border:1px solid {color:borders};
  271.     border-left:0;
  272. }
  273.  
  274. #pinned-post .th-push-pin {
  275.     font-size:2rem;
  276.     position:absolute;top:1rem;left:-2.75rem;
  277.     color:{color:icons};
  278.     z-index:5;
  279. }
  280.  
  281.  
  282. #pinned-post:before {
  283.     content:'';
  284.     position:absolute;left:-10px;bottom:-2px;
  285.     width:19px;
  286.     height:17px;
  287.     background:{color:accents};
  288.     z-index:-1;
  289.     border:1px solid {color:borders};
  290.     transform:rotate(45deg);
  291. }
  292.  
  293. #main {
  294.     width:{select:post size};
  295.     margin: -3rem auto 0;
  296. }
  297.  
  298. .posts {
  299.     width:{select:post size};
  300.     margin:0 auto 9rem;
  301.    
  302. }
  303. .post-wrapper {
  304.     padding:1rem;
  305.     border:1px solid {color:borders};
  306.     border-top:0;
  307.     background:{color:posts};
  308.     {block:AskPage}
  309.     padding:0rem;
  310.     border:0;
  311.     background:transparent;
  312.     {/block:AskPage}
  313.     {block:SubmitPage}
  314.     padding:0rem;
  315.     border:0;
  316.     background:transparent;
  317.     {/block:SubmitPage}
  318. }
  319.  
  320. /*               posts              */
  321.  
  322. .photo {display: block;margin: 0;}
  323.  
  324. .npf_row {margin:0!important}
  325.  
  326. /*  photosets  */
  327.  
  328. [photoset-layout] {
  329.     margin:0;
  330.     grid-gap: 1px;
  331. }
  332.  
  333. [photoset-layout] *{
  334.     margin:0;}
  335.  
  336. [photoset-layout] img {cursor:pointer}
  337.  
  338. /*      asks        */
  339.  
  340. .q {
  341.     padding:1rem;
  342.     border:1px solid {color:borders};
  343.     background:{color:accents};
  344.     border-radius:4px;
  345.     position:relative
  346. }
  347. .th-return {
  348.     font-size:1.8rem;
  349.     position:absolute;
  350.     bottom:-1.5rem;left:0;
  351.     transform:rotate(180deg);
  352.     color:{color:borders};
  353. }
  354.  
  355. .asker {
  356.     margin:.5rem 0 0 1rem;
  357.     text-transform:uppercase;
  358.     font-weight:600;
  359. }
  360. .asker span {margin-left:1.5rem;box-shadow: inset 0px -5px rgba({RGBcolor:borders}, .7);padding:0 .3rem;}
  361. .asker a {margin:0;padding:0;}
  362. .answer {
  363.     margin-top:2rem;
  364. }
  365. .ask-answerer {
  366.     padding:1rem 1rem 1rem 1rem;
  367.     border:1px solid {color:borders};
  368.     background:{color:accents};
  369.     border-radius:4px;
  370.     border-bottom-left-radius:0;
  371.     border-bottom-right-radius:0;
  372.     text-transform:uppercase;
  373.     font-weight:600;
  374.     letter-spacing:.04rem;
  375. }
  376. .reply {
  377.     padding:1rem;
  378.     border:1px solid {color:borders};
  379.     border-top:0;
  380.     background:{color:description background};
  381.     border-radius:4px;
  382.     border-top-left-radius:0;
  383.     border-top-right-radius:0;
  384. }
  385.  
  386. /*  link posts  */
  387.  
  388. .link-name {
  389.     font:600 1.5rem/180% "Montserrat", sans-serif;
  390.     font-weight:600;
  391.     vertical-align:middle;
  392. }
  393. .th-link {
  394.     font-size:1.2rem;
  395.     background:{color:accents};
  396.     border-radius:100%;
  397.     margin-right:1rem;
  398.     padding:1rem;
  399.     vertical-align:middle;
  400. }
  401. .link-excerpt {
  402.     font-size:{select:font size};
  403.     color:#555;
  404.     margin-top:1rem;
  405.     padding:.7rem 1rem;
  406.     background:{color:accents};
  407.     border:1px solid {color:borders};
  408.     border-radius:4px;
  409.     line-height:175%
  410. }
  411.  
  412.  
  413. /*    chat    */
  414.  
  415. .label-odd {
  416.     font-weight:600;
  417.     padding:.7rem;
  418.     background:{color:accents};
  419.     text-transform:uppercase;
  420.     letter-spacing:.04rem;
  421. }
  422. .label-even{
  423.     font-weight:600;
  424.     padding:.7rem;
  425.     text-align:right;
  426.     background:{color:borders};
  427.     text-transform:uppercase;
  428.     letter-spacing:.04rem;
  429. }
  430. .line-odd {
  431.     padding:1rem;
  432.     background:#fafafa;
  433. }
  434. .line-even {
  435.     padding:1rem;
  436.     background:#fafafa;
  437.     text-align:right;
  438. }
  439.  
  440. /*    quotes    */
  441. .quote {
  442.     font:600 1.5rem/160% 'Montserrat', sans-serif;
  443. }
  444. .qsrc {
  445.     margin-top:1.5rem;font-style:italic;letter-spacing:.03rem;
  446. }
  447.  
  448. /*  audio   */
  449.  
  450. iframe.spotify_audio_player {height:80px;overflow:hidden;}
  451.  
  452. /*  captions    */
  453. .capt {
  454.     margin:1rem 0 0 0;
  455. }
  456. .capt img {
  457.     margin:.7rem 0;
  458. }
  459. .cimg {
  460.     width:2rem;
  461.     height:2rem;
  462.     border-radius:4px;
  463.     display:inline-block;
  464.     vertical-align:middle;
  465.     margin-right:.5rem;
  466. }
  467. .user {
  468.     font-size:{select:font size};
  469.     text-transform:uppercase;
  470.     box-shadow: inset 0px -5px rgba({RGBcolor:borders}, .7);
  471.     vertical-align:middle;
  472.     letter-spacing:.07rem;
  473.     position:relative;
  474. }
  475.  
  476. .userd:after {
  477.     color:#aaa;
  478.     margin-left:.5rem;
  479.     content:' (deactivated)';
  480.  position:absolute;bottom:0;
  481.  font-size:{select:font size};
  482. }
  483.  
  484. /* extras */
  485.  
  486. .posts date {display:block;}
  487.  
  488. .bottom-date {
  489.     margin-top:1rem;
  490. }
  491.  
  492. .rbg {
  493.     margin-right:.5rem;
  494. }
  495.  
  496. svg {width:.9rem;height:auto;opacity:.5;display:block;overflow:visible;}
  497. .controls {display:inline-block;margin:.2rem .2rem 0 .5rem;}
  498. .controls .like .liked + svg {opacity:1;}
  499. .controls .like .liked + svg path {fill:#ec5a5a;}
  500. .controls .like .like_button {position:relative;}
  501. .controls .like .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:2;opacity:0;}
  502.  
  503. .via-source {
  504.     margin-top:2.5rem;
  505.     text-align:center;
  506.     font-weight:600;
  507.     letter-spacing:.08rem;
  508.     font-size:{select:font size};
  509.     font-family:'Montserrat', sans-serif;
  510. }
  511. .via-source .th {
  512.     vertical-align:middle;
  513.     margin-right:.3rem;
  514.     font-size:.9rem;
  515. }
  516. .reblog-via, .reblog-source {
  517.     padding:.7rem 1rem;
  518.     background:{color:accents};
  519.     border: 1px solid {color:borders};
  520.     color:{color:links hover};
  521.     font-style:italic;
  522. }
  523.  
  524. .reblog-via {
  525.     margin-right:1rem;
  526. }
  527. .reblog-source {
  528.     margin-left:1rem;}
  529.  
  530. .notes {
  531.     font-size:{select:font size};
  532.     line-height:2rem;
  533.     margin:4rem auto 2rem;
  534.     box-sizing:border-box;
  535.     background:{color:posts};
  536.     padding:1rem; background:{color:posts};
  537.     border: 1px solid {color:borders};
  538.     padding:.5rem;
  539. }
  540. .notes ol{max-height:30rem;overflow:auto;border: 0;}
  541. .notes a{font-weight:600;}
  542. .notes img{display:none;}
  543. .notes li, .notes ol {margin:0;list-style-type:none;}
  544. .notes blockquote {
  545.     border-left:1px solid {color:borders};
  546.     padding:.1rem 0 .1rem .7rem;
  547. }
  548.  
  549. .ttop {
  550.     display:none;
  551.     position:fixed;
  552.     bottom:8rem;
  553.     right:3rem;
  554.     z-index:99999;
  555.     font-size:.9rem;
  556.     font-weight:300;
  557.     letter-spacing:.07rem;
  558.     color:{color:links};
  559. }
  560.  
  561. .top-date {
  562.     position:sticky;
  563.     top:calc(7rem + 4px);
  564.     width:100%;
  565.     background:{color:accents};
  566.     border:1px solid {color:borders};
  567.     padding:.7rem 1rem;
  568.     z-index:3;
  569.     box-sizing:border-box;
  570. }
  571. .day {
  572.     text-transform:uppercase;
  573.     font-size:{select:font size};
  574.     float:left;
  575.     margin-top:.3rem;
  576.     letter-spacing:.03rem;
  577.     line-height:100%;
  578. }
  579.  
  580. .rl {
  581.     float:right;
  582. }
  583. .bottom-date .th {
  584.     color:{color:icons};
  585.     font-size:1rem;
  586.     margin-right:1rem;
  587. }
  588.  
  589. .tag {
  590.     font-size:{select:font size};
  591.     margin-right:1rem;
  592. }
  593. .tags .th-bookmark-1 {
  594.     padding-left:1rem;
  595. }
  596.  
  597. .pagi {
  598.     font-style:italic;
  599.     letter-spacing:.04rem;
  600.     margin-bottom:20rem;
  601. }
  602. .pagi .th {
  603.     font-size:1.2rem;
  604.     vertical-align:middle;
  605. }
  606. .back-page {
  607.     float:left;
  608. }
  609. .next-page {
  610.     float:right;
  611. }
  612.  
  613. {CustomCSS}
  614.  
  615. </style>
  616. </head>
  617. <body id="top">
  618.  
  619.  
  620. <header id="top-header">
  621.  
  622.     <h1 id="blog-title"><a href="/">{title}</a></h1>
  623.    
  624.     <div id="description">
  625.         <div>{description}</div>
  626.     </div>
  627.    
  628. </header>
  629.  
  630. <nav id="top-nav"><ul>
  631.     {block:iflink1}<li><a href="{text:Link 1 URL}">
  632.    
  633.         <div class="th th-home"></div>
  634.         {text:Link 1}
  635.    
  636.     </a></li>{/block:iflink1}
  637.    
  638.     {block:iflink2}<li><a href="{text:Link 2 URL}">
  639.    
  640.         <div class="th th-envelope"></div>
  641.         {text:Link 2}
  642.    
  643.     </a></li>{/block:iflink2}
  644.    
  645.     {block:iflink3}<li><a href="{text:Link 3 URL}">
  646.    
  647.         <div class="link-number">O3</div>
  648.         {text:Link 3}
  649.    
  650.     </a></li>{/block:iflink3}
  651.    
  652.    
  653.     {block:iflink4}<li><a href="{text:Link 4 URL}">
  654.    
  655.         <div class="link-number">O4</div>
  656.         {text:Link 4}
  657.     </a></li>{/block:iflink4}
  658.    
  659.    
  660.     {block:iflink5}<li><a href="{text:Link 5 URL}">
  661.    
  662.         <div class="link-number">O5</div>
  663.         {text:Link 5}
  664.    
  665.     </a></li>{/block:iflink5}
  666.    
  667. </ul></nav>
  668.  
  669.  
  670. <header id="bottom-header">
  671.    
  672.     <nav id="bottom-nav"><ul>
  673.        
  674.         <a href="/about"><li><div class="th th-user"></div>about</li></a>
  675.        
  676.         <a href="/"><li><figure class="bottom-header-icon"><img class="bottom-header-icon" src="{image:icon}"/></figure></li></a>
  677.        
  678.         <a href="links"><li><div class="th th-equal-o"></div>links</li></a>
  679.        
  680.     </ul></nav>
  681.    
  682. </header>
  683.  
  684.  
  685. <section id="container">
  686.  
  687. <main id="main">
  688.  
  689. {block:Posts}
  690. <article class="posts" id="{PostID}">
  691.  
  692. {block:Date}
  693.  
  694. {block:PinnedPostLabel}<div id="pinned-post"><i class="th th-push-pin"></i><span>this is a pinned post</span></div>{/block:PinnedPostLabel}
  695.  
  696. <date class="top-date">
  697.  
  698. <a class="day" href="{Permalink}" title="{ShortMonth} {DayOfMonthWithSuffix} '{ShortYear}">{ShortDayOfWeek}</a>{block:NoteCount}&nbsp;&nbsp;|&nbsp;&nbsp;<a  class="pnotes" href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
  699.  
  700. <div class="rl">
  701. <span class="rbg"><a href="{ReblogURL}" title="reblog" target="_blank"><i class="th th-reblog"></i></a></span>
  702.  
  703. <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>
  704. </div>
  705. <div style="clear:both"></div>{/block:Date}
  706. </date>
  707.  
  708. <section class="post-wrapper">
  709.  
  710.  
  711.  
  712. {block:Text}
  713. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  714. {block:Body}<div class="capt">
  715. {block:NotReblog}{Body}{/block:NotReblog}
  716. {block:RebloggedFrom}
  717. {block:Reblogs}<div class="capt">
  718.  
  719. {block:HasAvatar}
  720.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  721.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  722.     {/block:HasAvatar}
  723.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  724.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  725.    
  726.         {Body}
  727. </div>{/block:Reblogs}{/block:RebloggedFrom}
  728. </div>{/block:Body}
  729. {/block:Text}
  730.  
  731.  
  732.  
  733. {block:Answer}
  734. <div class="ask-post">
  735.     <div class="q">{Question}
  736.         <div class="th th-return"></div>
  737.     </div>
  738.     <div class="asker"><span>{Asker}</span></div>
  739.    
  740.     {block:Answerer}
  741.     <div class="answer">
  742.        <div class="ask-answerer">{Answerer} answered:</div>
  743.     <div class="reply">{Answer}</div>
  744.    
  745.     </div>
  746. </div>
  747. {/block:Answerer}
  748.     {block:NotReblog}{Replies}
  749.     {/block:NotReblog}
  750. {block:RebloggedFrom}
  751. {block:Reblogs}<div class="capt" style="margin-top:1rem">
  752.  
  753. {block:HasAvatar}
  754.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  755.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  756.     {/block:HasAvatar}
  757.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  758.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  759.    
  760.         {Body}
  761. </div>{/block:Reblogs}{/block:RebloggedFrom}
  762. {/block:Answer}
  763.  
  764.  
  765. {block:Quote}
  766. <div class="quote">{Quote}</div>
  767. {block:Source}<div class="qsrc">β€” &nbsp;{Source}</div>{/block:Source}
  768. {/block:Quote}
  769.  
  770. {block:Link}
  771. <a href="{URL}" class="link-name"><i class="th th-link"></i>{Name}</a>
  772. {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}
  773. {block:Description}<div class="capt">
  774. {block:NotReblog}{Description}{/block:NotReblog}
  775. {block:RebloggedFrom}
  776. {block:Reblogs}<div class="capt">
  777.  
  778. {block:HasAvatar}
  779.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  780.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  781.     {/block:HasAvatar}
  782.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  783.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  784.    
  785.         {Body}
  786. </div>{/block:Reblogs}{/block:RebloggedFrom}
  787. </div>{/block:Description}
  788. {/block:Link}
  789.  
  790. {block:Chat}
  791. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  792. {block:Lines}
  793.  
  794.     {block:Label}<div class="label-{alt}">{Label}</div>{/block:Label}
  795.    
  796.     <div class="line-{alt}">{Line}</div>
  797. {/block:Lines}
  798. {/block:Chat}
  799.  
  800. <!--{block:Photo}-->
  801. <!--<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}"/>-->
  802. <!--{block:Caption}<div class="capt">-->
  803. <!--{block:NotReblog}{Caption}{/block:NotReblog}-->
  804. <!--{block:RebloggedFrom}-->
  805. <!--{block:Reblogs}<div class="capt">-->
  806.  
  807. <!--{block:HasAvatar}-->
  808. <!--    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}-->
  809. <!--    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}-->
  810. <!--    {/block:HasAvatar}-->
  811. <!--    {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}-->
  812. <!--    {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}-->
  813.    
  814. <!--        {Body}-->
  815. <!--</div>{/block:Reblogs}{/block:RebloggedFrom}-->
  816. <!--</div>{/block:Caption}-->
  817. <!--{/block:Photo}-->
  818.  
  819. {block:Photo}
  820. <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">
  821.     <img class="photo" src="{PhotoURL-HighRes}">
  822. </a>
  823. {block:Caption}<div class="capt">
  824. {block:NotReblog}{Caption}{/block:NotReblog}
  825. {block:RebloggedFrom}{block:Reblogs}
  826. {block:HasAvatar}
  827.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  828.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  829.     {/block:HasAvatar}
  830.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  831.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  832.         {Body}
  833. {/block:Reblogs}{/block:RebloggedFrom}
  834. </div>{/block:Caption}
  835. {/block:Photo}
  836.  
  837. {block:Photoset}
  838. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  839. {block:Caption}<div class="capt">
  840. {block:NotReblog}{Caption}{/block:NotReblog}
  841. {block:RebloggedFrom}
  842. {block:Reblogs}<div class="capt">
  843.  
  844. {block:HasAvatar}
  845.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  846.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  847.     {/block:HasAvatar}
  848.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  849.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  850.    
  851.         {Body}
  852. </div>{/block:Reblogs}{/block:RebloggedFrom}
  853. </div>{/block:Caption}
  854. {/block:Photoset}
  855.  
  856. {block:Audio}
  857. {block:AudioEmbed}<div style="height:85px;overflow:hidden;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  858. {block:Caption}<div class="capt">
  859. {block:NotReblog}{Caption}{/block:NotReblog}
  860. {block:RebloggedFrom}
  861. {block:Reblogs}<div class="capt">
  862.  
  863. {block:HasAvatar}
  864.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  865.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  866.     {/block:HasAvatar}
  867.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  868.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  869.    
  870.         {Body}
  871. </div>{/block:Reblogs}{/block:RebloggedFrom}
  872. </div>{/block:Caption}
  873. {/block:Audio}
  874.  
  875. {block:Video}
  876. <div class="video">{Video-500}</div>
  877. {block:Caption}<div class="capt">
  878. {block:NotReblog}{Caption}{/block:NotReblog}
  879. {block:RebloggedFrom}
  880. {block:Reblogs}<div class="capt">
  881.  
  882. {block:HasAvatar}
  883.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  884.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  885.     {/block:HasAvatar}
  886.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  887.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  888.    
  889.         {Body}
  890. </div>{/block:Reblogs}{/block:RebloggedFrom}
  891. </div>{/block:Caption}
  892. {/block:Video}
  893.  
  894. </section><!-- post wrapper end -->
  895.  
  896. {block:Date}
  897.     <date class="bottom-date">
  898.      
  899.     {block:HasTags}<div class="tags">
  900.     <i class="th th-bookmark-1"></i>
  901.     {block:Tags}#
  902.     <a href="{TagURL}" class="tag">{Tag} </a>
  903.     {/block:Tags}</div>{/block:HasTags}
  904. </date>
  905. {/block:Date}
  906.  
  907.  
  908. {block:PermalinkPage}
  909. {block:RebloggedFrom}<div class="via-source">
  910. <span class="reblog-via" title="reblogged from">
  911. <i class="th th-reblog"></i> <a href="{ReblogParentURL}">@{ReblogParentName}</a></span>
  912. |
  913. <span class="reblog-source" title="posted by"><i class="th th-location-1-o"></i> <a href="{ReblogRootURL}">@{ReblogRootName}</a></span>
  914. </div>{/block:RebloggedFrom}
  915. {/block:PermalinkPage}
  916.  
  917. <!-- {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} -->
  918.  
  919. </article> <!--posts-->
  920.  
  921. {block:PostNotes}
  922. <div class="notes">{PostNotes}</div>
  923. {/block:PostNotes}
  924. {/block:Posts}
  925.  
  926. {block:Pagination}<div class="pagi">
  927. {block:PreviousPage}<a href="{PreviousPage}" class="back-page"><i class="th th-chevron-left"></i> &nbsp;rewind</a>{/block:PreviousPage}
  928. {block:NextPage}<a href="{NextPage}" class="next-page">forward &nbsp;<i class="th th-chevron-right"></i></a>{/block:NextPage}</div>
  929. {/block:Pagination}
  930.  
  931. <a href="#top" title="go to top" class="achl ttop"><i class="th th-chevron-up"></i></a>
  932. </main>
  933.  
  934. </section> <!--container-->
  935.  
  936. <a style="position:fixed;bottom:1.3rem;right:1.3rem;font-size:15px;line-height:14px;height:14px;padding:3px;color:{color:links};text-align:center;letter-spacing:.7px;z-index:9999999" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  937.  
  938. <!-- scripts -->
  939. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  940. <!-- video resizing script by shythemes -->
  941. <script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  942. <script type="text/javascript">
  943.  
  944. function gatherData(images, arr) {
  945.   for (let i = 0; i < images.length; i++) {
  946.     let currentData = {
  947.       "width": images[i].getAttribute('data-width'),
  948.       "height": images[i].getAttribute('data-height'),
  949.       "low_res": images[i].getAttribute('data-lowres'),
  950.       "high_res": images[i].getAttribute('data-highres')
  951.     };
  952.     arr.push(currentData);
  953.   }
  954. }
  955. function getIndex(elem) {
  956.   let i = 0;
  957.   while( (elem = elem.previousElementSibling) != null ) i++;
  958.   return i;
  959. }
  960. function lightbox(elem) {
  961.   let currentPhotoset = elem.parentNode;
  962.   let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  963.   let data = [];
  964.   gatherData(photosetPhotos, data);
  965.   Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  966. };
  967.  
  968. $(document).ready(function(){
  969.  
  970.     $(document).scroll(function() {
  971.     var y = $(this).scrollTop();
  972.     if (y > 500) {$('.ttop').fadeIn();}
  973.     else {$('.ttop').fadeOut();}});
  974.  
  975.     $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  976.  
  977.     $( ".ask-post div.reply:empty" ).parent().hide();
  978.  
  979.     $('.achl').click(function(){
  980.     $('html, body').animate({
  981.     scrollTop: $( $(this).attr('href') ).offset().top
  982.     }, 450); return false;});
  983. });
  984. </script>
  985. </body>
  986. </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!