API tools faq
paste
Advertisement
themesbydoori

Contour

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