themesbydoori

Nefelibata

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