API tools faq
paste
lovesjoon

12. astral by capitae (400px)

lovesjoon
Jan 19th, 2021 (edited)
601
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.03 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. <!--- 12. astral by capitae. (400px)
  15.  
  16.  
  17. ♡ USER GUIDE ♡
  18.  
  19. ・｡* sidebar img: width:300px; height:180px;
  20.  
  21. ・｡* png img: width:260px; height:550px;
  22.  
  23. ・｡* navi img: width:150px; height:360px;
  24.  
  25. ・｡* muses img: width:40px; height:40px;
  26.  
  27.  
  28. ♡ READ ME ♡
  29.  
  30. ・｡* base code by @pixiemail.
  31.  
  32. ・｡* please don't recreate and/or steal parts of this code
  33.  
  34. ・｡* don't remove the credit
  35.  
  36. ・｡* feel free to reach out if there are any bugs or questions!
  37.  
  38. ・｡* animations by Animista
  39.  
  40.  
  41. /* ----------------------------------------------
  42. * Generated by Animista
  43. * Licensed under FreeBSD License.
  44. * See http://animista.net/license for more info.
  45. * w: http://animista.net, t: @cssanimista
  46. * ----------------------------------------------*/
  47.  
  48.  
  49. i hope you enjoy this code !! --->
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60. <title>{Title}</title>
  61. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  62. <link rel="shortcut icon" href="{Favicon}">
  63. {block:Description}
  64. <meta name="description" content="{MetaDescription}">
  65. {/block:Description}
  66.  
  67.  
  68.  
  69.  
  70. <meta name="image:background" content=""/>
  71. <meta name="image:sidebar" content="https://via.placeholder.com/300x180"/>
  72. <meta name="image:png" content="https://via.placeholder.com/260x550"/>
  73. <meta name="image:navi" content="https://via.placeholder.com/150x360"/>
  74.  
  75. <meta name="color:background" content="#eee"/>
  76. <meta name="color:container" content="#fff"/>
  77. <meta name="color:posts" content="#fff"/>
  78. <meta name="color:post border" content="#f8f8f8"/>
  79. <meta name="color:borders" content="#ddd"/>
  80. <meta name="color:accent" content="#acb7c9"/>
  81. <meta name="color:accent2" content="#c4cbd7"/>
  82. <meta name="color:text" content="#acacac"/>
  83. <meta name="color:links" content="#b0a8b7"/>
  84. <meta name="color:hover" content="#98a3a9"/>
  85. <meta name="color:bold" content="#d8d6d7"/>
  86. <meta name="color:italic" content="#98a3a9"/>
  87.  
  88. <meta name="select:body font" content="roboto" title="roboto"/>
  89. <meta name="select:body font" content="montserrat" title="montserrat"/>
  90. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  91. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  92. <meta name="select:body font" content="raleway" title="raleway"/>
  93. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  94. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  95.  
  96. <meta name="select:font size" content="10" title="10px"/>
  97. <meta name="select:font size" content="11" title="11px"/>
  98. <meta name="select:font size" content="12" title="12px"/>
  99.  
  100. <meta name="if:border radius" content="0"/>
  101. <meta name="if:grayscale" content="0"/>
  102.  
  103. <meta name="text:link url" content="/"/>
  104. <meta name="text:link text" content="link."/>
  105. <meta name="text:title" content="astral."/>
  106. <meta name="text:desc" content="What is Lorem Ipsum? 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."/>
  107. <meta name="text:navi title" content="to the stars i write, the sea has called you home..."/>
  108.  
  109.  
  110.  
  111.  
  112. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  113.  
  114.  
  115.  
  116.  
  117. <!--- JQUERY SCRIPTS --->
  118.  
  119. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  120. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  121.  
  122.  
  123.  
  124.  
  125. <!--- TOOLTIP SCRIPT ---->
  126.  
  127. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  128. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  129. <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>
  130.  
  131.  
  132.  
  133.  
  134. <!--- GOOGLE + ICON FONTS ---->
  135.  
  136. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  137. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  138.  
  139. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  140.  
  141. <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">
  142.  
  143. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  144.  
  145.  
  146. <!-- POST STYLING FONTS -->
  147.  
  148. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins&display=swap" rel="stylesheet">
  149.  
  150.  
  151. <!-- BODY FONTS -->
  152.  
  153. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  154.  
  155. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  156.  
  157. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  158.  
  159. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  160.  
  161. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  162.  
  163. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  164.  
  165. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  166.  
  167.  
  168.  
  169.  
  170. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  171.  
  172. <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>
  173.  
  174.  
  175.  
  176.  
  177. <!--- TAB SCRIPT by www.w3schools.com ---->
  178.  
  179. <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace("active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += "active"; } </script>
  180.  
  181.  
  182.  
  183.  
  184. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  185.  
  186. <script>
  187. $(document).ready(function(){
  188. $("button").click(function(){
  189. $(".tabcontent").fadeOut("slow");
  190. });
  191. });
  192. </script>
  193.  
  194.  
  195.  
  196.  
  197. <!--- POPUP SCRIPT by themekid ---->
  198.  
  199. <script type="text/javascript" src="https://static.tumblr.com/8pnyeus/10hors8sn/themekid-popup.min.js"></script><script type="text/javascript">$(document).ready(function(){ popUp(true); });</script>
  200.  
  201.  
  202.  
  203.  
  204. <style type="text/css">
  205.  
  206.  
  207.  
  208. /*--- FONTS HOSTED BY @CAPITAE ---*/
  209.  
  210. @font-face{ font-family:"qwenzy"; src: url('https://dl.dropboxusercontent.com/s/5by6d7bk0k6fkoj/Qwenzy.ttf’)'); }
  211.  
  212. @font-face{ font-family:"romantica"; src: url('https://dl.dropboxusercontent.com/s/rop4adzqdurf7n0/Romantica.ttf’)'); }
  213.  
  214.  
  215.  
  216.  
  217. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  218.  
  219.  
  220.  
  221.  
  222. /* TOOLTIP */
  223.  
  224. #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-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  225.  
  226.  
  227. /* SCROLLBAR */
  228.  
  229. ::-webkit-scrollbar-thumb { display:none; }
  230.  
  231. ::-webkit-scrollbar { display:none; }
  232.  
  233.  
  234. /* SELECTION */
  235.  
  236. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  237.  
  238. ::selection { background:{color:accent}; color:{color:posts};}
  239.  
  240.  
  241.  
  242.  
  243. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  244.  
  245.  
  246.  
  247.  
  248. /* TYPE: BODY */
  249.  
  250. 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; text-align:justify;
  251.  
  252. font-family:{select:body font};
  253. font-size:{select:font size}px;
  254. line-height: -moz-calc({select:font size}px + 8px);
  255. line-height: -webkit-calc({select:font size}px + 8px);
  256. line-height: -o-calc({select:font size}px + 8px);
  257. line-height: calc({select:font size}px + 8px); }
  258.  
  259.  
  260. /* TYPE: IMAGES */
  261.  
  262. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  263.  
  264. iframe:hover, img:hover, embed:hover, object:hover {
  265.  
  266. {block:ifGrayscale} filter: grayscale(0%);
  267. -webkit-transition: all .8s;
  268. -moz-transition: all .8s;
  269. -o-transition: all .8s;
  270. -ms-transition: all .8s;
  271. transition: all .8s; {/block:ifGrayscale} }
  272.  
  273. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  274.  
  275. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  276.  
  277. -webkit-transition: all .8s;
  278. -moz-transition: all .8s;
  279. -o-transition: all .8s;
  280. -ms-transition: all .8s;
  281. transition: all .8s; {/block:ifGrayscale} }
  282.  
  283.  
  284. /* TYPE: TEXT STYLING */
  285.  
  286. select, textarea, input, a { outline:none; }
  287.  
  288. p { margin-top:5px; margin-bottom:5px; }
  289.  
  290. small, sub, sup { font-size:100%; }
  291.  
  292. big { font-size:110%; }
  293.  
  294. h1 { color:{color:accent}; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  295.  
  296. font-size: -moz-calc({select:font size}px + 20px);
  297. font-size: -webkit-calc({select:font size}px + 20px);
  298. font-size: -o-calc({select:font size}px + 20px);
  299. font-size: calc({select:font size}px + 20px); }
  300.  
  301. h2 { color:{color:accent2}; font-family:'poppins', sans-serif; line-height:18px; text-align:center; text-transform:lowercase;
  302.  
  303. font-size: -moz-calc({select:font size}px + 5px);
  304. font-size: -webkit-calc({select:font size}px + 5px);
  305. font-size: -o-calc({select:font size}px + 5px);
  306. font-size: calc({select:font size}px + 5px); }
  307.  
  308. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  309.  
  310. font-size: -moz-calc({select:font size}px - 1px);
  311. font-size: -webkit-calc({select:font size}px - 1px);
  312. font-size: -o-calc({select:font size}px - 1px);
  313. font-size: calc({select:font size}px - 1px); }
  314.  
  315. a:hover { color:{color:hover};
  316.  
  317. -webkit-transition: all .3s;
  318. -moz-transition: all .3s;
  319. -o-transition: all .3s;
  320. -ms-transition: all .3s;
  321. transition: all .3s; }
  322.  
  323. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  324.  
  325. b, strong { color:{color:bold}; }
  326.  
  327. i, em { color:{color:italic}; }
  328.  
  329. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  330.  
  331.  
  332. /* TYPE: TUMBLR CONTROLS */
  333.  
  334. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.8); -webkit-transform-origin:100% 0; -o-transform:scale(0.8); -o-transform-origin:100% 0; -moz-transform:scale(0.8); -moz-transform-origin:100% 0; -ms-transform:scale(0.8); -ms-transform-origin:100% 0; z-index:100000!important; }
  335.  
  336. iframe.tmblr-iframe:hover { opacity:1!important; }
  337.  
  338.  
  339. /* TYPE: ANIMATIONS */
  340.  
  341. .scale-in-center{-webkit-animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000);animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000)}
  342.  
  343. @-webkit-keyframes scale-in-center{ 0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1} }
  344.  
  345.  
  346.  
  347.  
  348. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  349.  
  350.  
  351.  
  352.  
  353. /* CONTAINER */
  354.  
  355. #wrapper { position:absolute; width:1100px; height:600px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; }
  356.  
  357. #border { position:absolute; width:950px; height:500px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; overflow:hidden; border-radius:15px; }
  358.  
  359. #container { position:absolute; width:900px; height:450px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; overflow:hidden; z-index:99; border:1px solid {color:borders}; }
  360.  
  361. #box { position:absolute; width:75px; height:75px; top:50px; left:75px; background:{color:accent}; border-top-left-radius:15px; }
  362.  
  363. #box2 { position:absolute; width:350px; height:500px; bottom:50px; right:70px; background:{color:accent}; }
  364.  
  365.  
  366. /* SIDEBAR */
  367.  
  368. .png { position:absolute; width:260px; height:auto; bottom:0px; right:0px; z-index:999; }
  369.  
  370. .png img { width:260px; height:550px; }
  371.  
  372. .picture { position:absolute; width:340px; height:220px; right:25px; top:25px; background:{color:container}; border-top-right-radius:0px; border-bottom-right-radius:0px; border:1px solid {color:borders}; }
  373.  
  374. .picture img { position:absolute; width:300px; height:180px; margin-top:20px; margin-left:20px; background:black; z-index:999999; }
  375.  
  376. .title { position:absolute; width:350px; height:70px; top:200px; right:40px; font-family:"qwenzy"; font-size:70px; line-height:80px; text-align:left; font-weight:bold; color:{color:accent2}; letter-spacing:2px; z-index:9999999; }
  377.  
  378. .desctxt { position:absolute; width:290px; height:120px; margin:auto; right:50px; bottom:50px; font-family:"poppins"; font-size:9px; text-transform:lowercase; line-height:20px; text-align:justify; overflow:scroll; word-spacing:3px; }
  379.  
  380. .line { position:absolute; width:200px; height:1px; right:25px; bottom:22.5px; background:{color:borders}; z-index:999; }
  381.  
  382.  
  383. /* SIDEBAR LINKS */
  384.  
  385. .tab { position:absolute; width:auto; height:20px; bottom:15px; right:130px; padding-left:15px; overflow:hidden; text-align:center; background:{color:container}; z-index:99999; }
  386.  
  387. .tab li { display:inline-block; float:left; width:auto; height:auto; margin:0px 15px 0px 5px; }
  388.  
  389. .tab a { color:{color:accent}; font-size:9px; letter-spacing:1px; font-family:"montserrat"; }
  390.  
  391. .tab a:hover { letter-spacing:2px; }
  392.  
  393.  
  394.  
  395.  
  396. /*--- 05: POSTS + ENTRIES ---*/
  397.  
  398.  
  399.  
  400.  
  401. /* POSTS */
  402.  
  403. #posts { position:absolute; width:480px; height:410px; left:0px; top:0px; overflow-x:hidden; overflow-y:auto; z-index:1000; padding:20px; }
  404.  
  405.  
  406. /* ENTRY STYLING */
  407.  
  408. .entry { width:400px; height:auto; background:{color:posts}; margin:20px; padding:20px 20px 0px 20px; border:1px solid {color:borders}; display:inline-block; border-radius:0px; {block:ifBorderRadius} border-radius:10px; {/block:ifBorderRadius} box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); }
  409.  
  410. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  411.  
  412. .entry img:hover {
  413.  
  414. {block:ifGrayscale} filter: grayscale(0%);
  415. -webkit-transition: all .8s;
  416. -moz-transition: all .8s;
  417. -o-transition: all .8s;
  418. -ms-transition: all .8s;
  419. transition: all .8s; {/block:ifGrayscale} }
  420.  
  421.  
  422.  
  423.  
  424. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  425.  
  426.  
  427.  
  428. /* POST INFO */
  429.  
  430. .topinfo { width:420px; height:20px; margin-top:-20px; margin-bottom:25px; margin-left:-20px; padding: 10px 10px 10px 10px; background:{color:post border}; border-bottom:1px solid {color:borders}; line-height:12px; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} }
  431.  
  432. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  433.  
  434. .topinfo b { padding:0px 3px 0px 2px; font-family:'poppins', sans-serif; font-size:10px; }
  435.  
  436.  
  437. /*TAGS*/
  438.  
  439. .tags { width:420px; height:auto; min-height:20px; text-align:justify; background:{color:post border}; color:{color:text}; border-top:1px solid {color:borders}; overflow:hidden; font-size:8px; line-height:22px; padding:10px; margin:25px 0px -20px -20px; {block:ifBorderRadius} border-bottom-left-radius:10px; border-bottom-right-radius:10px; {/block:ifBorderRadius} }
  440.  
  441. .tags i { font-size:9px; text-transform:uppercase; letter-spacing:1px; padding-right:5px; }
  442.  
  443. .tags a { color:{color:text}; font-family:'poppins', sans-serif; padding:0px; font-weight:normal; margin-right:5px;
  444.  
  445. font-size: -moz-calc({select:font size}px - 2px);
  446. font-size: -webkit-calc({select:font size}px - 2px);
  447. font-size: -o-calc({select:font size}px - 2px);
  448. font-size: calc({select:font size}px - 2px); }
  449.  
  450. .tags a:hover { color:{color:hover}; font-weight:bold;
  451.  
  452. -webkit-transition: all .3s;
  453. -moz-transition: all .3s;
  454. -o-transition: all .3s;
  455. -ms-transition: all .3s;
  456. transition: all .3s; }
  457.  
  458.  
  459. /* POST NOTES */
  460.  
  461. .note { width:420px; margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  462.  
  463. .note li { width:420px; background:{color:posts}; margin:0; padding:15px 0px 15px 0px; list-style-type:none; float:left; border-left:1px solid {color:borders}; border-top:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; }
  464.  
  465. .note img.avatar { display:none; }
  466.  
  467.  
  468. /* PAGINATION */
  469.  
  470. .pagination { width:100%; text-align:center; padding-bottom:20px; margin-left:-7.5px; }
  471.  
  472. .pagination a { padding:8px; word-spacing:2px; }
  473.  
  474. .pagination a:hover { color:{color:text}; }
  475.  
  476. .pagination .iconify { font-size:25px; color:{color:links}; }
  477.  
  478.  
  479. /* READ MORE */
  480.  
  481. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  482.  
  483. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  484.  
  485. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  486.  
  487.  
  488.  
  489.  
  490. /*--- 07: CREDIT, do not touch or remove pls ! ---*/
  491.  
  492.  
  493.  
  494.  
  495. /* CREDIT */
  496.  
  497. .cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; }
  498.  
  499. .cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  500.  
  501. -webkit-background-clip:text;
  502. -webkit-text-fill-color:transparent; }
  503.  
  504.  
  505.  
  506.  
  507. /*--- 08: POST TYPES ---*/
  508.  
  509.  
  510.  
  511.  
  512. /* TYPE: CHATS */
  513.  
  514. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  515.  
  516. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  517.  
  518. .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; left:-.5em; bottom:0; border-right:.9em solid #e6e6e6; border-bottom-right-radius:1em .5em; }
  519.  
  520. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background:#147efb; color:white; float:right; }
  521.  
  522. .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; right:-.5em; bottom:0; border-left:.9em solid #147efb; border-bottom-left-radius:1em .5em; }
  523.  
  524. .me p,.answer,.asked span{ margin:0; padding:0; }
  525.  
  526. .answer{ overflow:hidden; }
  527.  
  528. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  529.  
  530. .footerright .viasrc { float:left; }
  531.  
  532. .asked a { margin:0; padding:0; }
  533.  
  534. .user_3{ background:#e6e6e6; color:#555555; }
  535.  
  536. .user_3::after{ border-color:#e6e6e6; }
  537.  
  538. .user_4{ background:#147efb; color:white; }
  539.  
  540. .user_4::after{ border-color:#147efb; }
  541.  
  542. .user_5{ background:#e6e6e6; color:#555555; }
  543.  
  544. .user_5::after{ border-color:#e6e6e6; }
  545.  
  546. .user_6{ background:#147efb; color:white; }
  547.  
  548. .user_6::after{ border-color:#147efb; }
  549.  
  550. .user_7{ background:#e6e6e6; color:#555555; }
  551.  
  552. .user_7::after{ border-color:#e6e6e6; }
  553.  
  554. .user_8{ background:#147efb; color:white; }
  555.  
  556. .user_8::after{ border-color:#147efb; }
  557.  
  558. .user_9{ background:#e6e6e6; color:#555555; }
  559.  
  560. .user_9::after{ border-color:#e6e6e6; }
  561.  
  562. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  563.  
  564. .delivered { width:400px; margin-top:-10px; margin-left:0px; color:{color:text}; font-size:8px; text-align:right; text-transform:uppercase; letter-spacing:1px; }
  565.  
  566.  
  567. /* TYPE: QUOTES */
  568.  
  569. .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;
  570.  
  571. font-size: -moz-calc({select:font size}px + 20px);
  572. font-size: -webkit-calc({select:font size}px + 20px);
  573. font-size: -o-calc({select:font size}px + 20px);
  574. font-size: calc({select:font size}px + 20px); }
  575.  
  576. .source { text-align:right; margin-top:15px;
  577.  
  578. font-size: -moz-calc({select:font size}px - 1px);
  579. font-size: -webkit-calc({select:font size}px - 1px);
  580. font-size: -o-calc({select:font size}px - 1px);
  581. font-size: calc({select:font size}px - 1px);
  582.  
  583. line-height: -moz-calc({select:font size}px + 8px);
  584. line-height: -webkit-calc({select:font size}px + 8px);
  585. line-height: -o-calc({select:font size}px + 8px);
  586. line-height: calc({select:font size}px + 8px); }
  587.  
  588.  
  589. /* TYPE: ASKS */
  590.  
  591. #question { background:{color:background}; color:{color:text}; padding:10px 20px; padding-bottom:0px; margin:0px; margin-top:5px; margin-bottom:15px; overflow:hidden; text-align:justify; }
  592.  
  593. #asker { width:100%; height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:10px; margin-left:-30px; margin-bottom:0px; padding:10px 15px 0px 35px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  594.  
  595. #asker a { color:{color:posts}; font-weight:bold; }
  596.  
  597.  
  598. /* TYPE: LINKS */
  599.  
  600. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  601.  
  602. font-size: -moz-calc({select:font size}px + 20px);
  603. font-size: -webkit-calc({select:font size}px + 20px);
  604. font-size: -o-calc({select:font size}px + 20px);
  605. font-size: calc({select:font size}px + 20px); }
  606.  
  607.  
  608. /* TYPE: AUDIO */
  609.  
  610. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  611.  
  612. .albumtrack { position:absolute; width:33px; height:30px; margin:auto; top:0px; right:0px; bottom:0px; left:0px; opacity:.6; }
  613.  
  614. .albuminfo { position:relative; width:calc(100% - 142.5px); height:60px; padding:20px; margin-top:-102px; margin-left:100px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; line-height:20px; border-top-right-radius:5px; border-bottom-right-radius:5px; }
  615.  
  616. .albuminfotxt { position:absolute; top:27.5%; left:0%; width:100%; height:auto; font-size:10px; }
  617.  
  618. .albuminfotxt b { color:{color:accent}; }
  619.  
  620.  
  621. /* TYPE: VIDEOS */
  622.  
  623. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  624.  
  625. .tumblr_video_container:hover {
  626.  
  627. {block:ifGrayscale} filter: grayscale(0%);
  628. -webkit-transition: all .8s;
  629. -moz-transition: all .8s;
  630. -o-transition: all .8s;
  631. -ms-transition: all .8s;
  632. transition: all .8s; {/block:ifGrayscale} }
  633.  
  634.  
  635.  
  636.  
  637. /*--- 09: TAB STYLING ---*/
  638.  
  639.  
  640.  
  641.  
  642. /*TAB + CLOSE CONTENT*/
  643.  
  644. .tabcontent { position:absolute; width:520px; height:450px; background:{color:container}; left:0px; top:0px; margin:auto; overflow:hidden; z-index:999999; display:none; animation: fadeEffect 1s; }
  645.  
  646. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  647.  
  648. .tabcontent button { position:absolute; top:0px; right:0px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  649.  
  650. .tabcontent button:hover { cursor:pointer; }
  651.  
  652. .tabcontent button:focus { outline:0; }
  653.  
  654. .navi-image { position:absolute; width:150px; height:360px; left:10%; top:10%; }
  655.  
  656. .navi-image img { width:150px; height:360px; }
  657.  
  658. .navi-title { position:absolute; width:50%; height:15%; top:13%; left:42%; font-family:"qwenzy"; font-size:20px; line-height:22px; text-align:left; font-weight:bold; color:{color:accent}; letter-spacing:2px; font-style:italic; }
  659.  
  660. .links { position:absolute; width:auto; height:auto; top:32%; left:25%; }
  661.  
  662. .links li { display:inline-block; float:left; width:100px; height:28px; border-radius:5px; background:{color:accent2}; text-align:center; line-height:28px; margin:5px; }
  663.  
  664. .links a { font-family:"poppins"; color:{color:container}; font-size:8px; }
  665.  
  666. .links a:hover { color:{color:accent}; }
  667.  
  668. .muses { position:absolute; width:70%; height:28%; bottom:11%; left:23%; overflow:scroll; }
  669.  
  670. .muses li { display:inline-block; float:left; width:auto; height:auto; margin-left:3px; margin-bottom:-3px; }
  671.  
  672. .muses img { width:40px; height:40px; padding:5px; border:1px solid {color:borders}; border-radius:100%; background:{color:container}; }
  673.  
  674.  
  675.  
  676. /*--- 10: CUSTOM CSS ---*/
  677.  
  678.  
  679.  
  680.  
  681. {CustomCSS}
  682. </style></head><body>
  683.  
  684.  
  685.  
  686.  
  687. <div id="wrapper">
  688. <div id="border"></div>
  689.  
  690. <div id="box"> </div>
  691. <div id="box2"> </div>
  692.  
  693. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  694.  
  695. <div id="container">
  696.  
  697. <div class="picture"> <img src="{image:sidebar}" draggable="false"> </div>
  698. <div class="title"> {text:title} </div>
  699. <div class="desctxt"> {text:desc} </div>
  700. <div class="line"> </div>
  701.  
  702. <div class="tab">
  703.  
  704. <li><a href="/"> home. </a></li>
  705. <li><a href="/"> ask. </a></li>
  706. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')"> atlas. </a></li>
  707. <li><a href="{text:link url}"> {text:link text} </a></li>
  708.  
  709. </div>
  710.  
  711.  
  712.  
  713. <!-- TABS: navigation -->
  714.  
  715. <div id="navi" class="tabcontent"> <button> x </button>
  716.  
  717. <div class="navi-image"> <img src="{image:navi}" draggable="false"> </div>
  718.  
  719. <div class="navi-title"> {text:navi title} </div>
  720.  
  721. <div class="links">
  722.  
  723. <li> <a href="url"> link one. </a> </li>
  724. <li> <a href="url"> link two. </a> </li>
  725. <li> <a href="url"> link three. </a> </li>
  726.  
  727. <li> <a href="url"> link four. </a> </li>
  728. <li> <a href="url"> link five. </a> </li>
  729. <li> <a href="url"> link six. </a> </li>
  730.  
  731. <li> <a href="url"> link seven. </a> </li>
  732. <li> <a href="url"> link eight. </a> </li>
  733. <li> <a href="url"> link nine. </a> </li>
  734.  
  735. </div>
  736.  
  737. <div class="muses">
  738.  
  739. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  740. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  741. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  742. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  743.  
  744. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  745. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  746. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  747. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  748.  
  749. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  750. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  751. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  752. <li> <a href="/" title="muse info"> <img src="https://i.postimg.cc/1XrLF074/mina-icon5.png" draggable="false"> </a> </li>
  753.  
  754. </div>
  755.  
  756. </div>
  757.  
  758.  
  759.  
  760.  
  761. <!--- POSTS --->
  762.  
  763. <div id="posts" class="scale-in-center">
  764. {block:Posts}
  765. <div class="entry">
  766.  
  767. <!-- TOP INFO --->
  768.  
  769. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="posted {TimeAgo} with {NoteCountWithLabel}.">{Month} {Year}</a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?">reblog</a> {block:ContentSource} <b>&bull;</b> <a href="{SourceURL}" title="posted by {SourceTitle}.">source</a>{/block:ContentSource} </span></p> </div>
  770.  
  771. <!-- TEXT --->
  772.  
  773. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  774.  
  775. <!-- PHOTOS --->
  776.  
  777. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  778.  
  779. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  780.  
  781. <!-- QUOTE --->
  782.  
  783. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  784.  
  785. <!-- LINKS --->
  786.  
  787. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  788. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  789.  
  790. <!-- CHATS --->
  791.  
  792. {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}
  793. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  794.  
  795. <!-- AUDIO --->
  796.  
  797. {block:Audio}
  798. {block:AlbumArt}
  799. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  800. <div class="albuminfo"><div class="albuminfotxt">
  801. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  802. </div></div>
  803. {/block:Audio}
  804.  
  805. <!-- VIDEO --->
  806.  
  807. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  808.  
  809. <!-- ASKS --->
  810.  
  811. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  812.  
  813. <!-- POST CAPTIONS --->
  814.  
  815. {block:Caption}{Caption}{/block:Caption}
  816.  
  817. <!-- READ MORE --->
  818.  
  819. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  820.  
  821. <!-- TAGS --->
  822.  
  823. {block:HasTags} <div class="tags"> <i>with keywords : </i> {block:Tags}<a href="{TagURL}"># {Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  824.  
  825. <!-- POST NOTES --->
  826.  
  827. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  828.  
  829.  
  830. </div>
  831. {/block:Posts}
  832.  
  833.  
  834. <!-- PAGINATION -->
  835.  
  836. {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}
  837.  
  838.  
  839. </div>
  840.  
  841. </div>
  842. </div>
  843.  
  844.  
  845.  
  846.  
  847. <!-- CREDIT -->
  848.  
  849. <div class="cred">
  850. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="th th-holly-o"></span> </a>
  851. </div>
  852.  
  853.  
  854.  
  855.  
  856. </body>
  857. </html>
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!