API tools faq
paste
ninchuser

Theme 9 - Cosmos - cactusthemes

ninchuser
Apr 15th, 2018
3,921
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 60.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!--                         THEME 9 - COSMOS
  6.                             by cactusthemes
  7.  
  8. -->
  9.  
  10. <!--    - Infinite Scroll + PXU Photosets by shythemes
  11.        - Video Resizing Script by shythemes
  12.        - Icon Font by saturnthms
  13.        - Captions by bychloethemes
  14.        - Remove via from quotes by annasthms
  15.        - PXU Photosets by Pixel Union
  16.        - Tooltip by manos malihu
  17.        - Captions by bychloethemes
  18.        - Smart Chat Names by magnusthemes
  19.        - Lightbox by sorrism
  20.        - Tumblr Controls by cyantists
  21.        - Gooey menu by https://codepen.io/lbebber/pen/LELBEo
  22.        - Gooey menu tutorial by silbrigthemes
  23.        - Stars by https://codepen.io/blixt/pen/LGKvde
  24. -->
  25.  
  26. <title>{Title}</title>
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. <link rel="shortcut icon" href="{Favicon}">
  29. {block:Description}
  30. <meta name="description" content="{MetaDescription}">
  31. {/block:Description}
  32. <meta name="viewport" content="width=device-width, initial-scale=1">
  33.  
  34. <meta name="if:Dark Tumblr Controls" content="0"/>
  35. <meta name="if:Fade Up" content="1"/>
  36. <meta name="if:Infinite Scroll" content="0"/>
  37. <meta name="if:Load More Button" content="0"/>
  38.  
  39. <meta name="text:Title" content=""/>
  40. <meta name="text:Link 1 Title" content="Link 1"/>
  41. <meta name="text:Link 1 URL" content=""/>
  42. <meta name="text:Link 2 Title" content="Link 2"/>
  43. <meta name="text:Link 2 URL" content=""/>
  44. <meta name="text:Link 3 Title" content="Link 3"/>
  45. <meta name="text:Link 3 URL" content=""/>
  46. <meta name="text:Link 4 Title" content="Link 4"/>
  47. <meta name="text:Link 4 URL" content=""/>
  48.  
  49. <meta name="select:Link 1 Icon" content="th-constellation" title="constellation">
  50. <meta name="select:Link 1 Icon" content="th-spaceship" title="space ship">
  51. <meta name="select:Link 1 Icon" content="th-moon" title="moon">
  52. <meta name="select:Link 1 Icon" content="th-planet-1" title="saturn">
  53. <meta name="select:Link 1 Icon" content="th-planet-2" title="jupiter">
  54. <meta name="select:Link 1 Icon" content="th-bookmark-1" title="bookmark">
  55. <meta name="select:Link 1 Icon" content="th-bell" title="bell">
  56. <meta name="select:Link 1 Icon" content="th-notebook" title="book">
  57. <meta name="select:Link 1 Icon" content="th-camera" title="camera">
  58. <meta name="select:Link 1 Icon" content="th-chat-bubble" title="chat">
  59. <meta name="select:Link 1 Icon" content="th-cloud-3" title="cloud">
  60. <meta name="select:Link 1 Icon" content="th-settings" title="cog">
  61. <meta name="select:Link 1 Icon" content="th-earth" title="earth">
  62. <meta name="select:Link 1 Icon" content="th-sunflower" title="flower">
  63. <meta name="select:Link 1 Icon" content="th-heart-1" title="heart">
  64. <meta name="select:Link 1 Icon" content="th-music" title="music note">
  65. <meta name="select:Link 1 Icon" content="th-pencil" title="pencil">
  66. <meta name="select:Link 1 Icon" content="th-push-pin" title="push pin">
  67. <meta name="select:Link 1 Icon" content="th-moon" title="moon">
  68. <meta name="select:Link 1 Icon" content="th-stars" title="stars"/>
  69. <meta name="select:Link 1 Icon" content="th-star" title="star">
  70. <meta name="select:Link 1 Icon" content="th-sun" title="sun">
  71. <meta name="select:Link 1 Icon" content="th-sunset" title="sunset">
  72. <meta name="select:Link 1 Icon" content="th-hashtag" title="tag">
  73. <meta name="select:Link 1 Icon" content="th-trash" title="trashcan">
  74. <meta name="select:Link 1 Icon" content="th-ufo" title="ufo">
  75. <meta name="select:Link 1 Icon" content="th-user" title="user">
  76. <meta name="select:Link 1 Icon" content="th-video" title="video">
  77.  
  78. <meta name="select:Link 2 Icon" content="th-spaceship" title="space ship">
  79. <meta name="select:Link 2 Icon" content="th-constellation" title="constellation">
  80. <meta name="select:Link 2 Icon" content="th-moon" title="moon">
  81. <meta name="select:Link 2 Icon" content="th-planet-1" title="saturn">
  82. <meta name="select:Link 2 Icon" content="th-planet-2" title="jupiter">
  83. <meta name="select:Link 2 Icon" content="th-bookmark-1" title="bookmark">
  84. <meta name="select:Link 2 Icon" content="th-bell" title="bell">
  85. <meta name="select:Link 2 Icon" content="th-notebook" title="book">
  86. <meta name="select:Link 2 Icon" content="th-camera" title="camera">
  87. <meta name="select:Link 2 Icon" content="th-chat-bubble" title="chat">
  88. <meta name="select:Link 2 Icon" content="th-cloud-3" title="cloud">
  89. <meta name="select:Link 2 Icon" content="th-settings" title="cog">
  90. <meta name="select:Link 2 Icon" content="th-earth" title="earth">
  91. <meta name="select:Link 2 Icon" content="th-sunflower" title="flower">
  92. <meta name="select:Link 2 Icon" content="th-heart-1" title="heart">
  93. <meta name="select:Link 2 Icon" content="th-music" title="music note">
  94. <meta name="select:Link 2 Icon" content="th-pencil" title="pencil">
  95. <meta name="select:Link 2 Icon" content="th-push-pin" title="push pin">
  96. <meta name="select:Link 2 Icon" content="th-moon" title="moon">
  97. <meta name="select:Link 2 Icon" content="th-stars" title="stars"/>
  98. <meta name="select:Link 2 Icon" content="th-star" title="star">
  99. <meta name="select:Link 2 Icon" content="th-sun" title="sun">
  100. <meta name="select:Link 2 Icon" content="th-sunset" title="sunset">
  101. <meta name="select:Link 2 Icon" content="th-hashtag" title="tag">
  102. <meta name="select:Link 2 Icon" content="th-trash" title="trashcan">
  103. <meta name="select:Link 2 Icon" content="th-ufo" title="ufo">
  104. <meta name="select:Link 2 Icon" content="th-user" title="user">
  105. <meta name="select:Link 2 Icon" content="th-video" title="video">
  106.  
  107. <meta name="select:Link 3 Icon" content="th-moon" title="moon">
  108. <meta name="select:Link 3 Icon" content="th-constellation" title="constellation">
  109. <meta name="select:Link 3 Icon" content="th-spaceship" title="space ship">
  110. <meta name="select:Link 3 Icon" content="th-planet-1" title="saturn">
  111. <meta name="select:Link 3 Icon" content="th-planet-2" title="jupiter">
  112. <meta name="select:Link 3 Icon" content="th-bookmark-1" title="bookmark">
  113. <meta name="select:Link 3 Icon" content="th-bell" title="bell">
  114. <meta name="select:Link 3 Icon" content="th-notebook" title="book">
  115. <meta name="select:Link 3 Icon" content="th-camera" title="camera">
  116. <meta name="select:Link 3 Icon" content="th-chat-bubble" title="chat">
  117. <meta name="select:Link 3 Icon" content="th-cloud-3" title="cloud">
  118. <meta name="select:Link 3 Icon" content="th-settings" title="cog">
  119. <meta name="select:Link 3 Icon" content="th-earth" title="earth">
  120. <meta name="select:Link 3 Icon" content="th-sunflower" title="flower">
  121. <meta name="select:Link 3 Icon" content="th-heart-1" title="heart">
  122. <meta name="select:Link 3 Icon" content="th-music" title="music note">
  123. <meta name="select:Link 3 Icon" content="th-pencil" title="pencil">
  124. <meta name="select:Link 3 Icon" content="th-push-pin" title="push pin">
  125. <meta name="select:Link 3 Icon" content="th-moon" title="moon">
  126. <meta name="select:Link 3 Icon" content="th-stars" title="stars"/>
  127. <meta name="select:Link 3 Icon" content="th-star" title="star">
  128. <meta name="select:Link 3 Icon" content="th-sun" title="sun">
  129. <meta name="select:Link 3 Icon" content="th-sunset" title="sunset">
  130. <meta name="select:Link 3 Icon" content="th-hashtag" title="tag">
  131. <meta name="select:Link 3 Icon" content="th-trash" title="trashcan">
  132. <meta name="select:Link 3 Icon" content="th-ufo" title="ufo">
  133. <meta name="select:Link 3 Icon" content="th-user" title="user">
  134. <meta name="select:Link 3 Icon" content="th-video" title="video">
  135.  
  136. <meta name="select:Link 4 Icon" content="th-planet-1" title="saturn">
  137. <meta name="select:Link 4 Icon" content="th-constellation" title="constellation">
  138. <meta name="select:Link 4 Icon" content="th-spaceship" title="space ship">
  139. <meta name="select:Link 4 Icon" content="th-moon" title="moon">
  140. <meta name="select:Link 4 Icon" content="th-planet-2" title="jupiter">
  141. <meta name="select:Link 4 Icon" content="th-bookmark-1" title="bookmark">
  142. <meta name="select:Link 4 Icon" content="th-bell" title="bell">
  143. <meta name="select:Link 4 Icon" content="th-notebook" title="book">
  144. <meta name="select:Link 4 Icon" content="th-camera" title="camera">
  145. <meta name="select:Link 4 Icon" content="th-chat-bubble" title="chat">
  146. <meta name="select:Link 4 Icon" content="th-cloud-3" title="cloud">
  147. <meta name="select:Link 4 Icon" content="th-settings" title="cog">
  148. <meta name="select:Link 4 Icon" content="th-earth" title="earth">
  149. <meta name="select:Link 4 Icon" content="th-sunflower" title="flower">
  150. <meta name="select:Link 4 Icon" content="th-heart-1" title="heart">
  151. <meta name="select:Link 4 Icon" content="th-music" title="music note">
  152. <meta name="select:Link 4 Icon" content="th-pencil" title="pencil">
  153. <meta name="select:Link 4 Icon" content="th-push-pin" title="push pin">
  154. <meta name="select:Link 4 Icon" content="th-moon" title="moon">
  155. <meta name="select:Link 4 Icon" content="th-stars" title="stars"/>
  156. <meta name="select:Link 4 Icon" content="th-star" title="star">
  157. <meta name="select:Link 4 Icon" content="th-sun" title="sun">
  158. <meta name="select:Link 4 Icon" content="th-sunset" title="sunset">
  159. <meta name="select:Link 4 Icon" content="th-hashtag" title="tag">
  160. <meta name="select:Link 4 Icon" content="th-trash" title="trashcan">
  161. <meta name="select:Link 4 Icon" content="th-ufo" title="ufo">
  162. <meta name="select:Link 4 Icon" content="th-user" title="user">
  163. <meta name="select:Link 4 Icon" content="th-video" title="video">
  164.  
  165. <meta name="select:Font Size" content="16" title="16px"/>
  166. <meta name="select:Font Size" content="15" title="15px"/>
  167. <meta name="select:Font Size" content="14" title="14px"/>
  168. <meta name="select:Font Size" content="13" title="13px"/>
  169.  
  170. <meta name="color:Background" content="#0b1234"/>
  171. <meta name="color:Bold" content="#eee"/>
  172. <meta name="color:Blockquote" content="#ededed"/>
  173. <meta name="color:Selection Text" content="#fff"/>
  174. <meta name="color:Selection Background" content="#3390ff"/>
  175. <meta name="color:Titles" content="#fff"/>
  176. <meta name="color:Sidebar Gradient One" content="#0e1744"/>
  177. <meta name="color:Sidebar Gradient Two" content="#2943c6"/>
  178. <meta name="color:Menu Buttons Background" content="#909fe8"/>
  179. <meta name="color:Menu Buttons Icons" content="#fff"/>
  180. <meta name="color:Description Background" content="#fff"/>
  181. <meta name="color:Description Text" content="#000"/>
  182. <meta name="color:Links" content="#152265"/>
  183. <meta name="color:Links Hover" content="#a0adeb"/>
  184. <meta name="color:Blog Links" content="#e2e6f9"/>
  185. <meta name="color:Blog Links Hover" content="#152256"/>
  186. <meta name="color:Post Text" content="#dadada"/>
  187. <meta name="color:Post Background" content="#2f4bd4"/>
  188. <meta name="color:Chat One" content="#5066db"/>
  189. <meta name="color:Chat Two" content="#1c2d85"/>
  190. <meta name="color:Postinfo Background" content="#152265"/>
  191. <meta name="color:Postinfo Links" content="#fff"/>
  192.  
  193. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  194.  
  195. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  196.  
  197. <link href="https://static.tumblr.com/uxq3xua/Ci6ph2baf/funtumblrfont.css" rel="stylesheet">
  198.  
  199. <link href='https://fonts.googleapis.com/css?family=Ubuntu|Timmana' rel='stylesheet' type='text/css'>
  200.  
  201. {block:ifFadeUp}
  202. <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  203. {/block:ifFadeUp}
  204.  
  205. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  206.  
  207. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  208.  
  209. {block:ifFadeUp}
  210. <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  211. {/block:ifFadeUp}
  212.  
  213. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  214.  
  215. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  216.  
  217. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  218.  
  219. <script src="https://static.tumblr.com/uxq3xua/5Qfpt7mbd/cactusthemes.cosmos.js"></script>
  220.  
  221. <style type="text/css">
  222.  
  223. body {
  224.     background:{color:Background};
  225. }
  226.  
  227. h1, h2, h3, h4, h5, h6 {
  228.     font-family:"Timmana";
  229. }
  230.  
  231. h1 {
  232.     font-size:2em;
  233. }
  234.  
  235. a {
  236.     transition:all .5s ease-in-out;
  237.     text-decoration:none;
  238. }
  239.  
  240. b, strong {
  241.     color:{color:Bold};
  242. }
  243.  
  244. pre {
  245.     white-space:pre-wrap;
  246. }
  247.  
  248. ::-webkit-scrollbar {
  249.     width:12px;
  250.     height:12px;
  251.     background:#e5e5e5;
  252.     border:5px solid #fff;
  253.     border-radius:10px;
  254. }
  255. ::-webkit-scrollbar-thumb:vertical {
  256.     background:{color:Sidebar Gradient One};
  257.     background:linear-gradient(to bottom, {color:Sidebar Gradient One}, {color:Sidebar Gradient Two});
  258.     border:2px solid #fff;
  259.     border-radius:10px;
  260. }
  261.  
  262. ::-webkit-scrollbar-thumb:horizontal {
  263.     background:{color:Sidebar Gradient One};
  264.     background:linear-gradient(to right, {color:Sidebar Gradient One}, {color:Sidebar Gradient Two});
  265.     border:2px solid #fff;
  266.     border-radius:10px;
  267. }
  268.  
  269. ::selection {
  270.     color:{color:Selection Text};
  271.     background:{color:Selection Background};
  272. }
  273.  
  274. ::-moz-selection {
  275.     color:{color:Selection Text};
  276.     background:{color:Selection Background};
  277. }
  278.  
  279. blockquote {
  280.     margin-left:20px;
  281.     padding-left:10px;
  282.     margin-top:-4px;
  283.     border-left:2px solid {color:Blockquote};
  284. }
  285.  
  286. blockquote blockquote {
  287.     margin-top:-4px;
  288.     margin-left:10px;
  289. }
  290.  
  291. blockquote img {
  292.     max-width:100%;
  293.     height:auto;
  294. }
  295.  
  296. #s-m-t-tooltip {
  297.     max-width:300px;
  298.     overflow-x:auto;
  299.     margin:25px 20px;
  300.     padding:12px;
  301.     background:{color:Postinfo Background};
  302.     color:{color:Postinfo Links};
  303.     font-family:'Ubuntu';
  304.     font-size:calc({select:Font Size}px - 1px);
  305.     height:auto;
  306.     word-wrap:break-word;
  307.     border-radius:10px;
  308.     z-index:9999!important;
  309.     text-transform:lowercase;
  310. }
  311.  
  312. iframe.tmblr-iframe {
  313.     white-space:nowrap!important;
  314.     z-index:99999999999999!important;
  315.     top:15px !important;
  316.     right:10px !important;
  317.     {block:ifDarkTumblrControls}
  318.     filter:invert(1) contrast(150%);
  319.     -webkit-filter:invert(1) contrast(150%);
  320.     -o-filter:invert(1) contrast(150%);
  321.     -moz-filter:invert(1) contrast(150%);
  322.     -ms-filter:invert(1) contrast(150%);
  323.     opacity:.6!important;
  324.     {/block:ifDarkTumblrControls}
  325.     {block:ifNotDarkTumblrControls}
  326.     opacity:.8!important;
  327.     {/block:ifNotDarkTumblrControls}
  328.     transition:all .5s ease-in-out;
  329.     -moz-transition:all .5s ease-in-out;
  330.     -o-transition:all .5s ease-in-out;
  331.     -webkit-transition:all .5s ease-in-out;
  332.     transform:scale(0.65);
  333.     transform-origin:100% 0;
  334.     -webkit-transform:scale(0.65);
  335.     -webkit-transform-origin:100% 0;
  336.     -o-transform:scale(0.65);
  337.     -o-transform-origin:100% 0;
  338.     -moz-transform:scale(0.65);
  339.     -moz-transform-origin:100% 0;
  340.     -ms-transform:scale(0.65);
  341.     -ms-transform-origin:100% 0;}
  342. iframe.tmblr-iframe:hover {
  343.     {block:ifDarkTumblrControls}
  344.     opacity:.8!important;
  345.     {/block:ifDarkTumblrControls}
  346.     {block:ifNotDarkTumblrControls}
  347.     opacity:1!important;
  348.     {/block:ifNotDarkTumblrControls}
  349. }
  350.  
  351. {block:ifDarkTumblrControls}
  352. div.status-indicator {
  353.     filter:invert(1)!important;
  354. }
  355. {/block:ifDarkTumblrControls}
  356.  
  357. aside {
  358.     width:300px;
  359.     height:340px;
  360.     position:fixed;
  361.     margin-left:-330px;
  362. }
  363.  
  364. aside h1 {
  365.     margin:0;
  366.     padding:0;
  367.     text-align:center;
  368.     font-family:'Timmana';
  369.     letter-spacing:1px;
  370.     font-size:calc({select:Font Size}px + 6px);
  371.     color:{color:Titles};
  372. }
  373.  
  374. aside h2 {
  375.     cursor:help;
  376.     margin:0;
  377.     color:{color:Titles};
  378.     font-family:'Ubuntu';
  379.     text-align:center;
  380.     font-size:{select:Font Size}px;
  381. }
  382.  
  383. #box {
  384.     z-index:-2;
  385.     background:{color:Sidebar Gradient One};
  386.     background:linear-gradient(to bottom, {color:Sidebar Gradient One}, {color:Sidebar Gradient Two});
  387.     background-repeat:no-repeat;
  388.     height:300px;
  389.     overflow:hidden;
  390.     position:fixed;
  391.     width:300px;
  392.     margin:-139px 0px 0px;
  393.     border-radius:50%;
  394.     box-shadow:0 2px 20px rgba(255,255,255,.2);
  395. }
  396.  
  397. #box .layer {
  398.     background-size:auto 100%;
  399.     background-position:50% 0;
  400.     background-repeat:repeat-x;
  401.     height:270px;
  402.     left:0;
  403.     position:absolute;
  404.     top:0;
  405.     transform:translate3d(0, 0, 0);
  406.     width:200vw;
  407. }
  408.  
  409. @keyframes twinkle {
  410.     from { opacity:.3; }
  411.     to { opacity:1; }
  412. }
  413.  
  414. @keyframes layer-1 {
  415.     from { transform:translate3d(0, 0, 0); }
  416.     to { transform:translate3d(-689px, 0, 0); }
  417. }
  418. #box .layer:nth-child(1) {
  419.        animation:twinkle 7s ease-in -5s infinite alternate, layer-1 100s linear infinite;
  420.     background-image:url('https://static.tumblr.com/uxq3xua/fZLp7395v/star_1.png');
  421. }
  422.  
  423. @keyframes layer-2 {
  424.     from { transform:translate3d(0, 0, 0); }
  425.     to { transform:translate3d(-699px, 0, 0); }
  426. }
  427. #box .layer:nth-child(2) {
  428.     animation:twinkle 3s ease-in -3s infinite alternate, layer-2 103s linear infinite;
  429.     background-image:url('https://static.tumblr.com/uxq3xua/lkqp7397c/star_2.png');
  430. }
  431.  
  432. @keyframes layer-3 {
  433.     from { transform:translate3d(0, 0, 0); }
  434.     to { transform:translate3d(-699px, 0, 0); }
  435. }
  436. #box .layer:nth-child(3) {
  437.     animation:twinkle 3.5s ease-in infinite alternate, layer-3 103s linear infinite;
  438.     background-image:url('https://static.tumblr.com/uxq3xua/X6Yp7398v/star_3.png');
  439. }
  440.  
  441. @keyframes layer-4 {
  442.     from { transform:translate3d(0, 0, 0); }
  443.     to { transform:translate3d(-480px, 0, 0); }
  444. }
  445. #box .layer:nth-child(4) {
  446.     animation:twinkle 4s ease-in -2s infinite alternate, layer-4 42s linear infinite;
  447.     background-image:url('https://static.tumblr.com/uxq3xua/E5Ap739bd/star_4.png');
  448. }
  449.  
  450. @keyframes layer-5 {
  451.     from { transform:translate3d(0, 0, 0); }
  452.     to { transform:translate3d(-486px, 0, 0); }
  453. }
  454. #box .layer:nth-child(5) {
  455.     animation:twinkle 5.5s ease-in infinite alternate, layer-5 44s linear infinite;
  456.     background-image:url('https://static.tumblr.com/uxq3xua/WHEp739cm/star_5.png');
  457. }
  458.  
  459. @keyframes shooting-star {
  460.     0% {
  461.         opacity:1;
  462.         transform:translate3d(0, 0, 0);
  463.     }
  464.     25% {
  465.         opacity:1;
  466.     }
  467.     100% {
  468.         opacity:0;
  469.         transform:translate3d(-270px, 180px, 0);
  470.     }
  471. }
  472.  
  473. #box:before {
  474.     animation:500ms linear 2.5s shooting-star;
  475.     background-image:url('https://static.tumblr.com/uxq3xua/nYup739e2/shooting_star.png');
  476.     background-size:72px 50px;
  477.     content:' ';
  478.     height:50px;
  479.     left:80%;
  480.     position:absolute;
  481.     top:-50px;
  482.     width:72px;
  483.     z-index:100;
  484. }
  485.  
  486. .menu {
  487.     filter:url("#goo");
  488. }
  489.  
  490. .menu-item, .menu-open-button {
  491.     background:{color:Menu Buttons Background};
  492.     border-radius:100%;
  493.     width:80px;
  494.     height:80px;
  495.     margin-left:-40px;
  496.     margin-top:90px;
  497.     position:fixed;
  498.     color:{color:Menu Buttons Icons};
  499.     text-align:center;
  500.     line-height:85px;
  501.     transform:translate3d(0, 0, 0);
  502.     transition:transform ease-out 200ms;
  503. }
  504.  
  505. .menu-open {
  506.     display:none;
  507. }
  508.  
  509. .hamburger {
  510.     width:32px;
  511.     height:3px;
  512.     background:{color:Menu Buttons Icons};
  513.     display:block;
  514.     position:absolute;
  515.     top:50%;
  516.     left:50%;
  517.     margin-left:-17px;
  518.     margin-top:-1.5px;
  519.     transition:transform 200ms;
  520. }
  521.  
  522. .hamburger-1 {
  523.     transform:translate3d(0, -8px, 0);
  524. }
  525.  
  526. .hamburger-2 {
  527.     transform:translate3d(0, 0, 0);
  528. }
  529.  
  530. .hamburger-3 {
  531.     transform:translate3d(0, 8px, 0);
  532. }
  533.  
  534. .menu-open:checked + .menu-open-button .hamburger-1 {
  535.     transform:translate3d(0, 0, 0) rotate(45deg);
  536. }
  537.  
  538. .menu-open:checked + .menu-open-button .hamburger-2 {
  539.     transform:translate3d(0, 0, 0) scale(0, 1);
  540. }
  541. .menu-open:checked + .menu-open-button .hamburger-3 {
  542.     transform:translate3d(0, 0, 0) rotate(-45deg);
  543. }
  544.  
  545. .menu {
  546.     position:absolute;
  547.     left:50%;
  548.     margin-left:-190px;
  549.     padding-top:33px;
  550.     padding-left:190px;
  551.     width:360px;
  552.     height:290px;
  553.     box-sizing:border-box;
  554.     font-size:calc({select:Font Size}px + 9px);
  555.     text-align:left;
  556. }
  557.  
  558. .menu-item .th {
  559.     transition:all .5s ease-in-out;
  560. }
  561.  
  562. .menu-item:hover .th {
  563.     opacity:.7;
  564. }
  565.  
  566. .menu-item:nth-child(3) {
  567.     transition-duration:180ms;
  568. }
  569.  
  570. .menu-item:nth-child(4) {
  571.     transition-duration:180ms;
  572. }
  573.  
  574. .menu-item:nth-child(5) {
  575.     transition-duration:180ms;
  576. }
  577.  
  578. .menu-item:nth-child(6) {
  579.     transition-duration:180ms;
  580. }
  581.  
  582. .menu-item:nth-child(7) {
  583.     transition-duration:180ms;
  584. }
  585.  
  586. .menu-item:nth-child(8) {
  587.     transition-duration:180ms;
  588. }
  589.  
  590. .menu-item:nth-child(9) {
  591.     transition-duration:180ms;
  592. }
  593.  
  594. .menu-open-button {
  595.     z-index:2!important;
  596.     transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
  597.     transition-duration:400ms;
  598.     transform:scale(1.1, 1.1) translate3d(0, 0, 0);
  599.     cursor:pointer;
  600. }
  601.  
  602. .menu-open-button:hover {
  603.     transform:scale(1.2, 1.2) translate3d(0, 0, 0);
  604. }
  605.  
  606. .menu-open:checked + .menu-open-button {
  607.     transition-timing-function:linear;
  608.     transition-duration:200ms;
  609.     transform:scale(0.8, 0.8) translate3d(0, 0, 0);
  610. }
  611.  
  612. .menu-open:checked ~ .menu-item {
  613.     transition-timing-function:cubic-bezier(0.935, 0, 0.34, 1.33);
  614. }
  615.          
  616. .menu-open:checked ~ .menu-item:nth-child(3) {
  617.     transition-duration:180ms;
  618.     transform:translate3d(0.08361px, -104.99997px, 0);
  619. }
  620.  
  621. .menu-open:checked ~ .menu-item:nth-child(4) {
  622.     transition-duration:280ms;
  623.     transform:translate3d(90.9466px, -52.47586px, 0);
  624. }
  625.  
  626. .menu-open:checked ~ .menu-item:nth-child(5) {
  627.     transition-duration:380ms;
  628.     transform:translate3d(90.9466px, 52.47586px, 0);
  629. }
  630.  
  631. .menu-open:checked ~ .menu-item:nth-child(6) {
  632.     transition-duration:480ms;
  633.     transform:translate3d(0.08361px, 104.99997px, 0);
  634. }
  635.  
  636. .menu-open:checked ~ .menu-item:nth-child(7) {
  637.     transition-duration:580ms;
  638.     transform:translate3d(-90.86291px, 52.62064px, 0);
  639. }
  640.  
  641. .menu-open:checked ~ .menu-item:nth-child(8) {
  642.     transition-duration:680ms;
  643.     transform:translate3d(-91.03006px, -52.33095px, 0);
  644. }
  645.  
  646. .menu-open:checked ~ .menu-item:nth-child(9) {
  647.     transition-duration:780ms;
  648.     transform:translate3d(-0.25084px, -104.9997px, 0);
  649. }
  650.  
  651.  
  652. #pop {
  653.     background:rgba({RGBColor:Description Background},.5);
  654.     color:{color:Description Text};
  655.     width:300px;
  656.     height:300px;
  657.     border-radius:50%;
  658.     margin-top:-139px;
  659.     z-index:99!important;
  660.     display:none;
  661.     -webkit-box-align:center;
  662.     -ms-flex-align:center;
  663.     align-items:center;
  664.     -webkit-box-pack:center;
  665.     -ms-flex-pack:center;
  666.     justify-content:center;
  667. }
  668.  
  669. #pop a {
  670.     color:{color:Postinfo Background};
  671.     border-bottom:1px solid {color:Postinfo Background};
  672. }
  673.  
  674. #pop a:hover {
  675.     color:{color:Sidebar Gradient Two};
  676.     border-color:{color:Sidebar Gradient Two};
  677. }
  678.  
  679. #popup {
  680.     width:215px;
  681.     height:215px;
  682.     overflow:auto;
  683.     display:-webkit-box;
  684.     display:-ms-flexbox;
  685.     display:flex;
  686.     -webkit-box-align:center;
  687.     -ms-flex-align:center;
  688.     align-items:center;
  689.     -webkit-box-pack:center;
  690.     -ms-flex-pack:center;
  691.     justify-content:center;
  692.     font-family:'Ubuntu';
  693.     font-size:13px;
  694. }
  695.  
  696. #container {
  697.     width:500px;
  698.     margin:auto;
  699. }
  700.  
  701. section.posts {
  702.     margin-top:150px;
  703.     margin-left:50px;
  704.     width:700px;
  705. }
  706.  
  707. #infscr-loading {
  708.     display:none!important;
  709. }
  710.  
  711. article.post {
  712.     color:{color:Post Text};
  713.     font-family:'Ubuntu';
  714.     background:{color:Post Background};
  715.     padding:20px 30px;
  716.     font-size:{select:Font Size}px;
  717.     margin:50px;
  718.     border-radius:25px;
  719.     position:relative;
  720. }
  721.  
  722. article.post h2.title {
  723.     margin:0px 0px -8px 0px;
  724.     font-family:'Timmana';
  725.     text-transform:uppercase;
  726.     word-wrap:break-word;
  727. }
  728.  
  729. article.post h2.litle {
  730.     margin:0;
  731. }
  732.  
  733. article.post h2.title a, article.post h2.ltitle a, article.post h2 a {
  734.     color:{color:Titles};
  735. }
  736.  
  737. article.post h2.ltitle a {
  738.     display:-webkit-box;
  739.     display:-moz-box;
  740.     display:-ms-flexbox;
  741.     display:-webkit-flex;
  742.     display:flex;
  743.     -webkit-box-pack:justify;
  744.     -ms-flex-pack:justify;
  745.     justify-content:space-between;
  746. }
  747.  
  748. article.post .th-ufo {
  749.     position:absolute;
  750.     color:{color:Postinfo Links};
  751.     font-size:30px;
  752.     margin-top:-5%;
  753.     margin-left:90%;
  754.     background:{color:Postinfo Background};
  755.     padding:7px;
  756.     border-radius:50%;
  757. }
  758.  
  759. article.post .reblog-header img {
  760.     width:30px;
  761.     vertical-align:middle;
  762.     transform:rotate(-135deg);
  763. }
  764.  
  765. article.post .portimg {
  766.     display:inline-block;
  767.     vertical-align:middle;
  768.     position:relative;
  769.     width:30px;
  770.     height:30px;
  771.     transform:rotate(135deg);
  772.     overflow:hidden;
  773. }
  774.  
  775. article.post .caption a.blog, article.post .caption a.answerer, article.post .caption span.blog {
  776.     transition:all .5s ease-in-out;
  777.     padding:7px 9px 8px 9px;
  778.     vertical-align:middle;
  779.     margin-left:5px;
  780.     border-radius:10px;
  781.     color:{color:Blog Links};
  782.     background:{color:Postinfo Background};
  783. }
  784.  
  785. article.post .caption a.blog:hover, article.post .caption a.answerer:hover, article.post .caption span.blog:hover {
  786.     background:{color:Blog Links};
  787.     color:{color:Postinfo Background};
  788. }
  789.  
  790. article.post span.inactive img {
  791.     cursor:default;
  792. }
  793.  
  794. article.post span.inactive.blog {
  795.     cursor:default;
  796. }
  797.  
  798. article.post span.inactive.mssg {
  799.     opacity:0;
  800.     transition:all .5s ease-in-out;
  801.     position:absolute;
  802.     padding:6px 0px 0px 10px;
  803.     cursor:default;
  804.     background:transparent;
  805. }
  806.  
  807. article.post span.inactive.blog:hover ~ span.inactive.mssg {
  808.     opacity:1;
  809. }
  810.  
  811. article.post .caption figcaption a:not(.read_more), article.post .reblog-content a:not(.read_more), ol.notes .action a {
  812.     color:{color:Links};
  813.     position:relative;
  814.     display:inline-block;
  815. }
  816.  
  817. article.post .caption figcaption a:not(.read_more)::after, article.post .reblog-content a:not(.read_more)::after, ol.notes .action a::after, article.post .caption figcaption a:not(.read_more)::before, article.post .reblog-content a:not(.read_more)::before, ol.notes .action a::before {
  818.     content:'';
  819.     position:absolute;
  820.     top:100%;
  821.     width:0;
  822.     right:0;
  823.     height:2px;
  824. }
  825.  
  826. article.post .caption figcaption a:not(.read_more)::before, article.post .reblog-content a:not(.read_more)::before, ol.notes .action a::before {
  827.     transition:width .4s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
  828.     background:{color:Links Hover};
  829. }
  830.  
  831. article.post .caption figcaption a:not(.read_more)::after, article.post .reblog-content a:not(.read_more)::after, ol.notes .action a::after {
  832.     transition:width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
  833.     background:{color:Blog Links};
  834. }
  835.  
  836. article.post .caption figcaption a:not(.read_more):hover::after, article.post .reblog-content a:not(.read_more):hover::after, ol.notes .action a:hover::after, article.post .caption figcaption a:not(.read_more):hover::before, article.post .reblog-content a:not(.read_more):hover::before, ol.notes .action a:hover::before {
  837.     width:100%;
  838.     left:0;
  839. }
  840.  
  841. article.post .asker a {
  842.     color:{color:Links Hover};
  843.     font-weight:bold;
  844.     text-transform:uppercase;
  845. }
  846.  
  847. article.post p.read_more_container {
  848.     text-align:center;
  849.     margin:25px 0px;
  850. }
  851.  
  852. article.post a.read_more {
  853.     padding:12px;
  854.     background:{color:Postinfo Background};
  855.     border-radius:25px;
  856.     color:{color:Blog Links};
  857. }
  858.  
  859. article.post a.read_more:hover {
  860.     background:{color:Blog Links};
  861.     color:{color:Postinfo Background};
  862. }
  863.  
  864. article.post  img.main_photo {
  865.     width:100%;
  866. }
  867.  
  868. article.post  img {
  869.     max-width:100%;
  870.     height:auto;
  871. }
  872.  
  873. article.post .photo img {
  874.     margin:0;
  875.     line-height:0;
  876. }
  877.  
  878. article.post .tumblr_post.photo p {
  879.     display:none;
  880. }
  881.  
  882. article.post img.inline_image, article.post .reblog-content img, article.post figcaption img {
  883.     border-radius:10px;
  884. }
  885.  
  886. article.post .pic img {
  887.     width:100%;
  888.     border-radius:10px;
  889.     margin:10px auto 20px auto;
  890. }
  891.  
  892. article.post .img {
  893.     margin:10px auto;
  894. }
  895.  
  896. .vignette, #vignette {
  897.     opacity:0;
  898. }
  899.    
  900. .lightbox-image, #tumblr_lightbox img {
  901.     box-shadow:none!important;
  902.     max-width:none;
  903.     border-radius:10px!important;
  904. }
  905.  
  906. .tmblr-lightbox, #tumblr_lightbox {
  907.     background-color:rgba({RGBColor:Menu Buttons Background},.78)!important;
  908. }
  909.  
  910. article.post .quote {
  911.     font-family:'Timmana';
  912.     font-size:calc({select:Font Size}px + 2px);
  913. }
  914.  
  915. article.post .caption.chat {
  916.     padding-bottom:10px;
  917. }
  918.  
  919. article.post .chat ol {
  920.     list-style:none;
  921.     padding:0;
  922.     margin:0;
  923. }
  924.  
  925. article.post .l {
  926.     padding:10px 0px;
  927. }
  928.  
  929. article.post .line {
  930.     line-height:20px;
  931. }
  932.  
  933. article.post .label {
  934.     color:{color:Titles};
  935.     display:inline-block;
  936.     padding:8px;
  937.     font-weight:700;
  938.     border-radius:7px;
  939. }
  940.  
  941. article.post .video {
  942.     padding:8px 0px 20px 0px;
  943. }
  944.  
  945. article.post .audio {
  946.     position:relative;
  947.     padding-top:10px;
  948. }
  949.  
  950. article.post .player {
  951.     display:block;
  952.     overflow:hidden;
  953.     position:absolute;
  954.     height:120px;
  955.     width:120px;
  956.     z-index:1;
  957. }
  958.  
  959. article.post .audioplayer {
  960.     position:relative;
  961.     overflow:hidden;
  962.     width:30px;
  963.     height:30px;
  964.     margin-top:42px;
  965.     margin-left:42px;
  966.     padding:3px;
  967.     opacity:.5;
  968. }
  969.  
  970. article.post .art {
  971.     position:relative;
  972.     float:left;
  973.     width:120px;
  974.     height:120px;
  975.     margin-top:-19px;
  976.     background:{color:Postinfo Background};
  977.     border-radius:10px;
  978. }
  979.  
  980. article.post .art img {
  981.     width:120px;
  982.     height:120px;
  983.     border-radius:10px;
  984. }
  985.  
  986. article.post .audioinfo {
  987.     width:73%;
  988.     background:{color:Postinfo Background};
  989.     border-radius:10px;
  990.     height:120px;
  991.     position:absolute;
  992.     margin-left:145px;
  993.     margin-top:-19px;
  994.     display:-webkit-box;
  995.     display:-ms-flexbox;
  996.     display:flex;
  997.     -webkit-box-align:center;
  998.     -ms-flex-align:center;
  999.     align-items:center;
  1000.     -webkit-box-pack:center;
  1001.     -ms-flex-pack:center;
  1002.     justify-content:center;
  1003. }
  1004.  
  1005. article.post .inf {
  1006.     position:relative;
  1007.     vertical-align:middle;
  1008. }
  1009.  
  1010. article.post .track, .artist, .plays {
  1011.     display:block;
  1012. }
  1013.  
  1014. article.post .askerimg {
  1015.     margin-right:15px;
  1016.     position:absolute;
  1017. }
  1018.  
  1019. article.post .askerimg img {
  1020.     width:55px;
  1021.     border-radius:10px;
  1022. }
  1023.  
  1024. article.post .entireask {
  1025.     display:inline-block;
  1026.     background:{color:Postinfo Background};
  1027.     box-sizing:border-box;
  1028.     padding:7px 10px 7px 10px;
  1029.     border-radius:10px;
  1030.     width:86%;
  1031.     margin-left:70px;
  1032.     min-height:55px;
  1033. }
  1034.  
  1035. article.post .postinfo {
  1036.     background:{color:Postinfo Background};
  1037.     padding:15px;
  1038.     border-radius:25px;
  1039.     display:-webkit-box;
  1040.     display:-ms-flexbox;
  1041.     display:flex;
  1042.     -ms-flex-pack:distribute;
  1043.     justify-content:space-around;
  1044. }
  1045.  
  1046. article.post .postinfo .th {
  1047.     margin-right:6px;
  1048.     vertical-align:middle;
  1049.     color:{color:Postinfo Links};!important;
  1050. }
  1051.  
  1052. article.post .postinfo a {
  1053.     color:{color:Postinfo Links};
  1054.     vertical-align:middle;
  1055. }
  1056.  
  1057. article.post .postinfo a:hover {
  1058.     color:{color:Menu Buttons Background};
  1059. }
  1060.  
  1061. article.post .tags {
  1062.     margin-top:10px;
  1063. }
  1064.  
  1065. article.post .tags .ttitle, article.post .tags a {
  1066.     padding:10px;
  1067.     border-radius:8px;
  1068.     display:inline-block;
  1069.     white-space:pre-wrap;
  1070.     margin:5px;
  1071.     color:{color:Postinfo Links};
  1072. }
  1073.  
  1074. article.post .tags .ttitle {
  1075.     background:{color:Postinfo Background};
  1076. }
  1077.  
  1078. article.post .tags a {
  1079.     background:{color:Menu Buttons Background};  
  1080. }
  1081.  
  1082. article.post .tags a:hover {
  1083.     color:{color:Postinfo Background};
  1084. }
  1085.  
  1086. section.posts ol.notes {
  1087.     background:{color:Post Background};
  1088.     padding:30px 25px;
  1089.     border-radius:25px;
  1090.     font-family:'Ubuntu';
  1091.     width:78%;
  1092.     margin:50px;
  1093.     position:relative;
  1094.     list-style:none;
  1095.     color:{color:Post Text};
  1096.     max-height:200px;
  1097.     overflow:auto;
  1098. }
  1099.  
  1100. section.posts img.avatar {
  1101.     display:none;
  1102. }
  1103.  
  1104. ol.notes li.reblog:before, ol.notes li.like:before, ol.notes li.note.original_post:before, ol.notes li.note.reply::before {
  1105.     font-family:'saturnicons';
  1106.     margin-right:5px;
  1107.     color:{color:Bold};
  1108. }
  1109.  
  1110. ol.notes li.reblog:before {
  1111.     content:'\e1f4';
  1112. }
  1113.  
  1114. ol.notes li.like:before {
  1115.     content:'\e12a';
  1116. }
  1117.  
  1118. ol.notes li.reply:before {
  1119.     content:'\e07f';
  1120. }
  1121.  
  1122. ol.notes li.original_post:before {
  1123.     content:'\e1b3';
  1124. }
  1125.  
  1126. ol.notes li.note {
  1127.     padding:5px 0px;
  1128. }
  1129.  
  1130. ol.notes li.note blockquote {
  1131.     background:{color:Blog Links Hover};
  1132.     padding:10px;
  1133.     margin:5px 10px;
  1134.     border-radius:8px;
  1135.     border:0px;
  1136. }
  1137.  
  1138. ol.notes li.note blockquote a {
  1139.     color:{color:Bold};
  1140. }
  1141.  
  1142. ol.notes li.note.more_notes_link_container a, ol.notes .notes_loading {
  1143.        color:{color:Links Hover};
  1144. }
  1145.  
  1146. #pagination {
  1147.     text-align:center;
  1148.     font-family:'Ubuntu';
  1149.     font-size:{select:Font Size}px;
  1150. }
  1151.  
  1152. #pagination .pgb {
  1153.     display:inline-block;
  1154. }
  1155.  
  1156. #pagination .pgb a, .more_container a {
  1157.     background:{color:Post Background};
  1158.     color:#fff;
  1159.     padding:12px;
  1160.     border-radius:8px;
  1161. }
  1162.  
  1163. #pagination .pgb a:hover, .more_container a:hover {
  1164.     color:{color:Blog Links Hover};
  1165. }
  1166.  
  1167. .more_container, .end_container {
  1168.     margin-left:150px;
  1169.     margin-bottom:50px;
  1170.     width:100%;
  1171.     text-align:center;
  1172.     font-family:'Ubuntu';
  1173.     font-size:{select:Font Size}px;
  1174.     color:{color:Postinfo Links};
  1175. }
  1176.  
  1177. .end_container {
  1178.     display:none;
  1179. }
  1180.  
  1181. .scroll {
  1182.     font-size:{select:Font Size}px;
  1183.     color:#fff;
  1184.     bottom:75px;
  1185.     right:20px;
  1186.     position:fixed;
  1187.     cursor:pointer;
  1188.     text-align:right;
  1189.     font-family:'Ubuntu';
  1190.     display:none;
  1191. }
  1192.  
  1193. .scroll .th {
  1194.     font-size:calc({select:Font Size}px + 9px);
  1195. }
  1196.  
  1197. .dummy {
  1198.     top:20px;
  1199.     left:20px;
  1200.     background:transparent;
  1201.     opacity:1;
  1202.     visibility:visible;
  1203.     display:block;
  1204. }
  1205.  
  1206. /* CREDIT. DO NOT TOUCH */
  1207.  
  1208. #credz {
  1209.     position:fixed;
  1210.     bottom:15px;
  1211.     right:20px;
  1212.     width:33px;
  1213.     height:33px;
  1214.     border-radius:50px;
  1215.     border:1px solid rgba(0,0,0,.1);
  1216.     background-image:url('https://78.media.tumblr.com/avatar_09d2b1f05d49_128.pnj');
  1217.     background-repeat:no-repeat;
  1218.     background-position:center center;
  1219.     background-size:28px;
  1220.     transition:all .5s ease-in-out;
  1221. }
  1222.  
  1223. a[href="https://cactusthemes.tumblr.com"]:hover > #credz {
  1224.     -webkit-transform:scale(1.15);
  1225.     -ms-transform:scale(1.15);
  1226.     transform:scale(1.15);
  1227. }
  1228.  
  1229. @media only screen and (max-width:1024px) {
  1230.     #s-m-t-tooltip {
  1231.         font-size:calc({select:Font Size}px - 3px);
  1232.         padding:10px;
  1233.     }
  1234.    
  1235.     section.posts {
  1236.         max-width:600px;
  1237.         margin-left:100px;
  1238.     }
  1239.    
  1240.     aside {
  1241.         margin-left:-230px;
  1242.     }
  1243.    
  1244.     aside h1 {
  1245.         font-size:calc({select:Font Size}px + 4px);
  1246.     }
  1247.    
  1248.     aside h2 {
  1249.         font-size:calc({select:Font Size}px - 1px);
  1250.     }
  1251.    
  1252.     .menu {
  1253.         font-size:calc(({select:Font Size}px + 9px) - 6px);
  1254.     }
  1255.    
  1256.     article.post {
  1257.         font-size:calc({select:Font Size}px - 2px);
  1258.     }
  1259.    
  1260.     article.post .th-ufo {
  1261.         margin-left:88%;
  1262.         margin-top:-6%;
  1263.         font-size:27px;
  1264.     }
  1265.    
  1266.     article.post .reblog-header img {
  1267.         width:24px;
  1268.     }
  1269.    
  1270.     article.post .portimg {
  1271.         width:24px;
  1272.         height:24px;
  1273.     }
  1274.    
  1275.     article.post span.inactive.mssg {
  1276.         padding:4px 0px 0px 10px;
  1277.     }
  1278.    
  1279.     .caption a.blog, .caption a.answerer, .caption span.blog {
  1280.         padding:5px 7px 6px 7px;
  1281.     }
  1282.    
  1283.     article.post .caption figcaption a:not(.read_more)::before, article.post .reblog-content a:not(.read_more)::before {
  1284.         font-size:calc(({select:Font Size}px - 2px) + 0.1px);
  1285.     }
  1286.    
  1287.     article.post .audioinfo {
  1288.         width:67%;
  1289.     }
  1290.    
  1291.     article.post .askerimg img {
  1292.         width:48px;
  1293.     }
  1294.    
  1295.     article.post .entireask {
  1296.         min-height:48px;
  1297.         width:84%;
  1298.         margin-left:63px;
  1299.     }
  1300.    
  1301.     ol.notes {
  1302.         font-size:calc({select:Font Size}px - 2px);
  1303.         width:75%;
  1304.     }
  1305.    
  1306.     #pagination {
  1307.         font-size:calc({select:Font Size}px - 2px);
  1308.     }
  1309.    
  1310.     .more_container, .end_container {
  1311.         font-size:calc({select:Font Size}px - 2px);
  1312.     }
  1313.    
  1314.     .scroll {
  1315.         font-size:14px;
  1316.         right:10px;
  1317.     }
  1318.    
  1319.     .scroll .th {
  1320.         font-size:18px;
  1321.     }
  1322. }
  1323.  
  1324. @media only screen and (max-height:600px) {
  1325.     section.posts {
  1326.         margin-top:50px;
  1327.     }
  1328. }
  1329.  
  1330. @media only screen and (min-width:1680px) {
  1331.     .dummy {
  1332.         visibility:hidden;
  1333.     }
  1334. }
  1335.  
  1336. </style>
  1337.  
  1338. {block:ifNotInfiniteScroll}
  1339. <script>
  1340. $(document).ready(function(){
  1341.    $('.photo-slideshow').pxuPhotoset({
  1342.        lightbox: true,
  1343.        rounded: 'corners',
  1344.        gutter: '10px',
  1345.        borderRadius: '10px',
  1346.        photoset: '.photo-slideshow',
  1347.        photoWrap: '.photo-data',
  1348.        photo: '.pxu-photo'
  1349.    });
  1350. });
  1351. </script>
  1352. {/block:ifNotInfiniteScroll}
  1353.  
  1354. {block:Permalink}
  1355.  
  1356. {block:ifInfiniteScroll}
  1357.  
  1358. <script>
  1359. $(document).ready(function(){
  1360.    $('.photo-slideshow').pxuPhotoset({
  1361.        lightbox: true,
  1362.        rounded: 'corners',
  1363.        gutter: '10px',
  1364.        borderRadius: '10px',
  1365.        photoset: '.photo-slideshow',
  1366.        photoWrap: '.photo-data',
  1367.        photo: '.pxu-photo'
  1368.    });
  1369. });
  1370. </script>
  1371.  
  1372. {/block:ifInfiniteScroll}
  1373.  
  1374. {/block:Permalink}
  1375.  
  1376. {block:IndexPage}
  1377. {block:ifInfiniteScroll}
  1378. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1379. <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
  1380. <script>
  1381. var chatName = "label";
  1382. var colourSet = [
  1383.      "{color:Menu Button Background}",
  1384.     "{color:Chat One}",
  1385.     "{color:Chat Two}"
  1386. ];
  1387. $(document).ready(function(){
  1388.     $('.photo-slideshow').pxuPhotoset({
  1389.        lightbox: true,
  1390.        rounded: 'corners',
  1391.        gutter: '10px',
  1392.        borderRadius: '10px',
  1393.        photoset: '.photo-slideshow',
  1394.        photoWrap: '.photo-data',
  1395.        photo: '.pxu-photo'
  1396.    });
  1397.    var $container = $('.posts');
  1398.    $container.infinitescroll({
  1399.        itemSelector: '.post',
  1400.        navSelector: '#navigation',
  1401.        nextSelector: '#next',
  1402.        loadingImg: '',
  1403.        loadingText: '<em></em>',
  1404.        bufferPx: 2000,
  1405.        errorCallback: function(){
  1406.         $('.end_container').show();  
  1407.         $('.more_container').hide();
  1408.     }
  1409.    },
  1410.    function( newElements ) {
  1411.        var $newElems = $( newElements );
  1412.        var $newElemsIDs = $newElems.map(function(){
  1413.             return this.id;
  1414.         }).get();
  1415.         console.log($newElems, $newElemsIDs);
  1416.         $newElems.each(function(){
  1417.             var chatDivs = $(this)[0].getElementsByClassName("chat");
  1418.             colourChat(chatDivs,chatName,colourSet);
  1419.         });
  1420.        $newElems.find('.photo-slideshow').pxuPhotoset({
  1421.            lightbox: true,
  1422.            rounded: 'corners',
  1423.            gutter: '10px',
  1424.            borderRadius: '10px',
  1425.            photoset: '.photo-slideshow',
  1426.            photoWrap: '.photo-data',
  1427.            photo: '.pxu-photo'
  1428.        });
  1429.        $newElems.find('.video iframe').each(function(){
  1430.            var scale = $(this).parents('.video').width() / 500;
  1431.            $(this).attr({
  1432.                width: Math.floor($(this).attr('width') * scale),
  1433.                height: Math.floor($(this).attr('height') * scale)
  1434.            });
  1435.        });
  1436.        $newElems.find('.video').each(function(){
  1437.           $(this).css({"padding-bottom":"40px"});
  1438.        });
  1439.        $newElems.find('.qsource').each(function(){
  1440.           $(this).text($(this).text().split('(via')[0]);
  1441.        });
  1442.        $newElems.find('.read_more').each(function(){
  1443.            $(this).text($(this).text().replace('Keep reading', 'Continue transmission'));
  1444.        });
  1445.    });
  1446.    {block:ifLoadMoreButton}
  1447.    $(window).unbind('.infscr');
  1448. $('.more').click(function(){
  1449.     $container.infinitescroll('retrieve');
  1450.     return false
  1451. });
  1452.    {/block:ifLoadMoreButton}
  1453. });
  1454.    {/block:ifInfiniteScroll}
  1455.    {/block:IndexPage}
  1456. </script>
  1457.  
  1458. </head>
  1459.  
  1460. <body>
  1461.  
  1462. <div id="container">
  1463.  
  1464. <aside data-aos="fade-up" data-aos-once="true">
  1465.  
  1466. <a href="/"><h1>{text:Title}</h1></a>
  1467. {block:Description}
  1468. <h2>Open travel log!</h2>
  1469. {/block:Description}
  1470.  
  1471. <nav class="menu">
  1472.   <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  1473.   <label class="menu-open-button" for="menu-open">
  1474.     <span class="hamburger hamburger-1"></span>
  1475.     <span class="hamburger hamburger-2"></span>
  1476.     <span class="hamburger hamburger-3"></span>
  1477.   </label>
  1478.  
  1479.   <a href="/" title="home" class="menu-item"><span class="th th-home" aria-hidden="true"></span></a>
  1480.   <a href="/ask" title="message" class="menu-item"><span class="th th-envelope" aria-hidden="true"></span></a>
  1481.  
  1482.   <a href="{text:Link 1 URL}" title="{text:Link 1 Title}" class="menu-item"><span class="th {select:Link 1 Icon}" aria-hidden="true"></span></a>
  1483.   <a href="{text:Link 2 URL}" title="{text:Link 2 Title}" class="menu-item"><span class="th {select:Link 2 Icon}" aria-hidden="true"></span></a>
  1484.   <a href="{text:Link 3 URL}" title="{text:Link 3 Title}" class="menu-item"><span class="th {select:Link 3 Icon}" aria-hidden="true"></span></a>
  1485.   <a href="{text:Link 4 URL}" title="{text:Link 4 Title}" class="menu-item"><span class="th {select:Link 4 Icon}" aria-hidden="true"></span></a>
  1486.  
  1487. </nav>
  1488.  
  1489. <svg xmlns="https://www.w3.org/2000/svg" version="1.1">
  1490.     <defs>
  1491.       <filter id="shadowed-goo">
  1492.  
  1493.           <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  1494.           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  1495.           <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
  1496.           <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
  1497.           <feOffset in="shadow" dx="1" dy="1" result="shadow" />
  1498.           <feComposite in2="shadow" in="goo" result="goo" />
  1499.           <feComposite in2="goo" in="SourceGraphic" result="mix" />
  1500.       </filter>
  1501.       <filter id="goo">
  1502.           <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
  1503.           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  1504.           <feComposite in2="goo" in="SourceGraphic" result="mix" />
  1505.       </filter>
  1506.     </defs>
  1507. </svg>
  1508.  
  1509. <div id="box">
  1510.   <div class="layer"></div>
  1511.   <div class="layer"></div>
  1512.   <div class="layer"></div>
  1513.   <div class="layer"></div>
  1514.   <div class="layer"></div>
  1515. </div>
  1516. {block:Description}
  1517. <div id="pop">
  1518.     <div id="popup">
  1519.         <div class="text">
  1520.         {Description}
  1521.         </div>
  1522.     </div>
  1523. </div>
  1524. {/block:Description}
  1525. </aside>
  1526.  
  1527. <section class="posts">
  1528.  
  1529. {block:Posts}
  1530.  
  1531. <article class="post" id="{PostID}" data-aos="fade-up" data-aos-once="true">
  1532.  
  1533. {block:IndexPage}{block:Date}<a href="{Permalink}"><span class="th th-ufo"></span></a>{/block:Date}{/block:IndexPage}
  1534.  
  1535. {block:Text}
  1536.  
  1537. {block:Title}
  1538. <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  1539. {/block:Title}
  1540.  
  1541. <div class="caption">
  1542. {block:NotReblog}
  1543.     <figcaption>
  1544.         <p>{Body}</p>
  1545.     </figcaption>
  1546. {/block:NotReblog}
  1547.  
  1548. {block:RebloggedFrom}
  1549. <div class="reblog-list">
  1550.     {block:Reblogs}
  1551.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1552.             <div class="reblog-header">
  1553.  
  1554.                 {block:IsActive}
  1555.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1556.                 <div class="portimg">
  1557.                     <img src="{PortraitURL-64}">
  1558.                 </div>
  1559.                 </a>
  1560.                 {/block:IsActive}
  1561.  
  1562.                 {block:IsDeactivated}
  1563.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1564.                 <div class="portimg">
  1565.                     <img src="{PortraitURL-64}">
  1566.                 </div>
  1567.                 </span>
  1568.                 {/block:IsDeactivated}
  1569.  
  1570.                 {block:IsActive}
  1571.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1572.                 {/block:IsActive}
  1573.  
  1574.                 {block:IsDeactivated}
  1575.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1576.                 {/block:IsDeactivated}
  1577.  
  1578.             </div>
  1579.             <div class="reblog-content">
  1580.                 {Body}
  1581.             </div>
  1582.         </div>
  1583.     {/block:Reblogs}
  1584. </div>
  1585. {/block:RebloggedFrom}
  1586. </div>
  1587.  
  1588. {/block:Text}
  1589.  
  1590. {block:Photo}
  1591.  
  1592. <div class="pic">
  1593. <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">
  1594. <img src="{PhotoURL-HighRes}" style="{block:Caption}margin-bottom:10px;{/block:Caption}">
  1595. </a>
  1596. </div>
  1597.  
  1598. {block:Caption}
  1599. <div class="caption">
  1600. {block:NotReblog}
  1601.     <figcaption>
  1602.         <p>{Caption}</p>
  1603.     </figcaption>
  1604. {/block:NotReblog}
  1605.  
  1606. {block:RebloggedFrom}
  1607. <div class="reblog-list">
  1608.     {block:Reblogs}
  1609.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1610.             <div class="reblog-header">
  1611.  
  1612.                 {block:IsActive}
  1613.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1614.                 <div class="portimg">
  1615.                     <img src="{PortraitURL-64}">
  1616.                 </div>
  1617.                 </a>
  1618.                 {/block:IsActive}
  1619.  
  1620.                 {block:IsDeactivated}
  1621.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1622.                 <div class="portimg">
  1623.                     <img src="{PortraitURL-64}">
  1624.                 </div>
  1625.                 </span>
  1626.                 {/block:IsDeactivated}
  1627.  
  1628.                 {block:IsActive}
  1629.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1630.                 {/block:IsActive}
  1631.  
  1632.                 {block:IsDeactivated}
  1633.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1634.                 {/block:IsDeactivated}
  1635.  
  1636.             </div>
  1637.             <div class="reblog-content">
  1638.                 {Body}
  1639.             </div>
  1640.         </div>
  1641.     {/block:Reblogs}
  1642. </div>
  1643. {/block:RebloggedFrom}
  1644. </div>
  1645. {/block:Caption}
  1646.  
  1647. {/block:Photo}
  1648.  
  1649. {block:Photoset}
  1650.  
  1651. <div class="img">
  1652. <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>
  1653. </div>
  1654.  
  1655. {block:Caption}
  1656. <div class="caption" style="margin-top:15px;">
  1657. {block:NotReblog}
  1658.     <figcaption>
  1659.         <p>{Caption}</p>
  1660.     </figcaption>
  1661. {/block:NotReblog}
  1662.  
  1663. {block:RebloggedFrom}
  1664. <div class="reblog-list">
  1665.     {block:Reblogs}
  1666.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1667.             <div class="reblog-header">
  1668.  
  1669.                 {block:IsActive}
  1670.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1671.                 <div class="portimg">
  1672.                     <img src="{PortraitURL-64}">
  1673.                 </div>
  1674.                 </a>
  1675.                 {/block:IsActive}
  1676.  
  1677.                 {block:IsDeactivated}
  1678.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1679.                 <div class="portimg">
  1680.                     <img src="{PortraitURL-64}">
  1681.                 </div>
  1682.                 </span>
  1683.                 {/block:IsDeactivated}
  1684.  
  1685.                 {block:IsActive}
  1686.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1687.                 {/block:IsActive}
  1688.  
  1689.                 {block:IsDeactivated}
  1690.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1691.                 {/block:IsDeactivated}
  1692.  
  1693.             </div>
  1694.             <div class="reblog-content">
  1695.                 {Body}
  1696.             </div>
  1697.         </div>
  1698.     {/block:Reblogs}
  1699. </div>
  1700. {/block:RebloggedFrom}
  1701. </div>
  1702. {/block:Caption}
  1703.  
  1704. {/block:Photoset}
  1705.  
  1706. {block:Quote}
  1707.  
  1708. <div class="caption" style="margin-bottom:20px;">
  1709. <div class="quote">“{Quote}”</div>
  1710.  
  1711. {block:Source}
  1712. <div class="qsource">&mdash;&nbsp;{Source}</div>
  1713. {/block:Source}
  1714. </div>
  1715.  
  1716. {/block:Quote}
  1717.  
  1718. {block:Link}
  1719.  
  1720. <h2 class="ltitle"><a href="{URL}" title="go to a different planet!"><span class="th th-moon-1"></span>{Name}<span class="th th-moon-1"></span></a></h2>
  1721.  
  1722. {block:Description}
  1723. <div class="caption">
  1724. {block:NotReblog}
  1725.     <figcaption>
  1726.         <p>{Description}</p>
  1727.     </figcaption>
  1728. {/block:NotReblog}
  1729.  
  1730. {block:RebloggedFrom}
  1731. <div class="reblog-list">
  1732.     {block:Reblogs}
  1733.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1734.             <div class="reblog-header">
  1735.  
  1736.                 {block:IsActive}
  1737.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1738.                 <div class="portimg">
  1739.                     <img src="{PortraitURL-64}">
  1740.                 </div>
  1741.                 </a>
  1742.                 {/block:IsActive}
  1743.  
  1744.                 {block:IsDeactivated}
  1745.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1746.                 <div class="portimg">
  1747.                     <img src="{PortraitURL-64}">
  1748.                 </div>
  1749.                 </span>
  1750.                 {/block:IsDeactivated}
  1751.  
  1752.                 {block:IsActive}
  1753.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1754.                 {/block:IsActive}
  1755.  
  1756.                 {block:IsDeactivated}
  1757.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1758.                 {/block:IsDeactivated}
  1759.  
  1760.             </div>
  1761.             <div class="reblog-content">
  1762.                 {Body}
  1763.             </div>
  1764.         </div>
  1765.     {/block:Reblogs}
  1766. </div>
  1767. {/block:RebloggedFrom}
  1768. </div>
  1769. {/block:Description}
  1770.  
  1771. {/block:Link}
  1772.  
  1773. {block:Chat}
  1774.  
  1775. {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  1776.  
  1777. <div class="caption chat">
  1778.  
  1779. <ol>
  1780. {block:Lines}
  1781. <li class="l">
  1782. {block:Label}
  1783. <span class="label">
  1784. {Label}
  1785. </span>
  1786. &nbsp;
  1787. {/block:Label}
  1788. <span class="line">
  1789. {Line}
  1790. </span>
  1791. </li>
  1792. {/block:Lines}
  1793. </ol>
  1794.  
  1795. </div>
  1796.  
  1797. {/block:Chat}
  1798.  
  1799. {block:Video}
  1800.  
  1801. <div class="video">
  1802. {Video-500}
  1803. </div>
  1804.  
  1805. {block:Caption}
  1806. <div class="caption">
  1807. {block:NotReblog}
  1808.     <figcaption>
  1809.         <p>{Caption}</p>
  1810.     </figcaption>
  1811. {/block:NotReblog}
  1812.  
  1813. {block:RebloggedFrom}
  1814. <div class="reblog-list">
  1815.     {block:Reblogs}
  1816.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1817.             <div class="reblog-header">
  1818.  
  1819.                 {block:IsActive}
  1820.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1821.                 <div class="portimg">
  1822.                     <img src="{PortraitURL-64}">
  1823.                 </div>
  1824.                 </a>
  1825.                 {/block:IsActive}
  1826.  
  1827.                 {block:IsDeactivated}
  1828.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1829.                 <div class="portimg">
  1830.                     <img src="{PortraitURL-64}">
  1831.                 </div>
  1832.                 </span>
  1833.                 {/block:IsDeactivated}
  1834.  
  1835.                 {block:IsActive}
  1836.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1837.                 {/block:IsActive}
  1838.  
  1839.                 {block:IsDeactivated}
  1840.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1841.                 {/block:IsDeactivated}
  1842.  
  1843.             </div>
  1844.             <div class="reblog-content">
  1845.                 {Body}
  1846.             </div>
  1847.         </div>
  1848.     {/block:Reblogs}
  1849. </div>
  1850. {/block:RebloggedFrom}
  1851. </div>
  1852. {/block:Caption}
  1853.  
  1854. {/block:Video}
  1855.  
  1856. {block:Audio}
  1857.  
  1858. <div class="audio">
  1859. <div class="player">
  1860. <div class="audioplayer">{AudioPlayerWhite}</div></div><br>
  1861. <div class="art">
  1862. {block:AlbumArt}
  1863. <img src="{AlbumArtURL}">
  1864. {/block:AlbumArt}
  1865. </div>
  1866. <div class="audioinfo">
  1867. <div class="inf">
  1868. {block:TrackName}
  1869. <div class="track">
  1870. <b>Track: </b>{TrackName}
  1871. </div>
  1872. {/block:TrackName}
  1873. {block:Artist}
  1874. <div class="artist">
  1875. <b>Artist: </b>{Artist}
  1876. </div>
  1877. {/block:Artist}
  1878. {block:PlayCount}
  1879. <div class="plays">
  1880. {PlayCount} aliens listened to this
  1881. </div>
  1882. {/block:PlayCount}
  1883. </div>
  1884. </div>
  1885. </div>
  1886.  
  1887. {block:Caption}
  1888. <div class="caption" style="margin-top:130px;">
  1889. {block:NotReblog}
  1890.     <figcaption>
  1891.         <p>{Caption}</p>
  1892.     </figcaption>
  1893. {/block:NotReblog}
  1894.  
  1895. {block:RebloggedFrom}
  1896. <div class="reblog-list">
  1897.     {block:Reblogs}
  1898.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1899.             <div class="reblog-header">
  1900.  
  1901.                 {block:IsActive}
  1902.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1903.                 <div class="portimg">
  1904.                     <img src="{PortraitURL-64}">
  1905.                 </div>
  1906.                 </a>
  1907.                 {/block:IsActive}
  1908.  
  1909.                 {block:IsDeactivated}
  1910.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1911.                 <div class="portimg">
  1912.                     <img src="{PortraitURL-64}">
  1913.                 </div>
  1914.                 </span>
  1915.                 {/block:IsDeactivated}
  1916.  
  1917.                 {block:IsActive}
  1918.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1919.                 {/block:IsActive}
  1920.  
  1921.                 {block:IsDeactivated}
  1922.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  1923.                 {/block:IsDeactivated}
  1924.  
  1925.             </div>
  1926.             <div class="reblog-content">
  1927.                 {Body}
  1928.             </div>
  1929.         </div>
  1930.     {/block:Reblogs}
  1931. </div>
  1932. {/block:RebloggedFrom}
  1933. </div>
  1934. {/block:Caption}
  1935.  
  1936. {/block:Audio}
  1937.  
  1938. {block:Answer}
  1939.  
  1940. <div class="askerimg">
  1941. <img src="{AskerPortraitURL-64}">
  1942. </div>
  1943. <div class="entireask">
  1944. <div class="asker">
  1945. {Asker} said
  1946. </div>
  1947. <div class="question">
  1948. {Question}
  1949. </div>
  1950. </div>
  1951.  
  1952. <div class="caption" style="margin-top:15px;">
  1953. {block:NotReblog}
  1954.     <figcaption>
  1955.         <p>{Replies}</p>
  1956.     </figcaption>
  1957. {/block:NotReblog}
  1958.  
  1959. {block:RebloggedFrom}
  1960. {block:Answerer}
  1961. <div class="reblog-header">
  1962.   <a href="{ReblogRootURL} blog">
  1963.     <div class="portimg">
  1964.         <img src="{AnswererPortraitURL-64}" />
  1965.     </div>
  1966.     <span class="answerer">{Answerer}</span>
  1967.   </a>
  1968. </div>
  1969. <div class="reblog-content">
  1970.   {Answer}
  1971. </div>
  1972. {/block:Answerer}
  1973. <div class="reblog-list">
  1974.     {block:Reblogs}
  1975.         <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1976.             <div class="reblog-header">
  1977.  
  1978.                 {block:IsActive}
  1979.                 <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1980.                 <div class="portimg">
  1981.                     <img src="{PortraitURL-64}">
  1982.                 </div>
  1983.                 </a>
  1984.                 {/block:IsActive}
  1985.  
  1986.                 {block:IsDeactivated}
  1987.                 <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1988.                 <div class="portimg">
  1989.                     <img src="{PortraitURL-64}">
  1990.                 </div>
  1991.                 </span>
  1992.                 {/block:IsDeactivated}
  1993.  
  1994.                 {block:IsActive}
  1995.                     <a target="_blank" href="{Permalink}" class="blog">{Username}</a>
  1996.                 {/block:IsActive}
  1997.  
  1998.                 {block:IsDeactivated}
  1999.                     <span class="inactive blog">{Username}</span><span class="inactive mssg">deactivated</span>
  2000.                 {/block:IsDeactivated}
  2001.  
  2002.             </div>
  2003.             <div class="reblog-content">
  2004.                 {Body}
  2005.             </div>
  2006.         </div>
  2007.     {/block:Reblogs}
  2008. </div>
  2009. {/block:RebloggedFrom}
  2010. </div>
  2011.  
  2012. {/block:Answer}
  2013.  
  2014. {block:Date}
  2015.  
  2016. <div class="postinfo">
  2017.  
  2018. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}" title="Posted {TimeAgo}"><span class="th th-stars"></span>{ShortMonth} {DayOfMonthWithZero}{DayOfMonthSuffix} '{ShortYear}</a>
  2019.  
  2020. <a href="{Permalink}" title="{NoteCount} transmissions made"><span class="th th-satellite-dish"></span>{NoteCount}</a>
  2021.  
  2022. <a href="{ReblogURL}" title="Send this back to earth"><span class="th th-earth"></span>Broadcast</a>
  2023.  
  2024. </div>
  2025.  
  2026. {/block:Date}
  2027.  
  2028. {block:RebloggedFrom}
  2029. <!-- <a href="{ReblogParentURL}" title="via: {ReblogParentName}"><img style="margin-bottom:-2px;" src="{ReblogParentPortraitURL-16}"></a> -->
  2030. {/block:RebloggedFrom}
  2031.  
  2032. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  2033.  
  2034. {block:HasTags}<div class="tags"><span class="ttitle">Filed under:</span>{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  2035.  
  2036. </article>
  2037.  
  2038. {/block:Posts}
  2039.  
  2040. <div data-aos="fade-up" data-aos-once="true">{PostNotes}</div>
  2041.  
  2042. {block:ifNotInfiniteScroll}
  2043.  
  2044. {block:Pagination}
  2045.  
  2046. <div id="pagination">
  2047.  
  2048. {block:PreviousPage}
  2049.  
  2050. <div class="pgb" style="{block:NextPage}margin-right:25px;{/block:NextPage}"><a href="{PreviousPage}">go back</a></div>
  2051.  
  2052. {/block:PreviousPage}
  2053.  
  2054. {block:NextPage}
  2055.  
  2056. <div class="pgb"><a href="{NextPage}">go forth</a></div>
  2057.  
  2058. {/block:NextPage}
  2059.  
  2060. </div>
  2061.  
  2062. {/block:Pagination}
  2063.  
  2064. {/block:ifNotInfiniteScroll}
  2065.  
  2066. {block:IndexPage}
  2067. {block:ifInfiniteScroll}
  2068. <div id="navigation">
  2069. {block:Pagination}
  2070.     {block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  2071.     {block:NextPage}<a href="{NextPage}" id="next">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  2072. {/block:Pagination}
  2073. </div>
  2074. {/block:ifInfiniteScroll}
  2075.  
  2076. </section>
  2077.  
  2078. {block:IndexPage}
  2079. {block:ifInfiniteScroll}
  2080.  
  2081. {block:ifLoadMoreButton}
  2082. {block:Pagination}
  2083. <div class="more_container">
  2084. <a href="#" class="more">View older messages</a>
  2085. </div>
  2086. {/block:Pagination}
  2087. {/block:ifLoadMoreButton}
  2088.  
  2089. <div class="end_container">
  2090.     <div class="end">End of transmissions. Refresh for new messages.</div>
  2091. </div>
  2092. {/block:ifInfiniteScroll}
  2093. {/block:IndexPage}
  2094.  
  2095. </div>
  2096.  
  2097. <span class="scroll"><span class="th th-sputnik"></span><br>fly to the top</span>
  2098.  
  2099. <!-- CREDIT. DO NOT TOUCH -->
  2100.  
  2101. <a href="https://cactusthemes.tumblr.com" title="by cactusthemes">
  2102. <div id="credz" class="fade-in two">
  2103. </div>
  2104. </a>
  2105.  
  2106. <div class="dummy"></div>
  2107.  
  2108. </body>
  2109.  
  2110. <script type="text/javascript">
  2111. var chatDivs = document.getElementsByClassName("chat"); // your chat posts container's class name
  2112. var chatName = "label"; // your chat labels' class name
  2113.  
  2114. // array of colours to loop through, add as many as you'd like in the below format
  2115. var colourSet = [
  2116.   "{color:Menu Button Background}",
  2117.   "{color:Chat One}",
  2118.   "{color:Chat Two}"
  2119. ];
  2120.  
  2121. colourChat(chatDivs,chatName,colourSet); // call the function
  2122.  
  2123. function colourChat(chatDivs,chatLabel,colours) {
  2124.   for (var i = 0; i < chatDivs.length; i++) {
  2125.    // loop through all chat posts
  2126.    var chatNames = chatDivs[i].getElementsByClassName(chatLabel); // get all the elements to inspect
  2127.    var textCheck = chatNames[0].innerHTML; // save first name in chat post
  2128.  
  2129.    var allNames = []; // 1d array
  2130.    allNames.push(new Array(chatNames[0])); // make the array 2d
  2131.  
  2132.    for (var j = 0; j < chatNames.length; j++) {
  2133.      // loop through all chat name elements
  2134.      var currentText = chatNames[j].innerHTML; // save current chat name
  2135.      var matchFound = false; // set as false bc not matched yet
  2136.  
  2137.      // check all the current words for matches
  2138.      for (var k = 0; k < allNames.length; k++) {
  2139.        // loop through the current array of words
  2140.        textCheck = allNames[k][0].innerHTML; // the text to check
  2141.        if (currentText == textCheck) {
  2142.          // if a match is found
  2143.          allNames[k].push(chatNames[j]); // add element
  2144.          matchFound = true; // match found
  2145.          break; // exit loop
  2146.        } //end if text matches
  2147.      } //end chatname checker loop
  2148.  
  2149.      if (matchFound === false)
  2150.        // if the current name hasn't been recorded yet, otherwise matchFound will return true
  2151.        allNames.push(new Array(chatNames[j])); // make a new array with the current element
  2152.    } //end chat name element loop
  2154.    var colourCounter = Math.floor(Math.random() * colours.length); // randomize the starting colour
  2156.    for (var m = 0; m < allNames.length; m++) {
  2157.      // loop through all the words
  2158.      for (var n = 0; n < allNames[m].length; n++)
  2159.        allNames[m][n].style.background = colours[colourCounter]; // colour the element
  2160.      if (++colourCounter == colours.length)
  2161.        // if there are no more colours to use
  2162.        colourCounter = 0; // go back to the first colour
  2163.    } // end word-element-array loop
  2164.  } // end chat div loop
  2165. } // end function
  2167. /* thanks to bev's math prof for teaching me about matrices which i used here */
  2168. </script>
  2169.  
  2170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!