API tools faq
paste
lovesjoon

theme 09: vanille fraise, single muse / personal blog.

lovesjoon
Sep 18th, 2020 (edited)
2,114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.60 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. <!--- THEME 09: VANILLE FRAISE by TWENTYS.
  14.  
  15.  
  16. ・｡* version 02: single muse / personal blog.
  17.  
  18.  
  19.  
  20. ♡ SIZE GUIDE ♡
  21.  
  22.  
  23. ・｡* sidebar image: width:270px, height:290px.
  24.  
  25. ・｡* navigation png: width:250px, height:250px.
  26.  
  27. ・｡* muse header ( 300px posts ): width:400px, height:165px.
  28.  
  29. ・｡* muse header ( 400px posts ): width:500px, height:165px.
  30.  
  31.  
  32. ♡ READ ME ♡
  33.  
  34.  
  35. ・｡* base code by @pixiemail.
  36.  
  37. ・｡* please don't recreate and/or steal parts of this code
  38.  
  39. ・｡* don't remove the credit
  40.  
  41. ・｡* feel free to reach out if there are any bugs or questions ♡
  42.  
  43.  
  44. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  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=""/>
  65. <meta name="image:header" content=""/>
  66. <meta name="image:header 400px" content=""/>
  67. <meta name="image:png" content=""/>
  68.  
  69. <meta name="color:background" content="#eeeeee"/>
  70. <meta name="color:container" content="#ffffff"/>
  71. <meta name="color:sidebar" content="#ffffff"/>
  72. <meta name="color:posts" content="#ffffff"/>
  73. <meta name="color:container border" content="#ffffff"/>
  74. <meta name="color:borders" content="#dddddd"/>
  75. <meta name="color:accent" content="#fead90"/>
  76. <meta name="color:accent2" content="#4c4c4b"/>
  77. <meta name="color:title" content="#000000"/>
  78. <meta name="color:text" content="#acacac"/>
  79. <meta name="color:links" content="#b99680"/>
  80. <meta name="color:hover" content="#98a3a9"/>
  81. <meta name="color:bold" content="#d8d6d7"/>
  82. <meta name="color:italic" content="#98a3a9"/>
  83.  
  84. <meta name="select:body font" content="abeezee" title="abeezee"/>
  85. <meta name="select:body font" content="open sans" title="open sans"/>
  86. <meta name="select:body font" content="montserrat" title="montserrat"/>
  87. <meta name="select:body font" content="poppins" title="poppins"/>
  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="9" title="9px"/>
  95. <meta name="select:font size" content="10" title="10px"/>
  96. <meta name="select:font size" content="11" title="11px"/>
  97. <meta name="select:font size" content="12" title="12px"/>
  98.  
  99. <meta name="if:no polaroid" content="1"/>
  100. <meta name="if:400px posts" content="1"/>
  101. <meta name="if:muse tab" content="1" />
  102. <meta name="if:border radius" content="1"/>
  103. <meta name="if:grayscale" content="1"/>
  104.  
  105. <meta name="text:polaroid text" content="Vanille Fraise"/>
  106. <meta name="text:title" content="flowers bloom"/>
  107. <meta name="text:desc" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis."/>
  108.  
  109. <meta name="text:link url" content="/"/>
  110. <meta name="text:link hover title" content="free link"/>
  111.  
  112.  
  113.  
  114.  
  115.  
  116. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  117.  
  118.  
  119.  
  120.  
  121. <!--- JQUERY SCRIPTS --->
  122.  
  123. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  124. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  125.  
  126.  
  127.  
  128. <!--- TOOLTIP SCRIPT ---->
  129.  
  130. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  131. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  132. <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>
  133.  
  134.  
  135.  
  136. <!--- GOOGLE + ICON FONTS ---->
  137.  
  138. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  139. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  140.  
  141. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  142.  
  143. <script src="https://unpkg.com/feather-icons"></script>
  144.  
  145. <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">
  146.  
  147.  
  148. <!-- POST STYLING FONTS -->
  149.  
  150. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato&display=swap" rel="stylesheet">
  151.  
  152. <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
  153.  
  154.  
  155. <!-- BODY FONTS -->
  156.  
  157. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
  158.  
  159. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  160.  
  161. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  162.  
  163. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  164.  
  165. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  166.  
  167. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  168.  
  169. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  170.  
  171. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  172.  
  173. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  174.  
  175.  
  176.  
  177.  
  178. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  179.  
  180. <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>
  181.  
  182.  
  183.  
  184.  
  185. <!--- TAB SCRIPT by www.w3schools.com ---->
  186.  
  187. <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>
  188.  
  189.  
  190.  
  191. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  192.  
  193. <script>
  194. $(document).ready(function(){
  195. $("button").click(function(){
  196. $(".tabcontent").fadeOut("slow");
  197. });
  198. });
  199. </script>
  200.  
  201.  
  202.  
  203. <!--- POPUP SCRIPT by themekid ---->
  204. <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>
  205.  
  206.  
  207.  
  208.  
  209. <style type="text/css">
  210.  
  211. @font-face{ font-family:"handsnow"; src: url('https://dl.dropboxusercontent.com/s/ywzy3n7xzo9x359/Handsnow.ttf’)'); }
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218.  
  219.  
  220. /*--- FONTS HOSTED BY TWENTYS---*/
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  229.  
  230.  
  231.  
  232.  
  233. /* TOOLTIP */
  234.  
  235. #s-m-t-tooltip { max-width:auto; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px 20px 20px 20px; padding:6px 10px 6px 10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:'lato', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  236.  
  237.  
  238. /* SCROLLBAR */
  239.  
  240. ::-webkit-scrollbar-thumb { display:none; }
  241.  
  242. ::-webkit-scrollbar { display:none; }
  243.  
  244.  
  245. /* SELECTION */
  246.  
  247. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  248.  
  249. ::selection { background:{color:accent}; color:{color:posts};}
  250.  
  251.  
  252.  
  253.  
  254. /*---PT. 3: BODY + TEXT STYLING---*/
  255.  
  256.  
  257.  
  258.  
  259. /* BODY */
  260.  
  261. 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;
  262.  
  263. font-family:{select:body font};
  264. font-size:{select:font size}px;
  265. line-height: -moz-calc({select:font size}px + 8px);
  266. line-height: -webkit-calc({select:font size}px + 8px);
  267. line-height: -o-calc({select:font size}px + 8px);
  268. line-height: calc({select:font size}px + 8px); }
  269.  
  270.  
  271. /* FIX */
  272.  
  273. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  274.  
  275. iframe:hover, img:hover, embed:hover, object:hover {
  276.  
  277. {block:ifGrayscale} filter: grayscale(0%);
  278. -webkit-transition: all .8s;
  279. -moz-transition: all .8s;
  280. -o-transition: all .8s;
  281. -ms-transition: all .8s;
  282. transition: all .8s; {/block:ifGrayscale} }
  283.  
  284. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  285.  
  286. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  287.  
  288. -webkit-transition: all .8s;
  289. -moz-transition: all .8s;
  290. -o-transition: all .8s;
  291. -ms-transition: all .8s;
  292. transition: all .8s; {/block:ifGrayscale} }
  293.  
  294.  
  295. /* TEXT STYLING */
  296.  
  297. select, textarea, input, a { outline:none; }
  298.  
  299. p { margin-top:5px; margin-bottom:5px; }
  300.  
  301. small, sub, sup { font-size:100%; }
  302.  
  303. big { font-size:110%; }
  304.  
  305. h1 { color:{color:title}; margin-top:30px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  306.  
  307. font-size: -moz-calc({select:font size}px + 20px);
  308. font-size: -webkit-calc({select:font size}px + 20px);
  309. font-size: -o-calc({select:font size}px + 20px);
  310. font-size: calc({select:font size}px + 20px); }
  311.  
  312. h2 { color:{color:accent}; font-family:'lato', sans-serif; line-height:18px; text-align:center; text-transform:uppercase; letter-spacing:2px;
  313.  
  314. font-size: -moz-calc({select:font size}px + 5px);
  315. font-size: -webkit-calc({select:font size}px + 5px);
  316. font-size: -o-calc({select:font size}px + 5px);
  317. font-size: calc({select:font size}px + 5px); }
  318.  
  319. a { color:{color:links}; font-family:'lato', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  320.  
  321. font-size: -moz-calc({select:font size}px - 1px);
  322. font-size: -webkit-calc({select:font size}px - 1px);
  323. font-size: -o-calc({select:font size}px - 1px);
  324. font-size: calc({select:font size}px - 1px); }
  325.  
  326. a:hover { color:{color:hover};
  327.  
  328. -webkit-transition: all .3s;
  329. -moz-transition: all .3s;
  330. -o-transition: all .3s;
  331. -ms-transition: all .3s;
  332. transition: all .3s; }
  333.  
  334. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  335.  
  336. b, strong { color:{color:bold}; }
  337.  
  338. i, em { color:{color:italic}; }
  339.  
  340. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  341.  
  342.  
  343. /* TUMBLR CONTROLS */
  344.  
  345. 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; }
  346.  
  347. iframe.tmblr-iframe:hover { opacity:1!important; }
  348.  
  349.  
  350.  
  351.  
  352. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  353.  
  354.  
  355.  
  356.  
  357. /* CONTAINER */
  358.  
  359. #border { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:640px; background:{color:container border}; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; }
  360.  
  361. #container { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:570px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; margin:auto; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; }
  362.  
  363. .sidebar { position:absolute; width:400px; height:570px; top:0px; left:0px; background:{color:sidebar}; border-right:1px solid {color:borders}; }
  364.  
  365.  
  366. /* SIDEBAR */
  367.  
  368. .head { position:absolute; width:400px; height:90px; left:0px; top:0px; background:{color:accent}; }
  369.  
  370. .bar4 { position:absolute; width:400px; height:25px; left:0px; top:90px; background:{color:accent};opacity:0.75; }
  371.  
  372. .bar5 { position:absolute; width:400px; height:25px; left:0px; top:115px; background:{color:accent}; opacity:0.5; }
  373.  
  374. .bar6 { position:absolute; width:400px; height:25px; left:0px; top:140px; background:{color:accent}; opacity:0.25; }
  375.  
  376. .graph { position:absolute; width:300px; height:320px; top:40px; left:50px; background:{color:container}; border:1px solid {color:borders}; z-index:99; }
  377.  
  378. .graph img { width:270px; height:290px; margin-top:15px; margin-left:15px; }
  379.  
  380. .polaroid { position:absolute; bottom:15px; left:15px; height:60px; width:270px; background:{color:container}; z-index:999; font-family:"handsnow"; font-size:45px; color:{color:title}; text-align:center; line-height:65px; word-spacing:2px; {block:ifNoPolaroid} display:none; {/block:ifNoPolaroid} }
  381.  
  382. .square { position:absolute; width:25px; height:25px; left:40px; top:347.5px; background:{color:accent}; }
  383.  
  384. .title { position:absolute; width:260px; height:20px; left:20px; bottom:160px; font-family:"abril fatface", cursive; font-size:23px; color:{color:accent2}; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
  385.  
  386. .desc { position:absolute; width:300px; height:90px; left:50px; bottom:55px; overflow:scroll; }
  387.  
  388.  
  389. /* TAB LINKS */
  390.  
  391. .tab { position:absolute; overflow: hidden; height:auto; float:right; right:5px; bottom:10px; z-index:999; width:200px; }
  392.  
  393. .tab li { display:inline-block; float:left; margin-left:5px; width:auto; }
  394.  
  395. .tab a { letter-spacing:1px; font-family: 'abril fatface', cursive; color:{color:accent2}; background-color:transparent; letter-spacing:1px; font-size:20px; }
  396.  
  397. .tab a:hover { font-size:20px;
  398.  
  399. -webkit-text-fill-color: transparent;
  400. -webkit-text-stroke-width: 0.5px;
  401. -webkit-text-stroke-color: #6d615e;
  402. -webkit-font-smoothing: antialiased;
  403.  
  404. -webkit-transition: all .8s;
  405. -moz-transition: all .8s;
  406. -o-transition: all .8s;
  407. -ms-transition: all .8s;
  408. transition: all .8s; }
  409.  
  410.  
  411.  
  412.  
  413. /*--- PT.5: POSTS + ENTRIES ---*/
  414.  
  415.  
  416.  
  417.  
  418. /* POSTS */
  419.  
  420. #posts { position:absolute; width:380px; {block:if400pxPosts} width:480px; {/block:if400pxPosts} height:570px; right:10px; bottom:0px; overflow-x:hidden; overflow-y:auto; z-index:1000; }
  421.  
  422.  
  423. /* ENTRY STYLING */
  424.  
  425. .entry { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:auto; background-color:{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} }
  426.  
  427. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  428.  
  429. .entry img:hover {
  430.  
  431. {block:ifGrayscale} filter: grayscale(0%);
  432. -webkit-transition: all .8s;
  433. -moz-transition: all .8s;
  434. -o-transition: all .8s;
  435. -ms-transition: all .8s;
  436. transition: all .8s; {/block:ifGrayscale} }
  437.  
  438.  
  439.  
  440.  
  441. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  442.  
  443.  
  444.  
  445.  
  446. .topinfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:-20px; margin-bottom:20px; margin-left:-20px; border-bottom:1px solid {color:borders}; line-height:40px; text-transform:uppercase; }
  447.  
  448. .topinfo p { margin:0px; padding:0px 10px 0px 10px; }
  449.  
  450. .topinfo a { font-size:9px; }
  451.  
  452. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  453.  
  454. .bottominfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:20px; margin-left:-20px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; line-height:40px; font-family:'lato', sans-serif; text-align:center; text-transform:uppercase; }
  455.  
  456. .bottominfo a { padding-left:5px; }
  457.  
  458. .bottominfo a { font-size:9px; line-height:40px; }
  459.  
  460.  
  461. /* TAGS */
  462.  
  463. .tags { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding-top:20px; line-height:14px; text-align:justify; }
  464.  
  465. .tags span { color:{color:links}; padding-right:5px; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  466.  
  467. .tags a { color:{color:text}; font-family:'lato', sans-serif; padding:0px; font-weight:normal;
  468.  
  469. font-size: -moz-calc({select:font size}px - 2px);
  470. font-size: -webkit-calc({select:font size}px - 2px);
  471. font-size: -o-calc({select:font size}px - 2px);
  472. font-size: calc({select:font size}px - 2px); }
  473.  
  474. .tags a:hover { color:{color:hover}; font-weight:bold; font-style:italic;
  475.  
  476. -webkit-transition: all .3s;
  477. -moz-transition: all .3s;
  478. -o-transition: all .3s;
  479. -ms-transition: all .3s;
  480. transition: all .3s; }
  481.  
  482.  
  483. /* POST NOTES */
  484.  
  485. .note { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  486.  
  487. .note li { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} 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; }
  488.  
  489. .note img.avatar { display:none; }
  490.  
  491.  
  492. /*PAGINATION*/
  493.  
  494. .pagination { width:100%; text-align:center; }
  495.  
  496. .pagination a { padding:8px; word-spacing:2px; }
  497.  
  498. .pagination a:hover { color:{color:links}; }
  499.  
  500. .pagination i { width:10px; height:10px; color:{color:links}; }
  501.  
  502.  
  503. /* READ MORE */
  504.  
  505. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  506.  
  507. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  508.  
  509. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  510.  
  511.  
  512. /* CREDIT */
  513.  
  514. #cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background-color:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; }
  515.  
  516. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  517.  
  518. -webkit-background-clip:text;
  519. -webkit-text-fill-color:transparent; }
  520.  
  521.  
  522.  
  523.  
  524. /*---PT. 7: POST TYPES---*/
  525.  
  526.  
  527.  
  528.  
  529. /* TYPE: CHATS */
  530.  
  531. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  532.  
  533. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  534.  
  535. .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; }
  536.  
  537. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  538.  
  539. .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; }
  540.  
  541. .me p,.answer,.asked span{ margin:0; padding:0; }
  542.  
  543. .answer{ overflow:hidden; }
  544.  
  545. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  546.  
  547. .footerright .viasrc { float:left; }
  548.  
  549. .asked a { margin:0; padding:0; }
  550.  
  551. .user_3{ background-color:#e6e6e6; color:#555555; }
  552.  
  553. .user_3::after{ border-color:#e6e6e6; }
  554.  
  555. .user_4{ background-color:#147efb; color:white; }
  556.  
  557. .user_4::after{ border-color:#147efb; }
  558.  
  559. .user_5{ background-color:#e6e6e6; color:#555555; }
  560.  
  561. .user_5::after{ border-color:#e6e6e6; }
  562.  
  563. .user_6{ background-color:#147efb; color:white; }
  564.  
  565. .user_6::after{ border-color:#147efb; }
  566.  
  567. .user_7{ background-color:#e6e6e6; color:#555555; }
  568.  
  569. .user_7::after{ border-color:#e6e6e6; }
  570.  
  571. .user_8{ background-color:#147efb; color:white; }
  572.  
  573. .user_8::after{ border-color:#147efb; }
  574.  
  575. .user_9{ background-color:#e6e6e6; color:#555555; }
  576.  
  577. .user_9::after{ border-color:#e6e6e6; }
  578.  
  579. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  580.  
  581.  
  582. /* TYPE: QUOTES */
  583.  
  584. .quote { color:{color:title}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  585.  
  586. font-size: -moz-calc({select:font size}px + 20px);
  587. font-size: -webkit-calc({select:font size}px + 20px);
  588. font-size: -o-calc({select:font size}px + 20px);
  589. font-size: calc({select:font size}px + 20px); }
  590.  
  591. .source { text-align:right; margin-top:15px;
  592.  
  593. font-size: -moz-calc({select:font size}px - 1px);
  594. font-size: -webkit-calc({select:font size}px - 1px);
  595. font-size: -o-calc({select:font size}px - 1px);
  596. font-size: calc({select:font size}px - 1px);
  597.  
  598. line-height: -moz-calc({select:font size}px + 8px);
  599. line-height: -webkit-calc({select:font size}px + 8px);
  600. line-height: -o-calc({select:font size}px + 8px);
  601. line-height: calc({select:font size}px + 8px); }
  602.  
  603.  
  604. /* TYPE: ASKS */
  605.  
  606. #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; }
  607.  
  608. #asker { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:0px; margin-left:-30px; margin-bottom:0px; padding-top:10px; padding-right:15px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  609.  
  610. #asker a { color:{color:posts}; font-weight:bold; }
  611.  
  612.  
  613. /* TYPE: LINKS */
  614.  
  615. .linktitle { color:{color:title}; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  616.  
  617. font-size: -moz-calc({select:font size}px + 20px);
  618. font-size: -webkit-calc({select:font size}px + 20px);
  619. font-size: -o-calc({select:font size}px + 20px);
  620. font-size: calc({select:font size}px + 20px); }
  621.  
  622.  
  623. /*TYPE: AUDIO */
  624.  
  625. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:35px; overflow:hidden; opacity:.6; z-index:9; }
  626.  
  627. .albumart img { position:relative; width:65px; height:65px; background:{color:posts}; margin-top:-64px; margin-left:10px; padding:10px; border:1px solid {color:borders}; filter: grayscale(0%); }
  628.  
  629. .trackinfo { position:relative; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} height:66px; top:2px; background:{color:posts}; color:{color:text}; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; }
  630.  
  631. .trackname { position:relative; padding-top:15px; font-size:{select:font size}px; font-weight:bold; text-transform:uppercase; text-align:center; line-height:12px; letter-spacing:2px; }
  632.  
  633. .artist { font-size:7px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  634.  
  635.  
  636. /* TYPE: VIDEOS */
  637.  
  638. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  639.  
  640. .tumblr_video_container:hover {
  641.  
  642. {block:ifGrayscale} filter: grayscale(0%);
  643. -webkit-transition: all .8s;
  644. -moz-transition: all .8s;
  645. -o-transition: all .8s;
  646. -ms-transition: all .8s;
  647. transition: all .8s; {/block:ifGrayscale} }
  648.  
  649.  
  650.  
  651.  
  652.  
  653. /*--- PT.8: TABS ---*/
  654.  
  655.  
  656.  
  657.  
  658. /*TAB + CLOSE CONTENT*/
  659.  
  660. .tabcontent { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:570px; top:0px; right:0px; background:{color:container}; z-index:9999; display:none; animation: fadeEffect 1s; }
  661.  
  662. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  663.  
  664. .tabcontent button { position:absolute; top:165px; left:400px; padding:15px; background:transparent; color:{color:accent2}; border:none; z-index:99999; font-family:"abril fatface", cursive; text-transform:uppercase; font-size:13px; font-weight:bold; letter-spacing:1px; }
  665.  
  666. .tabcontent button:hover { cursor:pointer; }
  667.  
  668. .tabcontent button:focus { outline:0; }
  669.  
  670.  
  671. /* NAVI SECTION */
  672.  
  673. .tableft { position:absolute; width:400px; height:570px; top:0px; left:0px; background:transparent; border-right:1px solid {color:borders}; }
  674.  
  675. .ntitle { position:absolute; width:350px; height:auto; top:25px; left:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; z-index:999; color:{color:container}; letter-spacing:1px; text-transform:uppercase; }
  676.  
  677. .bar { position:absolute; width:400px; height:495px; left:0px; bottom:75px; background:{color:accent}; }
  678.  
  679. .bar1 { position:absolute; width:400px; height:25px; left:0px; bottom:50px; background:{color:accent};opacity:0.75; }
  680.  
  681. .bar2 { position:absolute; width:400px; height:25px; left:0px; bottom:25px; background:{color:accent}; opacity:0.5; }
  682.  
  683. .bar3 { position:absolute; width:400px; height:25px; left:0px; bottom:0px; background:{color:accent}; opacity:0.25; }
  684.  
  685. .png { position:absolute; width:250px; height:250px; background-color:transparent; bottom:-20px; left:-70px; z-index:99999999999; }
  686.  
  687. .links { position:absolute; bottom:145px; right:55px; width:250px; height:220px; z-index:99999; }
  688.  
  689. .links li { display:block; float:left; width:250px; height:18px; padding:5px; margin:5px; text-align:right; line-height:15px; }
  690.  
  691. .links a { color:{color:container}; font-size:13px; font-family:'montserrat'; letter-spacing:1px; }
  692.  
  693. .links a:hover { font-style:italic;
  694.  
  695. -webkit-transition: all .8s;
  696. -moz-transition: all .8s;
  697. -o-transition: all .8s;
  698. -ms-transition: all .8s;
  699. transition: all .8s; }
  700.  
  701.  
  702. /* MUSE SECTION */
  703.  
  704. .mtitle { position:absolute; width:350px; height:auto; bottom:25px; right:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; text-align:right; z-index:999; color:{color:accent}; letter-spacing:1px; text-transform:uppercase; }
  705.  
  706. .header { position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:165px; top:0px; right:0px; background:{color:container}; }
  707.  
  708. .header img { width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:165px; }
  709.  
  710.  
  711. /* POPUP STYLING */
  712.  
  713. .ptitle { position:absolute; width:350px; height:auto; top:25px; left:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; z-index:999; color:{color:container}; letter-spacing:1px; text-transform:uppercase; }
  714.  
  715. .mstats { position:absolute; top:245px; left:460px; width:150px; {block:if400pxPosts} width:200px; {/block:if400pxPosts} height:115px; z-index:99999; overflow:scroll; color:{color:text}; }
  716.  
  717. .mstats li { display:block; float:left; width:150px; {block:if400pxPosts} width:200px; {/block:if400pxPosts} height:18px; padding:5px 0px 5px 0px; margin:0px; line-height:15px; }
  718.  
  719. .mstats b { font-size:12px; padding-right:5px; color:{color:accent2}; font-family:"abril fatface", cursive; text-transform:uppercase; letter-spacing:1px; }
  720.  
  721. .mlinks { position:absolute; top:245px; right:75px; width:110px; {block:if400pxPosts} width:160px; {/block:if400pxPosts} height:auto; z-index:99999; }
  722.  
  723. .mlinks li { display:block; float:left; width:110px; {block:if400pxPosts} width:160px; {/block:if400pxPosts} height:18px; padding:5px 0px 5px 0px; margin:0px; text-align:right; line-height:15px; }
  724.  
  725. .mlinks a { color:{color:accent}; font-size:10px; font-family:'montserrat'; letter-spacing:1px; }
  726.  
  727. .mlinks a:hover { letter-spacing:2px;
  728.  
  729. -webkit-transition: all .8s;
  730. -moz-transition: all .8s;
  731. -o-transition: all .8s;
  732. -ms-transition: all .8s;
  733. transition: all .8s; }
  734.  
  735. .mdesc { position:absolute; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:110px; right:50px; bottom:75px; overflow:scroll; color:{color:text};
  736.  
  737. line-height: -moz-calc({select:font size}px + 8px);
  738. line-height: -webkit-calc({select:font size}px + 8px);
  739. line-height: -o-calc({select:font size}px + 8px);
  740. line-height: calc({select:font size}px + 8px); }
  741.  
  742.  
  743.  
  744.  
  745. /*--- PT.9: CUSTOM CSS ---*/
  746.  
  747.  
  748.  
  749.  
  750. {CustomCSS}
  751. </style></head><body>
  752.  
  753.  
  754.  
  755.  
  756. <div id="border"> </div>
  757. <div id="container">
  758.  
  759. <div class="sidebar">
  760.  
  761. <div class="head"> </div>
  762. <div class="bar4"> </div>
  763. <div class="bar5"> </div>
  764. <div class="bar6"> </div>
  765. <div class="square"> </div>
  766.  
  767. <div class="graph"> <img src="{image:sidebar}" draggable="false">
  768. <div class="polaroid"> {text:polaroid text} </div> </div>
  769.  
  770. <div class="title"> {text:title}, </div>
  771. <div class="desc"> {text:desc} </div>
  772.  
  773. <div class="tab">
  774. <li><a href="/" title="refresh"> .01 </a></li>
  775. <li><a href="/ask" title="contact"> .02 </a></li>
  776. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> .03 </a></li>
  777. <li><a href="{text:link url}" title="{text:link hover title}"> .04 </a></li>
  778. </div>
  779.  
  780. </div>
  781.  
  782.  
  783.  
  784.  
  785. <!--- NAVIGATION TAB SECTION --->
  786.  
  787. <div id="navi" class="tabcontent"> <button> close the tab </button>
  788.  
  789. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  790.  
  791. <div class="tableft">
  792.  
  793. <!-- note: edit your navi title here! -->
  794. <div class="ntitle"> 01. atlas </div>
  795.  
  796.  
  797. <!-- note: edit your navi tab links here! -->
  798. <div class="links">
  799.  
  800. <li> <a href="/"> 01. link one.</a> </li>
  801. <li> <a href="/"> 02. link two.</a> </li>
  802. <li> <a href="/"> 03. link three.</a> </li>
  803. <li> <a href="/"> 04. link four.</a> </li>
  804. <li> <a href="/"> 05. link five.</a> </li>
  805. <li> <a href="/"> 06. link six.</a> </li>
  806. <li> <a href="/"> 07. link seven.</a> </li>
  807.  
  808. </div>
  809.  
  810.  
  811. <div class="bar"> </div>
  812. <div class="bar1"> </div>
  813. <div class="bar2"> </div>
  814. <div class="bar3"> </div>
  815.  
  816. </div>
  817.  
  818.  
  819. <!--- MUSE TAB SECTION --->
  820.  
  821. <div class="header"> {block:ifNot400pxPosts} <img src="{image:header}" draggable="false"> {/block:ifNot400pxPosts} {block:if400pxPosts} <img src="{image:header 400px}" draggable="false"> {/block:if400pxPosts} </div>
  822.  
  823.  
  824.  
  825. <!-- note: edit your about title here! -->
  826. <div class="mtitle"> 02. ABOUT </div>
  827.  
  828.  
  829. <div class="mstats">
  830.  
  831. <li> <b>name:</b> first last. </li>
  832. <li> <b>age:</b> age. </li>
  833. <li> <b>pronouns:</b> pronouns. </li>
  834. <li> <b>gender:</b> gender. </li>
  835. <li> <b>zodiac:</b> sign. </li>
  836.  
  837. </div>
  838.  
  839.  
  840. <div class="mlinks">
  841.  
  842. <li> <a href="/"> #links.</a> </li>
  843. <li> <a href="/"> #links.</a> </li>
  844. <li> <a href="/"> #links.</a> </li>
  845. <li> <a href="/"> #links.</a> </li>
  846.  
  847. </div>
  848.  
  849.  
  850. <div class="mdesc"> muse bio or tldr can go here! or if this is an ' about the mun ' section you can put a wid, rules, etc !! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  851.  
  852.  
  853. </div>
  854.  
  855.  
  856. <!--- POSTS --->
  857.  
  858. <div id="posts">
  859. {block:Posts}
  860. <div class="entry">
  861.  
  862.  
  863. <!-- TOP INFO --->
  864.  
  865. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="view the notes."> {NoteCountWithLabel} </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>
  866.  
  867. <!-- TEXT --->
  868.  
  869. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  870.  
  871. <!-- PHOTOS --->
  872.  
  873. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  874.  
  875. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  876.  
  877. <!-- QUOTE --->
  878.  
  879. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  880.  
  881. <!-- LINKS --->
  882.  
  883. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  884. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  885.  
  886. <!-- CHATS --->
  887.  
  888. {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}
  889. {Line}</li>{/block:Lines}</ul><div style="font-size:8px; color:{color:text}; margin-top:-10px; margin-left:230px; letter-spacing:1px; text-transform:uppercase"><span class="fas fa-check"></span> delivered.</div>{/block:Chat}
  890.  
  891. <!-- AUDIO --->
  892.  
  893. {block:Audio} {block:AudioPlayer} <div class="playbutton">{AudioPlayerGrey}</div> {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt} <div class="trackinfo"> <div class="trackname"> <span class="fas fa-music" style="font-size:7px"></span> {block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist"> {block:Artist}{Artist}{/block:Artist} </div></div> {/block:AudioPlayer}{/block:Audio}
  894.  
  895. <!-- VIDEO --->
  896.  
  897. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  898.  
  899. <!-- ASKS --->
  900.  
  901. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  902.  
  903.  
  904. {block:Caption}{Caption}{/block:Caption}
  905.  
  906. <!-- READ MORE --->
  907.  
  908. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  909.  
  910. <!-- BOTTOM INFO --->
  911.  
  912. <div class="bottominfo"> posted <a href="{Permalink}" title="{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}.">{TimeAgo}</a> </div>
  913.  
  914. <!-- TAGS --->
  915.  
  916. {block:HasTags} <div class="tags"> <span> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}<br></div>{/block:HasTags}
  917.  
  918. <!-- POST NOTES --->
  919.  
  920. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  921.  
  922.  
  923. </div>
  924. {/block:Posts}
  925.  
  926.  
  927.  
  928.  
  929. <!-- PAGINATION --->
  930.  
  931. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i data-feather="chevron-left" style="width:18px; height:18px; padding-bottom:20px;"></i> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <i data-feather="chevron-right" style="width:18px; height:18px; padding-bottom:20px;"></i> </a> {/block:nextpage} </div> {/block:pagination}
  932.  
  933.  
  934.  
  935.  
  936. </div>
  937. </div>
  938.  
  939.  
  940.  
  941. <div id="cred">
  942. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  943. </div>
  944.  
  945.  
  946.  
  947.  
  948. <script> feather.replace() </script>
  949.  
  950.  
  951.  
  952.  
  953. </body>
  954. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!