API tools faq
paste
Advertisement
themesbydoori

Mattefying

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