API tools faq
paste
lovesjoon

15. julia

lovesjoon
Jun 25th, 2021
3,161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14. <!--- 15. julia by capitae.
  15.  
  16.  
  17. happy birthday juju!!!! (@inhypen i love you bestie!!!!)
  18.  
  19.  
  20. ♡ USER GUIDE ♡
  21.  
  22. ・｡* sidebar: width:370px; height:90px;
  23.  
  24. ・｡* polaroid 1: width:50px; height:50px;
  25.  
  26. ・｡* polaroid 2: width:60px; height:60px;
  27.  
  28. ・｡* navigation + muses: width:150px; height:250px;
  29.  
  30.  
  31. ♡ READ ME ♡
  32.  
  33. ・｡* base code by @pixiemail
  34.  
  35. ・｡* please don't recreate and/or steal parts of this code
  36.  
  37. ・｡* don't remove the credit
  38.  
  39. ・｡* feel free to reach out if there are any bugs or questions!
  40.  
  41.  
  42. i hope you enjoy this code !! --->
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53. <title>{Title}</title>
  54. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  55. <link rel="shortcut icon" href="{Favicon}">
  56. {block:Description}
  57. <meta name="description" content="{MetaDescription}">
  58. {/block:Description}
  59.  
  60.  
  61.  
  62.  
  63. <meta name="image:background" content=""/>
  64. <meta name="image:sidebar" content="https://via.placeholder.com/370x90"/>
  65. <meta name="image:polaroid1" content="https://via.placeholder.com/50x50"/>
  66. <meta name="image:polaroid2" content="https://via.placeholder.com/60x60"/>
  67. <meta name="image:navigation" content="https://via.placeholder.com/150x250"/>
  68.  
  69. <meta name="image:muses" content="https://via.placeholder.com/150x250"/>
  70.  
  71. <meta name="color:background" content="#f1f0f0"/>
  72. <meta name="color:container" content="#f8f8f8"/>
  73. <meta name="color:posts" content="#fbfbfb"/>
  74. <meta name="color:post border" content="#fbfbfb"/>
  75. <meta name="color:borders" content="#e8e6e7"/>
  76. <meta name="color:accent" content="#d4d9df"/>
  77. <meta name="color:accent2" content="#d2dbe7"/>
  78. <meta name="color:accent3" content="#ebdbc7"/>
  79. <meta name="color:text" content="#aaa"/>
  80. <meta name="color:text shadow" content="#fff"/>
  81. <meta name="color:links" content="#c6c3c8"/>
  82. <meta name="color:hover" content="#98a3a9"/>
  83. <meta name="color:bold" content="#98a3a9"/>
  84. <meta name="color:italic" content="#e2ceb6"/>
  85.  
  86. <meta name="select:body font" content="roboto" title="roboto"/>
  87. <meta name="select:body font" content="montserrat" title="montserrat"/>
  88. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  89. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  90. <meta name="select:body font" content="raleway" title="raleway"/>
  91. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  92. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  93.  
  94. <meta name="select:font size" content="10" title="10px"/>
  95. <meta name="select:font size" content="11" title="11px"/>
  96. <meta name="select:font size" content="12" title="12px"/>
  97. <meta name="select:font size" content="13" title="13px"/>
  98.  
  99. <meta name="select:post size" content="250" title="250px" />
  100. <meta name="select:post size" content="300" title="300px" />
  101. <meta name="select:post size" content="350" title="350px" />
  102. <meta name="select:post size" content="400" title="400px" />
  103. <meta name="select:post size" content="400" title="450px" />
  104. <meta name="select:post size" content="500" title="500px" />
  105.  
  106. <meta name="text:title" content="cherry sunrise"/>
  107. <meta name="text:subtitle" content="sor an eternity with you by my side"/>
  108. <meta name="text:free link" content="/"/>
  109. <meta name="text:free link title" content="link"/>
  110. <meta name="text:free link hover" content="free link."/>
  111. <meta name="text:desc" content="<b>venus</b> sat down at last on a hard pine stump & <i>sighed</i> to the wind: ' blow, big boy, blow! possess me, caress me, distress my hair! i'm all <b>yours</b>, if you've got the time. no one else seems to know i'm there. for you, big boy, believe me, i'm already a <i>meadow</i>. just feel my flowers! honey, i could spend hours making you <b>happy</b>, giving you joy— we're all looking for love, even Love! even me! even this stump that in life was a tree! '"/>
  112.  
  113. <meta name="if:muse tab" content="1"/>
  114. <meta name="if:border radius" content="0"/>
  115. <meta name="if:grayscale" content="0"/>
  116. <meta name="if:text shadow" content="1"/>
  117.  
  118.  
  119.  
  120.  
  121. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  122.  
  123.  
  124.  
  125.  
  126. <!--- JQUERY SCRIPTS --->
  127.  
  128. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  129. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  130.  
  131.  
  132.  
  133.  
  134. <!--- TOOLTIP SCRIPT ---->
  135.  
  136. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  137. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  138. <script> (function($){ $(document).ready(function(){ $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:600, attribute:"title" }); }); })(jQuery); </script>
  139.  
  140.  
  141.  
  142.  
  143. <!--- ICON FONTS ---->
  144.  
  145. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  146. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  147.  
  148. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  149.  
  150. <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  151.  
  152. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  153.  
  154.  
  155. <!-- POST STYLING FONTS -->
  156.  
  157. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  158.  
  159. <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  160.  
  161. <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
  162.  
  163.  
  164. <!-- BODY FONTS -->
  165.  
  166. <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  167.  
  168. <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  169.  
  170. <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  171.  
  172. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  173.  
  174. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  175.  
  176. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  177.  
  178. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  179.  
  180.  
  181.  
  182.  
  183. <!--- VIDEO SCRIPT by shythemes ---->
  184.  
  185. <script> $(document).ready(function(){ $('.video iframe').each(function(){ var scale = $(this).parents('.video').width() / 500; $(this).attr({ width: Math.floor($(this).attr('width') * scale), height: Math.floor($(this).attr('height') * scale) });});}); </script>
  186.  
  187.  
  188.  
  189.  
  190. <!--- TAB SCRIPT by capitae ---->
  191.  
  192. <script> function openCapitae(evt, capitaeName) { var i, tcontent, tlinks; tcontent = document.getElementsByClassName("tcontent"); for (i = 0; i < tcontent.length; i++) { tcontent[i].style.display = "none"; } tlinks = document.getElementsByClassName("tlinks"); for (i = 0; i < tlinks.length; i++) { tlinks[i].className = tlinks[i].className.replace(" active", ""); } document.getElementById(capitaeName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
  193.  
  194. <script> $(document).ready(function(){ $("button").click(function(){ $(".tcontent").fadeOut("slow"); }); }); </script>
  195.  
  196.  
  197.  
  198.  
  199. <!--- FILTER SCRIPT by cyantists ---->
  200.  
  201. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  202. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  203. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  204.  
  205. <script>$(document).ready(function(){ var $grid = $(".grid"); $grid.imagesLoaded(function() { $grid.masonry({ itemSelector: ".item", columnWidth: 100 }); }); $(".button").click(function(){ $(this).addClass("selected"); $(".button").not($(this)).removeClass("selected"); var ssf = $(this).attr("filter"); $(".item." + ssf).show(); $(".item").not("." + ssf).hide(); $grid.masonry(); });
  206. });</script>
  207.  
  208.  
  209.  
  210.  
  211. <style type="text/css">
  212.  
  213.  
  214.  
  215.  
  216. /*--- FONTS HOSTED by capitae ---*/
  217.  
  218. @font-face{ font-family:"mondeline"; src: url('https://dl.dropboxusercontent.com/s/vs96bofgivapfcg/MondelineRegular.tt’)'); }
  219.  
  220.  
  221.  
  222.  
  223.  
  224. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  225.  
  226.  
  227.  
  228.  
  229. /* TOOLTIP */
  230.  
  231. #s-m-t-tooltip { max-width:250px; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px; padding:10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:'poppins', sans-ser60x60; font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:1px; }
  232.  
  233.  
  234. /* SCROLLBAR */
  235.  
  236. ::-webkit-scrollbar-thumb { background-color:{color:accent}; }
  237.  
  238. ::-webkit-scrollbar { width:3px; height:3px; background:transparent; }
  239.  
  240.  
  241. /* SELECTION */
  242.  
  243. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  244.  
  245. ::selection { background:{color:accent}; color:{color:posts};}
  246.  
  247.  
  248.  
  249.  
  250. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  251.  
  252.  
  253.  
  254.  
  255. /* TYPE: BODY */
  256.  
  257. body { width:100%; height:100%; background:{color:background}; color:{color:text}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; margin:0; padding:0; font-weight:400; text-align:justify;
  258.  
  259. font-family:{select:body font};
  260. font-size:{select:font size}px;
  261. line-height: -moz-calc({select:font size}px + 8px);
  262. line-height: -webkit-calc({select:font size}px + 8px);
  263. line-height: -o-calc({select:font size}px + 8px);
  264. line-height: calc({select:font size}px + 8px);
  265.  
  266. {block:ifTextShadow} text-shadow: 0px 0px 2px {color:text shadow}; {/block:ifTextShadow} }
  267.  
  268.  
  269. /* TYPE: IMAGES */
  270.  
  271. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  272.  
  273. iframe:hover, img:hover, embed:hover, object:hover {
  274.  
  275. {block:ifGrayscale} filter: grayscale(0%);
  276. -webkit-transition: all .8s;
  277. -moz-transition: all .8s;
  278. -o-transition: all .8s;
  279. -ms-transition: all .8s;
  280. transition: all .8s; {/block:ifGrayscale} }
  281.  
  282. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  283.  
  284. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  285.  
  286. -webkit-transition: all .8s;
  287. -moz-transition: all .8s;
  288. -o-transition: all .8s;
  289. -ms-transition: all .8s;
  290. transition: all .8s; {/block:ifGrayscale} }
  291.  
  292.  
  293. /* TYPE: TEXT STYLING */
  294.  
  295. select, textarea, input, a { outline:none; }
  296.  
  297. p { margin-top:5px; margin-bottom:5px; }
  298.  
  299. small, sub, sup { font-size:100%; }
  300.  
  301. big { font-size:110%; }
  302.  
  303. h1 { color:{color:accent}; font-family:'abril fatface', cursive; font-weight:400; line-height:28px; text-align:center; word-spacing:2px;
  304.  
  305. font-size: -moz-calc({select:font size}px + 20px);
  306. font-size: -webkit-calc({select:font size}px + 20px);
  307. font-size: -o-calc({select:font size}px + 20px);
  308. font-size: calc({select:font size}px + 20px); }
  309.  
  310. h2 { color:{color:accent2}; font-family:'source sans pro', sans-serif; font-weight:700; line-height:18px; text-align:right; text-transform:uppercase;
  311.  
  312. font-size: -moz-calc({select:font size}px + 5px);
  313. font-size: -webkit-calc({select:font size}px + 5px);
  314. font-size: -o-calc({select:font size}px + 5px);
  315. font-size: calc({select:font size}px + 5px); }
  316.  
  317. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; text-decoration:none; letter-spacing:1px; }
  318.  
  319. a:hover { color:{color:hover};
  320.  
  321. -webkit-transition: all .3s;
  322. -moz-transition: all .3s;
  323. -o-transition: all .3s;
  324. -ms-transition: all .3s;
  325. transition: all .3s; }
  326.  
  327. ul, ol, li { margin:5px 10px; padding:0px;
  328.  
  329. line-height: -moz-calc({select:font size}px + 10px);
  330. line-height: -webkit-calc({select:font size}px + 10px);
  331. line-height: -o-calc({select:font size}px + 10px);
  332. line-height: calc({select:font size}px + 10px); }
  333.  
  334. b, strong { color:{color:bold}; margin:0px 2px 0px 2px; font-family:"poppins", sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
  335.  
  336. i, em { color:{color:italic}; margin:0px 5px 0px 5px; font-family:"mondeline"; font-size:28px; font-weight:400; text-transform:lowercase; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1px; vertical-align:-1px; }
  337.  
  338. blockquote { margin:5px; padding-left:20px; border-left:1px solid {color:borders}; }
  339.  
  340.  
  341. /* TYPE: TUMBLR CONTROLS */
  342.  
  343. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.65); -webkit-transform-origin:100% 0; -o-transform:scale(0.65); -o-transform-origin:100% 0; -moz-transform:scale(0.65); -moz-transform-origin:100% 0; -ms-transform:scale(0.65); -ms-transform-origin:100% 0; z-index:100000!important; }
  344.  
  345. iframe.tmblr-iframe:hover { opacity:1!important; }
  346.  
  347.  
  348.  
  349.  
  350. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  351.  
  352.  
  353.  
  354.  
  355. /* CONTAINER */
  356.  
  357. #container { position:absolute; height:550px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; margin:auto; overflow:hidden; border:1px solid {color:borders};
  358.  
  359. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  360. box-shadow: 2px 2px 15px -2px {color:borders};
  361.  
  362. width: -moz-calc({select:post size}px + 610px);
  363. width: -webkit-calc({select:post size}px + 610px);
  364. width: -o-calc({select:post size}px + 610px);
  365. width: calc({select:post size}px + 610px); }
  366.  
  367. /* TOP BAR */
  368.  
  369. #top-bar { position:absolute; height:60px; top:0px; left:0px; border-bottom:1px solid {color:borders}; z-index:99999; text-align:center;
  370.  
  371. width: -moz-calc({select:post size}px + 610px);
  372. width: -webkit-calc({select:post size}px + 610px);
  373. width: -o-calc({select:post size}px + 610px);
  374. width: calc({select:post size}px + 610px); }
  375.  
  376. .title { position:absolute; width:auto; height:20px; left:50%; top:17.5px; font-family:"abril fatface"; font-size:40px; color:{color:accent3}; background:{color:container}; line-height:10px; z-index:999; padding:0px 40px 0px 40px;
  377.  
  378. -webkit-transform: translateX(-50%);
  379. -moz-transform: translateX(-50%);
  380. -ms-transform: translateX(-50%);
  381. -o-transform: translateX(-50%);
  382. transform: translateX(-50%); }
  383.  
  384. .subtitle { position:absolute; width:auto; height:10px; left:50%; bottom:15px; font-family:"roboto", sans-serif; font-size:7.5px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; background:{color:container}; color:{color:accent2}; text-transform:uppercase; font-style:italic; z-index:99; padding:0px 40px 0px 40px;
  385.  
  386. -webkit-transform: translateX(-50%);
  387. -moz-transform: translateX(-50%);
  388. -ms-transform: translateX(-50%);
  389. -o-transform: translateX(-50%);
  390. transform: translateX(-50%); }
  391.  
  392. .line { position:absolute; width:90%; height:1px; margin:auto; top:0px; right:0px; bottom:0px; left:0px; background:{color:borders}; }
  393.  
  394.  
  395. /* BOTTOM BAR + TAB LINKS */
  396.  
  397. #bottom-bar { position:absolute; height:60px; bottom:0px; left:0px; border-top:1px solid {color:borders}; z-index:99999; width:auto; text-align:center;
  398.  
  399. width: -moz-calc({select:post size}px + 610px);
  400. width: -webkit-calc({select:post size}px + 610px);
  401. width: -o-calc({select:post size}px + 610px);
  402. width: calc({select:post size}px + 610px); }
  403.  
  404. .links { position:absolute; width:620px; height:60px; left:50%;
  405.  
  406. -webkit-transform: translateX(-50%);
  407. -moz-transform: translateX(-50%);
  408. -ms-transform: translateX(-50%);
  409. -o-transform: translateX(-50%);
  410. transform: translateX(-50%); }
  411.  
  412. .links li { display:inline-block; float:left; width:145px; height:60px; line-height:60px; text-align:center; margin:0px 10px 0px 0px; z-index:9999; background:{color:container}; top:0px; left:0px; right:0px; bottom:0px; }
  413.  
  414. .links a { color:{color:accent}; font-size:10px; letter-spacing:1.5px; line-height:20px; word-spacing:5px; font-weight:500; font-family:"roboto", sans-serif; }
  415.  
  416.  
  417. /* SIDEBAR */
  418.  
  419. #sidebar { position:absolute; width:490px; height:430px; right:0px; bottom:60px; overflow:hidden; z-index:999; }
  420.  
  421. .circle1 { position:absolute; width:200px; height:200px; border-radius:100%; background:{color:accent}; bottom:-60px; left:-60px; opacity:.5; }
  422.  
  423. .circle2 { position:absolute; width:40px; height:40px; border-radius:100%; background:{color:accent}; bottom:25px; left:120px; opacity:.5; }
  424.  
  425. .circle3 { position:absolute; width:130px; height:130px; border-radius:100%; background:{color:accent}; top:70px; right:-60px; opacity:.5; }
  426.  
  427. .circle4 { position:absolute; width:120px; height:120px; border-radius:100%; background:{color:accent}; top:-50px; left:-50px; opacity:.5; }
  428.  
  429. .circle5 { position:absolute; width:15px; height:15px; border-radius:100%; background:{color:accent}; top:185px; right:30px; opacity:.5; }
  430.  
  431. .circle6 { position:absolute; width:105px; height:105px; border-radius:100%; background:{color:accent}; bottom:-85px; right:30px; opacity:.5; }
  432.  
  433. .circle7 { position:absolute; width:55px; height:55px; border-radius:100%; background:{color:accent}; top:-35px; right:150px; opacity:.5; }
  434.  
  435.  
  436. /* WINDOW STYLING */
  437.  
  438. .window { position:absolute; width:410px; height:350px; bottom:40px; right:40px; background:{color:posts}; border:1px solid {color:borders}; border-radius:8px; overflow:hidden; }
  439.  
  440. .window-one { position:absolute; width:400px; height:30px; top:0px; left:0px; border-bottom:1px solid {color:borders}; background:{color:accent}; line-height:35px; color:{color:posts}; font-size:30px; word-spacing:-4px; padding-left:10px; }
  441.  
  442. .window-two { position:absolute; width:410px; height:30px; top:31px; left:0px; border-bottom:1px solid {color:borders}; }
  443.  
  444. .two-left { position:absolute; width:75px; height:15px; top:7px; left:0px; text-align:center; padding-left:5px; }
  445.  
  446. .two-left .iconify { font-size:15px; padding-right:5px; vertical-align:-4px; }
  447.  
  448. .two-middle { position:absolute; width:410px; height:30px; top:0px; left:0px; background:transparent; line-height:30px; font-family:'poppins', sans-serif; font-size:11px; text-align:center; font-weight:500; }
  449.  
  450. .two-right { position:absolute; width:50px; height:15px; top:7px; right:0px; text-align:center; padding-left:5px; }
  451.  
  452. .two-right .iconify { font-size:15px; padding-right:2.5px; vertical-align:-4px; }
  453.  
  454.  
  455. /* WINDOW CONTENT */
  456.  
  457. .graph { position:absolute; width:370px; height:90px; top:80px; left:20px; overflow:hidden; }
  458.  
  459. .graph img { width:370px; height:90px; }
  460.  
  461. .pics { position:absolute; width:145px; height:140px; bottom:20px; left:25px; }
  462.  
  463. .polaroid { position:absolute; width:60px; height:65px; top:50px; right:18px; background:{color:container}; border-radius:2px; border:1px solid {color:borders}; z-index:999;
  464.  
  465. -webkit-transform: rotate(10deg);
  466. -moz-transform: rotate(10deg);
  467. -ms-transform: rotate(10deg);
  468. -o-transform: rotate(10deg);
  469.  
  470. -webkit-box-shadow: 2px 2px 10px -2px {color:borders};
  471. box-shadow: 2px 2px 10px -2px {color:borders}; }
  472.  
  473. .polaroid img { width:50px; height:50px; margin-top:5px; margin-left:5px; }
  474.  
  475. .polaroid2 { position:absolute; width:70px; height:75px; top:25px; right:57px; background:{color:container}; border-radius:2px; border:1px solid {color:borders}; z-index:99;
  476.  
  477. -webkit-transform: rotate(-10deg);
  478. -moz-transform: rotate(-10deg);
  479. -ms-transform: rotate(-10deg);
  480. -o-transform: rotate(-10deg);
  481.  
  482. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  483. box-shadow: 2px 2px 15px -2px {color:borders}; }
  484.  
  485. .polaroid2 img { width:60px; height:60px; margin-top:5px; margin-left:5px; }
  486.  
  487. .star-one { position:absolute; width:35px; height:auto; top:10px; right:20px; }
  488.  
  489. .star-two { position:absolute; width:20px; height:auto; bottom:5px; left:32px; z-index:9999;
  490.  
  491. -webkit-transform: rotate(-10deg);
  492. -moz-transform: rotate(-10deg);
  493. -ms-transform: rotate(-10deg);
  494. -o-transform: rotate(-10deg); }
  495.  
  496.  
  497. .desc { position:absolute; width:180px; height:140px; bottom:20px; right:20px; font-family:"roboto", sans-serif; font-size:9px; line-height:20px; text-transform:lowercase; text-align:justify; overflow:scroll; padding:0px 20px 0px 0px; }
  498.  
  499. .desc b { font-family:"poppins", sans-serif; font-size:10px; margin:0px 5px 0px 5px; text-transform:uppercase; letter-spacing:.5px; }
  500.  
  501.  
  502.  
  503.  
  504. /*--- 05: POSTS + ENTRIES ---*/
  505.  
  506.  
  507.  
  508.  
  509. /* POSTS */
  510.  
  511. #posts { position:absolute; height:393px; left:0px; bottom:61px; padding:20px 0px 15px 20px; overflow-x:hidden; overflow-y:auto; z-index:1000; background:transparent; border-right:1px solid {color:borders};
  512.  
  513. width: -moz-calc({select:post size}px + 100px);
  514. width: -webkit-calc({select:post size}px + 100px);
  515. width: -o-calc({select:post size}px + 100px);
  516. width: calc({select:post size}px + 100px); }
  517.  
  518.  
  519. /* ENTRY STYLING */
  520.  
  521. .entry { width:{select:post size}px; height:auto; background:{color:posts}; margin:20px; padding:20px 20px 0px 20px; border:1px solid {color:borders}; border-radius:0px; {block:ifBorderRadius} border-radius:10px; {/block:ifBorderRadius} display:inline-block;
  522.  
  523. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  524. box-shadow: 2px 2px 15px -2px {color:borders}; }
  525.  
  526. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  527.  
  528. .entry img:hover {
  529.  
  530. {block:ifGrayscale} filter: grayscale(0%);
  531. -webkit-transition: all .8s;
  532. -moz-transition: all .8s;
  533. -o-transition: all .8s;
  534. -ms-transition: all .8s;
  535. transition: all .8s; {/block:ifGrayscale} }
  536.  
  537.  
  538.  
  539.  
  540. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  541.  
  542.  
  543.  
  544.  
  545. /* POST INFO */
  546.  
  547. .topinfo { height:20px; margin:-20px 0px 25px -20px; padding:10px 10px 10px 10px; background:{color:post border}; border-bottom:1px solid {color:borders}; border-radius:0px; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} line-height:12px;
  548.  
  549. width: -moz-calc({select:post size}px + 20px);
  550. width: -webkit-calc({select:post size}px + 20px);
  551. width: -o-calc({select:post size}px + 20px);
  552. width: calc({select:post size}px + 20px); }
  553.  
  554. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  555.  
  556. font-size: -moz-calc({select:font size}px - 2px);
  557. font-size: -webkit-calc({select:font size}px - 2px);
  558. font-size: -o-calc({select:font size}px - 2px);
  559. font-size: calc({select:font size}px - 2px); }
  560.  
  561. .topinfo a:hover { color:{color:hover}; font-weight:500;
  562.  
  563. -webkit-transition: all .3s;
  564. -moz-transition: all .3s;
  565. -o-transition: all .3s;
  566. -ms-transition: all .3s;
  567. transition: all .3s; }
  568.  
  569. .topinfo .iconify { color:{color:links}; }
  570.  
  571.  
  572. /* TAGS */
  573.  
  574. .tags { min-height:20px; background:{color:post border}; color:{color:text}; margin:25px 0px -20px -20px; padding:10px; border-radius:0px; {block:ifBorderRadius} border-bottom-left-radius:10px; border-bottom-right-radius:10px; {/block:ifBorderRadius} border-top:1px solid {color:borders}; overflow:hidden; text-align:justify;
  575.  
  576. width: -moz-calc({select:post size}px + 20px);
  577. width: -webkit-calc({select:post size}px + 20px);
  578. width: -o-calc({select:post size}px + 20px);
  579. width: calc({select:post size}px + 20px); }
  580.  
  581. .tags span { color:{color:links}; padding-right:5px; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  582.  
  583. font-size: -moz-calc({select:font size}px - 2px);
  584. font-size: -webkit-calc({select:font size}px - 2px);
  585. font-size: -o-calc({select:font size}px - 2px);
  586. font-size: calc({select:font size}px - 2px); }
  587.  
  588. .tags a { margin-right:5px; padding:0px; color:{color:text}; font-family:'poppins', sans-serif; font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:1px;
  589.  
  590. font-size: -moz-calc({select:font size}px - 2px);
  591. font-size: -webkit-calc({select:font size}px - 2px);
  592. font-size: -o-calc({select:font size}px - 2px);
  593. font-size: calc({select:font size}px - 2px); }
  594.  
  595. .tags a:hover { color:{color:hover}; font-weight:500;
  596.  
  597. -webkit-transition: all .3s;
  598. -moz-transition: all .3s;
  599. -o-transition: all .3s;
  600. -ms-transition: all .3s;
  601. transition: all .3s; }
  602.  
  603.  
  604. /* POST NOTES */
  605.  
  606. .note { margin:20px 0px 0px -31px; font-size:10px; text-transform:uppercase;
  607.  
  608. width: -moz-calc({select:post size}px + 40px);
  609. width: -webkit-calc({select:post size}px + 40px);
  610. width: -o-calc({select:post size}px + 40px);
  611. width: calc({select:post size}px + 40px); }
  612.  
  613. .note li { list-style-type:none; float:left; background:{color:posts}; margin:0; padding:15px 0px 15px 0px; border-left:1px solid {color:borders}; border-top:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center;
  614.  
  615. width: -moz-calc({select:post size}px + 40px);
  616. width: -webkit-calc({select:post size}px + 40px);
  617. width: -o-calc({select:post size}px + 40px);
  618. width: calc({select:post size}px + 40px); }
  619.  
  620. .note img.avatar { display:none; }
  621.  
  622.  
  623. /* PAGINATION */
  624.  
  625. .pagination { width:100%; text-align:center; margin-left:-7.5px; }
  626.  
  627. .pagination a { padding:8px; word-spacing:2px; }
  628.  
  629. .pagination a:hover { color:{color:text}; }
  630.  
  631. .pagination .iconify { color:{color:links}; font-size:25px; }
  632.  
  633.  
  634. /* READ MORE */
  635.  
  636. .more { width:100%; margin-top:20px 0px 5px 0px; text-align:center; }
  637.  
  638. .more a { background:{color:accent}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  639.  
  640. .more a:hover { background:{color:accent2}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  641.  
  642.  
  643.  
  644.  
  645. /*--- 07: CREDIT, do not touch or remove pls ! ---*/
  646.  
  647.  
  648.  
  649.  
  650. /* CREDIT */
  651.  
  652. .credit { position:fixed; width:auto; height:auto; bottom:10px; right:10px; background:{color:container}; border-top-right-radius:10px; border-bottom-left-radius:10px; z-index:9999; border:1px solid {color:borders}; }
  653.  
  654. .credit span { padding:10px; font-size:15px; color:{color:accent}; }
  655.  
  656.  
  657.  
  658.  
  659. /*--- 08: POST TYPES ---*/
  660.  
  661.  
  662.  
  663.  
  664. /* TYPE: CHATS */
  665.  
  666. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  667.  
  668. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  669.  
  670. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{ content:""; position:absolute; width:.5em; height:1em; bottom:0; left:-.5em; border-right:.9em solid #e6e6e6; border-bottom-right-radius:1em .5em; }
  671.  
  672. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background:#147efb; color:white; float:right; }
  673.  
  674. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{ content:""; position:absolute; width:.5em; height:1em; bottom:0; right:-.5em; border-left:.9em solid #147efb; border-bottom-left-radius:1em .5em; }
  675.  
  676. .me p,.answer,.asked span{ margin:0; padding:0; }
  677.  
  678. .answer{ overflow:hidden; }
  679.  
  680. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  681.  
  682. .footerright .viasrc { float:left; }
  683.  
  684. .asked a { margin:0; padding:0; }
  685.  
  686. .user_3{ background:#e6e6e6; color:#555555; }
  687.  
  688. .user_3::after{ border-color:#e6e6e6; }
  689.  
  690. .user_4{ background:#147efb; color:white; }
  691.  
  692. .user_4::after{ border-color:#147efb; }
  693.  
  694. .user_5{ background:#e6e6e6; color:#555555; }
  695.  
  696. .user_5::after{ border-color:#e6e6e6; }
  697.  
  698. .user_6{ background:#147efb; color:white; }
  699.  
  700. .user_6::after{ border-color:#147efb; }
  701.  
  702. .user_7{ background:#e6e6e6; color:#555555; }
  703.  
  704. .user_7::after{ border-color:#e6e6e6; }
  705.  
  706. .user_8{ background:#147efb; color:white; }
  707.  
  708. .user_8::after{ border-color:#147efb; }
  709.  
  710. .user_9{ background:#e6e6e6; color:#555555; }
  711.  
  712. .user_9::after{ border-color:#e6e6e6; }
  713.  
  714. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  715.  
  716. .delivered { width:{select:post size}px; color:{color:text}; margin-top:-10px 0px 0px 0px; font-size:8px; font-weight:400; text-align:right; text-transform:uppercase; letter-spacing:1px; }
  717.  
  718.  
  719. /* TYPE: QUOTES */
  720.  
  721. .quote { color:{color:accent}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  722.  
  723. font-size: -moz-calc({select:font size}px + 20px);
  724. font-size: -webkit-calc({select:font size}px + 20px);
  725. font-size: -o-calc({select:font size}px + 20px);
  726. font-size: calc({select:font size}px + 20px); }
  727.  
  728. .source { text-align:right; margin-top:15px;
  729.  
  730. font-size: -moz-calc({select:font size}px - 1px);
  731. font-size: -webkit-calc({select:font size}px - 1px);
  732. font-size: -o-calc({select:font size}px - 1px);
  733. font-size: calc({select:font size}px - 1px);
  734.  
  735. line-height: -moz-calc({select:font size}px + 8px);
  736. line-height: -webkit-calc({select:font size}px + 8px);
  737. line-height: -o-calc({select:font size}px + 8px);
  738. line-height: calc({select:font size}px + 8px); }
  739.  
  740.  
  741. /* TYPE: ASKS */
  742.  
  743. #question { background:{color:background}; color:{color:text}; margin:5px 0px 15px 0px; padding:10px 20px 0px 20px; overflow:hidden; text-align:justify; }
  744.  
  745. #asker { width:100%; height:30px; background:{color:accent}; color:{color:posts}; margin:10px 0px 0px -30px; padding:10px 15px 0px 35px; font-size:8px; font-weight:400; text-align:right; text-transform:uppercase; letter-spacing:1.5px; line-height:23px; }
  746.  
  747. #asker a { color:{color:posts}; font-weight:500; }
  748.  
  749.  
  750. /* TYPE: LINKS */
  751.  
  752. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  753.  
  754. font-size: -moz-calc({select:font size}px + 20px);
  755. font-size: -webkit-calc({select:font size}px + 20px);
  756. font-size: -o-calc({select:font size}px + 20px);
  757. font-size: calc({select:font size}px + 20px); }
  758.  
  759.  
  760. /* TYPE: AUDIO */
  761.  
  762. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  763.  
  764. .albumtrack { position:absolute; width:33px; height:30px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; opacity:.6; }
  765.  
  766. .albuminfo { position:relative; width:calc(100% - 142.5px); height:60px; padding:20px; margin:-102px 0px 0px 100px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; border-top-right-radius:5px; border-bottom-right-radius:5px; line-height:20px; }
  767.  
  768. .albuminfo-text { position:absolute; width:100%; height:auto; top:27.5%; left:0%; font-size:10px; }
  769.  
  770. .albuminfo-text b { color:{color:accent}; }
  771.  
  772.  
  773. /* TYPE: VIDEOS */
  774.  
  775. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  776.  
  777. .tumblr_video_container:hover {
  778.  
  779. {block:ifGrayscale} filter: grayscale(0%);
  780. -webkit-transition: all .8s;
  781. -moz-transition: all .8s;
  782. -o-transition: all .8s;
  783. -ms-transition: all .8s;
  784. transition: all .8s; {/block:ifGrayscale} }
  785.  
  786.  
  787.  
  788.  
  789. /*--- 09: TAB STYLING ---*/
  790.  
  791.  
  792.  
  793.  
  794. /* TAB + CLOSE CONTENT */
  795.  
  796. .tcontent { position:absolute; width:410px; height:288px; right:0px; bottom:0px; background:{color:posts}; overflow:hidden; z-index:9999; display:none; animation:fadeEffect 1s; }
  797.  
  798. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  799.  
  800. .tcontent button { position:absolute; top:0px; right:0px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  801.  
  802. .tcontent button:hover { cursor:pointer; }
  803.  
  804. .tcontent button:focus { outline:0; }
  805.  
  806.  
  807. /* NAVI TAB STYLING */
  808.  
  809. .navi-links { position:absolute; width:240px; height:160px; right:-15px; top:30px; }
  810.  
  811. .navi-links li { float:left; display:inline-block; width:80px; height:auto; margin:7px; border-radius:5px; text-align:center; padding:3px; }
  812.  
  813. .navi-links li:nth-child(1) { background:{color:accent2}; }
  814. .navi-links li:nth-child(2) { background:{color:accent}; }
  815. .navi-links li:nth-child(3) { background:{color:accent}; }
  816. .navi-links li:nth-child(4) { background:{color:accent2}; }
  817. .navi-links li:nth-child(5) { background:{color:accent2}; }
  818. .navi-links li:nth-child(6) { background:{color:accent}; }
  819.  
  820. .navi-links a { font-size:8px; font-family:"roboto", sans-serif; color:{color:container}; text-shadow:none; }
  821.  
  822. .navi-links a:hover { font-style:italic; }
  823.  
  824. .navi-graph { position:absolute; width:150px; height:250px; top:18px; left:20px; overflow:hidden; }
  825.  
  826. .navi-graph img { width:150px; height:250px; }
  827.  
  828. .navi-title { position:absolute; width:auto; height:20px; right:35px; bottom:90px; font-family:"abril fatface"; font-size:35px; color:{color:accent3}; background:{color:container}; line-height:10px; text-align:right; z-index:999; }
  829.  
  830. .navi-subtitle { position:absolute; width:155px; height:60px; bottom:20px; right:35px; font-family:"roboto", sans-serif; font-size:9px; line-height:20px; text-transform:lowercase; text-align:justify; overflow:scroll; padding:0px 15px 0px 0px; }
  831.  
  832. .navi-subtitle b { font-family:"poppins", sans-serif; font-size:10px; margin:0px 5px 0px 5px; text-transform:uppercase; letter-spacing:.5px; }
  833.  
  834.  
  835. /* MUSE TAB STYLING */
  836.  
  837. .muses { position:absolute; width:220px; height:170px; right:0px; bottom:20px; overflow-x:hidden; overflow-y:scroll; padding:0px 0px 20px 0px; }
  838.  
  839. .muse-title { position:absolute; width:auto; height:20px; left:190px; top:25px; font-family:"abril fatface"; font-size:35px; color:{color:accent3}; background:{color:container}; line-height:10px; z-index:999; }
  840.  
  841. #buttons { position:absolute; width:auto; height:auto; top:45px; left:190px; }
  842.  
  843. .button { cursor:pointer; display:inline-block; margin-right:5px; font-family:"roboto", sans-serif; font-size:7.5px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; }
  844.  
  845. .button.selected { color:{color:accent3}; text-decoration:none; font-style:italic; }
  846.  
  847. .grid { width:220px; }
  848.  
  849. .item { display:inline-block; float:left; width:70px; height:70px; margin:10px; background:{color:container}; border:1px solid {color:borders};
  850.  
  851. -webkit-box-shadow: 2px 2px 10px -2px {color:borders};
  852. box-shadow: 2px 2px 10px -2px {color:borders}; }
  853.  
  854. .item img { width:60px; height:60px; margin-top:5px; margin-left:5px; }
  855.  
  856.  
  857.  
  858.  
  859.  
  860.  
  861.  
  862.  
  863. /*--- 10: CUSTOM CSS ---*/
  864.  
  865.  
  866.  
  867.  
  868. {CustomCSS}
  869. </style></head><body>
  870.  
  871.  
  872.  
  873.  
  874. <div id="container">
  875.  
  876. <div id="top-bar"> <div class="line"> </div> <div class="title"> {text:title} </div> <div class="subtitle"> {text:subtitle}</em> </div> </div>
  877.  
  878. <div id="bottom-bar">
  879.  
  880. <div class="line"> </div>
  881.  
  882. <div class="links">
  883.  
  884. <li><a href="/" title="return home."> &#9671; refresh &#9671;</a></li>
  885.  
  886. <li><a href="/ask" title="contact me."> &#9671; askbox &#9671;</a></li>
  887.  
  888. <li><a href="#" class="tlinks" onclick="openCapitae(event, 'navi')" title="calculating route."> &#9671; navigate &#9671; </a></li>
  889.  
  890. {block:ifmusetab} <li><a href="#" class="tlinks" onclick="openCapitae(event, 'muses')" title="character masterlist."> &#9671; muses &#9671; </a></li> {/block:ifmusetab}
  891.  
  892. {block:ifNotmusetab} <li><a href="{text:free link}" title="{text:free link hover}."> &#9671; {text:free link title} &#9671;</a></li> {/block:ifNotmusetab}
  893.  
  894. </div>
  895.  
  896. </div>
  897.  
  898. <div id="sidebar">
  899.  
  900. <div class="circle1"></div>
  901. <div class="circle2"></div>
  902. <div class="circle3"></div>
  903. <div class="circle4"></div>
  904. <div class="circle5"></div>
  905. <div class="circle6"></div>
  906. <div class="circle7"></div>
  907.  
  908. <div class="window">
  909.  
  910. <div class="window-one"> &bull; &bull; &bull; </div>
  911. <div class="window-two">
  912.  
  913. <div class="two-left"> <span class="iconify" data-icon="mdi:arrow-left" data-inline="false"></span> <span class="iconify" data-icon="mdi:arrow-right" data-inline="false"></span> <span class="iconify" data-icon="mdi:refresh" data-inline="false"></span></div><div class="two-middle">{name}.tumblr.com</div><div class="two-right"> <span class="iconify" data-icon="mdi:puzzle" data-inline="false" style="font-size:13px; vertical-align:-2.5px;"></span><span class="iconify" data-icon="mdi:dots-vertical" data-inline="false"></span></div>
  914.  
  915. </div>
  916.  
  917. <div class="graph"> <img src="{image:sidebar}" draggable="false"> </div>
  918.  
  919. <div class="pics">
  920.  
  921. <div class="star-one"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve"> <polygon points="1000,73.36 1060.1,895.91 1802.49,536.68 1120.2,1000 1802.49,1463.32 1060.1,1104.09 1000,1926.64 939.9,1104.09 197.51,1463.32 879.8,1000 197.51,536.68 939.9,895.91" fill="{color:accent3}"/> </svg> </div>
  922.  
  923. <div class="star-two"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve"> <polygon points="1000,39.76 1082.28,917.72 1960.24,1000 1082.28,1082.28 1000,1960.24 917.72,1082.28 39.76,1000 917.72,917.72" fill="{color:accent3}"/> </svg> </div>
  924.  
  925. <div class="polaroid"> <img src="{image:polaroid1}" draggable="false"> </div>
  926. <div class="polaroid2"> <img src="{image:polaroid2}" draggable="false"> </div>
  927.  
  928. </div>
  929.  
  930. <div class="desc">
  931.  
  932. {text:desc}
  933.  
  934. </div>
  935.  
  936.  
  937.  
  938.  
  939. <!-- TABS: navigation -->
  940.  
  941. <div id="navi" class="tcontent"> <button> x </button>
  942.  
  943.  
  944. <div class="navi-graph"> <img src="{image:navigation}" draggable="false"> </div>
  945.  
  946.  
  947. <!-- edit your navi links here! -->
  948.  
  949. <div class="navi-links">
  950.  
  951. <li> <a href="/"> link one. </a>
  952. <li> <a href="/"> link two. </a>
  953.  
  954. <li> <a href="/"> link three. </a>
  955. <li> <a href="/"> link four. </a>
  956.  
  957. <li> <a href="/"> link five. </a>
  958. <li> <a href="/"> link six. </a>
  959.  
  960. </div>
  961.  
  962.  
  963. <!-- edit your navi text here! -->
  964.  
  965. <div class="navi-title"> navigate </div>
  966.  
  967. <div class="navi-subtitle">
  968.  
  969. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  970.  
  971. </div>
  972.  
  973.  
  974. </div>
  975.  
  976.  
  977. <!-- TABS: muses -->
  978.  
  979. <div id="muses" class="tcontent"> <button> x </button>
  980.  
  981. <div class="navi-graph"> <img src="{image:muses}" draggable="false"> </div>
  982.  
  983. <div class="muse-title"> characters </div>
  984.  
  985. <!--- visit the link if you need help on how to work with / edit the filters !!
  986.  
  987. https://capitae.tumblr.com/private/614319258080526336/tumblr_q86hsiomOL1uwrgub/mobile --->
  988.  
  989.  
  990. <div id="buttons">
  991. <div class="button selected" filter="item">all.</div>
  992. <div class="button" filter="open">open.</div>
  993. <div class="button" filter="closed">closed.</div>
  994. <div class="button" filter="selective">selective.</div>
  995. </div>
  996.  
  997. <div class="muses">
  998.  
  999. <div class="grid">
  1000.  
  1001. <!-- edit your muse info + pictures here! -->
  1002.  
  1003. <div class="item open"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1004.  
  1005. <div class="item closed"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1006.  
  1007. <div class="item selective"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1008.  
  1009. <div class="item open closed"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1010.  
  1011. <div class="item selective closed"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1012.  
  1013. <div class="item open"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1014.  
  1015. <div class="item closed"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1016.  
  1017. <div class="item closed"> <a href="/" title="muse info!"> <img src="https://via.placeholder.com/60x60" draggable="false"> </a></div>
  1018.  
  1019. </div> <!--- end grid --->
  1020.  
  1021. </div> <!--- end muses -->
  1022.  
  1023. </div> <!--- end muse tab --->
  1024.  
  1025. </div> <!--- windows end --->
  1026.  
  1027. </div> <!--- sidebar end --->
  1028.  
  1029.  
  1030.  
  1031. <!--- POSTS --->
  1032.  
  1033. <div id="posts">
  1034. {block:Posts}
  1035. <div class="entry">
  1036.  
  1037. <!-- TOP INFO --->
  1038.  
  1039. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="posted {TimeAgo} with {NoteCountWithLabel}."> <span class="iconify" data-icon="clarity:calendar-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-right:2px;"></span> {Month} {Year}</a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?"> <span class="iconify" data-icon="clarity:repeat-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-right:1px;"></span> reblog</a> {block:ContentSource} <a href="{SourceURL}" title="posted by {SourceTitle}."> <span class="iconify" data-icon="clarity:directory-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-left:7px;"></span> source</a>{/block:ContentSource} </span></p> </div>
  1040.  
  1041. <!-- TEXT --->
  1042.  
  1043. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1044.  
  1045. <!-- PHOTOS --->
  1046.  
  1047. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1048.  
  1049. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1050.  
  1051. <!-- QUOTE --->
  1052.  
  1053. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1054.  
  1055. <!-- LINKS --->
  1056.  
  1057. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1058. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1059.  
  1060. <!-- CHATS --->
  1061.  
  1062. {block:Chat} <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold;">@{Label} </span>{/block:Label}
  1063. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  1064.  
  1065. <!-- AUDIO --->
  1066.  
  1067. {block:Audio}
  1068. {block:AlbumArt}
  1069. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  1070. <div class="albuminfo"><div class="albuminfo-text">
  1071. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  1072. </div></div>
  1073. {/block:Audio}
  1074.  
  1075. <!-- VIDEO --->
  1076.  
  1077. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1078.  
  1079. <!-- ASKS --->
  1080.  
  1081. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1082.  
  1083. <!-- POST CAPTIONS --->
  1084.  
  1085. {block:Caption}{Caption}{/block:Caption}
  1086.  
  1087. <!-- READ MORE --->
  1088.  
  1089. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1090.  
  1091. <!-- TAGS --->
  1092.  
  1093. {block:HasTags} <div class="tags"> <span>with keywords: </span> {block:Tags}<a href="{TagURL}">#{Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  1094.  
  1095. <!-- POST NOTES --->
  1096.  
  1097. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1098.  
  1099. </div>
  1100. {/block:Posts}
  1101.  
  1102. <!-- PAGINATION -->
  1103.  
  1104. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <span class="iconify" data-icon="ei:chevron-left" data-inline="false"></span> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <span class="iconify" data-icon="ei:chevron-right" data-inline="false"></span> </a> {/block:nextpage} </div> {/block:pagination}
  1105.  
  1106.  
  1107. </div>
  1108. </div>
  1109.  
  1110.  
  1111.  
  1112.  
  1113. <!-- CREDIT -->
  1114.  
  1115. <div class="credit">
  1116. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="th th-holly-o"></span> </a>
  1117. </div>
  1118.  
  1119.  
  1120.  
  1121.  
  1122. </body>
  1123. </html>
  1124.  
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!