API tools faq
paste
lovesjoon

16. edited version ( muse icons, 300px )

lovesjoon
Sep 25th, 2021
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.08 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. <!--- 16. empathy (version a) by capitae.
  12.  
  13.  
  14. .USER_GUIDE
  15.  
  16. - sidebar image // width: 320px, height: 260px
  17.  
  18. - tab header, 300px // width: 370px, height: 170px
  19.  
  20. - tab header, 350px // width: 420px, height: 170px
  21.  
  22. - tab header, 400px // width: 470px, height: 170px
  23.  
  24. - tab header, 450px // width: 520px, height: 170px
  25.  
  26. - tab header, 500px // width: 570px, height: 170px
  27.  
  28. - navi icon // width: 90px, height: 90px
  29.  
  30. - muse header, 300px // width: 300px, height: 60px
  31.  
  32. - muse header, 350px // width: 350px, height: 60px
  33.  
  34. - muse header, 400px // width: 400px, height: 60px
  35.  
  36. - muse header, 450px // width: 450px, height: 60px
  37.  
  38. - muse header, 500px // width: 500px, height: 60px
  39.  
  40.  
  41. .READ_ME
  42.  
  43. - please don't recreate and/or steal parts of this code
  44.  
  45. - don't remove the credit
  46.  
  47. - feel free to reach out if there are any bugs or questions!!
  48.  
  49.  
  50. i hope you enjoy this code <3 --->
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58. <title>{Title}</title>
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60. <link rel="shortcut icon" href="{Favicon}">
  61. {block:Description}
  62. <meta name="description" content="{MetaDescription}">
  63. {/block:Description}
  64.  
  65.  
  66.  
  67.  
  68. <meta name="image:background" content=""/>
  69. <meta name="image:sidebar" content="https://via.placeholder.com/320x460"/>
  70. <meta name="image:navi icon" content="https://via.placeholder.com/90x90"/>
  71. <meta name="image:navi header" content="https://via.placeholder.com/370x170"/>
  72. <meta name="image:muse header" content="https://via.placeholder.com/370x170"/>
  73.  
  74. <meta name="color:background" content="#eaeaea"/>
  75. <meta name="color:container" content="#f5f5f5"/>
  76. <meta name="color:container2" content="#ffffff"/>
  77. <meta name="color:posts" content="#fbfbfb"/>
  78. <meta name="color:post border" content="#fbfbfb"/>
  79. <meta name="color:borders" content="#e8e6e7"/>
  80. <meta name="color:accent" content="#bfc3ab"/>
  81. <meta name="color:accent2" content="#e7e4e0"/>
  82. <meta name="color:title" content="#e7ceb5"/>
  83. <meta name="color:subtitle" content="#a8a8a8"/>
  84. <meta name="color:text" content="#aaa"/>
  85. <meta name="color:text shadow" content="#fff"/>
  86. <meta name="color:links" content="#c6c3c8"/>
  87. <meta name="color:hover" content="#98a3a9"/>
  88. <meta name="color:bold" content="#323536"/>
  89. <meta name="color:italic" content="#e2ceb6"/>
  90.  
  91. <meta name="select:body font" content="roboto" title="roboto"/>
  92. <meta name="select:body font" content="montserrat" title="montserrat"/>
  93. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  94. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  95. <meta name="select:body font" content="raleway" title="raleway"/>
  96. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  97. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  98.  
  99. <meta name="select:font size" content="10" title="10px"/>
  100. <meta name="select:font size" content="11" title="11px"/>
  101. <meta name="select:font size" content="12" title="12px"/>
  102. <meta name="select:font size" content="13" title="13px"/>
  103.  
  104. <meta name="select:post size" content="300" title="300px" />
  105. <meta name="select:post size" content="350" title="350px" />
  106. <meta name="select:post size" content="400" title="400px" />
  107. <meta name="select:post size" content="450" title="450px" />
  108. <meta name="select:post size" content="500" title="500px" />
  109.  
  110. <meta name="text:free link url" content="/"/>
  111. <meta name="text:free link" content="free link"/>
  112. <meta name="text:number" content="№ 01."/>
  113. <meta name="text:title" content="Doh <br> Kyungsoo"/>
  114. <meta name="text:subtitle" content="exo's d.o. debut album"/>
  115. <meta name="text:info" content="singer, actor, & songwriter"/>
  116. <meta name="text:navi title" content="empathy,"/>
  117. <meta name="text:navi subtitle" content="the first mini album."/>
  118. <meta name="text:navi link one" content="/"/>
  119. <meta name="text:navi link one text" content="about me."/>
  120. <meta name="text:navi link two" content="/"/>
  121. <meta name="text:navi link two text" content="guidelines."/>
  122. <meta name="text:navi link three" content="/"/>
  123. <meta name="text:navi link three text" content="wanted plots."/>
  124. <meta name="text:navi link four" content="/"/>
  125. <meta name="text:navi link four text" content="extra link."/>
  126. <meta name="text:navi desc" content="- tab header, 300px posts // width: 370px, height: 170px <br> - tab header, 350px posts // width: 420px, height: 170px <br> - tab header, 400px posts // width: 470px, height: 170px <br> - tab header, 450px posts // width: 520px, height: 170px <br> - tab header, 500px posts // width: 570px, height: 170px <br> 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..."/>
  127.  
  128. <meta name="if:muse tab" content="1"/>
  129. <meta name="if:border radius" content="0"/>
  130. <meta name="if:grayscale" content="0"/>
  131. <meta name="if:text shadow" content="1"/>
  132.  
  133.  
  134. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  135.  
  136.  
  137.  
  138.  
  139. <!--- JQUERY SCRIPTS --->
  140.  
  141. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  142. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  143.  
  144.  
  145.  
  146.  
  147. <!--- TOOLTIP SCRIPT ---->
  148.  
  149. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  150. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  151. <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>
  152.  
  153.  
  154.  
  155.  
  156. <!--- ICON FONTS ---->
  157.  
  158. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  159. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  160.  
  161. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  162. <script src="//pull.cappuccicons.com/cpf.js"></script>
  163.  
  164. <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">
  165.  
  166. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  167.  
  168.  
  169. <!-- POST STYLING FONTS -->
  170.  
  171. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  172.  
  173. <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">
  174.  
  175. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  176.  
  177.  
  178. <!-- BODY FONTS -->
  179.  
  180. <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">
  181.  
  182. <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">
  183.  
  184. <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">
  185.  
  186. <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">
  187.  
  188. <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">
  189.  
  190. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  191.  
  192. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  193.  
  194.  
  195.  
  196.  
  197. <!--- VIDEO SCRIPT by shythemes ---->
  198.  
  199. <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>
  200.  
  201.  
  202.  
  203.  
  204. <!--- TAB SCRIPT by capitae ---->
  205.  
  206. <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>
  207.  
  208. <script> $(document).ready(function(){ $("button").click(function(){ $(".tcontent").fadeOut("slow"); }); }); </script>
  209.  
  210.  
  211.  
  212.  
  213. <style type="text/css">
  214.  
  215.  
  216.  
  217.  
  218. /*--- FONTS HOSTED BY @CAPITAE ---*/
  219.  
  220. @font-face{ font-family:"ee"; src: url('https://dl.dropboxusercontent.com/s/3sqp3jzoyi72i34/ErvaEsra.tt’)'); }
  221.  
  222. @font-face{ font-family:"harmony"; src: url('https://dl.dropboxusercontent.com/s/5gypi5qwd4h5kgm/harmony.tt’)'); }
  223.  
  224.  
  225.  
  226.  
  227. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  228.  
  229.  
  230.  
  231.  
  232. /* TOOLTIP */
  233.  
  234. #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:400; text-transform:uppercase; letter-spacing:1px; }
  235.  
  236.  
  237. /* SCROLLBAR */
  238.  
  239. ::-webkit-scrollbar-thumb { background-color:{color:accent2}; }
  240.  
  241. ::-webkit-scrollbar { width:3px; height:3px; background:transparent; }
  242.  
  243.  
  244. /* SELECTION */
  245.  
  246. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  247.  
  248. ::selection { background:{color:accent}; color:{color:posts};}
  249.  
  250.  
  251.  
  252.  
  253. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  254.  
  255.  
  256.  
  257.  
  258. /* TYPE: BODY */
  259.  
  260. 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;
  261.  
  262. font-family:{select:body font};
  263. font-size:{select:font size}px;
  264. line-height: -moz-calc({select:font size}px + 8px);
  265. line-height: -webkit-calc({select:font size}px + 8px);
  266. line-height: -o-calc({select:font size}px + 8px);
  267. line-height: calc({select:font size}px + 8px);
  268.  
  269. {block:ifTextShadow} text-shadow: 0px 0px 2px {color:text shadow}; {/block:ifTextShadow} }
  270.  
  271.  
  272. /* TYPE: IMAGES */
  273.  
  274. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  275.  
  276. iframe:hover, img:hover, embed:hover, object:hover {
  277.  
  278. {block:ifGrayscale} filter: grayscale(0%);
  279. -webkit-transition: all .8s;
  280. -moz-transition: all .8s;
  281. -o-transition: all .8s;
  282. -ms-transition: all .8s;
  283. transition: all .8s; {/block:ifGrayscale} }
  284.  
  285. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  286.  
  287. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  288.  
  289. -webkit-transition: all .8s;
  290. -moz-transition: all .8s;
  291. -o-transition: all .8s;
  292. -ms-transition: all .8s;
  293. transition: all .8s; {/block:ifGrayscale} }
  294.  
  295.  
  296. /* TYPE: TEXT STYLING */
  297.  
  298. select, textarea, input, a { outline:none; }
  299.  
  300. p { margin-top:5px; margin-bottom:5px; }
  301.  
  302. small, sub, sup { font-size:100%; }
  303.  
  304. big { font-size:110%; }
  305.  
  306. h1 { color:{color:accent}; font-family:'abril fatface', cursive; font-weight:400; line-height:28px; text-align:center; word-spacing:2px;
  307.  
  308. font-size: -moz-calc({select:font size}px + 20px);
  309. font-size: -webkit-calc({select:font size}px + 20px);
  310. font-size: -o-calc({select:font size}px + 20px);
  311. font-size: calc({select:font size}px + 20px); }
  312.  
  313. h2 { color:{color:title}; font-family:'poppins', sans-serif; font-weight:700; line-height:18px; text-align:right; text-transform:uppercase;
  314.  
  315. font-size: -moz-calc({select:font size}px + 5px);
  316. font-size: -webkit-calc({select:font size}px + 5px);
  317. font-size: -o-calc({select:font size}px + 5px);
  318. font-size: calc({select:font size}px + 5px); }
  319.  
  320. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; text-decoration:none; letter-spacing:1px; word-wrap:break-word; }
  321.  
  322. a:hover { color:{color:hover};
  323.  
  324. -webkit-transition: all .3s;
  325. -moz-transition: all .3s;
  326. -o-transition: all .3s;
  327. -ms-transition: all .3s;
  328. transition: all .3s; }
  329.  
  330. ul, ol, li { margin:5px 10px; padding:0px;
  331.  
  332. line-height: -moz-calc({select:font size}px + 10px);
  333. line-height: -webkit-calc({select:font size}px + 10px);
  334. line-height: -o-calc({select:font size}px + 10px);
  335. line-height: calc({select:font size}px + 10px); }
  336.  
  337. 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; }
  338.  
  339. i, em { color:{color:italic}; }
  340.  
  341. blockquote { margin:5px; padding-left:20px; border-left:1px solid {color:borders}; }
  342.  
  343.  
  344. /* TYPE: TUMBLR CONTROLS by cyantists */
  345.  
  346. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0; 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; padding-top:12.5px; padding-right:70px; }
  347.  
  348. iframe.tmblr-iframe:hover { opacity:1!important; }
  349.  
  350. .tumblr-controls { position:fixed; width:30px; height:30px; top:10px; right:10px; background:{color:container}; z-index:9999; border:1px solid {color:borders}; text-align:center; }
  351.  
  352. .tumblr-controls .iconify { position:absolute; font-size:16px; color:{color:text}; margin:auto; left:0px; right:0px; top:0px; bottom:0px; }
  353.  
  354.  
  355. /* TYPE: THEME CREDIT do not delete!! */
  356.  
  357. .credit { position:fixed; width:30px; height:30px; bottom:10px; right:10px; background:{color:container}; z-index:9999; border:1px solid {color:borders}; text-align:center; }
  358.  
  359. .credit .iconify { position:absolute; font-size:18px; color:{color:text}; margin:auto; left:0px; right:0px; top:0px; bottom:0px; }
  360.  
  361.  
  362.  
  363.  
  364. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  365.  
  366.  
  367.  
  368.  
  369. /* CONTAINER */
  370.  
  371. #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};
  372.  
  373. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  374. box-shadow: 2px 2px 15px -2px {color:borders};
  375.  
  376. width: -moz-calc({select:post size}px + 600px);
  377. width: -webkit-calc({select:post size}px + 600px);
  378. width: -o-calc({select:post size}px + 600px);
  379. width: calc({select:post size}px + 600px); }
  380.  
  381.  
  382. /* RIGHT BAR */
  383.  
  384. #links { position:absolute; width:70px; height:550px; top:0px; right:0px; background:{color:container2}; }
  385.  
  386. .symbol { position:absolute; width:70px; height:70px; top:0px; left:0px; background:{color:accent}; text-align:center; line-height:85px; }
  387.  
  388. .symbol span { color:{color:container}; font-size:25px; text-shadow:none; }
  389.  
  390.  
  391. /* TAB LINKS */
  392.  
  393. .tab { position:absolute; width:500px; height:auto; bottom:180px; left:-215px; overflow:hidden; text-align:center;
  394.  
  395. -webkit-transform: rotate(90deg);
  396. -moz-transform: rotate(90deg);
  397. -ms-transform: rotate(90deg);
  398. -o-transform: rotate(90deg); }
  399.  
  400. .tab li { display:inline-block; float:left; margin-right:40px; width:auto; height:auto; }
  401.  
  402. .tab a { color:{color:accent}; font-size:10px; line-height:20px; letter-spacing:1px; }
  403.  
  404.  
  405. /* SIDEBAR STYLING */
  406.  
  407. #sidebar { position:absolute; width:410px; height:550px; top:0px; left:0px; background:{color:accent}; }
  408.  
  409. .sidebar { position:absolute; width:370px; height:510px; top:0px; left:0px; bottom:0px; right:0px; margin:auto; background:{color:container2}; }
  410.  
  411. .graphic { position:absolute; width:320px; height:460px; top:0px; left:25px; top:25px;
  412.  
  413. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  414. box-shadow: 2px 2px 15px -2px {color:borders}; }
  415.  
  416. .graphic img { width:320px; height:460px; }
  417.  
  418. .number { position:absolute; width:auto; height:auto; top:15px; left:10px; font-family:"harmony"; font-size:35px; text-transform:uppercase; color:{color:container2}; text-align:left; line-height:25px; border-bottom:3px solid {color:title}; padding-bottom:5px; }
  419.  
  420. .barcode { position:absolute; top:10px; right:5px; width:97px; height:auto; }
  421.  
  422. .text-one { position:absolute; width:auto; height:auto; bottom:27.5px; right:10px; font-family:"harmony"; font-size:25px; text-transform:uppercase; color:{color:container2}; text-align:right; line-height:25px; border-bottom:3px solid {color:title}; }
  423.  
  424. .text-two { position:absolute; width:50px; height:auto; top:180px; left:10px; font-family:"harmony"; font-size:9px; text-transform:uppercase; font-style:italic; color:{color:container2}; text-align:left; line-height:12px; border-left:3px solid {color:title}; padding-left:10px; }
  425.  
  426. .text-three { position:absolute; width:auto; height:auto; bottom:0px; right:10px; font-family:"harmony"; font-size:12px; text-transform:uppercase; color:{color:container2}; text-align:right; line-height:25px; font-style:italic; letter-spacing:.5px; }
  427.  
  428.  
  429.  
  430.  
  431. /*--- 05: POSTS + ENTRIES ---*/
  432.  
  433.  
  434.  
  435.  
  436. /* POSTS */
  437.  
  438. #posts { position:absolute; height:530px; right:70px; bottom:0px; padding:20px 0px 0px 20px; overflow-x:hidden; overflow-y:auto; z-index:1000;
  439.  
  440. width: -moz-calc({select:post size}px + 100px);
  441. width: -webkit-calc({select:post size}px + 100px);
  442. width: -o-calc({select:post size}px + 100px);
  443. width: calc({select:post size}px + 100px); }
  444.  
  445.  
  446. /* ENTRY STYLING */
  447.  
  448. .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;
  449.  
  450. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  451. box-shadow: 2px 2px 15px -2px {color:borders}; }
  452.  
  453. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  454.  
  455. .entry img:hover {
  456.  
  457. {block:ifGrayscale} filter: grayscale(0%);
  458. -webkit-transition: all .8s;
  459. -moz-transition: all .8s;
  460. -o-transition: all .8s;
  461. -ms-transition: all .8s;
  462. transition: all .8s; {/block:ifGrayscale} }
  463.  
  464.  
  465.  
  466.  
  467. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  468.  
  469.  
  470.  
  471.  
  472. /* POST INFO */
  473.  
  474. .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;
  475.  
  476. width: -moz-calc({select:post size}px + 20px);
  477. width: -webkit-calc({select:post size}px + 20px);
  478. width: -o-calc({select:post size}px + 20px);
  479. width: calc({select:post size}px + 20px); }
  480.  
  481. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  482.  
  483. font-size: -moz-calc({select:font size}px - 2px);
  484. font-size: -webkit-calc({select:font size}px - 2px);
  485. font-size: -o-calc({select:font size}px - 2px);
  486. font-size: calc({select:font size}px - 2px); }
  487.  
  488. .topinfo a:hover { color:{color:hover}; font-weight:500;
  489.  
  490. -webkit-transition: all .3s;
  491. -moz-transition: all .3s;
  492. -o-transition: all .3s;
  493. -ms-transition: all .3s;
  494. transition: all .3s; }
  495.  
  496. .topinfo .iconify { color:{color:links}; }
  497.  
  498.  
  499. /* TAGS */
  500.  
  501. .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;
  502.  
  503. width: -moz-calc({select:post size}px + 20px);
  504. width: -webkit-calc({select:post size}px + 20px);
  505. width: -o-calc({select:post size}px + 20px);
  506. width: calc({select:post size}px + 20px); }
  507.  
  508. .tags span { color:{color:links}; padding-right:5px; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  509.  
  510. font-size: -moz-calc({select:font size}px - 2px);
  511. font-size: -webkit-calc({select:font size}px - 2px);
  512. font-size: -o-calc({select:font size}px - 2px);
  513. font-size: calc({select:font size}px - 2px); }
  514.  
  515. .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;
  516.  
  517. font-size: -moz-calc({select:font size}px - 2px);
  518. font-size: -webkit-calc({select:font size}px - 2px);
  519. font-size: -o-calc({select:font size}px - 2px);
  520. font-size: calc({select:font size}px - 2px); }
  521.  
  522. .tags a:hover { color:{color:hover}; font-weight:500;
  523.  
  524. -webkit-transition: all .3s;
  525. -moz-transition: all .3s;
  526. -o-transition: all .3s;
  527. -ms-transition: all .3s;
  528. transition: all .3s; }
  529.  
  530.  
  531. /* POST NOTES */
  532.  
  533. .note { margin:20px 0px 0px -31px; font-size:10px; text-transform:uppercase;
  534.  
  535. width: -moz-calc({select:post size}px + 40px);
  536. width: -webkit-calc({select:post size}px + 40px);
  537. width: -o-calc({select:post size}px + 40px);
  538. width: calc({select:post size}px + 40px); }
  539.  
  540. .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;
  541.  
  542. width: -moz-calc({select:post size}px + 40px);
  543. width: -webkit-calc({select:post size}px + 40px);
  544. width: -o-calc({select:post size}px + 40px);
  545. width: calc({select:post size}px + 40px); }
  546.  
  547. .note img.avatar { display:none; }
  548.  
  549.  
  550. /* PAGINATION */
  551.  
  552. .pagination { width:100%; text-align:center; margin-left:-7.5px; }
  553.  
  554. .pagination a { padding:8px; word-spacing:2px; }
  555.  
  556. .pagination a:hover { color:{color:text}; }
  557.  
  558. .pagination .iconify { color:{color:links}; font-size:25px; }
  559.  
  560.  
  561. /* READ MORE */
  562.  
  563. .more { width:100%; margin-top:20px 0px 5px 0px; text-align:center; }
  564.  
  565. .more a { background:{color:accent}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  566.  
  567. .more a:hover { background:{color:title}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  568.  
  569.  
  570.  
  571.  
  572. /*--- 07: POST TYPES ---*/
  573.  
  574.  
  575.  
  576.  
  577. /* TYPE: CHATS */
  578.  
  579. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  580.  
  581. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  582.  
  583. .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; }
  584.  
  585. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background:#147efb; color:white; float:right; text-shadow:none; }
  586.  
  587. .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; }
  588.  
  589. .me p,.answer,.asked span{ margin:0; padding:0; }
  590.  
  591. .answer{ overflow:hidden; }
  592.  
  593. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  594.  
  595. .footerright .viasrc { float:left; }
  596.  
  597. .asked a { margin:0; padding:0; }
  598.  
  599. .user_3{ background:#e6e6e6; color:#555555; }
  600.  
  601. .user_3::after{ border-color:#e6e6e6; }
  602.  
  603. .user_4{ background:#147efb; color:white; }
  604.  
  605. .user_4::after{ border-color:#147efb; }
  606.  
  607. .user_5{ background:#e6e6e6; color:#555555; }
  608.  
  609. .user_5::after{ border-color:#e6e6e6; }
  610.  
  611. .user_6{ background:#147efb; color:white; }
  612.  
  613. .user_6::after{ border-color:#147efb; }
  614.  
  615. .user_7{ background:#e6e6e6; color:#555555; }
  616.  
  617. .user_7::after{ border-color:#e6e6e6; }
  618.  
  619. .user_8{ background:#147efb; color:white; }
  620.  
  621. .user_8::after{ border-color:#147efb; }
  622.  
  623. .user_9{ background:#e6e6e6; color:#555555; }
  624.  
  625. .user_9::after{ border-color:#e6e6e6; }
  626.  
  627. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  628.  
  629. .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; }
  630.  
  631.  
  632. /* TYPE: QUOTES */
  633.  
  634. .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;
  635.  
  636. font-size: -moz-calc({select:font size}px + 20px);
  637. font-size: -webkit-calc({select:font size}px + 20px);
  638. font-size: -o-calc({select:font size}px + 20px);
  639. font-size: calc({select:font size}px + 20px); }
  640.  
  641. .source { text-align:right; margin-top:15px;
  642.  
  643. font-size: -moz-calc({select:font size}px - 1px);
  644. font-size: -webkit-calc({select:font size}px - 1px);
  645. font-size: -o-calc({select:font size}px - 1px);
  646. font-size: calc({select:font size}px - 1px);
  647.  
  648. line-height: -moz-calc({select:font size}px + 8px);
  649. line-height: -webkit-calc({select:font size}px + 8px);
  650. line-height: -o-calc({select:font size}px + 8px);
  651. line-height: calc({select:font size}px + 8px); }
  652.  
  653.  
  654. /* TYPE: ASKS */
  655.  
  656. #question { background:{color:background}; color:{color:text}; margin:5px 0px 15px 0px; padding:10px 20px 0px 20px; overflow:hidden; text-align:justify; }
  657.  
  658. #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; }
  659.  
  660. #asker a { color:{color:posts}; font-weight:500; }
  661.  
  662.  
  663. /* TYPE: LINKS */
  664.  
  665. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  666.  
  667. font-size: -moz-calc({select:font size}px + 20px);
  668. font-size: -webkit-calc({select:font size}px + 20px);
  669. font-size: -o-calc({select:font size}px + 20px);
  670. font-size: calc({select:font size}px + 20px); }
  671.  
  672.  
  673. /* TYPE: AUDIO */
  674.  
  675. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  676.  
  677. .albumtrack { position:absolute; width:33px; height:30px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; opacity:.6; }
  678.  
  679. .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; }
  680.  
  681. .albuminfo-text { position:absolute; width:100%; height:auto; top:27.5%; left:0%; font-size:10px; }
  682.  
  683. .albuminfo-text b { color:{color:accent}; }
  684.  
  685.  
  686. /* TYPE: VIDEOS */
  687.  
  688. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  689.  
  690. .tumblr_video_container:hover {
  691.  
  692. {block:ifGrayscale} filter: grayscale(0%);
  693. -webkit-transition: all .8s;
  694. -moz-transition: all .8s;
  695. -o-transition: all .8s;
  696. -ms-transition: all .8s;
  697. transition: all .8s; {/block:ifGrayscale} }
  698.  
  699.  
  700.  
  701.  
  702. /*--- 08: TAB STYLING ---*/
  703.  
  704.  
  705.  
  706.  
  707. /* TAB + CLOSE CONTENT */
  708.  
  709. .tcontent { position:absolute; height:550px; right:70px; bottom:0px; background:{color:container}; overflow:hidden; z-index:9999; display:none;
  710.  
  711. width: -moz-calc({select:post size}px + 120px);
  712. width: -webkit-calc({select:post size}px + 120px);
  713. width: -o-calc({select:post size}px + 120px);
  714. width: calc({select:post size}px + 120px);
  715. animation:fadeEffect 1s; }
  716.  
  717. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  718.  
  719. .tcontent button { position:absolute; top:170px; right:0px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  720.  
  721. .tcontent button:hover { cursor:pointer; }
  722.  
  723. .tcontent button:focus { outline:0; }
  724.  
  725.  
  726. /* NAVIGATION TAB */
  727.  
  728. .header { position:absolute; height:170px; top:0px; left:0px; background:{color:container2}; z-index:999; border-bottom:1px solid {color:borders};
  729.  
  730. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  731. box-shadow: 2px 2px 15px -2px {color:borders};
  732.  
  733. width: -moz-calc({select:post size}px + 120px);
  734. width: -webkit-calc({select:post size}px + 120px);
  735. width: -o-calc({select:post size}px + 120px);
  736. width: calc({select:post size}px + 120px); }
  737.  
  738. .header img { height:170px;
  739.  
  740. width: -moz-calc({select:post size}px + 120px);
  741. width: -webkit-calc({select:post size}px + 120px);
  742. width: -o-calc({select:post size}px + 120px);
  743. width: calc({select:post size}px + 120px); }
  744.  
  745. .icon { position:absolute; width:120px; height:120px; background:{color:container2}; left:30px; top:130px; z-index:9999;
  746.  
  747. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  748. box-shadow: 2px 2px 15px -2px {color:borders}; }
  749.  
  750. .icon img { position:absolute; width:90px; height:90px; margin-left:15px; margin-top:15px;
  751.  
  752. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  753. box-shadow: 2px 2px 15px -2px {color:borders}; }
  754.  
  755. .title { position:absolute; height:auto; top:190px; right:0px; font-family:"harmony"; font-size:35px; text-transform:uppercase; color:{color:accent}; text-align:center; line-height:25px; font-weight:bold; letter-spacing:1px; z-index:9999;
  756.  
  757. width: -moz-calc({select:post size}px - 30px);
  758. width: -webkit-calc({select:post size}px - 30px);
  759. width: -o-calc({select:post size}px - 30px);
  760. width: calc({select:post size}px - 30px); }
  761.  
  762. .title2 { position:absolute; height:auto; top:192px; right:-2.5px; font-family:"harmony"; font-size:35px; text-transform:uppercase; color:{color:container2}; text-align:center; line-height:25px; font-weight:bold; letter-spacing:1px; z-index:999;
  763.  
  764. width: -moz-calc({select:post size}px - 30px);
  765. width: -webkit-calc({select:post size}px - 30px);
  766. width: -o-calc({select:post size}px - 30px);
  767. width: calc({select:post size}px - 30px); }
  768.  
  769. .subtitle { position:absolute; height:auto; top:213px; right:0px; font-family:"roboto"; font-size:9px; text-transform:uppercase; font-style:italic; color:{color:title}; text-align:center; line-height:25px; font-weight:bold; letter-spacing:1px; z-index:9999;
  770.  
  771. width: -moz-calc({select:post size}px - 30px);
  772. width: -webkit-calc({select:post size}px - 30px);
  773. width: -o-calc({select:post size}px - 30px);
  774. width: calc({select:post size}px - 30px); }
  775.  
  776. .nav-links { position:absolute; width:180px; height:250px; left:50px; bottom:30px; }
  777.  
  778. .nav-links li { display:block; float:left; width:auto; height:60px; margin:0; text-align:left; }
  779.  
  780. .nav-links h1 { float:left; }
  781.  
  782. .nav-links a { margin-left:5px; vertical-align:-22px; border-bottom:3px solid {color:container2}; }
  783.  
  784. .nav-desc { position:absolute; height:210px; right:30px; bottom:50px; overflow:scroll; padding-right:20px; text-align:justify; font-family"roboto"; font-size:10px; color:{color:text}; font-style:italic;
  785.  
  786. width: -moz-calc({select:post size}px - 160px);
  787. width: -webkit-calc({select:post size}px - 160px);
  788. width: -o-calc({select:post size}px - 160px);
  789. width: calc({select:post size}px - 160px); }
  790.  
  791. /* MUSE TAB */
  792.  
  793. .muses { position:absolute; height:310px; bottom:30px; left:40px; overflow:scroll; padding-right:13px;
  794.  
  795. width: -moz-calc({select:post size}px + 50px);
  796. width: -webkit-calc({select:post size}px + 50px);
  797. width: -o-calc({select:post size}px + 50px);
  798. width: calc({select:post size}px + 50px); }
  799.  
  800. .muses li { display:inline-block; float:left; width:90px; height:90px; background:{color:container2}; border:1px solid {color:borders}; margin:10px;
  801.  
  802. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  803. box-shadow: 2px 2px 15px -2px {color:borders}; }
  804.  
  805. .muses img { width:70px; height:70px; margin-top:10px; margin-left:10px; }
  806.  
  807.  
  808.  
  809.  
  810.  
  811.  
  812.  
  813.  
  814. /*--- 09: CUSTOM CSS ---*/
  815.  
  816.  
  817.  
  818.  
  819. {CustomCSS}
  820. </style></head><body>
  821.  
  822.  
  823. <div class="tumblr-controls"> <span class="iconify" data-icon="ei:gear" data-inline="false"></span> </div>
  824.  
  825.  
  826. <div id="container">
  827.  
  828.  
  829. <div id="sidebar">
  830.  
  831. <div class="sidebar">
  832.  
  833. <div class="graphic">
  834.  
  835. <div class="number"> {text:number} </div>
  836.  
  837. <svg class="barcode"
  838. jsbarcode-format="upc"
  839. jsbarcode-value="123456789012"
  840. jsbarcode-textmargin="0"
  841. jsbarcode-background="transparent"
  842. jsbarcode-linecolor="{color:container2}"
  843. jsbarcode-width="4"
  844. jsbarcode-height="135"
  845. jsbarcode-fontSize="40">
  846. </svg>
  847.  
  848. <div class="text-one"> {text:title} </div>
  849. <div class="text-two"> {text:info} </div>
  850. <div class="text-three"> {text:subtitle}</div>
  851.  
  852. <img src="{image:sidebar}" draggable="false"> </div>
  853.  
  854. </div>
  855. </div>
  856.  
  857. <div id="links">
  858.  
  859. <div class="symbol"> <span class="cp cp-holly-o"></span> </div>
  860.  
  861. <div class="tab">
  862. <li><a href="/"> refresh </a></li>
  863. <li><a href="/ask"> message </a></li>
  864. <li><a href="#" class="tlinks" onclick="openCapitae(event, 'navi')"> navigate </a></li>
  865. {block:ifMuseTab} <li><a href="#" class="tlinks" onclick="openCapitae(event, 'muses')"> characters </a></li> {/block:ifMuseTab}
  866. {block:ifNotMuseTab} <li><a href="{text:free link url}"> {text:free link} </a></li> {/block:ifNotMuseTab}
  867.  
  868. </div>
  869.  
  870. </div>
  871.  
  872.  
  873.  
  874.  
  875. <!-- TABS: navigation -->
  876.  
  877. <div id="navi" class="tcontent"> <button> x </button>
  878.  
  879. <div class="header"> <img src="{image:navi header}" draggable="false"> </div>
  880. <div class="icon"> <img src="{image:navi icon}" draggable="false"> </div>
  881.  
  882. <div class="title"> {text:navi title} </div>
  883. <div class="title2"> {text:navi title} </div>
  884. <div class="subtitle"> {text:navi subtitle}</div>
  885.  
  886. <div class="nav-links">
  887.  
  888. <li> <h1>01.</h1> <a href="{text:navi link one}">{text:navi link one text}</a> </li>
  889. <li> <h1>02.</h1> <a href="{text:navi link two}">{text:navi link two text}</a> </li>
  890. <li> <h1>03.</h1> <a href="{text:navi link three}">{text:navi link three text}</a> </li>
  891. <li> <h1>04.</h1> <a href="{text:navi link four}">{text:navi link four text}</a> </li>
  892.  
  893. </div>
  894.  
  895. <div class="nav-desc">
  896.  
  897. {text:navi desc}
  898.  
  899. </div>
  900.  
  901. </div>
  902.  
  903.  
  904.  
  905.  
  906. <!-- TABS: muses -->
  907.  
  908. <div id="muses" class="tcontent"> <button> x </button>
  909.  
  910. <div class="header"> <img src="{image:muse header}" draggable="false"> </div>
  911.  
  912. <div class="muses">
  913.  
  914. <!--- EDIT YOUR MUSES HERE !! --->
  915.  
  916. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  917. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  918. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  919.  
  920. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  921. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  922. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  923.  
  924. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  925. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  926. <li> <a href="muse link" title="hover text"> <img src="https://via.placeholder.com/70x70"></a> </li>
  927.  
  928. </div>
  929.  
  930. </div>
  931.  
  932.  
  933.  
  934.  
  935. <!--- POSTS --->
  936.  
  937. <div id="posts">
  938. {block:Posts}
  939. <div class="entry">
  940.  
  941. <!-- TOP INFO --->
  942.  
  943. <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>
  944.  
  945. <!-- TEXT --->
  946.  
  947. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  948.  
  949. <!-- PHOTOS --->
  950.  
  951. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  952.  
  953. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  954.  
  955. <!-- QUOTE --->
  956.  
  957. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  958.  
  959. <!-- LINKS --->
  960.  
  961. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  962. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  963.  
  964. <!-- CHATS --->
  965.  
  966. {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}
  967. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  968.  
  969. <!-- AUDIO --->
  970.  
  971. {block:Audio}
  972. {block:AlbumArt}
  973. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  974. <div class="albuminfo"><div class="albuminfo-text">
  975. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  976. </div></div>
  977. {/block:Audio}
  978.  
  979. <!-- VIDEO --->
  980.  
  981. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  982.  
  983. <!-- ASKS --->
  984.  
  985. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  986.  
  987. <!-- POST CAPTIONS --->
  988.  
  989. {block:Caption}{Caption}{/block:Caption}
  990.  
  991. <!-- READ MORE --->
  992.  
  993. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  994.  
  995. <!-- TAGS --->
  996.  
  997. {block:HasTags} <div class="tags"> <span>with keywords: </span> {block:Tags}<a href="{TagURL}">#{Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  998.  
  999. <!-- POST NOTES --->
  1000.  
  1001. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1002.  
  1003. </div>
  1004. {/block:Posts}
  1005.  
  1006. <!-- PAGINATION -->
  1007.  
  1008. {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}
  1009.  
  1010.  
  1011. </div>
  1012. </div>
  1013.  
  1014.  
  1015.  
  1016.  
  1017. <!-- CREDIT -->
  1018.  
  1019. <div class="credit">
  1020. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="iconify" data-icon="ei:heart" data-inline="false"></span> </a>
  1021. </div>
  1022.  
  1023.  
  1024. <!--- SCRIPTS PT. 2 --->
  1025.  
  1026. <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/barcodes/JsBarcode.ean-upc.min.js"></script>
  1027. <script> JsBarcode(".barcode").init(); </script>
  1028.  
  1029.  
  1030. </body>
  1031. </html>
  1032.  
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!