API tools faq
paste
glenthemes

Theme [36]: Glitch

glenthemes
Dec 25th, 2020 (edited)
9,235
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 90.70 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Theme [36]: Glitch
  3. Made by glenthemes
  4.  
  5. Release date: 2020/12/25
  6. Last updated: 2025/05/19
  7.  
  8. What's new:
  9. ✱ fixed a bug when Privacy Badger browser extension is used
  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. IF YOU NEED HELP WITH THIS THEME:
  19. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
  20. glenthemes.tumblr.com/glitch-guide
  21.  
  22. [[ CREDITS ]]
  23.  
  24. - images from the official ghostrunner site
  25. ghostrunnergame.com
  26.  
  27. - dashboard style captions base code by annasthms
  28. annasthms.tumblr.com/post/178371187885
  29.  
  30. - css photosets by espoirthemes & annasthms
  31. annasthms.github.io/photosets
  32.  
  33. - change '.gifv' to '.gif' tutorial by felicitysmoak
  34. felicitysmoak.tumblr.com/post/188159105501
  35.  
  36. - responsive videos & iframes tutorial by nouvae
  37. nouvae.tumblr.com/post/17681541505
  38.  
  39. - hexagon design inspired by
  40. lovepik.com/image-611701906/pink-hexagonal-frame-light.html
  41. ------------------------------------------------------------------------>
  42.  
  43. <!DOCTYPE html>
  44. <html lang="en">
  45.  
  46. <head>
  47.  
  48. <title>{Title}</title>
  49. <link rel="shortcut icon" href="{Favicon}">
  50.  
  51. {block:Description}
  52. <meta name="description" content="{MetaDescription}" />
  53. {/block:Description}
  54.  
  55. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  56.  
  57. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  58. <script>
  59. (function($){
  60. $(document).ready(function(){
  61. $("a[title]").style_my_tooltips({
  62. tip_follows_cursor:true,
  63. tip_delay_time:120,
  64. tip_fade_speed:120,
  65. attribute:"title"
  66. });
  67. });
  68. })(jQuery);
  69. </script>
  70.  
  71. <script>
  72. $(document).ready(function(){
  73. // on first installation - ghostrunner jack render
  74. if($(".hexhaha").length){
  75. $(".trans").removeClass("def")
  76. }
  77.  
  78. $(".wrapper img").each(function(){
  79. checkifjack = $(this).attr('src');
  80. if(checkifjack.indexOf('static.tumblr.com/2pnwama/J3Cs1xaj0/jack_render.png') >=0){
  81. if($(".trans").hasClass("def")){
  82. $(".wrapper img").css("filter","saturate(105%) contrast(106%) hue-rotate(-10deg)");
  83. document.querySelector(":root").style.setProperty('--Hexagon-Image-Readjust-X', '15px');
  84. document.querySelector(":root").style.setProperty('--Hexagon-Image-Readjust-Y', '20px');
  85. document.querySelector(":root").style.setProperty('--Hexagon-Image-Enlarge', '20px');
  86. }
  87. }
  88. });
  89.  
  90. // if user is using the initial background on install
  91. var bg = $(".background").css("background-image").substr(3)
  92. .replace("(","").replace(")","").replace(/"/g,"");
  93.  
  94. if(bg.indexOf('64.media.tumblr.com/3be86edafba7c2784a4d4f0c194f5e36/aa56c24116a90bd2-9b/s2048x3072/ef684991d7a6ccb94a08b836e89a71c433252126.jpg') >=0) {
  95. $(".background").css("background-position","50% 20%")
  96. }
  97. });//end ready
  98. </script>
  99.  
  100. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  101. <script src="//npf-images-v3.github.io/script.js"></script>
  102. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  103. <style tmblr-npf>
  104. :root {
  105. --NPF-Caption-Spacing:{select:captions gap};
  106. --NPF-Image-Spacing:{select:photoset images spacing};
  107. }
  108.  
  109. .source-head + .comment > .npf_inst:first-child,
  110. .source-head + .comment > [data-npf*="audio"]:first-child {
  111. margin-top:var(--NPF-Caption-Spacing);
  112. }
  113.  
  114. a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
  115. padding-bottom:0!important;
  116. border-bottom:none!important;
  117. }
  118.  
  119. .spotify_audio_player {
  120. height:80px!important;
  121. }
  122.  
  123. .comment_container:first-child > .commenter:first-child {
  124. margin-top:0;
  125. }
  126. </style>
  127.  
  128. <script src="//cdn.jsdelivr.net/gh/robinpx/tumblr@master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  129.  
  130. <link href="//static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  131.  
  132. <link href="//fonts.googleapis.com/css?family=Karla|Rubik|Libre+Franklin|Space+Grotesk|Work+Sans" rel="stylesheet">
  133.  
  134. <link rel="stylesheet" href="//unpkg.com/@icon/linearicons/linearicons.css">
  135.  
  136. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  137.  
  138. <link rel="stylesheet" href="//unpkg.com/@icon/dripicons/dripicons.css">
  139.  
  140. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
  141.  
  142. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  143. <script src="//glen-themes.gitlab.io/thms/36/fkn-audio.js"></script>
  144. <script src="//glen-themes.gitlab.io/thms/36/theme_bs.js"></script>
  145. <script src="//glen-themes.gitlab.io/thms/36/thm-glitch.js"></script>
  146. <script src="//glen-themes.gitlab.io/thms/36/bopcorn.js"></script>
  147. <link href="//glen-themes.gitlab.io/thms/36/thm-glitch.css" rel="stylesheet">
  148.  
  149. <script>
  150. // minimal soundcloud player @ shythemes.tumblr
  151. // shythemes.tumblr.com/post/114792480648
  152. $(document).ready(function(){
  153. var soundcloud_btn = '{color:link}';
  154. $('.soundcloud_audio_player').each(function(){
  155. $(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%' });
  156. $(this).attr("style", "height:116px!important");
  157. });
  158.  
  159. $(".spotify_audio_player").each(function(){
  160. $(this).attr("style", "height:80px!important")
  161. })
  162. });
  163. </script>
  164.  
  165. <!-- unblue polls -->
  166. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  167. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  168. <style unblue-polls>
  169. .poll-post {
  170. --Poll-Question-Font-Size: {select:post font size};
  171.  
  172. --Poll-Option-Background-Color: transparent;
  173. --Poll-Option-Corner-Rounding: 0px;
  174. --Poll-Option-Border-Size: 1px;
  175. --Poll-Option-Border-Color: {color:post decoration lines};
  176. --Poll-Option-Padding: 15px;
  177. --Poll-Option-Font-Size: {select:post font size};
  178. --Poll-Option-Spacing: 10px;
  179. --Poll-Option-Text-Color: {color:text};
  180.  
  181. --Poll-Option-HOVER-Border-Color: {color:post decoration lines};
  182. --Poll-Option-HOVER-Background-Color: transparent;
  183. --Poll-Option-HOVER-Text-Color: {color:link};
  184. --Poll-Option-HOVER-Speed: 0.4s;
  185. }
  186.  
  187. .poll-see-results {
  188. padding-bottom:0!important;
  189. border-bottom:none!important;
  190. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  191. text-transform:uppercase;
  192. letter-spacing:0.5px;
  193. }
  194. </style>
  195.  
  196. <!-- npf audio player -->
  197. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  198. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  199. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  200. <script>
  201. tumblr_npf_audio({
  202. emptyTitleText: "Untitled track",
  203. emptyArtistText: "Untitled artist",
  204. emptyAlbumText: "Untitled album",
  205.  
  206. titleLabel: "",
  207. artistLabel: "",
  208. albumLabel: ""
  209. });
  210. </script>
  211. <style edit-npf-audio-player>
  212. .npf-audio-wrapper {
  213. --NPF-Audio-Buttons-Size: var(--Audio-Post-PlayButton-Size);
  214. --NPF-Audio-Buttons-Color: rgba({RGBcolor:post decoration lines},0.9);
  215. --NPF-Audio-Buttons-Padding: var(--Audio-Post-PlayButton-Padding);
  216. --NPF-Audio-Buttons-Spacing: calc(var(--p) + 0px);
  217. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Image-Size);
  218. --NPF-Audio-Image-Spacing: 0px;
  219.  
  220. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  221. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  222. }
  223.  
  224. .npf-audio-wrapper {
  225. position:relative;
  226. z-index:0;
  227. }
  228.  
  229. .npf-audio-background {
  230. margin-left:var(--p);
  231. }
  232.  
  233. .npf-audio-play, .npf-audio-pause {
  234. position:relative;
  235. z-index:0;
  236. }
  237.  
  238. .npf-audio-play:after, .npf-audio-pause:after {
  239. content:"";
  240. position:absolute;
  241. top:0;left:0;
  242. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
  243. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
  244. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  245. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  246. background:{color:post};
  247. border:1px solid rgba({RGBcolor:post decoration lines},0.8);
  248. border-radius:100%;
  249. z-index:-1;
  250. }
  251.  
  252. .npf-audio-play svg { margin-left:1px; }
  253. .npf-audio-pause svg { margin-left:0; }
  254.  
  255. figcaption.audio-caption,
  256. figcaption.audio-caption ~ audio[controls]{
  257. display:none;
  258. }
  259.  
  260. .npf-audio-image {
  261. position:absolute;
  262. top:0;left:0;
  263. z-index:-1;
  264. }
  265.  
  266. .npf-audio-details {
  267. color:{color:special text};
  268. }
  269.  
  270. .npf-audio-details > * + * {
  271. margin-top:-1px;
  272. }
  273.  
  274. .npf-audio-title-label,
  275. .npf-audio-artist-label,
  276. .npf-audio-album-label {
  277. font-weight: bold;
  278. }
  279. </style>
  280.  
  281. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  282. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  283.  
  284. <!---------------- THEME CUSTOMIZATION OPTIONS ---------------->
  285. <!-------- IMAGES -------->
  286. <meta name="image:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D408;&#x1D40C;&#x1D400;&#x1D406;&#x1D404;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  287. <meta name="image:loading screen background" content="//static.tumblr.com/2pnwama/w1cs1xagm/aqwjphi_16_9.png"/>
  288. <meta name="image:loading screen pattern overlay" content="//static.tumblr.com/2pnwama/EDbs1xag1/ghostrunner-pattern.png"/>
  289.  
  290. <meta name="image:main background" content="//64.media.tumblr.com/3be86edafba7c2784a4d4f0c194f5e36/aa56c24116a90bd2-9b/s2048x3072/ef684991d7a6ccb94a08b836e89a71c433252126.jpg"/>
  291. <meta name="image:main background pattern overlay" content="//static.tumblr.com/2pnwama/EDbs1xag1/ghostrunner-pattern.png"/>
  292.  
  293. <meta name="image:sidebar image" content="//static.tumblr.com/2pnwama/J3Cs1xaj0/jack_render.png"/>
  294.  
  295. <!----------------- COLORS ----------------->
  296. <!-- loading screen -->
  297. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40B;&#x1D40E;&#x1D400;&#x1D403;&#x1D408;&#x1D40D;&#x1D406; &#x1D412;&#x1D402;&#x1D411;&#x1D404;&#x1D404;&#x1D40D; &#x2CE;&#x2CA;&#x2D7;" content="">
  298. <meta name="color:loading screen background" content="#090909"/>
  299. <meta name="color:loading icon" content="#c33668"/>
  300.  
  301. <!-- outer frame -->
  302. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40E;&#x1D414;&#x1D413;&#x1D404;&#x1D411; &#x1D405;&#x1D411;&#x1D400;&#x1D40C;&#x1D404; &#x2CE;&#x2CA;&#x2D7;" content="">
  303. <meta name="color:frame" content="#0f0f0f"/>
  304. <meta name="color:frame inner shadow" content="#0f0f0f"/>
  305. <meta name="color:frame border" content="#c60e4d"/>
  306.  
  307. <!-- toplinks -->
  308. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D413;&#x1D40E;&#x1D40F; &#x1D40B;&#x1D408;&#x1D40D;&#x1D40A;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  309. <meta name="color:toplinks background" content="#0f0f0f"/>
  310. <meta name="color:toplinks border" content="#c60e4d"/>
  311. <meta name="color:toplinks text" content="#d93c74"/>
  312. <meta name="color:toplinks text hover" content="#fcfcfc"/>
  313. <meta name="color:toplinks glitch 1" content="#f13e7b"/>
  314. <meta name="color:toplinks glitch 2" content="#f13e7b"/>
  315.  
  316. <!-- music player -->
  317. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40C;&#x1D414;&#x1D412;&#x1D408;&#x1D402; &#x1D40F;&#x1D40B;&#x1D400;&#x1D418;&#x1D404;&#x1D411; &#x2CE;&#x2CA;&#x2D7;" content="">
  318. <meta name="color:music player controls" content="#d93c74"/>
  319. <meta name="color:music player text" content="#d93c74"/>
  320.  
  321. <!-- left sidebar -->
  322. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40B;&#x1D404;&#x1D405;&#x1D413; &#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411; &#x2CE;&#x2CA;&#x2D7;" content="&NewLine;">
  323. <meta name="color:left sidebar quote" content="#C9314C"/>
  324. <meta name="color:sidebar links" content="#C9314C"/>
  325. <meta name="color:sidebar accent" content="#C9314C"/>
  326. <meta name="color:sidebar desc text" content="#fc4085"/>
  327.  
  328. <!-- right sidebar -->
  329. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D411;&#x1D408;&#x1D406;&#x1D407;&#x1D413; &#x1D412;&#x1D408;&#x1D403;&#x1D404;&#x1D401;&#x1D400;&#x1D411; &#x2CE;&#x2CA;&#x2D7;" content="">
  330. <meta name="color:hexagon background" content="#21142f"/>
  331. <meta name="color:hexagon center glow" content="#d62c48"/>
  332. <meta name="color:hexagon border" content="#f13072"/>
  333. <meta name="color:hexagon outer glow" content="#f13072"/>
  334.  
  335. <!-- posts -->
  336. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  337. <meta name="color:post" content="#0f0f0f"/>
  338. <meta name="color:text" content="#aaa"/>
  339. <meta name="color:link" content="#f15170"/>
  340. <meta name="color:special text 1" content="#fe3b80"/>
  341. <meta name="color:special text 2" content="#f56a6f"/>
  342. <meta name="color:username links" content="#f15170"/>
  343. <meta name="color:post decoration lines" content="#c60e4d"/>
  344. <meta name="color:permalink" content="#d93c74"/>
  345. <meta name="color:post buttons" content="#f13072"/>
  346.  
  347. <!-- pagination -->
  348. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40F;&#x1D400;&#x1D406;&#x1D408;&#x1D40D;&#x1D400;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D; &#x2CE;&#x2CA;&#x2D7;" content="">
  349. <meta name="color:next page button background 1" content="#c60e4d"/>
  350. <meta name="color:next page button background 2" content="#d72e47"/>
  351. <meta name="color:next page button text" content="#000"/>
  352.  
  353. <!-- misc -->
  354. <meta name="color:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40E;&#x1D413;&#x1D407;&#x1D404;&#x1D411;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  355. <meta name="color:scrollbar" content="#c60e4d"/>
  356. <meta name="color:bottom decorations" content="#de1056"/>
  357.  
  358. <!----------------- OPTIONS / DROPDOWNS ----------------->
  359. <meta name="select:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40C;&#x1D40E;&#x1D411;&#x1D404; &#x1D40E;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  360. <meta name="select:loading screen icon size" title="26px" content="26px">
  361. <meta name="select:loading screen icon size" title="30px" content="30px">
  362. <meta name="select:loading screen icon size" title="34px" content="34px">
  363.  
  364. <meta name="select:frame size" title="36px" content="36px">
  365. <meta name="select:frame size" title="30px" content="30px">
  366. <meta name="select:frame size" title="48px" content="48px">
  367.  
  368. <meta name="select:frame inner shadow size" title="110px" content="110px">
  369. <meta name="select:frame inner shadow size" title="none" content="0px">
  370. <meta name="select:frame inner shadow size" title="40px" content="40px">
  371. <meta name="select:frame inner shadow size" title="69px" content="69px">
  372. <meta name="select:frame inner shadow size" title="140px" content="140px">
  373.  
  374. <meta name="select:background blur" title="10px" content="10px">
  375. <meta name="select:background blur" title="none" content="0px">
  376. <meta name="select:background blur" title="4px" content="4px">
  377. <meta name="select:background blur" title="7px" content="7px">
  378.  
  379. <meta name="select:toplinks font size" title="13px" content="13px">
  380. <meta name="select:toplinks font size" title="15px" content="15px">
  381.  
  382. <meta name="select:hexagon border size" title="3px" content="3px">
  383. <meta name="select:hexagon border size" title="1px" content="1px">
  384. <meta name="select:hexagon border size" title="2px" content="2px">
  385. <meta name="select:hexagon border size" title="4px" content="4px">
  386.  
  387. <!---- SIDEBAR OPTIONS ---->
  388. <meta name="select:sidebar width" title="169px" content="169px">
  389. <meta name="select:sidebar width" title="150px" content="150px">
  390. <meta name="select:sidebar width" title="180px" content="180px">
  391. <meta name="select:sidebar width" title="200px" content="200px">
  392. <meta name="select:sidebar width" title="225px" content="225px">
  393.  
  394. <meta name="select:left sidebar quote font size" title="13px" content="13px">
  395. <meta name="select:left sidebar quote font size" title="11px" content="11px">
  396. <meta name="select:left sidebar quote font size" title="15px" content="15px">
  397. <meta name="select:left sidebar quote font size" title="17px" content="17px">
  398.  
  399. <meta name="select:left sidebar quote border gap" title="13px" content="13px">
  400. <meta name="select:left sidebar quote border gap" title="11px" content="11px">
  401. <meta name="select:left sidebar quote border gap" title="15px" content="15px">
  402. <meta name="select:left sidebar quote border gap" title="17px" content="17px">
  403.  
  404. <meta name="select:left sidebar quote text align" title="right" content="right">
  405. <meta name="select:left sidebar quote text align" title="left" content="left">
  406. <meta name="select:left sidebar quote text align" title="center" content="center">
  407. <meta name="select:left sidebar quote text align" title="justify" content="justify">
  408.  
  409. <!-- right sidebar -->
  410. <meta name="select:right sidebar title top gap" title="24px" content="24px">
  411. <meta name="select:right sidebar title top gap" title="18px" content="18px">
  412. <meta name="select:right sidebar title top gap" title="30px" content="30px">
  413.  
  414. <meta name="select:desc font size" title="13px" content="13px">
  415. <meta name="select:desc font size" title="11px" content="11px">
  416. <meta name="select:desc font size" title="15px" content="15px">
  417.  
  418. <meta name="select:desc text align" title="justify" content="justify">
  419. <meta name="select:desc text align" title="left" content="left">
  420. <meta name="select:desc text align" title="right" content="right">
  421. <meta name="select:desc text align" title="center" content="center">
  422.  
  423. <!---- POST OPTIONS ---->
  424. <meta name="select:&#x1F479;&#x2002;&#x2501;&#x2002;&#x1D40F;&#x1D40E;&#x1D412;&#x1D413; &#x1D40E;&#x1D40F;&#x1D413;&#x1D408;&#x1D40E;&#x1D40D;&#x1D412; &#x2CE;&#x2CA;&#x2D7;" content="">
  425. <meta name="select:posts top gap" title="69px" content="69px">
  426. <meta name="select:posts top gap" title="50px" content="50px">
  427. <meta name="select:posts top gap" title="75px" content="75px">
  428.  
  429. <meta name="select:post width" title="420px" content="420px">
  430. <meta name="select:post width" title="450px" content="450px">
  431. <meta name="select:post width" title="500px" content="500px">
  432. <meta name="select:post width" title="540px" content="540px">
  433.  
  434. <meta name="select:post padding" title="15px" content="15px">
  435. <meta name="select:post padding" title="10px" content="10px">
  436. <meta name="select:post padding" title="20px" content="20px">
  437. <meta name="select:post padding" title="none" content="0px">
  438.  
  439. <meta name="select:post font size" title="12px" content="12px">
  440. <meta name="select:post font size" title="11px" content="11px">
  441. <meta name="select:post font size" title="13px" content="13px">
  442. <meta name="select:post font size" title="14px" content="14px">
  443.  
  444. <meta name="select:post text line height" title="1.7em" content="1.7em">
  445. <meta name="select:post text line height" title="1.6em" content="1.6em">
  446. <meta name="select:post text line height" title="1.8em" content="1.8em">
  447. <meta name="select:post text line height" title="1.9em" content="1.9em">
  448.  
  449. <meta name="select:photoset images spacing" title="4px" content="4px">
  450. <meta name="select:photoset images spacing" title="2px" content="2px">
  451. <meta name="select:photoset images spacing" title="6px" content="6px">
  452. <meta name="select:photoset images spacing" title="10px" content="10px">
  453.  
  454. <meta name="select:captions gap" title="12px" content="12px">
  455. <meta name="select:captions gap" title="15px" content="15px">
  456.  
  457. <meta name="select:post buttons size" title="12px" content="12px">
  458. <meta name="select:post buttons size" title="10px" content="10px">
  459. <meta name="select:post buttons size" title="14px" content="14px">
  460. <meta name="select:post buttons size" title="16px" content="16px">
  461.  
  462. <meta name="select:post buttons spacing" title="10px" content="10px">
  463. <meta name="select:post buttons spacing" title="6px" content="6px">
  464. <meta name="select:post buttons spacing" title="8px" content="8px">
  465. <meta name="select:post buttons spacing" title="12px" content="12px">
  466.  
  467. <meta name="select:post spacing" title="40px" content="40px">
  468. <meta name="select:post spacing" title="30px" content="30px">
  469. <meta name="select:post spacing" title="50px" content="50px">
  470.  
  471. <meta name="select:post side gaps" title="50px" content="50px">
  472. <meta name="select:post side gaps" title="40px" content="40px">
  473. <meta name="select:post side gaps" title="60px" content="60px">
  474. <meta name="select:post side gaps" title="70px" content="70px">
  475.  
  476. <!----------------- TOGGLE OPTIONS ----------------->
  477. <meta name="if:sidebar hexagon image contained" content="0">
  478. <meta name="if:reblog separators" content="0"/>
  479. <meta name="if:full width reblog separators" content="1"/>
  480.  
  481. <!----------------- CUSTOM TEXT FIELDS ----------------->
  482. <meta name="text:left sidebar quote" content="for big text&#x2C; use&#x3A; &#x3C;br&#x3E;&#x3C;big&#x3E;test&#x3C;/big&#x3E;">
  483.  
  484. <meta name="text:&#917536;&#x2060;" content="&#x263D;&#x2727;&#xA8;*&#x3003;.&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;.&#x3003;*&#xA8;&#x2727;&#x263E;&NewLine;">
  485.  
  486. <meta name="text:customlink 1 name" content="sample link">
  487. <meta name="text:customlink 1 URL" content="//tumblr.com/dashboard">
  488. <meta name="text:customlink 2 name" content="">
  489. <meta name="text:customlink 2 URL" content="">
  490. <meta name="text:customlink 3 name" content="">
  491. <meta name="text:customlink 3 URL" content="">
  492. <meta name="text:customlink 4 name" content="">
  493. <meta name="text:customlink 4 URL" content="">
  494. <meta name="text:customlink 5 name" content="">
  495. <meta name="text:customlink 5 URL" content="">
  496. <meta name="text:customlink 6 name" content="">
  497. <meta name="text:customlink 6 URL" content="">
  498.  
  499. <meta name="text:&#917536;&#x2060;&#x2060;" content="&#x263D;&#x2727;&#xA8;*&#x3003;.&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;.&#x3003;*&#xA8;&#x2727;&#x263E;&NewLine;">
  500.  
  501. <meta name="text:hexagon adjust axisX" content="140px">
  502. <meta name="text:hexagon adjust axisY" content="0px">
  503. <meta name="text:hexagon enlarge" content="30px">
  504.  
  505. <meta name="text:&#917536;&#x2060;&#x2060;&#x2060;" content="&#x263D;&#x2727;&#xA8;*&#x3003;.&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;.&#x3003;*&#xA8;&#x2727;&#x263E;&NewLine;">
  506.  
  507. <meta name="text:right sidebar title" content="">
  508. <meta name="text:right description" content="">
  509.  
  510. <meta name="text:&#917536;&#x2060;&#x2060;&#x2060;&#x2060;" content="&#x263D;&#x2727;&#xA8;*&#x3003;.&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;.&#x3003;*&#xA8;&#x2727;&#x263E;&NewLine;">
  511.  
  512. <!-- music player -->
  513. <meta name="text:how to link music" content="linktr.ee/direct_file_links">
  514. <meta name="text:song 1 name" content="Daniel Deluxe - Vendetta">
  515. <meta name="text:song 1 MP3 URL" content="https://rhizo.gitlab.io/m/Vendetta.mp3">
  516. <meta name="text:song 2 name" content="Aviators (ft. Nirre) - Cities in the Distance">
  517. <meta name="text:song 2 MP3 URL" content="https://rhizo.gitlab.io/m/Cities_in_the_Distance__Instrumental_.mp3">
  518. <meta name="text:song 3 name" content="The Toxic Avenger - Spaced">
  519. <meta name="text:song 3 MP3 URL" content="https://rhizo.gitlab.io/m/Spaced.mp3">
  520.  
  521. <meta name="text:&#917536;&#x2060;&#x2060;&#x2060;&#x2060;&#x2060;" content="&#x263D;&#x2727;&#xA8;*&#x3003;.&#xB8;&#xB8;&#x2727;&#xB8;&#xB8;.&#x3003;*&#xA8;&#x2727;&#x263E;&NewLine;">
  522.  
  523. <meta name="text:bottom left text" content="the sky is falling">
  524. <meta name="text:bottom right text" content="I'm my own antichrist">
  525.  
  526. <!------------------------------------------------->
  527.  
  528. <style type="text/css">
  529.  
  530. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  531.  
  532. @font-face { font-family: "squarethings"; src: url('//glen-assets.github.io/fonts/squarethings.ttf'); }
  533.  
  534. @font-face { font-family: "squarewave"; src: url('//glen-assets.github.io/fonts/Squarewave.ttf'); }
  535.  
  536. @font-face { font-family: "neuborn"; src: url('//glen-assets.github.io/fonts/Neuborn Regular.ttf'); }
  537.  
  538. @font-face { font-family: "industry"; src: url('//glen-assets.github.io/fonts/Industry-Medium.ttf'); }
  539.  
  540. @font-face { font-family: "zuptype"; src: url('//glen-assets.github.io/fonts/zuptype_pica.ttf'); }
  541.  
  542. @font-face { font-family: "7pixelsOfPerfection"; src: url('//glen-assets.github.io/fonts/7pixelsOfPerfection.ttf'); }
  543.  
  544. /*--------------------TOOLTIPS--------------------*/
  545. #s-m-t-tooltip {
  546. padding:4px 10px;
  547. margin:16px;
  548. background-color:{color:post};
  549. border:1px solid rgba({RGBcolor:post decoration lines},0.69);
  550. font-family:work sans;
  551. font-size:9px;
  552. letter-spacing:0.5px;
  553. text-transform:uppercase;
  554. color:{color:special text 1};
  555. z-index:99;
  556. max-width:40vw;
  557. }
  558.  
  559. /*--------------------TUMBLR CONTROLS--------------------*/
  560. iframe#tumblr_controls, .iframe-controls--desktop {
  561. top:calc(((var(--Outer-Frame-Size) - (34px * var(--Tumblr-Controls-Resize))) / 2) - (10px * var(--Tumblr-Controls-Resize)) + (2px * var(--Tumblr-Controls-Resize)))!important;
  562. right:calc(((var(--Outer-Frame-Size) - (34px * var(--Tumblr-Controls-Resize))) / 2) - (10px * var(--Tumblr-Controls-Resize)) + (2px * var(--Tumblr-Controls-Resize)) + 10px)!important;
  563. position:fixed!important;
  564.  
  565. transform:scale(var(--Tumblr-Controls-Resize),var(--Tumblr-Controls-Resize));
  566.  
  567. transform-origin:100% 0;
  568. -webkit-transform-origin:100% 0;
  569. -moz-transform-origin:100% 0;
  570. -o-transform-origin:100% 0;
  571. -ms-transform-origin:100% 0;
  572. z-index:999999!important;
  573. }
  574.  
  575. :root {
  576. --Tumblr-Controls-Resize:0.69;
  577. }
  578.  
  579. /*---------------TEXT HIGHLIGHT---------------*/
  580. ::selection {
  581. background:#BBD3FD;
  582. }
  583.  
  584. ::-moz-selection {
  585. background:#BBD3FD;
  586. }
  587.  
  588. /*--------------------BASICS--------------------*/
  589. html {
  590. overflow:hidden;
  591. height:100%;
  592. -webkit-font-smoothing:antialiased;
  593. -moz-osx-font-smoothing:grayscale;
  594. }
  595.  
  596. body {
  597. background:{color:frame};
  598. font-family:consolas-alt;
  599. line-height:1.6em;
  600. font-size:12px;
  601. text-align:left;
  602. overflow:auto;
  603. }
  604.  
  605. blockquote {
  606. padding-left:10px;
  607. margin:10px;
  608. border-left:1px solid {color:post decoration lines};
  609. }
  610.  
  611. a {
  612. color:{color:link};
  613. text-decoration:none;
  614. -webkit-transition: all 0.4s ease-in-out;
  615. -moz-transition: all 0.4s ease-in-out;
  616. -o-transition: all 0.4s ease-in-out;
  617. }
  618.  
  619. pre, code {
  620. white-space:pre-wrap;
  621. }
  622.  
  623. hr {
  624. width:69%;
  625. border-width:0px;
  626. height:1px;
  627. background-color:{color:post decoration lines};
  628. }
  629.  
  630. img {vertical-align:middle;}
  631.  
  632. a {
  633. text-decoration:none;
  634. color:{color:link};
  635. }
  636.  
  637. p:first-child {
  638. margin-top:0;
  639. }
  640.  
  641. p:last-child {
  642. margin-bottom:0;
  643. }
  644.  
  645. h1, h2, h3, h4, h5, h6 {
  646. margin:calc(var(--Heading-Margins) * 2) 0;
  647. font-family:industry;
  648. font-size:calc({select:post font size} + 2.5px);
  649. text-transform:uppercase;
  650. letter-spacing:.7px;
  651. font-style:italic;
  652. font-weight:normal;
  653. color:{color:special text 1};
  654. }
  655.  
  656. p {
  657. margin:var(--Paragraph-Margins) 0;
  658. }
  659.  
  660. [ignore-this]{
  661. position:absolute;
  662. bottom:0;left:0;
  663. width:0;height:0;
  664. visibility:hidden;
  665. font-size:0;
  666. line-height:0;
  667. z-index:-99;
  668. }
  669.  
  670. .post.link .path {
  671. display:block;
  672. padding:0.69em;
  673. border:1px solid rgba({RGBcolor:post decoration lines},0.420);
  674. border-radius:2px;
  675. text-align:center;
  676. }
  677.  
  678. .flex {
  679. display:flex;
  680. align-items:center;
  681. }
  682.  
  683. .flex.init {
  684. align-items:baseline;
  685. }
  686.  
  687. .flex.bottom {
  688. align-items:flex-end;
  689. }
  690.  
  691. .flex.center {
  692. justify-content:center;
  693. }
  694.  
  695. .flex.space-between {
  696. justify-content:space-between;
  697. }
  698.  
  699. .flex.flex-end {
  700. justify-content:flex-end;
  701. }
  702.  
  703. /*------------ BACKGROUND IMAGE ------------*/
  704. .some {
  705. position:fixed;
  706. top:0;left:0;right:0;
  707. margin:0 auto;
  708. text-align:center;
  709. z-index:-1;
  710. }
  711.  
  712. .bacon {
  713. display:inline-block;
  714. }
  715.  
  716. .for {
  717. height:100vh;
  718. display:table;
  719. }
  720.  
  721. .breakfast {
  722. display:table-cell;
  723. vertical-align:middle;
  724. }
  725.  
  726. .background {
  727. position:relative;
  728. width:calc(100vw - (var(--Outer-Frame-Size) * 2) - (var(--Inner-Frame-Border-Size) * 2) + (var(--Background-Blur-Amount) * 2));
  729. height:calc(100vh - (var(--Outer-Frame-Size) * 2) - (var(--Inner-Frame-Border-Size) * 2) + (var(--Background-Blur-Amount) * 2));
  730. background-image:url({image:main background});
  731. background-position:center;
  732. background-size:cover;
  733. background-repeat:no-repeat;
  734. filter:blur(var(--Background-Blur-Amount))
  735. }
  736.  
  737. .background:after {
  738. content:"";
  739. position:absolute;
  740. top:0;left:0;
  741. width:100%;
  742. height:100%;
  743. box-shadow:inset 0 0 var(--Inner-Frame-Shadow-Size) 0 var(--Inner-Frame-Shadow-Color);
  744. }
  745.  
  746. .pattern-overlay {
  747. position:absolute;
  748. top:0;left:0;
  749. width:100%;
  750. height:100%;
  751. background-image:url({image:main background pattern overlay});
  752. background-repeat:repeat;
  753. background-size:initial;
  754. }
  755.  
  756. /*------------ CUSTOMIZATION OPTIONS ------------*/
  757. /* you don't need to touch this unless there's something very specific that you want to change */
  758. :root {
  759.  
  760. /*---- LOADING SCREEN ----*/
  761. --Loading-Icon-Color:{color:loading icon};
  762.  
  763. /*---- OUTER FRAME ----*/
  764. --Outer-Frame-Background:{color:frame};
  765. --Outer-Frame-Size:{select:frame size};
  766.  
  767. /*---- MAIN SCREEN WALLPAPER ----*/
  768. --Background-Blur-Amount:{select:background blur};
  769.  
  770. /*---- INNER FRAME ----*/
  771. --Inner-Frame-Shadow-Size:{select:frame inner shadow size};
  772. --Inner-Frame-Shadow-Color:{color:frame inner shadow};
  773. --Inner-Frame-Border-Size:1px;
  774. --Inner-Frame-Color:{color:frame border};
  775. --Inner-Frame-Bottom-Bump-Height:36px;
  776. --Inner-Frame-Bottom-Bump-Length:69%;
  777. --Inner-Frame-Bottom-Fade-Amount:1%; /* use 0% for solid color */
  778.  
  779. /*---- TOPLINKS ----*/
  780. --TopLinks-Bump-Length:auto;
  781. --TopLinks-Bump-Height:25px;
  782. --TopLinks-Width:130px;
  783. --TopLinks-Padding:7px;
  784. --TopLinks-Background:{color:toplinks background};
  785. --TopLinks-Border-Size:1px; /* I don't recommend changing this */
  786. --TopLinks-Border-Color:{color:toplinks border};
  787. --TopLinks-Font-Size:{select:toplinks font size};
  788. --TopLinks-Text-Color:{color:toplinks text};
  789. --TopLinks-Text-Color-On-Hover:{color:toplinks text hover};
  790. --TopLinks-Text-Glitch-Color-1:{color:toplinks glitch 1};
  791. --TopLinks-Text-Glitch-Color-2:{color:toplinks glitch 2};
  792.  
  793. --TopLinks-Spacing:10px;
  794.  
  795.  
  796. /*---- MAIN CONTENT ----*/
  797. --Container-Width:calc(({select:post width} + ({select:post padding} * 2)) * 1.4);
  798.  
  799. /*---- BOTTOM CORNER DECORATIONS ----*/
  800. --Corner-Decorations-Margin:17px;
  801.  
  802. --Corner-Decorations-Color:{color:bottom decorations};
  803.  
  804. --Corner-Boxes-Icon-Size:19px;
  805. --Corner-Boxes-Padding:4px;
  806. --Corner-Boxes-Border-Thickness:1px;
  807. --Corner-Boxes-Spacing:8px;
  808. --Corner-Boxes-Dots-Spacing:3px;
  809.  
  810. --Mini-Squares-Size:2px;
  811. --Mini-Squares-Spacing:2px;
  812.  
  813. --Corner-Mini-Text-Font-Size:14px;
  814. --Corner-Mini-Text-Bottom-Gap:3px;
  815.  
  816. --Round-X-Size:9px;
  817. --Round-X-Padding:2px;
  818. --Round-X-Border-Thickness:1px;
  819. --Round-X-Spacing:10px;
  820. --Round-X-Last-Gap:15px;
  821.  
  822. /*---- MUSIC PLAYER ----*/
  823. --Music-Controls-Color:{color:music player controls};
  824.  
  825. --Music-Controls-Size:16px;
  826. --Music-Controls-Spacing:13px;
  827.  
  828. --Play-Button-Padding:9px;
  829.  
  830. --Music-Text-Top-Gap:7px;
  831. --Music-Text-Font-Size:9px;
  832. --Music-Text-Color:{color:music player text};
  833.  
  834. /*-----SIDEBAR-----*/
  835. --Sidebar-Links-Top-Gap:6px;
  836. --Sidebar-CustomLinks-Line-Spacing:7px;
  837. --CustomLinks-Spacing:9px;
  838.  
  839. --Hexagon-Image-Readjust-X:{text:hexagon adjust axisX};
  840. --Hexagon-Image-Readjust-Y:{text:hexagon adjust axisY};
  841. --Hexagon-Image-Enlarge:{text:hexagon enlarge};
  842.  
  843. --Hexagon-Center-Glow:{color:hexagon center glow};
  844. --Hexagon-Main-Background:{color:hexagon background};
  845. --Hexagon-Border-Size:{select:hexagon border size};
  846. --Hexagon-Border-Color:{color:hexagon border};
  847. --Hexagon-Border-Spacing:12px;
  848.  
  849. --Hexagon-Outer-Glow-Size:14px;
  850. --Hexagon-Outer-Glow-Color:{color:hexagon outer glow};
  851.  
  852. --Sidebar-TinyBox-Size:18px;
  853. --Sidebar-ShortTitle-Left-Gap:11px;
  854.  
  855. /*-----MISC-----*/
  856. --Scrollbar-Padding:17px;
  857.  
  858. /*-----POST OPTIONS-----*/
  859. --Posts-Avatar-Size:25px; /* reblogger avatar size */
  860. --Captions-Gap:{select:captions gap};
  861.  
  862. --Paragraph-Margins:0.69em;
  863. --Heading-Margins:0.5em;
  864.  
  865. --Audio-Post-Album-Image-Size:64px;
  866. --Audio-Post-PlayButton-Size:15px;
  867. --Audio-Post-PlayButton-Padding:9px;
  868.  
  869. --Post-Buttons-Size:{select:post buttons size};
  870.  
  871. --NextPage-Button-Margin:0px;
  872. --NextPage-Button-Width:auto;
  873. --NextPage-Button-Padding:7px;
  874. --NextPage-Font-Size:8px;
  875. --NextPage-Button-Arrow-Size:13px;
  876. --NextPage-Button-Line-Thickness:12px;
  877.  
  878. --PostDecor-Line-Thickness:1px;
  879. --PostDecor-Dent-Height:6px;
  880.  
  881. --Quote-Decor-Line-Thickness:1px;
  882. --Quote-Decor-Slant-Size:30px;
  883. }
  884.  
  885. /*------------ LOADING SCREEN ------------*/
  886. #yokotaro {
  887. position:fixed;
  888. top:0;left:0;right:0;
  889. margin:0 auto;
  890. text-align:center;
  891. background-color:{color:loading screen background};
  892. background-image:url({image:loading screen background});
  893. background-repeat:no-repeat;
  894. background-size:cover;
  895. background-position:center;
  896. z-index:420;
  897. }
  898.  
  899. #yokotaro:before {
  900. position:absolute;
  901. content:"";
  902. top:0;left:0;
  903. width:100%;
  904. height:100%;
  905. background-image:url({image:loading screen pattern overlay});
  906. background-repeat:repeat;
  907. }
  908.  
  909. #yokotaro:after {
  910. position:absolute;
  911. content:"";
  912. top:0;left:0;
  913. width:100%;
  914. height:100%;
  915. box-shadow:inset 0 0 calc(var(--Outer-Frame-Size) * 2) 0 var(--Loading-Screen-Background);
  916. }
  917.  
  918. .become {
  919. display:inline-block;
  920. }
  921.  
  922. .as {
  923. height:100vh;
  924. display:table;
  925. }
  926.  
  927. .gods {
  928. display:table-cell;
  929. vertical-align:middle;
  930. }
  931.  
  932. .gods svg {
  933. width:{select:loading screen icon size};
  934. height:{select:loading screen icon size};
  935. fill:var(--Loading-Icon-Color);
  936. animation:2.69s linear 0s infinite what;
  937. }
  938.  
  939. @keyframes what {
  940. from {
  941. transform:rotate(0deg);
  942. }
  943.  
  944. to {
  945. transform:rotate(360deg);
  946. }
  947. }
  948.  
  949. /*------------ MAIN CONTENT CONTAINER ------------*/
  950. #horizontal-a {
  951. position:fixed;
  952. top:0;left:0;right:0;
  953. margin:0 auto;
  954. width:100vw;
  955. height:100vh;
  956. text-align:center;
  957. z-index:-1;
  958. }
  959.  
  960. #horizontal-b {
  961. margin-top:calc(var(--Outer-Frame-Size) + var(--Inner-Frame-Border-Size));
  962. margin-left:calc(var(--Outer-Frame-Size) + var(--Inner-Frame-Border-Size));
  963. width:calc(100% - (var(--Outer-Frame-Size) * 2) - (var(--Inner-Frame-Border-Size) * 2));
  964. height:calc(100% - (var(--Outer-Frame-Size) * 2) - (var(--Inner-Frame-Border-Size) * 2));
  965. overflow:auto;
  966. }
  967.  
  968. #horizontal-c {
  969. display:inline-block;
  970. }
  971.  
  972. .main {
  973. position:relative;
  974. margin:calc(((var(--TopLinks-Bump-Height) * 1.414) / 2) + var(--Inner-Frame-Border-Size) + {select:posts top gap}) 0;
  975. font-family:karla;
  976. text-align:left;
  977. }
  978.  
  979. /*---------------SCROLLBAR---------------*/
  980. ::-webkit-scrollbar {
  981. width:var(--Scrollbar-Padding);
  982. height:var(--Scrollbar-Padding);
  983. background-color:transparent;
  984. }
  985.  
  986. ::-webkit-scrollbar-thumb {
  987. background-color:{color:scrollbar};
  988. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  989. background-clip:padding-box;
  990. }
  991.  
  992. ::-webkit-scrollbar-corner {
  993. background:transparent;
  994. }
  995.  
  996. /*--------- LEFT SIDEBAR ---------*/
  997. /* i am sorry for the damage this will cause you */
  998. .gauche {
  999. position:fixed;
  1000. margin-top:calc((0px + var(--Inner-Frame-Border-Size) + {select:posts top gap}) * -1);
  1001. margin-left:calc(({select:sidebar width} + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2) + {select:post side gaps}) * -1);
  1002. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1003. height:calc(98% - ((var(--TopLinks-Bump-Height) * 1.414) / 2) - var(--Inner-Frame-Border-Size) - var(--Corner-Decorations-Margin) - var(--Outer-Frame-Size) - var(--Inner-Frame-Border-Size) - ((var(--Inner-Frame-Bottom-Bump-Height) * 1.414) / 2) - var(--Corner-Boxes-Icon-Size) - (var(--Corner-Boxes-Padding) * 2) - (var(--Corner-Boxes-Border-Thickness) * 2));
  1004. display:table;
  1005. }
  1006.  
  1007. .muffin {
  1008. display:table-cell;
  1009. vertical-align:middle;
  1010. }
  1011.  
  1012. .bigquote {
  1013. display:table;
  1014. vertical-align:middle;
  1015. width:100%;
  1016. }
  1017.  
  1018. .bbt {
  1019. display:table-cell;
  1020. padding-right:{select:left sidebar quote border gap};
  1021. background-image:linear-gradient(to bottom, rgba({RGBcolor:left sidebar quote},0.69) 0%, {color:left sidebar quote} 69%);
  1022. font-family:space grotesk;
  1023. font-size:{select:left sidebar quote font size};
  1024. text-transform:uppercase;
  1025. color:{color:left sidebar quote};
  1026. font-style:italic;
  1027. letter-spacing:0.069em;
  1028. text-align:{select:left sidebar quote text align};
  1029. line-height:1.8em;
  1030. -webkit-background-clip:text;
  1031. -webkit-text-fill-color:transparent;
  1032. }
  1033.  
  1034. .bbt big {
  1035. font-size:calc({select:left sidebar quote font size} + 5px);
  1036. font-weight:bold;
  1037. text-shadow:-0.569em -0.169em 0 rgba({RGBcolor:left sidebar quote},0.2), 0.569em 0.169em 0 rgba({RGBcolor:left sidebar quote},0.4);
  1038. }
  1039.  
  1040. .longboi {
  1041. display:table-cell;
  1042. width:1px;
  1043. height:100%;
  1044. background-image:linear-gradient(to bottom, transparent 0%, {color:sidebar accent} 100%);
  1045. }
  1046.  
  1047. .linques {
  1048. margin-top:calc({select:left sidebar quote border gap} + var(--Sidebar-Links-Top-Gap));
  1049. margin-left:auto;
  1050. margin-right:0;
  1051. width:80%;
  1052. }
  1053.  
  1054. .linques a {
  1055. display:block;
  1056. padding:calc(var(--CustomLinks-Spacing) / 2) 0;
  1057. }
  1058.  
  1059. .linques a:first-of-type {padding-top:0}
  1060. .linques a:last-of-type {padding-bottom:0}
  1061.  
  1062. .linques span {
  1063. text-transform:uppercase;
  1064. font-family:'7pixelsofperfection';
  1065. font-size:calc({select:desc font size} + 5px);
  1066. text-transform:uppercase;
  1067. letter-spacing:1px;
  1068. color:{color:sidebar links};
  1069. white-space:nowrap;
  1070. }
  1071.  
  1072. .bloop {
  1073. margin:0 var(--Sidebar-CustomLinks-Line-Spacing);
  1074. flex:0;
  1075. height:1px;
  1076. background:{color:sidebar accent};
  1077. }
  1078.  
  1079. .bloop {
  1080. transition:flex 0.269s ease-in-out;
  1081. }
  1082.  
  1083. .linques a:hover .bloop {
  1084. flex:1;
  1085. }
  1086.  
  1087. .tt-box {
  1088. position:relative;
  1089. min-width:calc(var(--Sidebar-TinyBox-Size) * 0.7);
  1090. width:calc(var(--Sidebar-TinyBox-Size) * 0.7);
  1091. height:calc(var(--Sidebar-TinyBox-Size) * 0.7);
  1092. border:1px solid {color:sidebar accent};
  1093. box-shadow:inset 0 0 5px rgba({RGBcolor:sidebar accent},0.69);
  1094. }
  1095.  
  1096. .tt-box:after {
  1097. content:"";
  1098. position:absolute;
  1099. bottom:0;margin-bottom:-1px;
  1100. left:0;
  1101. width:calc((100% * 1.414) + 1px);
  1102. height:1px;
  1103. background:{color:sidebar accent};
  1104. transform:rotate(-45deg);
  1105. transform-origin:bottom left;
  1106. z-index:1;
  1107. }
  1108.  
  1109. /*--------- RIGHT SIDEBAR ---------*/
  1110. .sideghost {
  1111. position:fixed;
  1112. margin-top:var(--Hexagon-Image-Enlarge);
  1113. margin-left:calc({select:post width} + ({select:post padding} * 2) + {select:post side gaps});
  1114. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1115. }
  1116.  
  1117. .wrapper {
  1118. position:relative;
  1119. margin-top:calc((var(--Hexagon-Border-Size) * 2) + var(--Hexagon-Border-Spacing));
  1120. margin-left:calc((var(--Hexagon-Border-Size) * 2) + var(--Hexagon-Border-Spacing));
  1121. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1122. }
  1123.  
  1124. .trans {
  1125. position:absolute;
  1126. top:0;margin-top:calc(({select:sidebar width} / 2) - {select:sidebar width} + .5px);
  1127. left:0;
  1128. width:{select:sidebar width};
  1129. height:{select:sidebar width};
  1130. clip-path:polygon(30% 37%, 150% 0%, 155% 100%, 125% 100%, 0% 100%, 10% 80%);
  1131. }
  1132.  
  1133. .trans img {
  1134. position:absolute;
  1135. bottom:0;
  1136. margin-bottom:calc(({select:sidebar width} * 0.4) - {select:sidebar width} + var(--Hexagon-Image-Readjust-Y));
  1137. padding-left:calc(({select:sidebar width} / 2) - var(--Hexagon-Image-Readjust-X));
  1138. {block:ifnotsidebarhexagonimagecontained}
  1139. padding-left:0;
  1140. {/block:ifnotsidebarhexagonimagecontained}
  1141. margin-left:calc(({select:sidebar width} / -2) + var(--Hexagon-Image-Readjust-X) - var(--Hexagon-Image-Enlarge));
  1142. height:calc({select:sidebar width} + var(--Hexagon-Image-Enlarge));
  1143. z-index:9
  1144. }
  1145.  
  1146. .mask {
  1147. position:absolute;
  1148. top:0;margin-top:calc({select:sidebar width} / 2);
  1149. left:0;
  1150. width:{select:sidebar width};
  1151. height:calc({select:sidebar width} * 0.4);
  1152. clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  1153. }
  1154.  
  1155. .mask:before {
  1156. content:"";
  1157. position:absolute;
  1158. bottom:0;
  1159. margin-bottom:calc((var(--Hexagon-Border-Spacing) + var(--Hexagon-Border-Size) * 4) * -1);
  1160. width:100%;
  1161. height:100%;
  1162. background-image:linear-gradient(to bottom, transparent 0%, var(--Hexagon-Center-Glow) 169%);
  1163. opacity:0.69;
  1164. z-index:1;
  1165. }
  1166.  
  1167. .mask img {
  1168. margin-top:calc((({select:sidebar width} * 0.4) + var(--Hexagon-Image-Enlarge) + var(--Hexagon-Image-Readjust-Y)) * -1);
  1169. padding-left:calc(({select:sidebar width} / 2) - var(--Hexagon-Image-Readjust-X));
  1170. {block:ifnotsidebarhexagonimagecontained}
  1171. padding-left:0;
  1172. {/block:ifnotsidebarhexagonimagecontained}
  1173. margin-left:calc(({select:sidebar width} / -2) + var(--Hexagon-Image-Readjust-X) - var(--Hexagon-Image-Enlarge));
  1174. height:calc({select:sidebar width} + var(--Hexagon-Image-Enlarge));
  1175. z-index:9;
  1176. }
  1177.  
  1178. .wrapper img {
  1179. user-select:none;
  1180. -webkit-user-select:none;
  1181. }
  1182.  
  1183. .hexhaha {
  1184. position:absolute;
  1185. margin-top:calc({select:sidebar width} * 0.1);
  1186. width:{select:sidebar width};
  1187. height:calc(({select:sidebar width} * 0.4) * 2);
  1188. clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  1189. background-image:url({image:sidebar image});
  1190. background-size:cover;
  1191. background-repeat:no-repeat;
  1192. background-position:center;
  1193. }
  1194.  
  1195. .hexover {
  1196. position:absolute;
  1197. margin-top:calc({select:sidebar width} * 0.1);
  1198. width:{select:sidebar width};
  1199. height:calc(({select:sidebar width} * 0.4) * 2);
  1200. clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  1201. background:radial-gradient(circle farthest-side, var(--Hexagon-Center-Glow) 20%, var(--Hexagon-Main-Background) 100%);
  1202. z-index:-1;
  1203. }
  1204.  
  1205. .hexunder {
  1206. position:absolute;
  1207. margin-top:calc(({select:sidebar width} * 0.1) - var(--Hexagon-Border-Size));
  1208. margin-left:calc(var(--Hexagon-Border-Size) * -1);
  1209. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 2));
  1210. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 2));
  1211. clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  1212. background:var(--Hexagon-Border-Color);
  1213. z-index:-2;
  1214. }
  1215.  
  1216. .helol {
  1217. position:absolute;
  1218. margin-top:calc(({select:sidebar width} * 0.1) - var(--Hexagon-Border-Size));
  1219. margin-left:calc(var(--Hexagon-Border-Size) * -1);
  1220. filter:drop-shadow(0 0 calc(var(--Hexagon-Border-Size) * 1.25) var(--Hexagon-Border-Color));
  1221. z-index:-2;
  1222. }
  1223.  
  1224. .helol svg {
  1225. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 2));
  1226. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 2));
  1227. }
  1228.  
  1229. .hexspace {
  1230. position:absolute;
  1231. margin-top:calc(({select:sidebar width} * 0.1) - var(--Hexagon-Border-Size) - var(--Hexagon-Border-Spacing));
  1232. margin-left:calc((var(--Hexagon-Border-Size) + var(--Hexagon-Border-Spacing)) * -1);
  1233. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 2) + (var(--Hexagon-Border-Spacing) * 2));
  1234. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 2) + (var(--Hexagon-Border-Spacing) * 2));
  1235. clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  1236. background:radial-gradient(circle farthest-side, var(--Hexagon-Border-Color) 20%, var(--Hexagon-Main-Background) 100%);
  1237. z-index:-3;
  1238. }
  1239.  
  1240. .hexout {
  1241. position:absolute;
  1242. margin-top:calc(({select:sidebar width} * 0.1) - (var(--Hexagon-Border-Size) * 2) - var(--Hexagon-Border-Spacing));
  1243. margin-left:calc(((var(--Hexagon-Border-Size) * 2) + var(--Hexagon-Border-Spacing)) * -1);
  1244. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1245. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1246. clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  1247. background:var(--Hexagon-Border-Color);
  1248. z-index:-4;
  1249. }
  1250.  
  1251. .O_O {
  1252. position:absolute;
  1253. margin-top:calc(({select:sidebar width} * 0.1) - (var(--Hexagon-Border-Size) * 2) - var(--Hexagon-Border-Spacing));
  1254. margin-left:calc(((var(--Hexagon-Border-Size) * 2) + var(--Hexagon-Border-Spacing)) * -1);
  1255. filter:drop-shadow(0 0 var(--Hexagon-Outer-Glow-Size) var(--Hexagon-Outer-Glow-Color));
  1256. z-index:-5
  1257. }
  1258.  
  1259. .O_O svg {
  1260. width:calc({select:sidebar width} + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1261. height:calc((({select:sidebar width} * 0.4) * 2) + (var(--Hexagon-Border-Size) * 4) + (var(--Hexagon-Border-Spacing) * 2));
  1262. }
  1263.  
  1264. .desc {
  1265. margin-top:{select:right sidebar title top gap};
  1266. font-size:{select:desc font size};
  1267. color:{color:sidebar desc text};
  1268. }
  1269.  
  1270. .bobx {
  1271. position:relative;
  1272. width:var(--Sidebar-TinyBox-Size);
  1273. height:var(--Sidebar-TinyBox-Size);
  1274. border:1px solid {color:sidebar accent};
  1275. box-shadow:inset 0 0 5px rgba({RGBcolor:sidebar accent},0.69);
  1276. }
  1277.  
  1278. .bobx:before {
  1279. content:"";
  1280. position:absolute;
  1281. bottom:0;margin-bottom:-1px;
  1282. left:0;
  1283. width:calc((100% * 1.414) + 1px);
  1284. height:1px;
  1285. background:{color:sidebar accent};
  1286. transform:rotate(-45deg);
  1287. transform-origin:bottom left;
  1288. z-index:1;
  1289. }
  1290.  
  1291. .short-tit {
  1292. margin-left:var(--Sidebar-ShortTitle-Left-Gap);
  1293. font-family:'7pixelsofperfection';
  1294. font-size:calc({select:desc font size} + 5px);
  1295. text-transform:uppercase;
  1296. letter-spacing:.7px;
  1297. color:{color:sidebar accent};
  1298. }
  1299.  
  1300. .barx {
  1301. margin-left:var(--Sidebar-ShortTitle-Left-Gap);
  1302. flex:1;
  1303. height:1px;
  1304. background:{color:sidebar accent};
  1305. }
  1306.  
  1307. .desc-text {
  1308. margin-top:calc({select:right sidebar title top gap} * 0.69);
  1309. font-family:libre franklin;
  1310. letter-spacing:.3px;
  1311. text-align:{select:desc text align};
  1312. line-height:1.69em;
  1313. }
  1314.  
  1315. /*--------- ACTUAL POSTS (finally) ---------*/
  1316. .postscont {
  1317. font-family:libre franklin;
  1318. font-size:calc({select:post font size} - 1px);
  1319. color:{color:text};
  1320. line-height:{select:post text line height};
  1321. min-width:calc({select:post width} + ({select:post padding} * 2));
  1322. }
  1323.  
  1324. .body, .comment {
  1325. letter-spacing:.3px; /* for libre franklin */
  1326. }
  1327.  
  1328. .post {
  1329. position:relative;
  1330. background:{color:post};
  1331. margin-bottom:{select:post spacing};
  1332. width:{select:post width};
  1333. padding:{select:post padding};
  1334. overflow:hidden;
  1335. }
  1336.  
  1337. .tagholder {
  1338. margin-top:{select:captions gap};
  1339. display:flex;
  1340. flex-wrap:wrap;
  1341. justify-content:flex-end;
  1342. text-align:right;
  1343. margin-left:-5px;
  1344. margin-right:-5px;
  1345. font-family:rubik;
  1346. font-size:calc({select:post font size} - 3px);
  1347. text-transform:uppercase;
  1348. letter-spacing:1px;
  1349. line-height:1.5em;
  1350. }
  1351.  
  1352. .tagholder a {
  1353. display:block;
  1354. margin:0 5px;
  1355. }
  1356.  
  1357. .permawrap {
  1358. position:relative;
  1359. font-size:{select:post font size};
  1360. line-height:1.6em;
  1361. }
  1362.  
  1363. .permawrap:after {
  1364. /* horizontal piece */
  1365. content:"";
  1366. position:absolute;
  1367. bottom:0;margin-bottom:calc(var(--PostDecor-Line-Thickness) * -1);
  1368. right:0;
  1369. width:calc((var(--PostDecor-Line-Thickness) + 1px) * 4);
  1370. height:calc(var(--PostDecor-Line-Thickness) + 1px);
  1371. background:{color:post decoration lines};
  1372. }
  1373.  
  1374. .permawrap:before {
  1375. /* vertical piece */
  1376. content:"";
  1377. position:absolute;
  1378. bottom:0;margin-bottom:calc(var(--PostDecor-Line-Thickness) * -1);
  1379. right:0;
  1380. width:calc(var(--PostDecor-Line-Thickness) + 1px);
  1381. height:calc((var(--PostDecor-Line-Thickness) + 1px) * 4);
  1382. background:{color:post decoration lines};
  1383. }
  1384.  
  1385. .permarow {
  1386. position:relative;
  1387. margin-top:calc({select:captions gap});
  1388. display:flex;
  1389. align-items:center;
  1390. justify-content:space-between;
  1391. }
  1392.  
  1393. .permarow:before {
  1394. content:"";
  1395. position:absolute;
  1396. top:0;
  1397. left:0;
  1398. width:calc(100% - ((var(--PostDecor-Line-Thickness) + 1px) * 7));
  1399. height:var(--PostDecor-Line-Thickness);
  1400. background:{color:post decoration lines};
  1401. }
  1402.  
  1403. .notecount {
  1404. position:relative;
  1405. margin-top:var(--PostDecor-Line-Thickness);
  1406. padding-top:var(--PostDecor-Dent-Height);
  1407. border-top:var(--PostDecor-Dent-Height) solid {color:post decoration lines};
  1408. margin-left:var(--PostDecor-Dent-Height);
  1409. font-family:squarewave;
  1410. font-size:calc({select:post font size} + 3px);
  1411. text-transform:uppercase;
  1412. letter-spacing:0.069em;
  1413. word-spacing:-0.069em;
  1414. white-space:nowrap;
  1415. }
  1416.  
  1417. .notecount, .notecount a {
  1418. color:{color:permalink};
  1419. }
  1420.  
  1421. .num {
  1422. font-family:industry;
  1423. font-size:calc({select:post font size} - 3px);
  1424. }
  1425.  
  1426. .notecount:before {
  1427. content:"";
  1428. position:absolute;
  1429. top:0;margin-top:calc(var(--PostDecor-Dent-Height) * -1);
  1430. left:0;margin-left:calc(var(--PostDecor-Dent-Height) * -1);
  1431. width:0;height:0;
  1432. border-style:solid;
  1433. border-width:0 var(--PostDecor-Dent-Height) var(--PostDecor-Dent-Height) 0;
  1434. border-color:transparent {color:post decoration lines} transparent transparent;
  1435. }
  1436.  
  1437. .notecount:after {
  1438. content:"";
  1439. position:absolute;
  1440. top:0;margin-top:calc(var(--PostDecor-Dent-Height) * -1);
  1441. right:0;margin-right:calc(var(--PostDecor-Dent-Height) * -1);
  1442. width:0;height:0;
  1443. border-style:solid;
  1444. border-width:var(--PostDecor-Dent-Height) var(--PostDecor-Dent-Height) 0 0;
  1445. border-color:{color:post decoration lines} transparent transparent transparent;
  1446. }
  1447.  
  1448. .les-controls {
  1449. position:relative;
  1450. display:flex;
  1451. align-items:center;
  1452. margin-top:calc(var(--PostDecor-Dent-Height) - var(--PostDecor-Line-Thickness));
  1453.  
  1454. margin-right:calc((var(--PostDecor-Line-Thickness) + 1px) * 5);
  1455. }
  1456.  
  1457. .les-controls:after {
  1458. content:"";
  1459. position:absolute;
  1460. top:0;margin-top:calc((var(--PostDecor-Dent-Height) * -2) - var(--PostDecor-Line-Thickness));
  1461. right:0;margin-right:calc((var(--PostDecor-Line-Thickness) + 1px) * -5);
  1462. width:calc((var(--PostDecor-Line-Thickness) + 1px) * 4);
  1463. height:calc(var(--PostDecor-Line-Thickness) + 1px);
  1464. background:{color:post decoration lines};
  1465. }
  1466.  
  1467. .les-controls:before {
  1468. content:"";
  1469. position:absolute;
  1470. top:0;margin-top:calc((var(--PostDecor-Dent-Height) * -2) - var(--PostDecor-Line-Thickness));
  1471. right:0;margin-right:calc((var(--PostDecor-Line-Thickness) + 1px) * -5);
  1472. width:calc(var(--PostDecor-Line-Thickness) + 1px);
  1473. height:calc((var(--PostDecor-Line-Thickness) + 1px) * 4);
  1474. background:{color:post decoration lines};
  1475. }
  1476.  
  1477. .les-controls > a {
  1478. display:block;
  1479. margin-right:{select:post buttons spacing};
  1480. width:var(--Post-Buttons-Size);
  1481. height:var(--Post-Buttons-Size);
  1482. }
  1483.  
  1484. .les-controls > a:last-of-type {margin-right:0;}
  1485.  
  1486. .barcode {
  1487. flex:1;
  1488. width:auto!important;
  1489. text-align:right;
  1490. overflow:hidden;
  1491. font-family:zuptype;
  1492. letter-spacing:-2px;
  1493. color:{color:post decoration lines};
  1494. line-height:1em;
  1495. }
  1496.  
  1497. .barcode span {
  1498. display:block;
  1499. overflow:hidden;
  1500. }
  1501.  
  1502. .les-controls svg {
  1503. display:block;
  1504. width:100%;
  1505. height:100%;
  1506. fill:{color:post buttons};
  1507. }
  1508.  
  1509. .retweet svg {
  1510. transform:scaleX(-1);
  1511. }
  1512.  
  1513. .likecont {
  1514. position:relative;
  1515. }
  1516.  
  1517. .heart_sld {
  1518. position:absolute;
  1519. top:0;
  1520. width:100%;
  1521. height:100%;
  1522. }
  1523.  
  1524. .heart svg {
  1525. opacity:1;
  1526. }
  1527.  
  1528. .heart_sld svg {
  1529. display:block;
  1530. width:100%;
  1531. height:100%;
  1532. fill:{color:post buttons};
  1533. opacity:0;
  1534. }
  1535.  
  1536. .like_button {
  1537. position:absolute!important;
  1538. width:100%!important;
  1539. height:100%!important;
  1540. padding:0!important;
  1541. }
  1542.  
  1543. .like_button iframe {
  1544. position:absolute;
  1545. top:0;left:0;
  1546. width:100%;
  1547. height:100%;
  1548. opacity:0;
  1549. z-index:2;
  1550. }
  1551.  
  1552. .like_button.liked + .heart svg {
  1553. opacity:0!important;
  1554. }
  1555.  
  1556. .like_button.liked + .heart_sld svg {
  1557. opacity:1!important;
  1558. }
  1559.  
  1560. .viasrc {
  1561. margin-top:calc(var(--Post-Buttons-Size) - {select:post font size} - var(--PostDecor-Line-Thickness));
  1562. font-family:squarewave;
  1563. font-size:calc({select:post font size} + 2px);
  1564. text-transform:uppercase;
  1565. letter-spacing:1px;
  1566. line-height:1em;
  1567. }
  1568.  
  1569. .viasrc, .viasrc a {
  1570. color:{color:post buttons};
  1571. }
  1572.  
  1573. .viasrc a {
  1574. margin-left:{select:post buttons spacing};
  1575. width:auto;
  1576. }
  1577.  
  1578. /*----- TEXT STYLES -----*/
  1579. .post blockquote {
  1580. margin:calc(var(--Posts-Avatar-Size) / 2);
  1581. padding:0 calc(var(--Posts-Avatar-Size) / 2);
  1582. border-left:1px solid {color:post decoration lines};
  1583. }
  1584.  
  1585. .caps {
  1586. font-size:smaller;
  1587. letter-spacing:1px;
  1588. }
  1589.  
  1590. @font-face {
  1591. font-family:Calluna;
  1592. src:url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  1593. font-weight:700;
  1594. font-style:italic
  1595. }
  1596.  
  1597. p.npf_quote {font-family:Calluna;}
  1598.  
  1599. @font-face {
  1600. font-family:Fairwater;
  1601. src:url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  1602. font-weight:400;
  1603. font-style:normal
  1604. }
  1605.  
  1606. p.npf_quirky {font-family:Fairwater;}
  1607. p.npf_chat {font-family:inherit;}
  1608.  
  1609. /*----- PHOTOSETS -----*/
  1610. [photoset-layout] {
  1611. grid-gap:{select:photoset images spacing};
  1612. }
  1613.  
  1614. [photoset-layout] div {
  1615. cursor:pointer;
  1616. }
  1617.  
  1618. /*----- PHOTO POSTS -----*/
  1619. .photopic {
  1620. width:100%;
  1621. cursor:pointer;
  1622. }
  1623.  
  1624. /*---- REBLOG STYLING ----*/
  1625. .caption {
  1626. margin-top:calc(var(--Captions-Gap) * 1.5);
  1627. }
  1628.  
  1629. .comment_container {
  1630. {block:ifreblogseparators}
  1631. padding:calc({select:captions gap} / 2) 0;
  1632. border-bottom:1px solid rgba({RGBcolor:post decoration lines},0.420);
  1633. {block:iffullwidthreblogseparators}
  1634. margin:0 -{select:post padding};
  1635. padding-left:{select:post padding};
  1636. padding-right:{select:post padding};
  1637. {/block:iffullwidthreblogseparators}
  1638. {/block:ifreblogseparators}
  1639.  
  1640. {block:ifnotreblogseparators}
  1641. padding:calc({select:captions gap} / 4) 0;
  1642. {/block:ifnotreblogseparators}
  1643. }
  1644.  
  1645. .comment_container:first-of-type {
  1646. padding-top:0px;
  1647. border-top:0px solid transparent;
  1648. margin-top:0px;
  1649. }
  1650.  
  1651. .comment_container:last-of-type {
  1652. padding-bottom:0px;
  1653. border-bottom:0px solid transparent;
  1654. }
  1655.  
  1656. .src {
  1657. display:none;
  1658. }
  1659.  
  1660. .commenter, .asker_, .answerer_ {
  1661. display:flex;
  1662. align-items:center;
  1663. margin-top:{select:captions gap};
  1664. margin-bottom:calc({select:captions gap} / 2);
  1665. }
  1666.  
  1667. .commenter img, .asker_ img, .answerer_ img {
  1668. width:var(--Posts-Avatar-Size);
  1669. height:var(--Posts-Avatar-Size);
  1670. border-radius:3px;
  1671. }
  1672.  
  1673. .commenter span, .asker_ span, .answerer_ span, .answerer a, .replier a {
  1674. padding:0 9px;
  1675. }
  1676.  
  1677. .commenter span, .commenter a {
  1678. font-family:squarewave;
  1679. text-transform:uppercase;
  1680. font-size:calc({select:post font size} + 2.5px);
  1681. letter-spacing:1px;
  1682. color:{color:username links};
  1683. }
  1684.  
  1685. .asker_ span {
  1686. position:relative;
  1687. margin-left:0.69em;
  1688. background:{color:post};
  1689. z-index:2;
  1690. }
  1691.  
  1692. .question_text {
  1693. margin-top:calc((var(--Paragraph-Margins) * -1) - 0.69em);
  1694. padding:1.35em;
  1695. padding-top:1.69em;
  1696. border-radius:2px;
  1697. border:1px solid rgba({RGBcolor:post decoration lines},0.420);
  1698. }
  1699.  
  1700. .avr {
  1701. width:var(--Posts-Avatar-Size);
  1702. height:var(--Posts-Avatar-Size);
  1703. display:flex;
  1704. align-items:center;
  1705. justify-content:center;
  1706. }
  1707.  
  1708. .avc {
  1709. position:relative;
  1710. width:69%;
  1711. height:69%;
  1712. border:1px solid {color:post decoration lines};
  1713. box-sizing:border-box;
  1714. }
  1715.  
  1716. .avez {
  1717. position:absolute;
  1718. bottom:0;margin-bottom:-1px;
  1719. left:0;
  1720. width:calc((100% * 1.414) + 1px);
  1721. height:1px;
  1722. background:{color:post decoration lines};
  1723. transform:rotate(-45deg);
  1724. transform-origin:bottom left;
  1725. z-index:1;
  1726. }
  1727.  
  1728. /*----- AUDIO -----*/
  1729. .tumblr_audio_player[width] {
  1730. width:100%!important;
  1731. height:0!important;
  1732. }
  1733.  
  1734. .audiocont {
  1735. position:absolute;
  1736. display:none;
  1737. overflow:hidden;
  1738. width:0!important;
  1739. height:0!important;
  1740. opacity:0;
  1741. }
  1742.  
  1743. .alcove {
  1744. position:relative;
  1745. width:var(--Audio-Post-Album-Image-Size);
  1746. height:var(--Audio-Post-Album-Image-Size);
  1747. }
  1748.  
  1749. .strawberries {
  1750. position:absolute;
  1751. top:0;margin-top:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
  1752. left:0;margin-left:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
  1753. width:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
  1754. height:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
  1755. }
  1756.  
  1757. .summer {
  1758. border:1px solid rgba({RGBcolor:post decoration lines},0.8);
  1759. width:100%;
  1760. height:100%;
  1761. background:rgba({RGBcolor:post},1);
  1762. box-sizing:border-box;
  1763. border-radius:100%;
  1764. display:flex;
  1765. align-items:center;
  1766. justify-content:center;
  1767. line-height:1em;
  1768. cursor:pointer;
  1769. }
  1770.  
  1771. .splay {
  1772. margin-left:2px;
  1773. }
  1774.  
  1775. .splay i {
  1776. font-size:var(--Audio-Post-PlayButton-Size);
  1777. color:rgba({RGBcolor:post decoration lines},0.9);
  1778. }
  1779.  
  1780. .spause {
  1781. display:none;
  1782. margin-top:2px;
  1783. }
  1784.  
  1785. .spause i {
  1786. font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
  1787. color:rgba({RGBcolor:post decoration lines},0.9);
  1788. }
  1789.  
  1790. .a-lbum-img {
  1791. width:100%;
  1792. height:100%;
  1793. visibility:hidden;
  1794. }
  1795.  
  1796. .tin {
  1797. width:calc(100% - var(--Audio-Post-Album-Image-Size));
  1798. height:var(--Audio-Post-Album-Image-Size);
  1799. }
  1800.  
  1801. .trackinfo, .npf-audio-details {
  1802. margin-left:20px;
  1803. background-image:linear-gradient(to bottom right, {color:special text 1} 25%, {color:special text 2});
  1804. -webkit-background-clip:text;
  1805. -webkit-text-fill-color:transparent;
  1806. }
  1807.  
  1808. .trackinfo > div, .npf-audio-details > * {
  1809. font-family:'7pixelsofperfection';
  1810. font-size:calc({select:post font size} + 4px);
  1811. text-transform:uppercase;
  1812. letter-spacing:1px;
  1813. }
  1814.  
  1815. .dongload {
  1816. text-transform:initial!important;
  1817. }
  1818.  
  1819. .dongload i {
  1820. font-size:calc({select:post font size} + 4px);
  1821. color:{color:special text 2};
  1822. pointer-events:none;
  1823. }
  1824.  
  1825. /*----- VIDEOS -----*/
  1826. video {
  1827. display:block;
  1828. outline:none;
  1829. cursor:default;
  1830. width:100%;
  1831. }
  1832.  
  1833. /*----- CHAT POSTS -----*/
  1834. .chatholder {
  1835. }
  1836.  
  1837. .chat_label {
  1838. margin-right:4px;
  1839. font-family:industry;
  1840. font-size:calc({select:post font size} - 1.5px);
  1841. text-transform:uppercase;
  1842. letter-spacing:1px;
  1843. color:{color:special text 1};
  1844. }
  1845.  
  1846. /*----- QUOTE POSTS -----*/
  1847. .quote-words {
  1848. margin:auto;
  1849. margin-bottom:calc(var(--Quote-Decor-Slant-Size) * -0.1);
  1850. width:calc(100% - (((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 4));
  1851. font-family:'7pixelsOfPerfection';
  1852. font-size:calc({select:post font size} + 5px);
  1853. text-transform:uppercase;
  1854. letter-spacing:1px;
  1855. text-align:center;
  1856. background-image:linear-gradient(to bottom right, {color:special text 1} 25%, {color:special text 2});
  1857. -webkit-background-clip:text;
  1858. -webkit-text-fill-color:transparent;
  1859. }
  1860.  
  1861. .qcont {
  1862. position:relative;
  1863. width:100%;
  1864. height:calc((((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 2) + (var(--Quote-Decor-Line-Thickness) * 2));
  1865. }
  1866.  
  1867. .qcont > div {
  1868. position:absolute;
  1869. }
  1870.  
  1871. .goat {
  1872. width:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1873. height:var(--Quote-Decor-Line-Thickness);
  1874. background:{color:post decoration lines};
  1875. }
  1876.  
  1877. .corn {
  1878. right:0;
  1879. width:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1880. height:var(--Quote-Decor-Line-Thickness);
  1881. background:{color:post decoration lines};
  1882. }
  1883.  
  1884. .sv-l {
  1885. margin-left:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1886. width:var(--Quote-Decor-Slant-Size);
  1887. height:var(--Quote-Decor-Line-Thickness);
  1888. background:{color:post decoration lines};
  1889. transform:rotate(45deg);
  1890. transform-origin:left;
  1891. }
  1892.  
  1893. .sv-r {
  1894. right:0;
  1895. margin-right:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1896. width:var(--Quote-Decor-Slant-Size);
  1897. height:var(--Quote-Decor-Line-Thickness);
  1898. background:{color:post decoration lines};
  1899. transform:rotate(-45deg);
  1900. transform-origin:right;
  1901. }
  1902.  
  1903. .chaude {
  1904. margin-top:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1905. margin-left:calc(((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 2);
  1906. height:var(--Quote-Decor-Line-Thickness);
  1907. background:{color:post decoration lines};
  1908. }
  1909.  
  1910. .froide {
  1911. margin-top:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1912. right:0;
  1913. margin-right:calc(((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 2);
  1914. height:var(--Quote-Decor-Line-Thickness);
  1915. background:{color:post decoration lines};
  1916. }
  1917.  
  1918. .chaude, .froide {
  1919. width:calc(50% - (((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 3.5));
  1920. }
  1921.  
  1922. .wf-l {
  1923. margin-top:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1924. margin-left:calc((((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 2) + (50% - (((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 3.5)));
  1925. width:var(--Quote-Decor-Slant-Size);
  1926. height:var(--Quote-Decor-Line-Thickness);
  1927. background:{color:post decoration lines};
  1928. transform:rotate(45deg);
  1929. transform-origin:left;
  1930. }
  1931.  
  1932. .wf-r {
  1933. margin-top:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1934. right:0;
  1935. margin-right:calc((((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 2) + (50% - (((var(--Quote-Decor-Slant-Size) * 1.414) / 2) * 3.5)));
  1936. width:var(--Quote-Decor-Slant-Size);
  1937. height:var(--Quote-Decor-Line-Thickness);
  1938. background:{color:post decoration lines};
  1939. transform:rotate(-45deg);
  1940. transform-origin:right;
  1941. }
  1942.  
  1943. .triforce {
  1944. margin:auto;
  1945. left:0;right:0;
  1946. margin-top:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1947. width:100%;
  1948. height:calc((var(--Quote-Decor-Slant-Size) * 1.414) / 2);
  1949. }
  1950.  
  1951. .tri-o {
  1952. position:relative;
  1953. margin:auto;
  1954. width:0;height:0;
  1955. border-style:solid;
  1956. border-width:calc(var(--Quote-Decor-Slant-Size) / 2) calc(var(--Quote-Decor-Slant-Size) / 2) 0 calc(var(--Quote-Decor-Slant-Size) / 2);
  1957. border-color:{color:post decoration lines} transparent transparent transparent;
  1958. }
  1959.  
  1960. .hc {
  1961. position:absolute;
  1962. margin-top:calc(var(--Quote-Decor-Slant-Size) / -2);
  1963. margin-left:calc(var(--Quote-Decor-Slant-Size) / -2);
  1964. width:var(--Quote-Decor-Slant-Size);
  1965. height:calc(var(--Quote-Decor-Slant-Size) / 2);
  1966. display:table;
  1967. }
  1968.  
  1969. .hy {
  1970. display:table-cell;
  1971. vertical-align:middle;
  1972. }
  1973.  
  1974. .tri-n {
  1975. margin:auto;
  1976. margin-top:-1px; /* chrome bug */
  1977. width:0;height:0;
  1978. border-style:solid;
  1979. border-width:calc(var(--Quote-Decor-Slant-Size) * 0.25) calc(var(--Quote-Decor-Slant-Size) * 0.25) 0 calc(var(--Quote-Decor-Slant-Size) * 0.25);
  1980. border-color:{color:post} transparent transparent transparent;
  1981. }
  1982.  
  1983. .quote-source {
  1984. margin-top:calc(var(--Quote-Decor-Slant-Size) * 0.3);
  1985. font-family:industry;
  1986. font-size:calc({select:post font size} - 2px);
  1987. text-transform:uppercase;
  1988. letter-spacing:1px;
  1989. color:{color:special text 1};
  1990. text-align:center;
  1991. }
  1992.  
  1993. /*----- POST NOTES -----*/
  1994. .notescont {
  1995. width:calc({select:post width} + ({select:post padding} * 2));
  1996. }
  1997.  
  1998. ol.notes {
  1999. padding:0 {select:post padding};
  2000. list-style:none;
  2001. }
  2002.  
  2003. ol.notes .avatar {
  2004. display:none;
  2005. }
  2006.  
  2007. ol.notes li {
  2008. margin-bottom:1.5em;
  2009. }
  2010.  
  2011. ol.notes blockquote {
  2012. margin:1em;
  2013. padding-left:1em;
  2014. }
  2015.  
  2016. ol.notes .action a, .more_notes_link_container {
  2017. font-family:squarewave;
  2018. font-size:calc({select:post font size} + 4px);
  2019. text-transform:uppercase;
  2020. letter-spacing:1px;
  2021. }
  2022.  
  2023. .more_notes_link_container {
  2024. margin-top:{select:post padding};
  2025. }
  2026.  
  2027. /*------- 'READ MORE' BUTTON -------*/
  2028. .tmblr-truncated-link.read_more {
  2029. display:block;
  2030. padding:0.420em;
  2031. border:1px solid rgba({RGBcolor:post decoration lines},0.420);
  2032. border-radius:1px;
  2033. font-family:squarewave;
  2034. text-transform:uppercase;
  2035. font-size:calc({select:post font size} + 2.5px);
  2036. letter-spacing:1px;
  2037. text-align:center;
  2038. }
  2039.  
  2040. /*---------- PAGINATION ----------*/
  2041. .pagi {
  2042. position:absolute;
  2043. top:0;margin-top:var(--Inner-Frame-Border-Size);
  2044. right:0;margin-right:calc(var(--NextPage-Button-Margin) * -1);
  2045. padding:0 var(--NextPage-Button-Padding);
  2046. background-image:linear-gradient(to bottom, {color:next page button background 1}, {color:next page button background 2});
  2047. display:table;
  2048. z-index:-1;
  2049. }
  2050.  
  2051. .pagi:before {
  2052. content:"";
  2053. position:absolute;
  2054. bottom:0;margin-bottom:calc(var(--NextPage-Button-Line-Thickness) * -1);
  2055. left:0;
  2056. width:0;
  2057. height:0;
  2058. border-style:solid;
  2059. border-width:0 var(--NextPage-Button-Line-Thickness) var(--NextPage-Button-Line-Thickness) 0;
  2060. border-color:transparent {color:next page button background 2} transparent transparent;
  2061. z-index:-1;
  2062. }
  2063.  
  2064. .pagi:after {
  2065. content:"";
  2066. position:absolute;
  2067. bottom:0;margin-bottom:calc(var(--NextPage-Button-Line-Thickness) * -1);
  2068. right:0;
  2069. width:calc(100% - var(--NextPage-Button-Line-Thickness));
  2070. height:var(--NextPage-Button-Line-Thickness);
  2071. background:{color:next page button background 2};
  2072. z-index:-1;
  2073. }
  2074.  
  2075. .nut {
  2076. display:table-cell;
  2077. vertical-align:middle;
  2078. }
  2079.  
  2080. .dealer {
  2081. margin-top:calc(var(--NextPage-Button-Line-Thickness) * 1.5);
  2082. margin-bottom:calc(var(--NextPage-Button-Line-Thickness) / -2.5);
  2083. }
  2084.  
  2085. .dealer span {
  2086. display:block;
  2087. font-family:rubik;
  2088. font-size:var(--NextPage-Font-Size);
  2089. color:{color:next page button text};
  2090. text-transform:uppercase;
  2091. line-height:1.5em;
  2092. text-align:justify;
  2093. }
  2094.  
  2095. .arrows {
  2096. display:block;
  2097. }
  2098.  
  2099. .arrows {
  2100. margin-left:-5px;
  2101. }
  2102.  
  2103. .arrows i {
  2104. padding:5px;
  2105. color:{color:next page button text};
  2106. font-size:var(--NextPage-Button-Arrow-Size);
  2107. text-shadow:5px 0 0 {color:next page button text};
  2108. }
  2109.  
  2110. /*------ MUSIC PLAYER ------*/
  2111. .muusicplayer {
  2112. position:absolute;
  2113. margin:0 auto;
  2114. bottom:0;left:0;right:0;
  2115. margin-bottom:calc(var(--Outer-Frame-Size) * -1);
  2116. width:var(--Inner-Frame-Bottom-Bump-Length);
  2117. height:calc(100% + var(--Outer-Frame-Size));
  2118. text-align:center;
  2119. display:table;
  2120. z-index:70;
  2121. }
  2122.  
  2123. .sausage {
  2124. display:table-cell;
  2125. vertical-align:middle;
  2126. }
  2127.  
  2128. .mcontrols {
  2129. -webkit-user-select:none;
  2130. -ms-user-select:none;
  2131. user-select:none;
  2132. }
  2133.  
  2134. .playbutt {
  2135. position:relative;
  2136. }
  2137.  
  2138. .playbutt:before {
  2139. content:"";
  2140. position:absolute;
  2141. top:0;margin-top:-1px;
  2142. left:0;margin-left:-1px;
  2143. width:100%;
  2144. height:100%;
  2145. border-radius:100%;
  2146. border:1px solid var(--Music-Controls-Color);
  2147. opacity:0.7;
  2148. z-index:-1;
  2149. }
  2150.  
  2151. .fen {
  2152. display:flex;
  2153. align-items:center;
  2154. justify-content:center;
  2155. width:calc((var(--Music-Controls-Size) - 4px) + (var(--Play-Button-Padding) * 2));
  2156. height:calc((var(--Music-Controls-Size) - 4px) + (var(--Play-Button-Padding) * 2));
  2157. }
  2158.  
  2159. .playy i {
  2160. margin-left:1px;
  2161. font-size:calc(var(--Music-Controls-Size) - 4px);
  2162. color:var(--Music-Controls-Color);
  2163. }
  2164.  
  2165. .pausee {
  2166. display:none;
  2167. }
  2168.  
  2169. .pausee i {
  2170. font-size:calc(var(--Music-Controls-Size) - 2px);
  2171. color:var(--Music-Controls-Color);
  2172. }
  2173.  
  2174. .prev, .next {
  2175. margin:0 calc(var(--Music-Controls-Spacing) / 2);
  2176. padding:calc(var(--Music-Controls-Spacing) / 2);
  2177. }
  2178.  
  2179. .prev, .prev svg, .next, .next svg {
  2180. width:var(--Music-Controls-Size);
  2181. height:var(--Music-Controls-Size);
  2182. }
  2183.  
  2184. .prev svg, .next svg {
  2185. color:var(--Music-Controls-Color);
  2186. stroke-width:1.5;
  2187. }
  2188.  
  2189. .tracklist {
  2190. margin-top:var(--Music-Text-Top-Gap);
  2191. margin-bottom:calc(var(--Music-Text-Top-Gap) / -2);
  2192. font-family:industry;
  2193. font-size:var(--Music-Text-Font-Size);
  2194. text-transform:uppercase;
  2195. letter-spacing:0.7px;
  2196. line-height:1em;
  2197. height:1em;
  2198. }
  2199.  
  2200. .nil {
  2201. height:0;
  2202. margin:0;
  2203. }
  2204.  
  2205. .tracklist span {
  2206. color:var(--Music-Text-Color);
  2207. }
  2208.  
  2209. .song {display:none;}
  2210.  
  2211. .song:first-of-type {display:block;}
  2212.  
  2213. /*.post [data-npf*="audio"] .soundcloud_audio_player {*/
  2214. /* height:116px!important;*/
  2215. /*}*/
  2216.  
  2217. </style>
  2218.  
  2219. </head>
  2220.  
  2221. <body>
  2222.  
  2223. <!--toplinks-->
  2224. <div class="toplinks">
  2225. <div class="donut">
  2226. <div class="strawberry flex">
  2227. <a class="one-link" href="/">
  2228. <span class="link-text">index</span>
  2229. </a>
  2230.  
  2231. <a class="one-link" href="/ask">
  2232. <span class="link-text">message</span>
  2233. </a>
  2234.  
  2235. <a class="one-link" href="/archive">
  2236. <span class="link-text">archive</span>
  2237. </a>
  2238.  
  2239. <a class="one-link" href="//glenthemes.tumblr.com" title="'glitch' theme by glenthemes">
  2240. <span class="link-text">theme</span>
  2241. </a>
  2242. </div>
  2243. </div>
  2244. </div>
  2245.  
  2246. <!--loading screen-->
  2247. <div id="yokotaro">
  2248. <div class="become">
  2249. <div class="as">
  2250. <div class="gods">
  2251. <div class="beload"></div>
  2252. </div>
  2253. </div>
  2254. </div>
  2255. </div>
  2256.  
  2257. <!--main background-->
  2258. <div class="some">
  2259. <div class="bacon">
  2260. <div class="for">
  2261. <div class="breakfast">
  2262. <div class="background"></div>
  2263. <div class="pattern-overlay"></div>
  2264. </div>
  2265. </div>
  2266. </div>
  2267. </div>
  2268.  
  2269. <!--top frame + pagination-->
  2270. <div class="haachoo _TOP">
  2271. <div class="parasite">
  2272.  
  2273. <div class="eeve">
  2274. <div class="tilt-a"></div>
  2275. <div class="lever"></div>
  2276. <div class="tilt-b"></div>
  2277. </div>
  2278.  
  2279. {block:Pagination}
  2280. <div class="pagi">
  2281. <div class="nut">
  2282. <div class="dealer">
  2283. <span>
  2284. aller à
  2285. <br>
  2286. quelle page:
  2287. </span>
  2288.  
  2289. <div class="flex space-between">
  2290. {block:PreviousPage}
  2291. <a href="{PreviousPage}" class="arrows">
  2292. <i class="fas fa-angle-left"></i>
  2293. </a>
  2294. {/block:PreviousPage}
  2295.  
  2296. {block:NextPage}
  2297. <a href="{NextPage}" class="arrows">
  2298. <i class="fas fa-angle-right"></i>
  2299. </a>
  2300. {/block:NextPage}
  2301. </div><!--flex-->
  2302.  
  2303. </div><!--dealer-->
  2304. </div><!--nut-->
  2305. </div><!--pagi-->
  2306. {/block:Pagination}
  2307. </div><!--parasite-->
  2308. </div><!--haachoo-->
  2309.  
  2310.  
  2311.  
  2312.  
  2313. <!--bottom frame + music player-->
  2314. <div class="haachoo _BOTTOM">
  2315. <div class="parasite">
  2316. <div class="shortboi-a"></div>
  2317. <div class="shortboi-b"></div>
  2318.  
  2319. <div class="eeve">
  2320. <div class="tilt-a"></div>
  2321. <div class="lever"></div>
  2322. <div class="tilt-b"></div>
  2323. </div>
  2324.  
  2325. <div class="muusicplayer flex center">
  2326. <div class="sausage">
  2327. <!---- MUSIC PLAYER ---->
  2328. <div class="mcontrols flex center">
  2329. <a class="prev">
  2330. <i data-feather="skip-back"></i>
  2331. </a>
  2332.  
  2333. <a class="playbutt">
  2334. <div class="playy">
  2335. <div class="fen"><i class="fas fa-play"></i></div>
  2336. </div>
  2337.  
  2338. <div class="pausee">
  2339. <div class="fen"><i class="dripicons dripicons-media-pause"></i></div>
  2340. </div>
  2341. </a>
  2342.  
  2343. <a class="next">
  2344. <i data-feather="skip-forward"></i>
  2345. </a>
  2346. </div><!--mcontrols-->
  2347.  
  2348.  
  2349. <div class="tracklist">
  2350. {block:ifsong1name}
  2351. {block:ifsong1MP3URL}
  2352. <div class="song">
  2353. <span>{text:song 1 name}</span>
  2354. <audio src="{text:song 1 MP3 URL}"></audio>
  2355. </div><!--song-->
  2356. {/block:ifsong1MP3URL}
  2357. {/block:ifsong1name}
  2358.  
  2359.  
  2360. {block:ifsong2name}
  2361. {block:ifsong2MP3URL}
  2362. <div class="song">
  2363. <span>{text:song 2 name}</span>
  2364. <audio src="{text:song 2 MP3 URL}"></audio>
  2365. </div><!--song-->
  2366. {/block:ifsong2MP3URL}
  2367. {/block:ifsong2name}
  2368.  
  2369.  
  2370. {block:ifsong3name}
  2371. {block:ifsong3MP3URL}
  2372. <div class="song">
  2373. <span>{text:song 3 name}</span>
  2374. <audio src="{text:song 3 MP3 URL}"></audio>
  2375. </div><!--song-->
  2376. {/block:ifsong3MP3URL}
  2377. {/block:ifsong3name}
  2378. </div><!--tracklist-->
  2379. </div><!--sausage-->
  2380. </div><!--muusicplayer-->
  2381.  
  2382. <div class="cov1"></div>
  2383.  
  2384. <div class="botsides-left"></div>
  2385. <div class="botsides-right"></div>
  2386. </div><!--parasite-->
  2387. </div><!--haachoo-->
  2388.  
  2389.  
  2390. <!--bottom corner decorations-->
  2391. <div class="shrimp left flex bottom">
  2392. <div class="box flex">
  2393. <i class="lnr lnr-cross"></i>
  2394. <i class="lnr lnr-cross"></i>
  2395. <i class="lnr lnr-cross"></i>
  2396. </div>
  2397.  
  2398. <div class="squares"></div>
  2399.  
  2400. <div class="sus">
  2401. <div class="tinytext">{text:bottom left text}</div>
  2402. <div class="round flex">
  2403. <i class="lnr lnr-cross"></i>
  2404. <i class="lnr lnr-cross"></i>
  2405. <i class="lnr lnr-cross"></i>
  2406. <i class="lnr lnr-cross"></i>
  2407. </div>
  2408. </div>
  2409. </div><!--end srhimp left-->
  2410.  
  2411. <div class="shrimp right flex bottom flex-end">
  2412. <div class="sus">
  2413. <div class="tinytext">{text:bottom right text}</div>
  2414. <div class="round flex flex-end">
  2415. <i class="lnr lnr-cross"></i>
  2416. <i class="lnr lnr-cross"></i>
  2417. <i class="lnr lnr-cross"></i>
  2418. <i class="lnr lnr-cross"></i>
  2419. </div>
  2420. </div>
  2421.  
  2422. <div class="squares"></div>
  2423.  
  2424. <div class="box flex">
  2425. <i class="lnr lnr-cross"></i>
  2426. <i class="lnr lnr-cross"></i>
  2427.  
  2428. <span class="special">
  2429. <i class="lnr lnr-cross empty"></i>
  2430. <div class="eggholder">
  2431. <div class="oeuf">
  2432. <div class="bit"></div>
  2433. <div class="bit"></div>
  2434. <div class="bit"></div>
  2435. </div>
  2436. </div>
  2437. </span>
  2438. </div>
  2439. </div><!--end shrimp right-->
  2440.  
  2441. <div class="side_edges-left"></div>
  2442. <div class="side_edges-right"></div>
  2443.  
  2444. <div class="topcov"></div>
  2445.  
  2446.  
  2447.  
  2448.  
  2449. <!-------- START ACTUAL THEME --------->
  2450. <!--rip to anyone who looks through this code-->
  2451. <div id="horizontal-a">
  2452. <div id="horizontal-b">
  2453. <div id="horizontal-c">
  2454.  
  2455. <div class="main">
  2456.  
  2457. <!--left sidebar-->
  2458. <div class="gauche">
  2459. <div class="muffin">
  2460.  
  2461. {block:ifleftsidebarquote}
  2462. <div class="bigquote">
  2463. <div class="bbt">{text:left sidebar quote}</div>
  2464. <div class="longboi"></div>
  2465. </div><!--bigquote-->
  2466. {/block:ifleftsidebarquote}
  2467.  
  2468. <div class="linques">
  2469. {block:ifcustomlink1name}
  2470. <a href="{text:customlink 1 URL}">
  2471. <div class="flex flex-end">
  2472. <span>{text:customlink 1 name}</span>
  2473. <div class="bloop"></div>
  2474. <div class="tt-box"></div>
  2475. </div>
  2476. </a>
  2477. {/block:ifcustomlink1name}
  2478.  
  2479.  
  2480. {block:ifcustomlink2name}
  2481. <a href="{text:customlink 2 URL}">
  2482. <div class="flex flex-end">
  2483. <span>{text:customlink 2 name}</span>
  2484. <div class="bloop"></div>
  2485. <div class="tt-box"></div>
  2486. </div>
  2487. </a>
  2488. {/block:ifcustomlink2name}
  2489.  
  2490.  
  2491. {block:ifcustomlink3name}
  2492. <a href="{text:customlink 3 URL}">
  2493. <div class="flex flex-end">
  2494. <span>{text:customlink 3 name}</span>
  2495. <div class="bloop"></div>
  2496. <div class="tt-box"></div>
  2497. </div>
  2498. </a>
  2499. {/block:ifcustomlink3name}
  2500.  
  2501.  
  2502. {block:ifcustomlink4name}
  2503. <a href="{text:customlink 4 URL}">
  2504. <div class="flex flex-end">
  2505. <span>{text:customlink 4 name}</span>
  2506. <div class="bloop"></div>
  2507. <div class="tt-box"></div>
  2508. </div>
  2509. </a>
  2510. {/block:ifcustomlink4name}
  2511.  
  2512.  
  2513. {block:ifcustomlink5name}
  2514. <a href="{text:customlink 5 URL}">
  2515. <div class="flex flex-end">
  2516. <span>{text:customlink 5 name}</span>
  2517. <div class="bloop"></div>
  2518. <div class="tt-box"></div>
  2519. </div>
  2520. </a>
  2521. {/block:ifcustomlink5name}
  2522.  
  2523.  
  2524. {block:ifcustomlink6name}
  2525. <a href="{text:customlink 6 URL}">
  2526. <div class="flex flex-end">
  2527. <span>{text:customlink 6 name}</span>
  2528. <div class="bloop"></div>
  2529. <div class="tt-box"></div>
  2530. </div>
  2531. </a>
  2532. {/block:ifcustomlink6name}
  2533.  
  2534. </div><!--end all custom links-->
  2535. </div><!--muffin-->
  2536. </div><!--gauche--><!--end left sidebar-->
  2537.  
  2538.  
  2539.  
  2540. <!--right sidebar-->
  2541. <div class="sideghost">
  2542. <div class="wrapper">
  2543. {block:ifnotsidebarhexagonimagecontained}
  2544. <div class="trans def">
  2545. <img src="{image:sidebar image}">
  2546. </div>
  2547. <div class="mask">
  2548. <img src="{image:sidebar image}">
  2549. </div>
  2550. {/block:ifnotsidebarhexagonimagecontained}
  2551.  
  2552. {block:ifsidebarhexagonimagecontained}
  2553. <div class="hexhaha"></div>
  2554. {/block:ifsidebarhexagonimagecontained}
  2555.  
  2556. <div class="hexover"></div>
  2557. <div class="hexunder"></div>
  2558. <div class="helol">
  2559. <svg version="1.0" xmlns="//w3.org/2000/svg"
  2560. width="720.000000pt" height="600.000000pt" viewBox="0 0 720.000000 600.000000"
  2561. preserveAspectRatio="xMidYMid meet">
  2562. <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)"
  2563. fill="var(--Hexagon-Border-Color)" stroke="none">
  2564. <path d="M750 4573 c-377 -785 -700 -1460 -719 -1500 l-34 -74 80 -167 c660
  2565. -1379 1348 -2810 1356 -2819 7 -10 453 -13 2171 -13 l2161 0 715 1491 c393
  2566. 820 715 1501 714 1513 0 11 -322 690 -715 1508 l-714 1488 -2165 0 -2165 0
  2567. -685 -1427z"/>
  2568. </g>
  2569. </svg>
  2570. </div>
  2571. <div class="hexspace"></div>
  2572. <div class="hexout"></div>
  2573. <div class="O_O">
  2574. <svg version="1.0" xmlns="//w3.org/2000/svg"
  2575. width="720.000000pt" height="600.000000pt" viewBox="0 0 720.000000 600.000000"
  2576. preserveAspectRatio="xMidYMid meet">
  2577. <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)"
  2578. fill="var(--Hexagon-Border-Color)" stroke="none">
  2579. <path d="M750 4573 c-377 -785 -700 -1460 -719 -1500 l-34 -74 80 -167 c660
  2580. -1379 1348 -2810 1356 -2819 7 -10 453 -13 2171 -13 l2161 0 715 1491 c393
  2581. 820 715 1501 714 1513 0 11 -322 690 -715 1508 l-714 1488 -2165 0 -2165 0
  2582. -685 -1427z"/>
  2583. </g>
  2584. </svg>
  2585. </div>
  2586. </div><!--wrapper-->
  2587.  
  2588. <div class="desc">
  2589. <!--right sidebar title-->
  2590. <div class="flex">
  2591. <div class="bobx"></div>
  2592. <div class="short-tit">
  2593. {block:ifrightsidebartitle}
  2594. {text:right sidebar title}
  2595. {/block:ifrightsidebartitle}
  2596.  
  2597. {block:ifnotrightsidebartitle}
  2598. {Title}
  2599. {/block:ifnotrightsidebartitle}
  2600. </div>
  2601. <div class="barx"></div>
  2602. </div>
  2603.  
  2604. <!--right sidebar description-->
  2605. <div class="desc-text">
  2606. {block:ifrightdescription}
  2607. {text:right description}
  2608. {/block:ifrightdescription}
  2609.  
  2610. {block:ifnotrightdescription}
  2611. {Description}
  2612. {/block:ifnotrightdescription}
  2613. </div>
  2614. </div><!--desc-->
  2615. </div><!--sideghost--><!--end sidebar-->
  2616.  
  2617.  
  2618. <!------ MAIN POSTS ------>
  2619. <!--did it take *that* long to get here? yes-->
  2620. <div class="postscont {block:ifreblogseparators}oui{/block:ifreblogseparators}">
  2621.  
  2622. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2623. <div class="post {PostType}" id="{PostID}" post-type="{PostType}">
  2624.  
  2625. {block:Title}
  2626. <h1 class="title">{Title}</h1>
  2627. {/block:Title}
  2628.  
  2629. {block:Text}
  2630. <div class="body">
  2631. {block:NotReblog}{Body}{/block:NotReblog}
  2632. {block:RebloggedFrom}
  2633. {block:Reblogs}
  2634. <div class="comment_container">
  2635. <div class="commenter source-head">
  2636. <img src="{PortraitURL-64}" />
  2637. <span>
  2638. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2639. </span>
  2640. </div>
  2641. <div class="comment">{Body}</div>
  2642. </div>
  2643. {/block:Reblogs}
  2644. {/block:RebloggedFrom}
  2645. </div>
  2646. {/block:Text}
  2647.  
  2648. {block:Photo}
  2649. <a class="single" 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 class="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
  2650. {/block:Photo}
  2651.  
  2652. {block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
  2653.  
  2654. {block:Quote}
  2655. <div class="quote-words">{Quote}</div>
  2656. {block:Source}
  2657. <div class="qcont">
  2658. <div class="goat"></div>
  2659. <div class="corn"></div>
  2660. <div class="sv-l"></div>
  2661. <div class="sv-r"></div>
  2662. <div class="chaude"></div>
  2663. <div class="froide"></div>
  2664. <div class="wf-l"></div>
  2665. <div class="wf-r"></div>
  2666. <div class="triforce">
  2667. <div class="tri-o">
  2668. <div class="hc">
  2669. <div class="hy">
  2670. <div class="tri-n"></div>
  2671. </div>
  2672. </div>
  2673. </div>
  2674. </div>
  2675. </div><!--qcont-->
  2676. <div class="quote-source">{Source}</div>
  2677. {/block:Source}
  2678. {/block:Quote}
  2679.  
  2680. {block:Link}
  2681. <h1 class="title">
  2682. <a href="{URL}" class="path{block:Description} has-desc{/block:Description}" {Target}>{Name} &#x3E;</a>
  2683. </h1>
  2684. {block:Description}
  2685. <div class="link-description">
  2686. {block:NotReblog}{Description}{/block:NotReblog}
  2687. {block:RebloggedFrom}
  2688. {block:Reblogs}
  2689. <div class="comment_container">
  2690. <div class="commenter">
  2691. <img src="{PortraitURL-64}" />
  2692. <span>
  2693. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2694. </span>
  2695. </div>
  2696. <div class="comment">{Body}</div>
  2697. </div>
  2698. {/block:Reblogs}
  2699. {/block:RebloggedFrom}
  2700. </div>
  2701. {/block:Description}
  2702. {/block:Link}
  2703.  
  2704. {block:Chat}
  2705. <div>
  2706. {block:Lines}
  2707. <div class="chatholder body">
  2708. {block:Label}
  2709. <span class="chat_label">{Label}</span>
  2710. {/block:Label}
  2711.  
  2712. <span class="chat_content">{Line}</span>
  2713.  
  2714. </div>
  2715. {/block:Lines}
  2716. </div>
  2717. {/block:Chat}
  2718.  
  2719. {block:Audio}
  2720. <div class="flex">
  2721. <div class="audiocont">
  2722. {AudioEmbed}
  2723. </div>
  2724.  
  2725. <div class="alcove">
  2726. <img class="a-lbum-img">
  2727.  
  2728. <div class="strawberries">
  2729. <div class="summer">
  2730. <div class="splay">
  2731. <i class="fas fa-play"></i>
  2732. </div>
  2733. <div class="spause">
  2734. <i class="dripicons dripicons-media-pause"></i>
  2735. </div>
  2736. </div><!--summer-->
  2737. </div>
  2738. </div>
  2739.  
  2740. <div class="tin flex space-between">
  2741. <div class="trackinfo">
  2742. {block:Artist}
  2743. <div class="t-artist">{Artist}</div>
  2744. {/block:Artist}
  2745.  
  2746. {block:TrackName}
  2747. <div class="t-name">{TrackName}</div>
  2748. {/block:TrackName}
  2749. </div><!--trackinfo-->
  2750.  
  2751. <a class="dongload" title="download">
  2752. <i class="lnr lnr-download"></i>
  2753. </a>
  2754. </div><!--flex-->
  2755. </div><!--oofy-->
  2756. {/block:Audio}
  2757.  
  2758. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  2759.  
  2760. {block:Answer}
  2761. <div class="question_container">
  2762. <div class="asker_ commenter">
  2763. <span>{Asker} asked:</span>
  2764. </div>
  2765. <div class="question_text">{Question}</div>
  2766. </div>
  2767. {block:Answerer}
  2768. <div class="answer_container">
  2769. <div class="answerer_ commenter">
  2770. <img src="{AnswererPortraitURL-48}"/>
  2771. <span>{Answerer} answered:</span>
  2772. </div>
  2773. <div class="answer_text">{Answer}</div>
  2774. </div>
  2775. {block:Reblogs}
  2776. <div class="reply_container">
  2777. <div class="replier commenter">
  2778. <img src="{PortraitURL-64}" />
  2779. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  2780. </div>
  2781. <div class="reply">{Body}</div>
  2782. </div>
  2783. {/block:Reblogs}
  2784. {/block:Answerer}
  2785. {block:NotReblog}
  2786. <div class="answer_container">
  2787. <div class="answerer commenter">
  2788. <img src="{PortraitURL-48}" />
  2789. <a href="{Permalink}">{Name}</a>
  2790. </div>
  2791. <div class="answer_text">{Answer}</div>
  2792. </div>
  2793. {/block:NotReblog}
  2794. {/block:Answer}
  2795.  
  2796. {block:Caption}
  2797. <div class="caption">
  2798. {block:NotReblog}{Caption}{/block:NotReblog}
  2799. {block:RebloggedFrom}
  2800. {block:Reblogs}
  2801. <div class="comment_container">
  2802. <div class="commenter">
  2803. <img src="{PortraitURL-64}" />
  2804. <span>
  2805. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
  2806. </span>
  2807. </div>
  2808. <div class="comment">{Body}</div>
  2809. </div>
  2810. {/block:Reblogs}
  2811. {/block:RebloggedFrom}
  2812. </div>
  2813. {/block:Caption}
  2814.  
  2815. {block:Date}
  2816. {block:RebloggedFrom}
  2817. <div class="commenter src">
  2818. <img src="{ReblogRootPortraitURL-64}">
  2819. <span><a href="{ReblogRootURL}">{ReblogRootName}</a></span>
  2820. </div>
  2821. {/block:RebloggedFrom}
  2822.  
  2823.  
  2824. {block:HasTags}
  2825. <div class="tagholder">
  2826. {block:Tags}
  2827. <a href="{TagURL}">#{Tag}</a>
  2828. {/block:Tags}
  2829. </div>
  2830. {/block:HasTags}
  2831.  
  2832. <div class="permawrap">
  2833. <div class="permarow">
  2834. <div class="notecount">
  2835. {block:IndexPage}
  2836. <a href="{Permalink}">{NoteCountWithLabel} &emsp; {ShortMonth}.{DayOfMonthWithZero} {24HourWithZero}:{Seconds} {AMPM}</a>
  2837. {/block:IndexPage}
  2838.  
  2839. {block:PermalinkPage}
  2840. <div class="noteperma">
  2841. {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}
  2842. &middot; {NoteCountWithLabel}
  2843. </div>
  2844. {/block:PermalinkPage}
  2845. </div>
  2846.  
  2847. {block:IndexPage}
  2848. <div class="les-controls flex flex-end">
  2849. <a class="barcode">
  2850. <span>{PostID}</span>
  2851. </a>
  2852. <a href="{ReblogURL}" target="_blank">
  2853. <span class="retweet"></span>
  2854. </a>
  2855.  
  2856. <a class="likecont like">
  2857. {LikeButton}
  2858. <span class="heart_sld"></span>
  2859. <span class="heart"></span>
  2860. </a>
  2861. </div><!--les-controls-->
  2862. {/block:IndexPage}
  2863.  
  2864.  
  2865. {block:PermalinkPage}
  2866. <div class="les-controls">
  2867. <div class="viasrc">
  2868. {block:RebloggedFrom}
  2869. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  2870. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  2871. {/block:RebloggedFrom}
  2872.  
  2873. {block:NotReblog}
  2874. original post
  2875. {/block:NotReblog}
  2876. </div>
  2877. </div>
  2878. {/block:PermalinkPage}
  2879. </div><!--permarow-->
  2880. </div><!--permawrap-->
  2881. {/block:Date}
  2882.  
  2883. </div><!--post-->
  2884.  
  2885. {block:PostNotes}
  2886. <div class="notescont">
  2887. {PostNotes}
  2888. </div>
  2889. {/block:PostNotes}
  2890. {/block:Posts}
  2891.  
  2892. </div><!--postscont-->
  2893. </div><!--main-->
  2894. </div><!--horizontal-c-->
  2895. </div><!--horizontal-b-->
  2896. </div><!--horizontal-a-->
  2897.  
  2898. <div ignore-this>
  2899. <i class="dripicons dripicons-media-pause"></i>
  2900. </div>
  2901.  
  2902.  
  2903. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2904.  
  2905. <script>
  2906. $(document).ready(function(){
  2907. $('img[src*="media.tumblr.com"]').each(function(){
  2908. var newsrc = $(this).attr('src').replace('gifv','gif');
  2909. $(this).attr('src', newsrc);
  2910. });
  2911.  
  2912. $('a[href*="media.tumblr.com"]').each(function(){
  2913. var newhref = $(this).attr('href').replace('gifv','gif');
  2914. $(this).attr('href', newhref);
  2915. });
  2916.  
  2917. $('div[data-lowres*="media.tumblr.com').each(function(){
  2918. var newdata = $(this).attr('data-lowres').replace('gifv','gif');
  2919. $(this).attr('data-lowres', newdata);
  2920. });
  2921.  
  2922. $('div[data-highres*="media.tumblr.com').each(function(){
  2923. var newdata = $(this).attr('data-highres').replace('gifv','gif');
  2924. $(this).attr('data-highres', newdata);
  2925. });
  2926. });
  2927. </script>
  2928.  
  2929. <script>
  2930. initPhotosets();
  2931. feather.replace();
  2932. </script>
  2933.  
  2934. </body>
  2935. </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!