API tools faq
paste
themesbydoori

Denotation

themesbydoori
Aug 15th, 2020 (edited)
1,120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 58.76 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾DENOTATION⏌ by sheathemes @ tumblr
  11.  
  12.  
  13.  
  14. - TERMS -
  15.  
  16. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  17. II. Do NOT take any part of my code to use for your personal designs
  18. III. Do NOT claim any part of my code as your own
  19. IV. NO redistrubuting of any of my code
  20. V. Editing is allowed. As long as it's NOT being claimed as your own
  21.  
  22. CREDITS
  23.  
  24. > PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Modified PXU photoset script tutorial by bychloethemes @ tumblr: http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  25.  
  26. > Video resize script: http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  27.  
  28. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  29.  
  30. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  31.  
  32. > Icons: https://themify.me/themify-icons
  33.  
  34. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  35.  
  36. > Audio player fix: https://shudesigns.tumblr.com/post/158812662057/tutorial-change-the-color-of-tumblrs-new-audio
  37.  
  38. > Inline images resizing script: https://gukthemes.com/post/169692012691/inline-images-resizing-script
  39.  
  40. > NPF Photoset Fix: https://annalogs.tumblr.com/photosets
  41.  
  42. !-->
  43.  
  44. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  45. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  46.  
  47. <head>
  48.  
  49. <!------------Smooth Scroll Script------------>
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  51. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  52. <!------------Smooth Scroll Script------------>
  53.  
  54. <!--Custom Fonts-->
  55. <link rel="preconnect" href="https://fonts.gstatic.com">
  56. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lato:wght@400;700&family=Merriweather:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display&family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Epilogue:wght@400;700&display=swap" rel="stylesheet">
  57. <!--Custom Fonts-->
  58.  
  59. <!--Homelinks Icons -->
  60. <link href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css" rel="stylesheet">
  61. <!--Homelinks Icons-->
  62.  
  63.  
  64.     <title>{Title}</title>
  65.     <link rel="shortcut icon" href="{Favicon}">
  66.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  67.     <meta charset="utf-8">
  68.     {block:Description}
  69.     <meta name="description" content="{MetaDescription}" />
  70.     {/block:Description}
  71.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  72.     <meta name="viewport" content="width=device-width, initial-scale=1">
  73.  
  74. <!--Custom Options-->
  75. <meta name="color:background" content="#fbfbfb" />
  76. <meta name="color:accent" content="#5a6e74" />
  77. <meta name="color:accented text" content="#ffffff" />
  78. <meta name="color:Text" content="#888888" />    
  79. <meta name="color:bold" content="#aa6d76"/>
  80. <meta name="color:italic" content="#aa6d76"/>
  81. <meta name="color:underline" content="#aa6d76"/>
  82. <meta name="color:Links" content="#000000" />
  83. <meta name="color:Link Hover" content="#aa6d76" />
  84. <meta name="color:text selection" content="#ffffff" />
  85. <meta name="color:text selection background" content="#5a6e74" />
  86. <meta name="color:Blockquote" content="#aa6d76" />
  87. <meta name="color:navigation" content="#000000" />
  88. <meta name="color:navigation background" content="#fbfbfb" />
  89. <meta name="color:Posts" content="#ffffff" />
  90. <meta name="color:Post Title" content="#000000" />
  91. <meta name="color:Post Title Background" content="#b0747c" />
  92. <meta name="color:Post Borders" content="#f6f6f6" />
  93. <meta name="color:question" content="#000000" />
  94. <meta name="color:question background" content="#fbfbfb" />
  95. <meta name="color:pagination" content="#000000" />
  96. <meta name="color:permalink" content="#ffffff" />
  97. <meta name="color:permalink hover" content="#cccccc" />
  98. <meta name="color:panel title background" content="#ffffff" />
  99. <meta name="color:panel title" content="#000000" />
  100. <meta name="color:panel icon background" content="#b0747c" />
  101. <meta name="color:panel icon" content="#ffffff" />
  102.  
  103. <meta name="select:Background Attachment" content="fixed" title="fixed">
  104. <meta name="select:Background Attachment" content="scroll" title="scroll">
  105. <meta name="select:Background Repeat" content="repeat" title="repeat">
  106. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  107.  
  108. <meta name="select:Body Font" content="Open Sans" title="Open Sans">
  109. <meta name="select:Body Font" content="Lato" title="Lato">
  110. <meta name="select:Body Font" content="Epilogue" title="Epilogue">
  111. <meta name="select:Body Font" content="Noto Sans JP" title="Noto Sans JP">
  112. <meta name="select:Body Font" content="Roboto" title="Roboto">
  113. <meta name="select:Body Font" content="Inter" title="Inter">
  114. <meta name="select:Body Font" content="Poppins" title="Poppins">
  115.  
  116. <meta name="select:font size" content="10" title="10px">
  117. <meta name="select:font size" content="11" title="11px">
  118. <meta name="select:font size" content="12" title="12px">
  119. <meta name="select:font size" content="13" title="13px">
  120.  
  121. <meta name="select:text align" content="left" title="left">
  122. <meta name="select:text align" content="justify" title="justify">
  123. <meta name="select:desc text align" content="center" title="center">
  124. <meta name="select:desc text align" content="justify" title="justify">
  125.  
  126. <meta name="select:Post Size" content="400" title="400px">
  127. <meta name="select:Post Size" content="450" title="450px">
  128. <meta name="select:Post Size" content="475" title="475px">
  129. <meta name="select:Post Size" content="500" title="500px">
  130. <meta name="select:Post Size" content="525" title="525px">
  131. <meta name="select:Post Size" content="540" title="540px">
  132.  
  133. <meta name="select:Post Padding" content="0" title="0px">
  134. <meta name="select:Post Padding" content="2" title="2px">
  135. <meta name="select:Post Padding" content="5" title="5px">
  136. <meta name="select:Post Padding" content="10" title="10px">
  137. <meta name="select:Post Padding" content="15" title="15px">
  138. <meta name="select:Post Padding" content="20" title="20px">
  139.  
  140. <meta name="select:Photoset gutter" content="1" title="1px">
  141. <meta name="select:Photoset gutter" content="2" title="2px">
  142. <meta name="select:Photoset gutter" content="4" title="4px">
  143. <meta name="select:Photoset gutter" content="6" title="6px">
  144. <meta name="select:Photoset gutter" content="8" title="8px">
  145. <meta name="select:Photoset gutter" content="10" title="10px">
  146.  
  147. <meta name="text:margin bottom" content="50"/>
  148.  
  149. <meta name="if:Link1" content="1" />
  150. <meta name="if:Link2" content="1" />
  151. <meta name="if:Link3" content="1" />
  152. <meta name="if:Link4" content="1" />
  153. <meta name="if:Link5" content="1" />
  154. <meta name="if:Link6" content="1" />
  155.  
  156. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  157. <meta name="text:CustomLink1Name" content="Link 1" />
  158. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  159. <meta name="text:CustomLink2Name" content="Link 2" />
  160. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  161. <meta name="text:CustomLink3Name" content="Link 3" />
  162. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  163. <meta name="text:CustomLink4Name" content="Link 4" />
  164. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  165. <meta name="text:CustomLink5Name" content="Link 5" />
  166. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  167. <meta name="text:CustomLink6Name" content="Link 6" />
  168.  
  169. <meta name="image:background" content=""/>
  170. <meta name="image:sidebar" content=""/>
  171.  
  172. <meta name="if:inverted tumblr controls" content="1" />
  173. <meta name="if:Small Cursor" content="0" />
  174. <meta name="if:Custom Text Selection" content="0"/>
  175. <meta name="if:Faded Images" content="0"/>
  176. <meta name="if:Grayscale Images" content="0"/>
  177. <meta name="if:info panel" content="0" />
  178. <meta name="if:Show Captions" content="1"/>
  179. <meta name="if:Show Tags" content="1"/>
  180. <meta name="if:hover tags" content="1"/>
  181.  
  182. <!--Custom Options-->
  183.  
  184. <style type="text/css">
  185.  
  186. /*----------FADE-IN ANIMATION----------*/
  187.  
  188. @keyframes fadein {
  189.     from {opacity:0;}
  190.     to {opacity:1;}
  191. }
  192.  
  193. @-moz-keyframes fadein { /* Firefox */
  194.     from {opacity:0;}
  195.     to {opacity:1;}
  196. }
  197.  
  198. @-webkit-keyframes fadein { /* Safari and Chrome */
  199.     from {opacity:0;}
  200.     to {opacity:1;}
  201. }
  202.  
  203. @-o-keyframes fadein { /* Opera */
  204.     from {opacity:0;}
  205.     to {opacity: 1;}
  206. }
  207.  
  208. /*----------TUMBLR CONTROLS----------*/
  209.  
  210. iframe.tmblr-iframe {
  211.     position:fixed!important;
  212.     z-index: 300!important;
  213.     top: 20px!important;
  214.     right:80px!important;
  215.     {block:ifnotinfopanel}
  216.     right: 20px!important;
  217.     {/block:ifnotinfopanel}
  218.     opacity:0.4!important;
  219.     {block:ifinvertedtumblrcontrols}
  220.     filter:invert(1);
  221.     -webkit-filter:invert(1);
  222.     -o-filter:invert(1);
  223.     -moz-filter:invert(1);
  224.     -ms-filter:invert(1);
  225.     filter:invert(100%) hue-rotate(180deg);
  226.     -webkit-filter:invert(100%) hue-rotate(180deg);
  227.     -moz-filter:invert(100%) hue-rotate(180deg);
  228.     -o-filter:invert(100%) hue-rotate(180deg);
  229.     -ms-filter:invert(100%) hue-rotate(180deg);
  230.     {/block:ifinvertedtumblrcontrols}
  231.     transform:scale(0.6);
  232.     transform-origin:100% 0;
  233.     -webkit-transform:scale(0.6);
  234.     -webkit-transform-origin:100% 0;
  235.     -o-transform:scale(0.6);
  236.     -o-transform-origin:100% 0;
  237.     -moz-transform:scale(0.6);
  238.     -moz-transform-origin:100% 0;
  239.     -ms-transform:scale(0.6);
  240.     -ms-transform-origin:100% 0;
  241.     -webkit-transition: 0.8s ease;
  242.     -moz-transition: 0.8s ease;
  243.     -o-transition: 0.8s ease;
  244.     transition: 0.8s ease;
  245. }
  246.  
  247. iframe.tmblr-iframe:hover {
  248.     opacity:0.8!important;
  249.     -webkit-transition: 0.8s ease;
  250.     -moz-transition: 0.8s ease;
  251.     -o-transition: 0.8s ease;
  252.     transition: 0.8s ease;
  253. }
  254.  
  255. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  256.  
  257. .vignette, #vignette {
  258.     opacity:0;
  259. }
  260. .lightbox-image, #tumblr_lightbox img {
  261.     box-shadow:none !important;
  262.     border-radius:0 !important;
  263.     max-width:none;
  264. }
  265.  
  266. .tmblr-lightbox, #tumblr_lightbox {
  267.     background-color:rgba({RGBcolor:Background}, 0.6) !important;
  268. }
  269.  
  270. .lightbox-image, #tumblr_lightbox img {
  271.     background-color: {color:posts} !important;
  272.     padding: 10px !important;
  273.     -moz-box-sizing:border-box;
  274.     box-sizing:border-box;
  275. }
  276.  
  277. /*----------SCROLLBAR----------*/
  278.  
  279. ::-webkit-scrollbar {
  280.     width: 10px;
  281.     height: 6px;
  282. }
  283. ::-webkit-scrollbar-button {
  284.     width: 0px;
  285.     height: 0px;
  286. }
  287. ::-webkit-scrollbar-thumb {
  288.     background-color: {color:accent};
  289.     border-radius: 20px;
  290.     border: 2px solid {color:Background};
  291. }
  292.  
  293. ::-webkit-scrollbar-track {
  294.     background: {color:posts};
  295.     border: 8px solid {color:posts};
  296.     border-radius: 20px;
  297. }
  298.  
  299. ::-webkit-scrollbar-corner {
  300.     background: transparent;
  301. }
  302.  
  303. /*----------TOOLTIPS----------*/
  304.  
  305. #s-m-t-tooltip {
  306.     max-width: 300px;
  307.     padding: 2px 5px;
  308.     margin: -20px 7px -2px 20px;
  309.     background-color: {color:accent};
  310.     font-size: {select:font size}px;
  311.     text-transform: lowercase;
  312.     color: {color:accented text};
  313.     font-weight: 600;
  314.     z-index: 999999999999999999999999999999999999;
  315. }
  316.  
  317. /*----------TEXT SELECTION----------*/
  318.  
  319. {block:ifCustomTextSelection}
  320. ::selection {
  321.     background: {color:text selection background};
  322.     color: {color:text selection};
  323. }
  324.  
  325. ::-moz-selection {
  326.     background: {color:text selection background};
  327.     color: {color:text selection};
  328. }
  329.  
  330. ::-webkit-selection {
  331.     background: {color:text selection background};
  332.     color: {color:text selection};
  333. }
  334. {/block:ifCustomTextSelection}
  335.  
  336. /*----------THEME BASICS----------*/
  337.  
  338. html, body {
  339.     color: {color:text};
  340.     font-family: {select:Body Font}, helvetica, sans-serif;
  341.     font-weight: 400;
  342.     font-size: {select:font size}px;
  343.     line-height:180%;
  344.     margin:0;
  345.     padding: 0;
  346.     text-align:left;
  347.     background: {color:background} url({image:Background}) center;
  348.     background-attachment: {select:Background Attachment};
  349.     background-repeat: {select:Background Repeat};
  350.     -webkit-font-smoothing: antialiased;
  351.     -moz-osx-font-smoothing: grayscale;
  352.     animation: fadein 2.5s;
  353.     -moz-animation: fadein 2.5s; /* Firefox */
  354.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  355.     -o-animation: fadein  2.5s; /* Opera */
  356. }
  357.  
  358. p:empty {
  359.     display: none;
  360. }
  361.  
  362. b,strong {
  363.     color:{color:bold};
  364.     font-weight: 700;
  365. }
  366.  
  367. i,em {
  368.     color:{color:italic};
  369. }
  370.  
  371. u {
  372.     color:{color:underline};
  373. }
  374.  
  375. hr {
  376.     width: 30%;
  377.     height: 1px;
  378.     background-color: {color:post borders};
  379.     color: {color:post borders};
  380.     border: 0px solid transparent;
  381. }
  382.  
  383. small,sub,sup {
  384.     font-size: calc({select:font size}px - 0.5px);
  385. }
  386.  
  387. h1,h2,h3 {
  388.     font-weight: 700;
  389.     font-size: 1.4em;
  390.     color: {color:bold};
  391. }
  392.  
  393. h4,h5,h6 {
  394.     font-weight: 700;
  395.     font-size: 1.2em;
  396.     color: {color:bold};
  397. }
  398.  
  399. pre {
  400.     white-space: pre-wrap;
  401.     white-space: -moz-pre-wrap;
  402.     white-space: -pre-wrap;
  403.     white-space: -o-pre-wrap;
  404.     word-wrap: break-word;
  405.     padding: 5px 10px;
  406.     font-family: inherit;
  407.     font-weight: 400;
  408.     line-height: 150%;
  409.     color: {color:question};
  410.     background-color: {color:question background};
  411. }
  412.  
  413. blockquote:not(.tumblr_parent) {
  414.     padding-left:10px;
  415.     margin: 10px;
  416.     border-left: 3px solid {color:blockquote};
  417. }
  418.  
  419. blockquote img {
  420.     max-width: 100%;
  421.     height: auto;
  422. }
  423.  
  424. figure {
  425.   margin: 1em 3px;
  426. }
  427.  
  428. a {
  429.     color:{color:links};
  430.     text-decoration:none;
  431.     -moz-transition-duration: 0.5s;
  432.     -o-transition-duration: 0.5s;
  433.     -webkit-transition-duration: 0.5s;
  434.     transition-duration: 0.5s;
  435. }
  436.  
  437. a:hover {
  438.     color:{color:link hover};
  439.     -moz-transition-duration: 0.5s;
  440.     -o-transition-duration: 0.5s;
  441.     -webkit-transition-duration: 0.5s;
  442.     transition-duration: 0.5s;
  443. }
  444.  
  445. {block:ifSmallCursor}
  446. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  447. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  448. {/block:ifSmallCursor}
  449.  
  450. /*----------PAGINATION----------*/
  451.  
  452. #pagination {
  453.     height:auto;
  454.     width:auto;
  455.     letter-spacing:1px;
  456.     margin-left:auto;
  457.     margin-right:auto;
  458.     margin-bottom: 90px;
  459.     margin-top: 20px;
  460.     text-transform:uppercase;
  461.     z-index:4;
  462.     text-align:center;
  463.     background:transparent;
  464. }
  465.  
  466. .ti-angle-left, .ti-angle-right {
  467.     font-size: 10px;
  468. }
  469.  
  470. #pagination a {
  471.     margin-left:1px;
  472.     background-color: {color:posts};
  473.     padding:10px;
  474.     color: {color:pagination};
  475.     text-decoration:none;
  476.     -webkit-transition:all 0.8s ease-out;
  477.     -moz-transition:all 0.8s ease-out;
  478.     transition:all 0.8s ease-out;
  479. }
  480.  
  481. #pagination a:hover {
  482.     color: {color:accented text};
  483.     background-color: {color:accent};
  484.     -webkit-transition:all 0.8s ease-out;
  485.     -moz-transition:all 0.8s ease-out;
  486.     transition:all 0.8s ease-out;
  487. }
  488.  
  489. /*----------POSIS CONTAINER----------*/
  490.  
  491. .cage {
  492.     width: 100%;
  493.     height: 100%;
  494. }
  495.  
  496. .wrap {
  497.     position: relative;
  498.     width: calc({select:post size}px + 470px);
  499.     margin: auto 420px;
  500.     {block:PermalinkPage}
  501.     width: calc(540px + 470px);
  502.     {/block:PermalinkPage}
  503. }
  504.  
  505. #content {
  506.     margin: 60px 0 10px 300px;
  507.     padding-top: 35px;
  508.     width: {select:Post Size}px;
  509.     {block:PermalinkPage}
  510.     width: 540px;
  511.     margin-top: 71px;
  512.     margin-right: 45px;
  513.     {/block:PermalinkPage}
  514. }
  515.  
  516. .posts {
  517.     position: relative;
  518.     width: {select:post size}px;
  519.     background-color: {color:posts};
  520.     {block:IndexPage}
  521.     margin-bottom: {text:margin bottom}px;
  522.     {/block:IndexPage}
  523.     {block:PermalinkPage}
  524.     margin-bottom: 50px;
  525.     width: 540px;
  526.     {/block:PermalinkPage}
  527. }
  528.  
  529. .posts ul li {
  530.     list-style: none;
  531.     margin-left: -25px;
  532.     padding-left: 10;
  533. }
  534.  
  535. .posts ul li:before {
  536.     content: "―";
  537.     padding-right: 5px;
  538.     color: {color:accent};
  539. }
  540.  
  541. .posts ol {
  542.     list-style-type: upper-roman;
  543.     text-transform: justify;
  544.     margin-left: -10px;
  545. }
  546.  
  547. .posts iframe {
  548.     max-width:100%;
  549.     display: block;
  550.     padding: 0;
  551.     margin: 0
  552. }
  553.  
  554. .posts img {
  555.     max-width: 100%;
  556.     display: block;
  557.     border: 0;
  558. }
  559.  
  560. .tumblr_video_container {
  561.     width: auto !important;
  562.     height: auto !important;
  563. }
  564.  
  565. .posts .photo img {
  566.     {block:ifFadedImages}
  567.     {block:IndexPage}
  568.     opacity: 0.6;
  569.     -moz-transition: all 0.8s ease-in;
  570.     -o-transition: all 0.8s ease-in;
  571.     -webkit-transition: all 0.8s ease-in;
  572.     transition: all 0.8s ease-in;
  573. }
  574.  
  575. .posts:hover .photo img {
  576.     opacity: 1.0;
  577.     -moz-transition: all 0.8s ease-in;
  578.     -o-transition: all 0.8s ease-in;
  579.     -webkit-transition: all 0.8s ease-in;
  580.     transition: all 0.8s ease-in;
  581.     {/block:IndexPage}
  582.     {/block:ifFadedImages}
  583. }
  584.  
  585. {block:ifGrayscaleImages}
  586. {block:IndexPage}
  587. .posts .photo img {
  588.     z-index: -9999999999999999999999999px;
  589.     -webkit-filter: grayscale(100%);
  590.     filter: grayscale(100%);
  591.     filter: gray;
  592.     /* IE 6-9 */
  593.     -moz-transition: all 0.8s ease-in;
  594.     -o-transition: all 0.8s ease-in;
  595.     -webkit-transition: all 0.8s ease-in;
  596.     transition: all 0.8s ease-in;
  597. }
  598.  
  599. .posts:hover .photo img {
  600.     -webkit-filter: none;
  601.     filter: none;
  602.     -moz-transition: all 0.8s ease-in;
  603.     -o-transition: all 0.8s ease-in;
  604.     -webkit-transition: all 0.8s ease-in;
  605.     transition: all 0.8s ease-in;
  606. }
  607. {/block:IndexPage}
  608. {/block:ifGrayscaleImages}
  609.  
  610. /*----------TEXT/CAPTION CONTAINER----------*/
  611.  
  612. .photo, .video, .photo-slideshow {
  613.     padding: {select:Post Padding}px;
  614. }
  615.  
  616. .caption {
  617.     text-align: {select:text align};
  618. }
  619.  
  620. .caption figcaption {
  621.     padding: 15px;
  622. }
  623.  
  624. figcaption p {
  625.     margin: 5px 0 0;
  626. }
  627.  
  628. .caption img {
  629.     max-width: 100%;
  630.     height: auto;
  631. }
  632.  
  633. .reblog-list {
  634.     padding: 0 10px;
  635. }
  636.  
  637. .reblog-header {
  638.     padding: 20px 15px 0 15px;
  639. }
  640.  
  641. .reblog-header img {
  642.     width: 25px;
  643.     height: 25px;
  644.     display: inline-block;
  645.     vertical-align: middle;
  646.     margin-right: 10px;
  647. }
  648.  
  649. .inactive, .user, .deactivated {
  650.     font-weight: 700;
  651.     color: {color:links};
  652.     text-align: center;
  653. }
  654.  
  655. .user:hover {
  656.     color: {color:link hover};
  657. }
  658.  
  659. .reblog-content {
  660.     padding: 5px 15px;
  661. }
  662.  
  663. .read_more {
  664.     position: relative;
  665.     width: 100%;
  666.     -webkit-transition: all 0.9s ease;
  667.     -moz-transition: all 0.9s ease;
  668.     -o-transition: all 0.9s ease;
  669.     transition: all 0.9s ease;
  670.     position: relative;
  671.     left: calc(50% - 40px);
  672.     color: {color:links};
  673.     padding-bottom: 3px;
  674.     border-bottom: 2px solid {color:accent};
  675. }
  676.  
  677. .read_more:hover {
  678.     color: {color:link hover};
  679.     border-bottom: 2px solid transparent;
  680.     -webkit-transition: all 0.9s ease;
  681.     -moz-transition: all 0.9s ease;
  682.     -o-transition: all 0.9s ease;
  683.     transition: all 0.9s ease;
  684. }
  685.  
  686. /*----------POST INFO & PERMALINKS----------*/
  687.  
  688. .time {
  689.    color: {color:permalink};
  690.     background-color: {color:accent};
  691.     display: flex;
  692.     flex-direction: row;
  693.     padding: 0 10px;
  694. }
  695.  
  696. .time:before {
  697.   content: "";
  698.   position:absolute;
  699.   margin-top: -40px;
  700.   right:0;
  701.   height:40px;
  702.   width: 40px;
  703.   border-bottom-right-radius: 50%;
  704.   box-shadow: 0 20px 0 0 {color:accent};
  705. }
  706.  
  707. .time:after {
  708.   content: "";
  709.   position:absolute;
  710.   margin-top: -40px;
  711.   left:0;
  712.   height:40px;
  713.   width: 40px;
  714.   border-bottom-left-radius: 50%;
  715.   box-shadow: 0 20px 0 0 {color:accent};
  716. }
  717.  
  718. .time a {
  719.     color: {color:permalink};
  720.     text-transform: lowercase;
  721.     font-weight: 600;
  722.    
  723. }
  724.  
  725. .time a:hover {
  726.     color: {color:permalink hover};
  727. }
  728.  
  729. .timestamp , .likereblog, .note-count {
  730.     text-align: center;
  731.     padding: 5px;
  732.     width: 30%;
  733. }
  734.  
  735. /*----------LIKE/REBLOG----------*/
  736.  
  737. .likereblog {
  738.     text-align: center;
  739.     padding-top: 5px;
  740. }
  741.  
  742. .controls a {
  743.     position:relative;
  744.     display:inline-block;
  745.     margin: 0 3px;
  746. }
  747.  
  748. .controls a:hover {
  749.     color: {color:permalink hover};
  750. }
  751.  
  752. .ti-reload {
  753.     font-size: 13px;
  754.     color: {color:permalink};
  755.     -moz-transition-duration: 0.5s;
  756.     -o-transition-duration: 0.5s;
  757.     -webkit-transition-duration: 0.5s;
  758.     transition-duration: 0.5s;
  759. }
  760.  
  761. .ti-reload:hover {
  762.     color: {color:permalink hover};
  763.     -moz-transition-duration: 0.5s;
  764.     -o-transition-duration: 0.5s;
  765.     -webkit-transition-duration: 0.5s;
  766.     transition-duration: 0.5s;
  767. }
  768.  
  769. .ti-heart {
  770.     color: {color:permalink};
  771.     font-size: 13px;
  772.     -moz-transition-duration: 0.5s;
  773.     -o-transition-duration: 0.5s;
  774.     -webkit-transition-duration: 0.5s;
  775.     transition-duration: 0.5s;
  776. }
  777.  
  778. .ti-heart:hover {
  779.     color: {color:permalink};
  780. }
  781.  
  782. .controls .like .liked + .ti-heart {
  783.    opacity: 1;
  784. }
  785.  
  786. .controls .like .liked + .ti-heart {
  787.      color: #E5DBC0;
  788. }
  789.  
  790. .controls .like .like_button iframe {
  791.    position:absolute;
  792.    top: -1px;
  793.    left:0;
  794.    bottom:0;
  795.    right:0;
  796.    width:100%;
  797.    height:100%;
  798.    z-index:2;
  799.    opacity:0.000001;
  800. }
  801.  
  802. /*--------POST TAGS--------*/
  803.  
  804. .post_tags {
  805.     position: absolute;
  806.     width: {select:post size}px;
  807.     padding: 10px 0 0;
  808.     white-space: nowrap;
  809.     overflow: hidden;
  810.     margin-top: 0px;
  811.     opacity: 1;
  812.     {block:ifhovertags}
  813.     opacity: 0;
  814.     -webkit-transition: all 0.6s ease-in-out;
  815.     -moz-transition: all 0.6s ease-in-out;
  816.     -o-transition: all 0.6s ease-in-out;
  817.     transition: all 0.6s ease-in-out;
  818. }
  819.  
  820. .posts:hover .post_tags {
  821.     opacity: 1.0;
  822.     -webkit-transition: all 0.6s ease-in-out;
  823.     -moz-transition: all 0.6s ease-in-out;
  824.     -o-transition: all 0.6s ease-in-out;
  825.     transition: all 0.6s ease-in-out;
  826.     {/block:ifhovertags}
  827. }
  828.  
  829. .post_tags.draggable .post_tags_inner {
  830.     cursor: col-resize;
  831.     -webkit-touch-callout: none;
  832.     -webkit-user-select: none;
  833.     -khtml-user-select: none;
  834.     -moz-user-select: none;
  835.     -ms-user-select: none;
  836.     user-select: none;
  837. }
  838.  
  839. .post_tags_inner {
  840.     float: left;
  841.     position: relative;
  842.     padding: 0px 20px 0px 0;
  843. }
  844.  
  845. .post_tags a,
  846. .post_tags .post_tag {
  847.     display: inline-block;
  848.     margin-left: 3px;
  849.     color: {color:links};
  850.     font-size: 10px;
  851. }
  852.  
  853. .post_tags:after {
  854.     content: '';
  855.     position: absolute;
  856.     top: 0;
  857.     right: 0;
  858.     bottom: 0;
  859.     width: 50px;
  860. }
  861.  
  862. .post_tags a:hover,
  863. .post_tags .post_tag:hover,
  864. .post_tags a:focus,
  865. .post_tags .post_tag:focus,
  866. .post_tags a:active,
  867. .post_tags .post_tag:active {color:{color:permalink hover};}
  868.  
  869. /*----------PERMALINK PAGE----------*/
  870.  
  871. #perma {
  872.     width: 540px;
  873.     padding: 10px 5px;
  874.     margin: 0 auto;
  875.     background-color: {color:posts};
  876.     text-align: center;
  877.     text-transform: lowercase;
  878.     box-sizing: border-box;
  879. }
  880.  
  881. #perma span {
  882.     font-family: 'Merriweather', serif;
  883.     font-size: 1.3em;
  884. }
  885.  
  886. #permatg {
  887.     width: 540px;
  888.     padding: 10px;
  889.     margin: 10px auto 10px;
  890.     background-color: {color:posts};
  891.     text-align: center;
  892.     text-transform: lowercase;
  893.     box-sizing: border-box;
  894. }
  895.  
  896. #permatg a {
  897.     display: inline-block;
  898.     margin: 0 5px;
  899.     color: {color:links};
  900. }
  901.  
  902. #permatg a:hover {
  903.     color: {color:link hover};
  904. }
  905.  
  906. .rb {
  907.     position: absolute;
  908.     left: calc(50% + 55px);
  909.     margin-top: 25px;
  910.     display: inline-block;
  911.     z-index: 10;
  912. }
  913.  
  914. .root img, .via img {
  915.     border-radius: 100%;
  916.     padding: 3px;
  917.     margin-right: 2px;
  918.     background-color: {color:accent};
  919. }
  920.  
  921. #notecontainer {
  922.     margin: 10px auto;
  923.     width: 540px;
  924.     background-color: {color:posts};
  925.     color: {color:text};
  926.     position: relative;
  927. }
  928.  
  929. #notecontainer ol.notes {
  930.     list-style-type: none;
  931.     margin: 0;
  932.     padding: 0;
  933.     font-size: {text:body font}px;
  934. }
  935.  
  936. #notecontainer ol.notes li.note {
  937.     padding: 15px;
  938. }
  939.  
  940. #notecontainer img.avatar {
  941.     margin-right: 10px;
  942.     vertical-align: middle;
  943.     width: 20px;
  944.     height: 20px;
  945.     border-radius: 10px;
  946. }
  947.  
  948. /*----------TUMBLR TEXT/LINKS----------*/  
  949.  
  950. .posts .title, .posts .link {
  951.     color: {color:post title};
  952.     background-color: {color:Post Title Background};
  953.     font-family: 'Playfair Display', serif;
  954.     font-size: 1.6em;
  955.     font-weight: 700;
  956.     padding: 10px;
  957.     line-height: 200%;
  958.     text-align: center;
  959. }
  960.  
  961. .posts .link a {
  962.     color: {color:post title};
  963.     -webkit-transition: 0.8s ease;
  964.     -moz-transition: 0.8s ease;
  965.     -o-transition: 0.8s ease;
  966.     transition: 0.8s ease;
  967. }
  968.  
  969. .posts .link a:hover {
  970.     box-shadow: inset 0px -3px 0px 0px {color:post title};
  971.     -webkit-transition: 0.8s ease;
  972.     -moz-transition: 0.8s ease;
  973.     -o-transition: 0.8s ease;
  974.     transition: 0.8s ease;
  975. }
  976.  
  977. /*----------TUMBLR QUOTES----------*/  
  978.  
  979. .qt {
  980.     padding: 20px;
  981.     display: flex;
  982.     flex-direction: column;
  983.     justify-content: center;
  984. }
  985.  
  986. .quote {
  987.     font-family: 'Merriweather', serif;
  988.     line-height: 25px;
  989.     font-size: 1.5em;
  990.     font-style: italic;
  991.     text-align: center;
  992.     padding: 20px;
  993.     background-color: {color:question background};
  994.     color: {color:question};
  995. }
  996.  
  997. .ti-quote-right {
  998.     background-color: {color:question background};
  999.     color: {color:question};
  1000.     padding: 5px;
  1001.     border-radius: 100%;
  1002.     font-size: 1.0em;
  1003.     position: absolute;
  1004. }
  1005.  
  1006. .quote-box {
  1007.     font-size: 20px;
  1008.     margin-bottom: 15px;
  1009.     color: {color:text};
  1010. }
  1011.  
  1012. /*----------TUMBLR AUDIO----------*/
  1013.  
  1014. .audiowrapper {
  1015.     display: flex;
  1016.     flex-direction: row;
  1017.     width: 100%;
  1018.     box-sizing: border-box;
  1019.     padding: 20px;
  1020. }
  1021.  
  1022. iframe.tumblr_audio_player {
  1023.   height: 85px;
  1024. }
  1025.  
  1026. /*----------TUMBLR QUESTION/ANSWER----------*/
  1027.  
  1028. #askcont, #replycont {
  1029.     padding: 15px;
  1030.     display: flex;
  1031.     flex-direction: column;
  1032. }
  1033.  
  1034. #askcont img {
  1035.     float:left;
  1036.     display: inline-block;
  1037.     vertical-align: middle;
  1038.     margin-right: 20px;
  1039.     width: 40px;
  1040.     height: 40px;
  1041.     border-radius: 100%;
  1042. }
  1043.  
  1044.  
  1045. #asker {
  1046.     text-transform: lowercase;
  1047.     color: {color:links};
  1048.     margin-bottom: 20px;
  1049.     display: flex;
  1050. }
  1051.  
  1052. #asking, #replying {
  1053.     align-self: center;
  1054.     line-height: 15px;
  1055. }
  1056.  
  1057. #replier {
  1058.     text-transform: lowercase;
  1059.     color: {color:links};
  1060.     margin-bottom: 20px;
  1061.     display: flex;
  1062.     justify-content: flex-end;
  1063. }
  1064.  
  1065. #replying {
  1066.     text-align: right;
  1067. }
  1068.  
  1069. #asker a, #replier a {
  1070.     color: {color:accent};
  1071.     font-weight: 700;
  1072.     text-align: capitalize;
  1073.     font-size: 1.1em;
  1074. }
  1075.  
  1076. #asker a:hover, #replier a:hover {
  1077.     color: {color:links};
  1078. }
  1079.  
  1080. #replycont img {
  1081.     float: right;
  1082.     display: inline-block;
  1083.     vertical-align: middle;
  1084.     margin-left: 20px;
  1085.     width: 40px;
  1086.     height: 40px;
  1087.     border-radius: 100%;
  1088. }
  1089.  
  1090. .question {
  1091.     display: block;
  1092.     text-align: justify;
  1093.     padding: 10px 15px;
  1094.     background-color: {color:question background};
  1095.     color: {color:question};
  1096. }
  1097.  
  1098. .answer {
  1099.     padding: 0 15px;
  1100.     background-color: {color:question background};
  1101.     color: {color:question};
  1102. }
  1103.  
  1104.  
  1105. /*----------TUMBLR CHAT----------*/
  1106.  
  1107. .chatp {
  1108.     padding: 20px;
  1109. }
  1110.  
  1111. .chat .line {
  1112.     margin-top: 0px;
  1113.     padding: 20px;
  1114.     border-bottom: 1px solid {color:post borders};
  1115. }
  1116.  
  1117. .chat .line:last-of-type {
  1118.     margin-bottom: 0px;
  1119. }
  1120.  
  1121. .chat .label {
  1122.     text-transform: capitalize;
  1123. }
  1124.  
  1125. .line:nth-child(odd) .label b {
  1126.     color: {color:links};
  1127.     font-weight: 700;
  1128.     margin-right: 5px;
  1129.     font-size: 1.1em;
  1130. }
  1131.  
  1132. .line:nth-child(even) .label b {
  1133.     color: {color:bold};
  1134.     font-weight: 700;
  1135.     margin-right: 5px;
  1136.     font-size: 1.1em;
  1137. }
  1138.  
  1139.  
  1140. /*----------CLICK FOR MORE BUTTON----------*/
  1141.  
  1142. #link-bar {
  1143.     background: {color:accent};
  1144.     width: 30px;
  1145.     height: 100%;
  1146.     position: fixed;
  1147.     right: 0;
  1148.     top: 0;
  1149.     padding: 10px;
  1150. }
  1151.  
  1152. .info-button {
  1153.     width: 30px;
  1154.     height: 30px;
  1155.     box-sizing: border-box;
  1156.     cursor: pointer;
  1157.     border: none;
  1158.     outline: none;
  1159.     background-color: {color:accent};
  1160. }
  1161.  
  1162. .info-button span {
  1163.     display: block;
  1164.     width: 18px;
  1165.     height: 3px;
  1166.     background-color: {color:accented text};
  1167.     position: absolute;
  1168.     top: 24px;
  1169.     transition: .5s;
  1170. }
  1171.  
  1172. .info-button span:before {
  1173.     content: '';
  1174.     position: absolute;
  1175.     top: -5px;
  1176.     left: 0;
  1177.     width: 100%;
  1178.     height: 3px;
  1179.     background-color: {color:accented text};
  1180.     transition: .5s;
  1181. }
  1182.  
  1183. .info-button span:after {
  1184.     content: '';
  1185.     position: absolute;
  1186.     top: 5px;
  1187.     left: 0;
  1188.     width: 100%;
  1189.     height: 3px;
  1190.     background-color: {color:accented text};
  1191.     transition: .5s;
  1192. }
  1193.  
  1194. .info-button.toggle span {
  1195.     background-color: transparent;
  1196. }
  1197.  
  1198. .info-button.toggle span:before {
  1199.     top: 0;
  1200.     transform: rotate(45deg);
  1201. }
  1202.  
  1203. .info-button.toggle span:after {
  1204.     top: 0;
  1205.     transform: rotate(-45deg);
  1206. }
  1207.  
  1208. /*----------SIDEBAR----------*/
  1209.  
  1210. #sidebar {
  1211.     width: 400px;
  1212.     height: 100%;
  1213.     position: fixed;
  1214.     left: 75px;
  1215.     top: 0;
  1216.     background-color: {color:posts};
  1217. }
  1218.  
  1219. #sidebar-cont {
  1220.     padding: 20px;
  1221.     display: flex;
  1222.     flex-direction: column;
  1223.     align-items: center;
  1224.     overflow: hidden;
  1225. }
  1226.  
  1227. /*----------INFO PANEL----------*/
  1228.  
  1229. .side-panel {
  1230.     width: 400px;
  1231.     height: 100%;
  1232.     background-color: rgba({RGBcolor:accent}, 0.85);
  1233.     position: fixed;
  1234.     padding: 20px;
  1235.     box-sizing: border-box;
  1236.     transition: .9s;
  1237.     left: -400px;
  1238. }
  1239.  
  1240. .active {
  1241.     left: 75px;
  1242.     transition: 1.2s;
  1243. }
  1244.  
  1245. .panel-title {
  1246.     background-color: {color:panel title background};
  1247.     color: {color:panel title};
  1248.     font-weight: 700;
  1249.     margin-bottom: 15px;
  1250. }
  1251.  
  1252. .ti-pencil-alt2 {
  1253.     background-color: {color:panel icon background};
  1254.     color: {color:panel icon};
  1255.     display: inline-block;
  1256.     padding: 10px;
  1257.     margin-right: 10px;
  1258.     font-size: 15px;
  1259. }
  1260.  
  1261. .panel-demo {
  1262.     width: 400px;
  1263.     display: block;
  1264.     color: {color:accented text};
  1265. }
  1266.  
  1267. .panel-demo b {
  1268.     background-color: {color:panel icon background};
  1269.     color: {color:panel icon};
  1270.     padding: 5px;
  1271.     margin-right: 5px;
  1272. }
  1273.  
  1274. .panel-demo, .panel-updates {
  1275.     color: {color:accented text};
  1276. }
  1277.  
  1278. .panel-demo b, .panel-updates b {
  1279.     background-color: {color:panel icon background};
  1280.     color: {color:panel icon};
  1281.     padding: 5px;
  1282.     margin-right: 5px;
  1283. }
  1284.  
  1285. .skills-cont {
  1286.     position: relative;
  1287.     width: 100%;
  1288.     margin: 5px 0;
  1289. }
  1290.  
  1291. .progress {
  1292.     width: 100%;
  1293.     height: 15px;
  1294.     margin: 10px 0;
  1295.     border-radius: 10px;
  1296.     border: 2px solid {color:accented text};
  1297.     text-align: center;
  1298.     line-height: 17px;
  1299.     overflow: hidden;
  1300. }
  1301.  
  1302. .skills-cont b {
  1303.     background-color: {color:panel icon background};
  1304.     color: {color:panel icon};
  1305.     padding: 5px;
  1306. }
  1307.  
  1308. .progress .percent {
  1309.     text-align: right;
  1310.     padding-right: 10px;
  1311.     background-color: {color:panel icon background};
  1312.     border-radius: 10px;
  1313.     color: {color:panel icon};
  1314. }
  1315.  
  1316. /*----------MAIN SIDEBAR----------*/
  1317.  
  1318. #sidebar-img img {
  1319.     width: 100px;
  1320.     height: 100px;
  1321.     border-radius: 100%;
  1322.     overflow: hidden;
  1323.     margin-top: 50px;
  1324. }
  1325.  
  1326. #blog-title {
  1327.     font-family: 'Playfair Display', serif;
  1328.     color: {color:links};
  1329.     font-size: 2.0em;
  1330.     margin-top: 30px;
  1331. }
  1332.  
  1333. #description {
  1334.     text-align: {select:desc text align};
  1335.     padding: 0;
  1336.     margin-top: 30px;
  1337. }
  1338.  
  1339. /*----------TUMBLR LINKS----------*/
  1340.  
  1341. .homelinks {
  1342.     width: 75px;
  1343.     height: 100%;
  1344.     position: fixed;
  1345.     z-index: 9;
  1346.     left: 0;
  1347.     top: 0;
  1348.     display: flex;
  1349.     flex-direction: column;
  1350.     background-color: {color:posts};
  1351. }
  1352.  
  1353. .homelinks a {
  1354.     background-color: {color:accent};
  1355.     color: {color:accented text};
  1356.     width: 65px;
  1357.     height: 25%;
  1358.     margin-bottom: 5px;
  1359.     padding: 10px 5px;
  1360.     display: flex;
  1361.     justify-content: center;
  1362.     align-items: center;
  1363. }
  1364.  
  1365. .ti-home,.ti-email,.ti-package,.ti-archive {
  1366.     font-size: 16px;
  1367. }
  1368.  
  1369. .homelinks a:last-of-type {
  1370.     margin-bottom: 0;
  1371. }
  1372.  
  1373. .homelinks a:hover {
  1374.     background-color: transparent;
  1375.     color: {color:links};
  1376. }
  1377.  
  1378. /*----------NAVIGATION LINKS----------*/
  1379.  
  1380. .morelinks {
  1381.     margin-top: 40px;
  1382.     align-self: flex-start;
  1383.     width: 100%;
  1384. }
  1385.  
  1386. .morelinks a {
  1387.     display: block;
  1388.     margin: 20px 0;
  1389.     background-color: {color:navigation background};
  1390.     color: {color:navigation};
  1391.     padding: 5px 10px;
  1392. }
  1393.  
  1394. .morelinks span {
  1395.     float: right;
  1396.     line-height: 25px;
  1397. }
  1398.  
  1399. .morelinks a:hover {
  1400.     background-color: transparent;
  1401. }
  1402.  
  1403. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  1404.  
  1405. #bottom {
  1406.     bottom: 15px;
  1407.     position: fixed;
  1408.     right: 115px;
  1409.     {block:ifnotinfopanel}
  1410.     right: 25px;
  1411.     {/block:ifnotinfopanel}
  1412.     z-index: 99;
  1413. }
  1414.  
  1415. #bottom a:hover {
  1416.     color: {color:permalink hover};
  1417. }
  1418.  
  1419. .cred {
  1420.     padding: 5px;
  1421.     width: 12px;
  1422.     height: 12px;
  1423.     font-size: 15px;
  1424.     line-height: 12px;
  1425.     display: inline-block;
  1426.     background-color: {color:accent};
  1427.     color: {color:permalink};
  1428. }
  1429.  
  1430. .ti-angle-double-up {
  1431.     padding: 5px;
  1432.     width: 12px;
  1433.     height: 12px;
  1434.     font-size: 12px;
  1435.     line-height: 12px;
  1436.     display: block;
  1437.     background-color: {color:accent};
  1438.     color: {color:permalink};
  1439. }
  1440.  
  1441. /*----------SCROLL TO TOP---------*/
  1442.  
  1443. #scrollToTop:link,
  1444. #scrollToTop:visited {
  1445.     display: none;
  1446.     position: fixed;
  1447.     font-size: 12px;
  1448.     bottom: 16px;
  1449.     right: 83px;
  1450.     {block:ifnotinfopanel}
  1451.     right: 47px;
  1452.     {/block:ifnotinfopanel}
  1453.     color: {color:accented text};
  1454.     padding: 0px 5px;
  1455.     width: auto;
  1456.     z-index: 900;
  1457.     font-weight: 700;
  1458. }
  1459.  
  1460. {CustomCSS}
  1461. </style>
  1462.  
  1463. <!-----------Scroll To Top Script----------->
  1464. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1465. <!-----------Scroll To Top Script----------->
  1466.  
  1467. {block:ifinfopanel}
  1468. <script type="text/javascript">
  1469. //SIDE PANEL SCRIPT
  1470.     $(document).ready(function(){
  1471.         $('.info-button').click(function(){
  1472.             $('.side-panel').toggleClass('active');
  1473.             $('.info-button').toggleClass('toggle');
  1474.         })
  1475.     });
  1476. </script>
  1477. {/block:ifinfopanel}
  1478.  
  1479. </head>
  1480.  
  1481. <body>
  1482.  
  1483. <footer id="bottom">
  1484. <!-----------SCROLL TO TOP ----------->
  1485. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><span class="ti-angle-double-up"></span></a>
  1486. <!-----------SCROLL TO TOP ----------->
  1487. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1488.  <a href="https://sheathemes.tumblr.com" class="cred" title="theme by sheathemes">&#169;</a>  
  1489. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1490. </footer>
  1491.  
  1492. <div class="cage"> <!-----------BLOG CONTAINER----------->
  1493.  
  1494. {block:ifinfopanel}
  1495. <div id="link-bar"> <!-----------RIGHT BAR----------->
  1496.     <button class="info-button">
  1497.     <a href="javascript:;" title="click for more">
  1498.         <span></span>
  1499.     </a>
  1500.     </button>
  1501. </div> <!-----------RIGHT BAR----------->
  1502. {/block:ifinfopanel}
  1503.  
  1504. <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  1505.     <a href="/">home</a>
  1506.     <a href="/ask">inbox</a>
  1507.     <a href="/submit">submit</a>
  1508.     <a href="/archive">archive</a>
  1509. </nav> <!-----------TUMBLR LINKS----------->
  1510.  
  1511. <aside id="sidebar"> <!-----------SIDEBAR CONTAINER----------->
  1512.  
  1513. {block:ifinfopanel}
  1514. <aside class="side-panel"> <!-----------SIDEBAR PANEL----------->
  1515.     <div class="panel-title"><span class="ti-pencil-alt2"></span>About me</div>
  1516.     <div class="panel-demo">
  1517.         <b>Name </b> name here
  1518.         <br><br>
  1519.         <b>Age </b> age here
  1520.         <br><br>
  1521.         <b>Pronouns </b> pronouns here
  1522.         <br><br>
  1523.         <b>Location </b> location here
  1524.         <br><br>
  1525.         <b>Blog status </b> blog status here
  1526.         <br><br>
  1527.     </div>
  1528.    
  1529.     <div class="panel-title"><span class="ti-pencil-alt2"></span>Updates</div>
  1530.      <div class="panel-updates">
  1531.          <b>00.00.0000</b>
  1532.          Fusce tellus felis, varius et urna et, pulvinar euismod dui. Proin est dui, tincidunt vel luctus non, efficitur id tortor.
  1533.          <br><br>
  1534.          <b>00.00.0000</b>
  1535.          Fusce tellus felis, varius et urna et, pulvinar euismod dui. Proin est dui, tincidunt vel luctus non, efficitur id tortor.
  1536.          <br><br>
  1537.          <b>00.00.0000</b>
  1538.          Fusce tellus felis, varius et urna et, pulvinar euismod dui. Proin est dui, tincidunt vel luctus non, efficitur id tortor.
  1539.          <br><br>
  1540.      </div>
  1541.      
  1542.     <div class="panel-title"><span class="ti-pencil-alt2"></span>WIP Progress</div>
  1543.    
  1544.         <div class="skills-cont">
  1545.             <b>WIP title</b> <!-----EDIT THE LABEL OF THE SKILL HERE----->
  1546.             <div class="progress">
  1547.             <!-----EDIT THE PERCENTAGES ONLY.
  1548.            MAKE SURE BOTH NUMBERS MATCH!!!----->
  1549.                 <div class="percent" style="width: 70%">70%</div>
  1550.             </div>
  1551.        
  1552.         </div>
  1553.        
  1554.         <div class="skills-cont">
  1555.             <b>WIP title</b> <!-----EDIT THE LABEL OF THE SKILL HERE----->
  1556.             <div class="progress">
  1557.             <!-----EDIT THE PERCENTAGES ONLY.
  1558.            MAKE SURE BOTH NUMBERS MATCH!!!----->
  1559.                 <div class="percent" style="width: 30%">30%</div>
  1560.             </div>
  1561.         </div>
  1562.        
  1563.         <div class="skills-cont">
  1564.             <b>WIP title</b> <!-----EDIT THE LABEL OF THE SKILL HERE----->
  1565.             <div class="progress">
  1566.             <!-----EDIT THE PERCENTAGES ONLY.
  1567.            MAKE SURE BOTH NUMBERS MATCH!!!----->
  1568.                 <div class="percent" style="width: 65%">65%</div>
  1569.             </div>
  1570.         </div>
  1571.    
  1572. </aside> <!-----------SIDEBAR PANEL----------->
  1573. {/block:ifinfopanel}
  1574.  
  1575. <div id="sidebar-cont"> <!-----------MAIN SIDEBAR----------->
  1576.     <div id="sidebar-img"><img src="{image:sidebar}"></div>
  1577.     <div id="blog-title">{Title}</div>
  1578.     <div id="description">{Description}</div>
  1579.    
  1580.     <nav class="morelinks"> <!-----------NAVIGATION LINKS----------->
  1581.     {block:ifLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink1}
  1582.     {block:ifLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink2}
  1583.     {block:ifLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink3}
  1584.     {block:ifLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink4}
  1585.     {block:ifLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink5}
  1586.     {block:ifLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink6}
  1587.     {block:ifLink7}<a href="{text:CustomLink7URL}">{text:CustomLink7Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink7}
  1588.     {block:ifLink8}<a href="{text:CustomLink8URL}">{text:CustomLink8Name}<span class="ti-layout-grid2"></span></a>{/block:ifLink8}
  1589.     </nav> <!-----------NAVIGATION LINKS----------->
  1590. </div> <!-----------MAIN SIDEBAR----------->
  1591.  
  1592. </aside> <!-----------SIDEBAR CONTAINER----------->
  1593.  
  1594.  
  1595. <div class="wrap"> <!-----------POST CONTAINER----------->
  1596.  
  1597. <section id="content"> <!-----------POST WRAPPER----------->
  1598.  
  1599. {block:Posts}
  1600. <article class="posts"> <!-----------POSTS----------->
  1601.  
  1602. {block:ContentSource}
  1603. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1604. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1605. {/block:SourceLogo}
  1606. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1607. {/block:ContentSource}
  1608.  
  1609. <!-- {block:NoRebloggedFrom}
  1610. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1611. {/block:NoRebloggedFrom} -->
  1612.  
  1613. {block:Text}
  1614. <div class="text">
  1615. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1616. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1617.  
  1618. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1619.  
  1620. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1621.  
  1622. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated} {block:IsActive} <a target="_blank" href="{Permalink}" class="user"> {Username} </a> {/block:IsActive}
  1623.  
  1624. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  1625. </div>
  1626. {/block:Text}
  1627.  
  1628. {block:Photo}
  1629. <div class="photo">
  1630. {LinkOpenTag}
  1631. <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">
  1632. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  1633. </a>
  1634. {LinkCloseTag}
  1635. </div>
  1636. {block:IfShowCaptions}
  1637. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1638.  
  1639. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1640.  
  1641. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1642.  
  1643. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1644.  
  1645. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1646.  
  1647. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1648. {/block:IfShowCaptions}
  1649.  
  1650. {block:IfnotShowCaptions}
  1651. {block:PermalinkPage}
  1652. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1653.  
  1654. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1655.  
  1656. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1657.  
  1658. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1659.  
  1660. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1661.  
  1662. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1663. {/block:PermalinkPage}
  1664. {/block:IfnotShowCaptions}
  1665. {/block:Photo}
  1666.  
  1667. {block:Photoset}
  1668. <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>
  1669. {block:IfShowCaptions}
  1670. {block:Caption}
  1671. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  1672. <div class="reblog-list">
  1673.  
  1674. {block:Reblogs}
  1675. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1676. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1677.  
  1678. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1679.  
  1680. {block:IsActive}
  1681. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1682.  
  1683. {block:IsDeactivated}
  1684. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1685. </div>
  1686. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  1687. {/block:RebloggedFrom} </div>
  1688. {/block:Caption}
  1689. {/block:IfShowCaptions}
  1690.  
  1691. {block:IfnotShowCaptions}
  1692. {block:PermalinkPage}
  1693. {block:Caption}
  1694. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  1695. <div class="reblog-list">
  1696.  
  1697. {block:Reblogs}
  1698. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1699. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1700.  
  1701. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1702.  
  1703. {block:IsActive}
  1704. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1705.  
  1706. {block:IsDeactivated}
  1707. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1708. </div>
  1709. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  1710. {/block:RebloggedFrom} </div>
  1711. {/block:Caption}
  1712. {/block:PermalinkPage}
  1713. {/block:IfnotShowCaptions}
  1714. {/block:Photoset}
  1715.  
  1716. {block:Quote}
  1717. <div class="qt">
  1718. <center>
  1719. <div class="quote-box"><span class="ti-quote-right"></span></div>
  1720. </center>
  1721. <div class="quote">
  1722. {Quote}
  1723. </div>
  1724. {block:Source}<div class="qtsource"><br><center>{Source}</center></div>{/block:Source}
  1725. </div>
  1726. {/block:Quote}
  1727.  
  1728. {block:Link}
  1729. <div class="link"><a href="{URL}">{Name} »</a></div>
  1730. {block:Description}
  1731. <div class="caption">
  1732. <figcaption>{Description}</figcaption>
  1733. </div>
  1734. {/block:Description}
  1735. {/block:Link}
  1736.  
  1737. {block:Audio}
  1738. <div class="audiowrapper">
  1739. {AudioEmbed-640}
  1740. </div>
  1741. {block:IfShowCaptions}
  1742. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1743.  
  1744. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1745.  
  1746. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1747.  
  1748. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1749.  
  1750. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1751.  
  1752. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1753. {/block:IfShowCaptions}
  1754.  
  1755. {block:IfnotShowCaptions}
  1756. {block:PermalinkPage}
  1757. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1758.  
  1759. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1760.  
  1761. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1762.  
  1763. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1764.  
  1765. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1766.  
  1767. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1768. {/block:PermalinkPage}
  1769. {/block:IfnotShowCaptions}
  1770. {/block:Audio}
  1771.  
  1772. {block:Video}
  1773. <div class="video">{Video-500}</div>
  1774. {block:IfShowCaptions}
  1775. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1776.  
  1777. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1778.  
  1779. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1780.  
  1781. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1782.  
  1783. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1784.  
  1785. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1786.  
  1787. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1788. {/block:IfShowCaptions}
  1789.  
  1790. {block:IfnotShowCaptions}
  1791. {block:PermalinkPage}
  1792. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1793.  
  1794. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1795.  
  1796. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1797.  
  1798. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1799.  
  1800. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1801.  
  1802. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1803.  
  1804. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1805. {/block:PermalinkPage}
  1806. {/block:IfnotShowCaptions}
  1807. {/block:Video}
  1808.  
  1809. {block:Chat}
  1810. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1811. <div class="chatp">
  1812. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  1813. {Line}</div>{/block:Lines}</div>
  1814. </div>
  1815. {/block:Chat}
  1816.  
  1817. {block:Answer}
  1818. <div id="askcont">
  1819. <div id="asker">
  1820. <img src="{AskerPortraitURL-128}">
  1821. <div id="asking">
  1822. <div class="asker-link">{Asker}</div>
  1823. <div class="asker-text">asked a question</div>
  1824. </div>
  1825. </div>
  1826. <div class="question">{Question}</div>
  1827. </div>
  1828.  
  1829. {block:Answerer}
  1830. <div id="replycont">
  1831. <div id="replier">
  1832. <div id="replying">
  1833. <div class="replier-link">{Answerer}</div>
  1834. <div class="replier-text">replied to your question</div>
  1835. </div>
  1836. <img src="{AnswererPortraitURL-128}">
  1837. </div>
  1838. <div class="answer">{Answer}</div>
  1839. </div>
  1840. {/block:Answerer}
  1841.  
  1842. {block:NotReblog}  <div class="caption"><figcaption> {Answer} </figcaption> </div> {/block:NotReblog}
  1843. {block:RebloggedFrom} <div class="reblog-list">
  1844. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1845.  
  1846. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1847.  
  1848. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1849.  
  1850. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1851.  
  1852. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div>
  1853.  
  1854. <div class="reblog-content">{Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom}
  1855. {/block:Answer}
  1856.  
  1857. {block:IndexPage} <!-----------POST INFO/PERMALINKS----------->
  1858. {block:Date}
  1859. <div class="time">
  1860. <a class="timestamp" href="{Permalink}" title="{DayOfMonth}.{MonthNumber}.{ShortYear}" >{Timestamp}</a>
  1861. {/block:Date}
  1862.  
  1863. <div class="likereblog">
  1864. <div class="controls">
  1865. <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><span class="ti-reload"></span></a>
  1866. <a title="like this post" class="like">{LikeButton size="15"}
  1867. <span class="ti-heart"></span></a>
  1868. </div>
  1869. </div>
  1870. <div class="note-count"><a href="{Permalink}">{NoteCountWithLabel}</a></div>
  1871. </div> <!-----------POST INFO/PERMALINKS----------->
  1872.  
  1873. <!-----------POST TAGS----------->
  1874. {block:ifShowTags}
  1875.  {block:HasTags}
  1876. <div class="post_tags draggable">
  1877. <div class="post_tags_inner">{block:Tags}
  1878. <a href="{TagURL}"><span class="ti-tag" style="margin-right: 3px; color:{color:accent}; font-size:15px; display:inline-block; vertical-align:middle;"></span>{Tag}</a>{/block:Tags}</div></div>
  1879. {/block:HasTags}
  1880. {/block:ifShowTags}
  1881. <!-----------POST TAGS----------->
  1882. {/block:IndexPage}
  1883.  
  1884. </article> <!-----------POSTS----------->
  1885.  
  1886. <!-----------PERMALINK PAGE----------->
  1887. {block:PermalinkPage}
  1888. {block:Date}
  1889. <div id="perma">
  1890. <span>
  1891. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}
  1892. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  1893. </span>
  1894.  
  1895. {block:RebloggedFrom}
  1896. <div class="rb">
  1897. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>
  1898. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>
  1899. </div>
  1900. {/block:RebloggedFrom}
  1901.  
  1902. </div>
  1903.  
  1904. {block:HasTags}
  1905. <div id="permatg">
  1906. {block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  1907. </div>
  1908. {/block:HasTags}
  1909.  
  1910. {block:PostNotes}
  1911. <div id="notecontainer">{PostNotes}</div>
  1912. {/block:PostNotes}
  1913. {/block:Date}
  1914. {/block:PermalinkPage}
  1915. <!-----------PERMALINK PAGE----------->
  1916. {/block:Posts}
  1917.  
  1918. <footer id="pagination"> <!-----------PAGINATION----------->
  1919. {block:Pagination}
  1920. {block:PreviousPage}
  1921. <a href="{PreviousPage}"><span class="ti-angle-left"></span></a>
  1922. {/block:PreviousPage}
  1923. {block:JumpPagination length="5"}
  1924. {block:CurrentPage}
  1925. <a href="#" style="color:{color:pagination}; background-color:{color:accent};color:{color:accented text}"><span class="current_page">{CurrentPage}</a></span></a>
  1926. {/block:CurrentPage}
  1927. {block:JumpPage}
  1928. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1929. {/block:JumpPage}
  1930. {/block:JumpPagination}
  1931. {block:NextPage}
  1932. <a href="{NextPage}"><span class="ti-angle-right"></span></a>
  1933. {/block:NextPage}
  1934. {/block:Pagination}
  1935. </footer> <!-----------PAGINATION----------->
  1936. </section><!------------------POSTS WRAPPER----------------------->
  1937.  
  1938. </div>  <!--------- POSTS CONTAINER ----------->
  1939. </div> <!--------- BLOG CONTAINER ----------->
  1940.  
  1941. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  1942.  
  1943. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1944.  
  1945. <!-----------Pixel Union photosets script----------->
  1946. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1947. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1948. <!-----------Pixel Union photosets script----------->
  1949.  
  1950. <!-----------Video resizing script shythemes @ tumblr----------->
  1951. <script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1952. <!-----------Video resizing script shythemes @ tumblr----------->
  1953.  
  1954. <!---------- inline images resizing script ---------->
  1955. <script src="//dl.dropbox.com/s/1mztc6y7i6ry9ri/gtresizing.js"> </script>
  1956. <!---------- inline images resizing script ---------->
  1957.  
  1958. <!-----------Time ago script by bychloethemes @ tumblr----------->
  1959. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1960. <!-----------Time ago script by bychloethemes @ tumblr----------->
  1961.  
  1962. <!-----------Tooltips Script----------->
  1963. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1964. <!-----------Tooltips Script----------->
  1965.  
  1966. <!-----------NPF photosets script by annasthms @ tumblr----------->
  1967. <script src="https://static.tumblr.com/0podkko/qWqq8va08/photosets.js"></script>
  1968. <!-----------NPF photosets script by annasthms @ tumblr----------->
  1969.  
  1970. <script>
  1971. $(document).ready(function(){
  1972.     //NPF photosets script by annasthms
  1973.     undoPhotoset({
  1974.         'posts': '.text',
  1975.         'text class': 'caption',
  1976.         'photoset class': 'photoset'
  1977.     },true);
  1978.     //pxu photosets by @ shythemes & bychloethemes
  1979.    $('.photo-slideshow').pxuPhotoset({
  1980.        lightbox: true,
  1981.        rounded: false,
  1982.        gutter: '{select:photoset gutter}px',
  1983.        photoset: '.photo-slideshow',
  1984.        photoWrap: '.photo-data',
  1985.        photo: '.pxu-photo'
  1986.    });
  1987.      // timeago plugin by @ bychloethemes
  1988.     $('.timestamp').timeAgo({
  1989.         time: "word",
  1990.         spaces: true,
  1991.         words: false,
  1992.         suffix: "ago",  
  1993.         });
  1994.     (function($){ $(document).ready(function(){
  1995.             $("a[title]").style_my_tooltips({
  1996.             tip_follows_cursor:true,
  1997.             tip_delay_time:10,
  1998.             tip_fade_speed:200,
  1999.             attribute:"title"});
  2000.             });
  2001.         })(jQuery);
  2002.       // audio player fix by @ shudesigns
  2003.     var $audio = $('iframe.tumblr_audio_player');
  2004.         $audio.load(function() {
  2005.         $(this).contents().find('head').append('<style type="text/css">' +
  2006.       '.audio-player { background: {color:posts}; color: {color:links} !important; }' +
  2007.       '.audio-player .audio-info .track-artist { color: {color:links} !important; }' +
  2008.     '</style>');
  2009.   });
  2010. });
  2011. </script>
  2012.  
  2013. <!-----------Draggable Tags Script----------->
  2014. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  2015. <script src="https://static.tumblr.com/pbhn8p5/OSRos9gz8/draggabletags.js"></script>
  2016. <!-----------Draggable Tags Script----------->
  2017.  
  2018. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2019.  
  2020. </body>
  2021. </html> <!---------------------------END--------------------------->
Advertisement
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!