Advertisement
glenthemes

Theme [26]: Nebulae

Jan 29th, 2018 (edited)
18,037
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 62.85 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. Theme [26]: Nebulae
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/01/30
  6. Last updated: 2023/07/29
  7.  
  8. What's new:
  9. ✱ NPF audio post support
  10.  
  11. TERMS OF USE:
  12. 1) Do not remove the theme credit.
  13. 2) Do not repost/redistribute my themes.
  14. 3) Do not take parts of the code and use it as your own.
  15. 4) Do not use my themes as a base code.
  16. 5) Do not mix my themes together.
  17.  
  18. To change the updates icons:
  19. 1. Go to this site: saturnicons-list.glitch.me
  20. 2. Pick an icon you want to use and copy its name.
  21. 3. Paste it in any of these text fields:
  22. - "star 1 box icon"
  23. - "star 2 box icon"
  24. - "star 3 box icon"
  25. ------------------------------------------------------------------------>
  26.  
  27. <!DOCTYPE html>
  28. <html lang="en">
  29.  
  30. <head>
  31.  
  32. <title>{Title}</title>
  33.  
  34. <link rel="shortcut icon" href="{Favicon}">
  35.  
  36. <!--------------------JAVASCRIPTS-------------------->
  37. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  38. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("a[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:120,
  45. tip_fade_speed:120,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <script>
  53. $(document).ready(function() {
  54. $('iframe.tumblr_audio_player').load( function() {
  55. $('iframe.tumblr_audio_player').contents().find("head")
  56. .append($("<style type='text/css'> .audio-player{background:{color:permalink icon background} !important; padding:5px 10px 5px 0px !important;} .play-pause{color:{color:permalink icon} !important; font-size:15px!important; padding:0 9.5px!important} </style>"));
  57. });
  58. });
  59. </script>
  60.  
  61. <link href="//static.tumblr.com/2pnwama/mtXp3g4vy/style.css" rel="stylesheet" type="text/css"/>
  62. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  64.  
  65.  
  66. <script>
  67. $(document).ready(function(){
  68. $('.photo-slideshow').pxuPhotoset({
  69. lightbox: true,
  70. rounded: false,
  71. gutter: '{select:photos spacing}',
  72. borderRadius: '0px',
  73. photoset: '.photo-slideshow',
  74. photoWrap: '.photo-data',
  75. photo: '.pxu-photo'
  76. });
  77. });
  78. </script>
  79.  
  80. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  81.  
  82. {block:ifsmoothscrolling}
  83. <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  84. {/block:ifsmoothscrolling}
  85.  
  86. <link href="//fonts.googleapis.com/css?family=Karla|Averia+Sans+Libre|Quicksand" rel="stylesheet">
  87.  
  88. <script src="//static.tumblr.com/snld4jp/rTori7q11/gtresizing.js"></script>
  89.  
  90. <!-- "saturnicons" icon font by suiomi -->
  91. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  92.  
  93. {block:ifheader}
  94. {block:ifLink1}
  95. <script>
  96. $(function(){
  97. var iamcrying = $('#lilac').position().top+0.25;
  98. $('#postbox').scroll(function(){
  99. if( $('#postbox').scrollTop() >= iamcrying ) {
  100. $('#lilac').addClass("tea");
  101. } else {
  102. $('#lilac').removeClass("tea");
  103. }
  104. });
  105. });
  106. </script>
  107. {/block:ifLink1}
  108. {/block:ifheader}
  109.  
  110. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  111.  
  112. <script src="//npf-images-v3.github.io/script.js"></script>
  113. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  114. <style tmblr-npf>
  115. :root {
  116. --NPF-Caption-Spacing:1em;
  117. --NPF-Image-Spacing:4px;
  118. }
  119.  
  120. a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
  121. padding-bottom:0!important;
  122. border-bottom:none!important;
  123. }
  124.  
  125. .spotify_audio_player {
  126. height:80px!important;
  127. }
  128. </style>
  129.  
  130. <script src="//glen-themes.gitlab.io/thms/26/ochako.js"></script>
  131.  
  132. <script>
  133. // minimal soundcloud player @ shythemes.tumblr
  134. // shythemes.tumblr.com/post/114792480648
  135. $(document).ready(function(){
  136. var soundcloud_btn = '{color:link}';
  137. $('.soundcloud_audio_player').each(function(){
  138. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
  139. });
  140. });
  141. </script>
  142.  
  143. <!-- unblue polls -->
  144. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  145. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  146. <style unblue-polls>
  147. .poll-post {
  148. --Poll-Question-Font-Size: {select:font size};
  149.  
  150. --Poll-Option-Background-Color: transparent;
  151. --Poll-Option-Corner-Rounding: 5px;
  152. --Poll-Option-Border-Size: 1px;
  153. --Poll-Option-Border-Color: rgba({RGBcolor:text},0.15);
  154. --Poll-Option-Padding: 11px;
  155. --Poll-Option-Font-Size: {select:font size};
  156. --Poll-Option-Spacing: 10px;
  157. --Poll-Option-Text-Color: {color:text};
  158.  
  159. --Poll-Option-HOVER-Border-Color: rgba({RGBcolor:text},0.15);
  160. --Poll-Option-HOVER-Background-Color: transparent;
  161. --Poll-Option-HOVER-Text-Color: {color:link};
  162. --Poll-Option-HOVER-Speed: 0.4s;
  163. }
  164.  
  165. .poll-see-results {
  166. padding-bottom:0!important;
  167. border-bottom:none!important;
  168. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  169. text-transform:uppercase;
  170. letter-spacing:0.5px;
  171. }
  172. </style>
  173.  
  174. <!-- npf audio player -->
  175. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  176. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  177. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  178. <script>
  179. tumblr_npf_audio({
  180. emptyTitleText: "Untitled track",
  181. emptyArtistText: "Untitled artist",
  182. emptyAlbumText: "Untitled album",
  183.  
  184. titleLabel: "Track:",
  185. artistLabel: "Artist:",
  186. albumLabel: "Album:"
  187. });
  188. </script>
  189. <style edit-npf-audio-player>
  190. .npf-audio-wrapper {
  191. --NPF-Audio-Buttons-Size: calc({select:font size} - 1px);
  192. --NPF-Audio-Buttons-Color: {color:permalink icon};
  193. --NPF-Audio-Buttons-Padding: 9px;
  194. --NPF-Audio-Buttons-Spacing: calc((var(--NPF-Audio-Buttons-Padding) * 2) + 10px);
  195. --NPF-Audio-Image-Spacing: 0.9rem;
  196. }
  197.  
  198. .npf-audio-background {
  199. margin-left:calc(18px + var(--NPF-Audio-Buttons-Padding));
  200. }
  201.  
  202. .npf-audio-play, .npf-audio-pause {
  203. position:relative;
  204. z-index:0;
  205. }
  206.  
  207. .npf-audio-play:after, .npf-audio-pause:after {
  208. content:"";
  209. position:absolute;
  210. top:0;left:0;
  211. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  212. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  213. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  214. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  215. background:{color:permalink icon background};
  216. border-radius:100%;
  217. z-index:-1;
  218. }
  219.  
  220. .npf-audio-play svg { margin-left:1px; }
  221. .npf-audio-pause svg { margin-left:0; }
  222.  
  223. .npf-audio-title-label,
  224. .npf-audio-artist-label,
  225. .npf-audio-album-label {
  226. color:{color:bold};
  227. text-transform:uppercase;
  228. }
  229.  
  230. figcaption.audio-caption,
  231. figcaption.audio-caption ~ audio[controls],
  232. figcaption.audio-caption img, .npf-audio-image {
  233. display:none;
  234. }
  235. </style>
  236.  
  237. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  238. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  239.  
  240. <!--------------------IMAGES-------------------->
  241.  
  242. <meta name="image:background image" content="//rhizo.gitlab.io/random/images/isewwsp.png"/>
  243. <meta name="image:sidebar icon" content="//68.media.tumblr.com/2bb735f0ca03c5997ffd6a8204252182/tumblr_ooo6td425a1s4s960o8_r1_250.png"/>
  244. <meta name="image:header image" content="//78.media.tumblr.com/2357a40238917a305fbbb74600d60643/tumblr_p3ailxOttO1qg2f5co4_r1_1280.png"/>
  245. <meta name="image:custom links bar background" content="//78.media.tumblr.com/b082898e3637cce6bad6f87f402557b8/tumblr_p3ailxOttO1qg2f5co5_r1_250.png"/>
  246.  
  247. <!--------------------COLORS-------------------->
  248.  
  249. <meta name="color:background" content="#fdfdfd"/>
  250.  
  251. <meta name="color:desc bg" content="#fff">
  252. <meta name="color:desc border" content="#fff">
  253. <meta name="color:desc text" content="#999">
  254.  
  255. <meta name="color:sidebar icon background" content="#d1b4ab"/>
  256. <meta name="color:sidebar links background" content="#d1b4ab"/>
  257. <meta name="color:sidebar links" content="#fff"/>
  258. <meta name="color:sidebar links background hover" content="#fff"/>
  259. <meta name="color:sidebar links hover" content="#d1b4ab"/>
  260. <meta name="color:sidebar title color" content="#d1b4ab"/>
  261. <meta name="color:sidebar subtitle color" content="#888"/>
  262.  
  263. <meta name="color:header background" content="#f9f8f9"/>
  264.  
  265. <meta name="color:custom links background" content="#fff"/>
  266. <meta name="color:custom links" content="#777"/>
  267. <meta name="color:custom links background hover" content="#d1b4ab"/>
  268. <meta name="color:custom links hover" content="#fff"/>
  269.  
  270. <meta name="color:post container background" content="#fcfcfc"/>
  271. <meta name="color:post container border" content="#f3f3f3"/>
  272. <meta name="color:post" content="#fff"/>
  273. <meta name="color:post border" content="#f9f9f9"/>
  274. <meta name="color:text" content="#888"/>
  275. <meta name="color:bold" content="#ecaca1">
  276. <meta name="color:Italic" content="#888">
  277. <meta name="color:Link" content="#f57d7d">
  278. <meta name="color:Link Hover" content="#222">
  279.  
  280. <meta name="color:permalink background" content="#fbfbfb">
  281. <meta name="color:permalink text" content="#666">
  282. <meta name="color:permalink icon background" content="#d1b4ab">
  283. <meta name="color:permalink icon" content="#fff">
  284.  
  285. <meta name="color:post tags background" content="#fbfbfb">
  286. <meta name="color:post tags" content="#928d88">
  287. <meta name="color:post tags background hover" content="#d1b4ab">
  288. <meta name="color:post tags hover" content="#fff">
  289.  
  290. <meta name="color:star 1" content="#f18b80">
  291. <meta name="color:star 1 hover" content="#f6d9d3">
  292. <meta name="color:star 2" content="#d88682">
  293. <meta name="color:star 2 hover" content="#f6d9d3">
  294. <meta name="color:star 3" content="#d39587">
  295. <meta name="color:star 3 hover" content="#f6d9d3">
  296.  
  297. <meta name="color:scrollbar" content="#b8b8b8"/>
  298. <meta name="color:scrollbar background" content="#fff"/>
  299.  
  300. <meta name="color:highlight" content="#fafafa"/>
  301. <meta name="color:highlighted text" content="#777"/>
  302.  
  303. <!-----------------DROPDOWN OPTS----------------->
  304. <meta name="select:font size" title="12px" content="12px">
  305. <meta name="select:font size" title="11px" content="11px">
  306. <meta name="select:font size" title="13px" content="13px">
  307. <meta name="select:font size" title="14px" content="14px">
  308. <meta name="select:font size" title="15px" content="15px">
  309. <meta name="select:font size" title="16px" content="16px">
  310.  
  311. <meta name="select:sidebar width" title="360px" content="360px">
  312. <meta name="select:sidebar width" title="200px" content="200px">
  313. <meta name="select:sidebar width" title="240px" content="240px">
  314. <meta name="select:sidebar width" title="280px" content="280px">
  315. <meta name="select:sidebar width" title="320px" content="320px">
  316. <meta name="select:sidebar width" title="400px" content="400px">
  317. <meta name="select:sidebar width" title="360px" content="360px">
  318. <meta name="select:sidebar width" title="400px" content="400px">
  319. <meta name="select:sidebar width" title="440px" content="440px">
  320.  
  321. <meta name="select:desc border transparency" title="60%" content="0.4">
  322. <meta name="select:desc border transparency" title="0% (solid)" content="1">
  323. <meta name="select:desc border transparency" title="10%" content="0.9">
  324. <meta name="select:desc border transparency" title="20%" content="0.8">
  325. <meta name="select:desc border transparency" title="30%" content="0.7">
  326. <meta name="select:desc border transparency" title="40%" content="0.6">
  327. <meta name="select:desc border transparency" title="50%" content="0.5">
  328. <meta name="select:desc border transparency" title="70%" content="0.3">
  329. <meta name="select:desc border transparency" title="80%" content="0.2">
  330. <meta name="select:desc border transparency" title="90%" content="0.1">
  331. <meta name="select:desc border transparency" title="100% (no color)" content="0">
  332.  
  333. <meta name="select:sidebar right gap" title="65px" content="65px">
  334. <meta name="select:sidebar right gap" title="20px" content="20px">
  335. <meta name="select:sidebar right gap" title="25px" content="25px">
  336. <meta name="select:sidebar right gap" title="30px" content="30px">
  337. <meta name="select:sidebar right gap" title="35px" content="35px">
  338. <meta name="select:sidebar right gap" title="40px" content="40px">
  339. <meta name="select:sidebar right gap" title="45px" content="45px">
  340. <meta name="select:sidebar right gap" title="50px" content="50px">
  341. <meta name="select:sidebar right gap" title="55px" content="55px">
  342. <meta name="select:sidebar right gap" title="60px" content="60px">
  343. <meta name="select:sidebar right gap" title="70px" content="70px">
  344. <meta name="select:sidebar right gap" title="75px" content="75px">
  345. <meta name="select:sidebar right gap" title="80px" content="80px">
  346. <meta name="select:sidebar right gap" title="85px" content="85px">
  347. <meta name="select:sidebar right gap" title="90px" content="90px">
  348. <meta name="select:sidebar right gap" title="95px" content="95px">
  349. <meta name="select:sidebar right gap" title="100px" content="100px">
  350. <meta name="select:sidebar right gap" title="105px" content="105px">
  351. <meta name="select:sidebar right gap" title="110px" content="110px">
  352.  
  353. <meta name="select:post width" title="450px" content="450px">
  354. <meta name="select:post width" title="300px" content="300px">
  355. <meta name="select:post width" title="350px" content="375px">
  356. <meta name="select:post width" title="400px" content="400px">
  357. <meta name="select:post width" title="500px" content="500px">
  358. <meta name="select:post width" title="540px" content="540px">
  359. <meta name="select:post width" title="600px" content="600px">
  360.  
  361. <meta name="select:post padding" title="15px" content="15px">
  362. <meta name="select:post padding" title="10px" content="10px">
  363. <meta name="select:post padding" title="20px" content="20px">
  364. <meta name="select:post padding" title="25px" content="25px">
  365.  
  366. <meta name="select:photos spacing" title="4px" content="4px">
  367. <meta name="select:photos spacing" title="0px" content="0px">
  368. <meta name="select:photos spacing" title="2px" content="2px">
  369. <meta name="select:photos spacing" title="6px" content="6px">
  370. <meta name="select:photos spacing" title="8px" content="8px">
  371. <meta name="select:photos spacing" title="10px" content="10px">
  372.  
  373. <meta name="select:permalink padding" title="15px" content="15px">
  374. <meta name="select:permalink padding" title="10px" content="10px">
  375. <meta name="select:permalink padding" title="20px" content="20px">
  376. <meta name="select:permalink padding" title="25px" content="25px">
  377.  
  378. <meta name="select:post spacing" title="45px" content="45px">
  379. <meta name="select:post spacing" title="20px" content="20px">
  380. <meta name="select:post spacing" title="25px" content="25px">
  381. <meta name="select:post spacing" title="30px" content="30px">
  382. <meta name="select:post spacing" title="35px" content="35px">
  383. <meta name="select:post spacing" title="40px" content="40px">
  384. <meta name="select:post spacing" title="50px" content="50px">
  385. <meta name="select:post spacing" title="55px" content="55px">
  386. <meta name="select:post spacing" title="60px" content="60px">
  387.  
  388. <meta name="select:post side gaps" title="45px" content="45px">
  389. <meta name="select:post side gaps" title="10px" content="10px">
  390. <meta name="select:post side gaps" title="15px" content="15px">
  391. <meta name="select:post side gaps" title="20px" content="20px">
  392. <meta name="select:post side gaps" title="25px" content="25px">
  393. <meta name="select:post side gaps" title="30px" content="30px">
  394. <meta name="select:post side gaps" title="35px" content="35px">
  395. <meta name="select:post side gaps" title="40px" content="40px">
  396. <meta name="select:post side gaps" title="50px" content="50px">
  397. <meta name="select:post side gaps" title="55px" content="55px">
  398. <meta name="select:post side gaps" title="60px" content="60px">
  399. <meta name="select:post side gaps" title="65px" content="65px">
  400. <meta name="select:post side gaps" title="70px" content="70px">
  401. <meta name="select:post side gaps" title="75px" content="75px">
  402. <meta name="select:post side gaps" title="80px" content="80px">
  403.  
  404. <meta name="select:updates boxes width" title="200px" content="200px">
  405. <meta name="select:updates boxes width" title="150px" content="150px">
  406. <meta name="select:updates boxes width" title="175px" content="175px">
  407. <meta name="select:updates boxes width" title="225px" content="225px">
  408. <meta name="select:updates boxes width" title="250px" content="250px">
  409. <meta name="select:updates boxes width" title="275px" content="275px">
  410. <meta name="select:updates boxes width" title="300px" content="300px">
  411. <meta name="select:updates boxes width" title="325px" content="325px">
  412. <meta name="select:updates boxes width" title="350px" content="350px">
  413.  
  414. <!------------------TOGGLE OPTS------------------>
  415. <meta name="if:header" content="1" />
  416.  
  417. <meta name="if:post container border" content="1" />
  418. <meta name="if:post borders" content="1" />
  419.  
  420. <meta name="if:photo fade" content="0" />
  421. <meta name="if:monochrome posts" content="0" />
  422.  
  423. <meta name="if:updates boxes" content="1" />
  424.  
  425. <meta name="if:smooth scrolling" content="0" />
  426. <meta name="if:dark tumblr controls" content="0" />
  427.  
  428. <!----------------TEXT FIELDS---------------->
  429.  
  430. <meta name="text:sidebar title" content="a title">
  431. <meta name="text:sidebar subtitle" content="a subtitle">
  432.  
  433. <meta name="text:&#917536;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
  434.  
  435. <!--"how to change icons"-->
  436. <meta name="text:&#x1F496;&#x2002;&#x29C;&#x1D0F;&#x1D21;&#x20;&#x1D1B;&#x1D0F;&#x20;&#x1D04;&#x29C;&#x1D00;&#x274;&#x262;&#x1D07;&#x20;&#x26A;&#x1D04;&#x1D0F;&#x274;&#x73;" content="glenthemes.tumblr.com/nebulae">
  437. <meta name="text:star 1 title" content="a title here">
  438. <meta name="text:star 1 box icon" content="leaf-2-o">
  439. <meta name="text:star 1 box content" content="some text here">
  440. <meta name="text:star 2 title" content="a title here">
  441. <meta name="text:star 2 box icon" content="constellation-o">
  442. <meta name="text:star 2 box content" content="some text here">
  443. <meta name="text:star 3 title" content="a title here">
  444. <meta name="text:star 3 box icon" content="graph-3-o">
  445. <meta name="text:star 3 box content" content="some text here">
  446.  
  447. <meta name="text:&#917536;&#x200B;&#x200B;" content="&#x263D;&#x2727;&#xA8;&#x2A;&#x3003;&#x2E;&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;&#x2E;&#x3003;&#x2A;&#xA8;&#x2727;&#x263E;&NewLine;">
  448.  
  449. <meta name="text:Link 1" content="">
  450. <meta name="text:Link 1 URL" content="">
  451. <meta name="text:Link 2" content="">
  452. <meta name="text:Link 2 URL" content="">
  453. <meta name="text:Link 3" content="">
  454. <meta name="text:Link 3 URL" content="">
  455. <meta name="text:Link 4" content="">
  456. <meta name="text:Link 4 URL" content="">
  457. <meta name="text:Link 5" content="">
  458. <meta name="text:Link 5 URL" content="">
  459. <meta name="text:Link 6" content="">
  460. <meta name="text:Link 6 URL" content="">
  461. <meta name="text:Link 7" content="">
  462. <meta name="text:Link 7 URL" content="">
  463. <meta name="text:Link 8" content="">
  464. <meta name="text:Link 8 URL" content="">
  465. <meta name="text:Link 9" content="">
  466. <meta name="text:Link 9 URL" content="">
  467. <meta name="text:Link 10" content="">
  468. <meta name="text:Link 10 URL" content="">
  469.  
  470. <!-------------------------------------------------------------------->
  471.  
  472. <style type="text/css">
  473.  
  474. /*--------------------TOOLTIPS--------------------*/
  475. #s-m-t-tooltip {
  476. padding: 4px 9px;
  477. margin: 26px 9px 0px 15px;
  478. background-color: {color:permalink icon background};
  479. border-radius:5px;
  480. font-family: karla;
  481. font-size: calc({select:font size} - 3px);
  482. letter-spacing: 1px;
  483. text-transform: uppercase;
  484. color: {color:permalink icon};
  485. z-index:99999999999999999999999999998!important;
  486. max-width: calc({select:post width} * 1.25);
  487. -webkit-transition: all 0.3s ease-in-out;
  488. -moz-transition: all 0.3s ease-in-out;
  489. -o-transition: all 0.3s ease-in-out;
  490. }
  491.  
  492. /*--------------------TUMBLR CONTROLS--------------------*/
  493. iframe#tumblr_controls, .iframe-controls--desktop {
  494. top:3px!important;
  495. right:3px!important;
  496. position:fixed!important;
  497. z-index:999999!important;
  498.  
  499. {block:ifdarktumblrcontrols}
  500. filter:invert(100%) hue-rotate(180deg);
  501. -webkit-filter:invert(100%) hue-rotate(180deg);
  502. {/block:ifdarktumblrcontrols}
  503.  
  504. transform-origin:100% 0;
  505. z-index:999999!important;
  506. }
  507.  
  508. /*--------------------SCROLLBAR--------------------*/
  509. ::-webkit-scrollbar {
  510. width: 9px;
  511. height: 9px;
  512. }
  513.  
  514. ::-webkit-scrollbar-thumb {
  515. background-color:{color:scrollbar};
  516. border:4px solid {color:scrollbar background};
  517. }
  518.  
  519. ::-webkit-scrollbar-track {
  520. background-color: {color:scrollbar background};
  521. }
  522.  
  523. /*--------------------SCROLLBAR--------------------*/
  524. ::selection {
  525. background: {color:highlight};
  526. color:{color:highlighted text};
  527. }
  528.  
  529. ::-moz-selection {
  530. background: {color:highlight};
  531. color:{color:highlighted text};
  532. }
  533.  
  534. /*--------------------BASICS--------------------*/
  535. body {
  536. background:{color:background} url({image:background image});
  537. background-attachment:fixed;
  538. background-repeat:repeat;
  539. overflow:hidden;
  540. color:{color:text};
  541. cursor:normal;
  542. font-family:karla;
  543. line-height:1.6em;
  544. font-size:{select:font size};
  545. text-align:left;
  546. }
  547.  
  548. blockquote {
  549. padding-left:10px;
  550. margin-left:5px;
  551. border-left:1px solid;
  552. border-color:rgba({RGBcolor:text},0.7);
  553. margin:10px;
  554. }
  555.  
  556. b, strong {font-weight:bold;color: {color:Bold};}
  557.  
  558. .posts a, .desc a, .parsley a {
  559. color:{color:link};
  560. padding-bottom:1px;
  561. border-bottom:0.5px solid rgba({RGBcolor:link},0.4);
  562. }
  563.  
  564. .posts a:hover, .desc a:hover, .parsley a:hover {
  565. color:{color:link hover};
  566. border-bottom:0.5px solid rgba({RGBcolor:link hover},0.4);
  567. }
  568.  
  569. .non a {
  570. padding-bottom:0px!important;
  571. border-bottom:0px solid transparent!important;
  572. }
  573.  
  574. .nonn a {
  575. border-bottom:0px solid transparent!important;
  576. }
  577.  
  578. i, em, .em {color: {color:Italic};}
  579.  
  580. pre, code {
  581. white-space:pre-wrap;
  582. display:block;
  583. }
  584.  
  585. hr {
  586. width:70%;
  587. border-width:0px;
  588. height:1px;
  589. background-color:rgba({RGBcolor:text},0.3);
  590. }
  591.  
  592. /*--------------------LINKS--------------------*/
  593. a {
  594. color:{color:link};
  595. text-decoration:none;
  596. cursor:normal;
  597. text-decoration:none;
  598. -webkit-transition: all 0.4s ease-in-out;
  599. -moz-transition: all 0.4s ease-in-out;
  600. -o-transition: all 0.4s ease-in-out;
  601. }
  602.  
  603. a:hover {text-decoration:none;}
  604.  
  605. img {opacity:1;text-decoration:none;}
  606.  
  607. h1 {
  608. font-size:calc({select:font size} + 1px);
  609. font-family:quicksand;
  610. text-transform: uppercase;
  611. letter-spacing: 2px;
  612. color:{color:text};
  613. text-align:center;
  614. }
  615.  
  616. .pp p:first-child {margin-top:0px;}
  617.  
  618. /*--------------------HOSHI--------------------*/
  619. #star-cont {
  620. position:fixed;
  621. bottom:0;margin-bottom:45px;
  622. left:0;margin-left:-40px;
  623. font-size:12px;
  624. transform:scale(1.1);
  625. }
  626.  
  627. /* stars are made of pure css! if you're here to see how I did it, I followed 2 tutorials! it doesn't tell how to make 'a rounded star' precisely but I was like "I REALLY WANT TO MAKE A ROUNDED STAR and couldn't do it with just the star css, so I made a pentagon, then positioned 5 triangles on each side of the pentagon! */
  628.  
  629. /* please do not copy the entire chunk of code, that's against my Terms and is incredibly disrespectful. this is NOT a tutorial, so do not copy */
  630.  
  631. /* rounded triangle tutorial: //stackoverflow.com/questions/14446677#14451916 */
  632.  
  633. /* how to make a star: //css-tricks.com/examples/ShapesOfCSS/ */
  634.  
  635. #one-holder {
  636. position:absolute;
  637. bottom:100%;
  638. transform:translateY(100%);
  639. cursor:pointer;
  640. }
  641.  
  642. #one-holder, .triangle, .pentagon, .pentagon:before {
  643. -webkit-transition: all 0.6s ease-in-out;
  644. -moz-transition: all 0.6s ease-in-out;
  645. -o-transition: all 0.6s ease-in-out;
  646. transition: all 0.6s ease-in-out;
  647. }
  648.  
  649. #one-holder:hover .triangle, #one-holder:hover .pentagon, #one-holder:hover .pentagon:before {
  650. -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.65, 1.0);
  651. -moz-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.65, 1.0);
  652. -o-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.65, 1.0);
  653. transition: all 0.8s cubic-bezier(0.68, -0.55, 0.65, 1.0);
  654. }
  655.  
  656. /* star 1 */
  657. #one-holder:nth-of-type(1) {
  658. margin-left:38px;
  659. margin-bottom:77px;
  660. width:55px;height:55px;
  661. transform:translateY(100%) scale(0.62) rotate(-33deg);
  662. }
  663.  
  664. #one-holder:nth-of-type(1):hover {
  665. transform:translateY(100%) scale(0.62) rotate(33deg);
  666. }
  667.  
  668. #one-holder:nth-of-type(1) .triangle {
  669. background-color:{color:star 1};
  670. }
  671.  
  672. #one-holder:nth-of-type(1) .pentagon {
  673. border-color:{color:star 1} transparent;
  674. }
  675.  
  676. #one-holder:nth-of-type(1) .pentagon:before {
  677. border-color:transparent transparent {color:star 1};
  678. }
  679.  
  680. #one-holder:nth-of-type(1):hover .triangle {
  681. background-color:{color:star 1 hover};
  682. }
  683.  
  684. #one-holder:nth-of-type(1):hover .pentagon {
  685. border-color:{color:star 1 hover} transparent;
  686. }
  687.  
  688. #one-holder:nth-of-type(1):hover .pentagon:before {
  689. border-color:transparent transparent {color:star 1 hover};
  690. }
  691.  
  692. /* star 2 */
  693. #one-holder:nth-of-type(2) {
  694. margin-left:57px;
  695. margin-bottom:30px;
  696. width:60px;height:60px;
  697. transform:translateY(100%) rotate(-15deg);
  698. }
  699.  
  700. #one-holder:nth-of-type(2):hover {
  701. transform:translateY(100%) rotate(15deg);
  702. }
  703.  
  704. #one-holder:nth-of-type(2) .triangle {
  705. background-color:{color:star 2};
  706. }
  707.  
  708. #one-holder:nth-of-type(2) .pentagon {
  709. border-color:{color:star 2} transparent;
  710. }
  711.  
  712. #one-holder:nth-of-type(2) .pentagon:before {
  713. border-color:transparent transparent {color:star 2};
  714. }
  715.  
  716. #one-holder:nth-of-type(2):hover .triangle {
  717. background-color:{color:star 2 hover};
  718. }
  719.  
  720. #one-holder:nth-of-type(2):hover .pentagon {
  721. border-color:{color:star 2 hover} transparent;
  722. }
  723.  
  724. #one-holder:nth-of-type(2):hover .pentagon:before {
  725. border-color:transparent transparent {color:star 2 hover};
  726. }
  727.  
  728. /* star 3 */
  729. #one-holder:nth-of-type(3) {
  730. margin-left:114px;
  731. margin-bottom:22px;
  732. width:58px;height:58px;
  733. transform:translateY(100%) scale(0.83) rotate(30deg);
  734. }
  735.  
  736. #one-holder:nth-of-type(3):hover {
  737. transform:translateY(100%) scale(0.83) rotate(-30deg);
  738. }
  739.  
  740. #one-holder:nth-of-type(3) .triangle {
  741. background-color:{color:star 3};
  742. }
  743.  
  744. #one-holder:nth-of-type(3) .pentagon {
  745. border-color:{color:star 3} transparent;
  746. }
  747.  
  748. #one-holder:nth-of-type(3) .pentagon:before {
  749. border-color:transparent transparent {color:star 3};
  750. }
  751.  
  752. #one-holder:nth-of-type(3):hover .triangle {
  753. background-color:{color:star 3 hover};
  754. }
  755.  
  756. #one-holder:nth-of-type(3):hover .pentagon {
  757. border-color:{color:star 3 hover} transparent;
  758. }
  759.  
  760. #one-holder:nth-of-type(3):hover .pentagon:before {
  761. border-color:transparent transparent {color:star 3 hover};
  762. }
  763.  
  764. .tri-holder {
  765. transform:scale(0.07,0.07);
  766. font-family:karla;line-height:1.6em;
  767. }
  768.  
  769. .triangle {
  770. position:relative;
  771. background-color:{color:stars background};
  772. }
  773.  
  774. .triangle:before, .triangle:after {content:'';position:absolute;background-color:inherit;} .triangle, .triangle:before, .triangle:after {width:10em;height:10em;}
  775.  
  776. .triangle {transform:rotate(-60deg) skewX(-30deg) scale(1,.866);}.triangle:before {transform:rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);}.triangle:after {transform:rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);}
  777.  
  778. .triangle:nth-of-type(1) {
  779. border-top-right-radius:100%;
  780. }
  781.  
  782. .triangle:nth-of-type(2) {
  783. position:absolute;
  784. margin-top:45px;
  785. margin-left:240px;
  786. transform:rotate(10deg) skewX(-30deg) scale(1,.866);
  787. border-top-right-radius:100%;
  788. }
  789.  
  790. .triangle:nth-of-type(3) {
  791. position:absolute;
  792. margin-top:270px;
  793. margin-left:150px;
  794. transform:rotate(-40deg) skewX(-30deg) scale(1,.866);
  795. }
  796.  
  797. .triangle:nth-of-type(3)::after {
  798. border-top-right-radius:100%;
  799. }
  800.  
  801. .triangle:nth-of-type(4) {
  802. position:absolute;
  803. margin-top:310px;
  804. margin-left:-95px;
  805. transform:rotate(37deg) skewX(-30deg) scale(1,.866);
  806. }
  807.  
  808. .triangle:nth-of-type(4)::after {
  809. border-top-right-radius:100%;
  810. }
  811.  
  812. .triangle:nth-of-type(5) {
  813. position:absolute;
  814. margin-top:35px;
  815. margin-left:-180px;
  816. transform:rotate(-10deg) skewX(-30deg) scale(1,.866);
  817. }
  818.  
  819. .triangle:nth-of-type(5)::before {
  820. border-top-right-radius:100%;
  821. }
  822.  
  823. .penta-holder {
  824. margin-left:19px;
  825. margin-bottom:-99px;
  826. transform:rotate(180deg) scale(0.29,0.29);
  827. }
  828.  
  829. .pentagon {
  830. position:relative;
  831. width:54px;
  832. border-width:50px 18px 0;
  833. border-style:solid;
  834. border-color:{color:stars background} transparent;
  835. }
  836. .pentagon:before {
  837. content:"";
  838. position:absolute;
  839. height:0;
  840. width:0;
  841. top:-81px;
  842. left:-19px;
  843. border-width:0px 49px 30px 46px;
  844. border-style:solid;
  845. border-color:transparent transparent {color:stars background};
  846. transform:scale(1,1.3);
  847. }
  848.  
  849. /*--------------------STARBOXES--------------------*/
  850. #vanilla1, #vanilla2, #vanilla3 {
  851. display:none;
  852. position:fixed;
  853. bottom:0;margin-bottom:95px;
  854. left:0;margin-left:95px;
  855. width:{select:updates boxes width};
  856. padding:10px;
  857. background-color:{color:post};
  858. border:1px solid {color:post border};
  859. border-radius:10px;
  860. z-index:1;
  861. }
  862.  
  863. .paprika {
  864. width:calc(100% - 20px);
  865. min-height:calc(17px + 10px);
  866. padding:10px;
  867. background-color:{color:permalink background};
  868. border-radius:10px;
  869. display:table;
  870. }
  871.  
  872. .paprika .sf {
  873. position:absolute;
  874. margin-top:-1px;
  875. padding:8px 8px 2px 8px;
  876. background-color:{color:permalink icon background};
  877. font-size:13px;
  878. color:{color:permalink icon};
  879. border-radius:10px;
  880. }
  881.  
  882. .yin {
  883. display:table-cell;
  884. vertical-align:middle;
  885. }
  886.  
  887. .caramel {
  888. margin-left:calc(28px + 10px);
  889. font-family:quicksand;
  890. font-weight:bold;
  891. text-transform:uppercase;
  892. letter-spacing:1px;
  893. font-size:9px;
  894. line-height:1.4em;
  895. color:rgba({color:permalink text},0.9);
  896. }
  897.  
  898. .parsley {
  899. margin-top:calc(10px - 0.25em);
  900. line-height:1.5em;
  901. font-size:11px;
  902. }
  903.  
  904. .parsley p:last-child {margin-bottom:0px;}
  905.  
  906. /*--------------------POST CONTAINER--------------------*/
  907. #container {
  908. position:absolute;
  909. margin:0 auto;
  910. top:0;left:0;right:0;
  911. width:calc({select:post width} + ({select:post padding} * 2) + ({select:post side gaps} * 2) + {select:sidebar right gap} + {select:sidebar width});
  912. }
  913.  
  914. #nudge {
  915. margin-left:calc({select:sidebar width} + {select:sidebar right gap});
  916. }
  917.  
  918. /*--------------------SIDEBAR-------------------*/
  919. #glass {
  920. position:fixed;
  921. top:50%;transform:translateY(-50%);
  922. margin-left:0px;
  923. /* u already nudged the post over by sbmarg, so sb pos = -sbWidth */
  924. /* basically only need to subtract sbWidth and yor good */
  925. width:{select:sidebar width};
  926. /*height:500px;*/
  927. background-color:transparent;
  928. }
  929.  
  930. .burrito {display:flex;}
  931.  
  932. .salsa {
  933. width:calc({select:sidebar width} - 80px - 16px - 10px);
  934. /* take 10px away : gap between desc and pic */
  935. height:96px;
  936. background-color:rgba({RGBcolor:desc border},{select:desc border transparency});
  937. display:table;
  938. }
  939.  
  940. .goo {display:table-cell;vertical-align:middle;}
  941.  
  942. .desc {
  943. /* width:calc({select:sidebar width} - 80px - 16px); */
  944. margin-left:50%;
  945. transform:translateX(-50%);
  946. width:calc(100% - 16px - 16px);
  947. height:calc(96px - 16px - 16px);
  948. overflow-x:hidden;
  949. overflow-y:auto;
  950. padding:8px; /* maybe make way for scrollbar? unsure */
  951. background-color:{color:desc bg};
  952. line-height:1.4em;
  953. font-size:11.6px;
  954. text-align:justify;
  955. color:{color:desc text};
  956. z-index:5;
  957. }
  958.  
  959. .desc p:last-child {margin-bottom:0px;}
  960.  
  961. .angelface {
  962. -webkit-align-self:center;
  963. align-self:center;
  964. margin-left:10px; /* left from desc */
  965. width:80px;
  966. height:80px;
  967. padding:8px;
  968. background-color:{color:sidebar icon background};
  969. border-radius:25%;
  970. z-index:-1;
  971. }
  972.  
  973. /* 3 links */
  974. .breathe {
  975. float:right;
  976. margin-top:10px;
  977. width:calc(80px + 16px);
  978. }
  979.  
  980. .breathe a {
  981. display:inline-block;
  982. margin:3px 0px;
  983. width:calc(100% - 10px - 2px); /* 100% - leftright padding */
  984. padding:5px;
  985. background-color:{color:sidebar links background};
  986. border-radius:5px;
  987. border:1px solid transparent;
  988. font-family:quicksand;
  989. text-transform:uppercase;line-height:1em;text-align:center;
  990. font-size:9px;font-weight:bold;letter-spacing:1px;
  991. color:{color:sidebar links};
  992. }
  993.  
  994. .breathe a:first-child {margin-top:0px;}
  995. .breathe a:last-child {margin-bottom:0px;}
  996.  
  997. .breathe a:hover {
  998. background-color:{color:sidebar links background hover};
  999. border:1px solid {color:sidebar links hover};
  1000. color:{color:sidebar links hover};
  1001. }
  1002.  
  1003. /* sb tit */
  1004. .honor {
  1005. position:absolute;
  1006. margin-top:calc(10px - 6px);
  1007. right:0;margin-right:calc(80px + 16px + 10px + 8px);
  1008. font-family:Averia Sans Libre;
  1009. font-size:40px;line-height:1em;letter-spacing:0.5px;
  1010. text-align:right;
  1011. text-transform:uppercase;
  1012. color:{color:sidebar title color};
  1013. }
  1014.  
  1015. /* sb subtitty */
  1016. .glory {
  1017. margin-top:5px;
  1018. font-family:quicksand;
  1019. text-transform:uppercase;line-height:1.7em;
  1020. font-size:7px;font-weight:bold;letter-spacing:1.3px;
  1021. color:{color:sidebar subtitle color};
  1022. }
  1023.  
  1024. /*--------------------POST BLOCK--------------------*/
  1025. #postbox {
  1026. position:fixed;
  1027. margin-top:60px;
  1028. width:calc({select:post width} + ({select:post padding} * 2) + ({select:post side gaps} * 2));
  1029. height:calc(100vh - 60px - 60px);
  1030. overflow-x:hidden;
  1031. overflow-y:auto;
  1032. background-color:{color:post container background};
  1033. {block:ifpostcontainerborder}border:1px solid {color:post container border};{/block:ifpostcontainerborder}
  1034. z-index:-1;
  1035. }
  1036.  
  1037. /* bannah */
  1038. #heather {
  1039. width:inherit;
  1040. height:calc(({select:post width} + ({select:post side gaps} * 2)) / 21 * 9);
  1041. background-image:url('{image:header image}');
  1042. background-color:{color:header background};
  1043. background-position:center;
  1044. background-size:cover;
  1045. background-repeat:no-repeat;
  1046. }
  1047.  
  1048. {block:ifnotheader}
  1049. #heather {display:none;}
  1050. {/block:ifnotheader}
  1051.  
  1052. /* clinks bar */
  1053. #lilac {
  1054. position:absolute;
  1055. width:inherit;
  1056. height:80px;
  1057. background-image:url('{image:custom links bar background}');
  1058. background-color:{color:header background};
  1059. background-position:center;
  1060. background-repeat:repeat;
  1061. display:table;
  1062. z-index:5;
  1063. }
  1064.  
  1065. {block:ifnotheader}
  1066. #lilac {
  1067. position:fixed!important;
  1068. margin-top:-0.25px;
  1069. }
  1070. {/block:ifnotheader}
  1071.  
  1072. {block:ifnotLink1}
  1073. #lilac {display:none;}
  1074. {/block:ifnotLink1}
  1075.  
  1076. .pupil {
  1077. display:table-cell;
  1078. vertical-align:middle;
  1079. }
  1080.  
  1081. .coltsfoot {
  1082. text-align:center;
  1083. padding:0px 10px;
  1084. }
  1085.  
  1086. .coltsfoot a {
  1087. display:inline-block;
  1088. margin:4px;
  1089. width:70px;
  1090. padding:5px 7px;
  1091. background-color:{color:custom links background};
  1092. border:1px solid {color:custom links};
  1093. border-radius:5px;
  1094. font-family:quicksand;
  1095. line-height:1em;
  1096. text-transform:uppercase;
  1097. font-size:9px;font-weight:bold;letter-spacing:1px;
  1098. color:{color:custom links};
  1099. }
  1100.  
  1101. .coltsfoot a:hover {
  1102. background-color:{color:custom links background hover};
  1103. border:1px solid {color:custom links hover};
  1104. color:{color:custom links hover};
  1105. }
  1106.  
  1107. .tea {
  1108. position:fixed!important;
  1109. margin-top:calc(((({select:post width} + ({select:post side gaps} * 2)) / 21 * 9) * -1) - 0.25px)!important;
  1110. /* calc((({select:post width} + ({select:post side gaps} * 2)) / 21 * 9) * -1) */
  1111. }
  1112.  
  1113. /* bot bar pagi */
  1114. #saffron {
  1115. position:fixed;
  1116. bottom:0;margin-bottom:calc(60px - 1px);
  1117. width:inherit;
  1118. padding:15px 0px;
  1119. background-color:{color:permalink background};
  1120. text-align:center;
  1121. border-top:1px solid {color:post border};
  1122. z-index:5;
  1123. }
  1124.  
  1125. /* 'Current page' number */
  1126. #saffron span {
  1127. margin:0px 3px;
  1128. padding:0px 5px;
  1129. color:{color:permalink text};
  1130. display:inline-block;
  1131. text-align:center;
  1132. }
  1133.  
  1134. /* Other page numbers */
  1135. #saffron a {
  1136. margin:0px 3px;
  1137. padding:0px 5px 2px 5px;
  1138. color:rgba({RGBcolor:permalink text},0.8);
  1139. border-bottom:0.5px solid rgba({RGBcolor:permalink text},0.4);
  1140. display:inline-block;
  1141. text-align:center;
  1142. }
  1143.  
  1144. .small-nudge {
  1145. {block:ifLink1}margin-top:calc({select:post spacing} + 80px);{/block:ifLink1}
  1146.  
  1147. {block:ifnotLink1}
  1148. margin-top:{select:post spacing};
  1149. {/block:ifnotLink1}
  1150.  
  1151. margin-bottom:{select:post spacing};
  1152.  
  1153. {block:Pagination}margin-bottom:calc({select:post spacing} + 52.5px);{/block:Pagination}
  1154.  
  1155. margin-left:{select:post side gaps};
  1156. }
  1157.  
  1158. .posts {
  1159. overflow:hidden;
  1160. margin-bottom:{select:post spacing};
  1161. width:{select:post width};
  1162. padding:{select:post padding};
  1163. background-color:{color:post};
  1164. {block:ifpostborders}border:1px solid {color:post border};{/block:ifpostborders}
  1165. }
  1166.  
  1167. .posts:last-of-type {margin-bottom:0px;}
  1168.  
  1169. .photos, .photos img {
  1170. position:relative;
  1171. overflow:hidden;
  1172. width:{select:post width};
  1173.  
  1174. {block:IndexPage}
  1175. {block:ifphotofade}
  1176. opacity:0.8;
  1177. -webkit-transition: all 0.8s ease-in-out;
  1178. -moz-transition: all 0.8s ease-in-out;
  1179. -o-transition: all 0.8s ease-in-out;
  1180. {/block:ifphotofade}
  1181.  
  1182. {block:ifmonochromeposts}
  1183. -webkit-filter:grayscale(100%);
  1184. filter:grayscale(100%);
  1185. -webkit-transition: all 0.8s ease-in-out;
  1186. -moz-transition: all 0.8s ease-in-out;
  1187. -o-transition: all 0.8s ease-in-out;
  1188. {/block:ifmonochromeposts}
  1189. {/block:IndexPage}
  1190. }
  1191.  
  1192. .posts:hover .photos {
  1193. opacity:1;
  1194. -webkit-filter:grayscale(0%);
  1195. filter:grayscale(0%);
  1196. }
  1197.  
  1198. .posts iframe{max-width:100%;}
  1199.  
  1200. .posts img {
  1201. {block:IndexPage}
  1202. {block:ifphotofade}
  1203. opacity:0.8;
  1204. -webkit-transition: all 0.8s ease-in-out;
  1205. -moz-transition: all 0.8s ease-in-out;
  1206. -o-transition: all 0.8s ease-in-out;
  1207. {/block:ifphotofade}
  1208.  
  1209. {block:ifmonochromeposts}
  1210. -webkit-filter:grayscale(100%);
  1211. filter:grayscale(100%);
  1212. -webkit-transition: all 0.8s ease-in-out;
  1213. -moz-transition: all 0.8s ease-in-out;
  1214. -o-transition: all 0.8s ease-in-out;
  1215. {/block:ifmonochromeposts}
  1216. {/block:IndexPage}
  1217. }
  1218.  
  1219. .posts:hover img {
  1220. opacity:1;
  1221. -webkit-filter:grayscale(0%);
  1222. filter:grayscale(0%);
  1223. }
  1224.  
  1225. .posts img, .posts li, .posts blockquote {max-width:100%;height:auto;}
  1226.  
  1227. /*--------------------TOP PERMA--------------------*/
  1228. .citrus {
  1229. margin-bottom:{select:post padding};
  1230. background-color:{color:permalink background};
  1231. padding-top:calc(10px + {select:permalink padding});
  1232. padding-right:{select:permalink padding};
  1233. padding-bottom:calc(5px + {select:permalink padding});
  1234. padding-left:{select:permalink padding};
  1235. font-family:karla;line-height:1.6em;
  1236. }
  1237.  
  1238. .citrus .sf {
  1239. padding:12px 10px 5px 10px;
  1240. background-color:{color:permalink icon background};
  1241. font-size:20px;
  1242. color:{color:permalink icon};
  1243. border-radius:10px;
  1244. }
  1245.  
  1246. .sour {
  1247. position:absolute;
  1248. margin-top:-29px;
  1249. margin-left:40px;
  1250. padding-left:10px;
  1251. font-family:quicksand;
  1252. line-height:1.35em;
  1253. text-transform:uppercase;
  1254. font-size:11px;font-weight:bold;letter-spacing:0.5px;
  1255. color:{color:permalink text};
  1256. }
  1257.  
  1258. .sour uke {
  1259. font-size:9px;
  1260. letter-spacing:1px;
  1261. color:rgba({RGBcolor:permalink text},0.8);
  1262. }
  1263.  
  1264. .vinegar {float:right;}
  1265. .vinaigrette {
  1266. float:right;
  1267. margin-top:calc(-{select:post padding} - {select:permalink padding} - 10px - 18px);
  1268. margin-right:calc(2px + {select:permalink padding});
  1269. }
  1270.  
  1271. .salad {
  1272. font-family:quicksand;
  1273. line-height:1.45em;
  1274. text-transform:uppercase;
  1275. font-size:10px;font-weight:bold;letter-spacing:1px;
  1276. }
  1277.  
  1278. .salad {color:rgba({RGBcolor:permalink text},0.8);}
  1279. .salad a, .salad a:hover {color:{color:permalink text};}
  1280.  
  1281. /*--------------------TAGS--------------------*/
  1282. .tagsin {
  1283. margin-right:-3px; /* make room for last tag padding */
  1284. text-transform:uppercase;
  1285. letter-spacing:1.3px;
  1286. text-align:right;line-height:1.4em;
  1287. font-size:calc({select:font size} - 3.5px);
  1288. margin-top:10px;
  1289. }
  1290.  
  1291. .tagsin a {
  1292. display:inline-block;
  1293. margin:3px calc(3px + 1ch);
  1294. padding:4px calc(6px - 2ch); /* 6px orig. 2ch = 1ch on either side */
  1295. /* bc box-shadow makes up for it */
  1296. background-color:{color:post tags background};
  1297. box-shadow: 1ch 0 0 {color:post tags background}, -1ch 0 0 {color:post tags background};
  1298. color:{color:post tags};
  1299. border-bottom:0px solid transparent;
  1300. }
  1301.  
  1302. .tagsin a:hover {
  1303. background-color:{color:post tags background hover};
  1304. box-shadow: 1ch 0 0 {color:post tags background hover}, -1ch 0 0 {color:post tags background hover};
  1305. color:{color:post tags hover};
  1306. }
  1307.  
  1308. /*--------------------POST NOTES--------------------*/
  1309. ol.notes {
  1310. width:{select:post width};
  1311. padding:0px;
  1312. margin-top:30px;
  1313. list-style-type:none;
  1314. }
  1315.  
  1316. ol.notes li.note {
  1317. padding:10px;
  1318. }
  1319.  
  1320. ol.notes li.note img.avatar {
  1321. vertical-align:-4px;
  1322. margin-right:10px;
  1323. width:16px;
  1324. height:16px;
  1325. }
  1326.  
  1327. ol.notes li.note span.action {
  1328. font-weight:none;
  1329. }
  1330.  
  1331. ol.notes li.note .answer_content {
  1332. font-weight:normal;
  1333. }
  1334.  
  1335. ol.notes li.note blockquote {
  1336. padding:4px 10px;
  1337. margin:10px 0px 0px 25px;
  1338. }
  1339.  
  1340. ol.notes li.note blockquote a {
  1341. text-decoration:none;
  1342. }
  1343.  
  1344. /*---------------------------LIGHTBOXES---------------------------*/
  1345. .vignette, #vignette {
  1346. opacity:0;
  1347. }
  1348. .lightbox-image, #tumblr_lightbox img {
  1349. z-index:99999999999999999999999999999 !important;
  1350. box-shadow:none !important;
  1351. border-radius:0px !important;
  1352. max-width:none;
  1353. padding:{select:post padding} !important;
  1354. background:{color:post} !important;
  1355. border:1px solid {color:post border}!important;
  1356. }
  1357.  
  1358. .tmblr-lightbox, #tumblr_lightbox {
  1359. background-color:rgba({RGBcolor:post},0.78) !important;
  1360. z-index:99999999999999999999999999999 !important;
  1361. }
  1362.  
  1363. /*---------------------------QUOTES---------------------------*/
  1364. .daydreamer {
  1365. margin-top:6px;
  1366. margin-bottom:10px;
  1367. text-align:center;
  1368. }
  1369.  
  1370. .daydreamer .sf {
  1371. color:{color:text};
  1372. padding:7px 10px 2px 10px;
  1373. font-size:calc({select:font size} + 5px);
  1374. }
  1375.  
  1376. .daydreamer::before {
  1377. content:"";
  1378. position:absolute;
  1379. margin-top:8px;
  1380. margin-left:calc(-{select:post width} / 4);
  1381. width:calc({select:post width} / 4);
  1382. height:1px;
  1383. background:-webkit-linear-gradient(left, transparent 0%, {color:text} 80%, transparent 100%);
  1384. }
  1385.  
  1386. .daydreamer::after {
  1387. content:"";
  1388. position:absolute;
  1389. margin-top:8px;
  1390. margin-left:0px;
  1391. width:calc({select:post width} / 4);
  1392. height:1px;
  1393. background:-webkit-linear-gradient(right, transparent 0%, {color:text} 80%, transparent 100%);
  1394. }
  1395.  
  1396. .quote {
  1397. font-family:quicksand;
  1398. text-transform:uppercase;letter-spacing:1px;
  1399. font-size:calc({select:font size} + 1px);
  1400. font-weight:bold;
  1401. text-align:center;
  1402. }
  1403.  
  1404. .quotesource {
  1405. text-align:center;
  1406. margin-top:10px;
  1407. }
  1408.  
  1409. /*---------------------------CHATS---------------------------*/
  1410. .chat {
  1411. line-height:2em;
  1412. list-style:none;
  1413. }
  1414.  
  1415. .line.odd {
  1416. background-color:rgba({RGBcolor:permalink background}, 0.8);
  1417. padding:5px;
  1418. list-style:none;
  1419. color:rgba({RGBcolor:permalink text}, 0.8);
  1420. }
  1421.  
  1422. .line.even {
  1423. background:{color:post};
  1424. padding:5px;
  1425. list-style:none;
  1426. }
  1427.  
  1428. .label.odd, .label.even {
  1429. padding-right:1px;
  1430. text-transform:uppercase;
  1431. font-weight:bold;
  1432. }
  1433.  
  1434. .label.odd {color:{color:permalink text};}
  1435. .label.even {color:{color:link};}
  1436.  
  1437. /*---------------------------ASKS---------------------------*/
  1438. .q-wrap {
  1439. padding:10px;
  1440. background-color:rgba({RGBcolor:permalink background},0.8);
  1441. min-height:64px;
  1442. }
  1443.  
  1444. .question {margin-left:75px;}
  1445.  
  1446. .askimg {
  1447. position:absolute;
  1448. width:64px;height:64px;
  1449. }
  1450.  
  1451. .asker, .asker b, .asker a, .answer {
  1452. text-transform:uppercase;color:{color:permalink text};
  1453. }
  1454.  
  1455. .answer {
  1456. margin:0px auto;
  1457. text-transform:none;
  1458. }
  1459.  
  1460. /*---------------------------AUDIO---------------------------*/
  1461. .playerbutton {
  1462. position:absolute;
  1463. margin-top:18.5px;
  1464. margin-left:18.5px;
  1465. width:27px;
  1466. height:27px;
  1467. overflow:hidden;
  1468. border-radius:100%;
  1469. }
  1470.  
  1471. .trackdetails {
  1472. width:auto;
  1473. display:inline-block;
  1474. margin-left:70px;
  1475. padding:5px;
  1476. line-height:1.7;
  1477. }
  1478.  
  1479. .trackdetails b {letter-spacing:0.3px;}
  1480.  
  1481. .audiowrapper {
  1482. position:relative;
  1483. display:inline;
  1484. height:0px;
  1485. }
  1486.  
  1487. /*---------------------------VIDEO---------------------------*/
  1488. video {
  1489. display:block;
  1490. outline:none;
  1491. cursor:default;
  1492. width:100%;
  1493. }
  1494.  
  1495. .tumblr_video_container {
  1496. width:{select:post width}!important;
  1497. height:auto!important;
  1498. max-height:540px!important;
  1499. overflow:hidden!important;
  1500. {block:IndexPage}
  1501. {block:ifphotofade}
  1502. opacity:0.8;
  1503. -webkit-transition: all 0.8s ease-in-out;
  1504. -moz-transition: all 0.8s ease-in-out;
  1505. -o-transition: all 0.8s ease-in-out;
  1506. {/block:ifphotofade}
  1507.  
  1508. {block:ifmonochromeposts}
  1509. -webkit-filter:grayscale(100%);
  1510. filter:grayscale(100%);
  1511. -webkit-transition: all 0.8s ease-in-out;
  1512. -moz-transition: all 0.8s ease-in-out;
  1513. -o-transition: all 0.8s ease-in-out;
  1514. {/block:ifmonochromeposts}
  1515. {/block:IndexPage}
  1516. }
  1517.  
  1518. .posts:hover .tumblr_video_container {
  1519. opacity:1;
  1520. -webkit-filter:grayscale(0%);
  1521. filter:grayscale(0%);
  1522. }
  1523.  
  1524. #yo-pls-dont-remove-thx {
  1525. position:fixed;
  1526. bottom:0;margin-bottom:15px;
  1527. right:0;margin-right:15px;
  1528. z-index:999999;
  1529. padding:7px 9px;
  1530. background-color:{color:post};
  1531. {block:ifpostborders}border:1px solid {color:post border};{/block:ifpostborders}
  1532. {block:ifnotpostborders}border:1px solid transparent;{/block:ifnotpostborders}
  1533. border-radius:5px;
  1534. font-family:karla;
  1535. text-transform:uppercase;line-height:1em;text-align:center;
  1536. font-size:9px;letter-spacing:1.3px;
  1537. }
  1538.  
  1539. #yo-pls-dont-remove-thx a {
  1540. color:rgba({RGBcolor:text},0.92);
  1541. }
  1542.  
  1543. {CustomCSS}
  1544.  
  1545. /* -- Like + Reblog buttons (1/2) -- */
  1546. /* -- mikedidthis from StackOverflow: //stackoverflow.com/users/2312574/mikedidthis -- */
  1547. /* -- and tutorial by shythemes: //shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons -- */
  1548. .controls {
  1549. transform:scale(1.2,1.2);
  1550. transform-origin:0% 50%;
  1551. display:flex;
  1552. align-items:center;
  1553. }
  1554. .controls a {
  1555. position:relative;
  1556. display:block;
  1557. overflow:hidden;
  1558. padding:3px!important;
  1559. flex-shrink:0;
  1560. }
  1561. .controls a + a {
  1562. }
  1563. .controls svg {
  1564. width:calc({select:font size} - 2px);
  1565. height:auto;
  1566. padding:1px;
  1567. display:block;
  1568. overflow:visible;
  1569. fill:rgba({RGBcolor:permalink text},0.8); /* svg icons color */
  1570. }
  1571. .controls .reblog svg {
  1572. width:calc({select:font size} - 3px); /* rb butt size */
  1573. }
  1574. .controls .like .liked + svg path {
  1575. fill:#ec5a5a; /* LIKED color */
  1576. }
  1577. .controls .like .like_button {
  1578. position:relative;
  1579. }
  1580. .controls .like .like_button iframe {
  1581. position:absolute;
  1582. top:0;
  1583. left:0;
  1584. bottom:0;
  1585. right:0;
  1586. z-index:2;
  1587. opacity:0.000001;
  1588. }
  1589.  
  1590. </style>
  1591.  
  1592. </head>
  1593.  
  1594. <body>
  1595.  
  1596. {block:ifupdatesboxes}
  1597. <div id="star-cont">
  1598. <a class="choco1"><div id="one-holder">
  1599. <div class="penta-holder" style="margin-left:21px;">
  1600. <div class="pentagon"></div>
  1601. </div><!--pentaholder-->
  1602. <div class="tri-holder">
  1603. <div class="triangle"></div>
  1604. <div class="triangle"></div>
  1605. <div class="triangle"></div>
  1606. <div class="triangle"></div>
  1607. <div class="triangle"></div>
  1608. </div><!--triholder-->
  1609. </a></div><!--ONE STAR-->
  1610.  
  1611. <a class="choco2"><div id="one-holder">
  1612. <div class="penta-holder">
  1613. <div class="pentagon"></div>
  1614. </div><!--pentaholder-->
  1615. <div class="tri-holder">
  1616. <div class="triangle"></div>
  1617. <div class="triangle"></div>
  1618. <div class="triangle"></div>
  1619. <div class="triangle"></div>
  1620. <div class="triangle"></div>
  1621. </div><!--triholder-->
  1622. </a></div><!--ONE STAR-->
  1623.  
  1624. <a class="choco3"><div id="one-holder">
  1625. <div class="penta-holder">
  1626. <div class="pentagon"></div>
  1627. </div><!--pentaholder-->
  1628. <div class="tri-holder">
  1629. <div class="triangle"></div>
  1630. <div class="triangle"></div>
  1631. <div class="triangle"></div>
  1632. <div class="triangle"></div>
  1633. <div class="triangle"></div>
  1634. </div><!--triholder-->
  1635. </a></div><!--ONE STAR-->
  1636. </div><!--star-cont-->
  1637.  
  1638.  
  1639. <!----ONE STAR BOX START---->
  1640. <div id="vanilla1">
  1641. <div class="paprika">
  1642. <span class="sf sf-{text:star 1 box icon}"></span>
  1643. <div class="yin">
  1644. <div class="caramel">{text:star 1 title}</div>
  1645. </div><!--yin-->
  1646. </div><!--paprika-->
  1647.  
  1648. <div class="parsley">{text:star 1 box content}</div>
  1649. </div><!--vanilla1-->
  1650. <!----ONE STAR BOX END---->
  1651.  
  1652. <!----ONE STAR BOX START---->
  1653. <div id="vanilla2">
  1654. <div class="paprika">
  1655. <span class="sf sf-{text:star 2 box icon}"></span>
  1656. <div class="yin">
  1657. <div class="caramel">{text:star 2 title}</div>
  1658. </div><!--yin-->
  1659. </div><!--paprika-->
  1660.  
  1661. <div class="parsley">{text:star 2 box content}</div>
  1662. </div><!--vanilla1-->
  1663. <!----ONE STAR BOX END---->
  1664.  
  1665. <!----ONE STAR BOX START---->
  1666. <div id="vanilla3">
  1667. <div class="paprika">
  1668. <span class="sf sf-{text:star 3 box icon}"></span>
  1669. <div class="yin">
  1670. <div class="caramel">{text:star 3 title}</div>
  1671. </div><!--yin-->
  1672. </div><!--paprika-->
  1673.  
  1674. <div class="parsley">{text:star 3 box content}</div>
  1675. </div><!--vanilla1-->
  1676. <!----ONE STAR BOX END---->
  1677. {/block:ifupdatesboxes}
  1678.  
  1679. <script>
  1680. $(document).ready(function(){
  1681. // star box 1
  1682. $('.choco1').click(function(e){
  1683. e.stopPropagation();
  1684. $("#vanilla1").fadeIn('slow');
  1685. $("#vanilla2, #vanilla3").fadeOut('slow');
  1686. });
  1687. // star box 2
  1688. $('.choco2').click(function(e){
  1689. e.stopPropagation();
  1690. $("#vanilla2").fadeIn('slow');
  1691. $("#vanilla1, #vanilla3").fadeOut('slow');
  1692. });
  1693. // star box 3
  1694. $('.choco3').click(function(e){
  1695. e.stopPropagation();
  1696. $("#vanilla3").fadeIn('slow');
  1697. $("#vanilla1, #vanilla2").fadeOut('slow');
  1698. });
  1699. });
  1700.  
  1701. // if(out) = disappear
  1702. $(document).click(function(outside){
  1703. var box = $('#vanilla1, #vanilla2, #vanilla3');
  1704. if(!box.is(outside.target) && box.has(outside.target).length === 0){
  1705. $('#vanilla1, #vanilla2, #vanilla3').fadeOut('slow');
  1706. }
  1707. });
  1708. </script>
  1709.  
  1710.  
  1711. <!---- main shit ---->
  1712. <div id="container">
  1713.  
  1714. <div id="glass">
  1715.  
  1716. <div class="burrito">
  1717. <div class="salsa">
  1718. <div class="goo">
  1719. <div class="desc">{Description}</div>
  1720. </div><!--goo-->
  1721. </div><!--salsa-->
  1722.  
  1723. <img class="angelface" src="{image:sidebar icon}">
  1724.  
  1725. </div><!--burr-->
  1726.  
  1727. <div class="breathe">
  1728. <a href="/">return</a>
  1729. <a href="/ask">message</a>
  1730. <a href="/archive">archive</a>
  1731. </div><!--breathe-->
  1732.  
  1733. <div class="honor">{text:sidebar title}
  1734. <div class="glory">{text:sidebar subtitle}</div>
  1735. </div><!--honor-->
  1736. </div><!--glass-->
  1737.  
  1738. <div id="nudge">
  1739. <div id="postbox">
  1740.  
  1741. <div id="heather"></div>
  1742.  
  1743. <div id="lilac">
  1744. <div class="pupil">
  1745. <div class="coltsfoot">
  1746. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  1747. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  1748. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  1749. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  1750. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  1751. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  1752. {block:ifLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:ifLink7}
  1753. {block:ifLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:ifLink8}
  1754. {block:ifLink9}<a href="{text:Link 9 URL}">{text:Link 9}</a>{/block:ifLink9}
  1755. {block:ifLink10}<a href="{text:Link 10 URL}">{text:Link 10}</a>{/block:ifLink10}
  1756. </div>
  1757. </div><!--pupil-->
  1758. </div><!--lilac-->
  1759.  
  1760. {block:Pagination}
  1761. <div id="saffron">
  1762. {block:PreviousPage}<a title="Previous" href="{PreviousPage}">«</a>{/block:PreviousPage}
  1763. {block:JumpPagination length="8"}
  1764. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1765. {block:JumpPage}<a href="{URL}">{PageNumber}</a> {/block:JumpPage}
  1766. {/block:JumpPagination}
  1767. {block:NextPage}<a title="Next" href="{NextPage}">»</a>{/block:NextPage}
  1768. </div>
  1769. {/block:Pagination}
  1770.  
  1771.  
  1772.  
  1773. <div class="small-nudge">
  1774.  
  1775. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1776. <div class="posts" id="{PostID}" post-type="{PostType}">
  1777.  
  1778. {Block:IndexPage}
  1779. {block:Date}
  1780. <!--citrus types start-->
  1781. {block:Text}
  1782. <div class="citrus non">
  1783. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1784. <span class="sf sf-font"></span>
  1785. <div class="sour">
  1786. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1787. <br>
  1788. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1789. </div><!--sour-->
  1790. </a><!--link-->
  1791. </div><!--citrus-->
  1792. {/block:Text}
  1793.  
  1794. {block:Photo}
  1795. <div class="citrus non">
  1796. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1797. <span class="sf sf-camera-o"></span>
  1798. <div class="sour">
  1799. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1800. <br>
  1801. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1802. </div><!--sour-->
  1803. </a><!--link-->
  1804. </div><!--citrus-->
  1805. {/block:Photo}
  1806.  
  1807. {block:Photoset}
  1808. <div class="citrus non">
  1809. <a href="{Permalink}" title="photoset posted {TimeAgo}">
  1810. <span class="sf sf-picture-o"></span>
  1811. <div class="sour">
  1812. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1813. <br>
  1814. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1815. </div><!--sour-->
  1816. </a><!--link-->
  1817. </div><!--citrus-->
  1818. {/block:Photoset}
  1819.  
  1820. {block:Quote}
  1821. <div class="citrus non">
  1822. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1823. <span class="sf sf-book-o"></span>
  1824. <div class="sour">
  1825. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1826. <br>
  1827. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1828. </div><!--sour-->
  1829. </a><!--link-->
  1830. </div><!--citrus-->
  1831. {/block:Quote}
  1832.  
  1833. {block:Link}
  1834. <div class="citrus non">
  1835. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1836. <span class="sf sf-link-2-o"></span>
  1837. <div class="sour">
  1838. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1839. <br>
  1840. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1841. </div><!--sour-->
  1842. </a><!--link-->
  1843. </div><!--citrus-->
  1844. {/block:Link}
  1845.  
  1846. {block:Chat}
  1847. <div class="citrus non">
  1848. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1849. <span class="sf sf-chat-bubbles-o"></span>
  1850. <div class="sour">
  1851. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1852. <br>
  1853. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1854. </div><!--sour-->
  1855. </a><!--link-->
  1856. </div><!--citrus-->
  1857. {/block:Chat}
  1858.  
  1859. {block:Audio}
  1860. <div class="citrus non">
  1861. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1862. <span class="sf sf-megaphone-1-o"></span>
  1863. <div class="sour">
  1864. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1865. <br>
  1866. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1867. </div><!--sour-->
  1868. </a><!--link-->
  1869. </div><!--citrus-->
  1870. {/block:Audio}
  1871.  
  1872. {block:Video}
  1873. <div class="citrus non">
  1874. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1875. <span class="sf sf-video-o"></span>
  1876. <div class="sour">
  1877. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1878. <br>
  1879. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1880. </div><!--sour-->
  1881. </a><!--link-->
  1882. </div><!--citrus-->
  1883. {/block:Video}
  1884.  
  1885. {block:Answer}
  1886. <div class="citrus non">
  1887. <a href="{Permalink}" title="{PostType} posted {TimeAgo}">
  1888. <span class="sf sf-receive-o"></span>
  1889. <div class="sour">
  1890. {DayOfWeek} {DayOfMonthWithZero}{DayOfMonthSuffix} {Month}
  1891. <br>
  1892. <uke>{24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1893. </div><!--sour-->
  1894. </a><!--link-->
  1895. </div><!--citrus-->
  1896. {/block:Answer}
  1897.  
  1898. <div class="vinaigrette non">
  1899.  
  1900. <!-- Like + Reblog buttons (2/2) -->
  1901. <div class="controls">
  1902.  
  1903. <a href="#" title="like this post?" class="like">{LikeButton}
  1904. <svg xmlns="//w3.org/2000/svg" xmlns:xlink="//w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  1905. </a>
  1906.  
  1907. <a href="{ReblogURL}" title="reblog this post?" target="_blank" class="reblog">
  1908. <svg xmlns="//w3.org/2000/svg" xmlns:xlink="//w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.095 361.095" style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333 c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5 s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733 C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617 c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6 c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  1909. </a>
  1910.  
  1911. </div><!--controls-->
  1912. </div><!--vinegar-->
  1913.  
  1914. <!--citrus types end-->
  1915. {/block:Date}
  1916. {/block:IndexPage}
  1917.  
  1918.  
  1919.  
  1920. <!--citrus on perma ONLY-->
  1921. {block:PermalinkPage}
  1922. {block:Date}
  1923. <div class="citrus non">
  1924. <span class="sf sf-jupiter-o"></span>
  1925. <div class="sour">
  1926. Posted on {Year} {Month} {DayOfMonthWithZero}{DayOfMonthSuffix}
  1927. <br>
  1928. <uke>{DayOfWeek} {24HourWithZero}:{Minutes}{AMPM} @ {NoteCountWithLabel}</uke>
  1929. </div><!--sour-->
  1930. </div><!--citrus-->
  1931.  
  1932. {block:RebloggedFrom}
  1933. <div class="vinaigrette salad non">
  1934. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> / <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1935. </span>
  1936. </div><!--vinaigrette-->
  1937. {/block:RebloggedFrom}
  1938.  
  1939. {/block:Date}
  1940. {/block:PermalinkPage}
  1941.  
  1942.  
  1943. {block:Text}
  1944. {block:Title}<h1>{Title}</h1>{/block:Title}
  1945. <div class="pp">{Body}</div>
  1946. {/block:Text}
  1947.  
  1948.  
  1949. {block:Photo}
  1950.  
  1951. <div class="photos">
  1952. <div class="non">{LinkOpenTag}<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"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"></a>{LinkCloseTag}</div></div>
  1953.  
  1954. {block:Caption}{Caption}{/block:Caption}
  1955. {/block:Photo}
  1956.  
  1957.  
  1958. {block:Photoset}
  1959.  
  1960. <div class="photos">
  1961. <div class="non">
  1962. <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>
  1963. </div>
  1964. </div>
  1965.  
  1966. {block:Caption}{Caption}{/block:Caption}
  1967. {/block:Photoset}
  1968.  
  1969.  
  1970. {block:Quote}
  1971. <div class="daydreamer"><span class="sf sf-quotation-mark"></span></div>
  1972. <div class="quote">{Quote}</div>
  1973. {block:Source}<div class="quotesource"> — {Source}</div>
  1974. {/block:Source}{/block:Quote}
  1975.  
  1976.  
  1977. {block:Link}
  1978. <h1><div class="non"><a href="{URL}" {Target}>{Name} »</a></div></h1>
  1979. {block:Description}{Description}{/block:Description}
  1980. {/block:Link}
  1981.  
  1982.  
  1983. {block:Chat}
  1984. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label {Alt}"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1985. {/block:Chat}
  1986.  
  1987.  
  1988. {block:Audio}
  1989. {block:AudioPlayer}
  1990. <div class="audiowrapper">
  1991. <div class="playerbutton">
  1992. {AudioPlayer}
  1993. </div>
  1994.  
  1995. <div class="trackdetails">
  1996. <b>TRACK:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  1997.  
  1998. <b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}<br>
  1999.  
  2000. <b>PLAYS:</b> {FormattedPlayCount}</div></div>
  2001. {/block:AudioPlayer}
  2002.  
  2003. {block:Caption}
  2004. <div class="caption">{Caption}</div>
  2005. {/block:Caption}
  2006. {/block:Audio}
  2007.  
  2008.  
  2009. {block:Video}
  2010. <div class="video">{Video-500}</div>
  2011. {block:Caption}{Caption}{/block:Caption}
  2012. {/block:Video}
  2013.  
  2014.  
  2015. {block:Answer}
  2016. <div class="q-wrap">
  2017. <img class="askimg" src="{AskerPortraitURL-64}" ondragstart='return false;'>
  2018. <div class="question">
  2019. <div class="asker"><b>{Asker} asked:</b></div>
  2020. {Question}</div><!--question-->
  2021. </div><!--qwrap-->
  2022. <div class="answer">{Answer}</div><!--answer-->
  2023. {/block:Answer}
  2024.  
  2025.  
  2026. {block:HasTags}
  2027. <div class="tagsin nonn">
  2028. {block:Tags}
  2029. <a href="{TagURL}">#{Tag}</a>
  2030. {/block:Tags}
  2031. </div>
  2032. {/block:HasTags}
  2033.  
  2034. </div><!--posts-->
  2035.  
  2036.  
  2037. {block:PostNotes}
  2038. {PostNotes}
  2039. {/block:PostNotes}
  2040.  
  2041. {/block:Posts}
  2042.  
  2043. </div><!--small-nudge-->
  2044. </div><!--postbox-->
  2045. </div><!--nudge-->
  2046. </div><!--cont-->
  2047.  
  2048. <div id="yo-pls-dont-remove-thx"><a href="//glenthemes.tumblr.com" title="theme by glenthemes">glenthemes</a></div>
  2049.  
  2050. </body>
  2051. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement