API tools faq
paste
Advertisement
southcodes

bella | theme

southcodes
Nov 25th, 2021 (edited)
2,985
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 35.16 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - theme 'bella' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by https://cappuccicons.com/
  11.     - like button & video resizing by @shythemes
  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.    
  25.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27.       {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}  
  28.    
  29.     <!-- normalize css -->
  30.      <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  31.    
  32.     <!-- icon font -->
  33.     <script src="https://pull.cappuccicons.com/cpf.js"></script>
  34.     <link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet">
  35.        
  36.     <!-- fonts -->
  37.     <link rel="preconnect" href="https://fonts.googleapis.com">
  38.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  39.     <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">    
  40.    
  41.     <!--  Photoset CSS -->
  42.      <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  43.  
  44.     <meta name="image:pop up image" content=""/>
  45.     <meta name="image:header image" content=""/>
  46.    
  47.     <meta name="color:background" content="#fbfbfb"/>
  48.     <meta name="color:other background" content="#ffffff"/>
  49.     <meta name="color:text" content="#333333"/>
  50.     <meta name="color:links" content="#7eb3da"/>
  51.     <meta name="color:links hover" content="#477edc"/>
  52.     <meta name="color:borders" content="#e2e2e2"/>
  53.     <meta name="color:accents" content="#c4e7f5"/>
  54.  
  55.     <meta name="select:font family" title="Inconsolata" content="'Inconsolata', monospace"/>
  56.     <meta name="select:font family" title="Open Sans" content="'Open Sans', sans-serif"/>
  57.  
  58.     <meta name="select:post size" content="450px"/>
  59.     <meta name="select:post size" content="350px"/>
  60.     <meta name="select:post size" content="400px"/>
  61.     <meta name="select:post size" content="500px"/>
  62.  
  63.     <meta name="select:font size" content="13px"/>
  64.     <meta name="select:font size" content="12px"/>
  65.     <meta name="select:font size" content="14px"/>
  66.     <meta name="select:font size" content="15px"/>
  67.    
  68.     <meta name="text:Header Link 1" content="link 1" />
  69.     <meta name="text:Header Link 1 URL" content="#" />
  70.     <meta name="text:Header Link 2" content="link 2" />
  71.     <meta name="text:Header Link 2 URL" content="#"/>
  72.     <meta name="text:Header Link 3" content="link 3" />
  73.     <meta name="text:Header Link 3 URL" content="#" />
  74.  
  75.     <meta name="text:Dropdown Link 1" content="link 4" />
  76.     <meta name="text:Dropdown Link 1 URL" content="#" />
  77.     <meta name="text:Dropdown Link 2" content="link 5" />
  78.     <meta name="text:Dropdown Link 2 URL" content="#"/>
  79.     <meta name="text:Dropdown Link 3" content="link 6" />
  80.     <meta name="text:Dropdown Link 3 URL" content="#" />
  81.    
  82.  
  83. <style type="text/css">
  84.  
  85. .tmblr-iframe {display:inline;margin:1.5rem 3rem 0 0;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  86. .tmblr-iframe:hover {opacity:.8;}
  87.  
  88. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:links};}
  89. ::-webkit-scrollbar {width:6px;height:0;}
  90. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  91.  
  92. pre {font-family:consolas;
  93.     white-space: pre-wrap;       /* css-3 */
  94.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  95.     white-space: -pre-wrap;      /* Opera 4- */
  96.     white-space: -o-pre-wrap;    /* Opera 7 */
  97.     word-wrap: break-word;      /* Internet Explorer 5.5+ */
  98.     background:#fafafa;
  99.     border:1px solid {color:borders};
  100.     padding:1rem;
  101. }
  102.  
  103. body, figure{margin:0;padding:0}
  104. html{font: 14px {select:font family};letter-spacing: .07rem}
  105. body {font-size:{select:font size};color:{color:text};background:{color:background};}
  106. a {text-decoration: none;color:{color:links};word-break:break-word;}
  107. a:hover {color:{color:links hover};}
  108. blockquote {margin:0;padding:0;}
  109. blockquote blockquote {border-left:1px solid {color:borders};padding:.1rem 0 .1rem .7rem;}
  110. img {max-width:100%;height: auto;display: block;margin: 0}
  111. hr {border:0;border-top:1px solid {color:borders};margin:1rem 0;}
  112.  
  113. #container {margin-right:5rem;}
  114.  
  115. #main  {
  116.     padding-top: 17rem;
  117.     float:right;
  118.     min-height:100vh;
  119.     box-sizing:border-box;
  120.     background:{color:background};
  121.     width:calc(100% - 20rem);
  122. }
  123.  
  124. /* header */
  125.  
  126. #header {
  127.     position:fixed;top:0;left:0;right:5rem;
  128.     padding:2rem;
  129.     z-index:99;
  130.     border-bottom:1px solid {color:borders};
  131.     background:{color:other background};}
  132.  
  133. figure.header-image {
  134.     width:3rem;
  135.     height:3rem;
  136.     display:inline-block;
  137.     vertical-align:middle;
  138.     box-shadow: #ccc .2rem .2rem 3px;
  139.     border-radius:6px;}
  140. img.header-image {
  141.     width:100%;
  142.     height:100%;
  143.     object-fit:cover;
  144.     border-radius:6px;
  145. }
  146.  
  147. #blog-title {
  148.     display:inline-block;
  149.     vertical-align:middle;
  150.     margin-left:1rem;
  151.     font-size:1.5rem;}
  152. #header a #blog-title {color:{color:text};}
  153.  
  154. #description {margin:2rem 0;}
  155.  
  156. .navi-button {color:{color:links};cursor:pointer}
  157. .navi-button:hover {color:{color:links hover};}
  158. .cp-chevron-down {
  159.     color:{color:text};
  160.     font-size:.7rem;
  161. }
  162.  
  163. #navigation {line-height:150%;}
  164. #navigation li {display: inline-block;}
  165. #navigation a{color:{color:links};}
  166. #navigation a:hover{color:{color:links hover};}
  167. #navigation li:after {
  168.     content:' ∙ ';
  169.     margin:0 1rem;}
  170. #navigation li:last-of-type:after {content:'';}
  171. #navigation ul {
  172.     padding:0;
  173.     margin:0;
  174.     list-style-type:none;}
  175. #dropdown-navi {
  176.     position:absolute;
  177.     padding:2rem;
  178.     background:{color:other background};
  179.     left:0;right:0;
  180.     z-index:-9999;
  181. }
  182.  
  183. /* pop up */
  184.  
  185. #pop-up {
  186.     position:fixed;
  187.     bottom:0;top:0rem;left:0;right:5rem;
  188.     background:{color:background};
  189.     z-index:9999;
  190.     padding:2rem;
  191.     display:none;
  192.     overflow:auto;
  193. }
  194.  
  195. #pop-up-media .cp {font-size:1.2rem;}
  196.  
  197. .cp-cross {
  198.     color:{color:links};
  199.     cursor:pointer;
  200. }
  201.  
  202. #pop-up li {list-style-type:none;}
  203.  
  204. figure.pop-up-image {
  205.     width:15rem;
  206.     height:15rem;
  207.     margin:5rem auto 5rem;
  208. }
  209.  
  210. img.pop-up-image {
  211.     width:100%;
  212.     height:100%;
  213.     object-fit:cover;
  214.     border-radius:100%;
  215. }
  216.  
  217. #pop-up-text {
  218.     text-align:center;
  219.     margin:auto;
  220.     width:90%;
  221.     max-width:35rem;
  222.     line-height:150%;
  223. }
  224.  
  225. #pop-up-media {
  226.     text-align:center;
  227.     margin-top:3rem;
  228. }
  229.  
  230. #pop-up-media li {
  231.     display:inline-block;
  232.     margin:0 2rem;
  233. }
  234.  
  235. /* left sidebar */
  236.  
  237. #left-sidebar  {
  238.     position:fixed;top:0rem;bottom:0;left:0;
  239.     z-index:9;
  240.     overflow:auto;
  241.     width:20rem;
  242.     padding:16rem 1rem 1rem;
  243.     box-sizing:border-box;
  244.     border-right:1px solid {color:borders};
  245.     background:{color:other background};
  246. }
  247.  
  248. .box-title {
  249.     font-size:1.1rem;
  250.     text-transform:uppercase;
  251.     font-weight:600;
  252.     margin:1.3rem;
  253.     letter-spacing:.12rem;
  254.     color:{color:text};
  255.     padding:0 .5rem .5rem;
  256.     border-bottom:1px solid {color:borders};
  257. }
  258.  
  259. #tracking-box {
  260.     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, {color:accents} 100%);
  261.     padding: 1rem;
  262.     transition-duration: .2s;}
  263. #tracking-box:hover {
  264.     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, {color:accents} 0%, rgb(255, 255, 255) 100%);
  265.     transition-duration: .2s ;
  266. }
  267.  
  268. #info-box {
  269.     margin-top:2rem;
  270. }
  271.  
  272. #info-box li{
  273.     list-style-type:none;
  274.     margin:2rem 0;
  275.     line-height:240%;
  276. }
  277.  
  278. .info-title {
  279.     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, {color:accents} 0%, rgb(255, 255, 255) 100%);
  280.     padding:.5rem .5rem .5rem .7rem;
  281.     font-weight:600;
  282.     font-size:1.1rem;
  283.     letter-spacing:.2rem;
  284.     text-transform:uppercase;
  285. }
  286.  
  287. .update {
  288.     list-style-type:none;
  289.     margin:1rem 0;}
  290. .update:before {
  291.     content:'\ea54 ';
  292.     font-family:'cappuccicons';
  293.     color:{color:accents};
  294.     font-size:1rem;
  295.     margin:0 1rem 0 1rem
  296. }
  297.  
  298. #updates-box {line-height: 160%;}
  299. #updates-box hr {
  300.     border:0;
  301.     border-bottom:1px dotted {color:borders};
  302.     margin:0;
  303. }
  304.  
  305. .box-divider {
  306.     height:3px;
  307.     width:100%;
  308.     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, {color:accents} 100%);
  309.     margin:2rem 0;
  310. }
  311.  
  312. .progress-bar {
  313.     position:relative;
  314.     width:90%;
  315.     height:5px;
  316.     background: #eee;
  317.     border-radius:4px;
  318.     box-sizing:border-box;
  319.     margin:0 auto 1rem;
  320. }
  321.  
  322. .progress-inside {
  323.     position:absolute;
  324.     background:{color:accents};
  325.     top:0;left:0;bottom:0;
  326.     border-radius:4px;
  327. }
  328.  
  329. .progress-title {
  330.     font-weight:400;
  331.     margin:1rem 1rem .5rem;
  332. }
  333.  
  334. .single-note {
  335.     border:1px solid {color:borders};
  336.     border-radius: 4px;
  337.     background: {color:background};
  338.     padding:1rem;
  339.     margin:1rem 0
  340. }
  341.  
  342. .single-tag {
  343.     font-size: .9rem;
  344.     background: {color:background};
  345.     border:1px solid {color:borders};
  346.     padding:.5rem;
  347.     margin:1rem 0;
  348.     list-style-type:none;
  349.     line-height: 130%;
  350.     transition-duration: .2s ;
  351. }
  352. .single-tag:hover {background:{color:accents};}
  353.  
  354.  
  355. /* right sidebar */
  356.  
  357. #right-sidebar {
  358.     width:5rem;
  359.     background:{color:other background};
  360.     position:fixed;
  361.     right:0;top:0;bottom:0;
  362.     z-index:9999;
  363.     border-left:1px solid {color:borders};
  364. }
  365.  
  366. figure.favicon-image {
  367.     width:3rem;
  368.     height:3rem;
  369.     margin:2rem auto;
  370. }
  371.  
  372. img.favicon-image {
  373.     width:100%;
  374.     height:100%;
  375.     border-radius:100%;
  376.     border:.3rem solid {color:other background};
  377.     outline: 1px solid {color:borders};
  378.     box-sizing:border-box;
  379.     object-fit:cover
  380. }
  381.  
  382. #right-navigation {
  383.     width:5rem;
  384.     top:7rem;bottom:0;
  385.     position:fixed;
  386.     display:flex;
  387.     flex-flow: column nowrap;
  388.     justify-content:space-around;
  389.     text-align:center;
  390.     font-size:1.1rem;}
  391. #right-navigation li{list-style-type:none;}
  392.  
  393. .sidebar-button {
  394.     cursor:pointer;
  395.     color:{color:links};
  396.     display:none;
  397.     transition-duration: .2s ;}
  398. .sidebar-button:hover {transform:rotate(45deg); color:{color:links hover};}
  399.    
  400. /* posts */
  401.  
  402. .posttitle {font-size:2rem;position:relative;}
  403. .posttitle:before {
  404.     {block:askpage}
  405.     content:' ';
  406.     border-left:.7rem solid {color:accents};
  407.     padding-left:1rem;
  408.     {/block:askpage}
  409.     {block:submitpage}
  410.     content:' ';
  411.     border-left:.7rem solid {color:accents};
  412.     padding-left:1rem;
  413.     {/block:submitpage}
  414. }
  415.  
  416. .posts {
  417.     width:{select:post size};
  418.     line-height:130%;
  419.     margin:0 auto 13rem;
  420. }
  421. .posts h2 {line-height:160%;}
  422. .posts:last-of-type {margin-bottom:7rem;}
  423.  
  424. /*               posts              */
  425.  
  426. #pinned-post {
  427.     position:relative;
  428.     background:{color:other background};
  429.     padding-left:4rem;
  430.     border:1px solid {color:borders};
  431.     line-height:3rem;
  432.     font-weight:600;}
  433. #pinned-post:before {
  434.     content:' ';
  435.     width:3rem;
  436.     height:3rem;
  437.     background:{color:accents};
  438.     position:absolute;left:0;top:0;bottom:0;
  439. }
  440.  
  441. .cp-pin {
  442.     position:absolute;left:.9rem;top:.9rem;
  443.     font-size:1.2rem;
  444.     color:{color:links};
  445.     -moz-transform: scale(-1, 1);
  446.     -webkit-transform: scale(-1, 1);
  447.     -o-transform: scale(-1, 1);
  448.     -ms-transform: scale(-1, 1);
  449.     transform: scale(-1, 1);
  450. }
  451.  
  452. .photo {display: block;margin: 0;}
  453.  
  454. .npf_row {margin:0!important}
  455.  
  456. /* link posts */
  457.  
  458. .link-name {background: linear-gradient(90deg, rgba(2,0,36,1) 0%, {color:accents} 0%, rgb(255, 255, 255) 100%);
  459.     padding:.7rem;
  460.     margin-bottom:1.5rem;
  461.     display:block;
  462.     font-size:1.7rem;
  463.     line-height:150%;
  464. }
  465.  
  466. .link-excerpt {
  467.     margin-top:1.5rem;
  468. }
  469.  
  470.  
  471. /*      photosets      */
  472.  
  473. [photoset-layout] {
  474.     margin:0;
  475.     grid-gap: 1px;}
  476.  
  477. [photoset-layout] *{margin:0;}
  478.  
  479. [photoset-layout] img {cursor:pointer}
  480.  
  481. /* video posts */
  482.  
  483. .video, .resized {overflow:hidden;}
  484.  
  485. /* quotes post */
  486.  
  487. .quote {
  488.     font-size:1.2rem;
  489.     margin-bottom:1rem;
  490.     line-height:150%;
  491. }
  492. .quote-source {
  493.     margin-bottom:1rem;
  494.     text-align:right;
  495.     font-style:italic;
  496. }
  497.  
  498. /* chat posts */
  499.  
  500. .chat-post {margin-bottom:1rem;}
  501.  
  502. .chat-line-odd,.chat-line-even {
  503.     padding:.7rem;
  504.     border:1px solid {color:borders};
  505.     margin-top:-1px;}
  506. .chat-line-odd{background: {color:background};}
  507. .chat-line-even {background: {color:accents};}
  508. .label-odd,.label-even {font-weight:600;}
  509.  
  510. /* ask posts */
  511.  
  512. .ask-post {line-height:150%;}
  513. .q {
  514.     background:{color:accents};
  515.     padding:.5rem 1rem;
  516.     border-radius:4px;
  517. }
  518. .asker {
  519.     position:relative;
  520.     margin:1.5rem 0 1rem;
  521.     font-size:1.2rem;
  522.     font-weight:600;}
  523. .asker:before {
  524.     content:'';
  525.     width:1.5rem;
  526.     height:1.5rem;
  527.     background:{color:accents};
  528.     top:-2.3rem;left:.4rem;
  529.     position:absolute;
  530.     transform:rotate(45deg);
  531. }
  532.  
  533. .ask-answerer {
  534.     margin-top:2rem;
  535.     font-weight:600;
  536. }
  537.  
  538. /* captions */
  539.  
  540. .capt {margin-top:1rem;}
  541. .user {text-decoration:underline;margin-top:2rem;display:block;}
  542. .user:first-of-type {margin-top:1rem;}
  543. .cimg {display:none;}
  544.  
  545. /* pagination */
  546.  
  547. .pagi {
  548.     margin:0 auto;
  549.     padding-bottom:5rem;
  550.     width:{select:post size};
  551. }
  552.  
  553. .next-page {float:right;}
  554. .back-page {float:left;}
  555.  
  556. .pagi .cp {font-size:1.3rem;}
  557.  
  558. /* post notes*/
  559.  
  560. .notes {
  561.     width:{select:post size};
  562.     margin:0 auto 5rem;}
  563. .notes img {
  564.     display:inline-block;
  565.     margin-right:1rem;
  566.     border-radius:4px;}
  567. .notes ol,.notes ol li {
  568.     padding:0;margin:0;
  569.     list-style-type:none;}
  570. .notes ol li {margin-bottom:.7rem;}
  571.  
  572. /* controls reblog and like */
  573.  
  574. svg {
  575.    width:10px;
  576.    height:auto;
  577.    opacity:.5;
  578.    padding:1px;
  579.    display:block;
  580.    overflow:visible;}
  581.  
  582. .controls {
  583.     float:right;
  584.     position:sticky;
  585.     top:16rem;
  586.     margin-right:-2rem
  587. }
  588.  
  589. .controls a {
  590.    position:relative;
  591.    display:inline-block;
  592.    overflow:hidden;
  593.    padding:5px;
  594.    width:12px;
  595.    height:12px;}
  596. .controls .reblog {opacity:.93;}
  597. .controls .reblog svg {
  598.    width:9px;
  599.    margin-top:1px;}
  600. .controls .like .liked + svg {opacity:1;}
  601. .controls .like .liked + svg path {fill:#ec5a5a;}
  602. .controls .like .like_button {position:relative;}
  603. .controls .like .like_button iframe {
  604.    position:absolute;
  605.    top:0;
  606.    left:0;
  607.    bottom:0;
  608.    right:0;
  609.    z-index:2;
  610.    opacity:0;
  611. }
  612.  
  613.  
  614. /* permalink */
  615.  
  616. .permalink {
  617.     border-top:1px solid {color:borders};
  618.     padding-top:1rem;
  619. }
  620.  
  621. .noteco {font-size:.9rem;}
  622. .noteco span {
  623.     border-bottom:1px solid {color:links};
  624.     padding: 0 .3rem .3rem;
  625. }
  626.  
  627. /* via and source*/
  628.  
  629. .via {position:relative;}
  630.  
  631. .vimg {
  632.     width:1.6rem;
  633.     position:absolute;right:.7rem;
  634.     border-radius:4px;
  635.     border:2px solid {color:background};
  636.     box-sizing:border-box;
  637.     outline:1px solid {color:links};
  638. }
  639.  
  640. .srcimg {
  641.     width:1.6rem;
  642.     position:absolute;right:0;top:.7rem;
  643.     border-radius:4px;
  644.     border:2px solid {color:background};
  645.     box-sizing:border-box;
  646.     outline:1px solid {color:links};
  647.    
  648. }
  649.  
  650. /* tags */
  651.  
  652. .post-tags {
  653.     margin-right:3rem;
  654.     line-height:150%;
  655. }
  656.  
  657. .single-post-tag {
  658.     position:relative;
  659.     margin:0 1.5rem 0;}
  660.  
  661. .single-post-tag:hover:before {
  662.     background:{color:links hover};
  663.     transition-duration:.2s;
  664. }
  665.  
  666. .single-post-tag:before {
  667.     content:'';
  668.     width:.9rem;
  669.     height:.9rem;
  670.     background:{color:links};
  671.     border-radius:4px;
  672.     position:absolute;left:-1.5rem;top:.1rem;
  673.     transition-duration:.2s;
  674. }
  675.    
  676. {CustomCSS}
  677.  
  678. @media only screen and (min-width:0) and (max-width:950px) {
  679.    
  680.     #left-sidebar {display:none;}
  681.    
  682.     .sidebar-button { display:block}
  683.    
  684.     #main {
  685.         float:none;
  686.         width:100%;
  687.     }
  688. }
  689.  
  690.  
  691. @media only screen and (min-width:0) and (max-width:650px) {
  692.    
  693.     .posts,.pagi {
  694.         width:85%;
  695.     }
  696.    
  697. }
  698.  
  699. </style>
  700. </head>
  701. <body id="top">
  702.  
  703. <!--
  704.            
  705.             POP UP SECTION START
  706.  
  707. -->
  708.  
  709. <section id="pop-up">
  710.  
  711.     <i class="cp cp-cross"></i>
  712.  
  713.     <figure class="pop-up-image"><img src="{image:pop up image}" class="pop-up-image"/></figure>
  714.    
  715.     <article id="pop-up-text">
  716.         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit natus pariatur mollitia debitis repellat et accusantium quod nihil esse in temporibus hic voluptatem, consequuntur quam adipisci, omnis autem! Omnis, illo.
  717.     </article>
  718.    
  719.     <article id="pop-up-media"><ul>
  720.        
  721.         <li><a href=""><i class="cp cp-twitter"></i></a></li>
  722.        
  723.         <li><a href=""><i class="cp cp-instagram"></i></a></li>
  724.        
  725.         <li><a href=""><i class="cp cp-tumblr"></i></a></li>
  726.        
  727.         <li><a href=""><i class="cp cp-ko-fi"></i></a></li>
  728.        
  729.     </ul></article>
  730.    
  731. </section>
  732.  
  733. <!--
  734.            
  735.             POP UP SECTION END
  736.  
  737. -->
  738.  
  739.  
  740.  
  741. <!--
  742.            
  743.             RIGHT SIDEBAR SECTION START
  744.  
  745. -->
  746.  
  747.  
  748. <section id="right-sidebar">
  749.  
  750.     <figure class="favicon-image"><a href="/"><img src="{favicon}" class="favicon-image"
  751. ></a></figure>
  752.  
  753.     <nav id="right-navigation">
  754.    
  755.         <a href="/"><li><i class="cp cp-home-o"></i></li></a>
  756.        
  757.         <a href="/ask"><li><i class="cp cp-envelope-o"></i></li></a>
  758.        
  759.         <a href="#" title="about"><li><i class="cp cp-user"></i></li></a>
  760.        
  761.         <i class="cp cp-plus sidebar-button" title="more"></i>
  762.        
  763.         <a class="achl" href="#top"><li><i class="cp cp-chevron-up"></i></li></a>
  764.        
  765.     </nav>
  766.  
  767. </section>
  768.  
  769.  
  770. <!--
  771.            
  772.             RIGHT SIDEBAR SECTION END
  773.  
  774. -->
  775.  
  776.  
  777.  
  778. <!--
  779.            
  780.             HEADER SECTION START
  781.  
  782. -->
  783.  
  784. <header id="header">
  785.  
  786. <a href="/">
  787.     <figure class="header-image"><img class="header-image" src="{image:header image}"/></figure>
  788.    
  789.     <h1 id="blog-title">{title}</h1>
  790. </a>
  791.  
  792. <article id="description">{description}</article>
  793.  
  794. <nav id="navigation"><ul>
  795.  
  796.     <!-- HEADER LINKS
  797.            
  798.             TEMPLATE:
  799.            
  800.         <li><a href="LINK URL">LINK NAME</a></li>
  801.    
  802.     -->
  803.    
  804.     {block:ifHeaderlink1}<li><a href="{text:Header Link 1 URL}">{text:Header Link 1}</a></li>{/block:ifHeaderlink1}
  805.    
  806.     {block:ifHeaderlink2}<li><a href="{text:Header Link 2 URL}">{text:Header Link 2}</a></li>{/block:ifHeaderlink2}
  807.    
  808.     {block:ifHeaderlink3}<li><a href="{text:Header Link 3 URL}">{text:Header Link 3}</a></li>{/block:ifHeaderlink3}
  809.    
  810.     <li class="navi-button">
  811.        
  812.         click
  813.    
  814.     <i class="cp cp-chevron-down"></i>
  815.        
  816.     </li>
  817.    
  818.     <nav id="dropdown-navi" style="display:none"><ul>
  819.    
  820.     <!-- DROPDOWN LINKS
  821.        
  822.             TEMPLATE:
  823.            
  824.         <li><a href="LINK URL">LINK NAME</a></li>
  825.    
  826.     -->
  827.        
  828.         {block:ifHeaderlink1}<li><a href="{text:Dropdown Link 1 URL}">{text:Dropdown Link 1}</a></li>{/block:ifDropdownlink1}
  829.    
  830.     {block:ifDropdownlink2}<li><a href="{text:Dropdown Link 2 URL}">{text:Dropdown Link 2}</a></li>{/block:ifDropdownlink2}
  831.    
  832.     {block:ifDropdownlink3}<li><a href="{text:Dropdown Link 3 URL}">{text:Dropdown Link 3}</a></li>{/block:ifDropdownlink3}
  833.    
  834.     </ul></nav>
  835.    
  836.    
  837. </ul></nav>
  838.  
  839.  
  840. </header>
  841.  
  842.  
  843. <!--
  844.            
  845.             HEADER SECTION END
  846.  
  847. -->
  848.  
  849.  
  850.  
  851.  
  852. <!--
  853.            
  854.             LEFT SIDEBAR SECTION START
  855.  
  856. -->
  857.  
  858.  
  859. <section id="left-sidebar">
  860.    
  861. <article id="tracking-box">
  862.  
  863.     <b>TRACKING:</b> <a href="https://tumblr.com/tagged/{name}">#{name}</a>
  864.  
  865. </article>
  866.  
  867.  
  868. <article id="info-box">
  869.    
  870.     <li>
  871.         <span class="info-title">title</span>
  872.        
  873.         value
  874.        
  875.     </li>
  876.    
  877.     <li>
  878.         <span class="info-title">title</span>
  879.        
  880.         value
  881.        
  882.     </li>
  883.    
  884.     <li>
  885.         <span class="info-title">title</span>
  886.        
  887.         value
  888.        
  889.     </li>
  890.    
  891.  
  892. </article>
  893.  
  894.  
  895. <div class="box-divider"></div>
  896.  
  897.  
  898. <article id="updates-box">
  899.    
  900.     <h2 class="box-title">updates</h2>
  901.    
  902.    
  903.     <li class="update">this happened</li>
  904.    
  905.     <hr class="update-divider">
  906.    
  907.     <li class="update">this happened Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius voluptates <p>culpa et? Labore possimus officia consequatur corrupti reiciendis consectetur repellendus iure, eos reprehenderit soluta culpa nulla sit ipsum eveniet neque?</li>
  908.    
  909.     <hr class="update-divider">
  910.    
  911.     <li class="update">this happened</li>
  912.    
  913. </article>
  914.  
  915.  
  916. <div class="box-divider"></div>
  917.  
  918.  
  919. <article id="progress-bars-box" >
  920.  
  921.     <h2 class="box-title">progress</h2>
  922.    
  923.         <h3 class="progress-title">a thing</h3>
  924.        
  925.         <div class="progress-bar">
  926.             <div class="progress-inside" style="width:50%"></div>
  927.         </div>
  928.        
  929.        
  930.           <h3 class="progress-title">a thing</h3>
  931.        
  932.         <div class="progress-bar">
  933.             <div class="progress-inside" style="width:50%"></div>
  934.         </div>
  935.        
  936.        
  937.           <h3 class="progress-title">a thing</h3>
  938.        
  939.         <div class="progress-bar">
  940.             <div class="progress-inside" style="width:50%"></div>
  941.         </div>
  942.    
  943. </article>
  944.  
  945.  
  946. <div class="box-divider"></div>
  947.  
  948.  
  949. <article id="notes-box">
  950.    
  951.     <h2 class="box-title">notes</h2>
  952.  
  953.     <article class="single-note">
  954.         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste fugit laboriosam praesentium
  955.     </article>
  956.  
  957.     <article class="single-note">
  958.         Lorem ipsum dolor sit,
  959.     </article>
  960.  
  961.     <article class="single-note">
  962.         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, numquam error <p>similique optio tenetur nisi blanditiis iure omnis sunt, debitis eius natus delectus quasi iste id suscipit nostrum assumenda nam.
  963.     </article>
  964.  
  965. </article>
  966.  
  967. <div class="box-divider"></div>
  968.  
  969.  
  970. <article id="tags-box">
  971.    
  972.     <h2 class="box-title">tags</h2>
  973.  
  974.     <a href=""><li class="single-tag">one tag</li></a>
  975.    
  976.     <a href=""><li class="single-tag">one tag Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa consequatur corrupti assumenda voluptatem quod nemo reprehenderit ut, vitae qui ab similique incidunt sint inventore harum explicabo voluptas distinctio culpa eaque?</li></a>
  977.    
  978.     <a href=""><li class="single-tag">one tag</li></a>
  979.  
  980. </article>
  981.  
  982. </section>
  983.  
  984.  
  985. <!--
  986.            
  987.             LEFT SIDEBAR SECTION END
  988.  
  989. -->
  990.  
  991.  
  992.  
  993. <section id="container">
  994.  
  995.  
  996. <main id="main">
  997. {block:Posts}
  998. <article class="posts" id="{PostID}">
  999.  
  1000.  
  1001.     {block:PinnedPostLabel}<div id="pinned-post"><i class="cp cp-pin"></i>this is a pinned post</div>{/block:PinnedPostLabel}
  1002.  
  1003. {block:date}
  1004.  
  1005. <div class="controls">
  1006.  
  1007. <a href="{permalink}"  title="{TimeAgo}">
  1008.     <div style="width:1rem;height:1rem;border-radius:4px;background:{color:links}"></div>
  1009. </a>
  1010.  
  1011. <a href="{ReblogURL}" target="_blank" class="reblog" style="display:block">
  1012.     <i class="cp cp-reblog"></i>
  1013. </a>
  1014.  
  1015. <a href="#" class="like">{LikeButton}
  1016. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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>
  1017. </a>
  1018.  
  1019.  
  1020. </div>
  1021.  
  1022. {/block:date}
  1023.  
  1024. {block:Answer}
  1025. <div class="ask-post">
  1026.     <div class="q">{Question}
  1027.     </div>
  1028.     <div class="asker">{Asker}</div>
  1029.    
  1030.     {block:Answerer}
  1031.     <div class="answer">
  1032.        <div class="ask-answerer">{Answerer} answered:</div>
  1033.     <div class="reply">{Answer}</div>
  1034.    
  1035.     </div>
  1036. </div>
  1037. {/block:Answerer}
  1038.     {block:NotReblog}{Replies}
  1039.     {/block:NotReblog}
  1040. {block:RebloggedFrom}
  1041. {block:Reblogs}<div class="capt" style="margin-top:1rem">
  1042.  
  1043. {block:HasAvatar}
  1044.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1045.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1046.     {/block:HasAvatar}
  1047.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1048.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  1049.    
  1050.         {Body}
  1051. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1052. {/block:Answer}
  1053.  
  1054.  
  1055. {block:Text}
  1056. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  1057. {block:Body}<div class="capt">
  1058. {block:NotReblog}{Body}{/block:NotReblog}
  1059. {block:RebloggedFrom}{block:Reblogs}
  1060. {block:HasAvatar}
  1061. {block:HasPermalink}<a href="{Permalink}" target="_blank" class="cimg"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1062. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1063. {/block:HasAvatar}
  1064. {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1065. {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1066. {Body}
  1067. {/block:Reblogs}{/block:RebloggedFrom}
  1068. </div>{/block:Body}
  1069. {/block:Text}
  1070.  
  1071. {block:Quote}
  1072. <div class="quote">{Quote}</div>
  1073. {block:Source}<div class="quote-source">{Source}</div>{/block:Source}
  1074. {/block:Quote}
  1075.  
  1076. {block:Link}
  1077. <a href="{URL}" class="link-name"><i class="cp cp-link"></i> {Name}</a>
  1078. {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}
  1079. {block:Description}<div class="capt">
  1080. {block:NotReblog}{Description}{/block:NotReblog}
  1081. {block:RebloggedFrom}
  1082. {block:Reblogs}<div class="capt">
  1083.  
  1084. {block:HasAvatar}
  1085.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1086.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1087.     {/block:HasAvatar}
  1088.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1089.     {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  1090.    
  1091.         {Body}
  1092. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1093. </div>{/block:Description}
  1094. {/block:Link}
  1095.  
  1096. {block:Chat}<div class="chat-post">
  1097. {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  1098. {block:Lines}<div class="chat-line-{alt}">
  1099.  
  1100.     {block:Label}<span class="label-{alt}">{Label}</span>{/block:Label}
  1101.    
  1102.     <span class="line-{alt}">{Line}</span>
  1103. </div>{/block:Lines}
  1104. </div>{/block:Chat}
  1105.  
  1106. {block:Photo}
  1107. <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">
  1108.     <img class="photo" src="{PhotoURL-HighRes}">
  1109. </a>
  1110. {block:Caption}<div class="capt">
  1111. {block:NotReblog}{Caption}{/block:NotReblog}
  1112. {block:RebloggedFrom}{block:Reblogs}
  1113. {block:HasAvatar}
  1114.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1115.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1116.     {/block:HasAvatar}
  1117.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1118.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1119.         {Body}
  1120. {/block:Reblogs}{/block:RebloggedFrom}
  1121. </div>{/block:Caption}
  1122. {/block:Photo}
  1123.  
  1124. {block:Photoset}
  1125. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1126. {block:Caption}<div class="capt">
  1127. {block:NotReblog}{Caption}{/block:NotReblog}
  1128. {block:RebloggedFrom}{block:Reblogs}
  1129. {block:HasAvatar}
  1130.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1131.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1132.     {/block:HasAvatar}
  1133.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1134.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1135.         {Body}
  1136. {/block:Reblogs}{/block:RebloggedFrom}
  1137. </div>{/block:Caption}
  1138. {/block:Photoset}
  1139.  
  1140. {block:Audio}
  1141. {block:AudioEmbed}<div style="height:85px;overflow:hidden;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  1142. {block:Caption}<div class="capt">
  1143. {block:NotReblog}{Caption}{/block:NotReblog}
  1144. {block:RebloggedFrom}{block:Reblogs}
  1145. {block:HasAvatar}
  1146.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1147.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1148.     {/block:HasAvatar}
  1149.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1150.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1151.         {Body}
  1152. {/block:Reblogs}{/block:RebloggedFrom}
  1153. </div>{/block:Caption}
  1154. {/block:Audio}
  1155.  
  1156. {block:Video}
  1157. <div class="video">{Video-500}</div>
  1158. {block:Caption}<div class="capt">
  1159. {block:NotReblog}{Caption}{/block:NotReblog}
  1160. {block:RebloggedFrom}{block:Reblogs}
  1161. {block:HasAvatar}
  1162.     {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1163.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1164.     {/block:HasAvatar}
  1165.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1166.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1167.         {Body}
  1168. {/block:Reblogs}{/block:RebloggedFrom}
  1169. </div>{/block:Caption}
  1170. {/block:Video}
  1171.  
  1172. {block:Date}
  1173. <div class="permalink" >
  1174.     {block:RebloggedFrom}<div class="via">
  1175.    
  1176.     <a target="_blank" href="{ReblogRootURL}" title="source: {ReblogRootName}"><img class="srcimg" src="{ReblogRootPortraitURL-48}"/></a>
  1177.     <a target="_blank" href="{ReblogParentURL}" title="via: {ReblogParentName}"><img class="vimg" src="{ReblogParentPortraitURL-48}"/></a>
  1178.     </div>{/block:RebloggedFrom}
  1179.  
  1180.  
  1181.     {block:NoteCount}<div class="noteco" style="margin-bottom:1rem"><span><a href="{Permalink}">{NoteCount}</a></span></div>
  1182.     {/block:NoteCount}
  1183.  
  1184. </div>    
  1185.  
  1186.     {block:HasTags}<div class="post-tags">tagged: {block:Tags}
  1187.     <a href="{TagURL}" class="single-post-tag">{Tag} </a>
  1188.     {/block:Tags}</div>{/block:HasTags}
  1189.  
  1190. {/block:Date}
  1191.  
  1192. <!-- {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} -->
  1193.  
  1194. </article> <!--posts-->
  1195.  
  1196. {block:PostNotes}
  1197. <div class="notes">{PostNotes}</div>
  1198. {/block:PostNotes}
  1199. {/block:Posts}
  1200.  
  1201. {block:Pagination}<div class="pagi">
  1202. {block:PreviousPage}<div class="back-page"><a href="{PreviousPage}"><i class="cp cp-arrow-left"></i></a></div>{/block:PreviousPage}
  1203. {block:NextPage}<div class="next-page"><a href="{NextPage}"><i class="cp cp-arrow-right"></i></a></div>{/block:NextPage}</div>
  1204. {/block:Pagination}
  1205.  
  1206. </main>
  1207.  
  1208.  
  1209. <a href="https://southcodes.tumblr.com/" style="z-index:99999;position:fixed;right:.5rem;bottom:1rem;font-size:12px" target="_blank" >SC</a>
  1210.  
  1211.  
  1212. </section> <!--container-->
  1213.  
  1214. <!-- scripts -->
  1215.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  1216.        
  1217. <!-- video resizing script by shythemes -->
  1218. <script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1219.  
  1220. <script type="text/javascript">
  1221.  
  1222. function gatherData(images, arr) {
  1223.   for (let i = 0; i < images.length; i++) {
  1224.     let currentData = {
  1225.       "width": images[i].getAttribute('data-width'),
  1226.       "height": images[i].getAttribute('data-height'),
  1227.       "low_res": images[i].getAttribute('data-lowres'),
  1228.       "high_res": images[i].getAttribute('data-highres')
  1229.     };
  1230.     arr.push(currentData);
  1231.   }
  1232. }
  1233. function getIndex(elem) {
  1234.   let i = 0;
  1235.   while( (elem = elem.previousElementSibling) != null ) i++;
  1236.   return i;
  1237. }
  1238. function lightbox(elem) {
  1239.   let currentPhotoset = elem.parentNode;
  1240.   let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1241.   let data = [];
  1242.   gatherData(photosetPhotos, data);
  1243.   Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1244. };
  1245.  
  1246. $(document).ready(function(){
  1247.    
  1248.     $('.cp-user').click(function(){
  1249.         $('#pop-up').fadeToggle(300);
  1250.         return false;
  1251.     });
  1252.  
  1253.     $('.cp-cross').click(function(){
  1254.         $('#pop-up').fadeToggle(300);;
  1255.     });
  1256.  
  1257.     $('.sidebar-button').click(function() {
  1258.         $('#left-sidebar').slideToggle(600);
  1259.         return false;
  1260.     });
  1261.    
  1262.     $('.navi-button').click(function() {
  1263.         $('#dropdown-navi').slideToggle(600);
  1264.     });
  1265.  
  1266.     $(document).scroll(function() {
  1267.     var y = $(this).scrollTop();
  1268.     if (y > 500) {$('.ttop').fadeIn();}
  1269.     else {$('.ttop').fadeOut();}});
  1270.  
  1271.     $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  1272.  
  1273.     $( ".ask-post div.reply:empty" ).parent().hide();
  1274.  
  1275.     $('.achl').click(function(){
  1276.     $('html, body').animate({
  1277.     scrollTop: $( $(this).attr('href') ).offset().top
  1278.     }, 450); return false;});
  1279. });
  1280. </script>
  1281. </body>
  1282. </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!